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
|
<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}
|
||||||
|
|||||||
@@ -1,13 +1,16 @@
|
|||||||
import { PATHS } from '@/shared/constants/paths';
|
import { PATHS } from '@/shared/constants/paths';
|
||||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||||
import {
|
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){
|
||||||
@@ -23,14 +26,14 @@ export const FundAccountTab = ({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="subTab">
|
<div className="subTab">
|
||||||
<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>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
@@ -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>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user