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:
Jay Sheen
2025-10-31 12:29:15 +09:00
parent 21f8a634f4
commit 1e65a67674
4 changed files with 28 additions and 23 deletions

View File

@@ -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}

View File

@@ -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>
</>
);

View File

@@ -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}

View File

@@ -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>
</>
);