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:
@@ -1,4 +1,5 @@
|
|||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||||
import { SmsPaymentDetailResendProps } from '../../../additional-service/model/sms-payment/types';
|
import { SmsPaymentDetailResendProps } from '../../../additional-service/model/sms-payment/types';
|
||||||
import { useExtensionSmsResendMutation } from '../../api/sms-payment/use-extension-sms-resend-mutation';
|
import { useExtensionSmsResendMutation } from '../../api/sms-payment/use-extension-sms-resend-mutation';
|
||||||
@@ -12,7 +13,8 @@ export const SmsPaymentDetailResend = ({
|
|||||||
mid,
|
mid,
|
||||||
tid
|
tid
|
||||||
}: SmsPaymentDetailResendProps) => {
|
}: SmsPaymentDetailResendProps) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
const variants = {
|
const variants = {
|
||||||
hidden: { y: '100%' },
|
hidden: { y: '100%' },
|
||||||
visible: { y: '0%' },
|
visible: { y: '0%' },
|
||||||
@@ -32,13 +34,13 @@ export const SmsPaymentDetailResend = ({
|
|||||||
sendMessage: smsDetailData.sendMessage
|
sendMessage: smsDetailData.sendMessage
|
||||||
}).then((rs) => {
|
}).then((rs) => {
|
||||||
if (rs.status) {
|
if (rs.status) {
|
||||||
snackBar("SMS 발송을 성공하였습니다.")
|
snackBar(t('additionalService.sms.sendSuccess'))
|
||||||
} else {
|
} else {
|
||||||
snackBar(`[실패] ${rs.error?.message}`)
|
snackBar(t('additionalService.sms.sendFailed', { message: rs.error?.message }))
|
||||||
}
|
}
|
||||||
setBottomSmsPaymentDetailResendOn(false);
|
setBottomSmsPaymentDetailResendOn(false);
|
||||||
}).catch((error) => {
|
}).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-header">
|
||||||
<div className="bottomsheet-title">
|
<div className="bottomsheet-title">
|
||||||
<h2>SMS 상세 & 재발송</h2>
|
<h2>{t('additionalService.sms.smsDetailAndResend')}</h2>
|
||||||
<button
|
<button
|
||||||
className="close-btn"
|
className="close-btn"
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src={ IMAGE_ROOT + '/ico_close.svg' }
|
src={ IMAGE_ROOT + '/ico_close.svg' }
|
||||||
alt="닫기"
|
alt={t('common.close')}
|
||||||
onClick={ () => onClickToClose() }
|
onClick={ () => onClickToClose() }
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="resend-info">
|
<div className="resend-info">
|
||||||
<div className="resend-row">발신자(번호) : {smsDetailData?.senderName || '-'}({smsDetailData?.senderNumber || '-'})</div>
|
<div className="resend-row">{t('additionalService.sms.sender')} : {smsDetailData?.senderName || '-'}({smsDetailData?.senderNumber || '-'})</div>
|
||||||
<div className="resend-row">수신자(번호) : {smsDetailData?.receiverName || '-'}({smsDetailData?.receiverNumber || '-'})</div>
|
<div className="resend-row">{t('additionalService.sms.receiver')} : {smsDetailData?.receiverName || '-'}({smsDetailData?.receiverNumber || '-'})</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="resend-box">
|
<div className="resend-box">
|
||||||
<p className="resend-text">{smsDetailData?.sendMessage || '-'}</p>
|
<p className="resend-text">{smsDetailData?.sendMessage || '-'}</p>
|
||||||
@@ -88,7 +90,7 @@ export const SmsPaymentDetailResend = ({
|
|||||||
onClick={onClickResend}
|
onClick={onClickResend}
|
||||||
disabled={!smsDetailData?.sendMessage}
|
disabled={!smsDetailData?.sendMessage}
|
||||||
>
|
>
|
||||||
신청
|
{t('common.request')}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
@@ -28,6 +29,7 @@ export const SmsPaymentFilter = ({
|
|||||||
setToDate,
|
setToDate,
|
||||||
setSmsCl
|
setSmsCl
|
||||||
}: SmsPaymentFilterProps) => {
|
}: SmsPaymentFilterProps) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
const [filterMid, setFilterMid] = useState<string>(mid);
|
const [filterMid, setFilterMid] = useState<string>(mid);
|
||||||
const [filterSearchCl, setFilterSearchCl] = useState<SmsPaymentSearchCl>(searchCl);
|
const [filterSearchCl, setFilterSearchCl] = useState<SmsPaymentSearchCl>(searchCl);
|
||||||
@@ -52,14 +54,14 @@ export const SmsPaymentFilter = ({
|
|||||||
];
|
];
|
||||||
|
|
||||||
let searchTypeOption = [
|
let searchTypeOption = [
|
||||||
{ name: '주문자', value: SmsPaymentSearchCl.BUYER_NAME },
|
{ name: t('transaction.fields.buyerName'), value: SmsPaymentSearchCl.BUYER_NAME },
|
||||||
{ name: '수신번호', value: SmsPaymentSearchCl.RECEIVE_PHONE_NUMBER },
|
{ name: t('additionalService.sms.receivePhoneNumber'), value: SmsPaymentSearchCl.RECEIVE_PHONE_NUMBER },
|
||||||
]
|
]
|
||||||
|
|
||||||
let smsTypeOption = [
|
let smsTypeOption = [
|
||||||
{ name: '전체', value: SmsCl.ALL },
|
{ name: t('additionalService.sms.all'), value: SmsCl.ALL },
|
||||||
{ name: '가상계좌\n요청', value: SmsCl.VACCOUNT_REQ },
|
{ name: t('additionalService.sms.virtualAccountReqShort'), value: SmsCl.VACCOUNT_REQ },
|
||||||
{ name: '가상계좌\n요청+입금', value: SmsCl.VACCOUNT_REQ_DEPOSIT },
|
{ name: t('additionalService.sms.virtualAccountReqDepositShort'), value: SmsCl.VACCOUNT_REQ_DEPOSIT },
|
||||||
]
|
]
|
||||||
|
|
||||||
const onClickToClose = () => {
|
const onClickToClose = () => {
|
||||||
@@ -78,7 +80,7 @@ export const SmsPaymentFilter = ({
|
|||||||
>
|
>
|
||||||
<div className="full-menu-container">
|
<div className="full-menu-container">
|
||||||
<div className="full-menu-header">
|
<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">
|
<div className="full-menu-actions">
|
||||||
<FullMenuClose
|
<FullMenuClose
|
||||||
addClass='full-menu-close'
|
addClass='full-menu-close'
|
||||||
@@ -89,13 +91,13 @@ export const SmsPaymentFilter = ({
|
|||||||
|
|
||||||
<div className="option-list pt-16 pb-86">
|
<div className="option-list pt-16 pb-86">
|
||||||
<FilterSelectMid
|
<FilterSelectMid
|
||||||
title='가맹점'
|
title={t('filter.merchant')}
|
||||||
selectSetter={setFilterMid}
|
selectSetter={setFilterMid}
|
||||||
showType={'GID'}
|
showType={'GID'}
|
||||||
></FilterSelectMid>
|
></FilterSelectMid>
|
||||||
|
|
||||||
<FilterSelectInput
|
<FilterSelectInput
|
||||||
title='주문자,수신번호'
|
title={t('additionalService.sms.buyerReceiveNumber')}
|
||||||
selectValue={searchCl}
|
selectValue={searchCl}
|
||||||
selectSetter={setSearchCl}
|
selectSetter={setSearchCl}
|
||||||
selectOptions={searchTypeOption}
|
selectOptions={searchTypeOption}
|
||||||
@@ -109,7 +111,7 @@ export const SmsPaymentFilter = ({
|
|||||||
setEndDate={setFilterToDate}
|
setEndDate={setFilterToDate}
|
||||||
></FilterCalendar>
|
></FilterCalendar>
|
||||||
<FilterButtonGroups
|
<FilterButtonGroups
|
||||||
title='조회결과'
|
title={t('additionalService.sms.queryResult')}
|
||||||
activeValue={filterSmsCl}
|
activeValue={filterSmsCl}
|
||||||
btnGroups={smsTypeOption}
|
btnGroups={smsTypeOption}
|
||||||
setter={setFilterSmsCl}
|
setter={setFilterSmsCl}
|
||||||
@@ -119,7 +121,7 @@ export const SmsPaymentFilter = ({
|
|||||||
<button
|
<button
|
||||||
className="btn-50 btn-blue flex-1"
|
className="btn-50 btn-blue flex-1"
|
||||||
onClick={() => onClickToSetFilter()}
|
onClick={() => onClickToSetFilter()}
|
||||||
>적용</button>
|
>{t('filter.apply')}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|||||||
@@ -876,6 +876,7 @@
|
|||||||
"canceled": "Canceled"
|
"canceled": "Canceled"
|
||||||
},
|
},
|
||||||
"sms": {
|
"sms": {
|
||||||
|
"title": "SMS Payment Notification",
|
||||||
"virtualAccountRequest": "Virtual Account Request",
|
"virtualAccountRequest": "Virtual Account Request",
|
||||||
"virtualAccountRequestDeposit": "Virtual Account Request + Deposit",
|
"virtualAccountRequestDeposit": "Virtual Account Request + Deposit",
|
||||||
"smsDetailAndResend": "SMS Details & Resend",
|
"smsDetailAndResend": "SMS Details & Resend",
|
||||||
@@ -883,7 +884,13 @@
|
|||||||
"receiver": "Receiver (Number)",
|
"receiver": "Receiver (Number)",
|
||||||
"sendSuccess": "SMS sent successfully.",
|
"sendSuccess": "SMS sent successfully.",
|
||||||
"sendFailed": "[Failed] {{message}}",
|
"sendFailed": "[Failed] {{message}}",
|
||||||
"sendFailedGeneric": "[Failed] Request failed."
|
"sendFailedGeneric": "[Failed] Request failed.",
|
||||||
|
"all": "All",
|
||||||
|
"virtualAccountReqShort": "Virtual Account\nRequest",
|
||||||
|
"virtualAccountReqDepositShort": "Virtual Account\nRequest+Deposit",
|
||||||
|
"buyerReceiveNumber": "Buyer,Receive Number",
|
||||||
|
"receivePhoneNumber": "Receive Phone Number",
|
||||||
|
"queryResult": "Query Result"
|
||||||
},
|
},
|
||||||
"linkPay": {
|
"linkPay": {
|
||||||
"sendRequest": "Send Request",
|
"sendRequest": "Send Request",
|
||||||
|
|||||||
@@ -876,6 +876,7 @@
|
|||||||
"canceled": "취소완료"
|
"canceled": "취소완료"
|
||||||
},
|
},
|
||||||
"sms": {
|
"sms": {
|
||||||
|
"title": "SMS 결제 통보",
|
||||||
"virtualAccountRequest": "가상계좌 요청",
|
"virtualAccountRequest": "가상계좌 요청",
|
||||||
"virtualAccountRequestDeposit": "가상계좌 요청 + 입금",
|
"virtualAccountRequestDeposit": "가상계좌 요청 + 입금",
|
||||||
"smsDetailAndResend": "SMS 상세 & 재발송",
|
"smsDetailAndResend": "SMS 상세 & 재발송",
|
||||||
@@ -883,7 +884,13 @@
|
|||||||
"receiver": "수신자(번호)",
|
"receiver": "수신자(번호)",
|
||||||
"sendSuccess": "SMS 발송을 성공하였습니다.",
|
"sendSuccess": "SMS 발송을 성공하였습니다.",
|
||||||
"sendFailed": "[실패] {{message}}",
|
"sendFailed": "[실패] {{message}}",
|
||||||
"sendFailedGeneric": "[실패] 신청을 실패하였습니다."
|
"sendFailedGeneric": "[실패] 신청을 실패하였습니다.",
|
||||||
|
"all": "전체",
|
||||||
|
"virtualAccountReqShort": "가상계좌\n요청",
|
||||||
|
"virtualAccountReqDepositShort": "가상계좌\n요청+입금",
|
||||||
|
"buyerReceiveNumber": "주문자,수신번호",
|
||||||
|
"receivePhoneNumber": "수신번호",
|
||||||
|
"queryResult": "조회결과"
|
||||||
},
|
},
|
||||||
"linkPay": {
|
"linkPay": {
|
||||||
"sendRequest": "발송요청",
|
"sendRequest": "발송요청",
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||||
import { SmsPaymentDetailResend } from '@/entities/additional-service/ui/sms-payment/sms-payment-detail-resend';
|
import { SmsPaymentDetailResend } from '@/entities/additional-service/ui/sms-payment/sms-payment-detail-resend';
|
||||||
@@ -25,6 +26,7 @@ import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access
|
|||||||
import useIntersectionObserver from '@/widgets/intersection-observer';
|
import useIntersectionObserver from '@/widgets/intersection-observer';
|
||||||
|
|
||||||
export const SmsPaymentPage = () => {
|
export const SmsPaymentPage = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
const { navigate } = useNavigate();
|
const { navigate } = useNavigate();
|
||||||
const userMid = useStore.getState().UserStore.mid;
|
const userMid = useStore.getState().UserStore.mid;
|
||||||
|
|
||||||
@@ -70,7 +72,7 @@ export const SmsPaymentPage = () => {
|
|||||||
onIntersect
|
onIntersect
|
||||||
});
|
});
|
||||||
|
|
||||||
useSetHeaderTitle('SMS 결제 통보');
|
useSetHeaderTitle(t('additionalService.sms.title'));
|
||||||
useSetHeaderType(HeaderType.LeftArrow);
|
useSetHeaderType(HeaderType.LeftArrow);
|
||||||
useSetFooterMode(false);
|
useSetFooterMode(false);
|
||||||
useSetOnBack(() => {
|
useSetOnBack(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user