링크결제 신청 단계 폼 다국어 지원 추가

- Step1, Step2 폼 레이블 현지화
- 발송 수단, 상품 정보, 구매자 정보 등 모든 필드 번역
- 구매자 정보 대조 옵션(개인/법인) 다국어 적용
- 언어 선택(국문/영문), 링크내용(기본/추가) 현지화

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jay Sheen
2025-11-03 16:08:40 +09:00
parent b0698248f1
commit 79b5c1cb76
4 changed files with 67 additions and 26 deletions

View File

@@ -1,3 +1,4 @@
import { useTranslation } from 'react-i18next';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
@@ -13,6 +14,7 @@ interface LinkPaymentStep1Props {
}
export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Props) => {
const { t } = useTranslation();
const { navigate } = useNavigate();
const midOptionsWithoutGids = useStore.getState().UserStore.selectOptionsMidsWithoutGids;
@@ -46,7 +48,7 @@ export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Prop
<>
<div className="issue-form">
<div className="issue-row gap-10">
<div className="issue-label"></div>
<div className="issue-label">{t('filter.merchant')}</div>
<div className="issue-field">
<select
className="wid-100"
@@ -66,7 +68,7 @@ export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Prop
</div>
<div className="issue-row gap-10">
<div className="issue-label"> </div>
<div className="issue-label">{t('additionalService.linkPayment.sendMethod')}</div>
<div className="issue-field">
<div className="chip-row">
<span
@@ -79,20 +81,20 @@ export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Prop
className={`keyword-tag flex-1 ${formData.sendMethod === 'EMAIL' ? 'active' : ''}`}
onClick={() => handlePaymentMethodChange(LinkPaymentSendMethod.EMAIL)}
>
{t('common.email')}
</span>
<span
className={`keyword-tag flex-1 ${formData.sendMethod === 'KAKAO' ? 'active' : ''}`}
onClick={() => handlePaymentMethodChange(LinkPaymentSendMethod.KAKAO)}
>
{t('common.kakao')}
</span>
</div>
</div>
</div>
<div className="issue-row gap-10">
<div className="issue-label"></div>
<div className="issue-label">{t('transaction.fields.productName')}</div>
<div className="issue-field">
<input
type="text"
@@ -104,7 +106,7 @@ export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Prop
</div>
<div className="issue-row gap-10">
<div className="issue-label"></div>
<div className="issue-label">{t('additionalService.linkPayment.productPrice')}</div>
<div className="issue-field">
<NumericFormat
value={formData.amount}
@@ -120,7 +122,7 @@ export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Prop
</div>
<div className="issue-row gap-10">
<div className="issue-label"> </div>
<div className="issue-label">{t('additionalService.linkPayment.productOrderNumber')}</div>
<div className="issue-field">
<input
type="text"
@@ -132,16 +134,16 @@ export const LinkPaymentStep1 = ({ formData, setFormData }: LinkPaymentStep1Prop
</div>
<div className="issue-row gap-10">
<div className="issue-label"> </div>
<div className="issue-label">{t('additionalService.linkPayment.paymentValidDate')}</div>
<div className="issue-field">
<div className="link-apply-date">
<SingleDatePicker
date={formData.paymentLimitDate}
setDate={handleDateChange}
placeholder="날짜 선택"
placeholder={t('additionalService.linkPayment.selectDate')}
minDate={new Date()}
/>
<span></span>
<span>{t('additionalService.linkPayment.until')}</span>
</div>
</div>
</div>