From bae7f94d7adb265af90db40ad26a43319865b21d Mon Sep 17 00:00:00 2001
From: MinseoLee <mmmm@ajou.ac.kr>
Date: Thu, 7 Dec 2023 22:38:29 +0900
Subject: [PATCH] feat: logout

---
 src/_app/App.tsx                  |  2 +-
 src/common/instances/Connector.ts |  5 +++++
 src/components/header/Header.tsx  | 26 +++++++++++++++++---------
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/_app/App.tsx b/src/_app/App.tsx
index 6a0194c..bdb3332 100644
--- a/src/_app/App.tsx
+++ b/src/_app/App.tsx
@@ -75,7 +75,7 @@ function App() {
                         <Wrapper>
                             {login &&
                         <>
-                            <Header headerName={headerName} />
+                            <Header headerName={headerName} connector={connector} />
                             {/*<Navigator />*/}
                         </>
                             }
diff --git a/src/common/instances/Connector.ts b/src/common/instances/Connector.ts
index 6c54333..f39ccb0 100644
--- a/src/common/instances/Connector.ts
+++ b/src/common/instances/Connector.ts
@@ -28,6 +28,11 @@ class Connector {
         }
         return postRequest.response;
     }
+    
+    async logout(): Promise<void> {
+        await fetchData('/user/logout', FETCH_METHOD.GET);
+        this.setLoginInstance(false);
+    }
 	
     async get<T>(url: string, payload?: any): Promise<T> {
         const getRequest = await fetchData<T>(url, FETCH_METHOD.GET, payload);
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index 4f50cbb..a71012b 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -6,14 +6,22 @@ import { CartContext } from "../../contexts/cart";
 
 import S from './Header.module.css';
 
-import type { FC, JSX } from "react";
+import type { GFC, GFCWithProp } from "../../common/types/fc";
+import type { JSX } from "react";
 
 
-const Icons = () => {
+const Icons: GFC = ({ connector }) => {
     const { cartItem, getCartItemQuantity } = useContext(CartContext);
     
+    const handleLogOut = () => {
+        if (confirm("로그아웃 하시겠습니까?")) {
+            connector.current?.logout();
+        }
+    };
+    
     return (
         <div className={'flex gap-4'}>
+            <span onClick={handleLogOut} className={'cursor-pointer'}>🚀</span>
             <Link to={APP_ROUTE.HISTORY}>
                 <span>🔔</span>
             </Link>
@@ -39,11 +47,11 @@ const CartHeader = () => {
     );
 };
 
-const HomeHeader = () => {
+const HomeHeader: GFC = ({ connector }) => {
     return (
         <div className={S['home']}>
             <span className={'bold'}>AJOUORDER</span>
-            <Icons />
+            <Icons connector={connector} />
         </div>
     );
 };
@@ -61,28 +69,28 @@ const HistoryHeader = () => {
 };
 
 interface MenuHeaderProps { headerName: Props['headerName']; }
-const MenuHeader: FC<MenuHeaderProps> = ({ headerName }) => {
+const MenuHeader: GFCWithProp<MenuHeaderProps> = ({ headerName, connector }) => {
     return (
         <div className={S['menu']}>
             <Link to={'/'}>
                 <span>&lt;</span>
             </Link>
             <span>{headerName}</span>
-            <Icons />
+            <Icons connector={connector} />
         </div>
     );
 };
 
 
 interface Props { headerName: string; }
-const Header: FC<Props> = ({ headerName }) => {
+const Header: GFCWithProp<Props> = ({ headerName, connector }) => {
     const location = useLocation();
     const [returnEl, setReturnEl] = useState<JSX.Element>(<></>);
     
     useEffect(() => {
         const _loc = location.pathname.split('/').at(1);
-        if (_loc === '') setReturnEl(<HomeHeader />);
-        if (_loc === 'menu') setReturnEl(<MenuHeader headerName={headerName}/>);
+        if (_loc === '') setReturnEl(<HomeHeader connector={connector} />);
+        if (_loc === 'menu') setReturnEl(<MenuHeader headerName={headerName} connector={connector} />);
         if (_loc === 'cart') setReturnEl(<CartHeader />);
         if (_loc === 'history') setReturnEl(<HistoryHeader />);
     }, [location, headerName]);
-- 
GitLab