nice-app-web/src/shared/ui/menu/index.tsx

import { PATHS } from '@/shared/constants/paths';
import { motion } from 'framer-motion';
import { IMAGE_ROOT } from '@/shared/constants/common';
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';

export interface MenuProps {
  menuOn: boolean;
  setMenuOn: (menuOn: boolean) => void;
};
export const Menu = ({
  menuOn,
  setMenuOn
}: MenuProps) => {
  const { navigate } = useNavigate();
  const userInfo = useStore((state) => state.UserStore.userInfo);
  
  const onClickToNavigate = (path: string) => {
    onClickToMenuClose();
    navigate(path);
  };
  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},
      ]
    },
    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 variants = {
    hidden: { x: '100%' },
    visible: { x: '0%' },
  };

  const getMenuCategory = () => {
    let rs = [];
    for (const [key, value] of Object.entries(menuCategoryItems)) {
      rs.push(
        <MenuCategory
          key={ key }
          category={ value.category }
          categoryIcon={ value.categoryIcon }
          items={ value.items }
          setMenuOn={ setMenuOn }
        />
      );
    }
    return rs;
  };

  return (
    <>
      <motion.div 
        className="full-menu-modal" 
        initial="hidden"
        animate={ (menuOn)? 'visible': 'hidden' }
        variants={ FilterMotionVariants }
        transition={ FilterMotionDuration }
        style={ FilterMotionStyle }
      >
        <div className="full-menu-container">
          <div className="full-menu-header">
            <div className="full-menu-title">{ 'nictest001m' } <span>(madzoneviper)</span></div>
            <div className="full-menu-actions">
              <button 
                className="full-menu-settings"
                onClick={ () => onClickToNavigate(PATHS.setting) }
              >
                <img src={ IMAGE_ROOT + '/ico_set.svg' } alt="설정" />
              </button>
              <button 
                className="full-menu-close"
                onClick={ () => onClickToMenuClose() }
              >
                <img src={ IMAGE_ROOT + '/ico_close.svg' } alt="설정" />
              </button>
            </div>
          </div>
            
          <div className="full-menu-top-nav">
            { <FavoriteWrapper></FavoriteWrapper> }
          </div>
            
          <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>
            </div>
          </div>
            
          <div className="full-menu-list">
            { getMenuCategory() }
          </div>
        </div>
      </motion.div>
    </>
  );
};