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

- KeyIn결제 page 수정

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 = [
+export const FundAccountSearchClOptionsGroup = [
-  { name: '수취인', value: FundAccountReceiveAccountNameNo.ReceiveAccountName },
+  { name: '수취인', value: FundAccountSearchCl.ACCOUNT_NAME },
-  { name: '계좌번호', value: FundAccountReceiveAccountNameNo.ReceiveAccountNo },
+  { name: '계좌번호', value: FundAccountSearchCl.ACCOUNT_NO },
 ];
 
 export const FundAccountReceiveBankCodeOptionsGroup = [

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

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

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

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

@@ -14,12 +14,25 @@ export interface LinkPaymentTabProps {
   activeTab: LinkPaymentTabKeys;
 }
 
-export enum LinkPaymentSearchType {
+export enum LinkPaymentSearchCl {
-  ALL = "ALL",
+  ALL = "",
-  PHONE = "PHONE",
+  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",
+  PAYMENT_COMPLETE = "PAYMENT_COMPLETE",
-  TRANSACTION_FAIL = "TRANSACTION_FAIL",
+  PAYMENT_FAIL = "PAYMENT_FAIL",
   INACTIVE = "INACTIVE"
 }
 
-export enum LinkPaymentSendingStatus {
+export enum LinkPaymentSendStatus {
   ALL = "ALL",
-  SEND_REQUEST = "SEND_REQUEST",
+  SUCCESS = "SUCCESS",
-  SEND_CANCEL = "SEND_CANCEL"
+  FAIL = "FAIL"
 }
 
 export enum LinkContentType {
@@ -79,39 +92,39 @@ export interface LinkPaymentWaitListProps {
 
 export interface LinkPaymentHistoryFilterProps extends FilterProps {
   mid: string;
-  searchType: LinkPaymentSearchType;
+  searchCl: LinkPaymentSearchCl;
-  searchKeyword: string;
+  searchValue: string;
-  startDate: string;
+  fromDate: string;
-  endDate: string;
+  toDate: string;
-  transactionStatus: LinkPaymentTransactionStatus;
+  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;
-}
+  }
 
 // 링크 결제 - 발송,대기 조회 확장 서비스
 // ========================================

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<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}
+              selectValue={filterSearchCl}
-              selectSetter={setFilterReceiveAccountNameNoSelectValue}
+              selectSetter={setFilterSearchCl}
-              selectOptions={FundAccountReceiveAccountNameNoOptionsGroup}
+              selectOptions={FundAccountSearchClOptionsGroup}
-              inputValue={filterReceiveAccountNameNoInputValue}
+              inputValue={filterSearchValue}
-              inputSetter={setFilterReceiveAccountNameNoInputValue}
+              inputSetter={setFilterSearchValue}
             ></FilterSelectInput>
             <FilterButtonGroups
               title='조회 기준'
@@ -161,7 +152,7 @@ export const FundAccountResultFilter = ({
             <FilterButtonGroups
               title='처리 결과'
               activeValue={filterResultStatus}
-              btnGroups={FundAccountStatusBtnGroup}
+              btnGroups={FundAccountResultStatusBtnGroup}
               setter={setFilterResultStatus}
             ></FilterButtonGroups>
           </div>

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

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<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;
+    const currentPageParam = option?.resetPage
-    setPageParam(pageParam);
+      ? { ...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

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

@@ -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;
+    setOnActionIntersect(false);
-    setPageParam(pageParam);
+
+    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",
+      fromDate: fromDate,
-      toDate: "20221231",
+      toDate: toDate,
       resultStatus: option?.status ?? status,
-      page: pageParam
+      ... {
+        page: currentPageParam
+      }
     };
 
     extensionFundAccountTransferList(listSummaryParams).then((rs: any) => {
-      const content = rs.content || [];
+      // resetPage면 기존 리스트 무시, 아니면 추가
-      setListItems(rs.content);
+      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

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

@@ -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: KeyInPaymentPaymentStatus.ALL },
-		{ name: '승인', value: KeyInPaymentTransactionStatus.APPROVAL },
+		{ name: '승인', value: KeyInPaymentPaymentStatus.APPROVAL },
-		{ name: '전취소', value: KeyInPaymentTransactionStatus.PRE_CANCEL },
+		{ name: '전취소', value: KeyInPaymentPaymentStatus.PRE_CANCEL },
-		{ name: '후취소', value: KeyInPaymentTransactionStatus.POST_CANCEL },
+		{ name: '후취소', value: KeyInPaymentPaymentStatus.POST_CANCEL },
 	];
 
 	return (

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

@@ -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 = [];
+    let rs: JSX.Element[] = [];
-    for (const [key, value] of Object.entries(listItems)) {
+    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}
+          mid={mid}
-          date={key}
+          key={date + '-last'}
-          items={value}
+          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">
+        <div ref={setTarget}></div>
-          <button
+      </section>
-            className="btn-50 btn-blue flex-1"
+      <div className="apply-row">
-            onClick={() => onClickToNavigate()}
+        <button
-          >결제 신청</button>
+          className="btn-50 btn-blue flex-1"
-        </div>
+          onClick={() => onClickToNavigate()}
+        >결제 신청</button>
       </div>
     </>
   );

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,
+	searchCl,
-	searchKeyword,
+	searchValue,
-	startDate,
+	fromDate,
-	endDate,
+	toDate,
-	transactionStatus,
+	paymentStatus,
 	processResult,
 	sendMethod,
 	setMid,
@@ -38,11 +38,11 @@ export const LinkPaymentHistoryFilter = ({
 
 
 	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 [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchValue);
-	const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
+	const [filterStartDate, setFilterStartDate] = useState<string>(fromDate);
-	const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
+	const [filterEndDate, setFilterEndDate] = useState<string>(toDate);
-	const [filterTransactionStatus, setFilterTransactionStatus] = useState<LinkPaymentTransactionStatus>(transactionStatus)
+	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: LinkPaymentSearchCl.PHONE },
-		{ name: '이메일', value: LinkPaymentSearchType.EMAIL },
+		{ name: '이메일', value: LinkPaymentSearchCl.EMAIL },
 	];
 
 	let transactionStatusOption = [
-		{ name: '전체', value: LinkPaymentTransactionStatus.ALL },
+		{ name: '전체', value: LinkPaymentPaymentStatus.ALL },
-		{ name: '미완료/활성화', value: LinkPaymentTransactionStatus.ACTIVATE },
+		{ name: '미완료/활성화', value: LinkPaymentPaymentStatus.ACTIVATE },
-		{ name: '입금요청', value: LinkPaymentTransactionStatus.DEPOSIT_REQUEST },
+		{ name: '입금요청', value: LinkPaymentPaymentStatus.DEPOSIT_REQUEST },
-		{ name: '결제완료', value: LinkPaymentTransactionStatus.TRANSACTION_COMPLETE },
+		{ name: '결제완료', value: LinkPaymentPaymentStatus.PAYMENT_COMPLETE },
-		{ name: '결제실패', value: LinkPaymentTransactionStatus.TRANSACTION_FAIL },
+		{ name: '결제실패', value: LinkPaymentPaymentStatus.PAYMENT_FAIL },
-		{ name: '결제중단/비활성화', value: LinkPaymentTransactionStatus.INACTIVE },
+		{ 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

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

@@ -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: LinkPaymentSearchCl.PHONE },
-		{ name: '이메일', value: LinkPaymentSearchType.EMAIL },
+		{ name: '이메일', value: LinkPaymentSearchCl.EMAIL },
 	];
 
 	let sendMethodOption = [
@@ -78,9 +78,9 @@ export const LinkPaymentWaitSendFilter = ({
 	];
 
 	let sendingStatusOption = [
-		{ name: '전체', value: LinkPaymentSendingStatus.ALL },
+		{ name: '전체', value: LinkPaymentSendStatus.ALL },
-		{ name: '발송요청', value: LinkPaymentSendingStatus.SEND_REQUEST },
+		{ name: '발송요청', value: LinkPaymentSendStatus.SUCCESS },
-		{ name: '발송취소', value: LinkPaymentSendingStatus.SEND_CANCEL },
+		{ name: '발송취소', value: LinkPaymentSendStatus.FAIL },
 	];
 
 	return (
@@ -120,7 +120,7 @@ export const LinkPaymentWaitSendFilter = ({
 
 						<FilterSelectInput
 							title='휴대폰번호/이메일'
-							selectValue={searchType}
+							selectValue={searchCl}
 							selectSetter={setFilterSearchType}
 							selectOptions={searchTypeOption}
 							inputValue={searchKeyword}

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

@@ -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}
+				searchCl={searchCl}
-				searchKeyword={searchKeyword}
+				searchValue={searchKeyword}
-				startDate={startDate}
+				fromDate={startDate}
-				endDate={endDate}
+				toDate={endDate}
-				transactionStatus={transactionStatus}
+				paymentStatus={transactionStatus}
 				processResult={processResult}
 				sendMethod={sendMethod}
 				setMid={setMid}
-				setSearchType={setSearchType}
+				setSearchType={setSearchCl}
 				setSearchKeyword={setSearchKeyword}
 				setStartDate={setStartDate}
 				setEndDate={setEndDate}

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: LinkPaymentSendStatus.ALL },
-  { name: '발송요청', value: LinkPaymentSendingStatus.SEND_REQUEST },
+  { name: '발송요청', value: LinkPaymentSendStatus.SUCCESS },
-  { name: '발송취소', value: LinkPaymentSendingStatus.SEND_CANCEL }
+  { 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}

src/entities/additional-service/ui/list-item.tsx

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

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 &&

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';
+import { KeyInPaymentListItem, KeyInPaymentPaymentStatus } from '@/entities/additional-service/model/key-in/types';
-
+import { requestStatusBtnGroup } from '@/entities/additional-service/model/key-in/constant';
-// contant로 옮기기
+import useIntersectionObserver from '@/widgets/intersection-observer';
-const requestStatusBtnGroup = [
-  { name: '전체', value: KeyInPaymentTransactionStatus.ALL },
-  { name: '승인', value: KeyInPaymentTransactionStatus.APPROVAL },
-  { name: '전취소', value: KeyInPaymentTransactionStatus.PRE_CANCEL },
-  { name: '후취소', value: KeyInPaymentTransactionStatus.POST_CANCEL }
-];
 
 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;
+    setOnActionIntersect(false);
-    setPageParam(pageParam);
+
+    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) => {
+  const onClickToPaymentStatus = (val: KeyInPaymentPaymentStatus) => {
-    console.log('TransactionStatus Test: ', val);
+    setPaymentStatus(val);
-    setTransactionStatus(val);
+    setListItems([]);
     callList({
-      val: val 
+      status: val,
+      resetPage: true
     });
   };
 
@@ -190,8 +208,8 @@ export const KeyInPaymentPage = () => {
 
             <div className="filter-section">
               <SortTypeBox
-                sortType={ sortType }
+                sortType={sortType}
-                onClickToSort={ onClickToSort }
+                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' : ''}`}
+                        className={`keyword-tag ${(paymentStatus === value.value) ? 'active' : ''}`}
-                        onClick={() => onClickToTransactionStatus(value.value)}
+                        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>