diff --git a/src/entities/common/model/constant.ts b/src/entities/common/model/constant.ts index 96413a5..df11c0a 100644 --- a/src/entities/common/model/constant.ts +++ b/src/entities/common/model/constant.ts @@ -8,8 +8,8 @@ export const DEFAULT_PAGE_PARAM = { }; export const FilterMotionVariants = { - hidden: {x: '100%' }, - visible: { x: '0%' }, + hidden: {x: '100%'}, + visible: {x: '0%'}, }; export const FilterMotionDuration = { duration: 0.3 diff --git a/src/entities/settlement/model/constant.ts b/src/entities/settlement/model/constant.ts new file mode 100644 index 0000000..c6ac3f4 --- /dev/null +++ b/src/entities/settlement/model/constant.ts @@ -0,0 +1,18 @@ +import { SettlementPaymentMethod, SettlementPeriodType } from './types'; + +export const SettlementPeriodTypeBtnGroup = [ + {name: '정산일자', value: SettlementPeriodType.SETTLEMENT_DATE }, + {name: '거래일자', value: SettlementPeriodType.TRANSACTION_DATE } +]; +export const SettlementPaymentMethodOptionsGroup = [ + {name: '전체', value: SettlementPaymentMethod.ALL}, + {name: '신용카드', value: SettlementPaymentMethod.CREDIT_CARD}, + {name: '가상계좌', value: SettlementPaymentMethod.VIRTUAL_ACCOUNT}, + {name: '계좌이체', value: SettlementPaymentMethod.ACCOUNT_TRANSFER}, + {name: '계좌간편결제', value: SettlementPaymentMethod.ACCOUNT_EASY_PAY}, + {name: '휴대폰', value: SettlementPaymentMethod.MOBILE_PAYMENT}, + {name: 'SSG 머니', value: SettlementPaymentMethod.SSG_MONEY}, + {name: 'SSG 은행계좌', value: SettlementPaymentMethod.SSG_BANK_ACCOUNT}, + {name: '문화상품권', value: SettlementPaymentMethod.CULTURE_VOUCHER}, + {name: '티머니페이', value: SettlementPaymentMethod.TMONEY_PAY}, +]; \ No newline at end of file diff --git a/src/entities/settlement/ui/filter/list-filter.tsx b/src/entities/settlement/ui/filter/list-filter.tsx index fc1fd2c..7b48f25 100644 --- a/src/entities/settlement/ui/filter/list-filter.tsx +++ b/src/entities/settlement/ui/filter/list-filter.tsx @@ -1,5 +1,6 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { motion } from 'framer-motion'; +import { IMAGE_ROOT } from '@/shared/constants/common'; import { SettlementPaymentMethod, SettlementPeriodType @@ -9,6 +10,10 @@ import { FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant'; +import { FilterSelect } from '@/shared/ui/filter/select'; +import { FilterCalendar } from '@/shared/ui/filter/calendar'; +import { SettlementPaymentMethodOptionsGroup, SettlementPeriodTypeBtnGroup } from '../../model/constant'; +import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; export interface ListFilterProps { filterOn: boolean; @@ -52,10 +57,10 @@ export const ListFilter = ({ const onClickToSetFilter = () => { setMid(filterMid); - setFilterPeriodType(filterPeriodType); + setPeriodType(filterPeriodType); setStartDate(filterStartDate); setEndDate(filterEndDate); - setFilterPaymentMethod(filterPaymentMethod); + setPaymentMethod(filterPaymentMethod); onClickToClose(); }; @@ -63,6 +68,10 @@ export const ListFilter = ({ {name: 'nictest001m', value: 'nictest001m'} ]; + useEffect(() => { + setFilterPeriodType(periodType); + }, [periodType]); + return ( <> + > +
+
+
필터
+
+ +
+
+
+ + + + +
+
+ +
+
+ ); }; \ No newline at end of file diff --git a/src/entities/settlement/ui/list-wrap.tsx b/src/entities/settlement/ui/list-wrap.tsx index c1d78d4..423b0ba 100644 --- a/src/entities/settlement/ui/list-wrap.tsx +++ b/src/entities/settlement/ui/list-wrap.tsx @@ -23,6 +23,8 @@ import { ListSummaryExtendSettlement } from './list-summary-extend-settlement'; import { ListSummaryExtendTransaction } from './list-summary-extend-transaction'; import SlideDown from 'react-slidedown'; import 'react-slidedown/lib/slidedown.css'; +import { ListFilter } from './filter/list-filter'; +import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation'; export const ListWrap = () => { const { navigate } = useNavigate(); @@ -56,6 +58,7 @@ export const ListWrap = () => { const { mutateAsync: settlementsHistorySummary} = useSettlementsHistorySummaryMutation(); const { mutateAsync: settlementsTransactionList } = useSettlementsTransactionListMutation(); const { mutateAsync: settlementsTransactionSummary } = useSettlementsTransactionSummaryMutation(); + const { mutateAsync: downloadExcel } = useDownloadExcelMutation(); const callList = () => { if(periodType === SettlementPeriodType.SETTLEMENT_DATE){ @@ -170,8 +173,8 @@ export const ListWrap = () => { }; useEffect(() => { callList(); - }, []); - + }, [periodType]); + const getSettlementDateListDateGroup = () => { let rs = []; if(Object.keys(settlementDateListItems).length > 0){ @@ -204,6 +207,17 @@ export const ListWrap = () => { } return rs; }; + const onClickToOpenFilter = () => { + setFilterOn(!filterOn); + }; + const onClickToDownloadExcel = () => { + // tid??? 확인 필요 + downloadExcel({ + // tid: tid + }).then((rs) => { + + }); + }; return ( <> @@ -220,6 +234,7 @@ export const ListWrap = () => { 검색옵션 onClickToOpenFilter() } /> @@ -227,6 +242,7 @@ export const ListWrap = () => { 다운로드 onClickToDownloadExcel() } /> @@ -309,6 +325,20 @@ export const ListWrap = () => { getTransactionDateListDateGroup() } + ); }; \ No newline at end of file