From ff17d01007435f7ceffe3e0a9ab397ba85c70965 Mon Sep 17 00:00:00 2001
From: "focp212@naver.com" <focp212@naver.com>
Date: Fri, 24 Oct 2025 17:40:40 +0900
Subject: [PATCH] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../transaction/all-transaction/list-page.tsx | 54 +++++++++++++++++--
 1 file changed, 49 insertions(+), 5 deletions(-)

diff --git a/src/pages/transaction/all-transaction/list-page.tsx b/src/pages/transaction/all-transaction/list-page.tsx
index 58f4f64..86aef3b 100644
--- a/src/pages/transaction/all-transaction/list-page.tsx
+++ b/src/pages/transaction/all-transaction/list-page.tsx
@@ -29,6 +29,7 @@ import {
 	useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import useIntersectionObserver from '@/widgets/intersection-observer';
 
 export const AllTransactionListPage = () => {
   const { navigate } = useNavigate();
@@ -36,6 +37,7 @@ export const AllTransactionListPage = () => {
 
   const [serviceCodeOptions, setServiceCodeOptions] = useState<Array<Record<string, any>>>();
   
+  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
   const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
   const [listItems, setListItems] = useState<Array<ListItemProps>>([]);
   const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -73,8 +75,26 @@ export const AllTransactionListPage = () => {
   const { mutateAsync: allTransactionList } = useAllTransactionListMutation();
   const { mutateAsync: allTransactionListSummary } = useAllTransactionListSummaryMutation();
   const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
-  
-  const callList = () => {
+  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 && !!pageParam.cursor){
+          callList('page');
+        } 
+      }
+      else{
+        console.log('Element is no longer intersecting with the root.');
+      }
+    });
+  };
+
+  const { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });
+
+  const callList = (type?: string) => {
     let listSummaryParams: AllTransactionListSummaryParams = {
       moid: moid,
       tid: tid,
@@ -101,10 +121,33 @@ export const AllTransactionListPage = () => {
         }
       }
     };
+    if(type !== 'page' && listParams.page){
+      listParams.page.cursor = null;
+    }
     
     allTransactionList(listParams).then((rs: AllTransactionListResponse) => {
-      console.log(rs.content)
-      setListItems(rs.content);
+      if(type === 'page'){
+        setListItems([
+          ...listItems,
+          ...rs.content
+        ]);
+      }
+      else{
+        setListItems(rs.content);
+      }
+      if(rs.hasNext){
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: rs.nextCursor }
+        });
+        setOnActionIntersect(true);
+      }
+      else{
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: null }
+        });
+      }
     });
     allTransactionListSummary(listSummaryParams).then((rs: AllTransactionListSummaryResponse) => {
       setTotalAmount(rs.totalAmount);
@@ -240,7 +283,8 @@ export const AllTransactionListPage = () => {
             <AllTransactionList 
               listItems={ listItems }
               transactionCategory={ TransactionCategory.AllTransaction }
-            ></AllTransactionList> 
+            ></AllTransactionList>
+            <div ref={ setTarget }></div>
 					</div>
 				</div>
 			</main>