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

related to: #169

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/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]/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/service/components/ReactQueryClientProvider.tsx

@@ -7,8 +7,10 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      retry: 0,
+      retry: 1,
       staleTime: 1000 * 60 * 3,
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
     },
   },
 })

src/service/data/activity.ts

@@ -1,4 +1,6 @@
-import { queryOptions, useQuery, useSuspenseQuery } from '@tanstack/react-query'
+'use client'
+
+import { queryOptions, useSuspenseQuery } from '@tanstack/react-query'
 
 import { DATA_ERROR_MESSAGES } from '@/constant/errorMessage'
 import { queryClient } from '@/service/components/ReactQueryClientProvider'