페이징 구조 수정

src/entities/settlement/ui/list-wrap.tsx

@@ -31,6 +31,7 @@ import {
 import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
 import { useStore } from '@/shared/model/store';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import useIntersectionObserver from '@/widgets/intersection-observer';
 
 export interface ListWrapProps {
   startDateFromCalendar?: string;
@@ -44,11 +45,14 @@ export const ListWrap = ({
   const { navigate } = useNavigate();
   const userMid = useStore.getState().UserStore.mid;
   
+  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
+
   const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
   const [settlementDateListItems, setSettlementDateListItems] = useState<Array<SettlementsHistoryContent>>([]);
   const [transactionDatelistItems, setTransactionDateListItems] = useState<Array<SettlementsTransactionListContent>>([]);
   const [filterOn, setFilterOn] = useState<boolean>(false);
   const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
+  const [nextCursor, setNextCursor] = useState<string | null>(null);
   const [mid, setMid] = useState<string>(userMid);
   const [periodType, setPeriodType] = useState<SettlementPeriodType>(SettlementPeriodType.SETTLEMENT_DATE);
   const [startDate, setStartDate] = useState(startDateFromCalendar? moment(startDateFromCalendar).format('YYYYMMDD'):  moment().format('YYYYMMDD'));
@@ -77,18 +81,41 @@ export const ListWrap = ({
   const { mutateAsync: settlementsTransactionSummary } = useSettlementsTransactionSummaryMutation();
   const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
 
-  const callList = () => {
+  const callList = (option?: {
+    type?: string
+  }) => {
+    setOnActionIntersect(false);
     if(periodType === SettlementPeriodType.SETTLEMENT_DATE){
-      callSettlementList();
+      callSettlementList(option);
     }
     else if(periodType === SettlementPeriodType.TRANSACTION_DATE){
-      callTransactionList();
+      callTransactionList(option);
     }
   };
 
+  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 && !!nextCursor){
+          callList({
+            type: 'page'
+          });
+        } 
+      }
+      else{
+        console.log('Element is no longer intersecting with the root.');
+      }
+    });
+  };
+
+  const { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });
+
   const callSettlementList = (option?: {
-    sortType?: SortTypeKeys, 
-    val?: string
+    type?: string
   }) => {
     let listSummaryParams: SettlementsHistorySummaryParams = {
       mid: mid,
@@ -100,16 +127,41 @@ export const ListWrap = ({
     let listParams: SettlementsHistoryParams = {
       ...listSummaryParams,
       ...{
-        page: pageParam
+        page: {
+          ...pageParam,
+          ...{ sortType: sortType }
+        }
       }
     };
-    if(listParams.page){
-			listParams.page.sortType = (option?.sortType)? option.sortType: sortType;
-    	setPageParam(listParams.page);
-		}
+    if(option?.type === 'page'){
+      if(listParams.page){
+        listParams.page.cursor = nextCursor;
+      }
+    }
+    else{
+      setNextCursor(null);
+      if(listParams.page){
+        listParams.page.cursor = null;
+      }
+    }
 
     settlementsHistory(listParams).then((rs: SettlementsHistoryResponse) => {
-      setSettlementDateListItems(rs.content);
+      if(option?.type === 'page'){
+        setSettlementDateListItems([
+          ...settlementDateListItems,
+          ...rs.content
+        ]);
+      }
+      else{
+        setSettlementDateListItems(rs.content);
+      }
+      if(rs.hasNext){
+        setNextCursor(rs.nextCursor);
+        setOnActionIntersect(true);
+      }
+      else{
+        setNextCursor(null);
+      }
     });
     settlementsHistorySummary(listSummaryParams).then((rs: SettlementsHistorySummaryResponse) => {
       setSettlementAmount(rs.settlementAmount || 0);
@@ -122,7 +174,8 @@ export const ListWrap = ({
   };
   const callTransactionList = (option?: {
     sortType?: SortTypeKeys, 
-    val?: string
+    val?: string,
+    type?: string
   }) => {
     let params = {
       mid: mid,
@@ -143,9 +196,36 @@ export const ListWrap = ({
 			params.page.sortType = option?.sortType || sortType;
     	setPageParam(params.page);
 		}
+    if(option?.type === 'page'){
+      if(params.page){
+        params.page.cursor = nextCursor;
+      }
+    }
+    else{
+      setNextCursor(null);
+      if(params.page){
+        params.page.cursor = null;
+      }
+    }
 
     settlementsTransactionList(params).then((rs) => {
-      setTransactionDateListItems(rs.content);
+      if(option?.type === 'page'){
+        setTransactionDateListItems([
+          ...transactionDatelistItems,
+          ...rs.content
+        ]);
+      }
+      else{
+        setTransactionDateListItems(rs.content);
+      }
+      if(rs.hasNext){
+        setNextCursor(rs.nextCursor);
+        setOnActionIntersect(true);
+      }
+      else{
+        setNextCursor(null);
+      }
+      
     });
     settlementsTransactionSummary(summaryParams).then((rs) => {
       setSettlementAmount(rs.settlementAmount);
@@ -160,26 +240,10 @@ export const ListWrap = ({
   
   const onClickToSort = (sort: SortTypeKeys) => {
     setSortType(sort);
-    if(periodType === SettlementPeriodType.SETTLEMENT_DATE){
-      callSettlementList({
-        sortType: sort
-      });
-    }
-    else if(periodType === SettlementPeriodType.TRANSACTION_DATE){
-      callTransactionList({
-        sortType: sort
-      });
-    }
   };
   const changePeriodType = (val: SettlementPeriodType) => {
     if(val !== periodType){
       setPeriodType(val);
-      if(val === SettlementPeriodType.SETTLEMENT_DATE){
-        callSettlementList();
-      }
-      else if(val === SettlementPeriodType.TRANSACTION_DATE){
-        callTransactionList();
-      }
     }
   };
   
@@ -302,9 +366,10 @@ export const ListWrap = ({
   }, []);
 
   useEffect(() => {
+    setNextCursor(null);
     callList();
   }, [
-    mid, periodType, 
+    mid, periodType, sortType,
     startDate, endDate,
     paymentMethod
   ]);  
@@ -414,6 +479,7 @@ export const ListWrap = ({
       { (periodType === SettlementPeriodType.TRANSACTION_DATE) && 
         getTransactionDateListDateGroup()
       }
+      <div ref={ setTarget }></div>
       </div>
       <ListFilter
         filterOn={ filterOn }