Localize link-payment-history-filter component

- Added linkPayment filter translation keys to en.json:
  - phoneNumber, email, success, fail, kakao
  - merchant, phoneNumberEmail, transactionStatus
  - sendResult, sendMethod, apply
  - sendRequest, sendCancel, progressStatus
- Localized link-payment-history-filter.tsx:
  - Filter title and close button alt text
  - All filter section titles (merchant, phoneNumberEmail, etc.)
  - Search type options (phone, email)
  - Transaction status options (all, incomplete/active, deposit request, etc.)
  - Process result options (all, success, fail)
  - Send method options (all, SMS, email, kakao)
  - Apply button text
  - Added useTranslation hook

🤖 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 13:30:27 +09:00
parent 4e0918a89c
commit e657c5e7e6
2 changed files with 39 additions and 24 deletions

View File

@@ -15,6 +15,7 @@ import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@
import { useStore } from '@/shared/model/store'; import { useStore } from '@/shared/model/store';
import { LinkPaymentHistoryFilterProps, LinkPaymentPaymentStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus } from '@/entities/additional-service/model/link-pay/types'; import { LinkPaymentHistoryFilterProps, LinkPaymentPaymentStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus } from '@/entities/additional-service/model/link-pay/types';
import { FilterSelectMid } from '@/shared/ui/filter/select-mid'; import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
import { useTranslation } from 'react-i18next';
export const LinkPaymentHistoryFilter = ({ export const LinkPaymentHistoryFilter = ({
filterOn, filterOn,
@@ -36,7 +37,7 @@ export const LinkPaymentHistoryFilter = ({
setSendStatus, setSendStatus,
setSendMethod setSendMethod
}: LinkPaymentHistoryFilterProps) => { }: LinkPaymentHistoryFilterProps) => {
const { t } = useTranslation();
const [filterMid, setFilterMid] = useState<string>(mid); const [filterMid, setFilterMid] = useState<string>(mid);
const [filterSearchCl, setFilterSearchCl] = useState<LinkPaymentSearchCl>(searchCl); const [filterSearchCl, setFilterSearchCl] = useState<LinkPaymentSearchCl>(searchCl);
@@ -48,30 +49,30 @@ export const LinkPaymentHistoryFilter = ({
const [filterSendMethod, setFilterSendMethod] = useState<LinkPaymentSendMethod>(sendMethod); const [filterSendMethod, setFilterSendMethod] = useState<LinkPaymentSendMethod>(sendMethod);
let searchTypeOption = [ let searchTypeOption = [
{ name: '휴대폰번호', value: LinkPaymentSearchCl.PHONE }, { name: t('additionalService.linkPayment.phoneNumber'), value: LinkPaymentSearchCl.PHONE },
{ name: '이메일', value: LinkPaymentSearchCl.EMAIL }, { name: t('additionalService.linkPayment.email'), value: LinkPaymentSearchCl.EMAIL },
]; ];
let transactionStatusOption = [ let transactionStatusOption = [
{ name: '전체', value: LinkPaymentPaymentStatus.ALL }, { name: t('additionalService.linkPayment.all'), value: LinkPaymentPaymentStatus.ALL },
{ name: '미완료/활성화', value: LinkPaymentPaymentStatus.ACTIVATE }, { name: t('additionalService.linkPayment.incompleteActive'), value: LinkPaymentPaymentStatus.ACTIVATE },
{ name: '입금요청', value: LinkPaymentPaymentStatus.DEPOSIT_REQUEST }, { name: t('additionalService.linkPayment.depositRequest'), value: LinkPaymentPaymentStatus.DEPOSIT_REQUEST },
{ name: '결제완료', value: LinkPaymentPaymentStatus.PAYMENT_COMPLETE }, { name: t('additionalService.linkPayment.paymentComplete'), value: LinkPaymentPaymentStatus.PAYMENT_COMPLETE },
{ name: '결제실패', value: LinkPaymentPaymentStatus.PAYMENT_FAIL }, { name: t('additionalService.linkPayment.paymentFailed'), value: LinkPaymentPaymentStatus.PAYMENT_FAIL },
{ name: '결제중단/비활성화', value: LinkPaymentPaymentStatus.INACTIVE }, { name: t('additionalService.linkPayment.paymentStopped'), value: LinkPaymentPaymentStatus.INACTIVE },
]; ];
let processResultOption = [ let processResultOption = [
{ name: '전체', value: LinkPaymentSendStatus.ALL }, { name: t('additionalService.linkPayment.all'), value: LinkPaymentSendStatus.ALL },
{ name: '성공', value: LinkPaymentSendStatus.SUCCESS }, { name: t('additionalService.linkPayment.success'), value: LinkPaymentSendStatus.SUCCESS },
{ name: '실패', value: LinkPaymentSendStatus.FAIL }, { name: t('additionalService.linkPayment.fail'), value: LinkPaymentSendStatus.FAIL },
]; ];
let sendMethodOption = [ let sendMethodOption = [
{ name: '전체', value: LinkPaymentSendMethod.ALL }, { name: t('additionalService.linkPayment.all'), value: LinkPaymentSendMethod.ALL },
{ name: 'SMS', value: LinkPaymentSendMethod.SMS }, { name: 'SMS', value: LinkPaymentSendMethod.SMS },
{ name: '이메일', value: LinkPaymentSendMethod.EMAIL }, { name: t('additionalService.linkPayment.email'), value: LinkPaymentSendMethod.EMAIL },
{ name: '카카오', value: LinkPaymentSendMethod.KAKAO }, { name: t('additionalService.linkPayment.kakao'), value: LinkPaymentSendMethod.KAKAO },
]; ];
const onClickToClose = () => { const onClickToClose = () => {
@@ -105,7 +106,7 @@ export const LinkPaymentHistoryFilter = ({
> >
<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('common.filter')}</div>
<div className="full-menu-actions"> <div className="full-menu-actions">
<button <button
id="closeFullMenu" id="closeFullMenu"
@@ -113,7 +114,7 @@ export const LinkPaymentHistoryFilter = ({
> >
<img <img
src={IMAGE_ROOT + '/ico_close.svg'} src={IMAGE_ROOT + '/ico_close.svg'}
alt="닫기" alt={t('common.close')}
onClick={() => onClickToClose()} onClick={() => onClickToClose()}
/> />
</button> </button>
@@ -122,13 +123,13 @@ export const LinkPaymentHistoryFilter = ({
<div className="option-list pt-16"> <div className="option-list pt-16">
<FilterSelectMid <FilterSelectMid
title='가맹점' title={t('additionalService.linkPayment.merchant')}
selectSetter={setFilterMid} selectSetter={setFilterMid}
showType={'GID'} showType={'GID'}
></FilterSelectMid> ></FilterSelectMid>
<FilterSelectInput <FilterSelectInput
title='휴대폰번호/이메일' title={t('additionalService.linkPayment.phoneNumberEmail')}
selectValue={filterSearchCl} selectValue={filterSearchCl}
selectSetter={setFilterSearchCl} selectSetter={setFilterSearchCl}
selectOptions={searchTypeOption} selectOptions={searchTypeOption}
@@ -143,21 +144,21 @@ export const LinkPaymentHistoryFilter = ({
></FilterCalendar> ></FilterCalendar>
<FilterButtonGroups <FilterButtonGroups
title='거래상태' title={t('additionalService.linkPayment.transactionStatus')}
activeValue={filterTransactionStatus} activeValue={filterTransactionStatus}
btnGroups={transactionStatusOption} btnGroups={transactionStatusOption}
setter={setFilterTransactionStatus} setter={setFilterTransactionStatus}
></FilterButtonGroups> ></FilterButtonGroups>
<FilterButtonGroups <FilterButtonGroups
title='전송결과' title={t('additionalService.linkPayment.sendResult')}
activeValue={filterSendStatus} activeValue={filterSendStatus}
btnGroups={processResultOption} btnGroups={processResultOption}
setter={setFilterSendStatus} setter={setFilterSendStatus}
></FilterButtonGroups> ></FilterButtonGroups>
<FilterButtonGroups <FilterButtonGroups
title='발송수단' title={t('additionalService.linkPayment.sendMethod')}
activeValue={filterSendMethod} activeValue={filterSendMethod}
btnGroups={sendMethodOption} btnGroups={sendMethodOption}
setter={setFilterSendMethod} setter={setFilterSendMethod}
@@ -167,7 +168,7 @@ export const LinkPaymentHistoryFilter = ({
<button <button
className="btn-50 btn-blue flex-1" className="btn-50 btn-blue flex-1"
onClick={() => onClickToSetFilter()} onClick={() => onClickToSetFilter()}
></button> >{t('additionalService.linkPayment.apply')}</button>
</div> </div>
</div> </div>
</motion.div> </motion.div>

View File

@@ -1023,7 +1023,21 @@
"paymentFailed": "Payment Failed", "paymentFailed": "Payment Failed",
"paymentStopped": "Payment Stopped/Inactive", "paymentStopped": "Payment Stopped/Inactive",
"applyRequest": "Request", "applyRequest": "Request",
"noData": "No data available" "noData": "No data available",
"phoneNumber": "Phone Number",
"email": "Email",
"success": "Success",
"fail": "Fail",
"kakao": "Kakao",
"merchant": "Merchant",
"phoneNumberEmail": "Phone Number/Email",
"transactionStatus": "Transaction Status",
"sendResult": "Send Result",
"sendMethod": "Send Method",
"apply": "Apply",
"sendRequest": "Send Request",
"sendCancel": "Send Cancel",
"progressStatus": "Progress Status"
}, },
"keyIn": { "keyIn": {
"fullCancel": "Full Cancel", "fullCancel": "Full Cancel",