From e5e0bea9a30cba0ab2530c8d5fd1af7651c157ac Mon Sep 17 00:00:00 2001
From: Lee JaeJun <monooi@naver.com>
Date: Thu, 1 Feb 2024 23:51:49 +0900
Subject: [PATCH] =?UTF-8?q?Add:=20=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/header/index.tsx  | 81 +++++++++----------------
 src/components/signIn/utils/getToken.ts |  5 ++
 src/components/signIn/utils/logout.ts   | 10 +++
 3 files changed, 43 insertions(+), 53 deletions(-)
 create mode 100644 src/components/signIn/utils/logout.ts

diff --git a/src/components/layout/header/index.tsx b/src/components/layout/header/index.tsx
index ae319a98..9040bc19 100644
--- a/src/components/layout/header/index.tsx
+++ b/src/components/layout/header/index.tsx
@@ -2,17 +2,18 @@ import { Link, useNavigate } from 'react-router-dom';
 import styles from './index.module.scss';
 import classNames from 'classnames/bind';
 import { useEffect, useRef, useState } from 'react';
-import { instance } from '@/api/client';
-import { AxiosError } from 'axios';
-import { userState } from '@/store/store';
 import { useRecoilState } from 'recoil';
+import { authState } from '@/recoil/authState';
+import { MENU_ITEMS } from '@/constants/menus';
+import toast from 'react-hot-toast';
+import { signOut } from '@/components/signIn/utils/logout';
 
 type MenuType = 'community' | 'study' | 'project' | 'portfolio';
 
 const Header = () => {
   const [selectedMenu, setSelectedMenu] = useState<MenuType | null>(null);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const [user, setUser] = useRecoilState(userState);
+  const [user, setUser] = useRecoilState(authState);
   const navigate = useNavigate();
 
   const cx = classNames.bind(styles);
@@ -54,17 +55,12 @@ const Header = () => {
   };
 
   const handleLogout = async () => {
-    try {
-      const response = await instance.get('api/v1/logout');
-      if (response.status === 200) {
-        setUser({ ...user, isLogin: false });
-        navigate('/signin');
-      }
-    } catch (error) {
-      if (error instanceof AxiosError) {
-        throw error;
-      }
-    }
+    setUser({ memberId: null, email: null, nickname: null, image: null, loggedIn: false });
+    toast.promise(signOut(), {
+      loading: '잠시만 기다려주세요',
+      success: '로그아웃 되었습니다.',
+      error: '로그아웃에 실패했습니다',
+    });
   };
 
   return (
@@ -78,7 +74,7 @@ const Header = () => {
           </Link>
         </div>
         <button ref={buttonRef} className={styles.info}>
-          <div className={styles['info-menu']}>{/* <img src="" alt="" /> */}</div>
+          <div className={styles.infoMenu}>{/* <img src="" alt="" /> */}</div>
         </button>
 
         <div
@@ -86,13 +82,13 @@ const Header = () => {
           className={cx(['user-modal'], { open: isMenuOpen })}
           onClick={() => setIsMenuOpen(false)}
         >
-          {user.isLogin ? (
+          {user.loggedIn ? (
             <>
-              <div className={styles['modal-items']}>
+              <div className={styles.modalItem}>
                 {/* TODO: settings로 주소 바꾸기 */}
                 <Link to={'/mypage'}>계정</Link>
               </div>
-              <div className={styles['modal-items']}>
+              <div className={styles.modalItem}>
                 {/* 로그아웃이 완료 되면서 게시글 페이지로 이동 */}
                 <a onClick={handleLogout}>로그아웃</a>
                 <div className={styles['user-name']}>{user.nickname}</div>
@@ -100,10 +96,10 @@ const Header = () => {
             </>
           ) : (
             <>
-              <div className={styles['modal-items']}>
+              <div className={styles.modalItem}>
                 <Link to={'/signin'}>로그인</Link>
               </div>
-              <div className={styles['modal-items']}>
+              <div className={styles.modalItem}>
                 <Link to={'/signup'}>회원가입</Link>
               </div>
             </>
@@ -113,38 +109,17 @@ const Header = () => {
 
       <div className={styles.nav}>
         <ul className={styles.menus} onClick={handleMenuClick}>
-          <li
-            className={cx(['menu-item'], {
-              selected: selectedMenu === 'community',
-            })}
-            data-menu="community"
-          >
-            <Link to={'/community'}>소근소근</Link>
-          </li>
-          <li
-            className={cx(['menu-item'], {
-              selected: selectedMenu === 'study',
-            })}
-            data-menu="study"
-          >
-            <Link to={'/study'}>스터디</Link>
-          </li>
-          <li
-            className={cx(['menu-item'], {
-              selected: selectedMenu === 'project',
-            })}
-            data-menu="project"
-          >
-            <Link to={'/project'}>프로젝트</Link>
-          </li>
-          <li
-            className={cx(['menu-item'], {
-              selected: selectedMenu === 'portfolio',
-            })}
-            data-menu="portfolio"
-          >
-            <Link to={'/portfolio'}>포트폴리오</Link>
-          </li>
+          {MENU_ITEMS.map((menu) => (
+            <li
+              key={menu.path}
+              className={cx('menuItem', {
+                selected: selectedMenu === menu.path,
+              })}
+              data-menu={menu.path}
+            >
+              <Link to={`/${menu.path}`}>{menu.name}</Link>
+            </li>
+          ))}
         </ul>
       </div>
       <div className={styles.spacer} />
diff --git a/src/components/signIn/utils/getToken.ts b/src/components/signIn/utils/getToken.ts
index 92f6f37c..0988427f 100644
--- a/src/components/signIn/utils/getToken.ts
+++ b/src/components/signIn/utils/getToken.ts
@@ -8,3 +8,8 @@ export const setTokenToLocalStorage = (accessToken: string, refreshToken: string
   localStorage.setItem('access_token', accessToken);
   localStorage.setItem('refresh_token', refreshToken);
 };
+
+export const removeTokens = () => {
+  localStorage.removeItem('access_token');
+  localStorage.removeItem('refresh_token');
+};
diff --git a/src/components/signIn/utils/logout.ts b/src/components/signIn/utils/logout.ts
new file mode 100644
index 00000000..8e18f862
--- /dev/null
+++ b/src/components/signIn/utils/logout.ts
@@ -0,0 +1,10 @@
+import { removeTokens } from './getToken';
+
+export const signOut = () => {
+  return new Promise((res) => {
+    setTimeout(() => {
+      removeTokens();
+      res(true);
+    }, 1000);
+  });
+};