mid 변경

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { ChangeEvent, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { InfoItem } from './info-item';
@@ -32,11 +32,17 @@ import {
 import { usePaymentCardMutation } from '../api/use-payment-card-mutation';
 import { usePaymentNonCardMutation } from '../api/use-payment-non-card-mutation';
 import { usePaymentInstallmentMutation } from '../api/use-payment-installment-mutation';
+import { useStore } from '@/shared/model/store';
 
 export const InfoWrap = () => {
   const { t } = useTranslation();
+  const midOptions = useStore.getState().UserStore.selectOptionsMidsWithoutGids;
+  const userMid = useStore.getState().UserStore.mid;
+  let midItem = midOptions.filter((value, index) => {
+    return value.value === userMid;
+  });
 
-  const [mid, setMid] = useState<string>('nictest00g');
+  const [mid, setMid] = useState<string>((midItem.length > 0)? userMid: '');
 
   const [noInterestInfoBottomSheetOn, setNoInterestInfoBottomSheetOn] = useState<boolean>(false);
   const [cardCommissionBottomSheetOn, setCardCommissionBottomSheetOn] = useState<boolean>(false);
@@ -203,16 +209,34 @@ export const InfoWrap = () => {
     callPaymentIntallmentDetail(cardCompany);
   };
   useEffect(() => {
-    callPaymentCard();
-    callPaymentNonCard();
-    callPaymentIntallment();
-
-    callPaymentIntallmentDetail(cardCompany);
-
-  }, []);
+    if(mid){
+      callPaymentCard();
+      callPaymentNonCard();
+      callPaymentIntallment();
+      callPaymentIntallmentDetail(cardCompany);
+    }
+  }, [mid]);
   
   return (
     <>
+      <div 
+        className="input-wrapper top-select mt-30"
+        style={{ paddingBottom: 0}}
+      >
+        <select
+          value={ mid }
+          onChange={ (e: ChangeEvent<HTMLSelectElement>) => setMid(e.target.value) }
+        >
+        { 
+          midOptions.map((value, index) => (
+            <option
+              key={ value.value }
+              value={ value.value }
+            >{ value.name }</option>
+          )) 
+        }  
+        </select>
+      </div>
       <div className="ing-list">
         <div className="ing-title">{t('payment.serviceUsageCommissionAndSettlement')}</div>
         <ul className="ing-card-list">