Merge pull request #272 from ItRecode/FE-245

[FE-245] feat: 회원탈퇴 api 연결과 구현

Author: sookyeonghwang

src/apis/auth.ts

@@ -23,3 +23,7 @@ export const getIsDuplicatedNickname = (nickname: string) => {
 export const logout = () => {
   return baseInstance.post(`/member/logout`)
 }
+
+export const withdrawUser = () => {
+  return baseInstance.delete(`/member/delete`)
+}

src/assets/close_icon.svg

@@ -3,13 +3,15 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import { NICKNAME_MAX_LENGTH } from '@assets/constant/constant'
 import { ReactComponent as CloseIcon } from '@assets/icon_closed.svg'
 import { ReactComponent as Back } from '@assets/back.svg'
+import { useUser } from '@react-query/hooks/useUser'
 import useDebounce from '@hooks/useDebounce'
 import Button from '@components/Button'
 import Alert from '@components/Alert'
 
 export default function CheckedNicknameBeforeWithDraw() {
   const navigate = useNavigate()
   const { state } = useLocation()
+  const { deleteUser } = useUser()
   const inputRef = useRef<HTMLInputElement>(null)
   const [isCheckedNickname, setIsCheckedNickname] = useState(false)
   const [nickname, setNickname] = useState('')
@@ -38,6 +40,15 @@ export default function CheckedNicknameBeforeWithDraw() {
     [nickname]
   )
 
+  const handleWithdraw = () => {
+    try {
+      deleteUser()
+      navigate('/setting/withdraw/complete')
+    } catch (e) {
+      alert('로그아웃에 실패하였습니다.')
+    }
+  }
+
   return (
     <>
       <section id="route-backIcon-button" className="ml-[18px] mt-4">
@@ -114,11 +125,11 @@ export default function CheckedNicknameBeforeWithDraw() {
             <br /> 재가입이 불가능해요.
           </>
         }
-        confirmMessage="예"
-        cancelMessage="아니오"
+        confirmMessage="둘러보기"
+        cancelMessage="탈퇴하기"
         onConfirm={() => setAlertOpen(false)}
         onClose={() => setAlertOpen(false)}
-        onCancel={() => setAlertOpen(false)}
+        onCancel={handleWithdraw}
       />
     </>
   )

src/assets/moon_large.svg

@@ -0,0 +1,35 @@
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
+import Button from '@components/Button'
+import { ReactComponent as MoonIcon } from '@assets/moon_large.svg'
+import { ReactComponent as CloseIcon } from '@assets/close_icon.svg'
+
+export default function CompletedWithdraw() {
+  const navigate = useNavigate()
+
+  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">
+        <MoonIcon className="mb-10" />
+        <p className="mb-4 text-[20px] font-semibold leading-[30px] text-grey-10">
+          레코딧 탈퇴가 완료되었습니다
+        </p>
+        <p className="mb-10 text-center text-[14px] leading-[21px]">
+          <span className="text-primary-2">축하와 위로</span>가 필요할 때<br />
+          언제든 다시 또 찾아주세요!
+        </p>
+        <Button
+          disabled={false}
+          property="solid"
+          onClick={() => navigate('/', { replace: true })}
+        >
+          레코딧 둘러보기
+        </Button>
+      </div>
+    </>
+  )
+}

src/pages/Setting/Withdraw/CheckedNicknameBeforeWithDraw.tsx

@@ -1,7 +1,7 @@
 import { QUERY_KEYS } from '@react-query/queryKeys'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { getUserInfo } from '@apis/user'
-import { logout } from '@apis/auth'
+import { logout, withdrawUser } from '@apis/auth'
 
 export const useUser = () => {
   const queryClient = useQueryClient()
@@ -15,12 +15,20 @@ export const useUser = () => {
     refetchOnMount: false,
     refetchOnReconnect: false,
     refetchOnWindowFocus: false,
+    onError: () => {
+      queryClient.setQueriesData([QUERY_KEYS.user], null)
+    },
   })
 
   const logoutUser = async () => {
     await logout()
     queryClient.setQueriesData([QUERY_KEYS.user], null)
   }
 
-  return { user, refetch, isLoading, logoutUser }
+  const deleteUser = async () => {
+    await withdrawUser()
+    queryClient.invalidateQueries()
+  }
+
+  return { user, refetch, isLoading, logoutUser, deleteUser }
 }

src/pages/Setting/Withdraw/CompletedWithdraw.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/react-query/hooks/useUser.ts

@@ -28,6 +28,12 @@ const FeedbackMail = lazy(
   () => import('@pages/Setting/FeedbackMail/FeedbackMail')
 )
 const Withdraw = lazy(() => import('@pages/Setting/Withdraw/Withdraw'))
+const CheckedNicknameBeforeWithDraw = lazy(
+  () => import('@pages/Setting/Withdraw/CheckedNicknameBeforeWithDraw')
+)
+const CompletedWithdraw = lazy(
+  () => import('@pages/Setting/Withdraw/CompletedWithdraw')
+)
 const AddRecord = lazy(() => import('@pages/AddRecord/AddRecord'))
 const DetailRecord = lazy(() => import('@pages/DetailRecord/DetailRecord'))
 
@@ -104,13 +110,37 @@ const router = createBrowserRouter([
           },
           {
             path: 'withdraw',
-            element: <Withdraw />,
+            children: [
+              {
+                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>
+                ),
+              },
+            ],
           },
         ],
       },
     ],
   },
-
   {
     path: '/login',
     element: <Login />,