nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- 자금이체 페이지 List 초기화 문제 및 Cursor 유지 오류 수정

Browse Source 
- KeyIn결제 page 수정
This commit is contained in:
HyeonJongKim
2025-10-20 11:25:15 +09:00
parent e2aa4f06ec
commit 0e8a5f0d89
18 changed files with 395 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/entities/additional-service/model/fund-account/constant.ts
View File

@@ -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 = [

2
src/entities/additional-service/model/fund-account/types.ts
View File

@@ -11,8 +11,6 @@ export enum FundAccountSearchDateType {
APPLICATION_DATE = 'APPLICATION_DATE'
};
export interface FundAccountTabProps {
activeTab: FundAccountTabKeys;
};

9
src/entities/additional-service/model/key-in/constant.ts Normal file
View File

@@ -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 }
];

9
src/entities/additional-service/model/key-in/types.ts
View File

@@ -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<string, Array<ListItemProps>>;
listItems: Array<KeyInPaymentListItem>;
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;
}

55
src/entities/additional-service/model/link-pay/types.ts
View File

@@ -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;
}
// 링크 결제 - 발송,대기 조회 확장 서비스
// ========================================

23
src/entities/additional-service/ui/filter/fund-account-result-filter.tsx
View File

@@ -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<string>(bankCode);
const [filterResultStatus, setFilterResultStatus] = useState<FundAccountResultStatus>(resultStatus);
const [
filterReceiveAccountNameNoSelectValue,
setFilterReceiveAccountNameNoSelectValue
] = useState<FundAccountReceiveAccountNameNo>(FundAccountReceiveAccountNameNo.ReceiveAccountName);
const [
filterReceiveAccountNameNoInputValue,
setFilterReceiveAccountNameNoInputValue
] = useState<string>('');
const midOptions = useStore.getState().UserStore.selectOptionsMids;
const onClickToClose = () => {
@@ -133,11 +124,11 @@ export const FundAccountResultFilter = ({
></FilterSelect>
<FilterSelectInput
title='수취인/계좌번호'
selectValue={filterReceiveAccountNameNoSelectValue}
selectSetter={setFilterReceiveAccountNameNoSelectValue}
selectOptions={FundAccountReceiveAccountNameNoOptionsGroup}
inputValue={filterReceiveAccountNameNoInputValue}
inputSetter={setFilterReceiveAccountNameNoInputValue}
selectValue={filterSearchCl}
selectSetter={setFilterSearchCl}
selectOptions={FundAccountSearchClOptionsGroup}
inputValue={filterSearchValue}
inputSetter={setFilterSearchValue}
></FilterSelectInput>
<FilterButtonGroups
title='조회 기준'
@@ -161,7 +152,7 @@ export const FundAccountResultFilter = ({
<FilterButtonGroups
title='처리 결과'
activeValue={filterResultStatus}
btnGroups={FundAccountStatusBtnGroup}
btnGroups={FundAccountResultStatusBtnGroup}
setter={setFilterResultStatus}
></FilterButtonGroups>
</div>

4
src/entities/additional-service/ui/filter/fund-account-trnasaction-filter.tsx
View File

@@ -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 }
></FilterSelectInput>

90
src/entities/additional-service/ui/fund-account/result-list-wrap.tsx
View File

@@ -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<boolean>(false);
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
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>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<FundAccountResultContentItem>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [nextCursor, setNextCursor] = useState<string | null>(null);
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
const [mid, setMid] = useState<string>(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(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.FundAccountResult}
mid={mid}
key={date + '-' + i}
date={date}
date={date} // 이전 날짜 사용
items={list as any}
></ListDateGroup>
);
}
date = itemDate; // 그 다음에 날짜 업데이트
list = [];
}
list.push(listItems[i] as any);
@@ -155,7 +205,7 @@ export const FundAccountResultListWrap = () => {
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.FundAccountTransfer}
additionalServiceCategory={AdditionalServiceCategory.FundAccountResult}
mid={mid}
key={date + '-last'}
date={date}
@@ -167,10 +217,25 @@ export const FundAccountResultListWrap = () => {
};
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 = () => {
<section className="transaction-list">
{getListDateGroup()}
<div ref={setTarget}></div>
</section>
<div className="apply-row">
<button

86
src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
View File

@@ -1,4 +1,4 @@
import { SortTypeKeys } from '@/entities/common/model/types';
import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { JSX, useEffect, useState } from 'react';
@@ -8,7 +8,6 @@ import {
ExtensionFundAccountTransferExcelParams,
ExtensionFundAccountTransferExcelResponse,
ExtensionFundAccountTransferListParams,
ExtensionFundAccountTransferListResponse,
FundAccountSearchCl,
FundAccountStatus,
FundAccountTransferContentItem
@@ -26,15 +25,38 @@ import { NumericFormat } from 'react-number-format';
import { FundAccountTransactionFilter } from '../filter/fund-account-trnasaction-filter';
import { PATHS } from '@/shared/constants/paths';
import { useStore } from '@/shared/model/store';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const FundAccountTransferListWrap = () => {
const { navigate } = useNavigate();
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
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>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<FundAccountTransferContentItem>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
const [nextCursor, setNextCursor] = useState<string | null>(null);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [mid, setMid] = useState<string>(userMid);
const [searchCl, setSearchCl] = useState<FundAccountSearchCl>(FundAccountSearchCl.ACCOUNT_NAME);
const [searchValue, setSearchValue] = useState<string>('');
@@ -52,25 +74,47 @@ export const FundAccountTransferListWrap = () => {
const callList = (option?: {
sortType?: SortTypeKeys,
status?: FundAccountStatus
status?: FundAccountStatus,
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 listSummaryParams: ExtensionFundAccountTransferListParams = {
mid: "nictest80m",
mid: mid,
searchCl: searchCl,
searchValue: searchValue,
bankCode: bankCode,
fromDate: "20210101",
toDate: "20221231",
fromDate: fromDate,
toDate: toDate,
resultStatus: option?.status ?? status,
page: pageParam
... {
page: currentPageParam
}
};
extensionFundAccountTransferList(listSummaryParams).then((rs: any) => {
const content = rs.content || [];
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);
}
});
callBalance();
@@ -93,7 +137,6 @@ export const FundAccountTransferListWrap = () => {
mid: mid
};
extensionFundAccountBalance(params).then((rs: ExtensionFundAccountBalanceResponse) => {
console.log(rs);
setBalance(rs.balance);
});
};
@@ -109,12 +152,15 @@ export const FundAccountTransferListWrap = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({ sortType: sort });
setListItems([]); // 리스트 초기화
callList({ sortType: sort, resetPage: true });
};
const onClickToStatus = (val: FundAccountStatus) => {
setStatus(val);
setListItems([]); // 리스트 초기화
callList({
status: val
status: val,
resetPage: true
});
};
@@ -135,7 +181,7 @@ export const FundAccountTransferListWrap = () => {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.FundAccountTransfer}
mid={"nictest80m"}
mid={mid}
key={date + '-' + i}
date={date}
items={list as any}
@@ -150,7 +196,7 @@ export const FundAccountTransferListWrap = () => {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.FundAccountTransfer}
mid={"nictest80m"}
mid={mid}
key={date + '-last'}
date={date}
items={list as any}
@@ -161,7 +207,10 @@ export const FundAccountTransferListWrap = () => {
};
useEffect(() => {
callList();
// 필터 조건이 변경되면 첫 페이지부터 다시 시작
setListItems([]);
setNextCursor(null);
callList({ resetPage: true });
}, [
mid,
searchCl,
@@ -250,6 +299,7 @@ export const FundAccountTransferListWrap = () => {
<section className="transaction-list pb-86">
{getListDateGroup()}
<div ref={setTarget}></div>
</section>
<div className="apply-row">
<button

12
src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx
View File

@@ -10,7 +10,7 @@ import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
import { useStore } from '@/shared/model/store';
import { KeyInPaymentFilterProps, KeyInPaymentTransactionStatus } from '@/entities/additional-service/model/key-in/types';
import { KeyInPaymentFilterProps, KeyInPaymentPaymentStatus } from '@/entities/additional-service/model/key-in/types';
export const KeyInPaymentFilter = ({
filterOn,
@@ -32,7 +32,7 @@ export const KeyInPaymentFilter = ({
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
const [filterTransactionStatus, setFilterTransactionStatus] = useState<KeyInPaymentTransactionStatus>(transactionStatus);
const [filterTransactionStatus, setFilterTransactionStatus] = useState<KeyInPaymentPaymentStatus>(transactionStatus);
const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
@@ -57,10 +57,10 @@ export const KeyInPaymentFilter = ({
};
let transactionStatusOption = [
{ name: '전체', value: KeyInPaymentTransactionStatus.ALL },
{ name: '승인', value: KeyInPaymentTransactionStatus.APPROVAL },
{ name: '전취소', value: KeyInPaymentTransactionStatus.PRE_CANCEL },
{ name: '후취소', value: KeyInPaymentTransactionStatus.POST_CANCEL },
{ name: '전체', value: KeyInPaymentPaymentStatus.ALL },
{ name: '승인', value: KeyInPaymentPaymentStatus.APPROVAL },
{ name: '전취소', value: KeyInPaymentPaymentStatus.PRE_CANCEL },
{ name: '후취소', value: KeyInPaymentPaymentStatus.POST_CANCEL },
];
return (

58
src/entities/additional-service/ui/key-in-payment/key-in-payment-list.tsx
View File

@@ -1,24 +1,53 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { ListDateGroup } from '../list-date-group';
import { KeyInPaymentListProps } from '../../model/key-in/types';
import { KeyInPaymentListItem, KeyInPaymentListProps } from '../../model/key-in/types';
import { JSX } from 'react';
export const KeyInPaymentList = ({
additionalServiceCategory,
listItems,
mid
mid,
setTarget
}: KeyInPaymentListProps) => {
const { navigate } = useNavigate();
const getListDateGroup = () => {
let rs = [];
for (const [key, value] of Object.entries(listItems)) {
let rs: JSX.Element[] = [];
let date = '';
let list: KeyInPaymentListItem[] = [];
for (let i = 0; i < listItems.length; i++) {
// paymentDate format: "20211018140420" (YYYYMMDDHHmmss)
let paymentDate = listItems[i]?.paymentDate || '';
let itemDate = paymentDate.substring(0, 8);
if (i === 0) {
date = itemDate;
}
if (date !== itemDate) {
date = itemDate;
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
mid={mid}
key={date + '-' + i}
date={date}
items={list as any}
></ListDateGroup>
);
}
list = [];
}
list.push(listItems[i] as any);
}
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
key={key}
date={key}
items={value}
mid={mid}
key={date + '-last'}
date={date}
items={list as any}
></ListDateGroup>
);
}
@@ -31,14 +60,15 @@ export const KeyInPaymentList = ({
return (
<>
<div className="transaction-list">
<section className="transaction-list">
{getListDateGroup()}
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToNavigate()}
>결제 신청</button>
</div>
<div ref={setTarget}></div>
</section>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToNavigate()}
>결제 신청</button>
</div>
</>
);

40
src/entities/additional-service/ui/link-payment/filter/link-payment-history-filter.tsx
View File

@@ -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<string>(mid);
const [filterSearchType, setFilterSearchType] = useState<LinkPaymentSearchType>(searchType);
const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
const [filterTransactionStatus, setFilterTransactionStatus] = useState<LinkPaymentTransactionStatus>(transactionStatus)
const [filterSearchType, setFilterSearchType] = useState<LinkPaymentSearchCl>(searchCl);
const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchValue);
const [filterStartDate, setFilterStartDate] = useState<string>(fromDate);
const [filterEndDate, setFilterEndDate] = useState<string>(toDate);
const [filterTransactionStatus, setFilterTransactionStatus] = useState<LinkPaymentPaymentStatus>(paymentStatus)
const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
const [filterSendMethod, setFilterSendMethod] = useState<LinkPaymentSendMethod>(sendMethod);
const [dateReadOnly, setDateReadyOnly] = useState<boolean>(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}
></FilterSelectInput>
<FilterCalendar

20
src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx
View File

@@ -10,13 +10,13 @@ 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 { LinkPaymentSearchType, LinkPaymentSendingStatus, LinkPaymentSendMethod, LinkPaymentWaitFilterProps } from '@/entities/additional-service/model/link-pay/types';
import { LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus, LinkPaymentWaitFilterProps } from '@/entities/additional-service/model/link-pay/types';
export const LinkPaymentWaitSendFilter = ({
filterOn,
setFilterOn,
mid,
searchType,
searchCl,
searchKeyword,
startDate,
endDate,
@@ -33,12 +33,12 @@ export const LinkPaymentWaitSendFilter = ({
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterSearchType, setFilterSearchType] = useState<LinkPaymentSearchType>(searchType);
const [filterSearchType, setFilterSearchType] = useState<LinkPaymentSearchCl>(searchCl);
const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
const [filterSendMethod, setFilterSendMethod] = useState<LinkPaymentSendMethod>(sendMethod)
const [filterSendingStatus, setFilterSendingStatus] = useState<LinkPaymentSendingStatus>(sendingStatus);
const [filterSendingStatus, setFilterSendingStatus] = useState<LinkPaymentSendStatus>(sendingStatus);
const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(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 = ({
<FilterSelectInput
title='휴대폰번호/이메일'
selectValue={searchType}
selectValue={searchCl}
selectSetter={setFilterSearchType}
selectOptions={searchTypeOption}
inputValue={searchKeyword}

27
src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx
View File

@@ -12,7 +12,7 @@ import { useExtensionLinkPayHistoryListMutation } from '../../api/link-payment/u
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { useExtensionLinkPayHistoryDownloadExcelMutation } from '../../api/link-payment/use-extension-link-pay-history-download-excel-mutation';
import { useStore } from '@/shared/model/store';
import { LinkPaymentHistoryListItem, LinkPaymentSearchType, LinkPaymentSendMethod, LinkPaymentTransactionStatus } from '../../model/link-pay/types';
import { LinkPaymentHistoryListItem, LinkPaymentPaymentStatus, LinkPaymentSearchCl, LinkPaymentSendMethod } from '../../model/link-pay/types';
const processResultBtnGroup = [
{ name: '전체', value: ProcessResult.ALL },
@@ -28,12 +28,13 @@ export const LinkPaymentHistoryWrap = () => {
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState({});
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
const [mid, setMid] = useState<string>(userMid);
const [searchType, setSearchType] = useState<LinkPaymentSearchType>(LinkPaymentSearchType.ALL)
const [searchCl, setSearchCl] = useState<LinkPaymentSearchCl>(LinkPaymentSearchCl.ALL)
const [searchKeyword, setSearchKeyword] = useState<string>('');
const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
const [transactionStatus, setTransactionStatus] = useState<LinkPaymentTransactionStatus>(LinkPaymentTransactionStatus.ALL)
const [transactionStatus, setTransactionStatus] = useState<LinkPaymentPaymentStatus>(LinkPaymentPaymentStatus.ALL)
const [processResult, setProcessResult] = useState<ProcessResult>(ProcessResult.ALL)
const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(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}

28
src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx
View File

@@ -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>(SortTypeKeys.LATEST);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [mid, setMid] = useState<string>(userMid);
const [searchType, setSearchType] = useState<LinkPaymentSearchType>(LinkPaymentSearchType.ALL)
const [searchType, setSearchType] = useState<LinkPaymentSearchCl>(LinkPaymentSearchCl.ALL)
const [searchKeyword, setSearchKeyword] = useState<string>('');
const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL);
const [sendingStatus, setSendingStatus] = useState<LinkPaymentSendingStatus>(LinkPaymentSendingStatus.ALL);
const [sendingStatus, setSendingStatus] = useState<LinkPaymentSendStatus>(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}

2
src/entities/additional-service/ui/list-item.tsx
View File

@@ -437,7 +437,7 @@ export const ListItem = ({
}
else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
rs.push(
<div className="transaction-details">
<div key="fund-account-transfer" className="transaction-details">
<span>{getTime()}</span>
<span className="separator">|</span>
<span>{getStatus()}</span>

2
src/pages/additional-service/fund-account/transfer-request-page.tsx
View File

@@ -54,7 +54,7 @@ export const FundAccountTransferRequestPage = () => {
const isFormValid = () => {
return (
mid.trim() !== '' &&
//bankCode.trim() !== '' &&
bankCode.trim() !== '' &&
accountNo.trim() !== '' &&
accountName.trim() !== '' &&
amount > 0 &&

133
src/pages/additional-service/key-in-payment/key-in-payment-page.tsx
View File

@@ -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>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState({});
const [listItems, setListItems] = useState<Array<KeyInPaymentListItem>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [nextCursor, setNextCursor] = useState<string | null>(null);
const [mid, setMid] = useState<string>(userMid);
const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
const [transactionStatus, setTransactionStatus] = useState<KeyInPaymentTransactionStatus>(KeyInPaymentTransactionStatus.ALL)
const [paymentStatus, setPaymentStatus] = useState<KeyInPaymentPaymentStatus>(KeyInPaymentPaymentStatus.ALL)
const [minAmount, setMinAmount] = useState<number>();
const [maxAmount, setMaxAmount] = useState<number>();
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
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<KeyInPaymentListItem>) => {
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);
const onClickToPaymentStatus = (val: KeyInPaymentPaymentStatus) => {
setPaymentStatus(val);
setListItems([]);
callList({
val: val
status: val,
resetPage: true
});
};
@@ -190,8 +208,8 @@ export const KeyInPaymentPage = () => {
<div className="filter-section">
<SortTypeBox
sortType={ sortType }
onClickToSort={ onClickToSort }
sortType={sortType}
onClickToSort={onClickToSort}
></SortTypeBox>
<div className="excrow">
<div className="full-menu-keywords no-padding">
@@ -199,8 +217,8 @@ export const KeyInPaymentPage = () => {
requestStatusBtnGroup.map((value, index) => (
<span
key={`key-service-code=${index}`}
className={`keyword-tag ${(transactionStatus === value.value) ? 'active' : ''}`}
onClick={() => onClickToTransactionStatus(value.value)}
className={`keyword-tag ${(paymentStatus === value.value) ? 'active' : ''}`}
onClick={() => onClickToPaymentStatus(value.value)}
>{value.name}</span>
))
}
@@ -211,6 +229,7 @@ export const KeyInPaymentPage = () => {
listItems={listItems}
additionalServiceCategory={AdditionalServiceCategory.KeyInPayment}
mid={mid}
setTarget={setTarget}
></KeyInPaymentList>
</div>
</div>
@@ -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}
></KeyInPaymentFilter>