Localize link-payment UI components

- Added linkPayment translation keys to en.json:
  - shippingHistory, pendingSend, all, incompleteActive
  - depositRequest, paymentComplete, paymentFailed, paymentStopped
  - applyRequest, noData
- Localized link-payment-tab.tsx:
  - Tab button labels (shippingHistory, pendingSend)
  - Added useTranslation hook
- Localized link-payment-history-wrap.tsx:
  - Payment status button group with function getPaymentResultBtnGroup(t)
  - Alt texts and aria-labels for filter and download buttons
  - Apply request button text
  - Added useTranslation hook
- Localized link-payment-wait-send-wrap.tsx:
  - Alt texts and aria-labels for filter and download buttons
  - Apply request button text
  - Uses getProcessStatusBtnGroup(t) from constant file

🤖 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:28:13 +09:00
parent 5ef6407e9b
commit 4e0918a89c
4 changed files with 37 additions and 23 deletions

View File

@@ -15,17 +15,19 @@ import { useStore } from '@/shared/model/store';
import { ExtensionLinkPayHistoryListParams, LinkPaymentHistoryListItem, LinkPaymentPaymentMethod, LinkPaymentPaymentStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus } from '../../model/link-pay/types';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import useIntersectionObserver from '@/widgets/intersection-observer';
import { useTranslation } from 'react-i18next';
const paymentResultBtnGroup = [
{ name: '전체', value: LinkPaymentPaymentStatus.ALL },
{ name: '미완료/활성화', value: LinkPaymentPaymentStatus.ACTIVATE },
{ name: '입금요청', value: LinkPaymentPaymentStatus.DEPOSIT_REQUEST },
{ name: '결제완료', value: LinkPaymentPaymentStatus.PAYMENT_COMPLETE },
{ name: '결제실패', value: LinkPaymentPaymentStatus.PAYMENT_FAIL },
{ name: '결제중단/비활성화', value: LinkPaymentPaymentStatus.INACTIVE },
const getPaymentResultBtnGroup = (t: any) => [
{ name: t('additionalService.linkPayment.all'), value: LinkPaymentPaymentStatus.ALL },
{ name: t('additionalService.linkPayment.incompleteActive'), value: LinkPaymentPaymentStatus.ACTIVATE },
{ name: t('additionalService.linkPayment.depositRequest'), value: LinkPaymentPaymentStatus.DEPOSIT_REQUEST },
{ name: t('additionalService.linkPayment.paymentComplete'), value: LinkPaymentPaymentStatus.PAYMENT_COMPLETE },
{ name: t('additionalService.linkPayment.paymentFailed'), value: LinkPaymentPaymentStatus.PAYMENT_FAIL },
{ name: t('additionalService.linkPayment.paymentStopped'), value: LinkPaymentPaymentStatus.INACTIVE },
];
export const LinkPaymentHistoryWrap = () => {
const { t } = useTranslation();
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid;
@@ -191,19 +193,19 @@ export const LinkPaymentHistoryWrap = () => {
className="filter-btn">
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt="검색옵션"
alt={t('common.searchOptions')}
onClick={() => onClickToOpenFilter()}
/>
</button>
</div>
<button
className="download-btn"
aria-label="다운로드"
aria-label={t('common.download')}
onClick={() => onClickToOpenEmailBottomSheet()}
>
<img
src={IMAGE_ROOT + '/ico_download.svg'}
alt="다운로드"
alt={t('common.download')}
/>
</button>
</div>
@@ -218,7 +220,7 @@ export const LinkPaymentHistoryWrap = () => {
<div className="excrow">
<div className="full-menu-keywords no-padding">
{
paymentResultBtnGroup.map((value, index) => (
getPaymentResultBtnGroup(t).map((value, index) => (
<span
key={`key-service-code=${index}`}
className={`keyword-tag ${(paymentStatus === value.value) ? 'active' : ''}`}
@@ -240,7 +242,7 @@ export const LinkPaymentHistoryWrap = () => {
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToNavigate()}
> </button>
>{t('additionalService.linkPayment.applyRequest')}</button>
</div>
<LinkPaymentHistoryFilter
filterOn={filterOn}

View File

@@ -1,10 +1,12 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { LinkPaymentTabKeys, LinkPaymentTabProps } from '../../model/link-pay/types';
import { useTranslation } from 'react-i18next';
export const LinkPaymentTab = ({
activeTab
}: LinkPaymentTabProps) => {
const { t } = useTranslation();
const {navigate} = useNavigate();
const onClickToNavigation = (tab: LinkPaymentTabKeys) => {
@@ -21,14 +23,14 @@ export const LinkPaymentTab = ({
return (
<>
<div className="subTab">
<button
<button
className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.ShippingHistory)? 'active': ''}` }
onClick={ () => onClickToNavigation(LinkPaymentTabKeys.ShippingHistory) }
></button>
<button
onClick={ () => onClickToNavigation(LinkPaymentTabKeys.ShippingHistory) }
>{t('additionalService.linkPayment.shippingHistory')}</button>
<button
className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.PendingSend)? 'active': ''}` }
onClick={ () => onClickToNavigation(LinkPaymentTabKeys.PendingSend) }
></button>
onClick={ () => onClickToNavigation(LinkPaymentTabKeys.PendingSend) }
>{t('additionalService.linkPayment.pendingSend')}</button>
</div>
</>
);

View File

@@ -175,19 +175,19 @@ export const LinkPaymentWaitSendWrap = () => {
className="filter-btn">
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt="검색옵션"
alt={t('common.searchOptions')}
onClick={() => onClickToOpenFilter()}
/>
</button>
</div>
<button
className="download-btn"
aria-label="다운로드"
aria-label={t('common.download')}
onClick={() => onClickToOpenEmailBottomSheet()}
>
<img
src={IMAGE_ROOT + '/ico_download.svg'}
alt="다운로드"
alt={t('common.download')}
/>
</button>
</div>
@@ -223,7 +223,7 @@ export const LinkPaymentWaitSendWrap = () => {
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToNavigate()}
> </button>
>{t('additionalService.linkPayment.applyRequest')}</button>
</div>
<LinkPaymentWaitSendFilter
filterOn={filterOn}

View File

@@ -1013,7 +1013,17 @@
"resend": "Resend",
"delete": "Delete",
"separateApprovalDetail": "Separate Approval Detail",
"warning": "Warning"
"warning": "Warning",
"shippingHistory": "Shipping History",
"pendingSend": "Pending Send",
"all": "All",
"incompleteActive": "Incomplete/Active",
"depositRequest": "Deposit Request",
"paymentComplete": "Payment Complete",
"paymentFailed": "Payment Failed",
"paymentStopped": "Payment Stopped/Inactive",
"applyRequest": "Request",
"noData": "No data available"
},
"keyIn": {
"fullCancel": "Full Cancel",