필터 추가

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 }

src/shared/ui/filter/select-input.tsx

@@ -0,0 +1,56 @@
+import { ChangeEvent } from 'react';
+
+export interface FilterSelectInputProps {
+  title: string;
+  selectValue: string;
+  selectSetter: (value: any) => void;
+  selectOptions: Array<Record<string, string>>;
+  inputValue: string;
+  inputSetter: (value: any) => void;
+};
+export const FilterSelectInput = ({
+  title,
+  selectValue,
+  selectSetter,
+  selectOptions,
+  inputValue,
+  inputSetter
+}: FilterSelectInputProps) => {
+  
+  const getSelectOptions = () => {
+    let rs = [];
+    for(let i=0;i<selectOptions.length;i++){
+      rs.push(
+        <option
+          key={ `key-filter-select-input-${i}` }
+          value={ selectOptions[i]?.value }
+        >{ selectOptions[i]?.name }</option>
+      );
+    }
+    return rs;
+  };
+
+  return (
+    <>
+      <div className="opt-field">
+        <div className="opt-label">{ title }</div>
+        <div className="opt-controls">
+          <select 
+            className="w-110"
+            value={ selectValue } 
+            onChange={ (e: any) => selectSetter(e.target.value)}
+          >
+          { getSelectOptions() }
+          </select>
+          <input
+            className="flex-1"
+            type="text"
+            placeholder=""
+            value={ inputValue }
+            onChange={ (e: ChangeEvent<HTMLInputElement>) => inputSetter(e.target.value)}
+          />
+        </div>
+      </div>
+    </>
+  );
+};

src/shared/ui/filter/select.tsx

@@ -0,0 +1,43 @@
+export interface FilterSelectProps {
+  title: string;
+  selectValue: string;
+  selectSetter: (value: any) => void;
+  selectOptions: Array<Record<string, string>>;
+};
+export const FilterSelect = ({
+  title,
+  selectValue,
+  selectSetter,
+  selectOptions,
+}: FilterSelectProps) => {
+
+  const getSelectOptions = () => {
+    let rs = [];
+    for(let i=0;i<selectOptions.length;i++){
+      rs.push(
+        <option
+          key={ `key-filter-select-input-${i}` }
+          value={ selectOptions[i]?.value }
+        >{ selectOptions[i]?.name }</option>
+      );
+    }
+    return rs;
+  };
+  
+  return (
+    <>
+      <div className="opt-field">
+        <div className="opt-label">{ title }</div>
+        <div className="opt-controls">
+          <select 
+            className="flex-1"
+            value={ selectValue } 
+            onChange={ (e: any) => selectSetter(e.target.value)}
+          >
+            { getSelectOptions() }
+          </select>
+        </div>
+      </div>
+    </>
+  );
+};