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,16 +133,8 @@ export const ListWrap = ({
         }
       }
     };
-    if(option?.type === 'page'){
-      if(listParams.page){
-        listParams.page.cursor = nextCursor;
-      }
-    }
-    else{
-      setNextCursor(null);
-      if(listParams.page){
-        listParams.page.cursor = null;
-      }
+    if(option?.type !== 'page' && listParams.page){
+      listParams.page.cursor = null;
     }
 
     settlementsHistory(listParams).then((rs: SettlementsHistoryResponse) => {
@@ -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 summaryParams = {
-      ...params,
-      ...{ 
-        transactionIds: transactionIds
+    let listParams = {
+      ...listSummaryParams,
+      ...{
+        page: {
+          ...pageParam,
+          ...{ sortType: sortType }
+        }
       }
     };
-    if(params.page){
-			params.page.sortType = option?.sortType || sortType;
-    	setPageParam(params.page);
-		}
-    if(option?.type === 'page'){
-      if(params.page){
-        params.page.cursor = nextCursor;
-      }
+    delete listParams.transactionIds;
+    
+    if(option?.type !== 'page' && listParams.page){
+      listParams.page.cursor = null;
     }
-    else{
-      setNextCursor(null);
-      if(params.page){
-        params.page.cursor = null;
-      }
-    }
-
-    settlementsTransactionList(params).then((rs) => {
+    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() }
-            </ul>
+        
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { !!isOpen &&
+          <ul className="kv-list">
+          { (transactionCategory === TransactionCategory.AllTransaction) && 
+            subLi()
           }
-          </SlideDown>
-        }
-        { (transactionCategory === TransactionCategory.Escrow) && 
-          <SlideDown className={'my-dropdown-slidedown'}>
-          { !!isOpen &&
-            <ul className="kv-list">
+          { (transactionCategory === TransactionCategory.Escrow) && 
+            <>
               <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>
+          </ul>
         }
+        </SlideDown>
       </div>
     </>
   )