Localize key-in payment and fund account components
Replace all hardcoded Korean text with i18n translation keys in key-in payment list and fund account components including tab navigation and wrap components. Components localized: - key-in-payment-list: Payment request button - fund-account/tab: Transfer request and result inquiry tab buttons - fund-account/transfer-list-wrap: Balance, won unit, transfer registration notice and button - fund-account/result-list-wrap: Request/success/fail labels, won units, transfer registration button All text now supports multi-language through translation keys. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -269,14 +269,14 @@ export const FundAccountResultListWrap = () => {
|
||||
>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_download.svg'}
|
||||
alt="다운로드"
|
||||
alt={t('common.search')}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="summary-extend">
|
||||
<ul className="summary-amount-list">
|
||||
<li className="summary-amount-item">
|
||||
<span className="label">요청</span>
|
||||
<span className="label">{t('additionalService.common.request')}</span>
|
||||
<span className="value">
|
||||
<span>
|
||||
<NumericFormat
|
||||
@@ -285,7 +285,7 @@ export const FundAccountResultListWrap = () => {
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
</span>
|
||||
<span className="unit"> 원 (</span>
|
||||
<span className="unit"> {t('additionalService.fundAccount.won')} (</span>
|
||||
<span>
|
||||
<NumericFormat
|
||||
value={totalRequestCount}
|
||||
@@ -297,7 +297,7 @@ export const FundAccountResultListWrap = () => {
|
||||
</span>
|
||||
</li>
|
||||
<li className="summary-amount-item">
|
||||
<span className="label">성공</span>
|
||||
<span className="label">{t('additionalService.common.success')}</span>
|
||||
<span className="value">
|
||||
<span>
|
||||
<NumericFormat
|
||||
@@ -306,7 +306,7 @@ export const FundAccountResultListWrap = () => {
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
</span>
|
||||
<span className="unit"> 원 (</span>
|
||||
<span className="unit"> {t('additionalService.fundAccount.won')} (</span>
|
||||
<span>
|
||||
<NumericFormat
|
||||
value={totalSuccessCount}
|
||||
@@ -318,7 +318,7 @@ export const FundAccountResultListWrap = () => {
|
||||
</span>
|
||||
</li>
|
||||
<li className="summary-amount-item">
|
||||
<span className="label">실패</span>
|
||||
<span className="label">{t('additionalService.common.fail')}</span>
|
||||
<span className="value">
|
||||
<span>
|
||||
<NumericFormat
|
||||
@@ -327,7 +327,7 @@ export const FundAccountResultListWrap = () => {
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
</span>
|
||||
<span className="unit"> 원 (</span>
|
||||
<span className="unit"> {t('additionalService.fundAccount.won')} (</span>
|
||||
<span>
|
||||
<NumericFormat
|
||||
value={totalFailCount}
|
||||
@@ -371,7 +371,7 @@ export const FundAccountResultListWrap = () => {
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={ onClickToNavigate }
|
||||
>이체 등록</button>
|
||||
>{t('additionalService.fundAccount.transferRegistration')}</button>
|
||||
</div>
|
||||
<FundAccountResultFilter
|
||||
filterOn={filterOn}
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import {
|
||||
FundAccountTabKeys,
|
||||
FundAccountTabProps
|
||||
import {
|
||||
FundAccountTabKeys,
|
||||
FundAccountTabProps
|
||||
} from '../../model/fund-account/types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export const FundAccountTab = ({
|
||||
activeTab
|
||||
}: FundAccountTabProps) => {
|
||||
const { navigate } = useNavigate();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const onClickToNavigation = (tab: FundAccountTabKeys) => {
|
||||
if(activeTab !== tab){
|
||||
@@ -23,14 +26,14 @@ export const FundAccountTab = ({
|
||||
return (
|
||||
<>
|
||||
<div className="subTab">
|
||||
<button
|
||||
<button
|
||||
className={`subtab-btn ${(activeTab === FundAccountTabKeys.TransferList)? 'active': ''}` }
|
||||
onClick={ () => onClickToNavigation(FundAccountTabKeys.TransferList) }
|
||||
>이체 신청</button>
|
||||
<button
|
||||
onClick={ () => onClickToNavigation(FundAccountTabKeys.TransferList) }
|
||||
>{t('additionalService.fundAccount.tabTransferRequest')}</button>
|
||||
<button
|
||||
className={`subtab-btn ${(activeTab === FundAccountTabKeys.ResultList)? 'active': ''}` }
|
||||
onClick={ () => onClickToNavigation(FundAccountTabKeys.ResultList) }
|
||||
>결과 조회</button>
|
||||
onClick={ () => onClickToNavigation(FundAccountTabKeys.ResultList) }
|
||||
>{t('additionalService.fundAccount.tabResultInquiry')}</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -254,26 +254,26 @@ export const FundAccountTransferListWrap = () => {
|
||||
>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_download.svg'}
|
||||
alt="다운로드"
|
||||
alt={t('common.search')}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="account-frame">
|
||||
<div className="credit-summary">
|
||||
<div className="row">
|
||||
<span className="label">잔액</span>
|
||||
<span className="label">{t('additionalService.fundAccount.balance')}</span>
|
||||
<span className="amount22">
|
||||
<NumericFormat
|
||||
value={balance}
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat><span className="unit">원</span>
|
||||
></NumericFormat><span className="unit">{t('additionalService.fundAccount.won')}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="notice-bar style-note">
|
||||
<span><span>※</span> 이체 등록 후에는 별도 ‘이체요청'처리를 해야 이체가 실행됩니다. 미요청 시 이체 미진행.</span>
|
||||
<span><span>※</span> {t('additionalService.fundAccount.transferRegistrationNotice')}</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -305,7 +305,7 @@ export const FundAccountTransferListWrap = () => {
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={onClickToNavigate}
|
||||
>이체 등록</button>
|
||||
>{t('additionalService.fundAccount.transferRegistration')}</button>
|
||||
</div>
|
||||
<FundAccountTransactionFilter
|
||||
filterOn={filterOn}
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { ListDateGroup } from '../list-date-group';
|
||||
import { KeyInPaymentListItem, KeyInPaymentListProps } from '../../model/key-in/types';
|
||||
import { JSX } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export const KeyInPaymentList = ({
|
||||
additionalServiceCategory,
|
||||
@@ -10,6 +11,7 @@ export const KeyInPaymentList = ({
|
||||
mid
|
||||
}: KeyInPaymentListProps) => {
|
||||
const { navigate } = useNavigate();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const getListDateGroup = () => {
|
||||
let rs = [];
|
||||
@@ -69,7 +71,7 @@ export const KeyInPaymentList = ({
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={() => onClickToNavigate()}
|
||||
>결제 신청</button>
|
||||
>{t('additionalService.linkPay.paymentRequest')}</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user