Add comprehensive i18n localization to transaction UI components
- Localize 23 transaction UI component files - Add 150+ translation keys to ko.json and en.json - Organized translations under transaction namespace: * transaction.bottomSheet - Bottom sheet modals * transaction.sections - Section titles * transaction.fields - Field labels (90+ keys) * transaction.cancel - Cancellation flows * transaction.handWrittenIssuance - Manual issuance forms * transaction.list - List actions Updated files: - Bottom sheets: escrow-mail-resend, cash-receipt-purpose-update - Sections: billing-info, part-cancel-info, detail-info, issue-info, escrow-info, important-info, payment-info, transaction-info, settlement-info, merchant-info, amount-info, cancel-bank-group, cancel-password-group - Lists: list-item, billing-list, cash-receipt-list - Cancel flows: all-cancel, part-cancel, prevent-bond - Issuance: hand-written-issuance-step1, hand-written-issuance-step2 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jay Sheen
@@ -7,6 +7,7 @@ import { NumericFormat } from 'react-number-format';
|
||||
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
|
||||
import { useNavigate } from '@/shared/lib/hooks';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
export interface AllTransactionCancelPreventBondProps {
|
||||
cancelPreventBondOn: boolean;
|
||||
setCancelPreventBondOn: (cancelPreventBondOn: boolean) => void;
|
||||
@@ -22,6 +23,7 @@ export const AllTransactionCancelPreventBond = ({
|
||||
serviceCode,
|
||||
tid
|
||||
}: AllTransactionCancelPreventBondProps) => {
|
||||
const { t } = useTranslation();
|
||||
const { navigate } = useNavigate();
|
||||
const [item, setItem] = useState<DebtPreventionCancelDisplayInfo | null | undefined>(debtPreventionCancelDisplayInfo);
|
||||
const onClickToClose = () => {
|
||||
@@ -48,15 +50,15 @@ export const AllTransactionCancelPreventBond = ({
|
||||
>
|
||||
<div className="full-menu-container">
|
||||
<div className="full-menu-header">
|
||||
<div className="full-menu-title center">거래취소(입금 후 취소)</div>
|
||||
<div className="full-menu-title center">{t('transaction.cancel.afterDeposit.title')}</div>
|
||||
<div className="full-menu-actions">
|
||||
<button
|
||||
<button
|
||||
id="closeFullMenu"
|
||||
className="full-menu-close"
|
||||
>
|
||||
<img
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_close.svg' }
|
||||
alt="닫기"
|
||||
alt={t('common.close')}
|
||||
onClick={ onClickToClose }
|
||||
/>
|
||||
</button>
|
||||
@@ -64,43 +66,43 @@ export const AllTransactionCancelPreventBond = ({
|
||||
</div>
|
||||
<div className="option-list-nopadding pw-26">
|
||||
<div className="after-deposit-cancel pb-120">
|
||||
<div className="notice-text">요청하신 거래취소는 입금 후 취소처리 가능합니다.</div>
|
||||
<div className="section-title">취소거래내역</div>
|
||||
<div className="notice-text">{t('transaction.cancel.afterDeposit.notice')}</div>
|
||||
<div className="section-title">{t('transaction.cancel.afterDeposit.cancelTransactionTitle')}</div>
|
||||
<div className="amount-info">
|
||||
<ul className="kv-list">
|
||||
<li className="kv-row">
|
||||
<div className="k">· 승인일</div>
|
||||
<div className="k">· {t('transaction.fields.approvalDay')}</div>
|
||||
<div className="v">{ item?.approvalDate? moment(item?.approvalDate).format('YYYY.MM.DD'): '' }</div>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<div className="k">· 승인번호</div>
|
||||
<div className="k">· {t('transaction.fields.approvalNumber')}</div>
|
||||
<div className="v">{ item?.approvalNo }</div>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<div className="k">· 승인금액</div>
|
||||
<div className="k">· {t('transaction.cancel.afterDeposit.approvalAmount')}</div>
|
||||
<div className="v">
|
||||
<NumericFormat
|
||||
value={ item?.amount }
|
||||
value={ item?.amount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
</div>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<div className="k">· 총 취소금액</div>
|
||||
<div className="k">· {t('transaction.fields.totalCancelAmount')}</div>
|
||||
<div className="v">
|
||||
<NumericFormat
|
||||
value={ item?.totalCancelAmount }
|
||||
value={ item?.totalCancelAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
</div>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<div className="k red">· 입금요청금액 :</div>
|
||||
<div className="k red">· {t('transaction.cancel.afterDeposit.depositRequestAmount')} :</div>
|
||||
<div className="v red">
|
||||
<NumericFormat
|
||||
value={ item?.depositRequestAmount }
|
||||
value={ item?.depositRequestAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
></NumericFormat>
|
||||
@@ -109,40 +111,40 @@ export const AllTransactionCancelPreventBond = ({
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="section-title">입금 정보</div>
|
||||
<div className="section-title">{t('transaction.cancel.afterDeposit.depositInfoTitle')}</div>
|
||||
<div className="amount-info">
|
||||
<ul className="kv-list">
|
||||
<li className="kv-row">
|
||||
<div className="k">· 은행</div>
|
||||
<div className="k">· {t('transaction.fields.bank')}</div>
|
||||
<div className="v">{ item?.bankName }</div>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<div className="k">· 계좌번호</div>
|
||||
<div className="k">· {t('transaction.fields.accountNo')}</div>
|
||||
<div className="v">{ item?.accountNo }</div>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<div className="k">· 예금주</div>
|
||||
<div className="k">· {t('transaction.fields.accountHolder')}</div>
|
||||
<div className="v">{ item?.accountName }</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="guide-list mt-26">
|
||||
<div className="desc dot">[취소요청] 버튼을 통해 취소 요청을 진행해야 접수됩니다.</div>
|
||||
<div className="desc dot">입금자명은 가맹점 상호로 입력해 주세요.</div>
|
||||
<div className="desc dot">입금요청금액과 동일한 금액을 입금해야 취소가 진행됩니다.</div>
|
||||
<div className="desc dot">취소내역은 최대 3일 이후 확인 가능합니다.</div>
|
||||
<div className="desc dot">입금 후 취소 프로세스 :<br />가맹점의 취소요청 -> 가맹점의입금 -> 입금 확인 -> 취소 처리</div>
|
||||
<div className="desc dot">정산받지 않은 거래인 경우 <span className="link-blue">service@nicepay.co.kr</span>로 거래내역을 발송바랍니다. (단. 정산예정일이 2일 이상 남은 거래에 한함)</div>
|
||||
<div className="desc dot">{t('transaction.cancel.afterDeposit.guide1')}</div>
|
||||
<div className="desc dot">{t('transaction.cancel.afterDeposit.guide2')}</div>
|
||||
<div className="desc dot">{t('transaction.cancel.afterDeposit.guide3')}</div>
|
||||
<div className="desc dot">{t('transaction.cancel.afterDeposit.guide4')}</div>
|
||||
<div className="desc dot" dangerouslySetInnerHTML={{ __html: t('transaction.cancel.afterDeposit.guide5') }}></div>
|
||||
<div className="desc dot" dangerouslySetInnerHTML={{ __html: t('transaction.cancel.afterDeposit.guide6') }}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
<button
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={ () => callTransactionCancel() }
|
||||
>신청</button>
|
||||
>{t('transaction.submit')}</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user