Merge pull request #274 from ItRecode/FE-261

[FE-261] feat: 탈퇴 시 재가입불가 화면 구현

Author: sookyeonghwang

src/assets/heart_large.svg

@@ -0,0 +1,38 @@
+import React from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import Button from '@components/Button'
+import { ReactComponent as HeartIcon } from '@assets/heart_large.svg'
+import { ReactComponent as CloseIcon } from '@assets/close_icon.svg'
+import { getFormattedDate } from '@utils/getFormattedDate'
+
+export default function WithdrawSignUp() {
+  const navigate = useNavigate()
+  const { state } = useLocation()
+
+  return (
+    <>
+      <CloseIcon
+        className="ml-6 mt-4 cursor-pointer"
+        onClick={() => navigate('/', { replace: true })}
+      />
+      <div className="flex h-full flex-col items-center justify-center px-5">
+        <HeartIcon className="mb-10" />
+        <p className="mb-14 text-center text-[20px] font-semibold leading-[30px] text-grey-10">
+          <span className="text-primary-2">
+            {getFormattedDate(new Date(state.date), 'point')}{' '}
+          </span>
+          이후로
+          <br />
+          재가입이 가능해요
+        </p>
+        <Button
+          disabled={false}
+          property="solid"
+          onClick={() => navigate('/', { replace: true })}
+        >
+          레코딧 둘러보기
+        </Button>
+      </div>
+    </>
+  )
+}

src/pages/SignUp/WithdrawSignUp.tsx

@@ -52,7 +52,15 @@ export const useAuth = () => {
       onSuccess: () => {
         redirectPage()
       },
-      onError: () => {
+      onError: (error: AxiosError) => {
+        if (error.response?.status === 403) {
+          const { data } = error.response as AxiosResponse
+          navigate('/sign-up/fail', {
+            state: { date: data.msg },
+          })
+          return
+        }
+
         navigate('/login')
       },
     }

src/react-query/hooks/useAuth.ts

@@ -36,6 +36,7 @@ const CompletedWithdraw = lazy(
 )
 const AddRecord = lazy(() => import('@pages/AddRecord/AddRecord'))
 const DetailRecord = lazy(() => import('@pages/DetailRecord/DetailRecord'))
+const WithdrawSignUp = lazy(() => import('@pages/SignUp/WithdrawSignUp'))
 
 const router = createBrowserRouter([
   {
@@ -146,17 +147,19 @@ const router = createBrowserRouter([
           {
             path: 'check',
             element: (
-              <ProtectedRoute route={'/setting/withdraw/check'}>
-                <CheckedNicknameBeforeWithDraw />
-              </ProtectedRoute>
+              <Suspense fallback={<Loading />}>
+                <ProtectedRoute route={'/setting/withdraw/check'}>
+                  <CheckedNicknameBeforeWithDraw />
+                </ProtectedRoute>
+              </Suspense>
             ),
           },
           {
             path: 'complete',
             element: (
-              <ProtectedRoute route={'/setting/withdraw/complete'}>
+              <Suspense fallback={<Loading />}>
                 <CompletedWithdraw />
-              </ProtectedRoute>
+              </Suspense>
             ),
           },
         ],
@@ -187,6 +190,14 @@ const router = createBrowserRouter([
       </Suspense>
     ),
   },
+  {
+    path: '/sign-up/fail',
+    element: (
+      <Suspense fallback={<Loading />}>
+        <WithdrawSignUp />
+      </Suspense>
+    ),
+  },
   {
     path: '/record/add',
     element: (