fix: 회원탈퇴 후 유저정보가 남아있는 버그 수정 (#208)

* feat: LoginState, UserState, logout을 전부 초기화 하는 useResetUserInfo훅 구현 * fix: 기존 postWithdraw 함수에서 로그아웃 부분 제거 * fix: Withdraw에서 탈퇴 성공 시 useResetUserInfo 불러와서 정보 삭제하도록 수정 * refactor: 기존 resetUserInfo으로 분리했던 코드를 하나로 통합 * refactor: postWithdraw 로직을 mutation을 활용하여 분리 및 alert 대신 errorboundary로 수정 * fix: UserState 관련 코드 삭제
yourssu · Jun 22, 2024 · 0436ef6 · 0436ef6
1 parent 8d10210
commit 0436ef6
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 70 deletions.
diff --git a/src/home/apis/postWithdraw.ts b/src/home/apis/postWithdraw.ts
@@ -1,22 +1,9 @@
-import { isAxiosError } from 'axios';
-
 import { authClient } from '@/apis';
-import { PostWithdrawResponse, AuthErrorData } from '@/home/types/Auth.type';
 import { api } from '@/service/TokenService';
 
-export const postWithdraw = async (): Promise<PostWithdrawResponse> => {
-  try {
-    await authClient.post(
-      '/auth/withdraw',
-      {},
-      {
-        headers: api.headers,
-      }
-    );
-    api.logout();
-    return { success: true };
-  } catch (error) {
-    if (isAxiosError<AuthErrorData>(error)) return { success: false, error };
-    return Promise.reject(error);
-  }
+export const postWithdraw = async (data: object) => {
+  const res = await authClient.post('/auth/withdraw', data, {
+    headers: api.headers,
+  });
+  return res.data;
 };
diff --git a/src/home/pages/Withdraw/Withdraw.tsx b/src/home/pages/Withdraw/Withdraw.tsx
@@ -1,11 +1,13 @@
 import { useState } from 'react';
 
 import { BoxButton, CheckBox } from '@yourssu/design-system-react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { useNavigate } from 'react-router-dom';
 
 import Logo from '@/assets/soomsil_logo.svg';
-import { postWithdraw } from '@/home/apis/postWithdraw';
+import { Fallback } from '@/components/Fallback/Fallback';
 import { WithdrawSuccess } from '@/home/components/WithdrawSuccess/WithdrawSuccess';
+import { usePostWithdraw } from '@/hooks/usePostWithdraw';
 
 import {
   StyledButtonText,
@@ -22,6 +24,7 @@ export const Withdraw = () => {
   const navigate = useNavigate();
   const [agreed, setAgreed] = useState(false);
   const [draw, setDraw] = useState(false);
+  const withdrawMutation = usePostWithdraw();
 
   const handleGoToHome = () => {
     navigate('/');
@@ -31,60 +34,63 @@ export const Withdraw = () => {
     setAgreed((prevAgreed) => !prevAgreed);
   };
 
-  const handleWithdrawAgree = async () => {
-    try {
-      const { success, error } = await postWithdraw();
-      if (success) {
-        setDraw((prevDraw) => !prevDraw);
-      } else if (error) {
-        alert(`탈퇴 처리에 실패했습니다: ${error.message}`);
+  const handleWithdrawAgree = () => {
+    withdrawMutation.mutate(
+      {},
+      {
+        onSuccess: () => {
+          setDraw((prevDraw) => !prevDraw);
+        },
       }
-    } catch (error) {
-      if (error instanceof Error) {
-        alert(`탈퇴 처리 중 오류가 발생했습니다: ${error.message}`);
-      } else {
-        alert(`알 수 없는 오류가 발생했습니다`);
-      }
-    }
+    );
   };
 
   return (
-    <StyledWrapper>
-      <img onClick={handleGoToHome} src={Logo} alt="Logo-image" width={180} height={38} />
-      <StyledWithdrawContainer>
-        {draw ? (
-          <WithdrawSuccess onConfirm={handleGoToHome} />
-        ) : (
-          <>
-            <StyledTitleText>계정 탈퇴</StyledTitleText>
-            <StyledSubTitleText>계정 탈퇴 전 꼭 확인하세요.</StyledSubTitleText>
-            <StyledText>
-              <StyledListItem>탈퇴하는 즉시 데이터가 제거되며, 복구가 불가능합니다.</StyledListItem>
-              <StyledListItem>
-                닉네임, 이메일 등 사용자를 특정할 수 있는 모든 계정 정보가 지워집니다.
-              </StyledListItem>
-              <StyledListItem>
-                등록된 글이나 댓글의 삭제를 원한다면 탈퇴 이전에 삭제하시기 바랍니다.
-              </StyledListItem>
-            </StyledText>
-            <StyledLeft>
-              <CheckBox size="medium" isSelected={agreed} onClick={handleCheckAgree} type="button">
-                <StyledButtonText>안내사항을 확인하였으며, 이에 동의합니다.</StyledButtonText>
-              </CheckBox>
-            </StyledLeft>
-            <BoxButton
-              style={{ width: '100%' }}
-              rounding={8}
-              size="large"
-              variant="filled"
-              onClick={handleWithdrawAgree}
-              disabled={!agreed}
-            >
-              탈퇴하기
-            </BoxButton>
-          </>
-        )}
-      </StyledWithdrawContainer>
-    </StyledWrapper>
+    <ErrorBoundary FallbackComponent={Fallback}>
+      <StyledWrapper>
+        <img onClick={handleGoToHome} src={Logo} alt="Logo-image" width={180} height={38} />
+        <StyledWithdrawContainer>
+          {draw ? (
+            <WithdrawSuccess onConfirm={handleGoToHome} />
+          ) : (
+            <>
+              <StyledTitleText>계정 탈퇴</StyledTitleText>
+              <StyledSubTitleText>계정 탈퇴 전 꼭 확인하세요.</StyledSubTitleText>
+              <StyledText>
+                <StyledListItem>
+                  탈퇴하는 즉시 데이터가 제거되며, 복구가 불가능합니다.
+                </StyledListItem>
+                <StyledListItem>
+                  닉네임, 이메일 등 사용자를 특정할 수 있는 모든 계정 정보가 지워집니다.
+                </StyledListItem>
+                <StyledListItem>
+                  등록된 글이나 댓글의 삭제를 원한다면 탈퇴 이전에 삭제하시기 바랍니다.
+                </StyledListItem>
+              </StyledText>
+              <StyledLeft>
+                <CheckBox
+                  size="medium"
+                  isSelected={agreed}
+                  onClick={handleCheckAgree}
+                  type="button"
+                >
+                  <StyledButtonText>안내사항을 확인하였으며, 이에 동의합니다.</StyledButtonText>
+                </CheckBox>
+              </StyledLeft>
+              <BoxButton
+                style={{ width: '100%' }}
+                rounding={8}
+                size="large"
+                variant="filled"
+                onClick={handleWithdrawAgree}
+                disabled={!agreed || withdrawMutation.isPending}
+              >
+                탈퇴하기
+              </BoxButton>
+            </>
+          )}
+        </StyledWithdrawContainer>
+      </StyledWrapper>
+    </ErrorBoundary>
   );
 };
diff --git a/src/hooks/usePostWithdraw.ts b/src/hooks/usePostWithdraw.ts
@@ -0,0 +1,17 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { postWithdraw } from '@/home/apis/postWithdraw';
+
+import { useResetUserInfo } from './useResetUserInfo';
+
+export const usePostWithdraw = () => {
+  const resetUserInfo = useResetUserInfo();
+
+  return useMutation({
+    mutationFn: postWithdraw,
+    onSuccess: () => {
+      resetUserInfo();
+    },
+    throwOnError: true,
+  });
+};
diff --git a/src/hooks/useResetUserInfo.ts b/src/hooks/useResetUserInfo.ts
@@ -0,0 +1,13 @@
+import { useSetRecoilState } from 'recoil';
+
+import { LogInState } from '@/home/recoil/LogInState';
+import { api } from '@/service/TokenService';
+
+export const useResetUserInfo = () => {
+  const resetLoginState = useSetRecoilState(LogInState);
+
+  return () => {
+    resetLoginState(false);
+    api.logout();
+  };
+};