수정

src/pages/additional-service/key-in-payment/key-in-payment-page.tsx

@@ -23,6 +23,7 @@ import { KeyInPaymentListItem, KeyInPaymentPaymentStatus } from '@/entities/addi
 import { keyInPaymentPaymentStatusBtnGroup } from '@/entities/additional-service/model/key-in/constant';
 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 KeyInPaymentPage = () => {
   const { navigate } = useNavigate();
@@ -33,6 +34,7 @@ export const KeyInPaymentPage = () => {
     extensionCode: 'KEYIN'
   });
 
+  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
   const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
   const [listItems, setListItems] = useState<Array<KeyInPaymentListItem>>([]);
   const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -54,36 +56,66 @@ export const KeyInPaymentPage = () => {
 
   const { mutateAsync: keyinList } = useExtensionKeyinListMutation();
   const { mutateAsync: downloadExcel } = useExtensionKeyinDownloadExcelMutation();
+  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 = (option?: {
-    sortType?: SortTypeKeys,
-    status?: KeyInPaymentPaymentStatus
-  }) => {
-    let newMinAmount = minAmount;
-    if (!!minAmount && typeof (minAmount) === 'string') {
-      newMinAmount = parseInt(minAmount);
-    }
-    let newMaxAmount = maxAmount;
-    if (!!maxAmount && typeof (maxAmount) === 'string') {
-      newMaxAmount = parseInt(maxAmount);
-    }
+	const { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });
+
+  const callList = (type?: string) => {
+    setOnActionIntersect(false);
     let listParams = {
       mid: mid,
       fromDate: startDate,
       toDate: endDate,
       paymentStatus: paymentStatus,
-      minAmount: newMinAmount,
-      maxAmount: newMaxAmount,
-      page: pageParam
+      minAmount: minAmount,
+      maxAmount: maxAmount,
+      page: {
+				...pageParam,
+				...{ sortType: sortType }
+			}
     };
-
-    if (listParams.page) {
-      listParams.page.sortType = option?.sortType || sortType;
-      setPageParam(listParams.page);
+    if(type !== 'page' && listParams.page){
+      listParams.page.cursor = null;
     }
 
     keyinList(listParams).then((rs) => {
-      setListItems(rs.content);
+      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 }
+        });
+      }
     });
   }
 
@@ -97,21 +129,13 @@ export const KeyInPaymentPage = () => {
 
   const onSendRequest = (selectedEmail?: string) => {
     if (selectedEmail) {
-      let newMinAmount = minAmount;
-      if (!!minAmount && typeof (minAmount) === 'string') {
-        newMinAmount = parseInt(minAmount);
-      }
-      let newMaxAmount = maxAmount;
-      if (!!maxAmount && typeof (maxAmount) === 'string') {
-        newMaxAmount = parseInt(maxAmount);
-      }
       downloadExcel({
         mid: mid,
         fromDate: startDate,
         toDate: endDate,
         paymentStatus: paymentStatus,
-        minAmount: newMinAmount,
-        maxAmount: newMaxAmount,
+        minAmount: minAmount,
+        maxAmount: maxAmount,
         //email: selectedEmail
       }).then((rs) => {
         console.log('Excel Download Status:', rs.status);
@@ -122,9 +146,6 @@ export const KeyInPaymentPage = () => {
 
   const onClickToSort = (sort: SortTypeKeys) => {
     setSortType(sort);
-    callList({
-      sortType: sort
-    });
   };
 
   const onClickToPaymentStatus = (val: KeyInPaymentPaymentStatus) => {
@@ -139,7 +160,8 @@ export const KeyInPaymentPage = () => {
     endDate,
     paymentStatus,
     minAmount,
-    maxAmount
+    maxAmount,
+    sortType
   ]);
 
   // if (!hasAccess) {
@@ -209,6 +231,7 @@ export const KeyInPaymentPage = () => {
               additionalServiceCategory={AdditionalServiceCategory.KeyInPayment}
               mid={mid}
             ></KeyInPaymentList>
+            <div ref={ setTarget }></div>
           </div>
         </div>
       </main>