mid 셋팅및 코드 정리

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

@@ -11,11 +11,14 @@ import {
 } from '@/widgets/sub-layout/use-sub-layout';
 import { useExtensionListMutation } from '@/entities/additional-service/api/use-extension-list-mutation';
 import { ExtensionListParams, ExtensionListResponse } from '@/entities/additional-service/model/types';
+import { useStore } from '@/shared/model/store';
 
 export const ListPage = () => {
   const { navigate } = useNavigate();
+  const midOptions = useStore.getState().UserStore.selectOptionsMids;
+  const userMid = useStore.getState().UserStore.mid;
 
-  const [mid, setMid] = useState<string>('nictest00m');
+  const [mid, setMid] = useState<string>(userMid);
 
   const { mutateAsync: extensionList } = useExtensionListMutation();
 
@@ -26,9 +29,9 @@ export const ListPage = () => {
     navigate(PATHS.home);
   });
 
-  const callExtensionList = () => {
+  const callExtensionList = (selectedMid: string) => {
     let params: ExtensionListParams = {
-      mid: mid
+      mid: selectedMid
     }
     extensionList(params).then((rs: ExtensionListResponse) => {
       console.log(rs)
@@ -36,7 +39,7 @@ export const ListPage = () => {
   };
 
   useEffect(() => {
-    callExtensionList();
+    callExtensionList(userMid);
   }, []);
 
   const activeExtensionList = [
@@ -135,6 +138,10 @@ export const ListPage = () => {
     return rs;
   };
 
+  const onChangeMid = (value: string) => {
+    callExtensionList(value);
+  };
+
   return (
     <>
       <main>
@@ -142,11 +149,17 @@ export const ListPage = () => {
           <div className="tab-pane sub active">
             <div className="ing-list">
               <div className="input-wrapper top-select">
-                <select>
-                  <option value="1">nicetest00g</option>
-                  <option value="2">nicetest00g</option>
-                  <option value="3">nicetest00g</option>
-                </select>
+              <select onChange={ (e) => onChangeMid(e.target.value) }>
+                { 
+                  midOptions.map((value, index) => (
+                    <option
+                      key={ value.value }
+                      value={ value.value }
+                      selected={ (userMid === value.value)? true: false }
+                    >{ value.name }</option>
+                  )) 
+                } 
+              </select>
               </div>
               <h3 className="ing-title">사용중인 서비스</h3>
               { getActiveExtensionList() }