issue#82 게시글 리팩토링

.gitignore

@@ -32,4 +32,7 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+next-env.d.ts
+
+# api docs
+/src/models

package.json

@@ -22,7 +22,7 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-select": "^2.1.1",
-    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.4",
     "@tanstack/react-query": "^5.51.21",
@@ -38,7 +38,7 @@
     "next": "^14.2.21",
     "next-safe-action": "^7.4.0",
     "react": "^18",
-    "react-day-picker": "^9.0.8",
+    "react-day-picker": "^8.10.1",
     "react-dom": "^18",
     "react-hook-form": "^7.52.1",
     "swagger-typescript-api": "^13.0.23",

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

@@ -1,11 +1,7 @@
 import { useMutation, useQuery } from '@tanstack/react-query'
 import { usePathname, useRouter } from 'next/navigation'
 
-import {
-  ActivityBreadcrumb,
-  BoardHeroSkeleton,
-  NameLabel,
-} from '@/components/feature'
+import { ActivityBreadcrumb, NameLabel } from '@/components/feature'
 import { Button, Separator, useToast } from '@/components/ui'
 import { DATA_ERROR_MESSAGES } from '@/constant/errorMessage'
 import { queryClient } from '@/lib/query-client'
@@ -81,3 +77,14 @@ export const BoardHero = ({ boardId, activityId }: BoardHeroProps) => {
     </div>
   )
 }
+
+export const BoardHeroSkeleton = () => {
+  return (
+    <div className="flex flex-col">
+      <Separator variant="dark" />
+      <div className="h-40"></div>
+      <div className="h-0.5"></div>
+      <Separator variant="dark" />
+    </div>
+  )
+}

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

@@ -10,7 +10,7 @@ export const CreatePostButton = () => {
   const pathName = usePathname()
   const router = useRouter()
 
-  const { role } = useMyInfoStore.getState().myInfo
+  const { role } = useMyInfoStore((state) => state.myInfo)
 
   return (
     <div className="mb-20 flex justify-end">

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

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 import { useSearchParams } from 'next/navigation'
 
-import { PaginationButtons } from '@/components/common'
+import { PaginationButtons, Spinner } from '@/components/common'
 import { PostTable } from '@/components/feature'
 import { DATA_ERROR_MESSAGES } from '@/constant/errorMessage'
 import { activityPostQuries } from '@/service/api'
@@ -22,7 +22,11 @@ export const ActivityPostListSection = ({
   const { data, status } = useQuery(activityPostQuries.list({ boardId, page }))
 
   if (status === 'pending')
-    return <div className="flex w-full justify-center">loading...</div>
+    return (
+      <div className="flex w-full justify-center">
+        <Spinner />
+      </div>
+    )
 
   if (!data) {
     throw new Error(DATA_ERROR_MESSAGES.POST_NOT_FOUND)