diff --git a/src/_app/App.tsx b/src/_app/App.tsx index d96735bdd19312ad58d2ed411aa0f2aaafd6bae1..00d209ee8b0a28e2156cea9bf4702d1673c8721b 100644 --- a/src/_app/App.tsx +++ b/src/_app/App.tsx @@ -1,8 +1,9 @@ import { useEffect, useRef, useState } from 'react'; import '../common/css/common.css'; import '../common/css/reset.css'; -import { Routes, Route, useNavigate } from "react-router-dom"; +import { Routes, Route, useNavigate, useLocation } from "react-router-dom"; +import { ALERT } from "../common/constants"; import Connector from "../common/instances/Connector"; import BottomSheet from "../components/bottom-sheet/BottomSheet"; import Header from "../components/header/Header"; @@ -34,6 +35,7 @@ function App() { const connector: MutableRefObject<Connector|null> = useRef(null); const navigator = useNavigate(); + const location = useLocation(); useEffect(() => { @@ -47,6 +49,16 @@ function App() { } }, [login]); + useEffect(() => { + if (!connector.current || !login) return; + + if (connector.current?.getIsAdmin()) { + if (location.pathname.split('/').at(1) !== 'admin') { + alert(ALERT.REQ_WRONG); + navigator(APP_ROUTE.ADMIN); + } + } + }, [location]); return ( <BSProvider> diff --git a/src/components/header/Header.module.css b/src/components/header/Header.module.css index bcbafa71185d3aace6180961fed13a0623c8097a..c1b6fff2500f92d4df3cfe0ac67551277cd924c5 100644 --- a/src/components/header/Header.module.css +++ b/src/components/header/Header.module.css @@ -55,3 +55,9 @@ align-items: center; justify-content: space-between; } + +.admin { + display: flex; + align-items: center; + justify-content: space-between; +} diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index f5cdaaa1719607c3179838a281ad8781180d9d70..f5aa7f5fe9599bfd7ffb64e4390004bd88f7676f 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -68,6 +68,21 @@ const HistoryHeader = () => { ); }; +const AdminHeader: GFC = ({ connector }) => { + const handleLogOut = () => { + if (confirm("로그아웃 하시겠습니까?")) { + connector.current?.logout(); + } + }; + + return ( + <div className={S['admin']}> + <span className={'bold'}>AJOUORDER</span> + <span onClick={handleLogOut} className={'cursor-pointer'}>🚀</span> + </div> + ); +}; + interface MenuHeaderProps { headerName: Props['headerName']; } const MenuHeader: GFCWithProp<MenuHeaderProps> = ({ headerName, connector }) => { return ( @@ -93,7 +108,7 @@ const Header: GFCWithProp<Props> = ({ headerName, connector }) => { if (_loc === 'menu') setReturnEl(<MenuHeader headerName={headerName} connector={connector} />); if (_loc === 'cart') setReturnEl(<CartHeader />); if (_loc === 'history') setReturnEl(<HistoryHeader />); - if (_loc === 'admin') setReturnEl(<HomeHeader connector={connector} />); + if (_loc === 'admin') setReturnEl(<AdminHeader connector={connector} />); }, [location, headerName]); return (