메뉴 설정

2025-09-29 18:07:57 +09:00
parent 19cbd9b115
commit b63c3f50a2
4 changed files with 190 additions and 198 deletions
--- a/src/entities/common/model/constant.ts
+++ b/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: '31', parent: '30', menuName: '거래내역조회'},
-        {menuId: '32', parent: '30', menuName: '현금영수증 발행'},
-        {menuId: '33', parent: '30', menuName: '에스크로'},
-        {menuId: '34', parent: '30', menuName: '빌링'}
-      ]
-    },
-    {menuId: '35', parent: '35', menuName: '정산조회', subMenu: 
-      [
-        {menuId: '36', parent: '35', menuName: '정산달력'},
-        {menuId: '37', parent: '35', menuName: '정산내역'},
-      ]
-    },
-    {menuId: '38', parent: '38', menuName: '가맹점 관리', subMenu: 
-      [
-        {menuId: '39', parent: '38', menuName: '가맹점 정보'},
-        {menuId: '40', parent: '38', menuName: '등록 현황'},
-      ]
-    },
-    {menuId: '41', parent: '41', menuName: '결제 관리', subMenu: 
-      [
-        {menuId: '42', parent: '41', menuName: '결제 정보'},
-        {menuId: '43', parent: '41', menuName: '결제데이터통보'},
-      ]
-    },
-    {menuId: '44', parent: '44', menuName: '계정관리', subMenu: 
-      [
-        {menuId: '45', parent: '44', menuName: '사용자관리'},
-        {menuId: '46', parent: '44', menuName: '비밀번호관리'},
-      ]
-    },
-    {menuId: '47', parent: '47', menuName: '부가세신고자료', subMenu: 
-      [
-        {menuId: '48', parent: '47', menuName: '부가세신고자료'},
-        {menuId: '49', parent: '47', menuName: '부가세참고'},
-      ]
-    },
-    {menuId: '50', parent: '50', menuName: '부가서비스', subMenu: 
-      [
-        {menuId: '51', parent: '50', menuName: '부가서비스소개'},
-        {menuId: '52', parent: '50', menuName: '신용카드ARS카드결제'},
-        {menuId: '53', parent: '50', menuName: '계좌이체ARS카드결제'},
-        {menuId: '54', parent: '50', menuName: '가상계좌ARS카드결제'},
-        {menuId: '55', parent: '50', menuName: '휴대폰ARS카드결제'},
-        {menuId: '56', parent: '50', menuName: '계좌간편결제ARS카드결제'},
-        {menuId: '57', parent: '50', menuName: 'SSG머니ARS카드결제'},
-        {menuId: '58', parent: '50', menuName: 'SSG은행계좌ARS카드결제'},
-        {menuId: '59', parent: '50', menuName: '문화상품권ARS카드결제'},
-        {menuId: '60', parent: '50', menuName: '티머니페이ARS카드결제'},
-      ]
-    },
-    {menuId: '61', parent: '61', menuName: '고객지원', subMenu: 
-      [
-        {menuId: '62', parent: '61', menuName: '공지사항'},
-        {menuId: '63', parent: '61', menuName: '자주묻는질문'},
-        {menuId: '64', parent: '61', menuName: '1:1문의'},
-      ]
-    },
-  ]
+  {
+    menuId: '30',
+    parent: '30',
+    menuName: '거래조회',
+    menuIcon: 'transaction-icon',
+    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: '정산조회',
+    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: '가맹점관리',
+    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: '결제관리',
+    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: '계정관리',
+    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: '부가세신고자료',
+    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: '부가서비스',
+    menuIcon: 'service-icon',
+    subMenu: [
+      {menuId: '51', parent: '50', menuName: '부가서비스소개', path: PATHS.additionalService.list},
+      {menuId: '52', parent: '50', menuName: '신용카드ARS카드결제', path: PATHS.additionalService.ars.list},
+      {menuId: '53', parent: '50', menuName: '지급대행', path: PATHS.additionalService.payout.list},
+      {menuId: '54', parent: '50', menuName: '링크결제', path: PATHS.additionalService.linkPayment.shippingHistory},
+      {menuId: '55', parent: '50', menuName: '자금이체', path: PATHS.additionalService.fundAccount.transferList},
+      {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: '고객지원',
+    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},
+    ]
+  },
+];
--- a/src/entities/menu/model/types.ts
+++ b/src/entities/menu/model/types.ts
@@ -1,12 +1,16 @@
-export interface MenuCategoryItem {
-  title: string;
-  path: string;
+export interface MenuItem {
+  menuId?: string;
+  parent?: string;
+  menuName: string;
+  menuIcon?: string;
+  path?: string;
+  subMenu?: Array<MenuItem>
 };
 export interface MenuCategoryProps {
-  key: string;
-  category: string;
-  categoryIcon?: string;
-  items: Array<MenuCategoryItem>;
-  setMenuOn: (menuOn: boolean) => void;
+  menuId?: string;
+  menuIcon?: string;
+  menuName?: string;
+  subMenu?: Array<MenuItem>;
+  setMenuOn?: (menuOn: boolean) => void;
  favoriteEdit?: boolean;
 };
--- a/src/entities/menu/ui/menu-category.tsx
+++ b/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,
-  categoryIcon,
-  items,
+  menuId,
+  menuIcon,
+  menuName,
+  subMenu,
  setMenuOn,
  favoriteEdit
 }: MenuCategoryProps) => {
  const { navigate } = useNavigate();

  const onClickToNavigate = (path?: string) => {
-    if(!!path && !favoriteEdit){
+    if(!!path && !!setMenuOn && !favoriteEdit){
      setMenuOn(false);
      navigate(path);
    }
@@ -33,39 +34,42 @@ export const MenuCategory = ({

  const getMenuItems = () => {
    let rs = [];
-    for(let i=0;i<items.length;i++){
-      if(!!favoriteEdit){
-        rs.push(
-          <li
-            key={ `menu-item-key-${category}-${i}` }
-            onClick={ () => onClickToNavigate(items[i]?.path) }
-          >
-            <span>{ items[i]?.title }</span>
-            <div className="check_box_scrap">
-              <input 
-                id={ `menu-item-checkbox-${category}-${i}` }
-                className="checkbox"
-                type="checkbox" 
-                onChange={ (e) => favoriteSetting(e.target.checked, items[i]?.title, items[i]?.path) }
-              />
-              <label 
-                className="gtr"
-                htmlFor={ `menu-item-checkbox-${category}-${i}` }
-              ></label>
-            </div>
-          </li>
-        );
+    if(subMenu){
+      for(let i=0;i<subMenu.length;i++){
+        if(!!favoriteEdit){
+          rs.push(
+            <li
+              key={ `menu-item-key-${menuId}-${i}` }
+              onClick={ () => onClickToNavigate(subMenu[i]?.path) }
+            >
+              <span>{ subMenu[i]?.menuName }</span>
+              <div className="check_box_scrap">
+                <input 
+                  id={ `menu-item-checkbox-${menuId}-${i}` }
+                  className="checkbox"
+                  type="checkbox" 
+                  onChange={ (e) => favoriteSetting(e.target.checked, subMenu[i]?.menuName, subMenu[i]?.path) }
+                />
+                <label 
+                  className="gtr"
+                  htmlFor={ `menu-item-checkbox-${menuId}-${i}` }
+                ></label>
+              </div>
+            </li>
+          );
+        }
+        else{
+          rs.push(
+            <li
+              key={ `menu-item-key-${i}` }
+              onClick={ () => onClickToNavigate(subMenu[i]?.path) }
+            >{ subMenu[i]?.menuName }</li>
+          );
+        }
+        
      }
-      else{
-        rs.push(
-          <li
-            key={ `menu-item-key-${i}` }
-            onClick={ () => onClickToNavigate(items[i]?.path) }
-          >{ items[i]?.title }</li>
-        );
-      }
-      
    }
+    
    return rs;
  };

@@ -73,8 +77,8 @@ export const MenuCategory = ({
    <>
      <div className="menu-category">
        <div className="category-header">
-          <div className={ 'category-icon ' + categoryIcon }></div>
-          <span>{ category }</span>
+          <div className={ 'category-icon ' + menuIcon }></div>
+          <span>{ menuName }</span>
        </div>
        <ul className="category-items">
          { getMenuItems() }
--- a/src/shared/ui/menu/index.tsx
+++ b/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>