Chore(EventBoardArea): 게시판 영역 모듈화

src/app/(main)/event/_components/board-area/BoardArea.tsx

@@ -0,0 +1,31 @@
+import { Suspense, useState } from 'react'
+
+import {
+  CreateEventPostButton,
+  EventBoardHero,
+  EventGallery,
+  EventPostList,
+  EventViewSelector,
+} from '../../_components'
+
+type View = '갤러리' | '리스트'
+
+export const BoardArea = () => {
+  const [view, setView] = useState<View>('갤러리')
+
+  return (
+    <div className="flex w-full flex-col px-12 pb-20 pt-4">
+      <EventBoardHero />
+      <EventViewSelector view={view} setView={setView} />
+      {view === '갤러리' && <EventGallery />}
+      {view === '리스트' && (
+        <Suspense>
+          <EventPostList />
+        </Suspense>
+      )}
+      <div className="mt-8 flex w-full justify-end">
+        <CreateEventPostButton />
+      </div>
+    </div>
+  )
+}

src/app/(main)/event/_components/board-area/index.ts

@@ -0,0 +1 @@
+export { BoardArea as EventBoardArea } from './BoardArea'

src/app/(main)/event/_components/index.ts

@@ -1,3 +1,4 @@
+export * from './board-area'
 export * from './board-hero'
 export * from './carousel'
 export * from './create-post-button'

src/app/(main)/event/page.tsx

@@ -1,38 +1,12 @@
 'use client'
 
-import { Suspense, useState } from 'react'
-
-import {
-  CreateEventPostButton,
-  EventBoardHero,
-  EventGallery,
-  EventHero,
-  EventInstagramArea,
-  EventPostList,
-  EventViewSelector,
-} from './_components'
-
-type View = '갤러리' | '리스트'
+import { EventBoardArea, EventHero, EventInstagramArea } from './_components'
 
 const EventPage = () => {
-  const [view, setView] = useState<View>('갤러리')
-
   return (
     <div className="flex h-full w-full flex-1 flex-col items-center">
       <EventHero />
-      <div className="flex w-full flex-col px-12 pb-20 pt-4">
-        <EventBoardHero />
-        <EventViewSelector view={view} setView={setView} />
-        {view === '갤러리' && <EventGallery />}
-        {view === '리스트' && (
-          <Suspense>
-            <EventPostList />
-          </Suspense>
-        )}
-        <div className="mt-8 flex w-full justify-end">
-          <CreateEventPostButton />
-        </div>
-      </div>
+      <EventBoardArea />
       <EventInstagramArea />
     </div>
   )