페이징 구조 수정

src/entities/settlement/ui/list-wrap.tsx

@@ -31,6 +31,7 @@ import {
 import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
 import { useStore } from '@/shared/model/store';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import useIntersectionObserver from '@/widgets/intersection-observer';
 
 export interface ListWrapProps {
   startDateFromCalendar?: string;
@@ -44,11 +45,14 @@ export const ListWrap = ({
   const { navigate } = useNavigate();
   const userMid = useStore.getState().UserStore.mid;
   
+  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
+
   const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
   const [settlementDateListItems, setSettlementDateListItems] = useState<Array<SettlementsHistoryContent>>([]);
   const [transactionDatelistItems, setTransactionDateListItems] = useState<Array<SettlementsTransactionListContent>>([]);
   const [filterOn, setFilterOn] = useState<boolean>(false);
   const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
+  const [nextCursor, setNextCursor] = useState<string | null>(null);
   const [mid, setMid] = useState<string>(userMid);
   const [periodType, setPeriodType] = useState<SettlementPeriodType>(SettlementPeriodType.SETTLEMENT_DATE);
   const [startDate, setStartDate] = useState(startDateFromCalendar? moment(startDateFromCalendar).format('YYYYMMDD'):  moment().format('YYYYMMDD'));
@@ -77,18 +81,41 @@ export const ListWrap = ({
   const { mutateAsync: settlementsTransactionSummary } = useSettlementsTransactionSummaryMutation();
   const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
 
-  const callList = () => {
+  const callList = (option?: {
+    type?: string
+  }) => {
+    setOnActionIntersect(false);
     if(periodType === SettlementPeriodType.SETTLEMENT_DATE){
-      callSettlementList();
+      callSettlementList(option);
     }
     else if(periodType === SettlementPeriodType.TRANSACTION_DATE){
-      callTransactionList();
+      callTransactionList(option);
     }
   };
 
+  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 && !!nextCursor){
+          callList({
+            type: 'page'
+          });
+        } 
+      }
+      else{
+        console.log('Element is no longer intersecting with the root.');
+      }
+    });
+  };
+
+  const { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });
+
   const callSettlementList = (option?: {
-    sortType?: SortTypeKeys, 
+    type?: string
-    val?: string
   }) => {
     let listSummaryParams: SettlementsHistorySummaryParams = {
       mid: mid,
@@ -100,16 +127,41 @@ export const ListWrap = ({
     let listParams: SettlementsHistoryParams = {
       ...listSummaryParams,
       ...{
-        page: pageParam
+        page: {
+          ...pageParam,
+          ...{ sortType: sortType }
+        }
       }
     };
+    if(option?.type === 'page'){
       if(listParams.page){
-			listParams.page.sortType = (option?.sortType)? option.sortType: sortType;
+        listParams.page.cursor = nextCursor;
-    	setPageParam(listParams.page);
+      }
+    }
+    else{
+      setNextCursor(null);
+      if(listParams.page){
+        listParams.page.cursor = null;
+      }
     }
 
     settlementsHistory(listParams).then((rs: SettlementsHistoryResponse) => {
+      if(option?.type === 'page'){
+        setSettlementDateListItems([
+          ...settlementDateListItems,
+          ...rs.content
+        ]);
+      }
+      else{
         setSettlementDateListItems(rs.content);
+      }
+      if(rs.hasNext){
+        setNextCursor(rs.nextCursor);
+        setOnActionIntersect(true);
+      }
+      else{
+        setNextCursor(null);
+      }
     });
     settlementsHistorySummary(listSummaryParams).then((rs: SettlementsHistorySummaryResponse) => {
       setSettlementAmount(rs.settlementAmount || 0);
@@ -122,7 +174,8 @@ export const ListWrap = ({
   };
   const callTransactionList = (option?: {
     sortType?: SortTypeKeys, 
-    val?: string
+    val?: string,
+    type?: string
   }) => {
     let params = {
       mid: mid,
@@ -143,9 +196,36 @@ export const ListWrap = ({
 			params.page.sortType = option?.sortType || sortType;
     	setPageParam(params.page);
 		}
+    if(option?.type === 'page'){
+      if(params.page){
+        params.page.cursor = nextCursor;
+      }
+    }
+    else{
+      setNextCursor(null);
+      if(params.page){
+        params.page.cursor = null;
+      }
+    }
 
     settlementsTransactionList(params).then((rs) => {
+      if(option?.type === 'page'){
+        setTransactionDateListItems([
+          ...transactionDatelistItems,
+          ...rs.content
+        ]);
+      }
+      else{
         setTransactionDateListItems(rs.content);
+      }
+      if(rs.hasNext){
+        setNextCursor(rs.nextCursor);
+        setOnActionIntersect(true);
+      }
+      else{
+        setNextCursor(null);
+      }
+      
     });
     settlementsTransactionSummary(summaryParams).then((rs) => {
       setSettlementAmount(rs.settlementAmount);
@@ -160,26 +240,10 @@ export const ListWrap = ({
   
   const onClickToSort = (sort: SortTypeKeys) => {
     setSortType(sort);
-    if(periodType === SettlementPeriodType.SETTLEMENT_DATE){
-      callSettlementList({
-        sortType: sort
-      });
-    }
-    else if(periodType === SettlementPeriodType.TRANSACTION_DATE){
-      callTransactionList({
-        sortType: sort
-      });
-    }
   };
   const changePeriodType = (val: SettlementPeriodType) => {
     if(val !== periodType){
       setPeriodType(val);
-      if(val === SettlementPeriodType.SETTLEMENT_DATE){
-        callSettlementList();
-      }
-      else if(val === SettlementPeriodType.TRANSACTION_DATE){
-        callTransactionList();
-      }
     }
   };
   
@@ -302,9 +366,10 @@ export const ListWrap = ({
   }, []);
 
   useEffect(() => {
+    setNextCursor(null);
     callList();
   }, [
-    mid, periodType, 
+    mid, periodType, sortType,
     startDate, endDate,
     paymentMethod
   ]);  
@@ -414,6 +479,7 @@ export const ListWrap = ({
       { (periodType === SettlementPeriodType.TRANSACTION_DATE) && 
         getTransactionDateListDateGroup()
       }
+      <div ref={ setTarget }></div>
       </div>
       <ListFilter
         filterOn={ filterOn }

src/pages/support/faq/list-page.tsx

@@ -21,7 +21,6 @@ export const FaqListPage = () => {
 
   const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
   const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
-  const [nextCursor, setNextCursor] = useState<string | null>(null);
   const [searchValue, setSearchValue] = useState<string>('');
   const [selectedCategory, setSelectedCategory] = useState<string>('');
   const [resultList, setResultList] = useState<Array<FaqItem>>([]);
@@ -39,7 +38,7 @@ export const FaqListPage = () => {
     entries.forEach((entry: IntersectionObserverEntry) => {
       if(entry.isIntersecting){
         console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
-        if(onActionIntersect && !!nextCursor){
+        if(onActionIntersect && !!pageParam.cursor){
           callList('page');
         } 
       }
@@ -64,17 +63,9 @@ export const FaqListPage = () => {
         page: pageParam
       }
     };
-    if(type === 'page'){
+    if(type !== 'page' && listParams.page){
-      if(listParams.page){
-        listParams.page.cursor = nextCursor;
-      }
-    }
-    else{
-      setNextCursor(null);
-      if(listParams.page){
       listParams.page.cursor = null;
     }
-    }
     
     faqList(listParams).then((rs: FaqListResponse) => {
       if(type === 'page'){
@@ -87,11 +78,17 @@ export const FaqListPage = () => {
         setResultList(rs.content);
       }
       if(rs.hasNext){
-        setNextCursor(rs.nextCursor);
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: rs.nextCursor }
+        });
         setOnActionIntersect(true);
       }
       else{
-        setNextCursor(null);
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: null }
+        });
       }
     });
   };
@@ -127,7 +124,6 @@ export const FaqListPage = () => {
   };
 
   useEffect(() => {
-    setNextCursor(null);
     callList();
   }, [selectedCategory]);
 

src/pages/support/notice/list-page.tsx

@@ -6,7 +6,7 @@ import { useNoticeListMutation } from '@/entities/support/api/use-notice-list-mu
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
 import { InformCl, NoticeItem, NoticeListParams, NoticeListResponse, SearchCl } from '@/entities/support/model/types';
 import { SupportNoticeItem } from '@/entities/support/ui/notice-item';
-import { HeaderType } from '@/entities/common/model/types';
+import { DefaultRequestPagination, HeaderType } from '@/entities/common/model/types';
 import {
 	useSetHeaderTitle,
 	useSetHeaderType,
@@ -20,8 +20,7 @@ export const NoticeListPage = () => {
   const { t } = useTranslation();
 
   const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
-  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+  const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
-  const [nextCursor, setNextCursor] = useState<string | null>(null);
   const [informCl, setInformCl] = useState<InformCl | string>('');
   const [searchKeyword, setSearchKeyword] = useState<string>('');
   const [resultList, setResultList] = useState<Array<NoticeItem>>([]);
@@ -39,7 +38,7 @@ export const NoticeListPage = () => {
     entries.forEach((entry: IntersectionObserverEntry) => {
       if(entry.isIntersecting){
         console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
-        if(onActionIntersect && !!nextCursor){
+        if(onActionIntersect && !!pageParam.cursor){
           callList('page');
         } 
       }
@@ -63,17 +62,9 @@ export const NoticeListPage = () => {
         page: pageParam
       }
     };
-     if(type === 'page'){
+    if(type !== 'page' && listParams.page){
-      if(listParams.page){
-        listParams.page.cursor = nextCursor;
-      }
-    }
-    else{
-      setNextCursor(null);
-      if(listParams.page){
       listParams.page.cursor = null;
     }
-    }
 
     noticeList(listParams).then((rs: NoticeListResponse) => {
       if(type === 'page'){
@@ -86,11 +77,17 @@ export const NoticeListPage = () => {
         setResultList(rs.content);
       }
       if(rs.hasNext){
-        setNextCursor(rs.nextCursor);
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: rs.nextCursor }
+        });
         setOnActionIntersect(true);
       }
       else{
-        setNextCursor(null);
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: rs.nextCursor }
+        });
       }
     });
   };
@@ -121,7 +118,6 @@ export const NoticeListPage = () => {
   };
 
   useEffect(() => {
-    setNextCursor(null);
     callList();
   }, [informCl]);
 

src/pages/support/qna/list-page.tsx

@@ -26,7 +26,6 @@ export const QnaListPage = () => {
   const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
   const [mid, setMid] = useState<string>(userMid);
   const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
-  const [nextCursor, setNextCursor] = useState<string | null>(null);
   const [statusCode, setStatusCode] = useState<string>(''); // 02, 03
   const [resultList, setResultList] = useState<Array<QnaItem>>([]);
  
@@ -43,13 +42,10 @@ export const QnaListPage = () => {
     entries.forEach((entry: IntersectionObserverEntry) => {
       if(entry.isIntersecting){
         console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
-        if(onActionIntersect && !!nextCursor){
+        if(onActionIntersect && !!pageParam.cursor){
           callList('page');
         } 
       }
-      else{
-        console.log('Element is no longer intersecting with the root.');
-      }
     });
   };
 
@@ -67,13 +63,7 @@ export const QnaListPage = () => {
         page: pageParam
       }
     };
-    if(type === 'page'){
+    if(type !== 'page'){
-      if(listParams.page){
-        listParams.page.cursor = nextCursor;
-      }
-    }
-    else{
-      setNextCursor(null);
       if(listParams.page){
         listParams.page.cursor = null;
       }
@@ -90,11 +80,17 @@ export const QnaListPage = () => {
         setResultList(rs.content);
       }
       if(rs.hasNext){
-        setNextCursor(rs.nextCursor);
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: rs.nextCursor }
+        });
         setOnActionIntersect(true);
       }
       else{
-        setNextCursor(null);
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: null }
+        });
       }
     });
   };
@@ -126,13 +122,8 @@ export const QnaListPage = () => {
   };
 
   useEffect(() => {
-    setNextCursor(null);
     callList();
-  }, [statusCode]);
+  }, [mid, statusCode]);
-
-  useEffect(() => {
-    
-  }, [resultList]);
 
   return (
     <>
@@ -172,7 +163,7 @@ export const QnaListPage = () => {
               </div>
               <div className="inq-list" >
                 { getQnaList() }
-                <div ref={setTarget}></div>
+                <div ref={ setTarget }></div>
               </div>
             </div>
             <div className="apply-row">