수정

src/pages/additional-service/payout/list-page.tsx

@@ -30,6 +30,7 @@ import { AdditionalServiceCategory } from '@/entities/additional-service/model/t
 import { useStore } from '@/shared/model/store';
 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 PayoutListPage = () => {
   // 권한 체크
@@ -39,6 +40,7 @@ export const PayoutListPage = () => {
   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<PayoutContent>>([]);
   const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -54,6 +56,24 @@ export const PayoutListPage = () => {
 
   const { mutateAsync: extensionPayoutList } = useExtensionPayoutListMutation();
   const { mutateAsync: extensionPayoutExcel } = useExtensionPayoutExcelMutation();
+  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);
@@ -66,29 +86,48 @@ export const PayoutListPage = () => {
     navigate(PATHS.additionalService.payout.request);
   };
 
-  const callExtensionPayoutList = (option?: {
-    sortType?: SortTypeKeys,
-    status?: PayoutDisbursementStatus
-  }) => {
-
-    let params: ExtensionPayoutListParams = {
+  const callList = (type?: string) => {
+    setOnActionIntersect(false);
+    let listParams: ExtensionPayoutListParams = {
       mid: mid,
       searchDateType: searchDateType,
       fromDate: fromDate,
       toDate: toDate,
-      status: option?.status ?? status,
+      status: status,
       minAmount: minAmount,
       maxAmount: maxAmount,
-      page: pageParam
+      page: {
+				...pageParam,
+				...{ sortType: sortType }
+			}
     };
-
-    if (params.page) {
-      params.page.sortType = option?.sortType || sortType;
-      setPageParam(params.page);
+    if(type !== 'page' && listParams.page){
+      listParams.page.cursor = null;
     }
 
-    extensionPayoutList(params).then((rs: ExtensionPayoutListResponse) => {
-      setListItems(rs.content);
+    extensionPayoutList(listParams).then((rs: ExtensionPayoutListResponse) => {
+      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 }
+        });
+      }
     });
   };
 
@@ -115,16 +154,13 @@ export const PayoutListPage = () => {
   };
   const onClickToSort = (sort: SortTypeKeys) => {
     setSortType(sort);
-    callExtensionPayoutList({
-      sortType: sort
-    });
   };
   const onClickToDisbursementStatus = (val: PayoutDisbursementStatus) => {
     setStatus(val);
   };
 
   useEffect(() => {
-    callExtensionPayoutList();
+    callList();
   }, [
     mid,
     searchDateType,
@@ -132,7 +168,8 @@ export const PayoutListPage = () => {
     toDate,
     status,
     minAmount,
-    maxAmount
+    maxAmount,
+    sortType
   ]);
 
   const getListDateGroup = () => {
@@ -253,7 +290,8 @@ export const PayoutListPage = () => {
               </div>
             </section>
             <section className="transaction-list">
-              {getListDateGroup()}
+              { getListDateGroup() }
+              <div ref={ setTarget }></div>
             </section>
             <div className="apply-row">
               <button