정산내역 필터

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

@@ -23,6 +23,8 @@ import { ListSummaryExtendSettlement } from './list-summary-extend-settlement';
 import { ListSummaryExtendTransaction } from './list-summary-extend-transaction';
 import SlideDown from 'react-slidedown';
 import 'react-slidedown/lib/slidedown.css';
+import { ListFilter } from './filter/list-filter';
+import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
 
 export const ListWrap = () => {
   const { navigate } = useNavigate();
@@ -56,6 +58,7 @@ export const ListWrap = () => {
   const { mutateAsync: settlementsHistorySummary} = useSettlementsHistorySummaryMutation();
   const { mutateAsync: settlementsTransactionList } = useSettlementsTransactionListMutation();
   const { mutateAsync: settlementsTransactionSummary } = useSettlementsTransactionSummaryMutation();
+  const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
 
   const callList = () => {
     if(periodType === SettlementPeriodType.SETTLEMENT_DATE){
@@ -170,8 +173,8 @@ export const ListWrap = () => {
   };
   useEffect(() => {
     callList();
-  }, []);
-
+  }, [periodType]);
+  
   const getSettlementDateListDateGroup = () => {
     let rs = [];
     if(Object.keys(settlementDateListItems).length > 0){
@@ -204,6 +207,17 @@ export const ListWrap = () => {
     }
     return rs;
   };
+  const onClickToOpenFilter = () => {
+    setFilterOn(!filterOn);
+  };
+  const onClickToDownloadExcel = () => {
+    // tid??? 확인 필요
+    downloadExcel({
+      // tid: tid
+    }).then((rs) => {
+
+    });
+  };
 
   return (
     <>
@@ -220,6 +234,7 @@ export const ListWrap = () => {
               <img 
                 src={ IMAGE_ROOT + '/ico_setting.svg' } 
                 alt="검색옵션"
+                onClick={ () => onClickToOpenFilter() }
               />
             </button>
           </div>
@@ -227,6 +242,7 @@ export const ListWrap = () => {
             <img 
               src={ IMAGE_ROOT + '/ico_download.svg' }
               alt="다운로드"
+              onClick={ () => onClickToDownloadExcel() }
             />
           </button>
         </div>
@@ -309,6 +325,20 @@ export const ListWrap = () => {
         getTransactionDateListDateGroup()
       }
       </div>
+      <ListFilter
+        filterOn={ filterOn }
+        setFilterOn={ setFilterOn }
+        mid={ mid }
+        periodType={ periodType }
+        startDate={ startDate }
+        endDate={ endDate }
+        paymentMethod={ paymentMethod }
+        setMid={ setMid }
+        setPeriodType={ setPeriodType }
+        setStartDate={ setStartDate }
+        setEndDate={ setEndDate }
+        setPaymentMethod={ setPaymentMethod }
+      ></ListFilter>
     </>
   );
 };