SMS 결제 통보 다국어 지원 추가

- SMS 결제 통보 관련 컴포넌트에 i18n 적용
- 한글/영문 번역 키 추가 (ko.json, en.json)
- sms-payment-detail-resend, sms-payment-filter, sms-payment-page 현지화

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jay Sheen
2025-11-03 15:42:27 +09:00
parent f57a62af0b
commit 04dc3a9ebb
5 changed files with 45 additions and 25 deletions

View File

@@ -1,4 +1,5 @@
import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { SmsPaymentDetailResendProps } from '../../../additional-service/model/sms-payment/types';
import { useExtensionSmsResendMutation } from '../../api/sms-payment/use-extension-sms-resend-mutation';
@@ -12,7 +13,8 @@ export const SmsPaymentDetailResend = ({
mid,
tid
}: SmsPaymentDetailResendProps) => {
const { t } = useTranslation();
const variants = {
hidden: { y: '100%' },
visible: { y: '0%' },
@@ -32,13 +34,13 @@ export const SmsPaymentDetailResend = ({
sendMessage: smsDetailData.sendMessage
}).then((rs) => {
if (rs.status) {
snackBar("SMS 발송을 성공하였습니다.")
snackBar(t('additionalService.sms.sendSuccess'))
} else {
snackBar(`[실패] ${rs.error?.message}`)
snackBar(t('additionalService.sms.sendFailed', { message: rs.error?.message }))
}
setBottomSmsPaymentDetailResendOn(false);
}).catch((error) => {
snackBar(`[실패] ${error?.response?.data?.message || error?.response?.data?.error?.message}` || '[실패] 신청을 실패하였습니다.')
snackBar(t('additionalService.sms.sendFailed', { message: error?.response?.data?.message || error?.response?.data?.error?.message }) || t('additionalService.sms.sendFailedGeneric'))
});
}
@@ -61,22 +63,22 @@ export const SmsPaymentDetailResend = ({
>
<div className="bottomsheet-header">
<div className="bottomsheet-title">
<h2>SMS & </h2>
<button
className="close-btn"
<h2>{t('additionalService.sms.smsDetailAndResend')}</h2>
<button
className="close-btn"
type="button"
>
<img
<img
src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기"
alt={t('common.close')}
onClick={ () => onClickToClose() }
/>
</button>
</div>
</div>
<div className="resend-info">
<div className="resend-row">() : {smsDetailData?.senderName || '-'}({smsDetailData?.senderNumber || '-'})</div>
<div className="resend-row">() : {smsDetailData?.receiverName || '-'}({smsDetailData?.receiverNumber || '-'})</div>
<div className="resend-row">{t('additionalService.sms.sender')} : {smsDetailData?.senderName || '-'}({smsDetailData?.senderNumber || '-'})</div>
<div className="resend-row">{t('additionalService.sms.receiver')} : {smsDetailData?.receiverName || '-'}({smsDetailData?.receiverNumber || '-'})</div>
</div>
<div className="resend-box">
<p className="resend-text">{smsDetailData?.sendMessage || '-'}</p>
@@ -88,7 +90,7 @@ export const SmsPaymentDetailResend = ({
onClick={onClickResend}
disabled={!smsDetailData?.sendMessage}
>
{t('common.request')}
</button>
</div>
</motion.div>

View File

@@ -1,4 +1,5 @@
import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { motion } from 'framer-motion';
import { useState } from 'react';
@@ -28,6 +29,7 @@ export const SmsPaymentFilter = ({
setToDate,
setSmsCl
}: SmsPaymentFilterProps) => {
const { t } = useTranslation();
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterSearchCl, setFilterSearchCl] = useState<SmsPaymentSearchCl>(searchCl);
@@ -52,14 +54,14 @@ export const SmsPaymentFilter = ({
];
let searchTypeOption = [
{ name: '주문자', value: SmsPaymentSearchCl.BUYER_NAME },
{ name: '수신번호', value: SmsPaymentSearchCl.RECEIVE_PHONE_NUMBER },
{ name: t('transaction.fields.buyerName'), value: SmsPaymentSearchCl.BUYER_NAME },
{ name: t('additionalService.sms.receivePhoneNumber'), value: SmsPaymentSearchCl.RECEIVE_PHONE_NUMBER },
]
let smsTypeOption = [
{ name: '전체', value: SmsCl.ALL },
{ name: '가상계좌\n요청', value: SmsCl.VACCOUNT_REQ },
{ name: '가상계좌\n요청+입금', value: SmsCl.VACCOUNT_REQ_DEPOSIT },
{ name: t('additionalService.sms.all'), value: SmsCl.ALL },
{ name: t('additionalService.sms.virtualAccountReqShort'), value: SmsCl.VACCOUNT_REQ },
{ name: t('additionalService.sms.virtualAccountReqDepositShort'), value: SmsCl.VACCOUNT_REQ_DEPOSIT },
]
const onClickToClose = () => {
@@ -78,7 +80,7 @@ export const SmsPaymentFilter = ({
>
<div className="full-menu-container">
<div className="full-menu-header">
<div className="full-menu-title center"></div>
<div className="full-menu-title center">{t('filter.filter')}</div>
<div className="full-menu-actions">
<FullMenuClose
addClass='full-menu-close'
@@ -89,13 +91,13 @@ export const SmsPaymentFilter = ({
<div className="option-list pt-16 pb-86">
<FilterSelectMid
title='가맹점'
title={t('filter.merchant')}
selectSetter={setFilterMid}
showType={'GID'}
></FilterSelectMid>
<FilterSelectInput
title='주문자,수신번호'
title={t('additionalService.sms.buyerReceiveNumber')}
selectValue={searchCl}
selectSetter={setSearchCl}
selectOptions={searchTypeOption}
@@ -109,7 +111,7 @@ export const SmsPaymentFilter = ({
setEndDate={setFilterToDate}
></FilterCalendar>
<FilterButtonGroups
title='조회결과'
title={t('additionalService.sms.queryResult')}
activeValue={filterSmsCl}
btnGroups={smsTypeOption}
setter={setFilterSmsCl}
@@ -119,7 +121,7 @@ export const SmsPaymentFilter = ({
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToSetFilter()}
></button>
>{t('filter.apply')}</button>
</div>
</div>
</motion.div>