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

- KeyIn결제 page 수정

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;
-    setPageParam(pageParam);
+    setOnActionIntersect(false);
+
+    const currentPageParam = option?.resetPage
+      ? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType }
+      : { ...pageParam, sortType: option?.sortType ?? sortType };
+
+    setPageParam(currentPageParam);
 
     let listSummaryParams: ExtensionFundAccountTransferListParams = {
-      mid: "nictest80m",
+      mid: mid,
       searchCl: searchCl,
       searchValue: searchValue,
       bankCode: bankCode,
-      fromDate: "20210101",
-      toDate: "20221231",
+      fromDate: fromDate,
+      toDate: toDate,
       resultStatus: option?.status ?? status,
-      page: pageParam
+      ... {
+        page: currentPageParam
+      }
     };
 
     extensionFundAccountTransferList(listSummaryParams).then((rs: any) => {
-      const content = rs.content || [];
-      setListItems(rs.content);
+      // resetPage면 기존 리스트 무시, 아니면 추가
+      setListItems(option?.resetPage ? rs.content : [
+        ...listItems,
+        ...rs.content
+      ]);
+      if (rs.hasNext) {
+        setNextCursor(rs.nextCursor);
+        setPageParam({
+          ...currentPageParam,  // pageParam이 아니라 currentPageParam 사용
+          cursor: rs.nextCursor
+        });
+        setOnActionIntersect(true)
+      }
+      else {
+        setNextCursor(null);
+      }
     });
 
     callBalance();
@@ -84,7 +128,7 @@ export const FundAccountTransferListWrap = () => {
       toDate: toDate,
     };
     extensionFundAccountTransferExcel(params).then((rs: ExtensionFundAccountTransferExcelResponse) => {
-      
+
     });
   };
 
@@ -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