하단 배너

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

@@ -0,0 +1,55 @@
+import { useStore } from "@/shared/model/store";
+import { ChangeEvent, useEffect, useState } from "react";
+
+export interface FilterSelectMidProps {
+  title: string;
+  selectValue: string;
+  selectSetter: (value: any) => void;
+};
+export const FilterSelectMid = ({
+  title,
+  selectValue,
+  selectSetter,
+}: FilterSelectMidProps) => {
+  const midOptions = useStore.getState().UserStore.selectOptionsMids;
+  const userMid = useStore.getState().UserStore.mid;
+
+  const [filterMid, setFilterMid] = useState<string>(userMid);
+
+  const getSelectMidOptions = () => {
+    let rs = [];
+    for(let i=0;i<midOptions.length;i++){
+      rs.push(
+        <option
+          key={ `key-filter-select-${i}` }
+          value={ midOptions[i]?.value }
+        >{ midOptions[i]?.name }</option>
+      );
+    }
+    return rs;
+  };
+  const onChangeMidSelect = (val: string) => {
+    setFilterMid(val);
+  };
+
+  useEffect(() => {
+
+  }, [filterMid]);
+  
+  return (
+    <>
+      <div className="opt-field">
+        <div className="opt-label">{ title }</div>
+        <div className="opt-controls">
+          <select 
+            className="flex-1"
+            value={ filterMid } 
+            onChange={ (e: ChangeEvent<HTMLSelectElement>) => onChangeMidSelect(e.target.value)}
+          >
+            { getSelectMidOptions() }
+          </select>
+        </div>
+      </div>
+    </>
+  );
+};