From ffb9c1cb424d215061faf009f257616e95aaf6f9 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?= <gotjd0230@naver.com>
Date: Wed, 17 Apr 2024 00:29:53 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20PCPanel=20=EA=B6=8C=ED=95=9C=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                   |   1 -
 .../common/Header/MobilePanel/index.tsx       |   6 +-
 src/component/common/Header/PCPanel/index.tsx | 134 ++++++++++--------
 3 files changed, 78 insertions(+), 63 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index beae9bec..869b781e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -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>
diff --git a/src/component/common/Header/MobilePanel/index.tsx b/src/component/common/Header/MobilePanel/index.tsx
index add1477a..e334e6a1 100644
--- a/src/component/common/Header/MobilePanel/index.tsx
+++ b/src/component/common/Header/MobilePanel/index.tsx
@@ -13,12 +13,12 @@ import useUserTypeStore from 'store/userType';
 import { CATEGORY_COOP, CATEGORY_OWNER, HeaderCategory } from 'utils/constant/category';
 import styles from './MobilePanel.module.scss';
 
-interface Props {
+interface Prop {
   hideSidebar: () => void;
   category: HeaderCategory;
 }
 
-function HeaderContent({ hideSidebar, category }: Props) {
+function PanelContent({ hideSidebar, category }: Prop) {
   const { title, submenu } = category;
 
   return (
@@ -132,7 +132,7 @@ export default function MobilePanel() {
             </div>
 
             {targetCategory.map((category: HeaderCategory) => (
-              <HeaderContent hideSidebar={hideSidebar} category={category} />
+              <PanelContent hideSidebar={hideSidebar} category={category} />
             ))}
 
             <img
diff --git a/src/component/common/Header/PCPanel/index.tsx b/src/component/common/Header/PCPanel/index.tsx
index 3e2d8909..d183f950 100644
--- a/src/component/common/Header/PCPanel/index.tsx
+++ b/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_OWNER, HeaderCategory } 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/userType';
 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_OWNER);
+  } = 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_OWNER.map((category: HeaderCategory) => (
-            <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}>
             로그아웃