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 <img
src={IMAGE_ROOT + '/ico_download.svg'} src={IMAGE_ROOT + '/ico_download.svg'}
alt="다운로드" alt={t('common.search')}
/> />
</button> </button>
</div> </div>
<div className="summary-extend"> <div className="summary-extend">
<ul className="summary-amount-list"> <ul className="summary-amount-list">
<li className="summary-amount-item"> <li className="summary-amount-item">
<span className="label"></span> <span className="label">{t('additionalService.common.request')}</span>
<span className="value"> <span className="value">
<span> <span>
<NumericFormat <NumericFormat
@@ -285,7 +285,7 @@ export const FundAccountResultListWrap = () => {
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</span> </span>
<span className="unit"> (</span> <span className="unit"> {t('additionalService.fundAccount.won')} (</span>
<span> <span>
<NumericFormat <NumericFormat
value={totalRequestCount} value={totalRequestCount}
@@ -297,7 +297,7 @@ export const FundAccountResultListWrap = () => {
</span> </span>
</li> </li>
<li className="summary-amount-item"> <li className="summary-amount-item">
<span className="label"></span> <span className="label">{t('additionalService.common.success')}</span>
<span className="value"> <span className="value">
<span> <span>
<NumericFormat <NumericFormat
@@ -306,7 +306,7 @@ export const FundAccountResultListWrap = () => {
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</span> </span>
<span className="unit"> (</span> <span className="unit"> {t('additionalService.fundAccount.won')} (</span>
<span> <span>
<NumericFormat <NumericFormat
value={totalSuccessCount} value={totalSuccessCount}
@@ -318,7 +318,7 @@ export const FundAccountResultListWrap = () => {
</span> </span>
</li> </li>
<li className="summary-amount-item"> <li className="summary-amount-item">
<span className="label"></span> <span className="label">{t('additionalService.common.fail')}</span>
<span className="value"> <span className="value">
<span> <span>
<NumericFormat <NumericFormat
@@ -327,7 +327,7 @@ export const FundAccountResultListWrap = () => {
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</span> </span>
<span className="unit"> (</span> <span className="unit"> {t('additionalService.fundAccount.won')} (</span>
<span> <span>
<NumericFormat <NumericFormat
value={totalFailCount} value={totalFailCount}
@@ -371,7 +371,7 @@ export const FundAccountResultListWrap = () => {
<button <button
className="btn-50 btn-blue flex-1" className="btn-50 btn-blue flex-1"
onClick={ onClickToNavigate } onClick={ onClickToNavigate }
> </button> >{t('additionalService.fundAccount.transferRegistration')}</button>
</div> </div>
<FundAccountResultFilter <FundAccountResultFilter
filterOn={filterOn} filterOn={filterOn}

View File

@@ -4,10 +4,13 @@ import {
FundAccountTabKeys, FundAccountTabKeys,
FundAccountTabProps FundAccountTabProps
} from '../../model/fund-account/types'; } from '../../model/fund-account/types';
import { useTranslation } from 'react-i18next';
export const FundAccountTab = ({ export const FundAccountTab = ({
activeTab activeTab
}: FundAccountTabProps) => { }: FundAccountTabProps) => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const { t } = useTranslation();
const onClickToNavigation = (tab: FundAccountTabKeys) => { const onClickToNavigation = (tab: FundAccountTabKeys) => {
if(activeTab !== tab){ if(activeTab !== tab){
@@ -26,11 +29,11 @@ export const FundAccountTab = ({
<button <button
className={`subtab-btn ${(activeTab === FundAccountTabKeys.TransferList)? 'active': ''}` } className={`subtab-btn ${(activeTab === FundAccountTabKeys.TransferList)? 'active': ''}` }
onClick={ () => onClickToNavigation(FundAccountTabKeys.TransferList) } onClick={ () => onClickToNavigation(FundAccountTabKeys.TransferList) }
> </button> >{t('additionalService.fundAccount.tabTransferRequest')}</button>
<button <button
className={`subtab-btn ${(activeTab === FundAccountTabKeys.ResultList)? 'active': ''}` } className={`subtab-btn ${(activeTab === FundAccountTabKeys.ResultList)? 'active': ''}` }
onClick={ () => onClickToNavigation(FundAccountTabKeys.ResultList) } onClick={ () => onClickToNavigation(FundAccountTabKeys.ResultList) }
> </button> >{t('additionalService.fundAccount.tabResultInquiry')}</button>
</div> </div>
</> </>
); );

View File

@@ -254,26 +254,26 @@ export const FundAccountTransferListWrap = () => {
> >
<img <img
src={IMAGE_ROOT + '/ico_download.svg'} src={IMAGE_ROOT + '/ico_download.svg'}
alt="다운로드" alt={t('common.search')}
/> />
</button> </button>
</div> </div>
<div className="account-frame"> <div className="account-frame">
<div className="credit-summary"> <div className="credit-summary">
<div className="row"> <div className="row">
<span className="label"></span> <span className="label">{t('additionalService.fundAccount.balance')}</span>
<span className="amount22"> <span className="amount22">
<NumericFormat <NumericFormat
value={balance} value={balance}
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat><span className="unit"></span> ></NumericFormat><span className="unit">{t('additionalService.fundAccount.won')}</span>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<div className="notice-bar style-note"> <div className="notice-bar style-note">
<span><span></span> '처리를 해야 이체가 실행됩니다. 미요청 시 이체 미진행.</span> <span><span></span> {t('additionalService.fundAccount.transferRegistrationNotice')}</span>
</div> </div>
</section> </section>
@@ -305,7 +305,7 @@ export const FundAccountTransferListWrap = () => {
<button <button
className="btn-50 btn-blue flex-1" className="btn-50 btn-blue flex-1"
onClick={onClickToNavigate} onClick={onClickToNavigate}
>이체 등록</button> >{t('additionalService.fundAccount.transferRegistration')}</button>
</div> </div>
<FundAccountTransactionFilter <FundAccountTransactionFilter
filterOn={filterOn} filterOn={filterOn}

View File

@@ -3,6 +3,7 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { ListDateGroup } from '../list-date-group'; import { ListDateGroup } from '../list-date-group';
import { KeyInPaymentListItem, KeyInPaymentListProps } from '../../model/key-in/types'; import { KeyInPaymentListItem, KeyInPaymentListProps } from '../../model/key-in/types';
import { JSX } from 'react'; import { JSX } from 'react';
import { useTranslation } from 'react-i18next';
export const KeyInPaymentList = ({ export const KeyInPaymentList = ({
additionalServiceCategory, additionalServiceCategory,
@@ -10,6 +11,7 @@ export const KeyInPaymentList = ({
mid mid
}: KeyInPaymentListProps) => { }: KeyInPaymentListProps) => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const { t } = useTranslation();
const getListDateGroup = () => { const getListDateGroup = () => {
let rs = []; let rs = [];
@@ -69,7 +71,7 @@ export const KeyInPaymentList = ({
<button <button
className="btn-50 btn-blue flex-1" className="btn-50 btn-blue flex-1"
onClick={() => onClickToNavigate()} onClick={() => onClickToNavigate()}
> </button> >{t('additionalService.linkPay.paymentRequest')}</button>
</div> </div>
</> </>
); );