필터 추가

src/entities/transaction/ui/filter/billing-filter.tsx

@@ -1,7 +1,13 @@
 import moment from 'moment';
+import { useEffect } from 'react';
 import { ChangeEvent, useState } from 'react';
 import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
+import { FilterSelect } from '@/shared/ui/filter/select';
+import { FilterSelectInput } from '@/shared/ui/filter/select-input';
+import { FilterCalendar } from '@/shared/ui/filter/filter-calendar';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
 import { 
   BillingFilterProps,
   BillingPaymentMethod,
@@ -9,11 +15,6 @@ import {
   BillingRequestStatus,
   BillingSearchType
 } from '../../model/types';
-import { FilterDateOptions } from '@/entities/common/model/types';
-import { FilterCalendar } from '@/shared/ui/filter/filter-calendar';
-import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
-import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
-import { useEffect } from 'react';
 
 export const BillingFilter = ({
   filterOn,
@@ -50,11 +51,7 @@ export const BillingFilter = ({
   const [filterPaymentMethod, setFilterPaymentMethod] = useState<BillingPaymentMethod>(paymentMethod);
   const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
   const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
-  const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
-  const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
-
-  const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
-
+  
   const variants = {
     hidden: { x: '100%' },
     visible: { x: '0%' },
@@ -79,6 +76,13 @@ export const BillingFilter = ({
     setPaymentMethod(filterPaymentMethod);
     onClickToClose();
 	};
+  let MidOptions = [
+    {name: 'nictest001m', value: 'nictest001m'}
+  ];
+  let SearchTypeOptions = [
+    {name: '주문번호', value: BillingSearchType.ORDER_NUMBER },
+    {name: 'TID', value: BillingSearchType.TID }
+  ];
 
   let requestStatusBtnGroup = [
     {name: '전체', value: BillingRequestStatus.ALL},
@@ -134,36 +138,22 @@ export const BillingFilter = ({
           </div>
       
           <div className="option-list pt-16">
-            <div className="opt-field">
-              <div className="opt-label">가맹점</div>
-              <div className="opt-controls">
-                <select className="flex-1">
-                  <option>nictest001m</option>
-                </select>
-              </div>
-            </div>
-
-            <div className="opt-field">
-              <div className="opt-label">주문번호/ID</div>
-              <div className="opt-controls">
-                <select 
-                  className="w-110"
-                  value={ filterSearchType } 
-                  onChange={ (e: any) => setFilterSearchType(e.target.value)}
-                >
-                  <option value={ BillingSearchType.ORDER_NUMBER }>주문번호</option>
-                  <option value={ BillingSearchType.TID }>ID</option>
-                </select>
-                <input
-                  className="flex-1"
-                  type="text"
-                  placeholder=""
-                  value={ filterSearchKeyword }
-                  onChange={ (e: ChangeEvent<HTMLInputElement>) => setFilterSearchKeyword(e.target.value)}
-                />
-              </div>
-            </div>
+            <FilterSelect
+              title='가맹점'
+              selectValue={ mid }
+              selectSetter={ setMid }
+              selectOptions={ MidOptions }
+            ></FilterSelect>
+            <FilterSelectInput
+              title='주문번호/ID'
+              selectValue={ searchType }
+              selectSetter={ setSearchType }
+              selectOptions={ SearchTypeOptions }
+              inputValue={ searchKeyword }
+              inputSetter={ setSearchKeyword }
+            ></FilterSelectInput>
             <FilterCalendar
+              title='조회기간'
               startDate={ filterStartDate }
               endDate={ filterEndDate }
               setStartDate={ setFilterStartDate }