오류 수정

src/entities/additional-service/ui/filter/payout-filter.tsx

@@ -0,0 +1,163 @@
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { FilterSelect } from '@/shared/ui/filter/select';
+import { FilterCalendar } from '@/shared/ui/filter/calendar';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
+import { 
+  PayoutDisbursementStatus,
+  PayoutSearchCl
+} from '../../model/payout/types';
+import { 
+  PayoutSearchClBtnGroup,
+  PayoutDisbursementStatusBtnGroup
+} from '../../model/payout/constant';
+import { 
+  FilterMotionDuration, 
+  FilterMotionStyle, 
+  FilterMotionVariants
+} from '@/entities/common/model/constant';
+
+export interface PayoutFilterProps {
+  filterOn: boolean;
+  setFilterOn: (filterOn: boolean) => void;
+  mid: string;
+  searchCl: PayoutSearchCl;
+  fromDate: string;
+  toDate: string;
+  disbursementStatus: PayoutDisbursementStatus;
+  minAmount?: number | string;
+  maxAmount?: number | string;
+  setMid: (mid: string) => void;
+  setSearchCl: (searchCl: PayoutSearchCl) => void;
+  setFromDate: (fromDate: string) => void;
+  setToDate: (toDate: string) => void;
+  setDisbursementStatus: (disbursementStatus: PayoutDisbursementStatus) => void;
+  setMinAmount: (minAmount: string | number) => void;
+  setMaxAmount: (maxAmount: string | number) => void;
+};
+
+export const PayoutFilter = ({
+  filterOn,
+  setFilterOn,
+  mid,
+  searchCl,
+  fromDate,
+  toDate,
+  disbursementStatus,
+  minAmount,
+  maxAmount,
+  setMid,
+  setSearchCl,
+  setFromDate,
+  setToDate,
+  setDisbursementStatus,
+  setMinAmount,
+  setMaxAmount
+}: PayoutFilterProps) => {
+
+  const [filterMid, setFilterMid] = useState<string>(mid);
+  const [filterSearchCl, setFilterSearchCl] = useState<PayoutSearchCl>(searchCl);
+  const [filterFromDate, setFilterFromDate] = useState<string>(fromDate);
+  const [filterToDate, setFilterToDate] = useState<string>(toDate);
+  const [filterDisbursementStatus, setFilterDisbursementStatus] = useState<PayoutDisbursementStatus>(disbursementStatus);
+  const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
+  const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
+  
+  
+  const onClickToClose = () => {
+    setFilterOn(false);
+  };
+
+  const onClickToSetFilter = () => {
+    setMid(filterMid);
+    setSearchCl(filterSearchCl);
+    setFromDate(filterFromDate);
+    setToDate(filterToDate);
+    setDisbursementStatus(filterDisbursementStatus);
+    setMinAmount(filterMinAmount);
+    setMaxAmount(filterMaxAmount);
+    onClickToClose();
+  };
+
+  let MidOptions = [
+    {name: 'nictest001m', value: 'nictest001m'}
+  ];
+
+  useEffect(() => {
+    setFilterDisbursementStatus(disbursementStatus);
+  }, [disbursementStatus]);
+
+  return (
+    <>
+      <motion.div 
+        id="fullMenuModal" 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (filterOn)? 'visible': 'hidden' }
+        variants={ FilterMotionVariants }
+        transition={ FilterMotionDuration }
+        style={ FilterMotionStyle }
+      >
+        <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={ filterSearchCl }
+              btnGroups={ PayoutSearchClBtnGroup }
+              setter={ setFilterSearchCl }
+            ></FilterButtonGroups>
+            <FilterCalendar
+              title='조회기간'
+              startDate={ filterFromDate }
+              endDate={ filterToDate }
+              setStartDate={ setFilterFromDate }
+              setEndDate={ setFilterToDate }
+            ></FilterCalendar>
+            <FilterButtonGroups
+              title='지급상태'
+              activeValue={ filterDisbursementStatus }
+              btnGroups={ PayoutDisbursementStatusBtnGroup }
+              setter={ setDisbursementStatus }
+            ></FilterButtonGroups>
+            <FilterRangeAmount
+              title='거래금액'
+              minAmount={ filterMinAmount }
+              maxAmount={ filterMaxAmount }
+              setMinAmount={ setFilterMinAmount }
+              setMaxAmount={ setFilterMaxAmount }
+            ></FilterRangeAmount>
+          </div>
+          <div className="apply-row">
+            <button 
+              className="btn-50 btn-blue flex-1"
+              onClick={ () => onClickToSetFilter() }
+            >적용</button>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
+};