mid 관련 수정

src/entities/merchant/ui/info-wrap.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { ChangeEvent, useEffect, useState } from 'react';
 import { useMerchantMidMutation } from '../api/use-merchant-mid-mutation';
 import { BusinessSection } from './section/business-section';
 import { ManagerSection } from './section/manager-section';
@@ -11,47 +11,43 @@ import {
 import { useStore } from '@/shared/model/store';
 
 export const InfoWrap = () => {
-  const userMids = useStore.getState().UserStore.userMids;
   const midOptions = useStore.getState().UserStore.selectOptionsMids;
-  const mid = useStore.getState().UserStore.mid;
+  const userMid = useStore.getState().UserStore.mid;
 
+  const [mid, setMid] = useState<string>(userMid);
   const [data, setData] = useState<MerchantMidResponse>();
 
   const [openChild, setOpenChild] = useState<SectionKeys | null>(null);
   
   const { mutateAsync: merchantMid } = useMerchantMidMutation();
 
-  const callInfo = (selectedMid: string) => {
+  const callInfo = () => {
     let params: MerchantMidParams = {
-      mid: selectedMid
+      mid: mid
     };
     merchantMid(params).then((rs: MerchantMidResponse) => {
       setData(rs);
     });
   };
 
-  const onChangeMid = (value: string) => {
-    callInfo(value);
-  };
-
   useEffect(() => {
     if(!!mid){
-      callInfo(mid);
+      callInfo();
     }
-  }, []);
+  }, [mid]);
 
   return (
     <>
       <div className="input-wrapper top-select mt-30">
         <select
-          onChange={ (e) => onChangeMid(e.target.value) }
+          value={ mid }
+          onChange={ (e: ChangeEvent<HTMLSelectElement>) => setMid(e.target.value) }
         >
         { 
           midOptions.map((value, index) => (
             <option
               key={ value.value }
               value={ value.value }
-              selected={ (mid === value.value)? true: false }
             >{ value.name }</option>
           )) 
         }  

src/entities/merchant/ui/registration-status-wrap.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { ChangeEvent, useEffect, useState } from 'react';
 import { useMerchantMidStatusMutation } from '../api/use-merchant-mid-status-mutation';
 import {
   CardApplications, 
@@ -15,10 +15,10 @@ import { EscrowSection } from './section/escrow-section';
 import { useStore } from '@/shared/model/store';
 
 export const RegistrationStatusWrap = () => {
-  const userMids = useStore.getState().UserStore.userMids;
   const midOptions = useStore.getState().UserStore.selectOptionsMids;
-  const mid = useStore.getState().UserStore.mid;
+  const userMid = useStore.getState().UserStore.mid;
 
+  const [mid, setMid] = useState<string>(userMid);
   const [onlineInfomation, setOnlineInfomation] = useState<OnlineInfomation>();
   const [offlineInfomation, setOfflineInfomation] = useState<OfflineInfomation>();
   const [cardApplications, setCardApplications] = useState<Array<CardApplications>>();
@@ -27,9 +27,9 @@ export const RegistrationStatusWrap = () => {
   const [openChild, setOpenChild] = useState<SectionKeys | null>(null);
   const { mutateAsync: merchantMidStatus } = useMerchantMidStatusMutation();
 
-  const callInfo = (selectedMid: string) => {
+  const callInfo = () => {
     let params: MerchantMidStatusParams = {
-      mid: selectedMid
+      mid: mid
     };
     merchantMidStatus(params).then((rs: MerchantMidStatusResponse) => {
       setOnlineInfomation(rs.onlineInfomation);
@@ -39,28 +39,24 @@ export const RegistrationStatusWrap = () => {
     });
   };
 
-  const onChangeMid = (value: string) => {
-    callInfo(value);
-  };
-
   useEffect(() => {
     if(!!mid){
-      callInfo(mid);
+      callInfo();
     }
-  }, []);
+  }, [mid]);
 
   return (
     <>
       <div className="input-wrapper top-select mt-30">
         <select
-          onChange={ (e) => onChangeMid(e.target.value) }
+          value={ mid }
+          onChange={ (e: ChangeEvent<HTMLSelectElement>) => setMid(e.target.value) }
         >
         { 
           midOptions.map((value, index) => (
             <option
               key={ value.value }
               value={ value.value }
-              selected={ (mid === value.value)? true: false }
             >{ value.name }</option>
           )) 
         }