첫 커밋
This commit is contained in:
focp212@naver.com
184
src/shared/ui/menu/index.tsx
Normal file
184
src/shared/ui/menu/index.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
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';
|
||||
|
||||
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.cashReceit.list},
|
||||
{title: '에스크로', path: PATHS.transaction.escro.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.businessMember.info},
|
||||
{title: '등록 현황', path: PATHS.businessMember.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.tax.invoice.list},
|
||||
{title: '부가세 참고', path: PATHS.tax.vatReference},
|
||||
]
|
||||
},
|
||||
additionalService: {
|
||||
category: '부가서비스',
|
||||
categoryIcon: 'service-icon',
|
||||
items: [
|
||||
{title: '부가서비스소개', path: PATHS.additionalService.intro},
|
||||
{title: 'ARS 카드결제', path: PATHS.additionalService.arsCardPayment.list},
|
||||
{title: 'KEY-IN 결제', path: PATHS.additionalService.keyInPayment},
|
||||
{title: 'SMS 결제 통보', path: PATHS.additionalService.smsPaymentNotification},
|
||||
{title: '계좌성명조회', path: PATHS.additionalService.accountHolderSearch},
|
||||
{title: '계좌점유인증', path: PATHS.additionalService.accountHolderAuth},
|
||||
{title: '링크결제', path: PATHS.additionalService.linkPayment},
|
||||
{title: '알림톡 결제통보', path: PATHS.additionalService.kakaoPaymentNotification},
|
||||
{title: '자금이체', path: PATHS.additionalService.fundTransfer},
|
||||
{title: '정산대행', path: PATHS.additionalService.settlementAgency},
|
||||
{title: '지급대행', path: PATHS.additionalService.paymentAgency},
|
||||
]
|
||||
},
|
||||
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
|
||||
id="fullMenuModal"
|
||||
className="full-menu-modal"
|
||||
initial="hidden"
|
||||
animate={ (menuOn)? 'visible': 'hidden' }
|
||||
variants={ variants }
|
||||
transition={{ duration: 0.3 }}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div className="full-menu-container">
|
||||
<div className="full-menu-header">
|
||||
<div className="full-menu-title">{ userInfo.usrid } <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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user