[영양사] 사장님, 영양사 권한에 따른 메뉴 구성 변경

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() {
             <Route path="/owner/menu-management" element={<PageNotFound />} />
             <Route path="/owner/order-management" element={<PageNotFound />} />
             <Route path="/owner/sales-management" element={<PageNotFound />} />
-            <Route path="/owner/shop-add" element={<PageNotFound />} />
             <Route path="/owner/event-add/:id" element={<AddingEvent />} />
           </Route>
         </Route>

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;
-    }
-  }
 }

src/component/common/Header/MobilePanel/index.tsx

@@ -2,16 +2,46 @@ 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';
 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 (
+    <div>
+      <div className={styles.category__title}>
+        {title}
+      </div>
+      <ul className={styles.category__submenus}>
+        {submenu.map((subMenu) => (
+          <li
+            key={subMenu.title}
+            className={styles.category__submenu}
+          >
+            <Link to={subMenu.link} onClick={hideSidebar}>
+              {subMenu.title}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
 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() {
         <span className={styles['mobile-header__title']}>
           {pathname === '/owner' || pathname === '/coop' ? (
             <MobileLogoIcon title="코인 로고" />
-          ) : (CATEGORY
+          ) : (targetCategory
             .flatMap((categoryValue) => categoryValue.submenu)
             .find((subMenuValue) => subMenuValue.link === pathname)
             ?.title ?? ''
@@ -53,8 +86,8 @@ export default function MobilePanel() {
         <button
           title="메뉴 버튼"
           className={cn({
-            [styles['mobile-header__icon--right']]: true,
             [styles['mobile-header__icon']]: true,
+            [styles['mobile-header__icon--right']]: true,
           })}
           type="button"
           onClick={expandSidebar}
@@ -98,26 +131,12 @@ export default function MobilePanel() {
               </ul>
             </div>
 
-            {CATEGORY.map((categoryInfo) => (
-              <div key={categoryInfo.title}>
-                <div>
-                  <div className={styles['mobile-header__category-title']}>
-                    {categoryInfo.title}
-                  </div>
-                  <ul className={styles['mobile-header__sub-menus']}>
-                    {categoryInfo.submenu.map((subMenu) => (
-                      <li
-                        className={styles['mobile-header__sub-menu']}
-                        key={subMenu.title}
-                      >
-                        <Link to={subMenu.link}>
-                          {subMenu.title === '가게정보' && subMenu.title}
-                        </Link>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
+            {targetCategory.map((category: HeaderCategory) => (
+              <PanelContent
+                key={category.title}
+                hideSidebar={hideSidebar}
+                category={category}
+              />
             ))}
 
             <img

src/component/common/Header/PCPanel/index.tsx

@@ -1,10 +1,11 @@
 import { ReactComponent as LogoIcon } from 'assets/svg/common/koin-logo.svg';
 import { Link, useNavigate } from 'react-router-dom';
-import CATEGORY from 'utils/constant/category';
+import { CATEGORY_COOP, CATEGORY_OWNER, HeaderCategory } from 'utils/constant/category';
 import cn from 'utils/ts/className';
 import { useLogout } from 'query/auth';
 import usePrevPathStore from 'store/path';
 import useMegaMenu from 'component/common/Header/hooks/useMegaMenu';
+import useUserTypeStore from 'store/useUserTypeStore';
 import styles from './PCPanel.module.scss';
 
 const ID: { [key: string]: string; } = {
@@ -13,19 +14,82 @@ const ID: { [key: string]: string; } = {
   LABEL2: 'mega-menu-label-2',
 };
 
-export default function PCPanel() {
-  const navigate = useNavigate();
-
-  const { setPrevPath } = usePrevPathStore((state) => state);
-  const { logout } = useLogout();
+interface Prop {
+  categoryArray: HeaderCategory[];
+}
 
+function HeaderContent({ categoryArray }: Prop) {
   const {
     panelMenuList,
     isExpanded: isMegaMenuExpanded,
     createOnChangeMenu,
     onFocusPanel,
     hideMegaMenu,
-  } = useMegaMenu(CATEGORY);
+  } = useMegaMenu(categoryArray);
+
+  return (
+    <div
+      className={cn({
+        [styles['mega-menu']]: true,
+        [styles['header__mega-menu']]: true,
+      })}
+      onBlur={hideMegaMenu}
+      onMouseOut={hideMegaMenu}
+    >
+      <ul className={styles['mega-menu__trigger-list']}>
+        {categoryArray.map((category) => (
+          <li
+            key={category.title}
+          >
+            <button
+              className={styles['mega-menu__trigger']}
+              tabIndex={0}
+              type="button"
+              onClick={createOnChangeMenu(category.title)}
+              onFocus={createOnChangeMenu(category.title)}
+              onBlur={hideMegaMenu}
+              onMouseOver={createOnChangeMenu(category.title)}
+              onMouseOut={hideMegaMenu}
+              aria-expanded={isMegaMenuExpanded}
+            >
+              <span>
+                {category.title}
+              </span>
+            </button>
+          </li>
+        ))}
+      </ul>
+
+      <div
+        id={ID.PANEL}
+        className={styles['mega-menu__panel']}
+        onFocus={onFocusPanel}
+        onMouseOver={onFocusPanel}
+        aria-hidden={!isMegaMenuExpanded}
+        aria-labelledby={Array.from({ length: 2 }, (_, index) => ID[`LABEL${index + 1}`]).join(' ')}
+      >
+        <ul className={styles['mega-menu__content']}>
+          {panelMenuList?.map((menu) => (
+            <li className={styles['mega-menu__menu']} key={menu.title}>
+              <Link className={styles['mega-menu__link']} to={menu.link} onClick={hideMegaMenu}>
+                {menu.title}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+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() {
       >
         <LogoIcon title="코인 로고" />
       </Link>
-      <div
-        className={cn({
-          [styles['mega-menu']]: true,
-          [styles['header__mega-menu']]: true,
-        })}
-        onBlur={hideMegaMenu}
-        onMouseOut={hideMegaMenu}
-      >
-        <ul className={styles['mega-menu__trigger-list']}>
-          {CATEGORY.map((category) => (
-            <li
-              key={category.title}
-            >
-              <button
-                className={styles['mega-menu__trigger']}
-                tabIndex={0}
-                type="button"
-                onClick={createOnChangeMenu(category.title)}
-                onFocus={createOnChangeMenu(category.title)}
-                onBlur={hideMegaMenu}
-                onMouseOver={createOnChangeMenu(category.title)}
-                onMouseOut={hideMegaMenu}
-                aria-expanded={isMegaMenuExpanded}
-              >
-                <span>
-                  {category.title}
-                </span>
-              </button>
-            </li>
-          ))}
-        </ul>
-        <div
-          id={ID.PANEL}
-          className={styles['mega-menu__panel']}
-          onFocus={onFocusPanel}
-          onMouseOver={onFocusPanel}
-          aria-hidden={!isMegaMenuExpanded}
-          aria-labelledby={Array.from({ length: 2 }, (_, index) => ID[`LABEL${index + 1}`]).join(' ')}
-        >
-          <ul className={styles['mega-menu__content']}>
-            {panelMenuList?.map((menu) => (
-              <li className={styles['mega-menu__menu']} key={menu.title}>
-                <Link className={styles['mega-menu__link']} to={menu.link}>
-                  {menu.title === '가게정보' && menu.title}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
+      <HeaderContent categoryArray={targetCategory} />
+
       <ul className={styles['header__auth-menu']}>
         {/* Auth 완료시 수정 필요 */}
-        <li className={styles['header__auth-link']}>
+        {/* <li className={styles['header__auth-link']}>
           <Link to="/owner/modify-info">
             정보수정
           </Link>
-        </li>
+        </li> */}
         <li className={styles['header__auth-link']}>
           <button type="button" onClick={handleLogout}>
             로그아웃

src/component/common/Header/hooks/useMegaMenu.ts

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { Category, SubMenu } from 'utils/constant/category';
+import { HeaderCategory, SubMenu } from 'utils/constant/category';
 
-const useMegaMenu = (category: Category[]) => {
+const useMegaMenu = (category: HeaderCategory[]) => {
   const [panelMenuList, setPanelMenuList] = useState<SubMenu[] | null>();
   const [isExpanded, setIsExpanded] = useState(false);
 

src/component/common/Header/index.tsx

@@ -37,11 +37,7 @@ function Header() {
       className={styles.header}
     >
       <nav className={styles.header__content}>
-        {isMobile ? (
-          <MobilePanel />
-        ) : (
-          <PCPanel />
-        )}
+        {isMobile ? <MobilePanel /> : <PCPanel />}
       </nav>
     </header>
   );

src/query/auth.ts

@@ -7,7 +7,7 @@ import { LoginForm } from 'model/auth';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useErrorMessageStore } from 'store/errorMessageStore';
-import useUserTypeStore from 'store/userType';
+import useUserTypeStore from 'store/useUserTypeStore';
 import useUserStore from 'store/user';
 import { isKoinError } from '@bcsdlab/koin';