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
2025-10-31 12:43:22 +09:00
parent 79bb42d2cc
commit 52717206db
3 changed files with 48 additions and 26 deletions

View File

@@ -232,7 +232,29 @@
"requestTel": "Phone number is required.", "requestTel": "Phone number is required.",
"requestEmail": "Invalid email type.", "requestEmail": "Invalid email type.",
"contents": "Contents is required." "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": { "slideMenu": {

View File

@@ -61,29 +61,29 @@ export const QnaDetailPage = () => {
<div className="inq-detail"> <div className="inq-detail">
<div className="inq-detail__head"> <div className="inq-detail__head">
<div className="inq-detail__row"> <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> <span className="inq-head-text bold">{ title }</span>
</div> </div>
<div className="inq-detail__row"> <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> <span className="inq-head-text">{ t(`support.qna.categories.${requestType}`) }</span>
</div> </div>
<div className="inq-detail__row"> <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> <span className="inq-head-text">{ !!requestDate? moment(requestDate).format('YYYY.MM.DD'): '' }</span>
</div> </div>
<div className="inq-detail__row"> <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> <span className="inq-head-text">{ !!answerDate? moment(answerDate).format('YYYY.MM.DD'): '' }</span>
</div> </div>
</div> </div>
<div className="inq-detail__divider"></div> <div className="inq-detail__divider"></div>
<div className="inq-detail__section"> <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 className="inq-detail__body" dangerouslySetInnerHTML={{ __html: answer || '' }}></div>
</div> </div>
<div className="inq-detail__section"> <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 className="inq-detail__body" dangerouslySetInnerHTML={{ __html: contents || '' }}></div>
</div> </div>
</div> </div>

View File

@@ -87,7 +87,7 @@ export const QnaRegisterPage = () => {
open={isOpen} open={isOpen}
onClose={close} onClose={close}
message={ msg } message={ msg }
buttonLabel={['확인']} buttonLabel={[t('support.qna.confirmButton')]}
/> />
); );
}); });
@@ -136,7 +136,7 @@ export const QnaRegisterPage = () => {
contents: contents, contents: contents,
}; };
qnaSave(params).then((rs: QnaSaveResponse) => { qnaSave(params).then((rs: QnaSaveResponse) => {
alert('성공'); alert(t('support.qna.successMessage'));
navigate(PATHS.support.qna.list); navigate(PATHS.support.qna.list);
}); });
}; };
@@ -153,7 +153,7 @@ export const QnaRegisterPage = () => {
<div className="inq-form"> <div className="inq-form">
<div className="inq-field"> <div className="inq-field">
<div className="inq-label"> <div className="inq-label">
<span className="red">*</span> {t('support.qna.formLabels.title')} <span className="red">{t('support.qna.formLabels.required')}</span>
</div> </div>
<div className="inq-control"> <div className="inq-control">
<input <input
@@ -166,7 +166,7 @@ export const QnaRegisterPage = () => {
</div> </div>
<div className="inq-field"> <div className="inq-field">
<div className="inq-label"> <div className="inq-label">
<span className="red">*</span> {t('support.qna.formLabels.inquiryType')} <span className="red">{t('support.qna.formLabels.required')}</span>
</div> </div>
<div className="inq-control"> <div className="inq-control">
<select <select
@@ -187,7 +187,7 @@ export const QnaRegisterPage = () => {
</div> </div>
<div className="inq-field"> <div className="inq-field">
<div className="inq-label"> <div className="inq-label">
<span className="red">*</span> {t('support.qna.formLabels.requesterName')} <span className="red">{t('support.qna.formLabels.required')}</span>
</div> </div>
<div className="inq-control"> <div className="inq-control">
<input <input
@@ -200,11 +200,11 @@ export const QnaRegisterPage = () => {
</div> </div>
<div className="inq-field"> <div className="inq-field">
<div className="inq-label"> <div className="inq-label">
<span className="red">*</span> {t('support.qna.formLabels.phoneNumber')} <span className="red">{t('support.qna.formLabels.required')}</span>
</div> </div>
<div className="inq-control"> <div className="inq-control">
<PatternFormat <PatternFormat
placeholder="-’를 빼고 입력하세요" placeholder={t('support.qna.formLabels.phonePlaceholder')}
value={ requestTel } value={ requestTel }
valueIsNumericString valueIsNumericString
format="###########" format="###########"
@@ -213,11 +213,11 @@ export const QnaRegisterPage = () => {
</div> </div>
</div> </div>
<div className="inq-field"> <div className="inq-field">
<div className="inq-label"> </div> <div className="inq-label">{t('support.qna.formLabels.emailAddress')}</div>
<div className="inq-control"> <div className="inq-control">
<input <input
type="email" type="email"
placeholder="TEST123@nicepay.com" placeholder={t('support.qna.formLabels.emailPlaceholder')}
value={ requestEmail } value={ requestEmail }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestEmail) } onChange={ (e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestEmail) }
/> />
@@ -225,7 +225,7 @@ export const QnaRegisterPage = () => {
</div> </div>
<div className="inq-text"> <div className="inq-text">
<div className="inq-text-label"> <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>
<div className="inq-text-body"> <div className="inq-text-body">
<textarea <textarea
@@ -240,7 +240,7 @@ export const QnaRegisterPage = () => {
<button <button
className="btn-50 btn-blue flex-1" className="btn-50 btn-blue flex-1"
onClick={ () => onClickToRegisterQna() } onClick={ () => onClickToRegisterQna() }
></button> >{t('support.qna.submitButton')}</button>
</div> </div>
</div> </div>
</div> </div>