sort 및 페이징

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

@@ -26,7 +26,8 @@ import {
   SettlementsHistoryParams,
   SettlementsHistoryResponse,
   SettlementsHistorySummaryParams,
-  SettlementsHistorySummaryResponse
+  SettlementsHistorySummaryResponse,
+  SettlementsTransactionSummaryParams
 } from '../model/types';
 import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
 import { useStore } from '@/shared/model/store';
@@ -52,7 +53,6 @@ export const ListWrap = ({
   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'));
@@ -97,7 +97,7 @@ export const ListWrap = ({
     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({
             type: 'page'
           });
@@ -133,17 +133,9 @@ export const ListWrap = ({
         }
       }
     };
-    if(option?.type === 'page'){
+    if(option?.type !== 'page' && listParams.page){
-      if(listParams.page){
-        listParams.page.cursor = nextCursor;
-      }
-    }
-    else{
-      setNextCursor(null);
-      if(listParams.page){
       listParams.page.cursor = null;
     }
-    }
 
     settlementsHistory(listParams).then((rs: SettlementsHistoryResponse) => {
       if(option?.type === 'page'){
@@ -156,11 +148,17 @@ export const ListWrap = ({
         setSettlementDateListItems(rs.content);
       }
       if(rs.hasNext){
-        setNextCursor(rs.nextCursor);
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: rs.nextCursor }
+        });
         setOnActionIntersect(true);
       }
       else{
-        setNextCursor(null);
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: null }
+        });
       }
     });
     settlementsHistorySummary(listSummaryParams).then((rs: SettlementsHistorySummaryResponse) => {
@@ -173,42 +171,32 @@ export const ListWrap = ({
     });
   };
   const callTransactionList = (option?: {
-    sortType?: SortTypeKeys, 
-    val?: string,
     type?: string
   }) => {
-    let params = {
+    let listSummaryParams: SettlementsTransactionSummaryParams = {
       mid: mid,
       periodType: periodType,
       startDate: startDate,
       endDate: endDate,
       paymentMethod: paymentMethod,
+      transactionIds: transactionIds,
       page: pageParam
     };
-    
+    let listParams = {
-    let summaryParams = {
+      ...listSummaryParams,
-      ...params,
       ...{
-        transactionIds: transactionIds
+        page: {
+          ...pageParam,
+          ...{ sortType: sortType }
+        }
       }
     };
-    if(params.page){
+    delete listParams.transactionIds;
-			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' && listParams.page){
+      listParams.page.cursor = null;
+    }
+    settlementsTransactionList(listParams).then((rs) => {
       if(option?.type === 'page'){
         setTransactionDateListItems([
           ...transactionDatelistItems,
@@ -219,15 +207,21 @@ export const ListWrap = ({
         setTransactionDateListItems(rs.content);
       }
       if(rs.hasNext){
-        setNextCursor(rs.nextCursor);
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: rs.nextCursor }
+        });
         setOnActionIntersect(true);
       }
       else{
-        setNextCursor(null);
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: null }
+        });
       }
       
     });
-    settlementsTransactionSummary(summaryParams).then((rs) => {
+    settlementsTransactionSummary(listSummaryParams).then((rs) => {
       setSettlementAmount(rs.settlementAmount);
       setTransactionAmount(rs.transactionAmount);
       setPaymentFeeAmount(rs.paymentFeeAmount);
@@ -366,7 +360,6 @@ export const ListWrap = ({
   }, []);
 
   useEffect(() => {
-    setNextCursor(null);
     callList();
   }, [
     mid, periodType, sortType,

src/entities/transaction/ui/section/settlement-info-section.tsx

@@ -106,19 +106,15 @@ export const SettlementInfoSection = ({
         >
           정산 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
         </div>
-        { (transactionCategory === TransactionCategory.AllTransaction) &&
+        
         <SlideDown className={'my-dropdown-slidedown'}>
         { !!isOpen &&
           <ul className="kv-list">
-            { subLi() }
+          { (transactionCategory === TransactionCategory.AllTransaction) && 
-            </ul>
+            subLi()
-          }
-          </SlideDown>
           }
           { (transactionCategory === TransactionCategory.Escrow) && 
-          <SlideDown className={'my-dropdown-slidedown'}>
+            <>
-          { !!isOpen &&
-            <ul className="kv-list">
               <li className="kv-row">
                 <span className="k">·&nbsp;&nbsp;승인정산일</span>
                 <span className="v">{ moment(settlementInfo?.approvalSettlementDate).format('YYYY.MM.DD') }</span>
@@ -149,10 +145,11 @@ export const SettlementInfoSection = ({
                   ></NumericFormat>
                 </span>
               </li>
+            </>
+          }
           </ul>
         }
         </SlideDown>
-        }
       </div>
     </>
   )

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

@@ -59,9 +59,7 @@ export const FaqListPage = () => {
       category: selectedCategory,
       searchCl: (!!searchValue)? SearchCl.HEAD: null,
       searchValue: searchValue,
-      ...{
       page: pageParam
-      }
     };
     if(type !== 'page' && listParams.page){
       listParams.page.cursor = null;

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

@@ -54,13 +54,12 @@ export const NoticeListPage = () => {
   });
 
   const callList = (type?: string) => {
+    setOnActionIntersect(false);
     let listParams: NoticeListParams = {
       informCl: informCl,
       searchCl: (!!searchKeyword)? SearchCl.HEAD: null,
       searchKeyword: searchKeyword,
-      ...{
       page: pageParam
-      }
     };
     if(type !== 'page' && listParams.page){
       listParams.page.cursor = null;
@@ -86,7 +85,7 @@ export const NoticeListPage = () => {
       else{
         setPageParam({
           ...pageParam,
-          ...{ cursor: rs.nextCursor }
+          ...{ cursor: null }
         });
       }
     });

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

@@ -59,9 +59,7 @@ export const QnaListPage = () => {
     let listParams: QnaListParams = {
       mid: mid,
       statusCode: statusCode,
-      ...{
       page: pageParam
-      }
     };
     if(type !== 'page'){
       if(listParams.page){

src/pages/transaction/all-transaction/list-page.tsx

@@ -98,15 +98,13 @@ export const AllTransactionListPage = () => {
     let listParams: AllTransactionListParams = {
       ...listSummaryParams,
       ...{
-        page: pageParam
+        page: {
+          ...pageParam,
+          ...{ sortType: sortType }
+        }
       }
     };
     
-    if(listParams.page){
-			listParams.page.sortType = option?.sortType || sortType;
-    	setPageParam(listParams.page);
-		}
-
     allTransactionList(listParams).then((rs: AllTransactionListResponse) => {
       console.log(rs.content)
       setListItems(rs.content);