수정

src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx

@@ -26,12 +26,14 @@ import { FundAccountTransactionFilter } from '../filter/fund-account-trnasaction
 import { PATHS } from '@/shared/constants/paths';
 import { useStore } from '@/shared/model/store';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import useIntersectionObserver from '@/widgets/intersection-observer';
 
 export const FundAccountTransferListWrap = () => {
   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<FundAccountTransferContentItem>>([]);
   const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -50,29 +52,67 @@ export const FundAccountTransferListWrap = () => {
   const { mutateAsync: extensionFundAccountTransferList } = useExtensionFundAccountTransferListMutation();
   const { mutateAsync: extensionFundAccountTransferExcel } = useExtensionFundAccountTransferExcelMutation();
   const { mutateAsync: extensionFundAccountBalance } = useExtensionFundAccountBalanceMutation();
+  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?: FundAccountStatus
-  }) => {
-    let listSummaryParams: ExtensionFundAccountTransferListParams = {
+	const { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });
+
+  const callList = (type?: string) => {
+    setOnActionIntersect(false);
+    let listParams: ExtensionFundAccountTransferListParams = {
       mid: mid,
       searchCl: searchCl,
       searchValue: searchValue,
       bankCode: bankCode,
       fromDate: fromDate,
       toDate: toDate,
-      resultStatus: option?.status ?? status,
-      page: pageParam
+      resultStatus: status,
+      page: {
+				...pageParam,
+				...{ sortType: sortType }
+			}
     };
-
-    if (listSummaryParams.page) {
-      listSummaryParams.page.sortType = option?.sortType || sortType;
-      setPageParam(listSummaryParams.page);
+    if(type !== 'page' && listParams.page){
+      listParams.page.cursor = null;
     }
 
-    extensionFundAccountTransferList(listSummaryParams).then((rs: any) => {
-      setListItems(rs.content);
+    extensionFundAccountTransferList(listParams).then((rs: any) => {
+      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 }
+        });
+      }
     });
     callBalance();
   };
@@ -111,9 +151,6 @@ export const FundAccountTransferListWrap = () => {
 
   const onClickToSort = (sort: SortTypeKeys) => {
     setSortType(sort);
-    callList({
-      sortType: sort
-    });
   };
 
   const onClickToStatus = (val: FundAccountStatus) => {
@@ -174,7 +211,8 @@ export const FundAccountTransferListWrap = () => {
     fromDate,
     toDate,
     bankCode,
-    status
+    status,
+    sortType
   ]);
 
   const onClickToNavigate = () => {
@@ -254,7 +292,8 @@ export const FundAccountTransferListWrap = () => {
       </section>
 
       <section className="transaction-list pb-86">
-        {getListDateGroup()}
+        { getListDateGroup() }
+        <div ref={ setTarget }></div>
       </section>
       <div className="apply-row">
         <button