가맹점관리

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

@@ -8,35 +8,51 @@ import {
   MerchantMidParams,
   MerchantMidResponse
 } from '../model/types';
+import { useStore } from '@/shared/model/store';
 
 export const InfoWrap = () => {
+  const userMids = useStore.getState().UserStore.userMids;
+  const midOptions = useStore.getState().UserStore.selectOptionsMids;
 
-  const [mid, setMid] = useState<string>('nictest00m');
+  const [mid, setMid] = useState<string | undefined>(userMids[0]);
   const [data, setData] = useState<MerchantMidResponse>();
 
   const [openChild, setOpenChild] = useState<InfoWrapKeys | null>(null);
+  
   const { mutateAsync: merchantMid } = useMerchantMidMutation();
 
-  const callInfo = () => {
+  const callInfo = (selectedMid?: string) => {
     let params: MerchantMidParams = {
-      mid: mid,
+      mid: selectedMid || mid
     };
     merchantMid(params).then((rs: MerchantMidResponse) => {
       setData(rs);
     });
   };
 
+  const onChangeMid = (value: string) => {
+    setMid(value);
+    callInfo(value);
+  };
+
   useEffect(() => {
-    // callInfo();
+    callInfo();
   }, []);
 
   return (
     <>
       <div className="input-wrapper top-select mt-30">
-        <select>
-          <option value="1">nicetest00g</option>
-          <option value="2">nicetest00g</option>
-          <option value="3">nicetest00g</option>
+        <select
+          onChange={ (e) => onChangeMid(e.target.value) }
+        >
+        { 
+          midOptions.map((value, index) => (
+            <option
+              key={ value.value }
+              value={ value.value }
+            >{ value.name }</option>
+          )) 
+        }  
         </select>
       </div>
 

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

@@ -12,10 +12,13 @@ import {
 import { OnlineInfoWrap } from './info-wrap/online-info-wrap';
 import { CardInfoWrap } from './info-wrap/card-info-wrap';
 import { EscrowInfoWrap } from './info-wrap/escrow-info-wrap';
+import { useStore } from '@/shared/model/store';
 
 export const RegistrationStatusWrap = () => {
+  const userMids = useStore.getState().UserStore.userMids;
+  const midOptions = useStore.getState().UserStore.selectOptionsMids;
 
-  const [mid, setMid] = useState<string>('nictest00m');
+  const [mid, setMid] = useState<string | undefined>(userMids[0]);
   const [onlineInfomation, setOnlineInfomation] = useState<OnlineInfomation>();
   const [offlineInfomation, setOfflineInfomation] = useState<OfflineInfomation>();
   const [cardApplications, setCardApplications] = useState<Array<CardApplications>>();
@@ -24,9 +27,9 @@ export const RegistrationStatusWrap = () => {
   const [openChild, setOpenChild] = useState<InfoWrapKeys | null>(null);
   const { mutateAsync: merchantMidStatus } = useMerchantMidStatusMutation();
 
-  const callInfo = () => {
+  const callInfo = (selectedMid?: string) => {
     let params: MerchantMidStatusParams = {
-      mid: mid
+      mid: selectedMid || mid
     };
     merchantMidStatus(params).then((rs: MerchantMidStatusResponse) => {
       setOnlineInfomation(rs.onlineInfomation);
@@ -36,17 +39,29 @@ export const RegistrationStatusWrap = () => {
     });
   };
 
+  const onChangeMid = (value: string) => {
+    setMid(value);
+    callInfo(value);
+  };
+
   useEffect(() => {
-    // callInfo();
+    callInfo();
   }, []);
 
   return (
     <>
       <div className="input-wrapper top-select mt-30">
-        <select>
-          <option value="1">nicetest00g</option>
-          <option value="2">nicetest00g</option>
-          <option value="3">nicetest00g</option>
+        <select
+          onChange={ (e) => onChangeMid(e.target.value) }
+        >
+        { 
+          midOptions.map((value, index) => (
+            <option
+              key={ value.value }
+              value={ value.value }
+            >{ value.name }</option>
+          )) 
+        }  
         </select>
       </div>
       <div className="merchant-info">