Localize all additional-service filter components

Replace all hardcoded Korean text with i18n translation keys in
6 filter components covering payout, fund account, alimtalk,
face authentication, and account holder authentication.

Components localized:
- payout-filter: Filter title, merchant, search criteria, period, payment status, transaction amount
- fund-account-transaction-filter: Select option, merchant, recipient/account, period, bank, processing result
- fund-account-result-filter: Search criteria, recipient/account, period, bank, processing result
- alimtalk-filter: Merchant, order/TID, payment method, notification category, period, send type/category
- face-auth-filter: Merchant, member ID, period, transaction type, authentication result
- account-holder-auth-filter: Merchant, period, payment status

All filter headers, close buttons, and apply buttons now use dynamic translations.

🤖 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:27:09 +09:00
parent dfe7152631
commit 21f8a634f4
6 changed files with 49 additions and 49 deletions

View File

@@ -58,7 +58,7 @@ export const AccountHolderAuthFilter = ({
>
<div className="full-menu-container">
<div className="full-menu-header">
<div className="full-menu-title center"></div>
<div className="full-menu-title center">{t('filter.filter')}</div>
<div className="full-menu-actions">
<button
id="closeFullMenu"
@@ -66,7 +66,7 @@ export const AccountHolderAuthFilter = ({
>
<img
src={IMAGE_ROOT + '/ico_close.svg'}
alt="닫기"
alt={t('filter.close')}
onClick={() => onClickToClose()}
/>
</button>
@@ -75,7 +75,7 @@ export const AccountHolderAuthFilter = ({
<div className="option-list pt-16">
<FilterSelectMid
title='가맹점'
title={t('filter.merchant')}
selectSetter={setFilterMid}
showType={'GID'}
></FilterSelectMid>
@@ -88,7 +88,7 @@ export const AccountHolderAuthFilter = ({
></FilterCalendar>
<FilterButtonGroups
title='지급상태'
title={t('additionalService.payout.paymentStatus')}
activeValue={filterAuthStatus}
btnGroups={getAuthStatusBtnGroup(t)}
setter={setFilterAuthStatus}
@@ -98,7 +98,7 @@ export const AccountHolderAuthFilter = ({
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToSetFilter()}
></button>
>{t('filter.apply')}</button>
</div>
</div>
</motion.div>

View File

@@ -68,7 +68,7 @@ export const FaceAuthFilter = ({
>
<div className="full-menu-container">
<div className="full-menu-header">
<div className="full-menu-title center"></div>
<div className="full-menu-title center">{t('filter.filter')}</div>
<div className="full-menu-actions">
<button
id="closeFullMenu"
@@ -76,7 +76,7 @@ export const FaceAuthFilter = ({
>
<img
src={IMAGE_ROOT + '/ico_close.svg'}
alt="닫기"
alt={t('filter.close')}
onClick={() => onClickToClose()}
/>
</button>
@@ -85,13 +85,13 @@ export const FaceAuthFilter = ({
<div className="option-list pt-16">
<FilterSelectMid
title='가맹점'
title={t('filter.merchant')}
selectSetter={setFilterMid}
showType={'GID'}
></FilterSelectMid>
<FilterInput
title='가맹점회원ID'
title={t('additionalService.faceAuth.merchantMemberId')}
inputValue={filterMemberId}
inputSetter={setFilterMemberId}
></FilterInput>
@@ -104,14 +104,14 @@ export const FaceAuthFilter = ({
></FilterCalendar>
<FilterButtonGroups
title='거래유형'
title={t('additionalService.faceAuth.transactionType')}
activeValue={filterTransType}
btnGroups={getTransactionTypeBtnGroup(t)}
setter={setFIlterTransType}
></FilterButtonGroups>
<FilterButtonGroups
title='인증결과'
title={t('additionalService.faceAuth.authenticationResult')}
activeValue={filterAuthResult}
btnGroups={getAuthResultBtnGroup(t)}
setter={setFilterAuthResult}
@@ -121,7 +121,7 @@ export const FaceAuthFilter = ({
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToSetFilter()}
></button>
>{t('filter.apply')}</button>
</div>
</div>
</motion.div>

View File

@@ -121,7 +121,7 @@ export const AlimtalkFilter = ({
>
<div className="full-menu-container">
<div className="full-menu-header">
<div className="full-menu-title center"></div>
<div className="full-menu-title center">{t('filter.filter')}</div>
<div className="full-menu-actions">
<button
id="closeFullMenu"
@@ -129,7 +129,7 @@ export const AlimtalkFilter = ({
>
<img
src={IMAGE_ROOT + '/ico_close.svg'}
alt="닫기"
alt={t('filter.close')}
onClick={() => onClickToClose()}
/>
</button>
@@ -137,12 +137,12 @@ export const AlimtalkFilter = ({
</div>
<div className="option-list pt-16">
<FilterSelectMid
title='가맹점'
title={t('filter.merchant')}
selectSetter={setFilterMid}
showType={ 'GID' }
></FilterSelectMid>
<FilterSelectInput
title='주문자,TID'
title={t('additionalService.alimtalk.orderOrTid')}
selectValue={filterSearchCl}
selectSetter={setFilterSearchCl}
selectOptions={getAlimtalkSearchClOptionGroup(t)}
@@ -150,32 +150,32 @@ export const AlimtalkFilter = ({
inputSetter={setFilterSearchValue}
></FilterSelectInput>
<FilterSelect
title='결제수단'
title={t('filter.paymentMethod')}
selectValue={filterServiceCode}
selectSetter={setFilterServiceCode}
selectOptions={getAlimtalkServiceCodeOptionGroup(t)}
></FilterSelect>
<FilterButtonGroups
title='알림구분'
title={t('additionalService.alimtalk.notificationCategory')}
activeValue={filterAlimCl}
btnGroups={alimClBtnGroup}
setter={setFilterAlimCl}
></FilterButtonGroups>
<FilterCalendar
title='조회기간'
title={t('filter.period')}
startDate={filterFromDate}
endDate={filterToDate}
setStartDate={setFilterFromDate}
setEndDate={setFilterToDate}
></FilterCalendar>
<FilterButtonGroups
title='발송 종류'
title={t('additionalService.alimtalk.sendType')}
activeValue={filterSendType}
btnGroups={getAlimtalkSendTypeBtnGroup(t)}
setter={setFilterSendType}
></FilterButtonGroups>
<FilterButtonGroups
title='발송 구분'
title={t('additionalService.alimtalk.sendCategory')}
activeValue={filterSendCl}
btnGroups={getAlimtalkSendClBtnGroup(t)}
setter={setFilterSendCl}
@@ -185,7 +185,7 @@ export const AlimtalkFilter = ({
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToSetFilter()}
></button>
>{t('filter.apply')}</button>
</div>
</div>
</motion.div>

View File

@@ -66,7 +66,7 @@ export const FundAccountResultFilter = ({
const bankList = useStore.getState().CommonStore.bankList;
const bankOptions = [
{ name: '선택', value: '' },
{ name: t('additionalService.accountHolderSearch.select'), value: '' },
...bankList
.filter((bank) => bank.code1 !== '****')
.map((bank) => ({ name: bank.desc1, value: bank.code1 }))
@@ -110,7 +110,7 @@ export const FundAccountResultFilter = ({
>
<div className="full-menu-container">
<div className="full-menu-header">
<div className="full-menu-title center"></div>
<div className="full-menu-title center">{t('filter.filter')}</div>
<div className="full-menu-actions">
<button
id="closeFullMenu"
@@ -118,7 +118,7 @@ export const FundAccountResultFilter = ({
>
<img
src={IMAGE_ROOT + '/ico_close.svg'}
alt="닫기"
alt={t('filter.close')}
onClick={() => onClickToClose()}
/>
</button>
@@ -126,12 +126,12 @@ export const FundAccountResultFilter = ({
</div>
<div className="option-list pt-16">
<FilterSelectMid
title='가맹점'
title={t('filter.merchant')}
selectSetter={setFilterMid}
showType={'GID'}
></FilterSelectMid>
<FilterSelectInput
title='수취인/계좌번호'
title={t('additionalService.fundAccount.recipientOrAccountNumber')}
selectValue={filterSearchCl}
selectSetter={setFilterSearchCl}
selectOptions={getFundAccountSearchClOptionsGroup(t)}
@@ -139,26 +139,26 @@ export const FundAccountResultFilter = ({
inputSetter={setFilterSearchValue}
></FilterSelectInput>
<FilterButtonGroups
title='조회 기준'
title={t('additionalService.fundAccount.searchCriteria')}
activeValue={filterSearchDateType}
btnGroups={getFundAccountResultSearchDateTypeBtnGroup(t)}
setter={setFilterSearchDateType}
></FilterButtonGroups>
<FilterCalendar
title='조회기간'
title={t('filter.period')}
startDate={filterFromDate}
endDate={filterToDate}
setStartDate={setFilterFromDate}
setEndDate={setFilterToDate}
></FilterCalendar>
<FilterSelect
title='은행'
title={t('additionalService.accountHolderSearch.bank')}
selectValue={filterBankCode}
selectSetter={setFilterBankCode}
selectOptions={bankOptions}
></FilterSelect>
<FilterButtonGroups
title='처리 결과'
title={t('additionalService.fundAccount.processingResult')}
activeValue={filterResultStatus}
btnGroups={getFundAccountResultStatusBtnGroup(t)}
setter={setFilterResultStatus}
@@ -168,7 +168,7 @@ export const FundAccountResultFilter = ({
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToSetFilter()}
></button>
>{t('filter.apply')}</button>
</div>
</div>
</motion.div>

View File

@@ -60,7 +60,7 @@ export const FundAccountTransactionFilter = ({
const [filterStatus, setFilterStatus] = useState<FundAccountStatus>(status);
const bankList = useStore.getState().CommonStore.bankList;
const bankOptions = [
{ name: '선택', value: '' },
{ name: t('additionalService.accountHolderSearch.select'), value: '' },
...bankList
.filter((bank) => bank.code1 !== '****')
.map((bank) => ({ name: bank.desc1, value: bank.code1 }))
@@ -104,7 +104,7 @@ export const FundAccountTransactionFilter = ({
>
<div className="full-menu-container">
<div className="full-menu-header">
<div className="full-menu-title center"></div>
<div className="full-menu-title center">{t('filter.filter')}</div>
<div className="full-menu-actions">
<button
id="closeFullMenu"
@@ -112,7 +112,7 @@ export const FundAccountTransactionFilter = ({
>
<img
src={IMAGE_ROOT + '/ico_close.svg'}
alt="닫기"
alt={t('filter.close')}
onClick={() => onClickToClose()}
/>
</button>
@@ -120,12 +120,12 @@ export const FundAccountTransactionFilter = ({
</div>
<div className="option-list pt-16">
<FilterSelectMid
title='가맹점'
title={t('filter.merchant')}
selectSetter={setFilterMid}
showType={ 'GID' }
></FilterSelectMid>
<FilterSelectInput
title='수취인/계좌번호'
title={t('additionalService.fundAccount.recipientOrAccountNumber')}
selectValue={filterSearchCl}
selectSetter={setFilterSearchCl}
selectOptions={getFundAccountSearchClOptionsGroup(t)}
@@ -133,20 +133,20 @@ export const FundAccountTransactionFilter = ({
inputSetter={setFilterSearchValue}
></FilterSelectInput>
<FilterCalendar
title='조회기간'
title={t('filter.period')}
startDate={filterFromDate}
endDate={filterToDate}
setStartDate={setFilterFromDate}
setEndDate={setFilterToDate}
></FilterCalendar>
<FilterSelect
title='은행'
title={t('additionalService.accountHolderSearch.bank')}
selectValue={filterBankCode}
selectSetter={setFilterBankCode}
selectOptions={bankOptions}
></FilterSelect>
<FilterButtonGroups
title='처리 결과'
title={t('additionalService.fundAccount.processingResult')}
activeValue={filterStatus}
btnGroups={getFundAccountStatusBtnGroup(t)}
setter={setFilterStatus}
@@ -156,7 +156,7 @@ export const FundAccountTransactionFilter = ({
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToSetFilter()}
></button>
>{t('filter.apply')}</button>
</div>
</div>
</motion.div>

View File

@@ -101,7 +101,7 @@ export const PayoutFilter = ({
>
<div className="full-menu-container">
<div className="full-menu-header">
<div className="full-menu-title center"></div>
<div className="full-menu-title center">{t('filter.filter')}</div>
<div className="full-menu-actions">
<button
id="closeFullMenu"
@@ -109,7 +109,7 @@ export const PayoutFilter = ({
>
<img
src={IMAGE_ROOT + '/ico_close.svg'}
alt="닫기"
alt={t('filter.close')}
onClick={() => onClickToClose()}
/>
</button>
@@ -117,31 +117,31 @@ export const PayoutFilter = ({
</div>
<div className="option-list pt-16">
<FilterSelectMid
title='가맹점'
title={t('filter.merchant')}
selectSetter={setFilterMid}
showType={'GID'}
></FilterSelectMid>
<FilterButtonGroups
title='조회기준'
title={t('additionalService.fundAccount.searchCriteria')}
activeValue={filterSearchDateType}
btnGroups={getPayoutSearchClBtnGroup(t)}
setter={setFilterSearchDateType}
></FilterButtonGroups>
<FilterCalendar
title='조회기간'
title={t('filter.period')}
startDate={filterFromDate}
endDate={filterToDate}
setStartDate={setFilterFromDate}
setEndDate={setFilterToDate}
></FilterCalendar>
<FilterButtonGroups
title='지급상태'
title={t('additionalService.payout.paymentStatus')}
activeValue={filterStatus}
btnGroups={getPayoutDisbursementStatusBtnGroup(t)}
setter={setFilterStatus}
></FilterButtonGroups>
<FilterRangeAmount
title='거래금액'
title={t('filter.transactionAmount')}
minAmount={filterMinAmount}
maxAmount={filterMaxAmount}
setMinAmount={setFilterMinAmount}
@@ -152,7 +152,7 @@ export const PayoutFilter = ({
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToSetFilter()}
></button>
>{t('filter.apply')}</button>
</div>
</div>
</motion.div>