diff --git a/src/entities/additional-service/model/fund-account/constant.ts b/src/entities/additional-service/model/fund-account/constant.ts index 0d7372f..a15c021 100644 --- a/src/entities/additional-service/model/fund-account/constant.ts +++ b/src/entities/additional-service/model/fund-account/constant.ts @@ -1,6 +1,7 @@ import { FundAccountReceiveAccountNameNo, FundAccountResultStatus, + FundAccountSearchCl, FundAccountSearchDateType, FundAccountStatus } from './types'; @@ -39,9 +40,9 @@ export const FundAccountResultSearchDateTypeBtnGroup = [ { name: '이체일자', value: FundAccountSearchDateType.APPLICATION_DATE } ]; -export const FundAccountReceiveAccountNameNoOptionsGroup = [ - { name: '수취인', value: FundAccountReceiveAccountNameNo.ReceiveAccountName }, - { name: '계좌번호', value: FundAccountReceiveAccountNameNo.ReceiveAccountNo }, +export const FundAccountSearchClOptionsGroup = [ + { name: '수취인', value: FundAccountSearchCl.ACCOUNT_NAME }, + { name: '계좌번호', value: FundAccountSearchCl.ACCOUNT_NO }, ]; export const FundAccountReceiveBankCodeOptionsGroup = [ diff --git a/src/entities/additional-service/model/fund-account/types.ts b/src/entities/additional-service/model/fund-account/types.ts index 83c70bb..463bc4f 100644 --- a/src/entities/additional-service/model/fund-account/types.ts +++ b/src/entities/additional-service/model/fund-account/types.ts @@ -11,8 +11,6 @@ export enum FundAccountSearchDateType { APPLICATION_DATE = 'APPLICATION_DATE' }; - - export interface FundAccountTabProps { activeTab: FundAccountTabKeys; }; diff --git a/src/entities/additional-service/model/key-in/constant.ts b/src/entities/additional-service/model/key-in/constant.ts new file mode 100644 index 0000000..7cb52b2 --- /dev/null +++ b/src/entities/additional-service/model/key-in/constant.ts @@ -0,0 +1,9 @@ +import { KeyInPaymentPaymentStatus } from "./types"; + +// contant로 옮기기 +export const requestStatusBtnGroup = [ + { name: '전체', value: KeyInPaymentPaymentStatus.ALL }, + { name: '승인', value: KeyInPaymentPaymentStatus.APPROVAL }, + { name: '전취소', value: KeyInPaymentPaymentStatus.PRE_CANCEL }, + { name: '후취소', value: KeyInPaymentPaymentStatus.POST_CANCEL } +]; \ No newline at end of file diff --git a/src/entities/additional-service/model/key-in/types.ts b/src/entities/additional-service/model/key-in/types.ts index d255d77..0b05482 100644 --- a/src/entities/additional-service/model/key-in/types.ts +++ b/src/entities/additional-service/model/key-in/types.ts @@ -4,7 +4,7 @@ import { AdditionalServiceCategory, ExtensionRequestParams, FilterProps, ListIte // ======================================== // 키인결제 관련 타입들 // ======================================== -export enum KeyInPaymentTransactionStatus { +export enum KeyInPaymentPaymentStatus { ALL = 'ALL', APPROVAL = 'APPROVAL', PRE_CANCEL = 'PRE_CANCEL', @@ -20,21 +20,22 @@ export interface KeyInPaymentListItem { export interface KeyInPaymentListProps { additionalServiceCategory: AdditionalServiceCategory; - listItems: Record>; + listItems: Array; mid?: string; + setTarget: (element: HTMLElement | null) => void; } export interface KeyInPaymentFilterProps extends FilterProps { mid: string, startDate: string; endDate: string; - transactionStatus: KeyInPaymentTransactionStatus; + transactionStatus: KeyInPaymentPaymentStatus; minAmount?: number; maxAmount?: number; setMid: (mid: string) => void; setStartDate: (startDate: string) => void; setEndDate: (endDate: string) => void; - setTransactionStatus: (transactionStatus: KeyInPaymentTransactionStatus) => void; + setTransactionStatus: (transactionStatus: KeyInPaymentPaymentStatus) => void; setMinAmount: (minAmount?: number) => void; setMaxAmount: (maxAmount?: number) => void; } diff --git a/src/entities/additional-service/model/link-pay/types.ts b/src/entities/additional-service/model/link-pay/types.ts index a30e12e..785306c 100644 --- a/src/entities/additional-service/model/link-pay/types.ts +++ b/src/entities/additional-service/model/link-pay/types.ts @@ -14,12 +14,25 @@ export interface LinkPaymentTabProps { activeTab: LinkPaymentTabKeys; } -export enum LinkPaymentSearchType { - ALL = "ALL", - PHONE = "PHONE", +export enum LinkPaymentSearchCl { + ALL = "", + PHONE = "PHONE_NUMBER", EMAIL = "EMAIL" } +export enum LinkPaymentPaymentMethod { + ALL = "ALL", + CARD = "CARD", + BANK = "BANK", + VIRTURE_BANK = "VIRTURE_BANK", + PHONE = "PHONE", + CULTURELAND = "CULTURELAND", + SSG_MONEY = "SSG_MONEY", + SSG_BANK = "SSG_BANK", + CMS_BANK = "CMS_BANK", + TMONEY_PAY = "TMONEY_PAY" +} + export enum LinkPaymentSendMethod { ALL = "ALL", SMS = "SMS", @@ -27,19 +40,19 @@ export enum LinkPaymentSendMethod { KAKAO = "KAKAO" } -export enum LinkPaymentTransactionStatus { +export enum LinkPaymentPaymentStatus { ALL = "ALL", ACTIVATE = "ACTIVATE", DEPOSIT_REQUEST = "DEPOSIT_REQUEST", - TRANSACTION_COMPLETE = "TRANSACTION_COMPLETE", - TRANSACTION_FAIL = "TRANSACTION_FAIL", + PAYMENT_COMPLETE = "PAYMENT_COMPLETE", + PAYMENT_FAIL = "PAYMENT_FAIL", INACTIVE = "INACTIVE" } -export enum LinkPaymentSendingStatus { +export enum LinkPaymentSendStatus { ALL = "ALL", - SEND_REQUEST = "SEND_REQUEST", - SEND_CANCEL = "SEND_CANCEL" + SUCCESS = "SUCCESS", + FAIL = "FAIL" } export enum LinkContentType { @@ -79,39 +92,39 @@ export interface LinkPaymentWaitListProps { export interface LinkPaymentHistoryFilterProps extends FilterProps { mid: string; - searchType: LinkPaymentSearchType; - searchKeyword: string; - startDate: string; - endDate: string; - transactionStatus: LinkPaymentTransactionStatus; + searchCl: LinkPaymentSearchCl; + searchValue: string; + fromDate: string; + toDate: string; + paymentStatus: LinkPaymentPaymentStatus; processResult: ProcessResult; sendMethod: LinkPaymentSendMethod; setMid: (mid: string) => void; - setSearchType: (searchType: LinkPaymentSearchType) => void; + setSearchType: (searchType: LinkPaymentSearchCl) => void; setSearchKeyword: (searchKeyWorld: string) => void; setStartDate: (startDate: string) => void; setEndDate: (endDate: string) => void; - setTransactionStatus: (transactionStatus: LinkPaymentTransactionStatus) => void; + setTransactionStatus: (transactionStatus: LinkPaymentPaymentStatus) => void; setProcessResult: (processResult: ProcessResult) => void; setSendMethod: (sendMethod: LinkPaymentSendMethod) => void; } export interface LinkPaymentWaitFilterProps extends FilterProps { mid: string; - searchType: LinkPaymentSearchType; + searchCl: LinkPaymentSearchCl; searchKeyword: string; startDate: string; endDate: string; sendMethod: LinkPaymentSendMethod; - sendingStatus: LinkPaymentSendingStatus; + sendingStatus: LinkPaymentSendStatus; setMid: (mid: string) => void; - setSearchType: (searchType: LinkPaymentSearchType) => void; + setSearchType: (searchType: LinkPaymentSearchCl) => void; setSearchKeyword: (searchKeyWorld: string) => void; setStartDate: (startDate: string) => void; setEndDate: (endDate: string) => void; setSendMethod: (sendMethod: LinkPaymentSendMethod) => void; - setSendingStatus: (sendingStatus: LinkPaymentSendingStatus) => void; -} + setSendingStatus: (sendingStatus: LinkPaymentSendStatus) => void; + } // 링크 결제 - 발송,대기 조회 확장 서비스 // ======================================== diff --git a/src/entities/additional-service/ui/filter/fund-account-result-filter.tsx b/src/entities/additional-service/ui/filter/fund-account-result-filter.tsx index e67859b..22b01b6 100644 --- a/src/entities/additional-service/ui/filter/fund-account-result-filter.tsx +++ b/src/entities/additional-service/ui/filter/fund-account-result-filter.tsx @@ -6,7 +6,7 @@ import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@ import { IMAGE_ROOT } from '@/shared/constants/common'; import { FilterSelect } from '@/shared/ui/filter/select'; import { FilterCalendar } from '@/shared/ui/filter/calendar'; -import { FundAccountReceiveAccountNameNoOptionsGroup, FundAccountReceiveBankCodeOptionsGroup, FundAccountResultSearchDateTypeBtnGroup, FundAccountStatusBtnGroup } from '../../model/fund-account/constant'; +import { FundAccountReceiveBankCodeOptionsGroup, FundAccountResultSearchDateTypeBtnGroup, FundAccountResultStatusBtnGroup, FundAccountSearchClOptionsGroup, FundAccountStatusBtnGroup } from '../../model/fund-account/constant'; import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; import { FilterSelectInput } from '@/shared/ui/filter/select-input'; import { useStore } from '@/shared/model/store'; @@ -61,15 +61,6 @@ export const FundAccountResultFilter = ({ const [filterBankCode, setFilterBankCode] = useState(bankCode); const [filterResultStatus, setFilterResultStatus] = useState(resultStatus); - const [ - filterReceiveAccountNameNoSelectValue, - setFilterReceiveAccountNameNoSelectValue - ] = useState(FundAccountReceiveAccountNameNo.ReceiveAccountName); - const [ - filterReceiveAccountNameNoInputValue, - setFilterReceiveAccountNameNoInputValue - ] = useState(''); - const midOptions = useStore.getState().UserStore.selectOptionsMids; const onClickToClose = () => { @@ -133,11 +124,11 @@ export const FundAccountResultFilter = ({ > diff --git a/src/entities/additional-service/ui/filter/fund-account-trnasaction-filter.tsx b/src/entities/additional-service/ui/filter/fund-account-trnasaction-filter.tsx index d7208c6..996a588 100644 --- a/src/entities/additional-service/ui/filter/fund-account-trnasaction-filter.tsx +++ b/src/entities/additional-service/ui/filter/fund-account-trnasaction-filter.tsx @@ -6,7 +6,7 @@ import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@ import { IMAGE_ROOT } from '@/shared/constants/common'; import { FilterSelect } from '@/shared/ui/filter/select'; import { FilterCalendar } from '@/shared/ui/filter/calendar'; -import { FundAccountReceiveAccountNameNoOptionsGroup, FundAccountReceiveBankCodeOptionsGroup, FundAccountStatusBtnGroup } from '../../model/fund-account/constant'; +import { FundAccountReceiveBankCodeOptionsGroup, FundAccountSearchClOptionsGroup, FundAccountStatusBtnGroup } from '../../model/fund-account/constant'; import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; import { FilterSelectInput } from '@/shared/ui/filter/select-input'; import { useStore } from '@/shared/model/store'; @@ -120,7 +120,7 @@ export const FundAccountTransactionFilter = ({ title='수취인/계좌번호' selectValue={ filterSearchCl } selectSetter={ setFilterSearchCl } - selectOptions={ FundAccountReceiveAccountNameNoOptionsGroup } + selectOptions={ FundAccountSearchClOptionsGroup } inputValue={ filterSearchValue } inputSetter={ setFilterSearchValue } > diff --git a/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx b/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx index b150e00..1659703 100644 --- a/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx +++ b/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx @@ -16,14 +16,37 @@ import { SortTypeBox } from '@/entities/common/ui/sort-type-box'; import { FundAccountResultStatusBtnGroup, FundAccountStatusBtnGroup } from '../../model/fund-account/constant'; import { FundAccountResultFilter } from '../filter/fund-account-result-filter'; import { useStore } from '@/shared/model/store'; +import useIntersectionObserver from '@/widgets/intersection-observer'; export const FundAccountResultListWrap = () => { const { navigate } = useNavigate(); + + const [onActionIntersect, setOnActionIntersect] = useState(false); + const onIntersect: IntersectionObserverCallback = (entries: Array) => { + entries.forEach((entry: IntersectionObserverEntry) => { + if (entry.isIntersecting) { + console.log('Element is now intersecting with the root. [' + onActionIntersect + ']'); + if (onActionIntersect) { + callList(); + } + } + else { + console.log('Element is no longer intersecting with the root.'); + } + }); + }; + + const { setTarget } = useIntersectionObserver({ + threshold: 1, + onIntersect + }); + const userMid = useStore.getState().UserStore.mid; const [sortType, setSortType] = useState(SortTypeKeys.LATEST); const [listItems, setListItems] = useState>([]); const [filterOn, setFilterOn] = useState(false); + const [nextCursor, setNextCursor] = useState(null); const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); const [mid, setMid] = useState(userMid); @@ -51,11 +74,16 @@ export const FundAccountResultListWrap = () => { const callList = (option?: { sortType?: SortTypeKeys, - resultStatus?: FundAccountResultStatus + resultStatus?: FundAccountResultStatus, + resetPage?: boolean }) => { + setOnActionIntersect(false); - pageParam.sortType = (option?.sortType) ? option.sortType : sortType; - setPageParam(pageParam); + const currentPageParam = option?.resetPage + ? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType } + : { ...pageParam, sortType: option?.sortType ?? sortType }; + + setPageParam(currentPageParam); let listSummaryParams: ExtensionFundAccountResultListParams = { mid: mid, @@ -66,12 +94,29 @@ export const FundAccountResultListWrap = () => { toDate: '20250930', bankCode: bankCode, resultStatus: option?.resultStatus ?? resultStatus, - page: pageParam + ... { + page: currentPageParam + } }; extensionFundAccountResultList(listSummaryParams).then((rs: any) => { console.log(rs); - setListItems(rs.content); + // resetPage면 기존 리스트 무시, 아니면 추가 + setListItems(option?.resetPage ? rs.content : [ + ...listItems, + ...rs.content + ]); + if (rs.hasNext) { + setNextCursor(rs.nextCursor); + setPageParam({ + ...currentPageParam, // pageParam이 아니라 currentPageParam 사용 + cursor: rs.nextCursor + }); + setOnActionIntersect(true) + } + else { + setNextCursor(null); + } }); }; @@ -113,14 +158,18 @@ export const FundAccountResultListWrap = () => { const onClickToSort = (sort: SortTypeKeys) => { setSortType(sort); + setListItems([]); // 리스트 초기화 callList({ - sortType: sort + sortType: sort, + resetPage: true }); }; const onClickToStatus = (val: FundAccountResultStatus) => { setResultStatus(val); + setListItems([]); // 리스트 초기화 callList({ - resultStatus: val + resultStatus: val, + resetPage: true }); }; @@ -129,25 +178,26 @@ export const FundAccountResultListWrap = () => { let date = ''; let list: FundAccountResultContentItem[] = []; for (let i = 0; i < listItems.length; i++) { - // registDate format: "20211018140420" (YYYYMMDDHHmmss) + // requestDate format: "20211018140420" (YYYYMMDDHHmmss) let requestDate = listItems[i]?.requestDate || ''; let itemDate = requestDate.substring(0, 8); if (i === 0) { date = itemDate; } if (date !== itemDate) { - date = itemDate; + // 날짜가 바뀌면 이전 리스트를 푸시 (날짜 업데이트 전에!) if (list.length > 0) { rs.push( ); } + date = itemDate; // 그 다음에 날짜 업데이트 list = []; } list.push(listItems[i] as any); @@ -155,7 +205,7 @@ export const FundAccountResultListWrap = () => { if (list.length > 0) { rs.push( { }; useEffect(() => { - callList(); callSummary(); }, []); + useEffect(() => { + // 필터 조건이 변경되면 첫 페이지부터 다시 시작 + setListItems([]); + setNextCursor(null); + callList({ resetPage: true }); + }, [ + mid, + searchCl, + searchValue, + searchDateType, + fromDate, + toDate, + bankCode, + resultStatus + ]); + const onClickToNavigate = () => { navigate(PATHS.additionalService.fundAccount.transferRequest); }; @@ -300,6 +365,7 @@ export const FundAccountResultListWrap = () => {
{getListDateGroup()} +
-
+
+ +
+
); diff --git a/src/entities/additional-service/ui/link-payment/filter/link-payment-history-filter.tsx b/src/entities/additional-service/ui/link-payment/filter/link-payment-history-filter.tsx index 92e6008..e96bfc4 100644 --- a/src/entities/additional-service/ui/link-payment/filter/link-payment-history-filter.tsx +++ b/src/entities/additional-service/ui/link-payment/filter/link-payment-history-filter.tsx @@ -13,17 +13,17 @@ import { FilterCalendar } from '@/shared/ui/filter/calendar'; import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant'; import { useStore } from '@/shared/model/store'; -import { LinkPaymentHistoryFilterProps, LinkPaymentSearchType, LinkPaymentSendMethod, LinkPaymentTransactionStatus } from '@/entities/additional-service/model/link-pay/types'; +import { LinkPaymentHistoryFilterProps, LinkPaymentPaymentStatus, LinkPaymentSearchCl, LinkPaymentSendMethod } from '@/entities/additional-service/model/link-pay/types'; export const LinkPaymentHistoryFilter = ({ filterOn, setFilterOn, mid, - searchType, - searchKeyword, - startDate, - endDate, - transactionStatus, + searchCl, + searchValue, + fromDate, + toDate, + paymentStatus, processResult, sendMethod, setMid, @@ -38,11 +38,11 @@ export const LinkPaymentHistoryFilter = ({ 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 [filterSearchType, setFilterSearchType] = useState(searchCl); + const [filterSearchKeyword, setFilterSearchKeyword] = useState(searchValue); + const [filterStartDate, setFilterStartDate] = useState(fromDate); + const [filterEndDate, setFilterEndDate] = useState(toDate); + const [filterTransactionStatus, setFilterTransactionStatus] = useState(paymentStatus) const [filterProcessResult, setFilterProcessResult] = useState(processResult); const [filterSendMethod, setFilterSendMethod] = useState(sendMethod); const [dateReadOnly, setDateReadyOnly] = useState(true); @@ -73,17 +73,17 @@ export const LinkPaymentHistoryFilter = ({ }; let searchTypeOption = [ - { name: '휴대폰번호', value: LinkPaymentSearchType.PHONE }, - { name: '이메일', value: LinkPaymentSearchType.EMAIL }, + { name: '휴대폰번호', value: LinkPaymentSearchCl.PHONE }, + { name: '이메일', value: LinkPaymentSearchCl.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 }, + { name: '전체', value: LinkPaymentPaymentStatus.ALL }, + { name: '미완료/활성화', value: LinkPaymentPaymentStatus.ACTIVATE }, + { name: '입금요청', value: LinkPaymentPaymentStatus.DEPOSIT_REQUEST }, + { name: '결제완료', value: LinkPaymentPaymentStatus.PAYMENT_COMPLETE }, + { name: '결제실패', value: LinkPaymentPaymentStatus.PAYMENT_FAIL }, + { name: '결제중단/비활성화', value: LinkPaymentPaymentStatus.INACTIVE }, ]; let processResultOption = [ @@ -139,7 +139,7 @@ export const LinkPaymentHistoryFilter = ({ selectValue={filterSearchType} selectSetter={setFilterSearchType} selectOptions={searchTypeOption} - inputValue={searchKeyword} + inputValue={searchValue} inputSetter={setSearchKeyword} > (mid); - const [filterSearchType, setFilterSearchType] = useState(searchType); + const [filterSearchType, setFilterSearchType] = useState(searchCl); 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 [filterSendingStatus, setFilterSendingStatus] = useState(sendingStatus); const [dateReadOnly, setDateReadyOnly] = useState(true); const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState(FilterDateOptions.Input); @@ -66,8 +66,8 @@ export const LinkPaymentWaitSendFilter = ({ }; let searchTypeOption = [ - { name: '휴대폰번호', value: LinkPaymentSearchType.PHONE }, - { name: '이메일', value: LinkPaymentSearchType.EMAIL }, + { name: '휴대폰번호', value: LinkPaymentSearchCl.PHONE }, + { name: '이메일', value: LinkPaymentSearchCl.EMAIL }, ]; let sendMethodOption = [ @@ -78,9 +78,9 @@ export const LinkPaymentWaitSendFilter = ({ ]; let sendingStatusOption = [ - { name: '전체', value: LinkPaymentSendingStatus.ALL }, - { name: '발송요청', value: LinkPaymentSendingStatus.SEND_REQUEST }, - { name: '발송취소', value: LinkPaymentSendingStatus.SEND_CANCEL }, + { name: '전체', value: LinkPaymentSendStatus.ALL }, + { name: '발송요청', value: LinkPaymentSendStatus.SUCCESS }, + { name: '발송취소', value: LinkPaymentSendStatus.FAIL }, ]; return ( @@ -120,7 +120,7 @@ export const LinkPaymentWaitSendFilter = ({ { const [sortType, setSortType] = useState(SortTypeKeys.LATEST); const [listItems, setListItems] = useState({}); const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); + const [mid, setMid] = useState(userMid); - const [searchType, setSearchType] = useState(LinkPaymentSearchType.ALL) + const [searchCl, setSearchCl] = useState(LinkPaymentSearchCl.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 [transactionStatus, setTransactionStatus] = useState(LinkPaymentPaymentStatus.ALL) const [processResult, setProcessResult] = useState(ProcessResult.ALL) const [sendMethod, setSendMethod] = useState(LinkPaymentSendMethod.ALL) @@ -53,12 +54,12 @@ export const LinkPaymentHistoryWrap = () => { let listParams = { mid: mid, - searchCl: searchType === LinkPaymentSearchType.ALL ? '' : searchType, + searchCl: searchCl, searchValue: searchKeyword, paymentMethod: '', fromDate: startDate, toDate: endDate, - paymentStatus: transactionStatus === LinkPaymentTransactionStatus.ALL ? '' : transactionStatus, + paymentStatus: transactionStatus === LinkPaymentPaymentStatus.ALL ? '' : transactionStatus, sendStatus: processResult === ProcessResult.ALL ? '' : processResult, sendMethod: sendMethod === LinkPaymentSendMethod.ALL ? '' : sendMethod, page: pageParam @@ -90,12 +91,12 @@ export const LinkPaymentHistoryWrap = () => { const onClickToDownloadExcel = () => { downloadExcel({ mid: mid, - searchCl: (searchType === LinkPaymentSearchType.ALL)? '': searchType, + searchCl: searchCl, searchValue: searchKeyword, paymentMethod: '', fromDate: startDate, toDate: endDate, - paymentStatus: (transactionStatus === LinkPaymentTransactionStatus.ALL)? '': transactionStatus, + paymentStatus: transactionStatus, sendStatus: (processResult === ProcessResult.ALL)? '': processResult, sendMethod: (sendMethod === LinkPaymentSendMethod.ALL)? '': sendMethod, }).then((rs) => { @@ -190,15 +191,15 @@ export const LinkPaymentHistoryWrap = () => { filterOn={filterOn} setFilterOn={setFilterOn} mid={mid} - searchType={searchType} - searchKeyword={searchKeyword} - startDate={startDate} - endDate={endDate} - transactionStatus={transactionStatus} + searchCl={searchCl} + searchValue={searchKeyword} + fromDate={startDate} + toDate={endDate} + paymentStatus={transactionStatus} processResult={processResult} sendMethod={sendMethod} setMid={setMid} - setSearchType={setSearchType} + setSearchType={setSearchCl} setSearchKeyword={setSearchKeyword} setStartDate={setStartDate} setEndDate={setEndDate} diff --git a/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx b/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx index 527449b..01090c6 100644 --- a/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx +++ b/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx @@ -12,12 +12,12 @@ import { useExtensionLinkPayWaitListMutation } from '../../api/link-payment/use- import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant'; import { useExtensionLinkPayWaitDownloadExcelMutation } from '../../api/link-payment/use-extension-link-pay-wait-download-excel-mutation'; import { useStore } from '@/shared/model/store'; -import { LinkPaymentSearchType, LinkPaymentSendingStatus, LinkPaymentSendMethod, LinkPaymentWaitListItem } from '../../model/link-pay/types'; +import { LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus, LinkPaymentWaitListItem } from '../../model/link-pay/types'; const sendingStatusBtnGrouup = [ - { name: '전체', value: LinkPaymentSendingStatus.ALL }, - { name: '발송요청', value: LinkPaymentSendingStatus.SEND_REQUEST }, - { name: '발송취소', value: LinkPaymentSendingStatus.SEND_CANCEL } + { name: '전체', value: LinkPaymentSendStatus.ALL }, + { name: '발송요청', value: LinkPaymentSendStatus.SUCCESS }, + { name: '발송취소', value: LinkPaymentSendStatus.FAIL } ] export const LinkPaymentWaitSendWrap = () => { @@ -27,12 +27,12 @@ export const LinkPaymentWaitSendWrap = () => { const [sortType, setSortType] = useState(SortTypeKeys.LATEST); const [filterOn, setFilterOn] = useState(false); const [mid, setMid] = useState(userMid); - const [searchType, setSearchType] = useState(LinkPaymentSearchType.ALL) + const [searchType, setSearchType] = useState(LinkPaymentSearchCl.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 [sendingStatus, setSendingStatus] = useState(LinkPaymentSendStatus.ALL); const [listItems, setListItems] = useState({}); const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); @@ -55,13 +55,13 @@ export const LinkPaymentWaitSendWrap = () => { let listParams = { mid: mid, - searchCl: (searchType === LinkPaymentSearchType.ALL)? '': searchType, + searchCl: searchType, searchValue: searchKeyword, fromDate: startDate, toDate: endDate, - sendStatus: (sendingStatus === LinkPaymentSendingStatus.ALL)? '': sendingStatus, // 추후 삭제 필요 + sendStatus: sendingStatus, // 추후 삭제 필요 sendMethod: (sendMethod === LinkPaymentSendMethod.ALL)? '': sendMethod, - processStatus: (sendingStatus === LinkPaymentSendingStatus.ALL)? '': sendingStatus, + processStatus: sendingStatus, page: pageParam } @@ -91,13 +91,13 @@ export const LinkPaymentWaitSendWrap = () => { const onClickToDownloadExcel = () => { downloadExcel({ mid: mid, - searchCl: (searchType === LinkPaymentSearchType.ALL)? '': searchType, + searchCl: (searchType === LinkPaymentSearchCl.ALL)? '': searchType, searchValue: searchKeyword, fromDate: startDate, toDate: endDate, - sendStatus: (sendingStatus === LinkPaymentSendingStatus.ALL)? '': sendingStatus, // 추후 삭제 필요 + sendStatus: (sendingStatus === LinkPaymentSendStatus.ALL)? '': sendingStatus, // 추후 삭제 필요 sendMethod: (sendMethod === LinkPaymentSendMethod.ALL)? '': sendMethod, - processStatus: (sendingStatus === LinkPaymentSendingStatus.ALL)? '': sendingStatus, + processStatus: (sendingStatus === LinkPaymentSendStatus.ALL)? '': sendingStatus, }).then((rs) => { console.log('Excel Dowload Status : ' + rs.status); }); @@ -107,7 +107,7 @@ export const LinkPaymentWaitSendWrap = () => { setSortType(sort); }; - const onClickSendingStatus = (val: LinkPaymentSendingStatus) => { + const onClickSendingStatus = (val: LinkPaymentSendStatus) => { setSendingStatus(val); }; @@ -182,7 +182,7 @@ export const LinkPaymentWaitSendWrap = () => { filterOn={filterOn} setFilterOn={setFilterOn} mid={mid} - searchType={searchType} + searchCl={searchType} searchKeyword={searchKeyword} startDate={startDate} endDate={endDate} diff --git a/src/entities/additional-service/ui/list-item.tsx b/src/entities/additional-service/ui/list-item.tsx index eb6cc44..ec156d1 100644 --- a/src/entities/additional-service/ui/list-item.tsx +++ b/src/entities/additional-service/ui/list-item.tsx @@ -437,7 +437,7 @@ export const ListItem = ({ } else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) { rs.push( -
+
{getTime()} | {getStatus()} diff --git a/src/pages/additional-service/fund-account/transfer-request-page.tsx b/src/pages/additional-service/fund-account/transfer-request-page.tsx index d6bddeb..dbf98ac 100644 --- a/src/pages/additional-service/fund-account/transfer-request-page.tsx +++ b/src/pages/additional-service/fund-account/transfer-request-page.tsx @@ -54,7 +54,7 @@ export const FundAccountTransferRequestPage = () => { const isFormValid = () => { return ( mid.trim() !== '' && - //bankCode.trim() !== '' && + bankCode.trim() !== '' && accountNo.trim() !== '' && accountName.trim() !== '' && amount > 0 && 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 06519e4..2de1fb8 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 @@ -2,7 +2,7 @@ import moment from 'moment'; 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'; +import { DefaultRequestPagination, HeaderType } from '@/entities/common/model/types'; import { useSetHeaderTitle, useSetHeaderType, @@ -19,31 +19,44 @@ import { useExtensionKeyinListMutation } from '@/entities/additional-service/api import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant'; import { KeyInPaymentList } from '@/entities/additional-service/ui/key-in-payment/key-in-payment-list'; import { useStore } from '@/shared/model/store'; -import { KeyInPaymentListItem, KeyInPaymentTransactionStatus } from '@/entities/additional-service/model/key-in/types'; - -// contant로 옮기기 -const requestStatusBtnGroup = [ - { name: '전체', value: KeyInPaymentTransactionStatus.ALL }, - { name: '승인', value: KeyInPaymentTransactionStatus.APPROVAL }, - { name: '전취소', value: KeyInPaymentTransactionStatus.PRE_CANCEL }, - { name: '후취소', value: KeyInPaymentTransactionStatus.POST_CANCEL } -]; +import { KeyInPaymentListItem, KeyInPaymentPaymentStatus } from '@/entities/additional-service/model/key-in/types'; +import { requestStatusBtnGroup } from '@/entities/additional-service/model/key-in/constant'; +import useIntersectionObserver from '@/widgets/intersection-observer'; export const KeyInPaymentPage = () => { const { navigate } = useNavigate(); const userMid = useStore.getState().UserStore.mid; const [sortType, setSortType] = useState(SortTypeKeys.LATEST); - const [listItems, setListItems] = useState({}); + const [listItems, setListItems] = useState>([]); const [filterOn, setFilterOn] = useState(false); - const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); + const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); + const [nextCursor, setNextCursor] = useState(null); const [mid, setMid] = useState(userMid); 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 [paymentStatus, setPaymentStatus] = useState(KeyInPaymentPaymentStatus.ALL) const [minAmount, setMinAmount] = useState(); const [maxAmount, setMaxAmount] = useState(); + const [onActionIntersect, setOnActionIntersect] = useState(false); + const onIntersect: IntersectionObserverCallback = (entries: Array) => { + entries.forEach((entry: IntersectionObserverEntry) => { + if (entry.isIntersecting) { + console.log('Element is now intersecting with the root. [' + onActionIntersect + ']'); + if (onActionIntersect) { + callList(); + } + } + else { + console.log('Element is no longer intersecting with the root.'); + } + }); + }; + const { setTarget } = useIntersectionObserver({ + threshold: 1, + onIntersect + }); useSetHeaderTitle('KEY-IN 결제'); useSetHeaderType(HeaderType.LeftArrow); @@ -57,73 +70,75 @@ export const KeyInPaymentPage = () => { const callList = (option?: { sortType?: SortTypeKeys, - val?: string + status?: KeyInPaymentPaymentStatus, + resetPage?: boolean }) => { - pageParam.sortType = (option?.sortType) ? option.sortType : sortType; - setPageParam(pageParam); + setOnActionIntersect(false); + + const currentPageParam = option?.resetPage + ? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType } + : { ...pageParam, sortType: option?.sortType ?? sortType }; + + setPageParam(currentPageParam); + let newMinAmount = minAmount; - if(!!minAmount && typeof (minAmount) === 'string'){ + if (!!minAmount && typeof (minAmount) === 'string') { newMinAmount = parseInt(minAmount); } let newMaxAmount = maxAmount; - if(!!maxAmount && typeof (maxAmount) === 'string'){ + if (!!maxAmount && typeof (maxAmount) === 'string') { newMaxAmount = parseInt(maxAmount); } let listParams = { mid: mid, fromDate: startDate, toDate: endDate, - paymentStatus: transactionStatus, + paymentStatus: paymentStatus, minAmount: newMinAmount, maxAmount: newMaxAmount, - page: pageParam + ... { + page: currentPageParam + } }; - console.log('Request Info: ', listParams); - keyinList(listParams).then((rs) => { - setListItems(assembleData(rs.content)); + // resetPage면 기존 리스트 무시, 아니면 추가 + setListItems(option?.resetPage ? rs.content : [ + ...listItems, + ...rs.content + ]); + if (rs.hasNext) { + setNextCursor(rs.nextCursor); + setPageParam({ + ...currentPageParam, // pageParam이 아니라 currentPageParam 사용 + cursor: rs.nextCursor + }); + setOnActionIntersect(true) + } + else { + setNextCursor(null); + } }); } - const assembleData = (content: Array) => { - console.log('rs.content:', content); - let data: any = {}; - if (content && content.length > 0) { - for(let i = 0; i < content?.length; i++){ - let paymentDate = content[i]?.paymentDate?.substring(0, 8); - let groupDate = moment(paymentDate).format('YYYYMMDD'); - if(!!groupDate && !data.hasOwnProperty(groupDate)){ - data[groupDate] = []; - } - if(!!groupDate && data.hasOwnProperty(groupDate)){ - data[groupDate].push(content[i]); - } - } - } - console.log('Data : ', data); - return data; - }; - - const onClickToOpenFilter = () => { setFilterOn(!filterOn); }; const onClickToDownloadExcel = () => { let newMinAmount = minAmount; - if(!!minAmount && typeof (minAmount) === 'string'){ + if (!!minAmount && typeof (minAmount) === 'string') { newMinAmount = parseInt(minAmount); } let newMaxAmount = maxAmount; - if(!!maxAmount && typeof (maxAmount) === 'string'){ + if (!!maxAmount && typeof (maxAmount) === 'string') { newMaxAmount = parseInt(maxAmount); } downloadExcel({ mid: mid, fromDate: startDate, toDate: endDate, - paymentStatus: transactionStatus, + paymentStatus: paymentStatus, minAmount: newMinAmount, maxAmount: newMaxAmount }).then((rs) => { @@ -133,16 +148,19 @@ export const KeyInPaymentPage = () => { const onClickToSort = (sort: SortTypeKeys) => { setSortType(sort); + setListItems([]); callList({ - sortType: sort + sortType: sort, + resetPage: true }); }; - const onClickToTransactionStatus = (val: KeyInPaymentTransactionStatus) => { - console.log('TransactionStatus Test: ', val); - setTransactionStatus(val); - callList({ - val: val + const onClickToPaymentStatus = (val: KeyInPaymentPaymentStatus) => { + setPaymentStatus(val); + setListItems([]); + callList({ + status: val, + resetPage: true }); }; @@ -190,8 +208,8 @@ export const KeyInPaymentPage = () => {
@@ -199,8 +217,8 @@ export const KeyInPaymentPage = () => { requestStatusBtnGroup.map((value, index) => ( onClickToTransactionStatus(value.value)} + className={`keyword-tag ${(paymentStatus === value.value) ? 'active' : ''}`} + onClick={() => onClickToPaymentStatus(value.value)} >{value.name} )) } @@ -211,6 +229,7 @@ export const KeyInPaymentPage = () => { listItems={listItems} additionalServiceCategory={AdditionalServiceCategory.KeyInPayment} mid={mid} + setTarget={setTarget} >
@@ -221,13 +240,13 @@ export const KeyInPaymentPage = () => { mid={mid} startDate={startDate} endDate={endDate} - transactionStatus={transactionStatus} + transactionStatus={paymentStatus} minAmount={minAmount} maxAmount={maxAmount} setMid={setMid} setStartDate={setStartDate} setEndDate={setEndDate} - setTransactionStatus={setTransactionStatus} + setTransactionStatus={setPaymentStatus} setMinAmount={setMinAmount} setMaxAmount={setMaxAmount} >