수정

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

@@ -17,12 +17,14 @@ import { FundAccountResultStatusBtnGroup, FundAccountStatusBtnGroup } from '../.
 import { FundAccountResultFilter } from '../filter/fund-account-result-filter';
 import { useStore } from '@/shared/model/store';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import useIntersectionObserver from '@/widgets/intersection-observer';
 
 export const FundAccountResultListWrap = () => {
   const { navigate } = useNavigate();
 
   const userMid = useStore.getState().UserStore.mid;
 
+  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
   const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
   const [listItems, setListItems] = useState<Array<FundAccountResultContentItem>>([]);
   const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -49,12 +51,28 @@ export const FundAccountResultListWrap = () => {
   const { mutateAsync: extensionFundAccountResultList } = useExtensionFundAccountResultListMutation();
   const { mutateAsync: extensionFundAccountResultExcel } = useExtensionFundAccountResultExcelMutation();
   const { mutateAsync: extensionFundAccountResultSummary } = useExtensionFundAccountResultSummaryMutation();
+  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 callList = (option?: {
-    sortType?: SortTypeKeys,
-    resultStatus?: FundAccountResultStatus
-  }) => {
-    let listSummaryParams: ExtensionFundAccountResultListParams = {
+  const { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });
+  
+  const callList = (type?: string) => {
+    setOnActionIntersect(false);
+    let listParams: ExtensionFundAccountResultListParams = {
       mid: mid,
       searchCl: searchCl,
       searchValue: searchValue,
@@ -62,18 +80,39 @@ export const FundAccountResultListWrap = () => {
       fromDate: fromDate,
       toDate: toDate,
       bankCode: bankCode,
-      resultStatus: option?.resultStatus ?? resultStatus,
-      page: pageParam
+      resultStatus: resultStatus,
+      page: {
+				...pageParam,
+				...{ sortType: sortType }
+			}
     };
-
-    if (listSummaryParams.page) {
-      listSummaryParams.page.sortType = option?.sortType || sortType;
-      setPageParam(listSummaryParams.page);
+    if(type !== 'page' && listParams.page){
+      listParams.page.cursor = null;
     }
 
-    extensionFundAccountResultList(listSummaryParams).then((rs: any) => {
-      console.log(rs);
-      setListItems(rs.content);
+    extensionFundAccountResultList(listParams).then((rs: any) => {
+      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 }
+        });
+      }
     });
   };
 
@@ -119,9 +158,6 @@ export const FundAccountResultListWrap = () => {
 
   const onClickToSort = (sort: SortTypeKeys) => {
     setSortType(sort);
-    callList({
-      sortType: sort
-    });
   };
   const onClickToStatus = (val: FundAccountResultStatus) => {
     setResultStatus(val);
@@ -187,7 +223,8 @@ export const FundAccountResultListWrap = () => {
     fromDate,
     toDate,
     bankCode,
-    resultStatus
+    resultStatus,
+    sortType
   ]);
 
   const onClickToNavigate = () => {
@@ -318,12 +355,13 @@ export const FundAccountResultListWrap = () => {
       </section>
 
       <section className="transaction-list">
-        {getListDateGroup()}
+        { getListDateGroup() }
+        <div ref={ setTarget }></div>
       </section>
       <div className="apply-row">
         <button
           className="btn-50 btn-blue flex-1"
-          onClick={onClickToNavigate}
+          onClick={ onClickToNavigate }
         >이체 등록</button>
       </div>
       <FundAccountResultFilter