필터 추가

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