페이징

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 { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });
 	
-	const callList = () => {
+	const callList = (type?: string) => {
+		setOnActionIntersect(false);
 		let listParams: EscrowListParams = {
       mid: mid,
   		searchType: 'ORDER_NUMBER',
@@ -170,7 +191,8 @@ export const EscrowListPage = () => {
 						<EscrowList 
 							listItems={ listItems }
 							transactionCategory={ TransactionCategory.Escrow }
-						></EscrowList> 
+						></EscrowList>
+						<div ref={ setTarget }></div>
 					</div>
 				</div>
 			</main>