feat: logout

src/_app/App.tsx

@@ -75,7 +75,7 @@ function App() {
                         <Wrapper>
                             {login &&
                         <>
-                            <Header headerName={headerName} />
+                            <Header headerName={headerName} connector={connector} />
                             {/*<Navigator />*/}
                         </>
                             }

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]);