From 4e482d4d56e7072416b40726d440834cde6668d1 Mon Sep 17 00:00:00 2001
From: ajin <aj5210@naver.com>
Date: Sat, 17 Aug 2024 02:05:06 +0900
Subject: [PATCH] =?UTF-8?q?:recycle:=20Refactor(create-board):=20error-bou?=
 =?UTF-8?q?ndary=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

related to: #169
---
 .../_components/ActivityErrorFallback.tsx     | 19 ++++++++++++-------
 .../_components/ActivitySection/index.tsx     |  2 +-
 .../_components/CreateBoardButton/index.tsx   | 10 +++++++++-
 .../[semesterName]/[activityId]/layout.tsx    |  4 +++-
 .../components/ReactQueryClientProvider.tsx   |  4 +++-
 src/service/data/activity.ts                  |  4 +++-
 6 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/app/(main)/activity/[semesterName]/[activityId]/_components/ActivityErrorFallback.tsx b/src/app/(main)/activity/[semesterName]/[activityId]/_components/ActivityErrorFallback.tsx
index 62e71dd..14dbb56 100644
--- a/src/app/(main)/activity/[semesterName]/[activityId]/_components/ActivityErrorFallback.tsx
+++ b/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>
   )
diff --git a/src/app/(main)/activity/[semesterName]/[activityId]/_components/ActivitySection/index.tsx b/src/app/(main)/activity/[semesterName]/[activityId]/_components/ActivitySection/index.tsx
index 9267a41..b5c0886 100644
--- a/src/app/(main)/activity/[semesterName]/[activityId]/_components/ActivitySection/index.tsx
+++ b/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>
diff --git a/src/app/(main)/activity/[semesterName]/[activityId]/_components/CreateBoardButton/index.tsx b/src/app/(main)/activity/[semesterName]/[activityId]/_components/CreateBoardButton/index.tsx
index cadbaca..098f9bd 100644
--- a/src/app/(main)/activity/[semesterName]/[activityId]/_components/CreateBoardButton/index.tsx
+++ b/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>
diff --git a/src/app/(main)/activity/[semesterName]/[activityId]/layout.tsx b/src/app/(main)/activity/[semesterName]/[activityId]/layout.tsx
index 4cd1f31..03f5b08 100644
--- a/src/app/(main)/activity/[semesterName]/[activityId]/layout.tsx
+++ b/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>
diff --git a/src/service/components/ReactQueryClientProvider.tsx b/src/service/components/ReactQueryClientProvider.tsx
index 381506d..4c761e5 100644
--- a/src/service/components/ReactQueryClientProvider.tsx
+++ b/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,
     },
   },
 })
diff --git a/src/service/data/activity.ts b/src/service/data/activity.ts
index 96a75fb..2f62522 100644
--- a/src/service/data/activity.ts
+++ b/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'