mid 변경

src/entities/common/model/types.ts

@@ -77,6 +77,7 @@ export interface HeaderNavigationProps {
   setMenuOn: (menuOn: boolean) => void;
   favoriteEdit?: boolean;
   loginSuccess: boolean;
+  mid?: string;
   setMid: (mid: string) => void;
 };
 

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

@@ -15,8 +15,11 @@ export const InfoWrap = () => {
   const { t } = useTranslation();
   const midOptionsWithoutGids = useStore.getState().UserStore.selectOptionsMidsWithoutGids;
   const userMid = useStore.getState().UserStore.mid;
+  let midItem = midOptionsWithoutGids.filter((value, index) => {
+    return value.value === userMid;
+  });
 
-  const [mid, setMid] = useState<string>(userMid);
+  const [mid, setMid] = useState<string>((midItem.length > 0)? userMid: '');
   const [data, setData] = useState<MerchantMidResponse>();
 
   const [openChild, setOpenChild] = useState<SectionKeys | null>(null);

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

@@ -17,10 +17,13 @@ import { useStore } from '@/shared/model/store';
 
 export const RegistrationStatusWrap = () => {
   const { t } = useTranslation();
-  const midOptionsWithoutGids = useStore.getState().UserStore.selectOptionsMidsWithoutGids;
+  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>(userMid);
+  const [mid, setMid] = useState<string>((midItem.length > 0)? userMid: '');
   const [onlineInfomation, setOnlineInfomation] = useState<OnlineInfomation>();
   const [offlineInfomation, setOfflineInfomation] = useState<OfflineInfomation>();
   const [cardApplications, setCardApplications] = useState<Array<CardApplications>>();
@@ -55,7 +58,7 @@ export const RegistrationStatusWrap = () => {
           onChange={ (e: ChangeEvent<HTMLSelectElement>) => setMid(e.target.value) }
         >
         { 
-          midOptionsWithoutGids.map((value, index) => (
+          midOptions.map((value, index) => (
             <option
               key={ value.value }
               value={ value.value }

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">