- FilterSelectMid 수정

- 부가서비스 Filter Mid Select 컴포넌트 변경

src/pages/additional-service/list-page.tsx

@@ -13,12 +13,14 @@ import { useExtensionListMutation } from '@/entities/additional-service/api/use-
 import { ExtensionListParams, ExtensionListResponse, SERVICE_MAP } from '@/entities/additional-service/model/types';
 import { useStore } from '@/shared/model/store';
 import { Dialog } from '@/shared/ui/dialogs/dialog';
+import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 
 export const ListPage = () => {
   const { t } = useTranslation();
   const { navigate } = useNavigate();
   const midOptions = useStore.getState().UserStore.selectOptionsMids;
   const userMid = useStore.getState().UserStore.mid;
+  const midOptionsWithoutGids = useStore.getState().UserStore.selectOptionsMidsWithoutGids;
 
   const [mid, setMid] = useState<string>(userMid);
   const [activeServices, setActiveServices] = useState<string[]>([]);
@@ -44,6 +46,24 @@ export const ListPage = () => {
     });
   };
 
+  const getSelectMidOptions = () => {
+    let rs = [];
+    let options = midOptionsWithoutGids;
+    for (let i = 0; i < options.length; i++) {
+      rs.push(
+        <option
+          key={`key-filter-select-${i}`}
+          value={options[i]?.value}
+        >{options[i]?.name}</option>
+      );
+    }
+    return rs;
+  };
+
+  const onChangeMidSelect = (val: string) => {
+    setMid(val);
+  };
+
   const getActiveExtensionList = () => {
     const filteredServices = SERVICE_MAP.filter(service =>
       activeServices.includes(service.code)
@@ -104,16 +124,12 @@ export const ListPage = () => {
             <div className="ing-list">
               <div className="input-wrapper top-select">
                 <select
+                  className="flex-1"
                   value={mid}
-                  onChange={(e: ChangeEvent<HTMLSelectElement>) => setMid(e.target.value)}
+                  onChange={(e: ChangeEvent<HTMLSelectElement>) => onChangeMidSelect(e.target.value)}
                 >
                   {
-                    midOptions.map((value) => (
-                      <option
-                        key={value.value}
-                        value={value.value}
-                      >{value.name}</option>
-                    ))
+                    getSelectMidOptions()
                   }
                 </select>
               </div>