Merge remote-tracking branch 'origin/develop' into feature/#63-admin-…

…error-boundary

package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "swagger-typescript-api": "swagger-typescript-api -p https://www.knu-haedal.com/api/v3/api-docs -r -o ./src/models --modular -d --extract-request-body --extract-response-body --extract-response-error --axios"
   },
   "dependencies": {
     "@blocknote/core": "^0.21.0",
@@ -34,11 +35,11 @@
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.1.8",
     "next": "14.2.5",
-    "next-safe-action": "^7.4.0",
     "react": "^18",
     "react-day-picker": "^9.0.8",
     "react-dom": "^18",
     "react-hook-form": "^7.52.1",
+    "swagger-typescript-api": "^13.0.23",
     "tailwind-merge": "^2.4.0",
     "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss-animate": "^1.0.7",
@@ -61,6 +62,6 @@
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "typescript": "5.5"
   }
 }

src/app/(main)/_components/header/navigation/Navigation.tsx

@@ -15,7 +15,7 @@ export const Navigation = () => {
 export const navigationLinks = [
   {
     name: '활동',
-    href: '/activity/init',
+    href: '/activity/-1/-1',
   },
   {
     name: '행사',

src/app/(main)/_components/header/profile-button/dropdown-menu/DropdownMenu.tsx

@@ -24,7 +24,7 @@ export const ProfileDropdownMenu = () => {
         {/* <UserAvatar userImage={userImageUrl} /> */}
       </DropdownMenuTrigger>
       <DropdownMenuContent className="mt-4">
-        {role === '해구르르' && (
+        {role === 'ROLE_ADMIN' && (
           <DropdownMenuItem>
             <Link href={'/admin/member'} className="flex items-center gap-2">
               <GearIcon />

src/app/(main)/_components/header/profile-button/dropdown-menu/LogoutButton.tsx

@@ -1,17 +1,21 @@
 'use client'
 
+import { useMutation } from '@tanstack/react-query'
 import { useRouter } from 'next/navigation'
 
-import { useAuthStore } from '@/store/auth'
+import { logoutApi } from '@/service/api'
 import { useMyInfoStore } from '@/store/myInfo'
 
 export const LogoutButton = () => {
   const router = useRouter()
-  const clearAccessToken = useAuthStore((state) => state.clearAccessToken)
   const clearMyInfo = useMyInfoStore((state) => state.clearMyInfo)
 
+  const { mutate: logout } = useMutation({
+    mutationFn: logoutApi,
+  })
+
   const onClick = () => {
-    clearAccessToken()
+    logout()
     clearMyInfo()
     router.refresh()
   }

src/app/(main)/activity/[semesterName]/[activityId]/_components/ActivityList.tsx → src/app/(main)/activity/[semesterId]/[activityId]/_components/ActivityList.tsx

@@ -1,20 +1,23 @@
 'use client'
 
+import { useQuery } from '@tanstack/react-query'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 
 import { ActivitySkeleton } from '@/components/feature'
 import { Button, buttonVariants } from '@/components/ui'
 import { cn } from '@/lib/utils'
-import { useGetActivities } from '@/service/data/activity'
+import { activityQueries } from '@/service/api'
 
 type ActivityListProps = {
   semesterId: number
   activityId: number
 }
 
 export const ActivityList = ({ semesterId, activityId }: ActivityListProps) => {
-  const { data: activities, status } = useGetActivities(semesterId)
+  const { data: activities, status } = useQuery(
+    activityQueries.list({ semesterId }),
+  )
 
   const pathName = usePathname()
   const basePath = pathName.split('/').slice(0, -1).join('/')

src/app/(main)/activity/[semesterName]/[activityId]/_components/BoardList.tsx → src/app/(main)/activity/[semesterId]/[activityId]/_components/BoardList.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect } from 'react'
 
+import { useQuery } from '@tanstack/react-query'
 import Image from 'next/image'
 import Link from 'next/link'
 import { usePathname, useSearchParams } from 'next/navigation'
@@ -10,8 +11,7 @@ import { PaginationButtons } from '@/components/common'
 import { BoardSkeleton, NameLabel } from '@/components/feature'
 import { Card, CardContent, CardTitle } from '@/components/ui'
 import { queryClient } from '@/lib/query-client'
-import { useGetBoardsPaging } from '@/service/data/boards'
-import { getBoardsPaging } from '@/service/server/board'
+import { boardQueries } from '@/service/api'
 
 type ActivityBoardListProps = {
   activityId: number
@@ -25,17 +25,13 @@ export const ActivityBoardList = ({ activityId }: ActivityBoardListProps) => {
   const page =
     Number(params.get('page')) > 0 ? Number(params.get('page')) - 1 : 0
 
-  const { data, status, isPlaceholderData } = useGetBoardsPaging({
-    activityId: activityId,
-    page,
-  })
+  const { data, status, isPlaceholderData } = useQuery(
+    boardQueries.list({ activityId, page }),
+  )
 
   useEffect(() => {
     if (!isPlaceholderData && data?.nextPageToken) {
-      queryClient.prefetchQuery({
-        queryKey: ['boards', activityId, page],
-        queryFn: () => getBoardsPaging({ activityId, page }),
-      })
+      queryClient.prefetchQuery(boardQueries.list({ activityId, page }))
     }
   }, [data, isPlaceholderData, page, activityId])
 

src/app/(main)/activity/[semesterName]/[activityId]/_components/index.ts → src/app/(main)/activity/[semesterId]/[activityId]/_components/index.ts

@@ -2,3 +2,4 @@ export { ActivityList } from './ActivityList'
 export { ActivityBoardList } from './BoardList'
 export { default as ActivityErrorFallback } from './ErrorFallback'
 export { ActivityHero } from './ActivityHero'
+export * from './semester'

src/app/(main)/activity/[semesterId]/[activityId]/_components/semester/RedirectSemester.tsx

@@ -0,0 +1,21 @@
+import { useEffect } from 'react'
+
+import { useRouter } from 'next/navigation'
+
+import { ActivitySemesterSkeleton } from '@/components/feature'
+import { Semester } from '@/types/activity'
+
+interface RedirectSemesterProps {
+  semesters: Semester[]
+}
+export const RedirectSemester = ({ semesters }: RedirectSemesterProps) => {
+  const router = useRouter()
+
+  useEffect(() => {
+    const lastSemester = semesters[semesters.length - 1]
+
+    router.push(`/activity/${lastSemester.semesterId}/-1`)
+  }, [router, semesters])
+
+  return <ActivitySemesterSkeleton />
+}

src/components/feature/activity/SemesterPagination.tsx → src/app/(main)/activity/[semesterId]/[activityId]/_components/semester/SemesterList.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { ActivitySemesterSkeleton } from '@/components/feature'
 import {
   Pagination,
   PaginationContent,
@@ -12,58 +11,49 @@ import {
 import { cn } from '@/lib/utils'
 import { Semester } from '@/types/activity'
 
-type SemesterPaginationProps = {
-  semesterName: string
+type SemesterListProps = {
+  semester: Semester
   semesters: Semester[]
 }
 
-export const SemesterPagination = ({
-  semesterName,
-  semesters,
-}: SemesterPaginationProps) => {
-  const currentSemester = semesters.find(
-    (semester) => semester.semesterName === semesterName,
-  )
-  if (!currentSemester) return <ActivitySemesterSkeleton />
-
-  const previousIndex = Math.max((currentSemester.index ?? 0) - 1, 0)
+export const SemesterList = ({ semester, semesters }: SemesterListProps) => {
+  const previousIndex = Math.max((semester.index ?? 0) - 1, 0)
   const nextIndex = Math.min(
-    (currentSemester.index ?? semesters.length - 1) + 1,
+    (semester.index ?? semesters.length - 1) + 1,
     semesters.length - 1,
   )
 
-  const visibleSemesters = getVisibleSemesterList(semesters, currentSemester)
+  const visibleSemesters = getVisibleSemesterList(semesters, semester)
 
   return (
     <Pagination className="pt-3">
       <PaginationContent>
         <PaginationItem>
           <PaginationPrevious
-            href={`/activity/${semesters[previousIndex].semesterName}`}
-            disabled={currentSemester?.index === 0}
+            href={`/activity/${semesters[previousIndex].semesterId}/-1`}
+            disabled={semester?.index === 0}
           />
         </PaginationItem>
         <PaginationItem>
-          {visibleSemesters?.map((semester) => {
-            const isActive =
-              currentSemester?.semesterName === semester.semesterName
+          {visibleSemesters?.map((visibleSemester) => {
+            const isActive = semester.semesterId === visibleSemester.semesterId
 
             return (
               <PaginationLink
-                key={semester.semesterId}
-                href={`/activity/${semester.semesterName}`}
+                key={visibleSemester.semesterId}
+                href={`/activity/${visibleSemester.semesterId}/-1`}
                 isActive={isActive}
                 className={cn(!isActive && 'text-primary/60')}
               >
-                {semester.semesterName}
+                {visibleSemester.semesterName}
               </PaginationLink>
             )
           })}
         </PaginationItem>
         <PaginationItem>
           <PaginationNext
-            href={`/activity/${semesters[nextIndex].semesterName}`}
-            disabled={currentSemester?.index === semesters.length - 1}
+            href={`/activity/${semesters[nextIndex].semesterId}/-1`}
+            disabled={semester.index === semesters.length - 1}
           />
         </PaginationItem>
       </PaginationContent>

src/app/(main)/activity/[semesterId]/[activityId]/_components/semester/index.ts

@@ -0,0 +1 @@
+export { SemesterList } from './SemesterList'

src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/_components/BoardHero.tsx → src/app/(main)/activity/[semesterId]/[activityId]/boards/[boardId]/_components/BoardHero.tsx

@@ -1,7 +1,4 @@
-import { useEffect } from 'react'
-
-import { useQuery } from '@tanstack/react-query'
-import { useAction } from 'next-safe-action/hooks'
+import { useMutation, useQuery } from '@tanstack/react-query'
 import { usePathname, useRouter } from 'next/navigation'
 
 import {
@@ -12,8 +9,7 @@ import {
 import { Button, Separator, useToast } from '@/components/ui'
 import { DATA_ERROR_MESSAGES } from '@/constant/errorMessage'
 import { queryClient } from '@/lib/query-client'
-import { boardDetailQuery } from '@/service/data/boards'
-import { deleteBoardAction } from '@/service/server/board/delete-board'
+import { boardQueries, deleteBoardApi } from '@/service/api'
 import { useMyInfoStore } from '@/store/myInfo'
 
 type BoardHeroProps = {
@@ -23,32 +19,31 @@ type BoardHeroProps = {
 
 export const BoardHero = ({ boardId, activityId }: BoardHeroProps) => {
   const { role } = useMyInfoStore((state) => state.getMyInfo())
+
   const { data: boardDetail, status } = useQuery(
-    boardDetailQuery(activityId, boardId),
+    boardQueries.detail({ activityId, boardId }),
   )
 
-  const {
-    execute: deleteBoard,
-    result,
-    isExecuting,
-  } = useAction(deleteBoardAction)
+  const { mutate: deleteBoard, isPending } = useMutation({
+    mutationFn: deleteBoardApi,
+    onSuccess: (data) => onSuccess(data.message),
+  })
+
   const router = useRouter()
   const pathName = usePathname()
-  const activityPath = pathName.split('/').slice(0, 4).join('/')
   const { toast } = useToast()
 
-  useEffect(() => {
-    if (result.data?.isSuccess) {
-      toast({
-        title: result.data.message,
-        duration: 2000,
-      })
+  const onSuccess = (message: string) => {
+    toast({
+      title: message,
+      duration: 2000,
+    })
+
+    queryClient.invalidateQueries({ queryKey: boardQueries.all() })
 
-      queryClient.invalidateQueries({ queryKey: ['boards', activityId] })
-      router.push(activityPath)
-      return
-    }
-  }, [result, router, toast, activityPath, activityId])
+    const activityPath = pathName.split('/').slice(0, 4).join('/')
+    router.push(activityPath)
+  }
 
   if (status === 'pending') return <BoardHeroSkeleton />
 
@@ -70,13 +65,13 @@ export const BoardHero = ({ boardId, activityId }: BoardHeroProps) => {
         </div>
         <div className="py-3 text-primary/70">{boardDetail.boardIntro}</div>
       </div>
-      {role === '해구르르' && (
+      {role === 'ROLE_ADMIN' && (
         <div className="flex justify-end">
           <Button
             variant="link"
             className="text-primary/60"
             onClick={() => deleteBoard({ boardId, activityId })}
-            disabled={isExecuting}
+            disabled={isPending}
           >
             게시판 삭제하기
           </Button>

src/app/(main)/activity/[semesterName]/[activityId]/boards/[boardId]/_components/PostList.tsx → src/app/(main)/activity/[semesterId]/[activityId]/boards/[boardId]/_components/PostList.tsx

@@ -1,9 +1,10 @@
+import { useQuery } from '@tanstack/react-query'
 import { useSearchParams } from 'next/navigation'
 
 import { PaginationButtons } from '@/components/common'
 import { PostTable } from '@/components/feature'
 import { DATA_ERROR_MESSAGES } from '@/constant/errorMessage'
-import { useGetActivityPostsPaging } from '@/service/data/post'
+import { activityPostQuries } from '@/service/api'
 
 type ActivityPostListSectionProps = {
   boardId: number
@@ -18,10 +19,7 @@ export const ActivityPostListSection = ({
   const page =
     Number(params.get('page')) > 0 ? Number(params.get('page')) - 1 : 0
 
-  const { data, status } = useGetActivityPostsPaging({
-    boardId,
-    page,
-  })
+  const { data, status } = useQuery(activityPostQuries.list({ boardId, page }))
 
   if (status === 'pending')
     return <div className="flex w-full justify-center">loading...</div>