Apply localization to account-holder-search pages

- Replace hardcoded Korean text with i18n translation keys
- Update page titles, form labels, and button text
- Localize error messages and console logs
- Apply to list page, detail page, and request page
- Support dynamic language switching (ko/en)

🤖 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 11:09:40 +09:00
parent 255db14404
commit 25fe5f75c4
3 changed files with 31 additions and 29 deletions

View File

@@ -51,7 +51,7 @@ export const AccountHolderSearchPage = () => {
const [resultStatus, setResultStatus] = useState<AccountHolderResultStatus>(AccountHolderResultStatus.ALL);
const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
useSetHeaderTitle('계좌성명조회');
useSetHeaderTitle(t('additionalService.services.accountHolderSearch'));
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
@@ -196,11 +196,11 @@ export const AccountHolderSearchPage = () => {
/>
<button
className="filter-btn"
aria-label="필터"
aria-label={t('filter.filter')}
>
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt="검색옵션"
alt={t('filter.searchOptions')}
onClick={() => onClickToOpenFilter()}
/>
</button>
@@ -211,7 +211,7 @@ export const AccountHolderSearchPage = () => {
>
<img
src={IMAGE_ROOT + '/ico_download.svg'}
alt="다운로드"
alt={t('filter.download')}
/>
</button>
</div>
@@ -222,8 +222,8 @@ export const AccountHolderSearchPage = () => {
sortType={sortType}
onClickToSort={onClickToSort}
sortOptions={[
{ key: SortTypeKeys.LATEST, label: '최신순' },
{ key: SortTypeKeys.OLDEST, label: '오래된순' }
{ key: SortTypeKeys.LATEST, label: t('common.latest') },
{ key: SortTypeKeys.OLDEST, label: t('common.oldest') }
]}
></SortTypeBox>
<div className="excrow">

View File

@@ -27,7 +27,7 @@ export const AccountHolderSearchDetailPage = () => {
const [detail, setDetail] = useState<ExtensionAccountHolderSearchDetailResponse>();
useSetHeaderTitle('계좌성명조회 상세');
useSetHeaderTitle(t('additionalService.services.accountHolderSearch') + ' ' + t('common.detail'));
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
@@ -67,34 +67,34 @@ export const AccountHolderSearchDetailPage = () => {
</div>
<div className="detail-divider"></div>
<div className="pay-detail">
<div className="detail-title"> </div>
<div className="detail-title">{t('transaction.fields.detailInfo')}</div>
<ul className="kv-list">
<li className="kv-row">
<span className="k"></span>
<span className="k">{t('transaction.fields.accountHolder')}</span>
<span className="v">{detail?.accountName}</span>
</li>
<li className="kv-row">
<span className="k"> </span>
<span className="k">{t('additionalService.accountHolderAuth.requestDate')}</span>
<span className="v">{getDate(detail?.requestDate)}</span>
</li>
<li className="kv-row">
<span className="k"></span>
<span className="k">{t('common.result')}</span>
<span className="v">{getAccountHolderStatusText(t)(detail?.resultStatus)}</span>
</li>
<li className="kv-row">
<span className="k"></span>
<span className="k">{t('transaction.fields.failureReason')}</span>
<span className="v">{detail?.failReason ? detail?.failReason : '-' }</span>
</li>
<li className="kv-row">
<span className="k"></span>
<span className="k">{t('transaction.fields.bank')}</span>
<span className="v">{detail?.bankName}</span>
</li>
<li className="kv-row">
<span className="k"></span>
<span className="k">{t('transaction.fields.accountNo')}</span>
<span className="v">{detail?.accountNo}</span>
</li>
<li className="kv-row">
<span className="k"> </span>
<span className="k">{t('additionalService.accountHolderAuth.requestWay')}</span>
<span className="v">{detail?.requestWay}</span>
</li>
</ul>

View File

@@ -13,14 +13,16 @@ import { ExtensionAccountHolderSearchRequestParams } from '@/entities/additional
import { useStore } from '@/shared/model/store';
import { NumericFormat } from 'react-number-format';
import { snackBar } from '@/shared/lib';
import { useTranslation } from 'react-i18next';
export const AccountHolderSearchRequestPage = () => {
const { navigate } = useNavigate();
const { t } = useTranslation();
const userMid = useStore.getState().UserStore.mid;
const midOptionsWithoutGids = useStore.getState().UserStore.selectOptionsMidsWithoutGids;
const bankList = useStore.getState().CommonStore.bankList
useSetHeaderTitle('계좌성명조회 신청');
useSetHeaderTitle(t('additionalService.services.accountHolderSearch') + ' ' + t('common.request'));
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
@@ -58,25 +60,25 @@ export const AccountHolderSearchRequestPage = () => {
accountNo: formData.accountNo
}
console.log("계좌성명 조회 조회신청 요청 파라미터 : ", reuqestParams);
console.log("Account holder search request params: ", reuqestParams);
accountHolderSearchRequest(reuqestParams)
.then((response) => {
if (response.status) {
console.log("계좌성명 조회 조회 신청 성공 응답: ", response.status)
snackBar("계좌성명 조회 신청을 성공하였습니다.")
console.log("Account holder search request success: ", response.status)
snackBar(t('common.requestSuccess'))
navigate(PATHS.additionalService.accountHolderSearch.list);
} else {
const errorMessage = response.error?.message || '계좌성명 조회 신청이 실패하였습니다.';
snackBar(`[실패] ${errorMessage}`);
const errorMessage = response.error?.message || t('common.requestFailed');
snackBar(`[${t('common.failed')}] ${errorMessage}`);
}
})
.catch((error) => {
console.error("계좌성명 조회 조회 신청 실패: ", error)
console.error("Account holder search request failed: ", error)
const errorMessage = error?.response?.data?.error?.message ||
error?.message ||
'계좌성명 조회 신청 중 오류가 발생했습니다.';
snackBar(`[실패] ${errorMessage}`);
t('common.errorOccurred');
snackBar(`[${t('common.failed')}] ${errorMessage}`);
})
};
@@ -96,7 +98,7 @@ export const AccountHolderSearchRequestPage = () => {
<div className="option-list">
<div className="billing-form gap-16">
<div className="billing-row">
<div className="billing-label"></div>
<div className="billing-label">{t('filter.merchant')}</div>
<div className="billing-field">
<select value={formData.mid} onChange={(e) => handleInputChange('mid', e.target.value)}>
{
@@ -112,10 +114,10 @@ export const AccountHolderSearchRequestPage = () => {
</div>
<div className="billing-row">
<div className="billing-label"></div>
<div className="billing-label">{t('transaction.fields.bank')}</div>
<div className="billing-field">
<select value={formData.bankCode} onChange={(e) => handleInputChange('bankCode', e.target.value)}>
<option value=""></option>
<option value="">{t('common.pleaseSelect')}</option>
{
bankList
.filter((bank) => bank.code1 !== '****')
@@ -131,7 +133,7 @@ export const AccountHolderSearchRequestPage = () => {
</div>
<div className="billing-row">
<div className="billing-label"></div>
<div className="billing-label">{t('transaction.fields.accountNo')}</div>
<div className="billing-field">
<NumericFormat
value={formData.accountNo}
@@ -155,7 +157,7 @@ export const AccountHolderSearchRequestPage = () => {
className="btn-50 btn-blue flex-1"
disabled={!isFormValid()}
onClick={() => onClickToRequest()}
></button>
>{t('common.request')}</button>
</div>
</div>
</div>