From cee46b626306c869092644522677d03ef0115da3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9E=A5=EB=8F=99=EA=B7=A0?=
 <57230590+dongkyun-dev@users.noreply.github.com>
Date: Sat, 24 Feb 2024 13:41:29 +0900
Subject: [PATCH] =?UTF-8?q?[Fix/BAR-270]=20=EA=B3=84=EC=A0=95=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=97=B0=EB=8F=99=20?=
 =?UTF-8?q?(#90)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 계정설정

* refactor: 사용하지 않는 TODO 제거
---
 pages/main/index.tsx                            |  2 ++
 pages/profile/index.tsx                         | 17 +++++++++++++++--
 src/api/http.ts                                 |  9 +++++++--
 .../components/ExitModal/index.tsx"             | 14 ++++++++++++--
 .../components/Form/index.tsx"                  |  6 ++++++
 .../mutations/useExitAccount.ts"                |  5 ++---
 .../queries/useGetProfile.ts"                   |  2 +-
 7 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/pages/main/index.tsx b/pages/main/index.tsx
index 48a5d16d..005ce896 100644
--- a/pages/main/index.tsx
+++ b/pages/main/index.tsx
@@ -3,6 +3,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import Layout from '@components/Layout';
 import MainPageTab from '@components/Layout/MainPageTab';
 import { ROUTES } from '@constants/routes';
+import useGetProfile from '@domain/계정설정/queries/useGetProfile';
 import WriteTabContent from '@domain/끄적이는/components/WriteTabContent';
 import 참고하는TabContent from '@domain/참고하는/components';
 import useGetMyProfile from '@queries/useGetMyProfile';
@@ -15,6 +16,7 @@ const MainPage = () => {
   const selectedTab = searchParams.get('tab') || 'write';
 
   useGetMyProfile();
+  useGetProfile();
 
   const handleTabSelect = (selectedTab: string) => {
     router.push(`${ROUTES.MAIN}?tab=${selectedTab}`);
diff --git a/pages/profile/index.tsx b/pages/profile/index.tsx
index 9a1baea0..665fcc8b 100644
--- a/pages/profile/index.tsx
+++ b/pages/profile/index.tsx
@@ -1,8 +1,11 @@
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 import { type ChangeEvent, useMemo, useState } from 'react';
+import Cookies from 'js-cookie';
 
 import Icon from '@components/Icon';
 import Layout from '@components/Layout';
+import { ROUTES } from '@constants/routes';
 import ExitModal from '@domain/계정설정/components/ExitModal';
 import ProfileForm from '@domain/계정설정/components/Form';
 import * as styles from '@domain/계정설정/index.css';
@@ -10,8 +13,10 @@ import useExitAccount from '@domain/계정설정/mutations/useExitAccount';
 import useUpdateProfileImage from '@domain/계정설정/mutations/useUpdateProfileImage';
 import useGetProfile from '@domain/계정설정/queries/useGetProfile';
 import useModal from '@hooks/useModal';
+import { STORAGE_KEY } from '@models/storage';
 
 const ProfilePage = () => {
+  const router = useRouter();
   const my = useGetProfile();
   const exitModalProps = useModal();
   const { mutate: exitAccount } = useExitAccount();
@@ -113,8 +118,16 @@ const ProfilePage = () => {
           email={my.email}
         />
         <div className={styles.textButtonWrapper}>
-          {/* TODO: 로그아웃 연결 */}
-          <button className={styles.textButton}>로그아웃</button>
+          <button
+            className={styles.textButton}
+            onClick={() => {
+              localStorage.removeItem(STORAGE_KEY.ACCESS_TOKEN);
+              Cookies.remove(STORAGE_KEY.REFRESH_TOKEN);
+              router.push(ROUTES.LANDING);
+            }}
+          >
+            로그아웃
+          </button>
           <button
             className={styles.textButton}
             onClick={exitModalProps.handleOpen}
diff --git a/src/api/http.ts b/src/api/http.ts
index b81a49aa..799279e8 100644
--- a/src/api/http.ts
+++ b/src/api/http.ts
@@ -94,6 +94,11 @@ export const http = {
     param?: ParamType,
     options?: AxiosRequestConfig,
   ): Promise<ResponseType> => instance.put(url, param, options),
-  delete: <ResponseType>(url: string): Promise<ResponseType> =>
-    instance.delete(url),
+  delete: <ParamType, ResponseType>(
+    url: string,
+    param?: ParamType,
+  ): Promise<ResponseType> => {
+    if (!param) return instance.delete(url);
+    return instance.delete(url, param);
+  },
 };
diff --git "a/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/components/ExitModal/index.tsx" "b/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/components/ExitModal/index.tsx"
index 95733ea0..97f8ee0c 100644
--- "a/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/components/ExitModal/index.tsx"
+++ "b/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/components/ExitModal/index.tsx"
@@ -1,15 +1,19 @@
+import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { type UseMutateFunction } from '@tanstack/react-query';
+import Cookies from 'js-cookie';
 
 import Icon from '@components/Icon';
+import { ROUTES } from '@constants/routes';
 import { EXIT_CAUSES } from '@domain/계정설정/constants';
+import { STORAGE_KEY } from '@models/storage';
 
 import ExitModalListItem from './components/ListItem';
 import * as styles from './style.css';
 
 interface ExitModalProps {
   selectCause: string | null;
-  exitMutate: UseMutateFunction<void, Error, void, unknown>;
+  exitMutate: UseMutateFunction<void, Error, { exitCause: string }, unknown>;
   onContentClick: (cause: string) => void;
   onModalCloseClick: VoidFunction;
 }
@@ -20,6 +24,8 @@ const ExitModal = ({
   onContentClick,
   onModalCloseClick,
 }: ExitModalProps) => {
+  const router = useRouter();
+
   const [step, setStep] = useState(0);
 
   const ctaBtnDisable = step === 0 && selectCause === null;
@@ -28,7 +34,11 @@ const ExitModal = ({
     if (step === 0) {
       setStep((prev) => prev + 1);
     } else {
-      exitMutate();
+      if (!selectCause) return;
+      exitMutate({ exitCause: selectCause });
+      localStorage.removeItem(STORAGE_KEY.ACCESS_TOKEN);
+      Cookies.remove(STORAGE_KEY.REFRESH_TOKEN);
+      router.push(ROUTES.LANDING);
     }
   };
 
diff --git "a/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/components/Form/index.tsx" "b/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/components/Form/index.tsx"
index 4136ca2a..694d3af7 100644
--- "a/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/components/Form/index.tsx"
+++ "b/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/components/Form/index.tsx"
@@ -1,6 +1,8 @@
+import { useRouter } from 'next/navigation';
 import { type FormEvent, useMemo, useState } from 'react';
 
 import Icon from '@components/Icon';
+import { ROUTES } from '@constants/routes';
 import { useInput } from '@hooks/useInput';
 
 import useUpdateProfile from '../../mutations/useUpdateProfile';
@@ -15,6 +17,7 @@ interface ProfileFormProps {
 }
 
 const ProfileForm = ({ name, nickname, authType, email }: ProfileFormProps) => {
+  const router = useRouter();
   const { mutate: updateProfile } = useUpdateProfile();
 
   const nameInputProps = useInput({ id: 'name', defaultValue: name });
@@ -131,6 +134,7 @@ const ProfileForm = ({ name, nickname, authType, email }: ProfileFormProps) => {
         name: nameInputProps.value,
         nickname: nicknameInputProps.value,
       });
+      router.push(`${ROUTES.MAIN}?tab=write`);
     }
   };
 
@@ -140,12 +144,14 @@ const ProfileForm = ({ name, nickname, authType, email }: ProfileFormProps) => {
         inputProps={nameInputProps}
         title={'이름'}
         placeholder={'이름을 입력해주세요'}
+        value={name}
         errorMsg={errors ? errors.name : null}
       />
       <ProfileFormInput
         inputProps={nicknameInputProps}
         title={'별명'}
         placeholder={'별명을 입력해주세요'}
+        value={nickname}
         errorMsg={errors ? errors.nickname : null}
       />
       <div className={styles.authContainer}>
diff --git "a/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/mutations/useExitAccount.ts" "b/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/mutations/useExitAccount.ts"
index b4de254d..716d73d0 100644
--- "a/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/mutations/useExitAccount.ts"
+++ "b/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/mutations/useExitAccount.ts"
@@ -2,9 +2,8 @@ import { useMutation } from '@tanstack/react-query';
 
 import { http } from '@api/http';
 
-//TODO: 서버 개발 완료되면 연결
-const exitAccount = async () => {
-  await http.delete('members/me');
+const exitAccount = async ({ exitCause }: { exitCause: string }) => {
+  await http.delete('/members', { data: { reason: exitCause } });
 };
 
 const useExitAccount = () => {
diff --git "a/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/queries/useGetProfile.ts" "b/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/queries/useGetProfile.ts"
index baca3a00..00beaefa 100644
--- "a/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/queries/useGetProfile.ts"
+++ "b/src/domain/\352\263\204\354\240\225\354\204\244\354\240\225/queries/useGetProfile.ts"
@@ -6,7 +6,7 @@ import { ProfileQueryKeys } from '../constants/queryKeys';
 import { type Me } from '../types';
 
 const getProfile = async () => {
-  const res = await http.get<Me>('/members/my/profile');
+  const res = await http.get<Me>('/members/profile/me');
 
   return res;
 };