[Fix/BAR-270] 계정설정 페이지 연동

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}`);

pages/profile/index.tsx

@@ -1,17 +1,22 @@
 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';
 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}

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);
+  },
 };

src/domain/계정설정/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);
     }
   };
 

src/domain/계정설정/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}>

src/domain/계정설정/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 = () => {

src/domain/계정설정/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;
 };