From ee030358f04bab7f085340ed7f924cede21486ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8C=E1=85=A5=E1=86=BC=E1=84=92=E1=85=A2=E1=84=89?= =?UTF-8?q?=E1=85=A5=E1=86=BC?= Date: Mon, 15 Apr 2024 16:01:43 +0900 Subject: [PATCH 1/6] =?UTF-8?q?refactor:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/common/Header/index.tsx | 31 +++++++++++---------------- 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/src/component/common/Header/index.tsx b/src/component/common/Header/index.tsx index 61af039e..91c99f86 100644 --- a/src/component/common/Header/index.tsx +++ b/src/component/common/Header/index.tsx @@ -21,7 +21,14 @@ const ID: { [key: string]: string; } = { }; function Header() { + const navigate = useNavigate(); const { pathname } = useLocation(); + const { isMobile } = useMediaQuery(); + + const { user } = useUserStore(); + const { setPrevPath } = usePrevPathStore((state) => state); + const { logout } = useLogout(); + const { panelMenuList, isExpanded: isMegaMenuExpanded, @@ -29,17 +36,12 @@ function Header() { onFocusPanel, hideMegaMenu, } = useMegaMenu(CATEGORY); - const { isMobile } = useMediaQuery(); + const { isExpanded: isMobileSidebarExpanded, expandSidebar, hideSidebar, } = useMobileSidebar(pathname, isMobile); - const isMain = true; - const { user } = useUserStore(); - const { logout } = useLogout(); - const navigate = useNavigate(); - const { setPrevPath } = usePrevPathStore((state) => state); const handleLogout = () => { logout(undefined, { @@ -49,10 +51,12 @@ function Header() { }, }); }; + if ((pathname === '/owner/add-menu' || pathname.startsWith('/owner/modify-menu/') || pathname.startsWith('/owner/event-add/')) && isMobile) { return (
- )} {pathname === '/owner' || pathname === '/coop' ? ( @@ -102,6 +95,7 @@ function Header() { )} + + {createPortal( + ( + + ), + document.body, + )} + + ); +} diff --git a/src/component/common/Header/index.tsx b/src/component/common/Header/index.tsx index 91c99f86..477c2d03 100644 --- a/src/component/common/Header/index.tsx +++ b/src/component/common/Header/index.tsx @@ -1,18 +1,14 @@ import { ReactComponent as LogoIcon } from 'assets/svg/common/koin-logo.svg'; -import { ReactComponent as MobileLogoIcon } from 'assets/svg/common/mobile-koin-logo.svg'; -import { ReactComponent as MenuIcon } from 'assets/svg/common/hamburger-menu.svg'; import { ReactComponent as BackArrowIcon } from 'assets/svg/common/back-arrow.svg'; import { Link, useLocation, useNavigate } from 'react-router-dom'; import CATEGORY from 'utils/constant/category'; import cn from 'utils/ts/className'; import useMediaQuery from 'utils/hooks/useMediaQuery'; -import { createPortal } from 'react-dom'; -import useUserStore from 'store/user'; import { useLogout } from 'query/auth'; import usePrevPathStore from 'store/path'; import styles from './Header.module.scss'; -import useMobileSidebar from './hooks/useMobileSidebar'; import useMegaMenu from './hooks/useMegaMenu'; +import MobilePanel from './MobilePanel'; const ID: { [key: string]: string; } = { PANEL: 'megamenu-panel', @@ -25,7 +21,6 @@ function Header() { const { pathname } = useLocation(); const { isMobile } = useMediaQuery(); - const { user } = useUserStore(); const { setPrevPath } = usePrevPathStore((state) => state); const { logout } = useLogout(); @@ -37,12 +32,6 @@ function Header() { hideMegaMenu, } = useMegaMenu(CATEGORY); - const { - isExpanded: isMobileSidebarExpanded, - expandSidebar, - hideSidebar, - } = useMobileSidebar(pathname, isMobile); - const handleLogout = () => { logout(undefined, { onSettled: () => { @@ -52,12 +41,15 @@ function Header() { }); }; - if ((pathname === '/owner/add-menu' || pathname.startsWith('/owner/modify-menu/') || pathname.startsWith('/owner/event-add/')) && isMobile) { + if ((pathname === '/owner/add-menu' + || pathname.startsWith('/owner/modify-menu/') + || pathname.startsWith('/owner/event-add/')) + && isMobile) { return (
{pathname === '/owner/add-menu' && '메뉴추가'} - {pathname.startsWith('/owner/event-add/') && '이벤트/공지 작성하기'} {pathname.startsWith('/owner/modify-menu/') && '메뉴수정'} + {pathname.startsWith('/owner/event-add/') && '이벤트/공지 작성하기'}
); @@ -81,110 +73,7 @@ function Header() { >