[Refactor] create board (#178)

close #167 

* ♻️ Refactor(create-board): error-boundary 로직 수정

related to: #169

* ♻️ Refactor: 페이지네이션 버튼 공통 컴포넌트로 분리

* 🚚 Rename: table content 컴포넌트 위치 이동

* 🚚 Rename(board): 활동 게시판 페이지 구조 수정

related to: #167

* ✨ Feat(board): 활동 게시글 불러오기 추가

related to: #167

* ♻️ Refactor: post table 공통 컴포넌트로 분리

* 💄 Design(board): 활동 게시글 테이블 UI 추가

related to: #167

src/app/(main)/activity/[semesterName]/[activityId]/_components/ActivityErrorFallback.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import { useEffect } from 'react'
+
 import { usePathname, useRouter } from 'next/navigation'
 
 import { Button } from '@/components/ui/button'
@@ -15,13 +17,16 @@ const ActivityErrorFallback = ({
   const pathName = usePathname()
   const router = useRouter()
 
-  if (error?.message === DATA_ERROR_MESSAGES.ACTIVITY_NOT_FOUND) {
-    const semesterName = getSemesterNameFromPath(pathName)
-    const currentSemester = useCurrentSemester(semesterName)
-    const {} = useGetActivities(Number(currentSemester.semesterId))
+  const semesterName = getSemesterNameFromPath(pathName)
+  const currentSemester = useCurrentSemester(semesterName)
+
+  useGetActivities(Number(currentSemester.semesterId))
 
-    resetErrorBoundary()
-  }
+  useEffect(() => {
+    if (error?.message === DATA_ERROR_MESSAGES.ACTIVITY_NOT_FOUND) {
+      resetErrorBoundary()
+    }
+  }, [error])
 
   return (
     <div className="flex flex-col items-center gap-6 pt-40">
@@ -30,7 +35,7 @@ const ActivityErrorFallback = ({
         <Button variant="secondary" onClick={() => router.back()}>
           뒤로가기
         </Button>
-        <Button onClick={() => router.push('/auth/login')}> 로그인 </Button>
+        <Button onClick={() => router.push('/auth/login')}>로그인</Button>
       </div>
     </div>
   )

src/app/(main)/activity/[semesterName]/[activityId]/_components/ActivitySection/index.tsx

@@ -13,7 +13,7 @@ export const ActivitySection = ({
   semesterId,
   activityId,
 }: ActivitySectionProps) => {
-  const { data: activities, status } = useGetActivities(semesterId)
+  const { data: activities } = useGetActivities(semesterId)
   const currentActivity = useCurrentActivity(semesterId, activityId)
 
   if (!activities?.length) return <div>활동이 없습니다.</div>

src/app/(main)/activity/[semesterName]/[activityId]/_components/BoardSection/index.tsx

@@ -1,20 +1,26 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 
+import { useSearchParams } from 'next/navigation'
+
+import { PaginationButtons } from '@/components/PaginationButtons'
 import { queryClient } from '@/service/components/ReactQueryClientProvider'
 import { useGetBoardsPaging } from '@/service/data/boards'
 import { getBoardsPaging } from '@/service/server/board'
 
 import { BoardList } from './BoardList/indext'
-import { BoardPaginationButton } from './BoardPaginationButton'
 
 type BoardSectionProps = {
   activityId: number
 }
 
 export const BoardSection = ({ activityId }: BoardSectionProps) => {
-  const [page, setPage] = useState(0)
+  const searchParams = useSearchParams()
+  const params = new URLSearchParams(searchParams)
+
+  const page =
+    Number(params.get('page')) > 0 ? Number(params.get('page')) - 1 : 0
 
   const { data, status, isPlaceholderData } = useGetBoardsPaging({
     activityId: activityId,
@@ -24,12 +30,8 @@ export const BoardSection = ({ activityId }: BoardSectionProps) => {
   useEffect(() => {
     if (!isPlaceholderData && data?.nextPageToken) {
       queryClient.prefetchQuery({
-        queryKey: ['boards', activityId, page + 1],
-        queryFn: () =>
-          getBoardsPaging({
-            activityId: activityId,
-            page: page + 1,
-          }),
+        queryKey: ['boards', activityId, page],
+        queryFn: () => getBoardsPaging({ activityId, page }),
       })
     }
   }, [data, isPlaceholderData, page, queryClient])
@@ -40,11 +42,7 @@ export const BoardSection = ({ activityId }: BoardSectionProps) => {
   return (
     <div className="flex w-full flex-col items-center gap-6">
       <BoardList boards={data.boards} />
-      <BoardPaginationButton
-        boardData={data}
-        currentPage={page}
-        setCurrentPage={setPage}
-      />
+      <PaginationButtons data={data} />
     </div>
   )
 }

src/app/(main)/activity/[semesterName]/[activityId]/_components/CreateBoardButton/index.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from 'react'
+
 import { usePathname, useRouter } from 'next/navigation'
 
 import { Button } from '@/components/ui/button'
@@ -6,14 +8,20 @@ import { useMyInfoStore } from '@/store/myInfo'
 export const CreateBoardButton = () => {
   const pathName = usePathname()
   const router = useRouter()
+
   const { role } = useMyInfoStore((state) => state.getMyInfo())
+  const [disabled, setDisabled] = useState(true)
+
+  useEffect(() => {
+    setDisabled(!(role === '해구르르' || role === '팀장'))
+  }, [])
 
   return (
     <div className="mb-20 flex w-full justify-end">
       <Button
         className="max-w-fit"
         onClick={() => router.push(`${pathName}/create-board`)}
-        disabled={!(role === '해구르르' || role === '팀장')}
+        disabled={disabled}
       >
         게시판 생성하기
       </Button>

src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/_components/ActivityPostSection/index.tsx

@@ -0,0 +1,53 @@
+import { useEffect } from 'react'
+
+import { useSearchParams } from 'next/navigation'
+
+import { PaginationButtons } from '@/components/PaginationButtons'
+import { PostTable } from '@/components/Table/PostTable'
+import { queryClient } from '@/service/components/ReactQueryClientProvider'
+import { useGetActivityPostsPaging } from '@/service/data/post'
+import { getActivityPostsPaging } from '@/service/server/post'
+
+type ActivityPostSectionProps = {
+  boardId: number
+}
+
+export const ActivityPostSection = ({ boardId }: ActivityPostSectionProps) => {
+  const searchParams = useSearchParams()
+  const params = new URLSearchParams(searchParams)
+
+  const page =
+    Number(params.get('page')) > 0 ? Number(params.get('page')) - 1 : 0
+
+  const { data, status, isPlaceholderData } = useGetActivityPostsPaging({
+    boardId,
+    page,
+  })
+
+  useEffect(() => {
+    if (!isPlaceholderData && data?.nextPageToken) {
+      queryClient.prefetchQuery({
+        queryKey: ['posts', boardId, page],
+        queryFn: () => getActivityPostsPaging({ boardId, page }),
+      })
+    }
+  }, [data, isPlaceholderData, page, queryClient])
+
+  if (status === 'pending')
+    return <div className="flex w-full justify-center">loading...</div>
+
+  if (!data) {
+    return <div>게시글이 없습니다.</div>
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PostTable
+        posts={data.posts}
+        pageNumber={page}
+        pageSize={data.pageInfo.pageSize}
+      />
+      <PaginationButtons data={data} />
+    </div>
+  )
+}

src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/create-post/_components/CreateActivityPostForm/index.tsx

@@ -10,6 +10,7 @@ import { usePathname, useRouter } from 'next/navigation'
 import { CreatePostForm } from '@/components/CreatePostForm'
 import { useToast } from '@/components/ui/use-toast'
 import { CreateActivityPost, CreateActivityPostSchema } from '@/schema/post'
+import { queryClient } from '@/service/components/ReactQueryClientProvider'
 import { createActivityPostAction } from '@/service/server/post/create-post'
 
 type CreateActivityPostFormProps = {
@@ -51,7 +52,9 @@ export const CreateActivityPostForm = ({
         title: result.data.message,
         duration: 3000,
       })
+      queryClient.invalidateQueries({ queryKey: ['posts', boardId, 0] })
       router.push(basePath)
+
       return
     }
 

src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/page.tsx

@@ -1,6 +1,10 @@
 'use client'
 
-import { BoardContent } from './_components/BoardContent'
+import { useBoardDetail } from '@/service/data/boards'
+
+import { ActivityPostSection } from './_components/ActivityPostSection'
+import { BoardHero } from './_components/BoardHero'
+import { CreatePostButton } from './_components/CreatePostButton'
 
 type BoardPageParams = {
   params: {
@@ -10,11 +14,20 @@ type BoardPageParams = {
 }
 
 const BoardPage = ({ params }: BoardPageParams) => {
+  const { data: boardDetail, status } = useBoardDetail({
+    activityId: Number(params.activityId),
+    boardId: Number(params.boardId),
+  })
+
+  if (status === 'pending') return <div>loading...</div>
+  if (!boardDetail) return <div>게시판 정보가 없습니다.</div>
+
   return (
-    <BoardContent
-      boardId={Number(params.boardId)}
-      activityId={Number(params.activityId)}
-    />
+    <div className="flex w-full flex-col gap-10 pt-10">
+      <BoardHero board={boardDetail} />
+      <ActivityPostSection boardId={Number(params.boardId)} />
+      <CreatePostButton boardId={Number(params.boardId)} />
+    </div>
   )
 }
 

src/app/(main)/activity/[semesterName]/[activityId]/layout.tsx

@@ -8,7 +8,9 @@ const ActivityLayout = ({ children }: { children: ReactNode }) => {
   return (
     <ErrorHandlingWrapper
       fallbackComponent={ActivityErrorFallback}
-      suspenseFallback={<div>loading...</div>}
+      suspenseFallback={
+        <div className="flex w-full justify-center pt-20">loading...</div>
+      }
     >
       {children}
     </ErrorHandlingWrapper>

src/app/(main)/event/board/_components/EventPostSection/index.tsx

@@ -4,13 +4,12 @@ import { useEffect } from 'react'
 
 import { useSearchParams } from 'next/navigation'
 
-import { TablePaginationButton } from '@/components/Table/TablePaginationButton'
+import { PaginationButtons } from '@/components/PaginationButtons'
+import { PostTable } from '@/components/Table/PostTable'
 import { queryClient } from '@/service/components/ReactQueryClientProvider'
 import { useGetPostsPaging } from '@/service/data/post'
 import { getPostsPaging } from '@/service/server/post'
 
-import { EventPostTable } from './EventPostTable'
-
 export const EventPostSection = () => {
   const postType = 'EVENT'
 
@@ -43,12 +42,12 @@ export const EventPostSection = () => {
 
   return (
     <div className="flex flex-col gap-6">
-      <EventPostTable
+      <PostTable
         posts={data.posts}
         pageNumber={page}
         pageSize={data.pageInfo.pageSize}
       />
-      <TablePaginationButton data={data} />
+      <PaginationButtons data={data} />
     </div>
   )
 }