From 948657db3f3bebb3127dcb7423ed648eb5041952 Mon Sep 17 00:00:00 2001 From: HyeonJongKim Date: Mon, 20 Oct 2025 16:03:13 +0900 Subject: [PATCH] =?UTF-8?q?-=20SMS,KeyIn,ARS=20=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=A0=81=EC=9A=A9=20?= =?UTF-8?q?-=20ARS=20=EA=B2=B0=EC=A0=9C=EC=8B=A0=EC=B2=AD=20:=EC=84=B1?= =?UTF-8?q?=EA=B3=B5=20=EA=B2=B0=EA=B3=BC=20=ED=8C=9D=EC=97=85=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../model/account-holder-search/types.ts | 3 +- .../additional-service/model/ars/constant.ts | 14 +- .../additional-service/model/ars/types.ts | 12 +- .../model/key-in/constant.ts | 10 +- .../model/sms-payment/constant.ts | 13 ++ .../model/sms-payment/types.ts | 88 ++++----- .../account-holder-search-list.tsx | 58 ++++-- .../ui/fund-account/result-list-wrap.tsx | 4 - .../ui/fund-account/transfer-list-wrap.tsx | 11 +- .../filter/key-in-payment-filter.tsx | 18 +- .../additional-service/ui/list-item.tsx | 21 ++- .../ui/sms-payment/sms-payment-filter.tsx | 16 +- .../ui/sms-payment/sms-payment-list.tsx | 51 ++++-- .../account-holder-search-page.tsx | 115 ++++++++---- .../additional-service/ars/detail-page.tsx | 28 ++- .../additional-service/ars/list-page.tsx | 171 ++++++++++++------ .../additional-service/ars/request-page.tsx | 12 +- .../ars/request-success-page.tsx | 83 ++++++--- .../key-in-payment/key-in-payment-page.tsx | 17 +- .../sms-payment/sms-payment-page.tsx | 121 ++++++++----- 20 files changed, 570 insertions(+), 296 deletions(-) diff --git a/src/entities/additional-service/model/account-holder-search/types.ts b/src/entities/additional-service/model/account-holder-search/types.ts index 238d6e0..6e913a0 100644 --- a/src/entities/additional-service/model/account-holder-search/types.ts +++ b/src/entities/additional-service/model/account-holder-search/types.ts @@ -22,8 +22,9 @@ export interface AccountHolderSearchListItem { } export interface AccountHolderSearchListProps { - listItems: Record>; + listItems: Array; mid: string; + setTarget: (element: HTMLElement | null) => void; } export interface AccountHolderSearchFilterProps extends FilterProps { diff --git a/src/entities/additional-service/model/ars/constant.ts b/src/entities/additional-service/model/ars/constant.ts index fdce979..8539456 100644 --- a/src/entities/additional-service/model/ars/constant.ts +++ b/src/entities/additional-service/model/ars/constant.ts @@ -15,4 +15,16 @@ export const ArsOrderStatusBtnGroup = [ export const ArsPaymentMethodBtnGroup = [ {name: 'SMS', value: ArsPaymentMethod.SMS }, {name: 'ARS', value: ArsPaymentMethod.ARS }, -]; \ No newline at end of file +]; + +export const getArsPaymentStatusName = (status?: string): string => { + if (!status) return ''; + const found = ArsPaymentStatusBtnGroup.find(item => item.value === status); + return found ? found.name : status; +} + +export const getArsOrderStatusName = (status?: string): string => { + if (!status) return ''; + const found = ArsOrderStatusBtnGroup.find(item => item.value === status); + return found ? found.name : status; +} \ No newline at end of file diff --git a/src/entities/additional-service/model/ars/types.ts b/src/entities/additional-service/model/ars/types.ts index 1250a4f..f064c1f 100644 --- a/src/entities/additional-service/model/ars/types.ts +++ b/src/entities/additional-service/model/ars/types.ts @@ -4,12 +4,12 @@ import { } from '@/entities/common/model/types'; export enum PaymentStatus { - ALL = 'ALL', + ALL = '', COMPLETE = 'COMPLETE', UNPAID = 'UNPAID' }; export enum OrderStatus { - ALL = 'ALL', + ALL = '', PENDING = 'PENDING', SUCCESS = 'SUCCESS', EXPIRED = 'EXPIRED', @@ -39,8 +39,8 @@ export interface ArsListContent { tid?: string; paymentDate?: string; paymentStatus?: PaymentStatus | string; - orderStatus?: string; - arsPaymentMethod?: ArsPaymentMethod; + orderStatus?: OrderStatus; + arsPaymentMethod?: string; amount?: number; }; export interface ExtensionArsListResponse extends DefaulResponsePagination { @@ -64,7 +64,7 @@ export interface ExtensionArsDetailParams { export interface ExtensionArsDetailResponse { corpName: string; mid: string; - arsPaymentMethod: ArsPaymentMethod; + arsPaymentMethod: string; paymentStatus: PaymentStatus; orderStatus: string; paymentDate: string; @@ -85,6 +85,6 @@ export interface ExtensionArsApplyParams { buyerName: string; phoneNumber: string; email: string; - arsPaymentMethod: ArsPaymentMethod; + arsPaymentMethod: string; }; export interface ExtensionArsApplyResponse {}; \ No newline at end of file diff --git a/src/entities/additional-service/model/key-in/constant.ts b/src/entities/additional-service/model/key-in/constant.ts index 7cb52b2..abb08437 100644 --- a/src/entities/additional-service/model/key-in/constant.ts +++ b/src/entities/additional-service/model/key-in/constant.ts @@ -1,9 +1,15 @@ import { KeyInPaymentPaymentStatus } from "./types"; // contant로 옮기기 -export const requestStatusBtnGroup = [ +export const keyInPaymentPaymentStatusBtnGroup = [ { name: '전체', value: KeyInPaymentPaymentStatus.ALL }, { name: '승인', value: KeyInPaymentPaymentStatus.APPROVAL }, { name: '전취소', value: KeyInPaymentPaymentStatus.PRE_CANCEL }, { name: '후취소', value: KeyInPaymentPaymentStatus.POST_CANCEL } -]; \ No newline at end of file +]; + +export const getKeyInPaymentPaymentStatusName = (status?: string): string => { + if (!status) return ''; + const found = keyInPaymentPaymentStatusBtnGroup.find(item => item.value === status); + return found ? found.name : status; +} \ No newline at end of file diff --git a/src/entities/additional-service/model/sms-payment/constant.ts b/src/entities/additional-service/model/sms-payment/constant.ts index e69de29..16fe94a 100644 --- a/src/entities/additional-service/model/sms-payment/constant.ts +++ b/src/entities/additional-service/model/sms-payment/constant.ts @@ -0,0 +1,13 @@ +import { SmsCl } from './types'; + +export const SmsClBtnGroup = [ + { name: '', value: SmsCl.ALL }, + { name: '가상계좌 요청', value: SmsCl.VACCOUNT_REQ }, + { name: '가상계좌 요청 + 입금', value: SmsCl.VACCOUNT_REQ_DEPOSIT } +]; + +export const getSmsClName = (smsCl?: string): string => { + if (!smsCl) return ''; + const found = SmsClBtnGroup.find(item => item.value === smsCl); + return found ? found.name : smsCl; +}; diff --git a/src/entities/additional-service/model/sms-payment/types.ts b/src/entities/additional-service/model/sms-payment/types.ts index 8fa6ae0..7875cd2 100644 --- a/src/entities/additional-service/model/sms-payment/types.ts +++ b/src/entities/additional-service/model/sms-payment/types.ts @@ -1,73 +1,75 @@ import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types'; -import { ExtensionRequestParams, FilterProps, ListItemProps } from '../types'; +import { AdditionalServiceCategory, ExtensionRequestParams, FilterProps, ListItemProps } from '../types'; -export enum SmsType { - ALL = "ALL", - VACCOUNT_REQ = "VACCOUNT_REQ", - VACCOUNT_REQ_DEPOSIT = "VACCOUNT_REQ_DEPOSIT" +export enum SmsCl { + ALL = "", + VACCOUNT_REQ = "VACCOUNT_REQ", + VACCOUNT_REQ_DEPOSIT = "VACCOUNT_REQ_DEPOSIT" } -export enum SmsPaymentSearchType { - BUYER_NAME = "BUYER_NAME", - RECEIVE_PHONE_NUMBER = "RECEIVE_PHONE_NUMBER" +export enum SmsPaymentSearchCl { + BUYER_NAME = "BUYER_NAME", + RECEIVE_PHONE_NUMBER = "RECEIVE_PHONE_NUMBER" } export interface SmsPaymentListItem { - mid?: string; - tid?: string; - paymentDate?: string; - paymentStatus?: string; - smsCl?: string; + mid?: string; + tid?: string; + paymentDate?: string; + paymentStatus?: string; + smsCl?: string; } export interface SmsPaymentListProps { - listItems: Record>; - mid: string; - onResendClick?: (mid: string, tid: string) => void; + listItems: Array; + additionalServiceCategory: AdditionalServiceCategory; + mid: string; + onResendClick?: (mid: string, tid: string) => void; + setTarget: (element: HTMLElement | null) => void; } export interface SmsPaymentFilterProps extends FilterProps { - mid: string; - searchCl: SmsPaymentSearchType; - searchValue: string; - fromDate: string; - toDate: string; - smsCl: SmsType; - setMid: (mid: string) => void; - setSearchCl: (searchCl: SmsPaymentSearchType) => void; - setSearchValue: (searchValue: string) => void; - setFromDate: (fromDate: string) => void; - setToDate: (toDate: string) => void; - setSmsCl: (smsCl: SmsType) => void; + mid: string; + searchCl: SmsPaymentSearchCl; + searchValue: string; + fromDate: string; + toDate: string; + smsCl: SmsCl; + setMid: (mid: string) => void; + setSearchCl: (searchCl: SmsPaymentSearchCl) => void; + setSearchValue: (searchValue: string) => void; + setFromDate: (fromDate: string) => void; + setToDate: (toDate: string) => void; + setSmsCl: (smsCl: SmsCl) => void; } export interface ExtensionSmsPaymentListParams extends ExtensionRequestParams { - searchCl: SmsPaymentSearchType; - searchValue: string; - fromDate: string; - toDate: string; - smsCl: string; - page?: DefaultRequestPagination; + searchCl: SmsPaymentSearchCl; + searchValue: string; + fromDate: string; + toDate: string; + smsCl: SmsCl; + page?: DefaultRequestPagination; } export interface ExtensionSmsPaymentListResponse extends DefaulResponsePagination { - content: Array + content: Array } export interface ExtensionSmsDownloadExcelResponse { - status: boolean; + status: boolean; } export interface ExtensionSmsDetailResponse { - senderNumber: string; - senderName: string; - receiverNumber: string; - receiverName: string; - sendMessage: string; + senderNumber: string; + senderName: string; + receiverNumber: string; + receiverName: string; + sendMessage: string; } export interface ExtensionSmsResendParams extends ExtensionRequestParams { - tid: string; + tid: string; } @@ -86,7 +88,7 @@ export interface ExtensionSmsResendParams extends ExtensionRequestParams { } export interface ExtensionSmsResendResponse { - status: boolean; + status: boolean; } export interface ExtensionSmsListParams extends ExtensionRequestParams { diff --git a/src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx b/src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx index 8db3de1..7dab6fc 100644 --- a/src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx +++ b/src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx @@ -2,24 +2,53 @@ import { PATHS } from '@/shared/constants/paths'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { ListDateGroup } from '../list-date-group'; import { AdditionalServiceCategory } from '../../model/types' -import { AccountHolderSearchListProps } from '../../model/account-holder-search/types'; +import { AccountHolderSearchListItem, AccountHolderSearchListProps } from '../../model/account-holder-search/types'; +import { JSX } from 'react'; export const AccountHolderSearchList = ({ listItems, - mid + mid, + setTarget }: AccountHolderSearchListProps) => { const { navigate } = useNavigate(); const getListDateGroup = () => { - let rs = []; - for (const [key, value] of Object.entries(listItems)) { + let rs: JSX.Element[] = []; + let date = ''; + let list: AccountHolderSearchListItem[] = []; + for (let i = 0; i < listItems.length; i++) { + // requestDate format: "20211018140420" (YYYYMMDDHHmmss) + let requestDate = listItems[i]?.requestDate || ''; + let itemDate = requestDate.substring(0, 8); + if (i === 0) { + date = itemDate; + } + if (date !== itemDate) { + // 날짜가 바뀌면 이전 리스트를 푸시 (날짜 업데이트 전에!) + if (list.length > 0) { + rs.push( + + ); + } + date = itemDate; // 그 다음에 날짜 업데이트 + list = []; + } + list.push(listItems[i] as any); + } + if (list.length > 0) { rs.push( ); } @@ -32,14 +61,15 @@ export const AccountHolderSearchList = ({ return ( <> -
+
{getListDateGroup()} -
- -
+
+
+
+
); 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 1659703..44718e3 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 @@ -158,7 +158,6 @@ export const FundAccountResultListWrap = () => { const onClickToSort = (sort: SortTypeKeys) => { setSortType(sort); - setListItems([]); // 리스트 초기화 callList({ sortType: sort, resetPage: true @@ -166,7 +165,6 @@ export const FundAccountResultListWrap = () => { }; const onClickToStatus = (val: FundAccountResultStatus) => { setResultStatus(val); - setListItems([]); // 리스트 초기화 callList({ resultStatus: val, resetPage: true @@ -222,8 +220,6 @@ export const FundAccountResultListWrap = () => { useEffect(() => { // 필터 조건이 변경되면 첫 페이지부터 다시 시작 - setListItems([]); - setNextCursor(null); callList({ resetPage: true }); }, [ mid, diff --git a/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx b/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx index 00fe46e..13c872f 100644 --- a/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx +++ b/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx @@ -99,7 +99,6 @@ export const FundAccountTransferListWrap = () => { }; extensionFundAccountTransferList(listSummaryParams).then((rs: any) => { - // resetPage면 기존 리스트 무시, 아니면 추가 setListItems(option?.resetPage ? rs.content : [ ...listItems, ...rs.content @@ -152,12 +151,14 @@ export const FundAccountTransferListWrap = () => { const onClickToSort = (sort: SortTypeKeys) => { setSortType(sort); - setListItems([]); // 리스트 초기화 - callList({ sortType: sort, resetPage: true }); + callList({ + sortType: sort, + resetPage: true + }); }; + const onClickToStatus = (val: FundAccountStatus) => { setStatus(val); - setListItems([]); // 리스트 초기화 callList({ status: val, resetPage: true @@ -208,8 +209,6 @@ export const FundAccountTransferListWrap = () => { useEffect(() => { // 필터 조건이 변경되면 첫 페이지부터 다시 시작 - setListItems([]); - setNextCursor(null); callList({ resetPage: true }); }, [ mid, diff --git a/src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx b/src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx index e6c8262..1d3ff8e 100644 --- a/src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx +++ b/src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx @@ -1,16 +1,15 @@ import moment from 'moment'; -import { useEffect } from 'react'; import { useState } from 'react'; import { motion } from 'framer-motion'; import { IMAGE_ROOT } from '@/shared/constants/common'; import { FilterSelect } from '@/shared/ui/filter/select'; -import { FilterSelectInput } from '@/shared/ui/filter/select-input'; import { FilterCalendar } from '@/shared/ui/filter/calendar'; import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; import { FilterRangeAmount } from '@/shared/ui/filter/range-amount'; import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant'; import { useStore } from '@/shared/model/store'; import { KeyInPaymentFilterProps, KeyInPaymentPaymentStatus } from '@/entities/additional-service/model/key-in/types'; +import { keyInPaymentPaymentStatusBtnGroup } from '@/entities/additional-service/model/key-in/constant'; export const KeyInPaymentFilter = ({ filterOn, @@ -42,10 +41,6 @@ export const KeyInPaymentFilter = ({ setFilterOn(false); }; - const setNewDate = (newDate: any) => { - console.log(newDate) - }; - const onClickToSetFilter = () => { setMid(filterMid); setStartDate(filterStartDate); @@ -55,13 +50,6 @@ export const KeyInPaymentFilter = ({ setMaxAmount(filterMaxAmount); onClickToClose(); }; - - let transactionStatusOption = [ - { name: '전체', value: KeyInPaymentPaymentStatus.ALL }, - { name: '승인', value: KeyInPaymentPaymentStatus.APPROVAL }, - { name: '전취소', value: KeyInPaymentPaymentStatus.PRE_CANCEL }, - { name: '후취소', value: KeyInPaymentPaymentStatus.POST_CANCEL }, - ]; return ( <> @@ -94,7 +82,7 @@ export const KeyInPaymentFilter = ({ diff --git a/src/entities/additional-service/ui/list-item.tsx b/src/entities/additional-service/ui/list-item.tsx index ec156d1..30965dc 100644 --- a/src/entities/additional-service/ui/list-item.tsx +++ b/src/entities/additional-service/ui/list-item.tsx @@ -6,6 +6,9 @@ import { getPaymentStatusText, getProcessStatusText, getSendMethodText } from '. import { getFundAccountResultStatusName, getFundAccountStatusName } from '../model/fund-account/constant'; import moment from 'moment'; import { FundAccountResultStatus } from '../model/fund-account/types'; +import { getSmsClName } from '../model/sms-payment/constant'; +import { getKeyInPaymentPaymentStatusName } from '../model/key-in/constant'; +import { getArsPaymentStatusName, getArsOrderStatusName } from '../model/ars/constant'; export const ListItem = ({ additionalServiceCategory, @@ -291,6 +294,16 @@ export const ListItem = ({ else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) { statusText = status || ''; } + else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) { + console.log(smsCl) + statusText = getSmsClName(smsCl); + } + else if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) { + statusText = getKeyInPaymentPaymentStatusName(paymentStatus) + } + else if (additionalServiceCategory === AdditionalServiceCategory.Ars) { + statusText = getArsPaymentStatusName(paymentStatus) + } else { statusText = resultStatus || status || ''; } @@ -348,7 +361,7 @@ export const ListItem = ({
{getTime()} | - {paymentStatus} + {getStatus()}
); } @@ -451,9 +464,9 @@ export const ListItem = ({
{getTime()} | - {paymentStatus} + {getStatus()} | - {orderStatus} + {getArsOrderStatusName(orderStatus)} | {arsPaymentMethod}
@@ -475,7 +488,7 @@ export const ListItem = ({
{mid} | - {smsCl} + {getStatus()}
) } diff --git a/src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx b/src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx index 9c24305..901bbfb 100644 --- a/src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx +++ b/src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx @@ -7,7 +7,7 @@ import { FilterSelectInput } from '@/shared/ui/filter/select-input'; import { FilterDateOptions } from '@/entities/common/model/types'; import { FilterCalendar } from '@/shared/ui/filter/calendar'; import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; -import { SmsPaymentFilterProps, SmsPaymentSearchType, SmsType } from '../../model/sms-payment/types'; +import { SmsPaymentFilterProps, SmsPaymentSearchCl, SmsCl } from '../../model/sms-payment/types'; import { useStore } from '@/shared/model/store'; import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant'; export const SmsPaymentFilter = ({ @@ -28,11 +28,11 @@ export const SmsPaymentFilter = ({ }: SmsPaymentFilterProps) => { const [filterMid, setFilterMid] = useState(mid); - const [filterSearchCl, setFilterSearchCl] = useState(searchCl); + const [filterSearchCl, setFilterSearchCl] = useState(searchCl); const [filterSearchValue, setFilterSearchValue] = useState(searchValue); const [filterFromDate, setFilterFromDate] = useState(moment(fromDate).format('YYYY.MM.DD')); const [filterToDate, setFilterToDate] = useState(moment(toDate).format('YYYY.MM.DD')); - const [filterSmsCl, setFilterSmsCl] = useState(smsCl); + const [filterSmsCl, setFilterSmsCl] = useState(smsCl); const midOptions = useStore.getState().UserStore.selectOptionsMids; @@ -52,14 +52,14 @@ export const SmsPaymentFilter = ({ ]; let searchTypeOption = [ - { name: '주문자', value: SmsPaymentSearchType.BUYER_NAME }, - { name: '수신번호', value: SmsPaymentSearchType.RECEIVE_PHONE_NUMBER }, + { name: '주문자', value: SmsPaymentSearchCl.BUYER_NAME }, + { name: '수신번호', value: SmsPaymentSearchCl.RECEIVE_PHONE_NUMBER }, ] let smsTypeOption = [ - { name: '전체', value: SmsType.ALL }, - { name: '가상계좌\n요청', value: SmsType.VACCOUNT_REQ }, - { name: '가상계좌\n요청+입금', value: SmsType.VACCOUNT_REQ_DEPOSIT }, + { name: '전체', value: SmsCl.ALL }, + { name: '가상계좌\n요청', value: SmsCl.VACCOUNT_REQ }, + { name: '가상계좌\n요청+입금', value: SmsCl.VACCOUNT_REQ_DEPOSIT }, ] const onClickToClose = () => { diff --git a/src/entities/additional-service/ui/sms-payment/sms-payment-list.tsx b/src/entities/additional-service/ui/sms-payment/sms-payment-list.tsx index b956e85..cc8434d 100644 --- a/src/entities/additional-service/ui/sms-payment/sms-payment-list.tsx +++ b/src/entities/additional-service/ui/sms-payment/sms-payment-list.tsx @@ -1,35 +1,64 @@ -import { SmsPaymentListProps } from '../../model/sms-payment/types'; +import { SmsPaymentListItem, SmsPaymentListProps } from '../../model/sms-payment/types'; import { AdditionalServiceCategory } from '../../model/types'; import { ListDateGroup } from '../list-date-group'; export const SmsPaymentList = ({ listItems, + additionalServiceCategory, mid, - onResendClick + onResendClick, + setTarget }: SmsPaymentListProps) => { const getListDateGroup = () => { let rs = []; - for (const [key, value] of Object.entries(listItems)) { + let date = ''; + let list: SmsPaymentListItem[] = []; + for (let i = 0; i < listItems.length; i++) { + 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( + + ); + } + list = []; + } + list.push(listItems[i] as any); + } + if (list.length > 0) { rs.push( - ) + ); } return rs; }; return ( <> -
+
{getListDateGroup()} -
+
+ ) } \ No newline at end of file diff --git a/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx b/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx index c9e80bc..d184ada 100644 --- a/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx +++ b/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx @@ -3,9 +3,9 @@ import { PATHS } from '@/shared/constants/paths'; import { useEffect, useState } from 'react'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { IMAGE_ROOT } from '@/shared/constants/common'; -import { HeaderType } from '@/entities/common/model/types'; +import { DefaultRequestPagination, HeaderType } from '@/entities/common/model/types'; import { AccountHolderSearchFilter } from '@/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter'; -import { ProcessResult} from '@/entities/additional-service/model/types'; +import { ProcessResult } from '@/entities/additional-service/model/types'; import { useSetHeaderTitle, useSetHeaderType, @@ -21,20 +21,43 @@ import { AccountHolderSearchList } from '@/entities/additional-service/ui/accoun import { useStore } from '@/shared/model/store'; import { AccountHolderSearchListItem, AccountHolderSearchType } from '@/entities/additional-service/model/account-holder-search/types'; import { resultStatusBtnGroup } from '@/entities/additional-service/model/account-holder-search/constant'; +import useIntersectionObserver from '@/widgets/intersection-observer'; export const AccountHolderSearchPage = () => { 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 [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); + const [listItems, setListItems] = useState>([]); + const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); + const [nextCursor, setNextCursor] = useState(null); const [filterOn, setFilterOn] = useState(false); const [mid, setMid] = useState(userMid); - const [searchType, setSearchType] = useState(AccountHolderSearchType.ACCOUNT_NO) + const [searchType, setSearchType] = useState(AccountHolderSearchType.ACCOUNT_NAME) const [searchKeyword, setSearchKeyword] = useState(''); - const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD')); - const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD')); + const [startDate, setStartDate] = useState(moment().format('YYYYMMDD')); + const [endDate, setEndDate] = useState(moment().format('YYYYMMDD')); const [bank, setBank] = useState(''); const [processResult, setProcessResult] = useState(ProcessResult.ALL); @@ -50,10 +73,17 @@ export const AccountHolderSearchPage = () => { const callList = (option?: { sortType?: SortTypeKeys, - val?: string + processResult?: ProcessResult, + 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 listParams = { mid: mid, searchCl: searchType, @@ -61,34 +91,31 @@ export const AccountHolderSearchPage = () => { fromDate: startDate, toDate: endDate, bankCode: bank, - resultStatus: processResult, - page: pageParam + resultStatus: option?.processResult ?? processResult, + ... { + page: currentPageParam + } } accountHolderSearchList(listParams).then((rs) => { - setListItems(assembleData(rs.content)); + setListItems(option?.resetPage ? rs.content : [ + ...listItems, + ...rs.content + ]); + if (rs.hasNext) { + setNextCursor(rs.nextCursor); + setPageParam({ + ...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 requestDate = content[i]?.requestDate?.substring(0, 8); - let groupDate = moment(requestDate).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); }; @@ -110,20 +137,31 @@ export const AccountHolderSearchPage = () => { const onClickToSort = (sort: SortTypeKeys) => { setSortType(sort); callList({ - sortType: sort + sortType: sort, + resetPage: true }); }; const onClickToTransactionStatus = (val: ProcessResult) => { setProcessResult(val); callList({ - val: val + processResult: val, + resetPage: true }); }; useEffect(() => { - callList(); - }, []); + // 필터 조건이 변경되면 첫 페이지부터 다시 시작 + callList({ resetPage: true }); + }, [ + mid, + searchType, + searchKeyword, + startDate, + endDate, + bank, + processResult + ]); return ( <> @@ -164,8 +202,8 @@ export const AccountHolderSearchPage = () => {
@@ -184,6 +222,7 @@ export const AccountHolderSearchPage = () => {
diff --git a/src/pages/additional-service/ars/detail-page.tsx b/src/pages/additional-service/ars/detail-page.tsx index 7aa60f6..5621adb 100644 --- a/src/pages/additional-service/ars/detail-page.tsx +++ b/src/pages/additional-service/ars/detail-page.tsx @@ -15,11 +15,14 @@ import { ExtensionArsDetailParams, ExtensionArsDetailResponse, ExtensionArsResendParams, - ExtensionArsResendResponse + ExtensionArsResendResponse, + ArsPaymentMethod, + OrderStatus } from '@/entities/additional-service/model/ars/types'; import moment from 'moment'; import { ArsResendSmsBottomSheet } from '@/entities/additional-service/ui/ars/resend-sms-bottom-sheet'; import { useExtensionArsResendMutation } from '@/entities/additional-service/api/ars/use-extension-ars-resend-mutation'; +import { getArsOrderStatusName, getArsPaymentStatusName } from '@/entities/additional-service/model/ars/constant'; export const ArsDetailPage = () => { const { navigate } = useNavigate(); @@ -107,15 +110,17 @@ export const ArsDetailPage = () => {
  • 결제상태 - { detail?.paymentStatus } + { getArsPaymentStatusName(detail?.paymentStatus) }
  • 주문상태 - { detail?.orderStatus } + { getArsOrderStatusName(detail?.orderStatus) }
  • 주문일시 - { getDate(detail?.paymentDate) } + { + detail?.paymentDate ? moment(detail.paymentDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : '-' + }
  • 상품명 @@ -143,12 +148,15 @@ export const ArsDetailPage = () => {
    • -
    - -
    + {detail?.arsPaymentMethod === ArsPaymentMethod.SMS && ( +
    + +
    + )}
    diff --git a/src/pages/additional-service/ars/list-page.tsx b/src/pages/additional-service/ars/list-page.tsx index 10d2c35..36adde8 100644 --- a/src/pages/additional-service/ars/list-page.tsx +++ b/src/pages/additional-service/ars/list-page.tsx @@ -1,14 +1,14 @@ import { PATHS } from '@/shared/constants/paths'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { IMAGE_ROOT } from '@/shared/constants/common'; -import { HeaderType, SortTypeKeys } from '@/entities/common/model/types'; -import { +import { DefaultRequestPagination, HeaderType, SortTypeKeys } from '@/entities/common/model/types'; +import { useSetHeaderTitle, useSetHeaderType, useSetFooterMode, useSetOnBack } from '@/widgets/sub-layout/use-sub-layout'; -import { useEffect, useState } from 'react'; +import { JSX, useEffect, useState } from 'react'; import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant'; import { ArsListContent, ExtensionArsDownloadExcelParams, ExtensionArsDownloadExcelResponse, ExtensionArsListParams, ExtensionArsListResponse, OrderStatus, PaymentStatus } from '@/entities/additional-service/model/ars/types'; import { useExtensionArsListMutation } from '@/entities/additional-service/api/ars/use-extension-ars-list-mutation'; @@ -20,15 +20,38 @@ import { SortTypeBox } from '@/entities/common/ui/sort-type-box'; import { ArsPaymentStatusBtnGroup } from '@/entities/additional-service/model/ars/constant'; import { ArsFilter } from '@/entities/additional-service/ui/filter/ars-filter'; import { useStore } from '@/shared/model/store'; +import useIntersectionObserver from '@/widgets/intersection-observer'; export const ArsListPage = () => { 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 [listItems, setListItems] = useState>([]); const [filterOn, setFilterOn] = useState(false); - const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); + const [nextCursor, setNextCursor] = useState(null); + const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); const [mid, setMid] = useState(userMid); const [moid, setMoid] = useState(''); const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD')); @@ -49,25 +72,46 @@ export const ArsListPage = () => { }); const callList = (option?: { - sortType?: SortTypeKeys, - val?: string + sortType?: SortTypeKeys, + paymentStatus?: PaymentStatus, + 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 params: ExtensionArsListParams = { mid: mid, moid: moid, fromDate: fromDate, toDate: toDate, - paymentStatus: paymentStatus, + paymentStatus: option?.paymentStatus ?? paymentStatus, orderStatus: orderStatus, minAmount: minAmount, maxAmount: maxAmount, - page: pageParam + page: currentPageParam }; extensionArsList(params).then((rs: ExtensionArsListResponse) => { - setListItems(assembleData(rs.content)); + // resetPage면 기존 리스트 무시, 아니면 추가 + setListItems(option?.resetPage ? rs.content : [ + ...listItems, + ...rs.content + ]); + if (rs.hasNext) { + setNextCursor(rs.nextCursor); + setPageParam({ + ...currentPageParam, + cursor: rs.nextCursor + }); + setOnActionIntersect(true) + } + else { + setNextCursor(null); + } }); }; @@ -87,23 +131,6 @@ export const ArsListPage = () => { }); }; - const assembleData = (content: Array) => { - let data: any = {}; - if(content && content.length > 0){ - for(let i=0;i { navigate(PATHS.additionalService.ars.request, { state: { mid } @@ -119,34 +146,71 @@ export const ArsListPage = () => { const onClickToSort = (sort: SortTypeKeys) => { setSortType(sort); callList({ - sortType: sort + sortType: sort, + resetPage: true }); }; const onClickToPaymentStatus = (val: PaymentStatus) => { setPaymentStatus(val); callList({ - val: val + paymentStatus: val, + resetPage: true }); }; useEffect(() => { - callList(); - }, []); + // 필터 조건이 변경되면 첫 페이지부터 다시 시작 + callList({ resetPage: true }); + }, [ + mid, + moid, + fromDate, + toDate, + paymentStatus, + orderStatus, + minAmount, + maxAmount + ]); - const getArsList = () => { - let rs = []; - if(Object.keys(listItems).length > 0){ - for (const [key, value] of Object.entries(listItems)) { - rs.push( - - ); + const getListDateGroup = () => { + let rs: JSX.Element[] = []; + let date = ''; + let list: ArsListContent[] = []; + 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) { + // 날짜가 바뀌면 이전 리스트를 푸시 (날짜 업데이트 전에!) + if (list.length > 0) { + rs.push( + + ); + } + date = itemDate; // 그 다음에 날짜 업데이트 + list = []; + } + list.push(listItems[i] as any); + } + if (list.length > 0) { + rs.push( + + ); } return rs; } @@ -210,14 +274,15 @@ export const ArsListPage = () => {
    - { getArsList() } -
    - -
    + { getListDateGroup() } +
    +
    + +
    diff --git a/src/pages/additional-service/ars/request-page.tsx b/src/pages/additional-service/ars/request-page.tsx index 1bfb31f..d40f97c 100644 --- a/src/pages/additional-service/ars/request-page.tsx +++ b/src/pages/additional-service/ars/request-page.tsx @@ -12,6 +12,7 @@ import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout'; import { ArsPaymentMethod, ExtensionArsApplyParams } from '@/entities/additional-service/model/ars/types'; +import { ArsRequestSuccessPage } from './request-success-page'; export const ArsRequestPage = () => { const { navigate } = useNavigate(); @@ -30,6 +31,8 @@ export const ArsRequestPage = () => { const [phoneNumber, setPhoneNumber] = useState(''); const [email, setEamil] = useState(''); const [arsPaymentMethod, setArsPaymentMethod] = useState(ArsPaymentMethod.SMS); + const [successPageOn, setSuccessPageOn] = useState(false); + const [resultMessage, setResultMessage] = useState(''); useSetHeaderTitle('결제 신청'); useSetHeaderType(HeaderType.LeftArrow); @@ -51,8 +54,9 @@ export const ArsRequestPage = () => { arsPaymentMethod: arsPaymentMethod, }; arsApply(arsApplyParams).then((rs) => { - navigate(PATHS.additionalService.ars.requestSuccess); console.log(rs) + setResultMessage('결제 신청이 완료되었습니다'); + setSuccessPageOn(true); }).catch(() => { }).finally(() => { @@ -227,6 +231,12 @@ export const ArsRequestPage = () => { + + ); }; \ No newline at end of file diff --git a/src/pages/additional-service/ars/request-success-page.tsx b/src/pages/additional-service/ars/request-success-page.tsx index 86baa94..2c680fe 100644 --- a/src/pages/additional-service/ars/request-success-page.tsx +++ b/src/pages/additional-service/ars/request-success-page.tsx @@ -1,43 +1,66 @@ -import { PATHS } from '@/shared/constants/paths'; +import { motion } from 'framer-motion'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; -import { HeaderType } from '@/entities/common/model/types'; -import { - useSetHeaderType, - useSetFooterMode, -} from '@/widgets/sub-layout/use-sub-layout'; -export const ArsRequestSuccessPage = () => { +import { PATHS } from '@/shared/constants/paths'; +import { + FilterMotionDuration, + FilterMotionStyle, + FilterMotionVariants +} from '@/entities/common/model/constant'; + +export interface ArsRequestSuccessPageProps { + pageOn: boolean; + setPageOn: (pageOn: boolean) => void; + resultMessage?: string; +} + +export const ArsRequestSuccessPage = ({ + pageOn, + setPageOn, + resultMessage +}: ArsRequestSuccessPageProps) => { const { navigate } = useNavigate(); - useSetHeaderType(HeaderType.NoHeader); - useSetFooterMode(false); - - const onClickToNavigate = () => { + const onClickToClose = () => { + setPageOn(false); navigate(PATHS.additionalService.ars.list); }; return ( <> -
    -
    - -

    - 신용카드 ARS
    - 결제 신청이 완료되었습니다. -

    -
    -

    결과 : [0000] ARS 요청 처리 완료

    + +
    +
    +
    + +

    + ARS 결제 신청 +

    +
    +

    + 결과 : + {resultMessage || '결제 신청이 완료되었습니다'} +

    +
    +
    +
    + +
    -
    - -
    -
    + ); }; \ No newline at end of file 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 2de1fb8..99beda5 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 @@ -20,7 +20,7 @@ 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, KeyInPaymentPaymentStatus } from '@/entities/additional-service/model/key-in/types'; -import { requestStatusBtnGroup } from '@/entities/additional-service/model/key-in/constant'; +import { keyInPaymentPaymentStatusBtnGroup } from '@/entities/additional-service/model/key-in/constant'; import useIntersectionObserver from '@/widgets/intersection-observer'; export const KeyInPaymentPage = () => { @@ -148,7 +148,6 @@ export const KeyInPaymentPage = () => { const onClickToSort = (sort: SortTypeKeys) => { setSortType(sort); - setListItems([]); callList({ sortType: sort, resetPage: true @@ -157,7 +156,6 @@ export const KeyInPaymentPage = () => { const onClickToPaymentStatus = (val: KeyInPaymentPaymentStatus) => { setPaymentStatus(val); - setListItems([]); callList({ status: val, resetPage: true @@ -165,8 +163,15 @@ export const KeyInPaymentPage = () => { }; useEffect(() => { - callList(); - }, []); + callList({resetPage: true}); + }, [ + mid, + startDate, + endDate, + paymentStatus, + minAmount, + maxAmount + ]); return ( <> @@ -214,7 +219,7 @@ export const KeyInPaymentPage = () => {
    { - requestStatusBtnGroup.map((value, index) => ( + keyInPaymentPaymentStatusBtnGroup.map((value, index) => ( { const { navigate } = useNavigate(); const userMid = useStore.getState().UserStore.mid; + 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 [bottomSmsPaymentDetailResendOn, setBottomSmsPaymentDetailResendOn] = useState(false) const [sortType, setSortType] = useState(SortTypeKeys.LATEST); - const [listItems, setListItems] = useState({}); - const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); + const [listItems, setListItems] = useState>([]); + const [nextCursor, setNextCursor] = useState(null); + const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); const [filterOn, setFilterOn] = useState(false); const [mid, setMid] = useState(userMid); const [selectedTid, setSelectedTid] = useState(''); const [selectedMid, setSelectedMid] = useState(''); - const [searchCl, setSearchCl] = useState(SmsPaymentSearchType.BUYER_NAME) + const [searchCl, setSearchCl] = useState(SmsPaymentSearchCl.BUYER_NAME) const [searchValue, setSearchValue] = useState('') - const [fromDate, setFromDate] = useState(moment().format('YYYY-MM-DD')); - const [toDate, setToDate] = useState(moment().format('YYYY-MM-DD')); - const [smsCl, setSmsCl] = useState(SmsType.ALL); + const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD')); + const [toDate, setToDate] = useState(moment().format('YYYYMMDD')); + const [smsCl, setSmsCl] = useState(SmsCl.ALL); const [smsDetailData, setSmsDetailData] = useState(null); const { mutateAsync: smsPaymentList } = useExtensionSmsListMutation(); @@ -46,46 +71,48 @@ export const SmsPaymentPage = () => { useSetHeaderTitle('SMS 결제 통보'); useSetHeaderType(HeaderType.LeftArrow); useSetFooterMode(false); - + useSetOnBack(() => { + navigate(PATHS.home); + }); const callList = (option?: { sortType?: SortTypeKeys, - val?: string + resetPage?: boolean }) => { - 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 }; - let listParams = { + setPageParam(currentPageParam); + + let listParams: ExtensionSmsPaymentListParams = { mid: mid, searchCl: searchCl, searchValue: searchValue, fromDate: fromDate, toDate: toDate, - smsCl: (smsCl === SmsType.ALL)? '' :smsCl, - page: pageParam + smsCl: smsCl, + ... { + page: currentPageParam + } } smsPaymentList(listParams).then((rs) => { - setListItems(assembleData(rs.content)); - }) - } - - const assembleData = (content: Array) => { - 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]); - } + setListItems(option?.resetPage ? rs.content : [ + ...listItems, + ...rs.content + ]); + if (rs.hasNext) { + setNextCursor(rs.nextCursor); + setPageParam({ + ...currentPageParam, + cursor: rs.nextCursor + }); + setOnActionIntersect(true) + } else { + setNextCursor(null); } - } - console.log('Data : ', data); - return data; - }; + }); + } const callDetail = (selectedMid: string, selectedTid: string) => { console.log('Selected Mid: ', selectedMid, 'Selected Tid: ', selectedTid); @@ -93,7 +120,6 @@ export const SmsPaymentPage = () => { mid: selectedMid, tid: selectedTid }).then((rs) => { - console.log('Detail info : ', rs); setSmsDetailData(rs); }) } @@ -105,7 +131,7 @@ export const SmsPaymentPage = () => { searchValue: searchValue, fromDate: fromDate, toDate: toDate, - smsCl: (smsCl === SmsType.ALL)? '': smsCl, + smsCl: smsCl, }).then((rs) => { console.log('Excel Dowload Status : ' + rs.status); }); @@ -124,8 +150,15 @@ export const SmsPaymentPage = () => { }; useEffect(() => { - callList(); - }, []); + callList({resetPage: true}); + }, [ + mid, + searchCl, + searchValue, + fromDate, + toDate, + smsCl + ]); return ( <> @@ -166,9 +199,11 @@ export const SmsPaymentPage = () => {