From 601f92369cc291c8da823432f80c0abe21b518bd Mon Sep 17 00:00:00 2001 From: HyeonJongKim Date: Mon, 15 Sep 2025 10:33:27 +0900 Subject: [PATCH 1/5] =?UTF-8?q?=EB=A7=81=ED=81=AC=EA=B2=B0=EC=A0=9C[?= =?UTF-8?q?=EB=B0=9C=EC=86=A1=EB=82=B4=EC=97=AD,=EB=B0=9C=EC=86=A1?= =?UTF-8?q?=EB=8C=80=EA=B8=B0]=20=ED=95=84=ED=84=B0=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 | 78 ++++++- .../account-holder-search-filter.tsx | 129 ++++-------- .../link-payment-pending-send-filter.tsx | 174 ++++++++++++++++ .../link-payment-shipping-history-filter.tsx | 195 ++++++++++++++++++ .../ui/link-payment/link-payment-filter.tsx | 193 ----------------- .../link-payment-pending-send-wrap.tsx | 39 +++- ...=> link-payment-shipping-history-wrap.tsx} | 38 +++- .../ui/link-payment/link-payment-tab.tsx | 8 +- .../transaction/ui/filter/billing-filter.tsx | 4 +- .../account-holder-search-page.tsx | 4 +- .../additional-service-pages.tsx | 4 +- .../additional-service/intro/intro-page.tsx | 2 +- .../link-payment/link-payment-detail-page.tsx | 6 +- .../link-payment-pending-send-page.tsx | 1 - ...=> link-payment-shipping-history-page.tsx} | 8 +- src/shared/constants/paths.ts | 4 +- src/shared/constants/route-names.ts | 2 +- src/shared/ui/menu/index.tsx | 2 +- 18 files changed, 569 insertions(+), 322 deletions(-) create mode 100644 src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx create mode 100644 src/entities/additional-service/ui/link-payment/filter/link-payment-shipping-history-filter.tsx delete mode 100644 src/entities/additional-service/ui/link-payment/link-payment-filter.tsx rename src/entities/additional-service/ui/link-payment/{link-payment-dispatch-list-wrap.tsx => link-payment-shipping-history-wrap.tsx} (71%) rename src/pages/additional-service/link-payment/{link-payment-dispatch-list-page.tsx => link-payment-shipping-history-page.tsx} (79%) diff --git a/src/entities/additional-service/model/types.ts b/src/entities/additional-service/model/types.ts index ecbff8c..f722ecc 100644 --- a/src/entities/additional-service/model/types.ts +++ b/src/entities/additional-service/model/types.ts @@ -8,7 +8,7 @@ export interface FundTransferTabProps { activeTab: FundTransferTabKeys; }; export enum LinkPaymentTabKeys { - DispatchList = 'DispatchList', + ShippingHistory = 'ShippingHistory', PendingSend = 'PendingSend' }; export interface LinkPaymentTabProps { @@ -23,16 +23,41 @@ export enum SortByKeys { New = 'New', Amount = 'Amount', }; +export enum ProcessResult { + ALL = 'ALL', + SUCCESS = 'SUCCESS', + FAILURE = 'FAILURE' +}; export enum AccountHolderSearchType { ALL = 'ALL', ACCOUNT_HOLDER = 'ACCOUNT_HOLDER', ACCOUNT_NUMBER = 'ACCOUNT_NUMBER' }; -export enum AccountHolderSearchProcessResult { - ALL = 'ALL', - SUCCESS = 'SUCCESS', - FAILURE = 'FAILURE' +export enum LinkPaymentSearchType { + ALL = "ALL", + PHONE = "PHONE", + EMAIL = "EMAIL" }; +export enum LinkPaymentSendMethod { + ALL = "ALL", + SMS = "SMS", + EMAIL = "EMAIL", + KAKAO = "KAKAO" +}; +export enum LinkPaymentTransactionStatus { + ALL = "ALL", + ACTIVATE = "ACTIVATE", + DEPOSIT_REQUEST = "DEPOSIT_REQUEST", + TRANSACTION_COMPLETE = "TRANSACTION_COMPLETE", + TRANSACTION_FAIL = "TRANSACTION_FAIL", + INACTIVE = "INACTIVE" +} +export enum LinkPaymentSendingStatus { + ALL = "ALL", + SEND_REQUEST = "SEND_REQUEST", + SEND_CANCEL = "SEND_CANCEL" +} + export interface SortOptionsBoxProps { sortBy: SortByKeys; onClickToSort: (sortBy: SortByKeys) => void; @@ -328,7 +353,7 @@ export interface FilterProps { filterOn: boolean; setFilterOn: (filterOn: boolean) => void; }; - +// 계좌성명 조회 필터 export interface AccountHolderSearchFilterProps extends FilterProps { mid: string; searchType: AccountHolderSearchType; @@ -336,17 +361,52 @@ export interface AccountHolderSearchFilterProps extends FilterProps { startDate: string; endDate: string; bank: string; - processResult: AccountHolderSearchProcessResult; + processResult: ProcessResult; setMid: (mid: string) => void; setSearchType: (searchType: AccountHolderSearchType) => void; setSearchKeyword: (searchKeyWorld: string) => void; setStartDate: (startDate: string) => void; setEndDate: (endDate: string) => void; setBank: (bank: string) => void; - setProcessResult: (processResult: AccountHolderSearchProcessResult) => void; + setProcessResult: (processResult: ProcessResult) => void; } -export interface LinkPaymentFilterProps extends FilterProps { +// 링크결제 - 발송내역 탭 필터 +export interface LinkPaymentShippingHistoryFilterProps extends FilterProps { + mid: string; + searchType: LinkPaymentSearchType; + searchKeyword: string; + startDate: string; + endDate: string; + transactionStatus: LinkPaymentTransactionStatus; + processResult: ProcessResult; + sendMethod: LinkPaymentSendMethod; + setMid: (mid: string) => void; + setSearchType: (searchType: LinkPaymentSearchType) => void; + setSearchKeyword: (searchKeyWorld: string) => void; + setStartDate: (startDate: string) => void; + setEndDate: (endDate: string) => void; + setTransactionStatus: (transactionStatus: LinkPaymentTransactionStatus) => void; + setProcessResult: (processResult: ProcessResult) => void; + setSendMethod: (sendMethod: LinkPaymentSendMethod) => void; +} + +// 링크결제 - 발송대기 탭 필터 +export interface LinkPaymentPendingSendFilterProps extends FilterProps { + mid: string; + searchType: LinkPaymentSearchType; + searchKeyword: string; + startDate: string; + endDate: string; + sendMethod: LinkPaymentSendMethod; + sendingStatus: LinkPaymentSendingStatus; + setMid: (mid: string) => void; + setSearchType: (searchType: LinkPaymentSearchType) => void; + setSearchKeyword: (searchKeyWorld: string) => void; + setStartDate: (startDate: string) => void; + setEndDate: (endDate: string) => void; + setSendMethod: (sendMethod: LinkPaymentSendMethod) => void; + setSendingStatus: (sendingStatus: LinkPaymentSendingStatus) => void; }; export enum DetailInfoSectionKeys { 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 c2329fa..474484f 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 @@ -1,12 +1,15 @@ import moment from 'moment'; +import { useEffect } from 'react'; import { IMAGE_ROOT } from '@/shared/constants/common'; import { motion } from 'framer-motion'; import { ChangeEvent, useState } from 'react'; import { AccountHolderSearchType, AccountHolderSearchFilterProps, - AccountHolderSearchProcessResult + ProcessResult } from '../../model/types'; +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 { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; @@ -36,7 +39,7 @@ export const AccountHolderSearchFilter = ({ const [filterStartDate, setFilterStartDate] = useState(startDate); const [filterEndDate, setFilterEndDate] = useState(endDate); const [filterBank, setFilterBank] = useState(bank) - const [filterProcessResult, setFilterProcessResult] = useState(processResult); + const [filterProcessResult, setFilterProcessResult] = useState(processResult); const [dateReadOnly, setDateReadyOnly] = useState(true); const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState(FilterDateOptions.Input); @@ -50,38 +53,6 @@ export const AccountHolderSearchFilter = ({ const onClickToClose = () => { setFilterOn(false); }; - const setFilterDate = (dateOptions: FilterDateOptions) => { - if (dateOptions === FilterDateOptions.Today) { - setFilterStartDate(moment().format('YYYY-MM-DD')); - setFilterEndDate(moment().format('YYYY-MM-DD')); - setDateReadyOnly(true); - setFilterDateOptionsBtn(FilterDateOptions.Today); - } - else if (dateOptions === FilterDateOptions.Week) { - setFilterStartDate(moment().subtract(1, 'week').format('YYYY-MM-DD')); - setFilterEndDate(moment().format('YYYY-MM-DD')); - setDateReadyOnly(true); - setFilterDateOptionsBtn(FilterDateOptions.Week); - } - else if (dateOptions === FilterDateOptions.Month) { - setFilterStartDate(moment().subtract(1, 'month').format('YYYY-MM-DD')); - setFilterEndDate(moment().format('YYYY-MM-DD')); - setDateReadyOnly(true); - setFilterDateOptionsBtn(FilterDateOptions.Month); - } - else if (dateOptions === FilterDateOptions.Input) { - setDateReadyOnly(false); - setFilterDateOptionsBtn(FilterDateOptions.Input); - } - }; - const onClickToOpenCalendar = () => { - if (!dateReadOnly) { - setCalendarOpen(true); - } - else { - setCalendarOpen(false); - } - }; const setNewDate = (newDate: any) => { console.log(newDate) @@ -97,11 +68,27 @@ export const AccountHolderSearchFilter = ({ setProcessResult(filterProcessResult); }; - let processResultBtnGroup = [ - { name: '전체', value: AccountHolderSearchProcessResult.ALL }, - { name: '성공', value: AccountHolderSearchProcessResult.SUCCESS }, - { name: '실패', value: AccountHolderSearchProcessResult.FAILURE }, + let MidOptions = [ + { name: 'nictest001m', value: 'nictest001m' }, + { name: 'nictest002m', value: 'nictest002m' } ]; + + let bankOptions = [ + { name: '우리은행', value: '우리은행'}, + { name: '토스뱅킹', value: '토스뱅킹'} + ] + + let searchTypeOption = [ + { name: '예금주', value: AccountHolderSearchType.ACCOUNT_HOLDER }, + { name: '계좌번호', value: AccountHolderSearchType.ACCOUNT_NUMBER }, + ] + + let processResultBtnGroup = [ + { name: '전체', value: ProcessResult.ALL }, + { name: '성공', value: ProcessResult.SUCCESS }, + { name: '실패', value: ProcessResult.FAILURE }, + ]; + return ( <>
-
-
가맹점
-
- -
-
+ -
-
예금주/계좌번호
-
- - ) => setFilterSearchKeyword(e.target.value)} - /> -
-
+ -
-
은행
-
- -
-
+ { + + + const [filterMid, setFilterMid] = useState(mid); + const [filterSearchType, setFilterSearchType] = useState(searchType); + const [filterSearchKeyword, setFilterSearchKeyword] = useState(searchKeyword); + const [filterStartDate, setFilterStartDate] = useState(startDate); + const [filterEndDate, setFilterEndDate] = useState(endDate); + const [filterSendMethod, setFilterSendMethod] = useState(sendMethod) + const [filterSendingStatus, setFilterSendingStatus] = useState(sendingStatus); + const [dateReadOnly, setDateReadyOnly] = useState(true); + const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState(FilterDateOptions.Input); + + const [calendarOpen, setCalendarOpen] = useState(false); + + const variants = { + hidden: { x: '100%' }, + visible: { x: '0%' }, + }; + + const onClickToClose = () => { + setFilterOn(false); + }; + + const setNewDate = (newDate: any) => { + console.log(newDate) + }; + + const onClickToSetFilter = () => { + setMid(filterMid); + setSearchType(filterSearchType); + setSearchKeyword(filterSearchKeyword); + setStartDate(filterStartDate); + setEndDate(filterEndDate); + setSendMethod(filterSendMethod); + setSendingStatus(filterSendingStatus); + }; + + let MidOptions = [ + { name: 'nictest001m', value: 'nictest001m' }, + { name: 'nictest002m', value: 'nictest002m' } + ]; + + let searchTypeOption = [ + { name: '휴대폰번호', value: LinkPaymentSearchType.PHONE }, + { name: '이메일', value: LinkPaymentSearchType.EMAIL }, + ] + + let sendMethodOption = [ + { name: '전체', value: LinkPaymentSendMethod.ALL }, + { name: 'SMS', value: LinkPaymentSendMethod.SMS }, + { name: '이메일', value: LinkPaymentSendMethod.EMAIL }, + { name: '카카오', value: LinkPaymentSendMethod.KAKAO }, + ] + + let sendingStatusOption = [ + { name: '전체', value: LinkPaymentSendingStatus.ALL }, + { name: '발송요청', value: LinkPaymentSendingStatus.SEND_REQUEST }, + { name: '발송취소', value: LinkPaymentSendingStatus.SEND_CANCEL }, + ] + + return ( + <> + +
+
+
필터
+
+ +
+
+ +
+ + + + + + + + +
+
+ +
+
+ + + ) +} \ No newline at end of file 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 new file mode 100644 index 0000000..086f6b2 --- /dev/null +++ b/src/entities/additional-service/ui/link-payment/filter/link-payment-shipping-history-filter.tsx @@ -0,0 +1,195 @@ +import moment from 'moment'; +import { useEffect } from 'react'; +import { IMAGE_ROOT } from '@/shared/constants/common'; +import { motion } from 'framer-motion'; +import { ChangeEvent, useState } from 'react'; +import { + LinkPaymentSearchType, + LinkPaymentSendMethod, + LinkPaymentShippingHistoryFilterProps, + LinkPaymentTransactionStatus, + ProcessResult +} from "../../../model/types"; +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 { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; + +export const LinkPaymentShippingHistoryFilter = ({ + filterOn, + setFilterOn, + mid, + searchType, + searchKeyword, + startDate, + endDate, + transactionStatus, + processResult, + sendMethod, + setMid, + setSearchType, + setSearchKeyword, + setStartDate, + setEndDate, + setTransactionStatus, + setProcessResult, + setSendMethod +}: LinkPaymentShippingHistoryFilterProps) => { + + + const [filterMid, setFilterMid] = useState(mid); + const [filterSearchType, setFilterSearchType] = useState(searchType); + const [filterSearchKeyword, setFilterSearchKeyword] = useState(searchKeyword); + const [filterStartDate, setFilterStartDate] = useState(startDate); + const [filterEndDate, setFilterEndDate] = useState(endDate); + const [filterTransactionStatus, setFilterTransactionStatus] = useState(transactionStatus) + const [filterProcessResult, setFilterProcessResult] = useState(processResult); + const [filterSendMethod, setFilterSendMethod] = useState(sendMethod); + const [dateReadOnly, setDateReadyOnly] = useState(true); + const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState(FilterDateOptions.Input); + + const [calendarOpen, setCalendarOpen] = useState(false); + + const variants = { + hidden: { x: '100%' }, + visible: { x: '0%' }, + }; + + const onClickToClose = () => { + setFilterOn(false); + }; + + const setNewDate = (newDate: any) => { + console.log(newDate) + }; + + const onClickToSetFilter = () => { + setMid(filterMid); + setSearchType(filterSearchType); + setSearchKeyword(filterSearchKeyword); + setStartDate(filterStartDate); + setEndDate(filterEndDate); + setTransactionStatus(filterTransactionStatus); + setProcessResult(filterProcessResult); + setSendMethod(filterSendMethod); + }; + + let MidOptions = [ + { name: 'nictest001m', value: 'nictest001m' }, + { name: 'nictest002m', value: 'nictest002m' } + ]; + + let searchTypeOption = [ + { name: '휴대폰번호', value: LinkPaymentSearchType.PHONE }, + { name: '이메일', value: LinkPaymentSearchType.EMAIL }, + ] + + let transactionStatusOption = [ + { name: '전체', value: LinkPaymentTransactionStatus.ALL }, + { name: '미완료/활성화', value: LinkPaymentTransactionStatus.ACTIVATE }, + { name: '입금요청', value: LinkPaymentTransactionStatus.DEPOSIT_REQUEST }, + { name: '결제완료', value: LinkPaymentTransactionStatus.TRANSACTION_COMPLETE }, + { name: '결제실패', value: LinkPaymentTransactionStatus.TRANSACTION_FAIL }, + { name: '결제중단/비활성화', value: LinkPaymentTransactionStatus.INACTIVE }, + ] + + let processResultOption = [ + { name: '전체', value: ProcessResult.ALL }, + { name: '성공', value: ProcessResult.SUCCESS }, + { name: '실패', value: ProcessResult.FAILURE }, + ] + + let sendMethodOption = [ + { name: '전체', value: LinkPaymentSendMethod.ALL }, + { name: 'SMS', value: LinkPaymentSendMethod.SMS }, + { name: '이메일', value: LinkPaymentSendMethod.EMAIL }, + { name: '카카오', value: LinkPaymentSendMethod.KAKAO }, + ] + + return ( + <> + +
+
+
필터
+
+ +
+
+ +
+ + + + + + + + + + +
+
+ +
+
+ + + ) +} \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/link-payment-filter.tsx b/src/entities/additional-service/ui/link-payment/link-payment-filter.tsx deleted file mode 100644 index 344a982..0000000 --- a/src/entities/additional-service/ui/link-payment/link-payment-filter.tsx +++ /dev/null @@ -1,193 +0,0 @@ -import { motion } from 'framer-motion'; -import {IMAGE_ROOT} from "@/shared/constants/common"; -import {LinkPaymentFilterProps} from "@/entities/additional-service/model/types"; - -export const LinkPaymentFilter = ({ - filterOn, - setFilterOn -}: LinkPaymentFilterProps) => { - const variants = { - hidden:{ x: '100%'}, - visible: {x: '0%'} - }; - - const onClickToClose = () => { - setFilterOn(false); - }; - return ( - <> - -
-
-
필터
-
- -
-
- -
-
-
가맹점
-
- -
-
- -
-
휴대폰번호, 이메일
-
- - -
-
- -
-
결제수단
-
- -
-
- -
-
조회기간
-
-
- 당일 - 일주일 - 1개월 - 직접입력 -
- -
-
- - -
- ~ -
- - -
-
-
-
- -
-
거래 구분
-
-
- 전체 - 미완료/
활성화 - 입금요청 - 결제완료 - -
-
-
-
- 결제실패 - 결제중단/
비활성화 - - -
-
-
- -
-
전송결과
-
-
- 전체 - 성공 - 실패 -
-
-
- -
-
발송수단
-
-
- 전체 - SMS - 이메일 - 카카오 -
-
-
- -
- -
- -
-
- - - ) -} \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx b/src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx index f069648..e1a5fa2 100644 --- a/src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx +++ b/src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx @@ -1,22 +1,33 @@ +import moment from 'moment'; import { IMAGE_ROOT } from "@/shared/constants/common"; import { useState, useEffect } from "react"; -import { LinkPaymentFilter } from "./link-payment-filter"; +import { LinkPaymentPendingSendFilter } from "./filter/link-payment-pending-send-filter"; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { PATHS } from "@/shared/constants/paths"; import { LinkPaymentPendingList } from "./link-payment-pending-list"; +import { LinkPaymentSearchType, LinkPaymentSendingStatus, LinkPaymentSendMethod } from "../../model/types"; export const LinkPaymentPendingSendWrap = () => { const { navigate } = useNavigate(); + const [filterOn, setFilterOn] = useState(false); + const [mid, setMid] = useState('nictest001m'); + const [searchType, setSearchType] = useState(LinkPaymentSearchType.ALL) + const [searchKeyword, setSearchKeyword] = useState(''); + const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD')); + const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD')); + const [sendMethod, setSendMethod] = useState(LinkPaymentSendMethod.ALL); + const [sendingStatus, setSendingStatus] = useState(LinkPaymentSendingStatus.ALL); + const [listItems, setListItems] = useState({}); - + const onClickToOpenFilter = () => { setFilterOn(!filterOn); }; const onClickToNavigate = () => { navigate(PATHS.additionalService.linkPayment.request) } - + const callList = () => { setListItems({ '20250608': [ @@ -28,7 +39,7 @@ export const LinkPaymentPendingSendWrap = () => { amount: 5254000 }, { - transactionId: 'pending2', + transactionId: 'pending2', customerName: '김*환(7000)', status: '발송요청', channel: 'SMS', @@ -111,7 +122,7 @@ export const LinkPaymentPendingSendWrap = () => {
-
@@ -120,10 +131,24 @@ export const LinkPaymentPendingSendWrap = () => { onClick={() => onClickToNavigate()} >결제 신청
- + mid={mid} + searchType={searchType} + searchKeyword={searchKeyword} + startDate={startDate} + endDate={endDate} + sendMethod={sendMethod} + sendingStatus={sendingStatus} + setMid={setMid} + setSearchType={setSearchType} + setSearchKeyword={setSearchKeyword} + setStartDate={setStartDate} + setEndDate={setEndDate} + setSendMethod={setSendMethod} + setSendingStatus={setSendingStatus} + > ) } \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/link-payment-dispatch-list-wrap.tsx b/src/entities/additional-service/ui/link-payment/link-payment-shipping-history-wrap.tsx similarity index 71% rename from src/entities/additional-service/ui/link-payment/link-payment-dispatch-list-wrap.tsx rename to src/entities/additional-service/ui/link-payment/link-payment-shipping-history-wrap.tsx index ae5c15d..eb483dd 100644 --- a/src/entities/additional-service/ui/link-payment/link-payment-dispatch-list-wrap.tsx +++ b/src/entities/additional-service/ui/link-payment/link-payment-shipping-history-wrap.tsx @@ -1,18 +1,28 @@ +import moment from 'moment'; import { IMAGE_ROOT } from "@/shared/constants/common"; import { useState, useEffect } from "react"; -import { LinkPaymentFilter } from "./link-payment-filter"; +import { LinkPaymentShippingHistoryFilter } from "./filter/link-payment-shipping-history-filter"; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { PATHS } from "@/shared/constants/paths"; import { LinkPaymentList } from "./link-payment-list"; import { SortOptionsBox } from "./sort-options-box"; -import { SortByKeys } from "../../model/types"; +import { LinkPaymentSendMethod, LinkPaymentTransactionStatus, ProcessResult, SortByKeys } from "../../model/types"; +import { LinkPaymentSearchType, } from "../../model/types"; -export const LinkPaymentDispatchListWrap = () => { +export const LinkPaymentShippingHistoryWrap = () => { const { navigate } = useNavigate(); const [filterOn, setFilterOn] = useState(false); const [sortBy, setSortBy] = useState(SortByKeys.New); const [listItems, setListItems] = useState({}); + const [mid, setMid] = useState('nictest001m'); + const [searchType, setSearchType] = useState(LinkPaymentSearchType.ALL) + const [searchKeyword, setSearchKeyword] = useState(''); + const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD')); + const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD')); + const [transactionStatus, setTransactionStatus] = useState(LinkPaymentTransactionStatus.ALL) + const [processResult, setProcessResult] = useState(ProcessResult.ALL) + const [sendMethod, setSendMethod] = useState(LinkPaymentSendMethod.ALL) const onClickToOpenFilter = () => { setFilterOn(!filterOn); @@ -25,7 +35,7 @@ export const LinkPaymentDispatchListWrap = () => { callList({ sortBy: sort }); }; - const callList = (option?: {sortBy?: string, val?: string}) => { + const callList = (option?: { sortBy?: string, val?: string }) => { setListItems({ '20250608': [ { @@ -134,10 +144,26 @@ export const LinkPaymentDispatchListWrap = () => { onClick={() => onClickToNavigate()} >결제 신청 - + mid={mid} + searchType={searchType} + searchKeyword={searchKeyword} + startDate={startDate} + endDate={endDate} + transactionStatus={transactionStatus} + processResult={processResult} + sendMethod={sendMethod} + setMid={setMid} + setSearchType={setSearchType} + setSearchKeyword={setSearchKeyword} + setStartDate={setStartDate} + setEndDate={setEndDate} + setTransactionStatus={setTransactionStatus} + setProcessResult={setProcessResult} + setSendMethod={setSendMethod} + > ) } \ No newline at end of file diff --git a/src/entities/additional-service/ui/link-payment/link-payment-tab.tsx b/src/entities/additional-service/ui/link-payment/link-payment-tab.tsx index 1b38cff..75a9bfc 100644 --- a/src/entities/additional-service/ui/link-payment/link-payment-tab.tsx +++ b/src/entities/additional-service/ui/link-payment/link-payment-tab.tsx @@ -12,8 +12,8 @@ export const LinkPaymentTab = ({ const onClickToNavigation = (tab: LinkPaymentTabKeys) => { if(activeTab !== tab){ - if(tab === LinkPaymentTabKeys.DispatchList){ - navigate(PATHS.additionalService.linkPayment.dispatchList); + if(tab === LinkPaymentTabKeys.ShippingHistory){ + navigate(PATHS.additionalService.linkPayment.shippingHistory); } else if(tab === LinkPaymentTabKeys.PendingSend){ navigate(PATHS.additionalService.linkPayment.pendingSend); @@ -25,8 +25,8 @@ export const LinkPaymentTab = ({ <>
+
+ + +
+ + + + + + + +
+
+ +
+ + + + ); +}; \ 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 4/5] =?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} + )) + }
-
+
From b743ed3a13d4c156492d49b7f1029ac627d97190 Mon Sep 17 00:00:00 2001 From: "focp212@naver.com" Date: Mon, 15 Sep 2025 13:55:16 +0900 Subject: [PATCH 5/5] =?UTF-8?q?=EC=97=90=EC=8A=A4=ED=81=AC=EB=A1=9C=20?= =?UTF-8?q?=ED=95=84=ED=84=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../additional-service/model/contant.ts | 12 + src/entities/transaction/model/types.ts | 47 ++- .../transaction/ui/filter/billing-filter.tsx | 1 - .../transaction/ui/filter/escrow-filter.tsx | 271 +++++++++--------- src/pages/transaction/escrow/list-page.tsx | 58 ++-- 5 files changed, 225 insertions(+), 164 deletions(-) create mode 100644 src/entities/additional-service/model/contant.ts diff --git a/src/entities/additional-service/model/contant.ts b/src/entities/additional-service/model/contant.ts new file mode 100644 index 0000000..9aab8d6 --- /dev/null +++ b/src/entities/additional-service/model/contant.ts @@ -0,0 +1,12 @@ +import { EscrowDeliveryStatus } from '@/entities/transaction/model/types'; + +export const deliveryStatusBtnGroup = [ + {name: '전체', value: EscrowDeliveryStatus.ALL}, + {name: '결제완료', value: EscrowDeliveryStatus.PAY_COMPLETE}, + {name: '배송등록', value: EscrowDeliveryStatus.DELIVERY_INSERT}, + {name: '배송완료', value: EscrowDeliveryStatus.DELIVERY_COMPLETE}, + {name: '구매확인', value: EscrowDeliveryStatus.PURCHASE_CONFIRM}, + {name: '구매거절', value: EscrowDeliveryStatus.PURCHASE_REJECT}, + {name: '환불처리', value: EscrowDeliveryStatus.RETURN_PROCESSING}, + {name: '지급완료', value: EscrowDeliveryStatus.DEPOSIT_COMPLETE}, +]; \ No newline at end of file diff --git a/src/entities/transaction/model/types.ts b/src/entities/transaction/model/types.ts index e0de5b0..cf2a6e9 100644 --- a/src/entities/transaction/model/types.ts +++ b/src/entities/transaction/model/types.ts @@ -38,7 +38,27 @@ export enum CashReceiptPurpose { INCOME_DEDUCTION = 'INCOME_DEDUCTION', EXPENSE_PROOF = 'EXPENSE_PROOF', }; - +export enum EscrowSearchType { + ALL = 'ALL', + ORDER_NUMBER = 'ORDER_NUMBER', + TID = 'TID' +}; +export enum EscrowDeliveryStatus { + ALL = 'ALL', + PAY_COMPLETE = 'PAY_COMPLETE', + DELIVERY_INSERT = 'DELIVERY_INSERT', + DELIVERY_COMPLETE = 'DELIVERY_COMPLETE', + PURCHASE_CONFIRM = 'PURCHASE_CONFIRM', + PURCHASE_REJECT = 'PURCHASE_REJECT', + RETURN_PROCESSING = 'RETURN_PROCESSING', + DEPOSIT_COMPLETE = 'DEPOSIT_COMPLETE' +}; +export enum EscrowSettlementStatus { + ALL = 'ALL', + CREDIT_CARD = 'CREDIT_CARD', + REAL_ACCOUNT = 'REAL_ACCOUNT', + ACCOUNT_TRANSFER = 'ACCOUNT_TRANSFER' +}; export enum BillingSearchType { ALL = 'ALL', ORDER_NUMBER = 'ORDER_NUMBER', @@ -200,8 +220,8 @@ export interface EscrowListParams { endDate?: string; deliveryStatus?: string; settlementStatus?: string; - minAmount?: number; - maxAmount?: number; + minAmount?: number | string; + maxAmount?: number | string; pagination?: DefaultRequestPagination; }; @@ -214,6 +234,8 @@ export interface BillingListParams { requestStatus?: string; processResult?: string; paymentMethod?: string; + minAmount?: number | string; + maxAmount?: number | string; pagination?: DefaultRequestPagination }; @@ -452,7 +474,24 @@ export interface CashReceiptFilterProps extends FilterProps { }; export interface EscrowFilterProps extends FilterProps { - + mid: string; + searchType: EscrowSearchType; + searchKeyword: string; + startDate: string + endDate: string; + deliveryStatus: EscrowDeliveryStatus; + settlementStatus: EscrowSettlementStatus; + minAmount: number; + maxAmount: number; + setMid: (mid: string) => void; + setSearchType: (searchType: EscrowSearchType) => void; + setSearchKeyword: (searchKeyword: string) => void; + setStartDate: (startDate: string) => void; + setEndDate: (endDate: string) => void; + setDeliveryStatus: (deliveryStatus: EscrowDeliveryStatus) => void; + setSettlementStatus: (settlementStatus: EscrowSettlementStatus) => void; + setMinAmount: (minAmount: string | number) => void; + setMaxAmount: (maxAmount: string | number) => void; }; export interface BillingFilterProps extends FilterProps { mid: string; diff --git a/src/entities/transaction/ui/filter/billing-filter.tsx b/src/entities/transaction/ui/filter/billing-filter.tsx index 38f004a..6f4a3d0 100644 --- a/src/entities/transaction/ui/filter/billing-filter.tsx +++ b/src/entities/transaction/ui/filter/billing-filter.tsx @@ -1,4 +1,3 @@ -import moment from 'moment'; import { useEffect } from 'react'; import { useState } from 'react'; import { motion } from 'framer-motion'; diff --git a/src/entities/transaction/ui/filter/escrow-filter.tsx b/src/entities/transaction/ui/filter/escrow-filter.tsx index d4c9df5..85505de 100644 --- a/src/entities/transaction/ui/filter/escrow-filter.tsx +++ b/src/entities/transaction/ui/filter/escrow-filter.tsx @@ -1,12 +1,52 @@ +import { useEffect } from 'react'; +import { useState } from 'react'; import { motion } from 'framer-motion'; import { IMAGE_ROOT } from '@/shared/constants/common'; -import { FilterProps } from '../../model/types'; +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 { + EscrowFilterProps, + EscrowSearchType, + EscrowDeliveryStatus, + EscrowSettlementStatus +} from '../../model/types'; export const EscrowFilter = ({ filterOn, - setFilterOn -}: FilterProps) => { + setFilterOn, + mid, + searchType, + searchKeyword, + startDate, + endDate, + deliveryStatus, + settlementStatus, + minAmount, + maxAmount, + setMid, + setSearchType, + setSearchKeyword, + setStartDate, + setEndDate, + setDeliveryStatus, + setSettlementStatus, + setMinAmount, + setMaxAmount +}: EscrowFilterProps) => { + const [filterMid, setFilterMid] = useState(mid); + const [filterSearchType, setFilterSearchType] = useState(searchType); + const [filterSearchKeyword, setFilterSearchKeyword] = useState(searchKeyword); + const [filterStartDate, setFilterStartDate] = useState(startDate); + const [filterEndDate, setFilterEndDate] = useState(endDate); + const [filterDeliveryStatus, setFilterDeliveryStatus] = useState(deliveryStatus); + const [filterSettlementStatus, setFilterSettlementStatus] = useState(settlementStatus); + const [filterMinAmount, setFilterMinAmount] = useState(minAmount || ''); + const [filterMaxAmount, setFilterMaxAmount] = useState(maxAmount || ''); + const variants = { hidden: { x: '100%' }, visible: { x: '0%' }, @@ -15,6 +55,52 @@ export const EscrowFilter = ({ const onClickToClose = () => { setFilterOn(false); }; + + const setNewDate = (newDate: any) => { + console.log(newDate) + }; + + const onClickToSetFilter = () => { + setMid(filterMid); + setSearchType(filterSearchType); + setSearchKeyword(filterSearchKeyword); + setStartDate(filterStartDate); + setEndDate(filterEndDate); + setDeliveryStatus(filterDeliveryStatus); + setSettlementStatus(filterSettlementStatus); + setMinAmount(filterMinAmount); + setMaxAmount(filterMaxAmount); + onClickToClose(); + }; + let MidOptions = [ + {name: 'nictest001m', value: 'nictest001m'} + ]; + let SearchTypeOptions = [ + {name: '주문번호', value: EscrowSearchType.ORDER_NUMBER }, + {name: 'TID', value: EscrowSearchType.TID } + ]; + + let deliveryStatusBtnGroup = [ + {name: '전체', value: EscrowDeliveryStatus.ALL}, + {name: '결제완료', value: EscrowDeliveryStatus.PAY_COMPLETE}, + {name: '배송등록', value: EscrowDeliveryStatus.DELIVERY_INSERT}, + {name: '배송완료', value: EscrowDeliveryStatus.DELIVERY_COMPLETE}, + {name: '구매확인', value: EscrowDeliveryStatus.PURCHASE_CONFIRM}, + {name: '구매거절', value: EscrowDeliveryStatus.PURCHASE_REJECT}, + {name: '환불처리', value: EscrowDeliveryStatus.RETURN_PROCESSING}, + {name: '지급완료', value: EscrowDeliveryStatus.DEPOSIT_COMPLETE}, + ]; + let settlementStatusBtnGroup = [ + {name: '전체', value: EscrowSettlementStatus.ALL}, + {name: '신용카드', value: EscrowSettlementStatus.CREDIT_CARD}, + {name: '가상계좌', value: EscrowSettlementStatus.REAL_ACCOUNT}, + {name: '계좌이체', value: EscrowSettlementStatus.ACCOUNT_TRANSFER}, + ]; + + useEffect(() => { + setFilterDeliveryStatus(deliveryStatus); + }, [deliveryStatus]); + return ( <>
-
-
-
가맹점
-
- -
-
- -
-
주문번호/ID
-
- - -
-
- -
-
조회기간
-
-
- 당일 - 일주일 - 1개월 - 직접입력 -
-
-
- - -
- ~ -
- - -
-
-
-
- -
-
요청상태
-
-
- 전체 - 진행중 - 성공 - 요청취소 -
-
-
- -
-
저리결과
-
-
- 전체 - 성공 - 실패 - -
-
-
- -
-
결제수단
-
- -
-
- -
-
거래금액
-
-
- -
- ~ -
- -
-
-
+
+ + + + + + + + +
- +
diff --git a/src/pages/transaction/escrow/list-page.tsx b/src/pages/transaction/escrow/list-page.tsx index 2d193dd..8e9ea21 100644 --- a/src/pages/transaction/escrow/list-page.tsx +++ b/src/pages/transaction/escrow/list-page.tsx @@ -5,11 +5,12 @@ import { IMAGE_ROOT } from '@/shared/constants/common'; import { PATHS } from '@/shared/constants/paths'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { EscrowList } from '@/entities/transaction/ui/escrow-list'; -import { EscrowListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types'; +import { EscrowListItem, TransactionCategory, SortByKeys, EscrowDeliveryStatus, EscrowSearchType, EscrowSettlementStatus } from '@/entities/transaction/model/types'; import { useEscrowListMutation } from '@/entities/transaction/api/use-escrow-list-mutation'; import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation'; import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants'; import { Filter } from '@/entities/transaction/ui/filter'; +import { deliveryStatusBtnGroup } from '@/entities/additional-service/model/contant'; import { SortOptionsBox } from '@/entities/transaction/ui/sort-options-box'; import { HeaderType } from '@/entities/common/model/types'; import { @@ -19,23 +20,24 @@ import { useSetFooterMode } from '@/widgets/sub-layout/use-sub-layout'; -const serviceCodes = [ - {name: '전체', key: 'all'}, - {name: '결제완료', key: 'paid'}, - {name: '배송등록', key: 'register'}, -]; - export const EscrowListPage = () => { const { navigate } = useNavigate(); const userInfo = useStore((state) => state.UserStore.UserInfo); - const [selectedServiceCode, setSelectedServiceCode] = useState('all'); const [sortBy, setSortBy] = useState(SortByKeys.New); const [listItems, setListItems] = useState({}); const [filterOn, setFilterOn] = useState(false); const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); - const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD')); + const [mid, setMid] = useState('nictest001m'); + const [searchType, setSearchType] = useState(EscrowSearchType.ALL); + const [searchKeyword, setSearchKeyword] = useState(''); + //const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD')); + const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD')); const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD')); + const [deliveryStatus, setDeliveryStatus] = useState(EscrowDeliveryStatus.ALL); + const [settlementStatus, setSettlementStatus] = useState(EscrowSettlementStatus.ALL); + const [minAmount, setMinAmount] = useState(); + const [maxAmount, setMaxAmount] = useState(); useSetHeaderTitle('에스크로'); useSetHeaderType(HeaderType.LeftArrow); @@ -51,24 +53,30 @@ export const EscrowListPage = () => { sortBy?: string, val?: string }) => { - // pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy; + pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy; setPageParam(pageParam); + let newMinAmount = minAmount; + if(!!minAmount && typeof(minAmount) === 'string'){ + newMinAmount = parseInt(minAmount); + } + let newMaxAmount = maxAmount; + if(!!maxAmount && typeof(maxAmount) === 'string'){ + newMaxAmount = parseInt(maxAmount); + } let listParams = { - mid: 'nictest001m', - searchType: 'ORDER_NUMBER', - searchKeyword: '', + mid: mid, + searchType: searchType, + searchKeyword: searchKeyword, startDate: startDate, endDate: endDate, - deliveryStatus: 'ALL', - settlementStatus: 'ALL', - minAmount: 0, - maxAmount: 999999999, + deliveryStatus: deliveryStatus, + settlementStatus: settlementStatus, + minAmount: newMinAmount, + maxAmount: newMaxAmount, pagination: pageParam }; - console.log(listParams) - - escrowList(listParams).then((rs) => { + escrowList(listParams).then((rs) => { setListItems(assembleData(rs.content)); }); }; @@ -105,8 +113,8 @@ export const EscrowListPage = () => { callList({sortBy: sort}); }; - const onClickToServiceCode = (val: string) => { - setSelectedServiceCode(val); + const onClickToDeliveryStatus = (val: EscrowDeliveryStatus) => { + setDeliveryStatus(val); callList({val: val}); }; @@ -154,11 +162,11 @@ export const EscrowListPage = () => {
{ - serviceCodes.map((value, index) => ( + deliveryStatusBtnGroup.map((value, index) => ( onClickToServiceCode(value.key) } + className={ `keyword-tag ${(deliveryStatus === value.value)? 'active': ''}` } + onClick={ () => onClickToDeliveryStatus(value.value) } >{ value.name } )) }