nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Localize all additional-service filter components

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

10
src/entities/additional-service/ui/account-holder-auth/filter/account-holder-auth-filter.tsx
View File

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

14
src/entities/additional-service/ui/face-auth/filter/face-auth-filter.tsx
View File

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

20
src/entities/additional-service/ui/filter/alimtalk-filter.tsx
View File

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

20
src/entities/additional-service/ui/filter/fund-account-result-filter.tsx
View File

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

18
src/entities/additional-service/ui/filter/fund-account-trnasaction-filter.tsx
View File

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

16
src/entities/additional-service/ui/filter/payout-filter.tsx
View File

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