From f4b8ee29d8af5761a37c56307c56752481713a40 Mon Sep 17 00:00:00 2001
From: "focp212@naver.com" <focp212@naver.com>
Date: Sun, 26 Oct 2025 11:28:06 +0900
Subject: [PATCH] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=95=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/fund-account/result-list-wrap.tsx      |  3 +-
 .../ui/fund-account/transfer-list-wrap.tsx    |  2 +-
 src/entities/settlement/ui/list-wrap.tsx      |  2 +-
 .../additional-service/alimtalk/list-page.tsx | 64 +++++++++++++++----
 .../additional-service/payout/list-page.tsx   |  2 +-
 .../sms-payment/sms-payment-page.tsx          | 60 ++++++++++++++---
 src/pages/support/faq/list-page.tsx           |  2 +-
 src/pages/support/notice/list-page.tsx        |  2 +-
 src/pages/support/qna/list-page.tsx           |  2 +-
 src/shared/ui/assets/css/style-fix.css        |  6 ++
 10 files changed, 118 insertions(+), 27 deletions(-)

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 5d93a29..d816915 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
@@ -361,8 +361,9 @@ export const FundAccountResultListWrap = () => {
 
       <section className="transaction-list">
         { getListDateGroup() }
-        <div ref={ setTarget }></div>
+        
       </section>
+      <div ref={ setTarget }></div>
       <div className="apply-row">
         <button
           className="btn-50 btn-blue flex-1"
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 6ace00d..d7da6c8 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
@@ -298,8 +298,8 @@ export const FundAccountTransferListWrap = () => {
 
       <section className="transaction-list pb-86">
         { getListDateGroup() }
-        <div ref={ setTarget }></div>
       </section>
+      <div ref={ setTarget }></div>
       <div className="apply-row">
         <button
           className="btn-50 btn-blue flex-1"
diff --git a/src/entities/settlement/ui/list-wrap.tsx b/src/entities/settlement/ui/list-wrap.tsx
index d58e394..f6a791f 100644
--- a/src/entities/settlement/ui/list-wrap.tsx
+++ b/src/entities/settlement/ui/list-wrap.tsx
@@ -481,8 +481,8 @@ export const ListWrap = ({
       { (periodType === SettlementPeriodType.TRANSACTION_DATE) && 
         getTransactionDateListDateGroup()
       }
-      <div ref={ setTarget }></div>
       </div>
+      <div ref={ setTarget }></div>
       <ListFilter
         filterOn={ filterOn }
         setFilterOn={ setFilterOn }
diff --git a/src/pages/additional-service/alimtalk/list-page.tsx b/src/pages/additional-service/alimtalk/list-page.tsx
index 3633b9b..d4482c5 100644
--- a/src/pages/additional-service/alimtalk/list-page.tsx
+++ b/src/pages/additional-service/alimtalk/list-page.tsx
@@ -32,6 +32,7 @@ import { snackBar } from '@/shared/lib';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import { AlimtalkFilter } from '@/entities/additional-service/ui/filter/alimtalk-filter';
 import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
+import useIntersectionObserver from '@/widgets/intersection-observer';
 
 export const AlimtalkListPage = () => {
   const { navigate } = useNavigate();
@@ -42,7 +43,7 @@ export const AlimtalkListPage = () => {
     extensionCode: 'ALIMTALK'
   });
 
-  const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
+  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
   const [listItems, setListItems] = useState<Array<AlimtalkListContent>>([]);
   const [filterOn, setFilterOn] = useState<boolean>(false);
   const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
@@ -59,6 +60,24 @@ export const AlimtalkListPage = () => {
   const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
   const { mutateAsync: extensionAlimtalkList } = useExtensionAlimtalkListMutation();
   const { mutateAsync: extensionAlimtalkDownloadExcel } = useExtensionAlimtalkDownloadExcelMutation();
+  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 
+  });
 
   useSetHeaderTitle('알림톡 결제통보');
   useSetHeaderType(HeaderType.LeftArrow);
@@ -67,10 +86,8 @@ export const AlimtalkListPage = () => {
     navigate(PATHS.home);
   });
 
-  const callList = (option?: {
-    sortType?: SortTypeKeys
-  }) => {
-    let params: ExtensionAlimtalkListParams = {
+  const callList = (type?: string) => {
+    let listParams: ExtensionAlimtalkListParams = {
       mid: mid,
       searchCl: searchCl,
       searchValue: searchValue,
@@ -82,14 +99,38 @@ export const AlimtalkListPage = () => {
       sendCl: sendCl,
       page: pageParam
     };
-
-    if (params.page) {
-      params.page.sortType = option?.sortType || sortType;
-      setPageParam(params.page);
+    if(type !== 'page' && listParams.page){
+      listParams.page.cursor = null;
     }
 
-    extensionAlimtalkList(params).then((rs: ExtensionAlimtalkListResponse) => {
-      setListItems(rs.content);
+    extensionAlimtalkList(listParams).then((rs: ExtensionAlimtalkListResponse) => {
+      if(type === 'page'){
+        setListItems([
+          ...listItems,
+          ...rs.content
+        ]);
+      }
+      else{
+        setListItems(rs.content);
+      }
+			if(rs.hasNext 
+        && rs.content.length === DEFAULT_PAGE_PARAM.size
+      ){
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: rs.nextCursor }
+        });
+      }
+      else{
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: null }
+        });
+      }
+      setOnActionIntersect(
+        !!rs.hasNext 
+        && rs.content.length === DEFAULT_PAGE_PARAM.size
+      );
     });
   };
 
@@ -233,6 +274,7 @@ export const AlimtalkListPage = () => {
             <section className="transaction-list">
               {getAlimtalkList()}
             </section>
+            <div ref={ setTarget }></div>
           </div>
         </div>
       </main>
diff --git a/src/pages/additional-service/payout/list-page.tsx b/src/pages/additional-service/payout/list-page.tsx
index f93f723..2fc574d 100644
--- a/src/pages/additional-service/payout/list-page.tsx
+++ b/src/pages/additional-service/payout/list-page.tsx
@@ -296,8 +296,8 @@ export const PayoutListPage = () => {
             </section>
             <section className="transaction-list">
               { getListDateGroup() }
-              <div ref={ setTarget }></div>
             </section>
+            <div ref={ setTarget }></div>
             <div className="apply-row">
               <button
                 className="btn-50 btn-blue flex-1"
diff --git a/src/pages/additional-service/sms-payment/sms-payment-page.tsx b/src/pages/additional-service/sms-payment/sms-payment-page.tsx
index 844748d..8d6255d 100644
--- a/src/pages/additional-service/sms-payment/sms-payment-page.tsx
+++ b/src/pages/additional-service/sms-payment/sms-payment-page.tsx
@@ -22,6 +22,7 @@ import { AdditionalServiceCategory } from '@/entities/additional-service/model/t
 import { PATHS } from '@/shared/constants/paths';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
+import useIntersectionObserver from '@/widgets/intersection-observer';
 
 export const SmsPaymentPage = () => {
   const { navigate } = useNavigate();
@@ -34,7 +35,7 @@ export const SmsPaymentPage = () => {
 
   const [bottomSmsPaymentDetailResendOn, setBottomSmsPaymentDetailResendOn] = useState<boolean>(false)
 
-  const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
+  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
   const [listItems, setListItems] = useState<Array<SmsPaymentListItem>>([]);
   const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
   const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -52,6 +53,24 @@ export const SmsPaymentPage = () => {
   const { mutateAsync: smsPaymentList } = useExtensionSmsListMutation();
   const { mutateAsync: downloadExcel } = useExtensionSmsDownloadExcelMutation();
   const { mutateAsync: detail } = useExtensionSmsDetailMutation();
+  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 
+  });
 
   useSetHeaderTitle('SMS 결제 통보');
   useSetHeaderType(HeaderType.LeftArrow);
@@ -59,9 +78,8 @@ export const SmsPaymentPage = () => {
   useSetOnBack(() => {
     navigate(PATHS.home);
   });
-  const callList = (option?: {
-    sortType?: SortTypeKeys
-  }) => {
+  const callList = (type?: string) => {
+    setOnActionIntersect(false);
     let listParams: ExtensionSmsPaymentListParams = {
       mid: mid,
       searchCl: searchCl,
@@ -71,14 +89,38 @@ export const SmsPaymentPage = () => {
       smsCl: smsCl,
       page: pageParam
     }
-
-    if (listParams.page) {
-      listParams.page.sortType = option?.sortType || sortType;
-      setPageParam(listParams.page);
+    if(type !== 'page' && listParams.page){
+      listParams.page.cursor = null;
     }
 
     smsPaymentList(listParams).then((rs) => {
-      setListItems(rs.content);
+      if(type === 'page'){
+        setListItems([
+          ...listItems,
+          ...rs.content
+        ]);
+      }
+      else{
+        setListItems(rs.content);
+      }
+			if(rs.hasNext 
+        && rs.content.length === DEFAULT_PAGE_PARAM.size
+      ){
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: rs.nextCursor }
+        });
+      }
+      else{
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: null }
+        });
+      }
+      setOnActionIntersect(
+        !!rs.hasNext 
+        && rs.content.length === DEFAULT_PAGE_PARAM.size
+      );
     });
   }
 
diff --git a/src/pages/support/faq/list-page.tsx b/src/pages/support/faq/list-page.tsx
index aa5dae1..e320eef 100644
--- a/src/pages/support/faq/list-page.tsx
+++ b/src/pages/support/faq/list-page.tsx
@@ -176,8 +176,8 @@ export const FaqListPage = () => {
               </div>
               <div className="faq-list">
                 { getFaqList() }
-                <div ref={ setTarget }></div>
               </div>
+              <div ref={ setTarget }></div>
             </div>
             <div className="apply-row">
               <button 
diff --git a/src/pages/support/notice/list-page.tsx b/src/pages/support/notice/list-page.tsx
index 72fc676..1627d02 100644
--- a/src/pages/support/notice/list-page.tsx
+++ b/src/pages/support/notice/list-page.tsx
@@ -170,8 +170,8 @@ export const NoticeListPage = () => {
               </div>
               <div className="notice-list-114">
                 { getNoticeList() } 
-                <div ref={ setTarget }></div>
               </div>
+              <div ref={ setTarget }></div>
             </div>
           </div>
         </div>
diff --git a/src/pages/support/qna/list-page.tsx b/src/pages/support/qna/list-page.tsx
index f7e7739..23c7b60 100644
--- a/src/pages/support/qna/list-page.tsx
+++ b/src/pages/support/qna/list-page.tsx
@@ -166,8 +166,8 @@ export const QnaListPage = () => {
               </div>
               <div className="inq-list" >
                 { getQnaList() }
-                <div ref={ setTarget }></div>
               </div>
+              <div ref={ setTarget }></div>
             </div>
             <div className="apply-row">
               <button 
diff --git a/src/shared/ui/assets/css/style-fix.css b/src/shared/ui/assets/css/style-fix.css
index 0553c46..b42353e 100644
--- a/src/shared/ui/assets/css/style-fix.css
+++ b/src/shared/ui/assets/css/style-fix.css
@@ -385,4 +385,10 @@ main.home-main{
   font-weight: unset !important;
   width: unset !important;
   text-align: unset !important;
+}
+
+.transaction-content > .transaction-title{
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  width: 100%;
 }
\ No newline at end of file