[탈퇴 뷰] 탈퇴 관련 기능 구현

src/components/Button.tsx

@@ -1,14 +1,15 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
 interface ButtonInterface {
   color: string;
   borderColor?: string;
   message: string;
+  onClick: VoidFunction;
 }
 
-const Button = ({ color, borderColor, message }: ButtonInterface) => {
+const Button = ({ color, borderColor, message, onClick }: ButtonInterface) => {
   return (
-    <ButtonWrapper $color={color} $borderColor={borderColor}>
+    <ButtonWrapper $color={color} $borderColor={borderColor} onClick={onClick}>
       {message}
     </ButtonWrapper>
   );
@@ -30,5 +31,5 @@ const ButtonWrapper = styled.div<{ $color: string; $borderColor?: string }>`
 
   border-radius: 1.8rem;
   border: 1px solid
-    ${({ theme, $borderColor }) => ($borderColor ? theme.colors[$borderColor] : "white")};
+    ${({ theme, $borderColor }) => ($borderColor ? theme.colors[$borderColor] : 'white')};
 `;

src/hooks/queries/useDeleteUser.tsx

@@ -0,0 +1,17 @@
+import { useNavigate } from 'react-router-dom';
+import user from '../../apis/user';
+
+export const useDeleteUser = () => {
+  const deleteUser = async (accessToken: string) => {
+    const navigate = useNavigate();
+    try {
+      await user.deleteUser(accessToken);
+      navigate('/complete');
+    } catch (err) {
+      console.error(err);
+      navigate('/error');
+    }
+  };
+
+  return { deleteUser };
+};

src/hooks/queries/usePostKakao.tsx

@@ -1,7 +1,7 @@
-import { useCallback, useState } from "react";
-import kakao from "../../apis/kakao";
-import { AxiosError } from "axios";
-import { KakaoLoginInfoType, KakaoLoginResponseType } from "../../types/kakao";
+import { useCallback, useState } from 'react';
+import kakao from '../../apis/kakao';
+import { AxiosError } from 'axios';
+import { KakaoLoginInfoType, KakaoLoginResponseType } from '../../types/kakao';
 
 const usePostKakao = () => {
   const [kakaoResponse, setKakaoResponse] = useState<KakaoLoginInfoType | null>(null);
@@ -13,7 +13,7 @@ const usePostKakao = () => {
     setKakaoLoading(true);
     setKakaoError(null);
     try {
-      const res = await kakao.postKakaoLogin({ kakaoToken: accessToken, fcmToken: "0" });
+      const res = await kakao.postKakaoLogin({ kakaoToken: accessToken, fcmToken: '0' });
       const data: KakaoLoginResponseType = res.data.data;
       setKakaoResponse({
         userId: data.data.userId,
@@ -22,8 +22,8 @@ const usePostKakao = () => {
         refreshToken: data.data.refreshToken,
         nickname: data.data.nickname,
       });
-      console.log("응답이 왔나요?", kakaoResponse);
-      localStorage.setItem("accessToken", data.data.accessToken);
+      console.log('응답이 왔나요?', kakaoResponse);
+      localStorage.setItem('accessToken', data.data.accessToken);
     } catch (err) {
       setKakaoError(err as AxiosError);
     } finally {

src/hooks/useNavigateHome.tsx

@@ -0,0 +1,9 @@
+import { useNavigate } from 'react-router-dom';
+
+const useNavigateHome = () => {
+  const navigate = useNavigate();
+  navigate('/');
+  return <></>;
+};
+
+export default useNavigateHome;

src/pages/RecordreamLayout.tsx

@@ -1,15 +1,21 @@
-import styled from "styled-components";
-import { IcFeelingLBlank, IcPcBlank, IcPcRecordream } from "../assets/svg";
-import Button from "../components/Button";
-import { Outlet } from "react-router-dom";
+import styled from 'styled-components';
+import { IcFeelingLBlank, IcPcBlank, IcPcRecordream } from '../assets/svg';
+import Button from '../components/Button';
+import { Outlet } from 'react-router-dom';
 
 interface RecordreamLayoutInterface {
   iconOn: boolean;
   btnColor: string;
   btnMessage: string;
+  handleClick: VoidFunction;
 }
 
-const RecordreamLayout = ({ iconOn, btnColor, btnMessage }: RecordreamLayoutInterface) => {
+const RecordreamLayout = ({
+  iconOn,
+  btnColor,
+  btnMessage,
+  handleClick,
+}: RecordreamLayoutInterface) => {
   return (
     <RecordreamLayoutWrapper>
       <IcPcRecordream style={{ width: 134, height: 24, marginTop: 74, marginBottom: 18 }} />
@@ -19,7 +25,7 @@ const RecordreamLayout = ({ iconOn, btnColor, btnMessage }: RecordreamLayoutInte
         <IcPcBlank style={{ width: 85, height: 85, marginTop: 74, marginBottom: 18 }} />
       )}
       <Outlet />
-      <Button color={btnColor} message={btnMessage} />
+      <Button color={btnColor} message={btnMessage} onClick={handleClick} />
     </RecordreamLayoutWrapper>
   );
 };

src/router/Router.tsx

@@ -6,6 +6,8 @@ import DeletePage from '../pages/DeletePage';
 import CompletePage from '../pages/CompletePage';
 import UnregisteredPage from '../pages/UnregisteredPage';
 import KakaoLoginPage from '../pages/KakaoLoginPage';
+import { useDeleteUser } from '../hooks/queries/useDeleteUser';
+import useNavigateHome from '../hooks/useNavigateHome';
 
 const router = createBrowserRouter([
   {
@@ -21,7 +23,14 @@ const router = createBrowserRouter([
         element: <KakaoLoginPage />,
       },
       {
-        element: <RecordreamLayout iconOn={true} btnColor="red" btnMessage="탈퇴하기" />,
+        element: (
+          <RecordreamLayout
+            iconOn={true}
+            btnColor="red"
+            btnMessage="탈퇴하기"
+            handleClick={useDeleteUser}
+          />
+        ),
         children: [
           {
             path: '/delete',
@@ -30,7 +39,14 @@ const router = createBrowserRouter([
         ],
       },
       {
-        element: <RecordreamLayout iconOn={false} btnColor="white" btnMessage="확인" />,
+        element: (
+          <RecordreamLayout
+            iconOn={false}
+            btnColor="white"
+            btnMessage="확인"
+            handleClick={useNavigateHome}
+          />
+        ),
         children: [
           { path: '/complete', element: <CompletePage /> },
           { path: '/unregistered', element: <UnregisteredPage /> },