Localize QNA (Q&A) support pages
Replace all hardcoded Korean text with i18n translation keys in QNA detail and register pages. List page was already localized. Translation keys added to en.json: - detailLabels: title, type, registrationDate, answerDate, inquiryAnswer, inquiryContents - formLabels: title, inquiryType, requesterName, phoneNumber, emailAddress, inquiryContents, required marker, placeholders - submitButton, confirmButton, successMessage Components localized: - detail-page.tsx: All label badges for title, type, dates, and section titles for answer/contents - register-page.tsx: All form field labels, placeholders, dialog button, success alert, and submit button Note: list-page.tsx was already fully localized. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jay Sheen
@@ -232,7 +232,29 @@
|
||||
"requestTel": "Phone number is required.",
|
||||
"requestEmail": "Invalid email type.",
|
||||
"contents": "Contents is required."
|
||||
}
|
||||
},
|
||||
"detailLabels": {
|
||||
"title": "Title",
|
||||
"type": "Type",
|
||||
"registrationDate": "Registration Date",
|
||||
"answerDate": "Answer Date",
|
||||
"inquiryAnswer": "Inquiry Answer",
|
||||
"inquiryContents": "Inquiry Contents"
|
||||
},
|
||||
"formLabels": {
|
||||
"title": "Title",
|
||||
"inquiryType": "Inquiry Type",
|
||||
"requesterName": "Requester Name",
|
||||
"phoneNumber": "Phone Number",
|
||||
"emailAddress": "Email Address",
|
||||
"inquiryContents": "Inquiry Contents",
|
||||
"required": "*",
|
||||
"phonePlaceholder": "Enter without '-'",
|
||||
"emailPlaceholder": "TEST123@nicepay.com"
|
||||
},
|
||||
"submitButton": "Submit",
|
||||
"confirmButton": "Confirm",
|
||||
"successMessage": "Success"
|
||||
}
|
||||
},
|
||||
"slideMenu": {
|
||||
|
||||
@@ -61,29 +61,29 @@ export const QnaDetailPage = () => {
|
||||
<div className="inq-detail">
|
||||
<div className="inq-detail__head">
|
||||
<div className="inq-detail__row">
|
||||
<span className="inq-badge">제목</span>
|
||||
<span className="inq-badge">{t('support.qna.detailLabels.title')}</span>
|
||||
<span className="inq-head-text bold">{ title }</span>
|
||||
</div>
|
||||
<div className="inq-detail__row">
|
||||
<span className="inq-badge">유형</span>
|
||||
<span className="inq-badge">{t('support.qna.detailLabels.type')}</span>
|
||||
<span className="inq-head-text">{ t(`support.qna.categories.${requestType}`) }</span>
|
||||
</div>
|
||||
<div className="inq-detail__row">
|
||||
<span className="inq-badge">등록일</span>
|
||||
<span className="inq-badge">{t('support.qna.detailLabels.registrationDate')}</span>
|
||||
<span className="inq-head-text">{ !!requestDate? moment(requestDate).format('YYYY.MM.DD'): '' }</span>
|
||||
</div>
|
||||
<div className="inq-detail__row">
|
||||
<span className="inq-badge">답변일</span>
|
||||
<span className="inq-badge">{t('support.qna.detailLabels.answerDate')}</span>
|
||||
<span className="inq-head-text">{ !!answerDate? moment(answerDate).format('YYYY.MM.DD'): '' }</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="inq-detail__divider"></div>
|
||||
<div className="inq-detail__section">
|
||||
<div className="inq-detail__section-title">문의 답변</div>
|
||||
<div className="inq-detail__section-title">{t('support.qna.detailLabels.inquiryAnswer')}</div>
|
||||
<div className="inq-detail__body" dangerouslySetInnerHTML={{ __html: answer || '' }}></div>
|
||||
</div>
|
||||
<div className="inq-detail__section">
|
||||
<div className="inq-detail__section-title">문의 내용</div>
|
||||
<div className="inq-detail__section-title">{t('support.qna.detailLabels.inquiryContents')}</div>
|
||||
<div className="inq-detail__body" dangerouslySetInnerHTML={{ __html: contents || '' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -87,7 +87,7 @@ export const QnaRegisterPage = () => {
|
||||
open={isOpen}
|
||||
onClose={close}
|
||||
message={ msg }
|
||||
buttonLabel={['확인']}
|
||||
buttonLabel={[t('support.qna.confirmButton')]}
|
||||
/>
|
||||
);
|
||||
});
|
||||
@@ -135,8 +135,8 @@ export const QnaRegisterPage = () => {
|
||||
requestEmail: requestEmail,
|
||||
contents: contents,
|
||||
};
|
||||
qnaSave(params).then((rs: QnaSaveResponse) => {
|
||||
alert('성공');
|
||||
qnaSave(params).then((rs: QnaSaveResponse) => {
|
||||
alert(t('support.qna.successMessage'));
|
||||
navigate(PATHS.support.qna.list);
|
||||
});
|
||||
};
|
||||
@@ -153,11 +153,11 @@ export const QnaRegisterPage = () => {
|
||||
<div className="inq-form">
|
||||
<div className="inq-field">
|
||||
<div className="inq-label">
|
||||
제목 <span className="red">*</span>
|
||||
{t('support.qna.formLabels.title')} <span className="red">{t('support.qna.formLabels.required')}</span>
|
||||
</div>
|
||||
<div className="inq-control">
|
||||
<input
|
||||
type="text"
|
||||
<input
|
||||
type="text"
|
||||
value={ title }
|
||||
required= { true }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.Title) }
|
||||
@@ -166,13 +166,13 @@ export const QnaRegisterPage = () => {
|
||||
</div>
|
||||
<div className="inq-field">
|
||||
<div className="inq-label">
|
||||
문의유형 <span className="red">*</span>
|
||||
{t('support.qna.formLabels.inquiryType')} <span className="red">{t('support.qna.formLabels.required')}</span>
|
||||
</div>
|
||||
<div className="inq-control">
|
||||
<select
|
||||
value={ requestType }
|
||||
required= { true }
|
||||
onChange={ (e: ChangeEvent<HTMLSelectElement>) => setInputValue(e, QnaRegisterPropsName.RequestType) }
|
||||
onChange={ (e: ChangeEvent<HTMLSelectElement>) => setInputValue(e, QnaRegisterPropsName.RequestType) }
|
||||
>
|
||||
<option value="">{t('support.qna.categories.choose')}</option>
|
||||
<option value="01">{t('support.qna.categories.01')}</option>
|
||||
@@ -187,11 +187,11 @@ export const QnaRegisterPage = () => {
|
||||
</div>
|
||||
<div className="inq-field">
|
||||
<div className="inq-label">
|
||||
요청자명 <span className="red">*</span>
|
||||
{t('support.qna.formLabels.requesterName')} <span className="red">{t('support.qna.formLabels.required')}</span>
|
||||
</div>
|
||||
<div className="inq-control">
|
||||
<input
|
||||
type="text"
|
||||
<input
|
||||
type="text"
|
||||
value={ requestName }
|
||||
required= { true }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestName) }
|
||||
@@ -200,11 +200,11 @@ export const QnaRegisterPage = () => {
|
||||
</div>
|
||||
<div className="inq-field">
|
||||
<div className="inq-label">
|
||||
휴대폰번호 <span className="red">*</span>
|
||||
{t('support.qna.formLabels.phoneNumber')} <span className="red">{t('support.qna.formLabels.required')}</span>
|
||||
</div>
|
||||
<div className="inq-control">
|
||||
<PatternFormat
|
||||
placeholder="‘-’를 빼고 입력하세요"
|
||||
placeholder={t('support.qna.formLabels.phonePlaceholder')}
|
||||
value={ requestTel }
|
||||
valueIsNumericString
|
||||
format="###########"
|
||||
@@ -213,11 +213,11 @@ export const QnaRegisterPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="inq-field">
|
||||
<div className="inq-label">이메일 주소</div>
|
||||
<div className="inq-label">{t('support.qna.formLabels.emailAddress')}</div>
|
||||
<div className="inq-control">
|
||||
<input
|
||||
<input
|
||||
type="email"
|
||||
placeholder="TEST123@nicepay.com"
|
||||
placeholder={t('support.qna.formLabels.emailPlaceholder')}
|
||||
value={ requestEmail }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestEmail) }
|
||||
/>
|
||||
@@ -225,7 +225,7 @@ export const QnaRegisterPage = () => {
|
||||
</div>
|
||||
<div className="inq-text">
|
||||
<div className="inq-text-label">
|
||||
문의내용 <span className="red">*</span>
|
||||
{t('support.qna.formLabels.inquiryContents')} <span className="red">{t('support.qna.formLabels.required')}</span>
|
||||
</div>
|
||||
<div className="inq-text-body">
|
||||
<textarea
|
||||
@@ -237,10 +237,10 @@ export const QnaRegisterPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={ () => onClickToRegisterQna() }
|
||||
>요청</button>
|
||||
>{t('support.qna.submitButton')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user