페이징

src/entities/vat-return/ui/list-wrap.tsx

@@ -16,10 +16,12 @@ import { useVatReturnListMutation } from '../api/use-vat-return-list-mutation';
 import { ListDateGroup } from './list-date-group';
 import { useStore } from '@/shared/model/store';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import useIntersectionObserver from '@/widgets/intersection-observer';
 
 export const ListWrap = () => {
   const userMid = useStore.getState().UserStore.mid;
 
+  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
   const [filterOn, setFilterOn] = useState<boolean>(false);
   const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
   const [listItems, setListItems] = useState<Array<VatReturnListContent>>([]);
@@ -33,8 +35,27 @@ export const ListWrap = () => {
   const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
 
   const { mutateAsync: vatReturnList } = useVatReturnListMutation();
+  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 = () => {
+  const { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });
+
+  const callList = (type?: string) => {
+    setOnActionIntersect(false);
     let params: VatReturnListParams = {
       mid: mid,
       startMonth: startMonth,
@@ -48,7 +69,28 @@ export const ListWrap = () => {
     };
 
     vatReturnList(params).then((rs: VatReturnListResponse) => {
+      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 }
+        });
+      }
     });
   };
   
@@ -153,6 +195,7 @@ export const ListWrap = () => {
       </div>
       <div className="transaction-list">
         { getListDateGroup() }
+        <div ref={ setTarget }></div>
       </div>
       <ListFilter
         filterOn={ filterOn }

src/pages/transaction/all-transaction/list-page.tsx

@@ -64,7 +64,6 @@ export const AllTransactionListPage = () => {
 
   const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
       
-    
 	useSetHeaderTitle('거래내역 조회');
 	useSetHeaderType(HeaderType.LeftArrow);
 	useSetOnBack(() => {

src/pages/transaction/billing/list-page.tsx

@@ -29,12 +29,14 @@ 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 BillingListPage = () => {
 	const { navigate } = useNavigate();
 	const userMid = useStore.getState().UserStore.mid;
 	const userInfo = useStore((state) => state.UserStore.userInfo);
 
+	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);
@@ -62,8 +64,27 @@ export const BillingListPage = () => {
 
 	const { mutateAsync: billingList } = useBillingListMutation();
 	const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
+	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 = () => {
+	const { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });
+
+	const callList = (type?: string) => {
+		setOnActionIntersect(false);
 		let listParams: BillingListParams = {
       mid: mid,
       searchType: searchType,
@@ -80,9 +101,33 @@ export const BillingListPage = () => {
 				...{ sortType: sortType }
 			}
     };
+		if(type !== 'page' && listParams.page){
+      listParams.page.cursor = null;
+    }
 				    
     billingList(listParams).then((rs: BillingListResponse) => {
+      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 }
+        });
+      }
     });
 	}
 	
@@ -168,6 +213,7 @@ export const BillingListPage = () => {
 							listItems={ listItems }
 							transactionCategory={ TransactionCategory.Billing }
 						></BillingList>
+						<div ref={ setTarget }></div>
 					</div>
 				</div>
 			</main>

src/pages/transaction/cash-receipt/list-page.tsx

@@ -33,11 +33,13 @@ import { CashReceiptTransactionTypeBtnGroup } from '@/entities/transaction/model
 import { useStore } from '@/shared/model/store';
 import { useCashReceiptSummaryMutation } from '@/entities/transaction/api/use-cash-receipt-summary-mutation';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import useIntersectionObserver from '@/widgets/intersection-observer';
 
 export const CashReceiptListPage = () => {
 	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<ListItemProps>>([]);
 	const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -68,8 +70,27 @@ export const CashReceiptListPage = () => {
 	const { mutateAsync: cashReceiptList } = useCashReceiptListMutation();
 	const { mutateAsync: cashReceiptSummary } = useCashReceiptSummaryMutation();
 	const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
+	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 = () => {
+	const { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });
+
+	const callList = (type?: string) => {
+		setOnActionIntersect(false);
 		let listSummaryParams: CashReceiptSummaryParams = {
 			mid: mid,
 			startDate: startDate,
@@ -88,9 +109,33 @@ export const CashReceiptListPage = () => {
 				...{ sortType: sortType }
 			}
 		};
+		if(type !== 'page' && listParams.page){
+      listParams.page.cursor = null;
+    }
 		
 		cashReceiptList(listParams).then((rs: CashReceiptListResponse) => {
+			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 }
+        });
+      }
 		});
 		cashReceiptSummary(listSummaryParams).then((rs: CashReceiptSummaryResponse) => {
 			setApprovalCount(rs.approvalCount);
@@ -230,6 +275,7 @@ export const CashReceiptListPage = () => {
 							listItems={ listItems }
 							transactionCategory={ TransactionCategory.CashReceipt }
 						></CashReceiptList>
+						<div ref={ setTarget }></div>
 					</div>
 				</div>
 			</main>

src/pages/transaction/escrow/list-page.tsx

@@ -28,12 +28,14 @@ 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 EscrowListPage = () => {
 	const { navigate } = useNavigate();
 	const userInfo = useStore((state) => state.UserStore.userInfo);
 	const userMid = useStore.getState().UserStore.mid;
 
+	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);
@@ -60,8 +62,27 @@ export const EscrowListPage = () => {
 
 	const { mutateAsync: escrowList } = useEscrowListMutation();
 	const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
+	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 = () => {
+  const { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });
+	
+	const callList = (type?: string) => {
+		setOnActionIntersect(false);
 		let listParams: EscrowListParams = {
       mid: mid,
   		searchType: 'ORDER_NUMBER',
@@ -171,6 +192,7 @@ export const EscrowListPage = () => {
 							listItems={ listItems }
 							transactionCategory={ TransactionCategory.Escrow }
 						></EscrowList>
+						<div ref={ setTarget }></div>
 					</div>
 				</div>
 			</main>