From 8c918d50dd8d9b3202ebadfe84fbddc40b95ed84 Mon Sep 17 00:00:00 2001 From: HyeonJongKim Date: Mon, 15 Sep 2025 11:24:11 +0900 Subject: [PATCH 1/2] =?UTF-8?q?KeyIn=EA=B2=B0=EC=A0=9C=20=ED=95=84?= =?UTF-8?q?=ED=84=B0=20=EC=B6=94=EA=B0=80=20,=20range-amount=20=EC=9E=85?= =?UTF-8?q?=EB=A0=A5=20type=20:=20number=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../additional-service/model/types.ts | 20 +++ .../account-holder-search-filter.tsx | 2 +- .../key-in-payment/key-in-payment-filter.tsx | 145 ++++++++++++++++++ .../link-payment-pending-send-filter.tsx | 2 +- .../link-payment-shipping-history-filter.tsx | 2 +- .../transaction/ui/filter/billing-filter.tsx | 8 +- .../key-in-payment/key-in-payment-page.tsx | 36 +++++ src/shared/ui/filter/range-amount.tsx | 4 +- 8 files changed, 211 insertions(+), 8 deletions(-) create mode 100644 src/entities/additional-service/ui/key-in-payment/key-in-payment-filter.tsx diff --git a/src/entities/additional-service/model/types.ts b/src/entities/additional-service/model/types.ts index f722ecc..a74141d 100644 --- a/src/entities/additional-service/model/types.ts +++ b/src/entities/additional-service/model/types.ts @@ -28,6 +28,12 @@ export enum ProcessResult { SUCCESS = 'SUCCESS', FAILURE = 'FAILURE' }; +export enum KeyInPaymentTransactionStatus { + ALL = 'ALL', + APPROVE = 'APPROVE', + BF_CANCEL = 'BF_CANCEL', + AF_CANCEL = 'AF_CANCEL' +} export enum AccountHolderSearchType { ALL = 'ALL', ACCOUNT_HOLDER = 'ACCOUNT_HOLDER', @@ -353,6 +359,20 @@ export interface FilterProps { filterOn: boolean; setFilterOn: (filterOn: boolean) => void; }; +export interface KeyInPaymentFilterProps extends FilterProps { + mid: string, + startDate: string; + endDate: string; + transactionStatus: KeyInPaymentTransactionStatus; + minAmount?: number | string; + maxAmount?: number | string; + setMid: (mid: string) => void; + setStartDate: (startDate: string) => void; + setEndDate: (endDate: string) => void; + setMinAmount: (minAmount: string | number) => void; + setMaxAmount: (maxAmount: string | number) => void; + setTransactionStatus: (transactionStatus: KeyInPaymentTransactionStatus) => void; +} // 계좌성명 조회 필터 export interface AccountHolderSearchFilterProps extends FilterProps { mid: string; diff --git a/src/entities/additional-service/ui/account-holder-search/account-holder-search-filter.tsx b/src/entities/additional-service/ui/account-holder-search/account-holder-search-filter.tsx index 474484f..e6d64c4 100644 --- a/src/entities/additional-service/ui/account-holder-search/account-holder-search-filter.tsx +++ b/src/entities/additional-service/ui/account-holder-search/account-holder-search-filter.tsx @@ -11,7 +11,7 @@ import { import { FilterSelect } from '@/shared/ui/filter/select'; import { FilterSelectInput } from '@/shared/ui/filter/select-input'; import { FilterDateOptions } from '@/entities/common/model/types'; -import { FilterCalendar } from '@/shared/ui/filter/filter-calendar'; +import { FilterCalendar } from '@/shared/ui/filter/calendar'; import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; export const AccountHolderSearchFilter = ({ diff --git a/src/entities/additional-service/ui/key-in-payment/key-in-payment-filter.tsx b/src/entities/additional-service/ui/key-in-payment/key-in-payment-filter.tsx new file mode 100644 index 0000000..f4d0e5c --- /dev/null +++ b/src/entities/additional-service/ui/key-in-payment/key-in-payment-filter.tsx @@ -0,0 +1,145 @@ +import moment from 'moment'; +import { useEffect } from 'react'; +import { useState } from 'react'; +import { motion } from 'framer-motion'; +import { IMAGE_ROOT } from '@/shared/constants/common'; +import { FilterSelect } from '@/shared/ui/filter/select'; +import { FilterSelectInput } from '@/shared/ui/filter/select-input'; +import { FilterCalendar } from '@/shared/ui/filter/calendar'; +import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; +import { FilterRangeAmount } from '@/shared/ui/filter/range-amount'; +import { + KeyInPaymentFilterProps, + KeyInPaymentTransactionStatus +} from '../../model/types'; + +export const KeyInPaymentFilter = ({ + filterOn, + setFilterOn, + mid, + startDate, + endDate, + transactionStatus, + minAmount, + maxAmount, + setMid, + setStartDate, + setEndDate, + setTransactionStatus, + setMinAmount, + setMaxAmount +}: KeyInPaymentFilterProps) => { + + const [filterMid, setFilterMid] = useState(mid); + const [filterStartDate, setFilterStartDate] = useState(startDate); + const [filterEndDate, setFilterEndDate] = useState(endDate); + const [filterTransactionStatus, setFilterTransactionStatus] = useState(transactionStatus); + const [filterMinAmount, setFilterMinAmount] = useState(minAmount || ''); + const [filterMaxAmount, setFilterMaxAmount] = useState(maxAmount || ''); + + const variants = { + hidden: { x: '100%' }, + visible: { x: '0%' }, + }; + + const onClickToClose = () => { + setFilterOn(false); + }; + + const setNewDate = (newDate: any) => { + console.log(newDate) + }; + + const onClickToSetFilter = () => { + setMid(filterMid); + setStartDate(filterStartDate); + setEndDate(filterEndDate); + setTransactionStatus(filterTransactionStatus); + setMinAmount(filterMinAmount); + setMaxAmount(filterMaxAmount); + onClickToClose(); + }; + let MidOptions = [ + { name: 'nictest001m', value: 'nictest001m' } + ]; + + let transactionStatusOption = [ + { name: '전체', value: KeyInPaymentTransactionStatus.ALL }, + { name: '승인', value: KeyInPaymentTransactionStatus.APPROVE }, + { name: '전취소', value: KeyInPaymentTransactionStatus.BF_CANCEL }, + { name: '후취소', value: KeyInPaymentTransactionStatus.AF_CANCEL }, + ] + + return ( + <> + +
+
+
필터
+
+ +
+
+ +
+ + + + + + + +
+
+ +
+
+ + + ); +}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx b/src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx index 6ee16b7..6d06611 100644 --- a/src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx +++ b/src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx @@ -12,7 +12,7 @@ import { import { FilterSelect } from '@/shared/ui/filter/select'; import { FilterSelectInput } from '@/shared/ui/filter/select-input'; import { FilterDateOptions } from '@/entities/common/model/types'; -import { FilterCalendar } from '@/shared/ui/filter/filter-calendar'; +import { FilterCalendar } from '@/shared/ui/filter/calendar'; import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; export const LinkPaymentPendingSendFilter = ({ diff --git a/src/entities/additional-service/ui/link-payment/filter/link-payment-shipping-history-filter.tsx b/src/entities/additional-service/ui/link-payment/filter/link-payment-shipping-history-filter.tsx index 086f6b2..a518749 100644 --- a/src/entities/additional-service/ui/link-payment/filter/link-payment-shipping-history-filter.tsx +++ b/src/entities/additional-service/ui/link-payment/filter/link-payment-shipping-history-filter.tsx @@ -13,7 +13,7 @@ import { import { FilterSelect } from '@/shared/ui/filter/select'; import { FilterSelectInput } from '@/shared/ui/filter/select-input'; import { FilterDateOptions } from '@/entities/common/model/types'; -import { FilterCalendar } from '@/shared/ui/filter/filter-calendar'; +import { FilterCalendar } from '@/shared/ui/filter/calendar'; import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; export const LinkPaymentShippingHistoryFilter = ({ diff --git a/src/entities/transaction/ui/filter/billing-filter.tsx b/src/entities/transaction/ui/filter/billing-filter.tsx index 38f004a..3bc74ef 100644 --- a/src/entities/transaction/ui/filter/billing-filter.tsx +++ b/src/entities/transaction/ui/filter/billing-filter.tsx @@ -74,6 +74,8 @@ export const BillingFilter = ({ setRequestStatus(filterRequestStatus); setProcessResult(filterProcessResult); setPaymentMethod(filterPaymentMethod); + setMinAmount(filterMinAmount); + setMaxAmount(filterMaxAmount); onClickToClose(); }; let MidOptions = [ @@ -141,16 +143,16 @@ export const BillingFilter = ({ { const { navigate } = useNavigate(); + + const [sortBy, setSortBy] = useState(SortByKeys.New); + const [filterOn, setFilterOn] = useState(false); + const [mid, setMid] = useState('nictest001m'); + const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD')); + const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD')); + const [transactionStatus, setTransactionStatus] = useState(KeyInPaymentTransactionStatus.ALL) + const [minAmount, setMinAmount] = useState(); + const [maxAmount, setMaxAmount] = useState(); + + useSetHeaderTitle('KEY-IN 결제'); useSetHeaderType(HeaderType.LeftArrow); useSetFooterMode(false); + + const onClickToOpenFilter = () => { + setFilterOn(!filterOn); + }; + const onClickToNavigation = () => { navigate(PATHS.additionalService.keyInPayment.request) } @@ -41,6 +60,7 @@ export const KeyInPaymentPage = () => { 검색옵션 onClickToOpenFilter()} /> @@ -148,6 +168,22 @@ export const KeyInPaymentPage = () => { onClick={() => onClickToNavigation()} >결제 신청 + diff --git a/src/shared/ui/filter/range-amount.tsx b/src/shared/ui/filter/range-amount.tsx index ea1031a..6304a01 100644 --- a/src/shared/ui/filter/range-amount.tsx +++ b/src/shared/ui/filter/range-amount.tsx @@ -22,7 +22,7 @@ export const FilterRangeAmount = ({
) => setMinAmount(e.target.value) } @@ -31,7 +31,7 @@ export const FilterRangeAmount = ({ ~
) => setMaxAmount(e.target.value) } From 020731dba56326e9bcd8fb1960dfa695d27582ba Mon Sep 17 00:00:00 2001 From: HyeonJongKim Date: Mon, 15 Sep 2025 13:40:44 +0900 Subject: [PATCH 2/2] =?UTF-8?q?KeyIn=20=EA=B2=B0=EC=A0=9C=20Sort=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../additional-service/model/types.ts | 2 +- .../key-in-payment/key-in-payment-page.tsx | 75 +++++++++++++++---- 2 files changed, 62 insertions(+), 15 deletions(-) diff --git a/src/entities/additional-service/model/types.ts b/src/entities/additional-service/model/types.ts index a74141d..16cf00e 100644 --- a/src/entities/additional-service/model/types.ts +++ b/src/entities/additional-service/model/types.ts @@ -369,9 +369,9 @@ export interface KeyInPaymentFilterProps extends FilterProps { setMid: (mid: string) => void; setStartDate: (startDate: string) => void; setEndDate: (endDate: string) => void; + setTransactionStatus: (transactionStatus: KeyInPaymentTransactionStatus) => void; setMinAmount: (minAmount: string | number) => void; setMaxAmount: (maxAmount: string | number) => void; - setTransactionStatus: (transactionStatus: KeyInPaymentTransactionStatus) => void; } // 계좌성명 조회 필터 export interface AccountHolderSearchFilterProps extends FilterProps { diff --git a/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx b/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx index 0fef48b..602dad4 100644 --- a/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx +++ b/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx @@ -1,5 +1,5 @@ import moment from 'moment'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { IMAGE_ROOT } from '@/shared/constants/common'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { HeaderType } from '@/entities/common/model/types'; @@ -9,15 +9,28 @@ import { useSetFooterMode } from '@/widgets/sub-layout/use-sub-layout'; import { PATHS } from '@/shared/constants/paths'; +import { useExtensionKeyinDownloadExcelMutation } from '@/entities/additional-service/api/use-extension-keyin-download-excel-mutation'; import { KeyInPaymentFilter } from '@/entities/additional-service/ui/key-in-payment/key-in-payment-filter'; -import { KeyInPaymentTransactionStatus,SortByKeys } from '@/entities/additional-service/model/types'; +import { KeyInPaymentTransactionStatus, SortByKeys } from '@/entities/additional-service/model/types'; +import { SortOptionsBox } from '@/entities/additional-service/ui/link-payment/sort-options-box'; +import { useExtensionKeyinListMutation } from '@/entities/additional-service/api/use-extension-keyin-list-mutation'; +import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants'; + +const requestStatusBtnGroup = [ + { name: '전체', value: KeyInPaymentTransactionStatus.ALL }, + { name: '승인', value: KeyInPaymentTransactionStatus.APPROVE }, + { name: '전취소', value: KeyInPaymentTransactionStatus.BF_CANCEL }, + { name: '후취소', value: KeyInPaymentTransactionStatus.AF_CANCEL } +]; export const KeyInPaymentPage = () => { const { navigate } = useNavigate(); const [sortBy, setSortBy] = useState(SortByKeys.New); + const [listItems, setListItems] = useState({}); const [filterOn, setFilterOn] = useState(false); + const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); const [mid, setMid] = useState('nictest001m'); const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD')); const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD')); @@ -30,21 +43,50 @@ export const KeyInPaymentPage = () => { useSetHeaderType(HeaderType.LeftArrow); useSetFooterMode(false); + const { mutateAsync: keyinList } = useExtensionKeyinListMutation(); + const { mutateAsync: downloadExcel } = useExtensionKeyinDownloadExcelMutation(); const onClickToOpenFilter = () => { setFilterOn(!filterOn); }; + const onClickToDownloadExcel = () => { + // downloadExcel({ + // mid, + // fromDate: '', + // toDate: '', + // paymentStatus: '', + // minAmount: 0, + // maxAmount: 0 + // }).then((rs) => { + + // }); + }; + + const onClickToSort = (sort: SortByKeys) => { + setSortBy(sort); + // TODO : callList 구현 + }; + + const onClickToTransactionStatus = (val: KeyInPaymentTransactionStatus) => { + setTransactionStatus(val); + // TODO : callList 구현 + }; + const onClickToNavigation = () => { navigate(PATHS.additionalService.keyInPayment.request) } + useEffect(() => { + // TODO : callList(); + }, []); + return ( <>
-
+
{ 다운로드 onClickToDownloadExcel()} />
-
-
- - | - -
+
+
- 전체 - 승인 - 전취소 - 후취소 + { + requestStatusBtnGroup.map((value, index) => ( + onClickToTransactionStatus(value.value)} + >{value.name} + )) + }
-
+