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

- KeyIn결제 page 수정

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;
-    setPageParam(pageParam);
+    const currentPageParam = option?.resetPage
+      ? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType }
+      : { ...pageParam, sortType: option?.sortType ?? sortType };
+
+    setPageParam(currentPageParam);
 
     let listSummaryParams: ExtensionFundAccountResultListParams = {
       mid: mid,
@@ -66,12 +94,29 @@ export const FundAccountResultListWrap = () => {
       toDate: '20250930',
       bankCode: bankCode,
       resultStatus: option?.resultStatus ?? resultStatus,
-      page: pageParam
+      ... {
+        page: currentPageParam
+      }
     };
 
     extensionFundAccountResultList(listSummaryParams).then((rs: any) => {
       console.log(rs);
-      setListItems(rs.content);
+      // resetPage면 기존 리스트 무시, 아니면 추가
+      setListItems(option?.resetPage ? rs.content : [
+        ...listItems,
+        ...rs.content
+      ]);
+      if (rs.hasNext) {
+        setNextCursor(rs.nextCursor);
+        setPageParam({
+          ...currentPageParam,  // pageParam이 아니라 currentPageParam 사용
+          cursor: rs.nextCursor
+        });
+        setOnActionIntersect(true)
+      }
+      else {
+        setNextCursor(null);
+      }
     });
   };
 
@@ -113,14 +158,18 @@ export const FundAccountResultListWrap = () => {
 
   const onClickToSort = (sort: SortTypeKeys) => {
     setSortType(sort);
+    setListItems([]);  // 리스트 초기화
     callList({
-      sortType: sort
+      sortType: sort,
+      resetPage: true
     });
   };
   const onClickToStatus = (val: FundAccountResultStatus) => {
     setResultStatus(val);
+    setListItems([]);  // 리스트 초기화
     callList({
-      resultStatus: val
+      resultStatus: val,
+      resetPage: true
     });
   };
 
@@ -129,25 +178,26 @@ export const FundAccountResultListWrap = () => {
     let date = '';
     let list: FundAccountResultContentItem[] = [];
     for (let i = 0; i < listItems.length; i++) {
-      // registDate format: "20211018140420" (YYYYMMDDHHmmss)
+      // requestDate format: "20211018140420" (YYYYMMDDHHmmss)
       let requestDate = listItems[i]?.requestDate || '';
       let itemDate = requestDate.substring(0, 8);
       if (i === 0) {
         date = itemDate;
       }
       if (date !== itemDate) {
-        date = itemDate;
+        // 날짜가 바뀌면 이전 리스트를 푸시 (날짜 업데이트 전에!)
         if (list.length > 0) {
           rs.push(
             <ListDateGroup
               additionalServiceCategory={AdditionalServiceCategory.FundAccountResult}
               mid={mid}
               key={date + '-' + i}
-              date={date}
+              date={date}  // 이전 날짜 사용
               items={list as any}
             ></ListDateGroup>
           );
         }
+        date = itemDate;  // 그 다음에 날짜 업데이트
         list = [];
       }
       list.push(listItems[i] as any);
@@ -155,7 +205,7 @@ export const FundAccountResultListWrap = () => {
     if (list.length > 0) {
       rs.push(
         <ListDateGroup
-          additionalServiceCategory={AdditionalServiceCategory.FundAccountTransfer}
+          additionalServiceCategory={AdditionalServiceCategory.FundAccountResult}
           mid={mid}
           key={date + '-last'}
           date={date}
@@ -167,10 +217,25 @@ export const FundAccountResultListWrap = () => {
   };
 
   useEffect(() => {
-    callList();
     callSummary();
   }, []);
 
+  useEffect(() => {
+    // 필터 조건이 변경되면 첫 페이지부터 다시 시작
+    setListItems([]);
+    setNextCursor(null);
+    callList({ resetPage: true });
+  }, [
+    mid,
+    searchCl,
+    searchValue,
+    searchDateType,
+    fromDate,
+    toDate,
+    bankCode,
+    resultStatus
+  ]);
+
   const onClickToNavigate = () => {
     navigate(PATHS.additionalService.fundAccount.transferRequest);
   };
@@ -300,6 +365,7 @@ export const FundAccountResultListWrap = () => {
 
       <section className="transaction-list">
         {getListDateGroup()}
+        <div ref={setTarget}></div>
       </section>
       <div className="apply-row">
         <button