-부가서비스 MID 기준 SelectBox 처리 (추후 수정 가능)

- SMS 재발송 API 수정
2025-10-30 14:46:55 +09:00
parent 9d0b446ae8
commit 1ca06f8e8b
9 changed files with 106 additions and 31 deletions
--- a/src/entities/additional-service/model/sms-payment/types.ts
+++ b/src/entities/additional-service/model/sms-payment/types.ts
@@ -73,6 +73,7 @@ export interface ExtensionSmsDetailResponse {

 export interface ExtensionSmsResendParams extends ExtensionRequestParams {
  tid: string;
+  sendMessage: string;
 }


--- a/src/entities/additional-service/ui/link-payment/apply/link-payment-step1.tsx
+++ b/src/entities/additional-service/ui/link-payment/apply/link-payment-step1.tsx
@@ -4,7 +4,8 @@ import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
 import { SingleDatePicker } from '@/shared/ui/filter/single-date-picker';
 import { LinkPaymentFormData, LinkPaymentSendMethod } from '@/entities/additional-service/model/link-pay/types';
 import { NumericFormat } from 'react-number-format';
-import { ChangeEvent } from 'react';
+import { useStore } from '@/shared/model/store';
+import { useEffect } from 'react';

 interface LinkPaymentStep1Props {
  formData: LinkPaymentFormData;
@@ -13,11 +14,22 @@ interface LinkPaymentStep1Props {

 export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Props) => {
  const { navigate } = useNavigate();
+  const midOptionsWithoutGids = useStore.getState().UserStore.selectOptionsMidsWithoutGids;

  useSetOnBack(() => {
    navigate(PATHS.additionalService.linkPayment.shippingHistory);
  });

+  // MID가 비어있고 옵션이 있으면 첫 번째 옵션으로 설정
+  useEffect(() => {
+    if (!formData.mid && midOptionsWithoutGids.length > 0) {
+      const firstMid = midOptionsWithoutGids[0]?.value;
+      if (firstMid) {
+        setFormData({ ...formData, mid: firstMid });
+      }
+    }
+  }, []);
+
  const handlePaymentMethodChange = (method: LinkPaymentSendMethod) => {
    setFormData({ ...formData, sendMethod: method });
  };
@@ -26,12 +38,6 @@ export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Prop
    setFormData({ ...formData, [field]: value });
  };

-  const handleAmountChange = (value: string) => {
-    const onlyNumbers = value.replace(/[^0-9]/g, '');
-    const numericValue = onlyNumbers === '' ? 0 : parseInt(onlyNumbers, 10);
-    setFormData({ ...formData, amount: numericValue });
-  };
-
  const handleDateChange = (date: string) => {
    setFormData({ ...formData, paymentLimitDate: date });
  };
@@ -47,7 +53,14 @@ export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Prop
              value={formData.mid}
              onChange={(e) => handleInputChange('mid', e.target.value)}
            >
-              <option>nictest00m</option>
+              {
+                midOptionsWithoutGids.map((value) => (
+                  <option
+                    key={value.value}
+                    value={value.value}
+                  >{value.name}</option>
+                ))
+              }
            </select>
          </div>
        </div>
@@ -100,7 +113,7 @@ export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Prop
              thousandSeparator={true}
              onValueChange={(values) => {
                const { floatValue } = values;
-                setFormData({...formData, amount: floatValue ?? 0});
+                setFormData({ ...formData, amount: floatValue ?? 0 });
              }}
            />
          </div>
--- a/src/entities/additional-service/ui/list-item.tsx
+++ b/src/entities/additional-service/ui/list-item.tsx
@@ -608,7 +608,7 @@ export const ListItem = ({
        >{getAlimtalkSendClTypeText(sendCl)}</div>
      );
    }
-    else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment && onResendClick && resendEnabled) {
+    else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment && onResendClick) {
      rs.push(
        <div
          key="sms-payment-amount"
--- a/src/entities/additional-service/ui/sms-payment/sms-payment-detail-resend.tsx
+++ b/src/entities/additional-service/ui/sms-payment/sms-payment-detail-resend.tsx
@@ -27,7 +27,8 @@ export const SmsPaymentDetailResend = ({

    resendMessage({
      mid: mid,
-      tid: tid
+      tid: tid,
+      sendMessage: smsDetailData.sendMessage
    }).then((rs) => {
      console.log("Resend 성공: ", rs);
      appBridge.showToast("SMS 발송을 성공하였습니다.");
--- a/src/pages/additional-service/account-holder-search/request-page.tsx
+++ b/src/pages/additional-service/account-holder-search/request-page.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { HeaderType } from '@/entities/common/model/types';
@@ -17,7 +17,7 @@ import { snackBar } from '@/shared/lib';
 export const AccountHolderSearchRequestPage = () => {
    const { navigate } = useNavigate();
    const userMid = useStore.getState().UserStore.mid;
-    const midOptions = useStore.getState().UserStore.selectOptionsMids
+    const midOptionsWithoutGids = useStore.getState().UserStore.selectOptionsMidsWithoutGids;
    const bankList = useStore.getState().CommonStore.bankList

    useSetHeaderTitle('계좌성명조회 신청');
@@ -30,11 +30,23 @@ export const AccountHolderSearchRequestPage = () => {
    const { mutateAsync: accountHolderSearchRequest } = useExtensionAccountHolderSearchRequestMutation();

    const [formData, setFormData] = useState({
-        mid: userMid,
+        mid: '',
        bankCode: '',
        accountNo: ''
    })

+    // MID 초기값 설정
+    useEffect(() => {
+        if (!formData.mid && midOptionsWithoutGids.length > 0) {
+            // userMid가 옵션에 있으면 userMid 사용, 없으면 첫 번째 옵션 사용
+            const midItem = midOptionsWithoutGids.filter((value) => value.value === userMid);
+            const initialMid = (midItem.length > 0) ? userMid : midOptionsWithoutGids[0]?.value || '';
+            if (initialMid) {
+                setFormData({ ...formData, mid: initialMid });
+            }
+        }
+    }, [midOptionsWithoutGids, userMid]);
+
    const handleInputChange = (field: string, value: string) => {
        setFormData({ ...formData, [field]: value });
    };
@@ -62,8 +74,8 @@ export const AccountHolderSearchRequestPage = () => {
            .catch((error) => {
                console.error("계좌성명 조회 조회 신청 실패: ", error)
                const errorMessage = error?.response?.data?.error?.message ||
-                                    error?.message ||
-                                    '계좌성명 조회 신청 중 오류가 발생했습니다.';
+                    error?.message ||
+                    '계좌성명 조회 신청 중 오류가 발생했습니다.';
                snackBar(`[실패] ${errorMessage}`);
            })
    };
@@ -88,7 +100,7 @@ export const AccountHolderSearchRequestPage = () => {
                                    <div className="billing-field">
                                        <select value={formData.mid} onChange={(e) => handleInputChange('mid', e.target.value)}>
                                            {
-                                                midOptions.map((value) => (
+                                                midOptionsWithoutGids.map((value) => (
                                                    <option
                                                        key={value.value}
                                                        value={value.value}
--- a/src/pages/additional-service/alimtalk/setting-page.tsx
+++ b/src/pages/additional-service/alimtalk/setting-page.tsx
@@ -26,9 +26,10 @@ import { snackBar } from '@/shared/lib';

 export const AlimtalkSettingPage = () => {
  const { navigate } = useNavigate();
+  const midOptionsWithoutGids = useStore.getState().UserStore.selectOptionsMidsWithoutGids;
  const userMid = useStore.getState().UserStore.mid;

-  const [mid, setMid] = useState<string>(userMid);
+  const [mid, setMid] = useState<string>('');

  const [merchantCardApprovalFlag, setMerchantCardApprovalFlag] = useState<boolean>(false);
  const [merchantCardCancelFlag, setMerchantCardCancelFlag] = useState<boolean>(false);
@@ -122,9 +123,24 @@ export const AlimtalkSettingPage = () => {
    callSettingSave();
  };

+  // MID 초기값 설정
  useEffect(() => {
-    callSettingDetail();
-  }, []);
+    if (!mid && midOptionsWithoutGids.length > 0) {
+      // userMid가 옵션에 있으면 userMid 사용, 없으면 첫 번째 옵션 사용
+      const midItem = midOptionsWithoutGids.filter((value) => value.value === userMid);
+      const initialMid = (midItem.length > 0) ? userMid : midOptionsWithoutGids[0]?.value || '';
+      if (initialMid) {
+        setMid(initialMid);
+      }
+    }
+  }, [midOptionsWithoutGids, userMid]);
+
+  // mid가 설정되면 설정 정보 불러오기
+  useEffect(() => {
+    if (mid) {
+      callSettingDetail();
+    }
+  }, [mid]);

  return (
    <>
@@ -141,8 +157,17 @@ export const AlimtalkSettingPage = () => {
                <div className="service-merchant">
                  <div className="service-title">가맹점</div>
                  <div className="service-select">
-                    <select>
-                      <option>nictest00m</option>
+                    <select
+                      value={mid}
+                      onChange={(e) => setMid(e.target.value)}>
+                      {
+                        midOptionsWithoutGids.map((value) => (
+                          <option
+                            key={value.value}
+                            value={value.value}
+                          >{value.name}</option>
+                        ))
+                      }
                    </select>
                    <span className="ic20 arrow-down" aria-hidden="true"></span>
                  </div>
--- a/src/pages/additional-service/face-auth/face-auth-page.tsx
+++ b/src/pages/additional-service/face-auth/face-auth-page.tsx
@@ -77,7 +77,7 @@ export const FaceAuthPage = () => {

 	const callList = (type?: string) => {
 		let listParams: ExtensionFaceAuthListParams = {
-			mid: "faceauth0m",
+			mid: mid,
 			userMallId: userMallId,
 			fromDate: fromDate,
 			toDate: toDate,
--- a/src/pages/additional-service/fund-account/transfer-request-page.tsx
+++ b/src/pages/additional-service/fund-account/transfer-request-page.tsx
@@ -7,7 +7,7 @@ import {
  useSetFooterMode,
  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
-import { ChangeEvent, useState } from 'react';
+import { ChangeEvent, useState, useEffect } from 'react';
 import { ExtensionFundAccountTransferRegistParams, ExtensionFundAccountTransferRegistResponse } from '@/entities/additional-service/model/fund-account/types';
 import { useStore } from '@/shared/model/store';
 import { snackBar } from '@/shared/lib';
@@ -18,11 +18,11 @@ import { useExtensionFundAccountTransferRequestMutation } from '@/entities/addit

 export const FundAccountTransferRequestPage = () => {
  const { navigate } = useNavigate();
-  const midOptions = useStore.getState().UserStore.selectOptionsMids;
+  const midOptionsWithoutGids = useStore.getState().UserStore.selectOptionsMidsWithoutGids;
  const userMid = useStore.getState().UserStore.mid;
  const bankList = useStore.getState().CommonStore.bankList;

-  const [mid, setMid] = useState<string>(userMid);
+  const [mid, setMid] = useState<string>('');
  const [bankCode, setBankCode] = useState<string>('');
  const [accountNo, setAccountNo] = useState<string>('');
  const [accountName, setAccountName] = useState<string>('');
@@ -39,6 +39,18 @@ export const FundAccountTransferRequestPage = () => {
    navigate(PATHS.additionalService.fundAccount.transferList);
  });

+  // MID 초기값 설정
+  useEffect(() => {
+    if (!mid && midOptionsWithoutGids.length > 0) {
+      // userMid가 옵션에 있으면 userMid 사용, 없으면 첫 번째 옵션 사용
+      const midItem = midOptionsWithoutGids.filter((value) => value.value === userMid);
+      const initialMid = (midItem.length > 0) ? userMid : midOptionsWithoutGids[0]?.value || '';
+      if (initialMid) {
+        setMid(initialMid);
+      }
+    }
+  }, [midOptionsWithoutGids, userMid]);
+
  const resetForm = () => {
    setBankCode('');
    setAccountNo('');
@@ -68,8 +80,8 @@ export const FundAccountTransferRequestPage = () => {
      }
    }).catch((error) => {
      const errorMessage = error?.response?.data?.error?.message ||
-                          error?.message ||
-                          '이체등록 중 오류가 발생했습니다.';
+        error?.message ||
+        '이체등록 중 오류가 발생했습니다.';
      snackBar(`[실패] ${errorMessage}`);
    });
  };
@@ -96,9 +108,11 @@ export const FundAccountTransferRequestPage = () => {
                <div className="billing-row">
                  <div className="billing-label">가맹점<span>*</span></div>
                  <div className="billing-field">
-                    <select value={mid} onChange={(e) => setMid(e.target.value)}>
+                    <select
+                      value={mid}
+                      onChange={(e) => setMid(e.target.value)}>
                      {
-                        midOptions.map((value) => (
+                        midOptionsWithoutGids.map((value) => (
                          <option
                            key={value.value}
                            value={value.value}
--- a/src/pages/additional-service/link-payment/apply/link-payment-apply-page.tsx
+++ b/src/pages/additional-service/link-payment/apply/link-payment-apply-page.tsx
@@ -15,10 +15,19 @@ import moment from 'moment';

 export const LinkPaymentApplyPage = () => {
  const { navigate } = useNavigate();
+
+  const midOptionsWithoutGids = useStore.getState().UserStore.selectOptionsMidsWithoutGids;
  const userMid = useStore.getState().UserStore.mid;
+
+  // userMid가 midOptionsWithoutGids에 있으면 userMid 사용, 없으면 첫 번째 옵션 사용
+  let midItem = midOptionsWithoutGids.filter((value) => {
+    return value.value === userMid;
+  });
+  const initialMid = (midItem.length > 0) ? userMid : (midOptionsWithoutGids.length > 0 ? midOptionsWithoutGids[0]?.value || '' : '');
+
  const [processStep, setProcessStep] = useState<ProcessStep>(ProcessStep.One);
  const [formData, setFormData] = useState<LinkPaymentFormData>({
-    mid: userMid,
+    mid: initialMid,
    sendMethod: LinkPaymentSendMethod.SMS,
    goodsName: '',
    amount: 0,