메뉴 설정

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,8 +19,12 @@ 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();
@@ -27,96 +33,18 @@ export const Menu = ({
   const onClickToMenuClose = () => {
     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 }
-          category={ value.category }
-          categoryIcon={ value.categoryIcon }
-          items={ value.items }
+          key={ `menu-category-${i}` }
+          menuId={ MenuItems[i]?.menuId }
+          menuIcon={ MenuItems[i]?.menuIcon }
+          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,17 +119,20 @@ export const Menu = ({
             
           <div>
             <div className="full-menu-keywords">
-              <span className="keyword-tag active">거래조회</span>
-              <span className="keyword-tag">정산조회</span>
-              <span className="keyword-tag">가맹점관리</span>
-              <span className="keyword-tag">계정관리</span>
-              <span className="keyword-tag">가맹점관리</span>
-              <span className="keyword-tag">계정관리</span>
+            {
+              shortBtns.map((value, index) => (
+                <span 
+                  key={ `short-btn-${value.menuName}` }
+                  className={ `keyword-tag ${(location.pathname === value.path)? 'active': ''}` }
+                  onClick={ () => onClickToNavigate(value.path) }
+                >{ value.menuName }</span>    
+              ))
+            }
             </div>
           </div>
             
           <div className="full-menu-list">
-            { getMenuCategory() }
+          { getMenuCategory() }
           </div>
         </div>
       </motion.div>