페이징 구조 수정

src/pages/additional-service/sms-payment/sms-payment-page.tsx

@@ -22,6 +22,7 @@ import { AdditionalServiceCategory } from '@/entities/additional-service/model/t
 import { PATHS } from '@/shared/constants/paths';
 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 SmsPaymentPage = () => {
   const { navigate } = useNavigate();
@@ -34,7 +35,7 @@ export const SmsPaymentPage = () => {
 
   const [bottomSmsPaymentDetailResendOn, setBottomSmsPaymentDetailResendOn] = useState<boolean>(false)
 
-  const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
+  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
   const [listItems, setListItems] = useState<Array<SmsPaymentListItem>>([]);
   const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
   const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -52,6 +53,24 @@ export const SmsPaymentPage = () => {
   const { mutateAsync: smsPaymentList } = useExtensionSmsListMutation();
   const { mutateAsync: downloadExcel } = useExtensionSmsDownloadExcelMutation();
   const { mutateAsync: detail } = useExtensionSmsDetailMutation();
+  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('SMS 결제 통보');
   useSetHeaderType(HeaderType.LeftArrow);
@@ -59,9 +78,8 @@ export const SmsPaymentPage = () => {
   useSetOnBack(() => {
     navigate(PATHS.home);
   });
-  const callList = (option?: {
-    sortType?: SortTypeKeys
-  }) => {
+  const callList = (type?: string) => {
+    setOnActionIntersect(false);
     let listParams: ExtensionSmsPaymentListParams = {
       mid: mid,
       searchCl: searchCl,
@@ -71,14 +89,38 @@ export const SmsPaymentPage = () => {
       smsCl: smsCl,
       page: pageParam
     }
-
-    if (listParams.page) {
-      listParams.page.sortType = option?.sortType || sortType;
-      setPageParam(listParams.page);
+    if(type !== 'page' && listParams.page){
+      listParams.page.cursor = null;
     }
 
     smsPaymentList(listParams).then((rs) => {
-      setListItems(rs.content);
+      if(type === 'page'){
+        setListItems([
+          ...listItems,
+          ...rs.content
+        ]);
+      }
+      else{
+        setListItems(rs.content);
+      }
+			if(rs.hasNext 
+        && rs.content.length === DEFAULT_PAGE_PARAM.size
+      ){
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: rs.nextCursor }
+        });
+      }
+      else{
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: null }
+        });
+      }
+      setOnActionIntersect(
+        !!rs.hasNext 
+        && rs.content.length === DEFAULT_PAGE_PARAM.size
+      );
     });
   }