메뉴 설정

src/entities/common/model/constant.ts

@@ -1,3 +1,5 @@
+import { PATHS } from "@/shared/constants/paths";
+
 export const DEFAULT_PAGE_PARAM = {
   cursor: 'string',
   size: 0,
@@ -36,63 +38,96 @@ export const BottomSheetMotionDuration = {
 };
 
 export const MenuItems = [
-    {menuId: '30', parent: '30', menuName: '거래조회', subMenu: 
+  {
-      [
+    menuId: '30',
-        {menuId: '31', parent: '30', menuName: '거래내역조회'},
+    parent: '30',
-        {menuId: '32', parent: '30', menuName: '현금영수증 발행'},
+    menuName: '거래조회',
-        {menuId: '33', parent: '30', menuName: '에스크로'},
+    menuIcon: 'transaction-icon',
-        {menuId: '34', parent: '30', menuName: '빌링'}
+    subMenu: [
+      {menuId: '31', parent: '30', menuName: '거래내역조회', path: PATHS.transaction.allTransaction.list},
+      {menuId: '32', parent: '30', menuName: '현금영수증발행', path: PATHS.transaction.cashReceipt.list},
+      {menuId: '33', parent: '30', menuName: '에스크로', path: PATHS.transaction.escrow.list},
+      {menuId: '34', parent: '30', menuName: '빌링', path: PATHS.transaction.billing.list}
     ]
   },
-    {menuId: '35', parent: '35', menuName: '정산조회', subMenu: 
+  {
-      [
+    menuId: '35',
-        {menuId: '36', parent: '35', menuName: '정산달력'},
+    parent: '35',
-        {menuId: '37', parent: '35', menuName: '정산내역'},
+    menuName: '정산조회',
+    menuIcon: 'settlement-icon',
+    subMenu: [
+      {menuId: '36', parent: '35', menuName: '정산달력', path: PATHS.settlement.calendar},
+      {menuId: '37', parent: '35', menuName: '정산내역', path: PATHS.settlement.list}
     ]
   },
-    {menuId: '38', parent: '38', menuName: '가맹점 관리', subMenu: 
+  {
-      [
+    menuId: '38',
-        {menuId: '39', parent: '38', menuName: '가맹점 정보'},
+    parent: '38',
-        {menuId: '40', parent: '38', menuName: '등록 현황'},
+    menuName: '가맹점관리',
+    menuIcon: 'merchant-icon',
+    subMenu: [
+      {menuId: '39', parent: '38', menuName: '가맹점정보', path: PATHS.merchant.info},
+      {menuId: '40', parent: '38', menuName: '등록현황', path: PATHS.merchant.registrationStatus}
     ]
   },
-    {menuId: '41', parent: '41', menuName: '결제 관리', subMenu: 
+  {
-      [
+    menuId: '41',
-        {menuId: '42', parent: '41', menuName: '결제 정보'},
+    parent: '41',
-        {menuId: '43', parent: '41', menuName: '결제데이터통보'},
+    menuName: '결제관리',
+    menuIcon: 'payment-icon',
+    subMenu: [
+      {menuId: '42', parent: '41', menuName: '결제정보', path: PATHS.payment.info},
+      {menuId: '43', parent: '41', menuName: '결제데이터통보', path: PATHS.payment.dataNotification},
     ]
   },
-    {menuId: '44', parent: '44', menuName: '계정관리', subMenu: 
+  {
-      [
+    menuId: '44',
-        {menuId: '45', parent: '44', menuName: '사용자관리'},
+    parent: '44',
-        {menuId: '46', parent: '44', menuName: '비밀번호관리'},
+    menuName: '계정관리',
+    menuIcon: 'account-icon',
+    subMenu: [
+      {menuId: '45', parent: '44', menuName: '사용자관리', path: PATHS.account.user.manage},
+      {menuId: '46', parent: '44', menuName: '비밀번호관리', path: PATHS.account.password.manage},
     ]
   },
-    {menuId: '47', parent: '47', menuName: '부가세신고자료', subMenu: 
+  {
-      [
+    menuId: '47',
-        {menuId: '48', parent: '47', menuName: '부가세신고자료'},
+    parent: '47',
-        {menuId: '49', parent: '47', menuName: '부가세참고'},
+    menuName: '부가세신고자료',
+    menuIcon: 'vat-icon',
+    subMenu: [
+      {menuId: '48', parent: '47', menuName: '세금계산서', path: PATHS.vatReturn.list},
+      {menuId: '49', parent: '47', menuName: '부가세참고', path: PATHS.vatReturn.reference},
     ]
   },
-    {menuId: '50', parent: '50', menuName: '부가서비스', subMenu: 
+  {
-      [
+    menuId: '50',
-        {menuId: '51', parent: '50', menuName: '부가서비스소개'},
+    parent: '50',
-        {menuId: '52', parent: '50', menuName: '신용카드ARS카드결제'},
+    menuName: '부가서비스',
-        {menuId: '53', parent: '50', menuName: '계좌이체ARS카드결제'},
+    menuIcon: 'service-icon',
-        {menuId: '54', parent: '50', menuName: '가상계좌ARS카드결제'},
+    subMenu: [
-        {menuId: '55', parent: '50', menuName: '휴대폰ARS카드결제'},
+      {menuId: '51', parent: '50', menuName: '부가서비스소개', path: PATHS.additionalService.list},
-        {menuId: '56', parent: '50', menuName: '계좌간편결제ARS카드결제'},
+      {menuId: '52', parent: '50', menuName: '신용카드ARS카드결제', path: PATHS.additionalService.ars.list},
-        {menuId: '57', parent: '50', menuName: 'SSG머니ARS카드결제'},
+      {menuId: '53', parent: '50', menuName: '지급대행', path: PATHS.additionalService.payout.list},
-        {menuId: '58', parent: '50', menuName: 'SSG은행계좌ARS카드결제'},
+      {menuId: '54', parent: '50', menuName: '링크결제', path: PATHS.additionalService.linkPayment.shippingHistory},
-        {menuId: '59', parent: '50', menuName: '문화상품권ARS카드결제'},
+      {menuId: '55', parent: '50', menuName: '자금이체', path: PATHS.additionalService.fundAccount.transferList},
-        {menuId: '60', parent: '50', menuName: '티머니페이ARS카드결제'},
+      {menuId: '56', parent: '50', menuName: 'KEY-IN결제', path: PATHS.additionalService.keyInPayment.list},
+      {menuId: '57', parent: '50', menuName: 'SMS결제통보', path: PATHS.additionalService.smsPaymentNotification},
+      {menuId: '58', parent: '50', menuName: '알림톡결제통보', path: PATHS.additionalService.alimtalk.list},
+      {menuId: '59', parent: '50', menuName: '계좌점유인증', path: PATHS.additionalService.accountHolderAuth.list},
+      {menuId: '60', parent: '50', menuName: '계좌성명조회', path: PATHS.additionalService.accountHolderSearch.list},
+      {menuId: '65', parent: '50', menuName: '안면인증', path: PATHS.additionalService.faceAuth.list},
     ]
   },
-    {menuId: '61', parent: '61', menuName: '고객지원', subMenu: 
+  {
-      [
+    menuId: '61',
-        {menuId: '62', parent: '61', menuName: '공지사항'},
+    parent: '61',
-        {menuId: '63', parent: '61', menuName: '자주묻는질문'},
+    menuName: '고객지원',
-        {menuId: '64', parent: '61', menuName: '1:1문의'},
+    menuIcon: 'support-icon',
+    subMenu: [
+      {menuId: '62', parent: '61', menuName: '공지사항', path: PATHS.support.notice.list},
+      {menuId: '63', parent: '61', menuName: '자주묻는질문', path: PATHS.support.faq.list},
+      {menuId: '64', parent: '61', menuName: '1:1문의', path: PATHS.support.qna.list},
     ]
   },
-  ]
+];

src/entities/menu/model/types.ts

@@ -1,12 +1,16 @@
-export interface MenuCategoryItem {
+export interface MenuItem {
-  title: string;
+  menuId?: string;
-  path: string;
+  parent?: string;
+  menuName: string;
+  menuIcon?: string;
+  path?: string;
+  subMenu?: Array<MenuItem>
 };
 export interface MenuCategoryProps {
-  key: string;
+  menuId?: string;
-  category: string;
+  menuIcon?: string;
-  categoryIcon?: string;
+  menuName?: string;
-  items: Array<MenuCategoryItem>;
+  subMenu?: Array<MenuItem>;
-  setMenuOn: (menuOn: boolean) => void;
+  setMenuOn?: (menuOn: boolean) => void;
   favoriteEdit?: boolean;
 };

src/entities/menu/ui/menu-category.tsx

@@ -4,16 +4,17 @@ import { useStore } from '@/shared/model/store';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 
 export const MenuCategory = ({
-  category,
+  menuId,
-  categoryIcon,
+  menuIcon,
-  items,
+  menuName,
+  subMenu,
   setMenuOn,
   favoriteEdit
 }: MenuCategoryProps) => {
   const { navigate } = useNavigate();
 
   const onClickToNavigate = (path?: string) => {
-    if(!!path && !favoriteEdit){
+    if(!!path && !!setMenuOn && !favoriteEdit){
       setMenuOn(false);
       navigate(path);
     }
@@ -33,24 +34,25 @@ export const MenuCategory = ({
 
   const getMenuItems = () => {
     let rs = [];
-    for(let i=0;i<items.length;i++){
+    if(subMenu){
+      for(let i=0;i<subMenu.length;i++){
         if(!!favoriteEdit){
           rs.push(
             <li
-            key={ `menu-item-key-${category}-${i}` }
+              key={ `menu-item-key-${menuId}-${i}` }
-            onClick={ () => onClickToNavigate(items[i]?.path) }
+              onClick={ () => onClickToNavigate(subMenu[i]?.path) }
             >
-            <span>{ items[i]?.title }</span>
+              <span>{ subMenu[i]?.menuName }</span>
               <div className="check_box_scrap">
                 <input 
-                id={ `menu-item-checkbox-${category}-${i}` }
+                  id={ `menu-item-checkbox-${menuId}-${i}` }
                   className="checkbox"
                   type="checkbox" 
-                onChange={ (e) => favoriteSetting(e.target.checked, items[i]?.title, items[i]?.path) }
+                  onChange={ (e) => favoriteSetting(e.target.checked, subMenu[i]?.menuName, subMenu[i]?.path) }
                 />
                 <label 
                   className="gtr"
-                htmlFor={ `menu-item-checkbox-${category}-${i}` }
+                  htmlFor={ `menu-item-checkbox-${menuId}-${i}` }
                 ></label>
               </div>
             </li>
@@ -60,12 +62,14 @@ export const MenuCategory = ({
           rs.push(
             <li
               key={ `menu-item-key-${i}` }
-            onClick={ () => onClickToNavigate(items[i]?.path) }
+              onClick={ () => onClickToNavigate(subMenu[i]?.path) }
-          >{ items[i]?.title }</li>
+            >{ subMenu[i]?.menuName }</li>
           );
         }
         
       }
+    }
+    
     return rs;
   };
 
@@ -73,8 +77,8 @@ export const MenuCategory = ({
     <>
       <div className="menu-category">
         <div className="category-header">
-          <div className={ 'category-icon ' + categoryIcon }></div>
+          <div className={ 'category-icon ' + menuIcon }></div>
-          <span>{ category }</span>
+          <span>{ menuName }</span>
         </div>
         <ul className="category-items">
           { getMenuItems() }

src/shared/ui/menu/index.tsx

@@ -5,7 +5,9 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { MenuCategory } from '@/entities/menu/ui/menu-category';
 import { FavoriteWrapper } from '@/entities/home/ui/favorite-wrapper';
 import { useStore } from '@/shared/model/store';
-import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
+import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants, MenuItems } from '@/entities/common/model/constant';
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router';
 
 export interface MenuProps {
   menuOn: boolean;
@@ -17,9 +19,13 @@ export const Menu = ({
   setMenuOn,
   favoriteEdit
 }: MenuProps) => {
+  const location = useLocation();
+  console.log(location)
   const { navigate } = useNavigate();
   const userInfo = useStore((state) => state.UserStore.userInfo);
 
+  const [shortBtns, setShortBtns] = useState<Array<Record<string, any>>>([]);
+  
   const onClickToNavigate = (path: string) => {
     onClickToMenuClose();
     navigate(path);
@@ -28,95 +34,17 @@ export const Menu = ({
     setMenuOn(false);
   };  
   
-  const menuCategoryItems = {
-    transaction: {
-      category: '거래조회',
-      categoryIcon: 'transaction-icon',
-      items: [
-        {title: '거래내역 조회', path: PATHS.transaction.allTransaction.list},
-        {title: '현금영수증 발행', path: PATHS.transaction.cashReceipt.list},
-        {title: '에스크로', path: PATHS.transaction.escrow.list},
-        {title: '빌링', path: PATHS.transaction.billing.list}
-      ]
-    },
-    settlement: {
-      category: '정산조회',
-      categoryIcon: 'settlement-icon',
-      items: [
-        {title: '정산달력', path: PATHS.settlement.calendar},
-        {title: '정산내역', path: PATHS.settlement.list},
-      ]
-    },
-    businessMember: {
-      category: '가맹점 관리',
-      categoryIcon: 'merchant-icon',
-      items: [
-        {title: '가맹점 정보', path: PATHS.merchant.info},
-        {title: '등록 현황', path: PATHS.merchant.registrationStatus},
-      ]
-    },
-    payment: {
-      category: '결제 관리',
-      categoryIcon: 'payment-icon',
-      items: [
-        {title: '결제 정보', path: PATHS.payment.info},
-        {title: '결제 데이터 통보', path: PATHS.payment.dataNotification},
-      ]
-    },
-    account: {
-      category: '계정 관리',
-      categoryIcon: 'account-icon',
-      items: [
-        {title: '사용자 관리', path: PATHS.account.user.manage},
-        {title: '비밀번호 관리', path: PATHS.account.password.manage},
-      ]
-    },
-    tax: {
-      category: '부가세 신고 자료',
-      categoryIcon: 'vat-icon',
-      items: [
-        {title: '세금계산서', path: PATHS.vatReturn.list},
-        {title: '부가세 참고', path: PATHS.vatReturn.reference},
-      ]
-    },
-    additionalService: {
-      category: '부가서비스',
-      categoryIcon: 'service-icon',
-      items: [
-        {title: '부가서비스소개', path: PATHS.additionalService.list},
-        {title: 'ARS 카드결제', path: PATHS.additionalService.ars.list},
-        {title: 'KEY-IN 결제', path: PATHS.additionalService.keyInPayment.list},
-        {title: 'SMS 결제 통보', path: PATHS.additionalService.smsPaymentNotification},
-        {title: '계좌성명조회', path: PATHS.additionalService.accountHolderSearch.list},
-        {title: '계좌점유인증', path: PATHS.additionalService.accountHolderAuth.list},
-        {title: '링크결제', path: PATHS.additionalService.linkPayment.shippingHistory},
-        {title: '알림톡 결제통보', path: PATHS.additionalService.alimtalk.list},
-        {title: '자금이체', path: PATHS.additionalService.fundAccount.transferList},
-        {title: '정산대행', path: PATHS.additionalService.settlementAgency.manage},
-        {title: '지급대행', path: PATHS.additionalService.payout.list},
-        {title: '안면인증', path: PATHS.additionalService.faceAuth.list}
-      ]
-    },
-    support: {
-      category: '고객지원',
-      categoryIcon: 'support-icon',
-      items: [
-        {title: '공지사항', path: PATHS.support.notice.list},
-        {title: '자주 묻는 질문', path: PATHS.support.faq.list},
-        {title: '1:1 문의', path: PATHS.support.qna.list},
-      ]
-    },
-  }
-  
   const getMenuCategory = () => {
     let rs = [];
-    for (const [key, value] of Object.entries(menuCategoryItems)) {
+    let shortList = [];
+    for (let i=0;i<MenuItems.length;i++) {
       rs.push(
         <MenuCategory
-          key={ key }
+          key={ `menu-category-${i}` }
-          category={ value.category }
+          menuId={ MenuItems[i]?.menuId }
-          categoryIcon={ value.categoryIcon }
+          menuIcon={ MenuItems[i]?.menuIcon }
-          items={ value.items }
+          menuName={ MenuItems[i]?.menuName }
+          subMenu={ MenuItems[i]?.subMenu }
           setMenuOn={ setMenuOn }
           favoriteEdit={ favoriteEdit }
         />
@@ -125,6 +53,24 @@ export const Menu = ({
     return rs;
   };
 
+  const shortBtnsSetting = () => {
+    let shortList = [];
+    for(let i=0;i<MenuItems.length;i++) {
+      if(MenuItems[i]?.subMenu[0]){
+        shortList.push({
+          menuId: MenuItems[i]?.subMenu[0]?.menuId,
+          menuName: MenuItems[i]?.menuName,
+          path: MenuItems[i]?.subMenu[0]?.path,
+        });
+      }      
+    }
+    setShortBtns(shortList);
+  };
+  
+  useEffect(() => {
+    shortBtnsSetting();
+  }, []);
+
   return (
     <>
       <motion.div 
@@ -173,12 +119,15 @@ export const Menu = ({
             
           <div>
             <div className="full-menu-keywords">
-              <span className="keyword-tag active">거래조회</span>
+            {
-              <span className="keyword-tag">정산조회</span>
+              shortBtns.map((value, index) => (
-              <span className="keyword-tag">가맹점관리</span>
+                <span 
-              <span className="keyword-tag">계정관리</span>
+                  key={ `short-btn-${value.menuName}` }
-              <span className="keyword-tag">가맹점관리</span>
+                  className={ `keyword-tag ${(location.pathname === value.path)? 'active': ''}` }
-              <span className="keyword-tag">계정관리</span>
+                  onClick={ () => onClickToNavigate(value.path) }
+                >{ value.menuName }</span>    
+              ))
+            }
             </div>
           </div>