From 0436ef642faaadb18ced8b259b626489bf300768 Mon Sep 17 00:00:00 2001 From: solmee <87332713+ssolfa@users.noreply.github.com> Date: Sat, 22 Jun 2024 18:16:55 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=ED=9A=8C=EC=9B=90=ED=83=88=ED=87=B4=20?= =?UTF-8?q?=ED=9B=84=20=EC=9C=A0=EC=A0=80=EC=A0=95=EB=B3=B4=EA=B0=80=20?= =?UTF-8?q?=EB=82=A8=EC=95=84=EC=9E=88=EB=8A=94=20=EB=B2=84=EA=B7=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20(#208)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: LoginState, UserState, logout을 전부 초기화 하는 useResetUserInfo훅 구현 * fix: 기존 postWithdraw 함수에서 로그아웃 부분 제거 * fix: Withdraw에서 탈퇴 성공 시 useResetUserInfo 불러와서 정보 삭제하도록 수정 * refactor: 기존 resetUserInfo으로 분리했던 코드를 하나로 통합 * refactor: postWithdraw 로직을 mutation을 활용하여 분리 및 alert 대신 errorboundary로 수정 * fix: UserState 관련 코드 삭제 --- src/home/apis/postWithdraw.ts | 23 ++---- src/home/pages/Withdraw/Withdraw.tsx | 110 ++++++++++++++------------- src/hooks/usePostWithdraw.ts | 17 +++++ src/hooks/useResetUserInfo.ts | 13 ++++ 4 files changed, 93 insertions(+), 70 deletions(-) create mode 100644 src/hooks/usePostWithdraw.ts create mode 100644 src/hooks/useResetUserInfo.ts diff --git a/src/home/apis/postWithdraw.ts b/src/home/apis/postWithdraw.ts index e63284d6..402e5a25 100644 --- 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 => { - try { - await authClient.post( - '/auth/withdraw', - {}, - { - headers: api.headers, - } - ); - api.logout(); - return { success: true }; - } catch (error) { - if (isAxiosError(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 index 8ad7563c..a31d0059 100644 --- 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 ( - - Logo-image - - {draw ? ( - - ) : ( - <> - 계정 탈퇴 - 계정 탈퇴 전 꼭 확인하세요. - - 탈퇴하는 즉시 데이터가 제거되며, 복구가 불가능합니다. - - 닉네임, 이메일 등 사용자를 특정할 수 있는 모든 계정 정보가 지워집니다. - - - 등록된 글이나 댓글의 삭제를 원한다면 탈퇴 이전에 삭제하시기 바랍니다. - - - - - 안내사항을 확인하였으며, 이에 동의합니다. - - - - 탈퇴하기 - - - )} - - + + + Logo-image + + {draw ? ( + + ) : ( + <> + 계정 탈퇴 + 계정 탈퇴 전 꼭 확인하세요. + + + 탈퇴하는 즉시 데이터가 제거되며, 복구가 불가능합니다. + + + 닉네임, 이메일 등 사용자를 특정할 수 있는 모든 계정 정보가 지워집니다. + + + 등록된 글이나 댓글의 삭제를 원한다면 탈퇴 이전에 삭제하시기 바랍니다. + + + + + 안내사항을 확인하였으며, 이에 동의합니다. + + + + 탈퇴하기 + + + )} + + + ); }; diff --git a/src/hooks/usePostWithdraw.ts b/src/hooks/usePostWithdraw.ts new file mode 100644 index 00000000..e0b15d0d --- /dev/null +++ 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 new file mode 100644 index 00000000..c31116ad --- /dev/null +++ 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(); + }; +};