Merge remote-tracking branch 'origin/develop' into feature#53-mypage-…

…form

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",
@@ -33,12 +34,14 @@
     "cmdk": "1.0.0",
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.1.8",
-    "next": "14.2.5",
+    "lodash": "^4.17.21",
+    "next": "^14.2.21",
     "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",
@@ -49,6 +52,7 @@
     "@next/eslint-plugin-next": "^14.2.5",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/lodash": "^4.17.13",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
@@ -61,6 +65,6 @@
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "typescript": "5.5"
   }
 }

src/app/(main)/_components/footer/LinkIcon.tsx → src/app/(main)/_components/footer/ChannelIcons.tsx

@@ -8,42 +8,42 @@ import {
 import { IconProps } from '@radix-ui/react-icons/dist/types'
 import Link from 'next/link'
 
-type LinkIconData = {
+type Channel = {
   id: number
+  name: string
   href: string
   icon: ComponentType<IconProps>
-  alt: string
 }
 
-export const LinkIcon = () => {
+export const ChannelIcons = () => {
   return (
-    <div className="absolute bottom-8 right-12 flex gap-4">
-      {linkIconData.map((linkIcon) => (
-        <Link href={linkIcon.href} key={linkIcon.id}>
-          <linkIcon.icon className="h-6 w-6" />
+    <div className="bottom-8 right-12 flex gap-4 sm:absolute">
+      {channels.map((channel) => (
+        <Link href={channel.href} key={channel.id}>
+          <channel.icon className="h-6 w-6" />
         </Link>
       ))}
     </div>
   )
 }
 
-const linkIconData: LinkIconData[] = [
+const channels: Channel[] = [
   {
     id: 0,
+    name: 'HAEDAL Email',
     href: 'mailto:[email protected]',
     icon: EnvelopeClosedIcon,
-    alt: 'HAEDAL Email Link',
   },
   {
     id: 1,
+    name: 'HAEDAL GitHub',
     href: 'https://github.com/KNU-HAEDAL',
     icon: GitHubLogoIcon,
-    alt: 'HAEDAL Github Link',
   },
   {
     id: 2,
+    name: 'HAEDAL Instagram',
     href: 'https://www.instagram.com/knu.haedal/',
     icon: InstagramLogoIcon,
-    alt: 'HAEDAL Instagram Link',
   },
 ]

src/app/(main)/_components/footer/Footer.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image'
 
+import { ChannelIcons } from './ChannelIcons'
 import { FooterDetail } from './FooterDetail'
-import { LinkIcon } from './LinkIcon'
 
 export const Footer = () => {
   return (
@@ -21,8 +21,10 @@ export const Footer = () => {
         </p>
       </div>
       <FooterDetail />
-      <p className="text-xs">© 2024 해달. All rights reserved.</p>
-      <LinkIcon />
+      <p className="text-xs text-slate-500">
+        © 2024 해달. All rights reserved.
+      </p>
+      <ChannelIcons />
     </div>
   )
 }

src/app/(main)/_components/footer/FooterDetail.tsx

@@ -6,11 +6,13 @@ type FooterDetailData = {
 
 export const FooterDetail = () => {
   return (
-    <div className="flex flex-col justify-start gap-6 text-sm sm:flex-col sm:gap-2">
+    <div className="flex flex-col justify-start gap-2 text-sm">
       {footerDetailData.map((detail) => (
         <div key={detail.id} className="flex flex-row gap-4">
-          <div className="font-semibold">{detail.label}</div>
-          <div>{detail.content}</div>
+          <span className="whitespace-nowrap break-keep font-semibold">
+            {detail.label}
+          </span>
+          <span className="break-keep">{detail.content}</span>
         </div>
       ))}
     </div>

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'