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() {