diff --git a/src/App.tsx b/src/App.tsx index beae9bec..c8280cb8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -18,7 +18,7 @@ import { Suspense } from 'react'; import Toast from 'component/common/Toast'; import { UserType } from 'model/auth'; import Coop from 'page/Coop'; -import useUserTypeStore from 'store/userType'; +import useUserTypeStore from 'store/useUserTypeStore'; import AddingEvent from 'page/AddingEvent'; interface ProtectedRouteProps { @@ -59,7 +59,6 @@ function App() { } /> } /> } /> - } /> } /> diff --git a/src/component/common/Header/MobilePanel/MobilePanel.module.scss b/src/component/common/Header/MobilePanel/MobilePanel.module.scss index 2ae8a90e..68004c5e 100644 --- a/src/component/common/Header/MobilePanel/MobilePanel.module.scss +++ b/src/component/common/Header/MobilePanel/MobilePanel.module.scss @@ -196,7 +196,27 @@ } } - &__category-title { + &__logo { + position: absolute; + + &--koin { + right: 16px; + top: 16px; + width: 40px; + height: 40px; + } + + &--bcsd { + right: 16px; + bottom: 20px; + width: 33px; + height: 33px; + } + } +} + +.category { + &__title { width: 100%; box-sizing: border-box; padding: 5px 16px; @@ -210,14 +230,14 @@ text-align: left; } - &__sub-menus { + &__submenus { display: flex; flex-wrap: wrap; width: 100%; list-style: none; } - &__sub-menu { + &__submenu { display: block; padding: 8px 20px; width: 50%; @@ -243,22 +263,4 @@ } } } - - &__logo { - position: absolute; - - &--koin { - right: 16px; - top: 16px; - width: 40px; - height: 40px; - } - - &--bcsd { - right: 16px; - bottom: 20px; - width: 33px; - height: 33px; - } - } } diff --git a/src/component/common/Header/MobilePanel/index.tsx b/src/component/common/Header/MobilePanel/index.tsx index fee90b71..eb33fa57 100644 --- a/src/component/common/Header/MobilePanel/index.tsx +++ b/src/component/common/Header/MobilePanel/index.tsx @@ -2,7 +2,6 @@ import { ReactComponent as MobileLogoIcon } from 'assets/svg/common/mobile-koin- 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'; @@ -10,8 +9,39 @@ import useUserStore from 'store/user'; import { useLogout } from 'query/auth'; import usePrevPathStore from 'store/path'; import useMobileSidebar from 'component/common/Header/hooks/useMobileSidebar'; +import useUserTypeStore from 'store/useUserTypeStore'; +import { CATEGORY_COOP, CATEGORY_OWNER, HeaderCategory } from 'utils/constant/category'; import styles from './MobilePanel.module.scss'; +interface Prop { + hideSidebar: () => void; + category: HeaderCategory; +} + +function PanelContent({ hideSidebar, category }: Prop) { + const { title, submenu } = category; + + return ( +
+
+ {title} +
+
    + {submenu.map((subMenu) => ( +
  • + + {subMenu.title} + +
  • + ))} +
+
+ ); +} + export default function MobilePanel() { const navigate = useNavigate(); const { pathname } = useLocation(); @@ -20,6 +50,9 @@ export default function MobilePanel() { const { user } = useUserStore(); const { setPrevPath } = usePrevPathStore((state) => state); const { logout } = useLogout(); + const { userType } = useUserTypeStore(); + + const targetCategory = userType === 'OWNER' ? CATEGORY_OWNER : CATEGORY_COOP; const { isExpanded: isMobileSidebarExpanded, @@ -44,7 +77,7 @@ export default function MobilePanel() { {pathname === '/owner' || pathname === '/coop' ? ( - ) : (CATEGORY + ) : (targetCategory .flatMap((categoryValue) => categoryValue.submenu) .find((subMenuValue) => subMenuValue.link === pathname) ?.title ?? '' @@ -53,8 +86,8 @@ export default function MobilePanel() { + + ))} + + +
ID[`LABEL${index + 1}`]).join(' ')} + > +
    + {panelMenuList?.map((menu) => ( +
  • + + {menu.title} + +
  • + ))} +
+
+ + ); +} + +export default function PCPanel() { + const navigate = useNavigate(); + + const { setPrevPath } = usePrevPathStore((state) => state); + const { logout } = useLogout(); + const { userType } = useUserTypeStore(); + + const targetCategory = userType === 'OWNER' ? CATEGORY_OWNER : CATEGORY_COOP; const handleLogout = () => { logout(undefined, { @@ -45,63 +109,15 @@ export default function PCPanel() { > -
-
    - {CATEGORY.map((category) => ( -
  • - -
  • - ))} -
-
ID[`LABEL${index + 1}`]).join(' ')} - > -
    - {panelMenuList?.map((menu) => ( -
  • - - {menu.title === '가게정보' && menu.title} - -
  • - ))} -
-
-
+ +
    {/* Auth 완료시 수정 필요 */} -
  • + {/*
  • 정보수정 -
  • + */}