정산내역 필터

src/entities/common/model/constant.ts

@@ -8,8 +8,8 @@ export const DEFAULT_PAGE_PARAM = {
 };
 
 export const FilterMotionVariants = {
-  hidden: {x: '100%' },
-  visible: { x: '0%' },
+  hidden: {x: '100%'},
+  visible: {x: '0%'},
 };
 export const FilterMotionDuration = {
   duration: 0.3

src/entities/settlement/model/constant.ts

@@ -0,0 +1,18 @@
+import { SettlementPaymentMethod, SettlementPeriodType } from './types';
+
+export const SettlementPeriodTypeBtnGroup = [
+  {name: '정산일자', value: SettlementPeriodType.SETTLEMENT_DATE },
+  {name: '거래일자', value: SettlementPeriodType.TRANSACTION_DATE }
+];
+export const SettlementPaymentMethodOptionsGroup = [
+  {name: '전체', value: SettlementPaymentMethod.ALL},
+  {name: '신용카드', value: SettlementPaymentMethod.CREDIT_CARD},
+  {name: '가상계좌', value: SettlementPaymentMethod.VIRTUAL_ACCOUNT},
+  {name: '계좌이체', value: SettlementPaymentMethod.ACCOUNT_TRANSFER},
+  {name: '계좌간편결제', value: SettlementPaymentMethod.ACCOUNT_EASY_PAY},
+  {name: '휴대폰', value: SettlementPaymentMethod.MOBILE_PAYMENT},
+  {name: 'SSG 머니', value: SettlementPaymentMethod.SSG_MONEY},
+  {name: 'SSG 은행계좌', value: SettlementPaymentMethod.SSG_BANK_ACCOUNT},
+  {name: '문화상품권', value: SettlementPaymentMethod.CULTURE_VOUCHER},
+  {name: '티머니페이', value: SettlementPaymentMethod.TMONEY_PAY},
+];

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

@@ -1,5 +1,6 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
+import { IMAGE_ROOT } from '@/shared/constants/common';
 import { 
   SettlementPaymentMethod,
   SettlementPeriodType
@@ -9,6 +10,10 @@ import {
   FilterMotionStyle, 
   FilterMotionVariants
 } from '@/entities/common/model/constant';
+import { FilterSelect } from '@/shared/ui/filter/select';
+import { FilterCalendar } from '@/shared/ui/filter/calendar';
+import { SettlementPaymentMethodOptionsGroup, SettlementPeriodTypeBtnGroup } from '../../model/constant';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 
 export interface ListFilterProps {
   filterOn: boolean;
@@ -52,10 +57,10 @@ export const ListFilter = ({
 
   const onClickToSetFilter = () => {
     setMid(filterMid);
-    setFilterPeriodType(filterPeriodType);
+    setPeriodType(filterPeriodType);
     setStartDate(filterStartDate);
     setEndDate(filterEndDate);
-    setFilterPaymentMethod(filterPaymentMethod);
+    setPaymentMethod(filterPaymentMethod);
     onClickToClose();
   };
 
@@ -63,6 +68,10 @@ export const ListFilter = ({
     {name: 'nictest001m', value: 'nictest001m'}
   ];
 
+  useEffect(() => {
+    setFilterPeriodType(periodType);
+  }, [periodType]);
+
   return (
     <>
       <motion.div 
@@ -73,7 +82,58 @@ export const ListFilter = ({
         variants={ FilterMotionVariants }
         transition={ FilterMotionDuration }
         style={ FilterMotionStyle }
-      ></motion.div>
+      >
+        <div className="full-menu-container">
+          <div className="full-menu-header">
+            <div className="full-menu-title center">필터</div>
+            <div className="full-menu-actions">
+              <button 
+                id="closeFullMenu"
+                className="full-menu-close"
+              >
+                <img 
+                  src={ IMAGE_ROOT + '/ico_close.svg' }
+                  alt="닫기"
+                  onClick={ () => onClickToClose() }
+                />
+              </button>
+            </div>
+          </div>
+          <div className="option-list pt-16">
+            <FilterSelect
+              title='가맹점'
+              selectValue={ filterMid }
+              selectSetter={ setFilterMid }
+              selectOptions={ MidOptions }
+            ></FilterSelect>
+            <FilterButtonGroups
+              title='조회기준'
+              activeValue={ filterPeriodType }
+              btnGroups={ SettlementPeriodTypeBtnGroup }
+              setter={ setFilterPeriodType }
+            ></FilterButtonGroups>
+            <FilterCalendar
+              title='조회기간'
+              startDate={ filterStartDate }
+              endDate={ filterEndDate }
+              setStartDate={ setFilterStartDate }
+              setEndDate={ setFilterEndDate }
+            ></FilterCalendar>
+            <FilterSelect
+              title='결제수단'
+              selectValue={ filterPaymentMethod }
+              selectSetter={ setFilterPaymentMethod }
+              selectOptions={ SettlementPaymentMethodOptionsGroup }
+            ></FilterSelect>
+          </div>
+          <div className="apply-row">
+            <button 
+              className="btn-50 btn-blue flex-1"
+							onClick={ () => onClickToSetFilter() }
+            >적용</button>
+          </div>
+        </div>
+      </motion.div>
     </>
   );
 };

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>
     </>
   );
 };