[FE-245] feat: 탈퇴하기 ProtectedRoute 적용

Author: sookyeonghwang

src/pages/Setting/Withdraw/Withdraw.tsx

@@ -43,9 +43,7 @@ const Withdraw = () => {
       <section id="withdraw-navigate-button" className="mt-[180px] px-6">
         <Button
           property="danger"
-          onClick={() =>
-            navigate('/setting/withdraw/check', { state, replace: true })
-          }
+          onClick={() => navigate('/setting/withdraw/check', { state })}
         >
           탈퇴하기
         </Button>

src/react-query/hooks/useUser.ts

@@ -15,6 +15,9 @@ export const useUser = () => {
     refetchOnMount: false,
     refetchOnReconnect: false,
     refetchOnWindowFocus: false,
+    onError: () => {
+      queryClient.setQueriesData([QUERY_KEYS.user], null)
+    },
   })
 
   const logoutUser = async () => {

src/routes/protectedRoute.tsx

@@ -43,7 +43,7 @@ const ProtectedRoute = ({ children, route }: RouteProps) => {
     )
   }
 
-  if (!user && route?.indexOf('myrecord')) {
+  if (!user && route?.indexOf('myrecord') !== -1) {
     return (
       <Alert
         visible={true}
@@ -64,6 +64,26 @@ const ProtectedRoute = ({ children, route }: RouteProps) => {
     )
   }
 
+  if (!user && route?.indexOf('withdraw') !== -1) {
+    return (
+      <Alert
+        visible={true}
+        mainMessage={
+          <div className="text-base font-semibold leading-6">
+            비회원은 계정을
+            <br />
+            <span className="text-sub-1">탈퇴</span> 할 수 없어요
+          </div>
+        }
+        cancelMessage="닫기"
+        confirmMessage="로그인"
+        onClose={() => navigate('/')}
+        onCancel={() => navigate('/')}
+        onConfirm={() => redirectPage('/setting')}
+      />
+    )
+  }
+
   return children
 }
 

src/routes/router.tsx

@@ -111,9 +111,30 @@ const router = createBrowserRouter([
           {
             path: 'withdraw',
             children: [
-              { index: true, element: <Withdraw /> },
-              { path: 'check', element: <CheckedNicknameBeforeWithDraw /> },
-              { path: 'complete', element: <CompletedWithdraw /> },
+              {
+                index: true,
+                element: (
+                  <ProtectedRoute route={'/setting/withdraw'}>
+                    <Withdraw />
+                  </ProtectedRoute>
+                ),
+              },
+              {
+                path: 'check',
+                element: (
+                  <ProtectedRoute route={'/setting/withdraw/check'}>
+                    <CheckedNicknameBeforeWithDraw />
+                  </ProtectedRoute>
+                ),
+              },
+              {
+                path: 'complete',
+                element: (
+                  <ProtectedRoute route={'/setting/withdraw/complete'}>
+                    <CompletedWithdraw />
+                  </ProtectedRoute>
+                ),
+              },
             ],
           },
         ],