nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add comprehensive i18n localization to transaction UI components

Browse Source 
- 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
2025-10-30 16:14:25 +09:00
parent 5f420c212b
commit e067fc8d4f
25 changed files with 847 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/entities/transaction/ui/all-transaction-all-cancel.tsx
View File

@@ -3,6 +3,7 @@ import { AllTransactionCancelInfoResponse } from '../model/types';
import { AllTransactionCancelSectionPasswordGroup } from './section/all-transaction-cancel-section-password-group'; import { AllTransactionCancelSectionPasswordGroup } from './section/all-transaction-cancel-section-password-group';
import { AllTransactionCancelSectionBankGroup } from './section/all-transaction-cancel-section-bank-group'; import { AllTransactionCancelSectionBankGroup } from './section/all-transaction-cancel-section-bank-group';
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
export interface AllTransactionAllCancelProps extends AllTransactionCancelInfoResponse { export interface AllTransactionAllCancelProps extends AllTransactionCancelInfoResponse {
serviceCode: string; serviceCode: string;
@@ -45,12 +46,14 @@ export const AllTransactionAllCancel = ({
requestSuccess, requestSuccess,
totalCancelAmount totalCancelAmount
}: AllTransactionAllCancelProps) => { }: AllTransactionAllCancelProps) => {
const { t } = useTranslation();
return ( return (
<> <>
<div className="amount-info"> <div className="amount-info">
<ul className="amount-list"> <ul className="amount-list">
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;총 잔액</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.totalBalance')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ remainAmount } value={ remainAmount }
@@ -60,7 +63,7 @@ export const AllTransactionAllCancel = ({
</span> </span>
</li> </li>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;총 취소금액</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.totalCancelAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ totalCancelAmount } value={ totalCancelAmount }

42
src/entities/transaction/ui/all-transaction-cancel-prevent-bond.tsx
View File

@@ -7,6 +7,7 @@ import { NumericFormat } from 'react-number-format';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant'; import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
import { useNavigate } from '@/shared/lib/hooks'; import { useNavigate } from '@/shared/lib/hooks';
import { PATHS } from '@/shared/constants/paths'; import { PATHS } from '@/shared/constants/paths';
import { useTranslation } from 'react-i18next';
export interface AllTransactionCancelPreventBondProps { export interface AllTransactionCancelPreventBondProps {
cancelPreventBondOn: boolean; cancelPreventBondOn: boolean;
setCancelPreventBondOn: (cancelPreventBondOn: boolean) => void; setCancelPreventBondOn: (cancelPreventBondOn: boolean) => void;
@@ -22,6 +23,7 @@ export const AllTransactionCancelPreventBond = ({
serviceCode, serviceCode,
tid tid
}: AllTransactionCancelPreventBondProps) => { }: AllTransactionCancelPreventBondProps) => {
const { t } = useTranslation();
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const [item, setItem] = useState<DebtPreventionCancelDisplayInfo | null | undefined>(debtPreventionCancelDisplayInfo); const [item, setItem] = useState<DebtPreventionCancelDisplayInfo | null | undefined>(debtPreventionCancelDisplayInfo);
const onClickToClose = () => { const onClickToClose = () => {
@@ -48,7 +50,7 @@ export const AllTransactionCancelPreventBond = ({
> >
<div className="full-menu-container"> <div className="full-menu-container">
<div className="full-menu-header"> <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"> <div className="full-menu-actions">
<button <button
id="closeFullMenu" id="closeFullMenu"
@@ -56,7 +58,7 @@ export const AllTransactionCancelPreventBond = ({
> >
<img <img
src={ IMAGE_ROOT + '/ico_close.svg' } src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기" alt={t('common.close')}
onClick={ onClickToClose } onClick={ onClickToClose }
/> />
</button> </button>
@@ -64,20 +66,20 @@ export const AllTransactionCancelPreventBond = ({
</div> </div>
<div className="option-list-nopadding pw-26"> <div className="option-list-nopadding pw-26">
<div className="after-deposit-cancel pb-120"> <div className="after-deposit-cancel pb-120">
<div className="notice-text">요청하신 거래취소는 입금 후 취소처리 가능합니다.</div> <div className="notice-text">{t('transaction.cancel.afterDeposit.notice')}</div>
<div className="section-title">취소거래내역</div> <div className="section-title">{t('transaction.cancel.afterDeposit.cancelTransactionTitle')}</div>
<div className="amount-info"> <div className="amount-info">
<ul className="kv-list"> <ul className="kv-list">
<li className="kv-row"> <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> <div className="v">{ item?.approvalDate? moment(item?.approvalDate).format('YYYY.MM.DD'): '' }</div>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<div className="k">· 승인번호</div> <div className="k">· {t('transaction.fields.approvalNumber')}</div>
<div className="v">{ item?.approvalNo }</div> <div className="v">{ item?.approvalNo }</div>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<div className="k">· 승인금액</div> <div className="k">· {t('transaction.cancel.afterDeposit.approvalAmount')}</div>
<div className="v"> <div className="v">
<NumericFormat <NumericFormat
value={ item?.amount } value={ item?.amount }
@@ -87,7 +89,7 @@ export const AllTransactionCancelPreventBond = ({
</div> </div>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<div className="k">· 총 취소금액</div> <div className="k">· {t('transaction.fields.totalCancelAmount')}</div>
<div className="v"> <div className="v">
<NumericFormat <NumericFormat
value={ item?.totalCancelAmount } value={ item?.totalCancelAmount }
@@ -97,7 +99,7 @@ export const AllTransactionCancelPreventBond = ({
</div> </div>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<div className="k red">· 입금요청금액 :</div> <div className="k red">· {t('transaction.cancel.afterDeposit.depositRequestAmount')} :</div>
<div className="v red"> <div className="v red">
<NumericFormat <NumericFormat
value={ item?.depositRequestAmount } value={ item?.depositRequestAmount }
@@ -109,31 +111,31 @@ export const AllTransactionCancelPreventBond = ({
</ul> </ul>
</div> </div>
<div className="section-title">입금 정보</div> <div className="section-title">{t('transaction.cancel.afterDeposit.depositInfoTitle')}</div>
<div className="amount-info"> <div className="amount-info">
<ul className="kv-list"> <ul className="kv-list">
<li className="kv-row"> <li className="kv-row">
<div className="k">· 은행</div> <div className="k">· {t('transaction.fields.bank')}</div>
<div className="v">{ item?.bankName }</div> <div className="v">{ item?.bankName }</div>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<div className="k">· 계좌번호</div> <div className="k">· {t('transaction.fields.accountNo')}</div>
<div className="v">{ item?.accountNo }</div> <div className="v">{ item?.accountNo }</div>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<div className="k">· 예금주</div> <div className="k">· {t('transaction.fields.accountHolder')}</div>
<div className="v">{ item?.accountName }</div> <div className="v">{ item?.accountName }</div>
</li> </li>
</ul> </ul>
</div> </div>
<div className="guide-list mt-26"> <div className="guide-list mt-26">
<div className="desc dot">[취소요청] 버튼을 통해 취소 요청을 진행해야 접수됩니다.</div> <div className="desc dot">{t('transaction.cancel.afterDeposit.guide1')}</div>
<div className="desc dot">입금자명은 가맹점 상호로 입력해 주세요.</div> <div className="desc dot">{t('transaction.cancel.afterDeposit.guide2')}</div>
<div className="desc dot">입금요청금액과 동일한 금액을 입금해야 취소가 진행됩니다.</div> <div className="desc dot">{t('transaction.cancel.afterDeposit.guide3')}</div>
<div className="desc dot">취소내역은 최대 3일 이후 확인 가능합니다.</div> <div className="desc dot">{t('transaction.cancel.afterDeposit.guide4')}</div>
<div className="desc dot">입금 후 취소 프로세스 :<br />가맹점의 취소요청 -&gt; 가맹점의입금 -&gt; 입금 확인 -&gt; 취소 처리</div> <div className="desc dot" dangerouslySetInnerHTML={{ __html: t('transaction.cancel.afterDeposit.guide5') }}></div>
<div className="desc dot">정산받지 않은 거래인 경우 <span className="link-blue">service@nicepay.co.kr</span>로 거래내역을 발송바랍니다. (단. 정산예정일이 2일 이상 남은 거래에 한함)</div> <div className="desc dot" dangerouslySetInnerHTML={{ __html: t('transaction.cancel.afterDeposit.guide6') }}></div>
</div> </div>
</div> </div>
</div> </div>
@@ -142,7 +144,7 @@ export const AllTransactionCancelPreventBond = ({
<button <button
className="btn-50 btn-blue flex-1" className="btn-50 btn-blue flex-1"
onClick={ () => callTransactionCancel() } onClick={ () => callTransactionCancel() }
>신청</button> >{t('transaction.submit')}</button>
</div> </div>
</motion.div> </motion.div>
</> </>

18
src/entities/transaction/ui/all-transaction-part-cancel.tsx
View File

@@ -3,6 +3,7 @@ import { AllTransactionCancelInfoResponse } from '../model/types';
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
import { AllTransactionCancelSectionPasswordGroup } from './section/all-transaction-cancel-section-password-group'; import { AllTransactionCancelSectionPasswordGroup } from './section/all-transaction-cancel-section-password-group';
import { AllTransactionCancelSectionBankGroup } from './section/all-transaction-cancel-section-bank-group'; import { AllTransactionCancelSectionBankGroup } from './section/all-transaction-cancel-section-bank-group';
import { useTranslation } from 'react-i18next';
export interface AllTransactionPartCancelProps extends AllTransactionCancelInfoResponse { export interface AllTransactionPartCancelProps extends AllTransactionCancelInfoResponse {
serviceCode: string; serviceCode: string;
@@ -63,6 +64,7 @@ export const AllTransactionPartCancel = ({
totalCancelAmount, totalCancelAmount,
setTotalCancelAmount setTotalCancelAmount
}: AllTransactionPartCancelProps) => { }: AllTransactionPartCancelProps) => {
const { t } = useTranslation();
const [cancelTotalCancelAmountReadonly, setCancelTotalCancelAmountReadonly] = useState<boolean>(true); const [cancelTotalCancelAmountReadonly, setCancelTotalCancelAmountReadonly] = useState<boolean>(true);
const [cancelSupplyAmountDisabled, setCancelSupplyAmountDisabled] = useState<boolean>(false); const [cancelSupplyAmountDisabled, setCancelSupplyAmountDisabled] = useState<boolean>(false);
const [cancelGoodsVatDisabled, setCancelGoodsVatDisabled] = useState<boolean>(false); const [cancelGoodsVatDisabled, setCancelGoodsVatDisabled] = useState<boolean>(false);
@@ -180,7 +182,7 @@ export const AllTransactionPartCancel = ({
<div className="amount-info"> <div className="amount-info">
<ul className="amount-list"> <ul className="amount-list">
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;총 잔액</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.totalBalance')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ remainAmount } value={ remainAmount }
@@ -190,7 +192,7 @@ export const AllTransactionPartCancel = ({
</span> </span>
</li> </li>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;총 취소금액</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.totalCancelAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ totalCancelAmount } value={ totalCancelAmount }
@@ -215,13 +217,13 @@ export const AllTransactionPartCancel = ({
<thead> <thead>
<tr> <tr>
<th className="header-empty"></th> <th className="header-empty"></th>
<th className="header-balance">잔액</th> <th className="header-balance">{t('transaction.cancel.partCancel.balance')}</th>
<th className="header-cancel">취소금액</th> <th className="header-cancel">{t('transaction.cancel.partCancel.cancelAmount')}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td className="row-label">과세액</td> <td className="row-label">{t('transaction.cancel.partCancel.taxableAmount')}</td>
<td className="row-balance"> <td className="row-balance">
<NumericFormat <NumericFormat
value={ supplyAmount } value={ supplyAmount }
@@ -241,7 +243,7 @@ export const AllTransactionPartCancel = ({
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="row-label">부가세</td> <td className="row-label">{t('transaction.cancel.partCancel.taxAmount')}</td>
<td className="row-balance"> <td className="row-balance">
<NumericFormat <NumericFormat
value={ goodsVat } value={ goodsVat }
@@ -261,7 +263,7 @@ export const AllTransactionPartCancel = ({
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="row-label">면세</td> <td className="row-label">{t('transaction.cancel.partCancel.taxFree')}</td>
<td className="row-balance"> <td className="row-balance">
<NumericFormat <NumericFormat
value={ taxFreeAmount } value={ taxFreeAmount }
@@ -281,7 +283,7 @@ export const AllTransactionPartCancel = ({
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="row-label">봉사료</td> <td className="row-label">{t('transaction.cancel.partCancel.serviceFee')}</td>
<td className="row-balance"> <td className="row-balance">
<NumericFormat <NumericFormat
value={ serviceAmount } value={ serviceAmount }

4
src/entities/transaction/ui/billing-list.tsx
View File

@@ -2,12 +2,14 @@ import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { BillingListProps } from '../model/types'; import { BillingListProps } from '../model/types';
import { ListDateGroup } from './list-date-group'; import { ListDateGroup } from './list-date-group';
import { useTranslation } from 'react-i18next';
export const BillingList = ({ export const BillingList = ({
transactionCategory, transactionCategory,
listItems listItems
}: BillingListProps) => { }: BillingListProps) => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const { t } = useTranslation();
const getListDateGroup = () => { const getListDateGroup = () => {
let rs = []; let rs = [];
@@ -65,7 +67,7 @@ export const BillingList = ({
<button <button
className="btn-50 btn-blue flex-1" className="btn-50 btn-blue flex-1"
onClick={ () => onClickToNavigate() } onClick={ () => onClickToNavigate() }
>결제신청</button> >{ t('transaction.list.paymentRequest') }</button>
</div> </div>
</> </>
); );

32
src/entities/transaction/ui/cash-receipt-hand-written-issuance-step1.tsx
View File

@@ -4,6 +4,7 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout'; import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
import { CashReceiptPurposeType } from '../model/types'; import { CashReceiptPurposeType } from '../model/types';
import { PatternFormat } from 'react-number-format'; import { PatternFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
export interface CashReceiptHandWrittenIssuanceStep1Props { export interface CashReceiptHandWrittenIssuanceStep1Props {
businessNumber?: string; businessNumber?: string;
@@ -38,6 +39,7 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
setEmail, setEmail,
setPhoneNumber setPhoneNumber
}: CashReceiptHandWrittenIssuanceStep1Props) => { }: CashReceiptHandWrittenIssuanceStep1Props) => {
const { t } = useTranslation();
const { navigate } = useNavigate(); const { navigate } = useNavigate();
useSetOnBack(() => { useSetOnBack(() => {
@@ -45,10 +47,10 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
}); });
return ( return (
<> <>
<h2 className="issue-title">발행 정보 입력</h2> <h2 className="issue-title">{t('transaction.handWrittenIssuance.step1Title')}</h2>
<div className="issue-form"> <div className="issue-form">
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">사업자 번호</div> <div className="issue-label">{t('transaction.handWrittenIssuance.businessNumber')}</div>
<div className="issue-field"> <div className="issue-field">
<input <input
className="error" className="error"
@@ -60,49 +62,49 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
</div> </div>
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">용도</div> <div className="issue-label">{t('transaction.fields.purpose')}</div>
<div className="issue-field"> <div className="issue-field">
<div className="seg-buttons"> <div className="seg-buttons">
<button <button
className={ `btn-40 ${(purposeType === CashReceiptPurposeType.INCOME_DEDUCTION)? 'btn-blue': 'btn-white'}` } className={ `btn-40 ${(purposeType === CashReceiptPurposeType.INCOME_DEDUCTION)? 'btn-blue': 'btn-white'}` }
type="button" type="button"
onClick={ () => setPurposeType(CashReceiptPurposeType.INCOME_DEDUCTION) } onClick={ () => setPurposeType(CashReceiptPurposeType.INCOME_DEDUCTION) }
>소득공제</button> >{t('transaction.handWrittenIssuance.incomeDeduction')}</button>
<button <button
className={ `btn-40 ${(purposeType === CashReceiptPurposeType.EXPENSE_PROOF)? 'btn-blue': 'btn-white'}` } className={ `btn-40 ${(purposeType === CashReceiptPurposeType.EXPENSE_PROOF)? 'btn-blue': 'btn-white'}` }
type="button" type="button"
onClick={ () => setPurposeType(CashReceiptPurposeType.EXPENSE_PROOF) } onClick={ () => setPurposeType(CashReceiptPurposeType.EXPENSE_PROOF) }
>지출증빙</button> >{t('transaction.handWrittenIssuance.expenseProof')}</button>
</div> </div>
</div> </div>
</div> </div>
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">상품명</div> <div className="issue-label">{t('transaction.fields.productName')}</div>
<div className="issue-field"> <div className="issue-field">
<input <input
type="text" type="text"
placeholder="상품명" placeholder={t('transaction.handWrittenIssuance.productNamePlaceholder')}
value={ productName } value={ productName }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value) } onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value) }
/> />
</div> </div>
</div> </div>
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">구매자</div> <div className="issue-label">{t('transaction.fields.buyer')}</div>
<div className="issue-field"> <div className="issue-field">
<input <input
type="text" type="text"
placeholder="구매자명" placeholder={t('transaction.handWrittenIssuance.buyerNamePlaceholder')}
value={ buyerName } value={ buyerName }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value) } onChange={ (e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value) }
/> />
</div> </div>
</div> </div>
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">발행번호</div> <div className="issue-label">{t('transaction.fields.issueNumber')}</div>
<div className="issue-field"> <div className="issue-field">
<PatternFormat <PatternFormat
placeholder="사업자번호 OR 휴대폰번호" placeholder={t('transaction.handWrittenIssuance.issueNumberPlaceholder')}
value={ issueNumber } value={ issueNumber }
valueIsNumericString valueIsNumericString
format="###########" format="###########"
@@ -111,21 +113,21 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
</div> </div>
</div> </div>
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">이메일 주소</div> <div className="issue-label">{t('account.emailAddress')}</div>
<div className="issue-field"> <div className="issue-field">
<input <input
type="email" type="email"
placeholder="TEST123@nicepay.com" placeholder={t('transaction.handWrittenIssuance.emailPlaceholder')}
value={ email } value={ email }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value) } onChange={ (e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value) }
/> />
</div> </div>
</div> </div>
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">전화번호</div> <div className="issue-label">{t('account.phoneNumber')}</div>
<div className="issue-field"> <div className="issue-field">
<PatternFormat <PatternFormat
placeholder="01012345678" placeholder={t('transaction.handWrittenIssuance.phoneNumberPlaceholder')}
value={ phoneNumber } value={ phoneNumber }
valueIsNumericString valueIsNumericString
format="###########" format="###########"

19
src/entities/transaction/ui/cash-receipt-hand-written-issuance-step2.tsx
View File

@@ -2,6 +2,7 @@ import { ChangeEvent } from 'react';
import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout'; import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
import { ProcessStep } from '../model/types'; import { ProcessStep } from '../model/types';
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
export interface CashReceiptHandWrittenIssuanceStep2Props { export interface CashReceiptHandWrittenIssuanceStep2Props {
setProcessStep: (processStep: ProcessStep) => void; setProcessStep: (processStep: ProcessStep) => void;
@@ -31,17 +32,19 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
setServiceCharge, setServiceCharge,
onClickToVatCalculate onClickToVatCalculate
}: CashReceiptHandWrittenIssuanceStep2Props) => { }: CashReceiptHandWrittenIssuanceStep2Props) => {
const { t } = useTranslation();
useSetOnBack(() => { useSetOnBack(() => {
setProcessStep(ProcessStep.One); setProcessStep(ProcessStep.One);
}); });
return ( return (
<> <>
<h2 className="issue-title">발행 금액 입력</h2> <h2 className="issue-title">{t('transaction.handWrittenIssuance.step2Title')}</h2>
<div className="issue-form"> <div className="issue-form">
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">발행금액</div> <div className="issue-label">{t('transaction.handWrittenIssuance.issueAmount')}</div>
<div className="issue-field"> <div className="issue-field">
<div className="seg-buttons"> <div className="seg-buttons">
<NumericFormat <NumericFormat
@@ -54,13 +57,13 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
className="btn-40 btn-white" className="btn-40 btn-white"
type="button" type="button"
onClick={ onClickToVatCalculate } onClick={ onClickToVatCalculate }
>VAT자동계산</button> >{t('transaction.handWrittenIssuance.vatAutoCalc')}</button>
</div> </div>
</div> </div>
</div> </div>
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">공급가액</div> <div className="issue-label">{t('transaction.fields.supplyAmount')}</div>
<div className="issue-field"> <div className="issue-field">
<NumericFormat <NumericFormat
value={ supplyAmount } value={ supplyAmount }
@@ -71,7 +74,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
</div> </div>
</div> </div>
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">VAT</div> <div className="issue-label">{t('transaction.fields.vat')}</div>
<div className="issue-field"> <div className="issue-field">
<NumericFormat <NumericFormat
value={ vatAmount } value={ vatAmount }
@@ -82,7 +85,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
</div> </div>
</div> </div>
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">면세금액</div> <div className="issue-label">{t('transaction.fields.taxFreeAmount')}</div>
<div className="issue-field"> <div className="issue-field">
<NumericFormat <NumericFormat
value={ taxFreeAmount } value={ taxFreeAmount }
@@ -93,7 +96,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
</div> </div>
</div> </div>
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">봉사료</div> <div className="issue-label">{t('transaction.fields.serviceAmount')}</div>
<div className="issue-field"> <div className="issue-field">
<NumericFormat <NumericFormat
value={ serviceCharge } value={ serviceCharge }
@@ -104,7 +107,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
</div> </div>
</div> </div>
<div className="issue-note error"> <div className="issue-note error">
발행금액은 공급가액 VAT,면세금액, 봉사료의 총합과 같아야 합니다. {t('transaction.handWrittenIssuance.errorMessage')}
</div> </div>
</div> </div>
</> </>

4
src/entities/transaction/ui/cash-receipt-list.tsx
View File

@@ -2,12 +2,14 @@ import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { CashReceiptListProps } from '../model/types'; import { CashReceiptListProps } from '../model/types';
import { ListDateGroup } from './list-date-group'; import { ListDateGroup } from './list-date-group';
import { useTranslation } from 'react-i18next';
export const CashReceiptList = ({ export const CashReceiptList = ({
transactionCategory, transactionCategory,
listItems listItems
}: CashReceiptListProps) => { }: CashReceiptListProps) => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const { t } = useTranslation();
const getListDateGroup = () => { const getListDateGroup = () => {
let rs = []; let rs = [];
@@ -65,7 +67,7 @@ export const CashReceiptList = ({
<button <button
className="btn-50 btn-blue flex-1" className="btn-50 btn-blue flex-1"
onClick={ () => onClickToNavigate() } onClick={ () => onClickToNavigate() }
>수기발행</button> >{ t('transaction.list.manualIssuance') }</button>
</div> </div>
</> </>
); );

14
src/entities/transaction/ui/cash-receit-purpose-update-bottom-sheet.tsx
View File

@@ -1,6 +1,7 @@
import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant'; import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
import { IMAGE_ROOT } from '@/shared/constants/common'; import { IMAGE_ROOT } from '@/shared/constants/common';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
export interface CashReceitPurposeUpdateBottomSheetProps { export interface CashReceitPurposeUpdateBottomSheetProps {
bottomSheetOn: boolean; bottomSheetOn: boolean;
@@ -13,6 +14,7 @@ export const CashReceitPurposeUpdateBottomSheet = ({
setBottomSheetOn, setBottomSheetOn,
callPurposeUpdate callPurposeUpdate
}: CashReceitPurposeUpdateBottomSheetProps) => { }: CashReceitPurposeUpdateBottomSheetProps) => {
const { t } = useTranslation();
const onClickToClose = () => { const onClickToClose = () => {
setBottomSheetOn(false); setBottomSheetOn(false);
@@ -35,14 +37,14 @@ export const CashReceitPurposeUpdateBottomSheet = ({
> >
<div className="bottomsheet-header"> <div className="bottomsheet-header">
<div className="bottomsheet-title"> <div className="bottomsheet-title">
<h2>현금영수증 용도 변경 안내</h2> <h2>{ t('transaction.bottomSheet.cashReceiptPurposeUpdate.title') }</h2>
<button <button
className="close-btn" className="close-btn"
type="button" type="button"
> >
<img <img
src={ IMAGE_ROOT + '/ico_close.svg' } src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기" alt={ t('common.close') }
onClick={ () => onClickToClose() } onClick={ () => onClickToClose() }
/> />
</button> </button>
@@ -51,10 +53,10 @@ export const CashReceitPurposeUpdateBottomSheet = ({
<div className="bottomsheet-content"> <div className="bottomsheet-content">
<div className="bottom-section"> <div className="bottom-section">
<p>현금영수증의 용도 변경 시 기존 발급 내역이 취소되며, 선택한 용도에 맞게 새로 발급됩니다. </p> <p>{ t('transaction.bottomSheet.cashReceiptPurposeUpdate.description') } </p>
<ul className="list-style-circle"> <ul className="list-style-circle">
<li>지출증빙용 → 소득공제용</li> <li>{ t('transaction.bottomSheet.cashReceiptPurposeUpdate.expenseToIncome') }</li>
<li>소득공제용 → 지출증빙용</li> <li>{ t('transaction.bottomSheet.cashReceiptPurposeUpdate.incomeToExpense') }</li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -64,7 +66,7 @@ export const CashReceitPurposeUpdateBottomSheet = ({
className="btn-50 btn-blue flex-1" className="btn-50 btn-blue flex-1"
type="button" type="button"
onClick={ () => onCliickToPurposeUpdate() } onClick={ () => onCliickToPurposeUpdate() }
>신청</button> >{ t('transaction.submit') }</button>
</div> </div>
</motion.div> </motion.div>
</> </>

20
src/entities/transaction/ui/escrow-mail-resend-bottom-sheet.tsx
View File

@@ -1,5 +1,6 @@
import { IMAGE_ROOT } from '@/shared/constants/common'; import { IMAGE_ROOT } from '@/shared/constants/common';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
export interface EscrowMailResendBottomSheetProps { export interface EscrowMailResendBottomSheetProps {
setBottomSheetOn: (bottomSheetOn: boolean) => void; setBottomSheetOn: (bottomSheetOn: boolean) => void;
@@ -12,6 +13,7 @@ export const EscrowMailResendBottomSheet = ({
bottomSheetOn, bottomSheetOn,
callMailResend callMailResend
}: EscrowMailResendBottomSheetProps) => { }: EscrowMailResendBottomSheetProps) => {
const { t } = useTranslation();
const onClickToClose = () => { const onClickToClose = () => {
setBottomSheetOn(false); setBottomSheetOn(false);
@@ -39,14 +41,14 @@ export const EscrowMailResendBottomSheet = ({
> >
<div className="bottomsheet-header"> <div className="bottomsheet-header">
<div className="bottomsheet-title"> <div className="bottomsheet-title">
<h2>이메일 주소를 선택하세요</h2> <h2>{ t('transaction.bottomSheet.escrowMailResend.title') }</h2>
<button <button
className="close-btn" className="close-btn"
type="button" type="button"
> >
<img <img
src={ IMAGE_ROOT + '/ico_close.svg' } src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기" alt={ t('transaction.bottomSheet.escrowMailResend.close') }
onClick={ () => onClickToClose() } onClick={ () => onClickToClose() }
/> />
</button> </button>
@@ -60,24 +62,24 @@ export const EscrowMailResendBottomSheet = ({
<div className="mail-icon-bg"></div> <div className="mail-icon-bg"></div>
<img <img
src={ IMAGE_ROOT +'/ico_email.svg' } src={ IMAGE_ROOT +'/ico_email.svg' }
alt="메일" alt={ t('transaction.bottomSheet.escrowMailResend.mail') }
/> />
</div> </div>
<span className="label-text">메일로 받기</span> <span className="label-text">{ t('transaction.bottomSheet.escrowMailResend.mailLabel') }</span>
</div> </div>
<div className="email-select"> <div className="email-select">
<div className="select-wrapper"> <div className="select-wrapper">
<select> <select>
<option>선택</option> <option>{ t('transaction.bottomSheet.escrowMailResend.select') }</option>
<option>선택1</option> <option>{ t('transaction.bottomSheet.escrowMailResend.select') }1</option>
<option>선택2</option> <option>{ t('transaction.bottomSheet.escrowMailResend.select') }2</option>
</select> </select>
</div> </div>
</div> </div>
<div className="error-message"> <div className="error-message">
<p>등록된 메일 정보가 없습니다.<br />이메일 인증정보를 사용자관리 메뉴에서 추가 후 신청하세요.</p> <p>{ t('transaction.bottomSheet.escrowMailResend.errorNoEmail') }</p>
</div> </div>
</div> </div>
</div> </div>
@@ -87,7 +89,7 @@ export const EscrowMailResendBottomSheet = ({
className="btn-50 btn-blue flex-1" className="btn-50 btn-blue flex-1"
type="button" type="button"
onClick={ () => onClickToMailResend() } onClick={ () => onClickToMailResend() }
>신청</button> >{ t('transaction.submit') }</button>
</div> </div>
</motion.div> </motion.div>
</> </>

10
src/entities/transaction/ui/list-item.tsx
View File

@@ -5,6 +5,7 @@ import { ListItemProps, TransactionCategory } from '../model/types';
import moment from 'moment'; import moment from 'moment';
import { useStore } from '@/shared/model/store'; import { useStore } from '@/shared/model/store';
import { AllTracsactionStatusCode } from '../model/contant'; import { AllTracsactionStatusCode } from '../model/contant';
import { useTranslation } from 'react-i18next';
export const ListItem = ({ export const ListItem = ({
transactionCategory, transactionCategory,
@@ -18,6 +19,7 @@ export const ListItem = ({
cancelStatus, billKey, orderNumber cancelStatus, billKey, orderNumber
}: ListItemProps) => { }: ListItemProps) => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const { t } = useTranslation();
const getItemClass = () => { const getItemClass = () => {
let rs = ''; let rs = '';
if(statusCode === '0'){ if(statusCode === '0'){
@@ -78,7 +80,7 @@ export const ListItem = ({
}); });
} }
else{ else{
alert('pageType 이 존재하지 않습니다.'); alert(t('common.error'));
} }
}; };
@@ -163,7 +165,7 @@ export const ListItem = ({
(!!installmentMonth && parseInt(installmentMonth) > 1) && (!!installmentMonth && parseInt(installmentMonth) > 1) &&
<> <>
<span className="separator">|</span> <span className="separator">|</span>
<span>{ installmentMonth }개월 할부</span> <span>{ t('transaction.fields.installmentMonthly', { count: installmentMonth }) }</span>
</> </>
} }
</div> </div>
@@ -196,7 +198,7 @@ export const ListItem = ({
(!!installmentMonth && parseInt(installmentMonth) > 1) && (!!installmentMonth && parseInt(installmentMonth) > 1) &&
<> <>
<span className="separator">|</span> <span className="separator">|</span>
<span>{ installmentMonth }개월 할부</span> <span>{ t('transaction.fields.installmentMonthly', { count: installmentMonth }) }</span>
</> </>
} }
</div> </div>
@@ -234,7 +236,7 @@ export const ListItem = ({
value={ goodsAmount || amount || transactionAmount } value={ goodsAmount || amount || transactionAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
suffix={ '원' } suffix={ t('home.currencyWon') }
></NumericFormat> ></NumericFormat>
</div> </div>
</div> </div>

12
src/entities/transaction/ui/section/all-transaction-cancel-section-bank-group.tsx
View File

@@ -1,3 +1,4 @@
import { useTranslation } from 'react-i18next';
import { useStore } from "@/shared/model/store"; import { useStore } from "@/shared/model/store";
import { ChangeEvent, useState } from "react"; import { ChangeEvent, useState } from "react";
@@ -17,6 +18,7 @@ export const AllTransactionCancelSectionBankGroup = ({
accountHolder, accountHolder,
setAccountHolder setAccountHolder
}: AllTransactionCancelSectionBankGroupProps ) => { }: AllTransactionCancelSectionBankGroupProps ) => {
const { t } = useTranslation();
let bankList = useStore.getState().CommonStore.virtualBankList; let bankList = useStore.getState().CommonStore.virtualBankList;
bankList = bankList.filter((value, index) => value.code1 !== '****'); bankList = bankList.filter((value, index) => value.code1 !== '****');
@@ -37,14 +39,14 @@ export const AllTransactionCancelSectionBankGroup = ({
return ( return (
<> <>
<div className="form-group"> <div className="form-group">
<label className="form-label">은행</label> <label className="form-label">{t('transaction.fields.bank')}</label>
<div className="input-wrapper wid-100"> <div className="input-wrapper wid-100">
<select <select
className="wid-100 align-right" className="wid-100 align-right"
value={ bankCode } value={ bankCode }
onChange={ (e: ChangeEvent<HTMLSelectElement>) => onChangeNewBankCode(e.target.value) } onChange={ (e: ChangeEvent<HTMLSelectElement>) => onChangeNewBankCode(e.target.value) }
> >
<option value="">선택</option> <option value="">{t('transaction.cancel.bankGroup.select')}</option>
{ bankList.map((value, index) => ( { bankList.map((value, index) => (
<option value={ value.code1 }>{ value.desc1 }</option> <option value={ value.code1 }>{ value.desc1 }</option>
)) ))
@@ -54,7 +56,7 @@ export const AllTransactionCancelSectionBankGroup = ({
</div> </div>
<div className="form-group"> <div className="form-group">
<label className="form-label">계좌번호</label> <label className="form-label">{t('transaction.fields.accountNo')}</label>
<div className="input-wrapper wid-100"> <div className="input-wrapper wid-100">
<input <input
className="form-input wid-100" className="form-input wid-100"
@@ -66,7 +68,7 @@ export const AllTransactionCancelSectionBankGroup = ({
</div> </div>
<div className="form-group"> <div className="form-group">
<label className="form-label">예금주</label> <label className="form-label">{t('transaction.fields.accountHolder')}</label>
<div className="input-wrapper wid-100"> <div className="input-wrapper wid-100">
<input <input
className="form-input wid-100" className="form-input wid-100"
@@ -78,7 +80,7 @@ export const AllTransactionCancelSectionBankGroup = ({
</div> </div>
<div className="notice-text wid-100"> <div className="notice-text wid-100">
<p>환불은 입력한 계좌정보로 별도 확인 절차없이 지급됩니다.<br />입력 정보를 한번 더 확인해 주세요.</p> <p>{t('transaction.cancel.bankGroup.notice')}</p>
</div> </div>
</> </>
); );

6
src/entities/transaction/ui/section/all-transaction-cancel-section-password-group.tsx
View File

@@ -1,3 +1,4 @@
import { useTranslation } from 'react-i18next';
import { ChangeEvent, useState } from "react"; import { ChangeEvent, useState } from "react";
export interface AllTransactionCancelSectionPasswordGroupProps { export interface AllTransactionCancelSectionPasswordGroupProps {
@@ -11,6 +12,7 @@ export const AllTransactionCancelSectionPasswordGroup = ({
setCancelPassword, setCancelPassword,
requestSuccess requestSuccess
}: AllTransactionCancelSectionPasswordGroupProps) => { }: AllTransactionCancelSectionPasswordGroupProps) => {
const { t } = useTranslation();
const [newCancelPassword, setNewCancelPassword] = useState<string>(cancelPassword); const [newCancelPassword, setNewCancelPassword] = useState<string>(cancelPassword);
@@ -21,7 +23,7 @@ export const AllTransactionCancelSectionPasswordGroup = ({
return ( return (
<> <>
<div className="form-group"> <div className="form-group">
<label className="form-label">취소 비밀번호</label> <label className="form-label">{t('transaction.cancel.passwordGroup.cancelPassword')}</label>
<div className="input-wrapper wid-100 error"> <div className="input-wrapper wid-100 error">
<input <input
className="wid-100 align-right" className="wid-100 align-right"
@@ -32,7 +34,7 @@ export const AllTransactionCancelSectionPasswordGroup = ({
</div> </div>
</div> </div>
{ !requestSuccess && { !requestSuccess &&
<div className="error-msg">비밀번호 불일치</div> <div className="error-msg">{t('transaction.cancel.passwordGroup.passwordMismatch')}</div>
} }
</> </>
); );

73
src/entities/transaction/ui/section/amount-info-section.tsx
View File

@@ -1,4 +1,5 @@
import moment from 'moment'; import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { useDownloadConfirmationMutation } from '../../api/use-download-confirmation-mutation'; import { useDownloadConfirmationMutation } from '../../api/use-download-confirmation-mutation';
@@ -15,23 +16,24 @@ export const AmountInfoSection = ({
onClickToOpenInfo, onClickToOpenInfo,
canDownloadReceipt canDownloadReceipt
}: InfoSectionProps) => { }: InfoSectionProps) => {
const { t } = useTranslation();
const { mutateAsync: downloadConfirmation } = useDownloadConfirmationMutation(); const { mutateAsync: downloadConfirmation } = useDownloadConfirmationMutation();
let newAmountInfo: Record<string, any> | undefined = amountInfo; let newAmountInfo: Record<string, any> | undefined = amountInfo;
const subItems: Record<string, Record<string, string>> = { const subItems: Record<string, Record<string, string>> = {
mid: {name: 'MID', type: 'string'}, mid: {name: t('transaction.fields.mid'), type: 'string'},
transactionRequestAmount: {name: '거래요청금액', type: 'number'}, transactionRequestAmount: {name: t('transaction.fields.transactionRequestAmount'), type: 'number'},
transactionAmount: {name: '거래금액', type: 'number'}, transactionAmount: {name: t('transaction.fields.transactionAmount'), type: 'number'},
pointAmount: {name: '포인트금액', type: 'number'}, pointAmount: {name: t('transaction.fields.pointAmount'), type: 'number'},
couponAmount: {name: '쿠폰금액', type: 'number'}, couponAmount: {name: t('transaction.fields.couponAmount'), type: 'number'},
escrowFee: {name: '에스크로수수료', type: 'number'}, escrowFee: {name: t('transaction.fields.escrowFee'), type: 'number'},
kakaoMoneyAmount: {name: '카카오머니', type: 'number'}, kakaoMoneyAmount: {name: t('transaction.fields.kakaoMoneyAmount'), type: 'number'},
kakaoPointAmount: {name: '카카오포인트', type: 'number'}, kakaoPointAmount: {name: t('transaction.fields.kakaoPointAmount'), type: 'number'},
kakaoDiscountAmount: {name: '카카오 즉시할인', type: 'number'}, kakaoDiscountAmount: {name: t('transaction.fields.kakaoDiscountAmount'), type: 'number'},
naverPointAmount: {name: '네이버 포인트', type: 'number'}, naverPointAmount: {name: t('transaction.fields.naverPointAmount'), type: 'number'},
tossMoneyAmount: {name: '토스머니', type: 'number'}, tossMoneyAmount: {name: t('transaction.fields.tossMoneyAmount'), type: 'number'},
tossDiscountAmount: {name: '토스할인', type: 'number'}, tossDiscountAmount: {name: t('transaction.fields.tossDiscountAmount'), type: 'number'},
paycoPointAmount: {name: '페이코포인트', type: 'number'}, paycoPointAmount: {name: t('transaction.fields.paycoPointAmount'), type: 'number'},
paycoCouponAmount: {name: '페이코쿠폰', type: 'number'}, paycoCouponAmount: {name: t('transaction.fields.paycoCouponAmount'), type: 'number'},
}; };
const openSubItems: Record<string, Array<string>> = { const openSubItems: Record<string, Array<string>> = {
@@ -135,12 +137,13 @@ export const AmountInfoSection = ({
if(!!k){ if(!!k){
let name = subItems[k]?.name; let name = subItems[k]?.name;
if(serviceCode === '01'){ if(serviceCode === '01'){
if(k === 'transactionAmount'){ if(k === 'transactionAmount'){
name = '신용카드금액' name = t('transaction.fields.cardAmount')
} }
if(k === 'transactionRequestAmount'){ if(k === 'transactionRequestAmount'){
name = '승인요청금액'; name = t('transaction.fields.approvalRequestAmount');
} }
} }
@@ -228,7 +231,7 @@ export const AmountInfoSection = ({
type="button" type="button"
onClick={ () => onClickToSetShowInfo() } onClick={ () => onClickToSetShowInfo() }
> >
금액상세 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow> {t('transaction.sections.amountDetail')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</button> </button>
</div> </div>
@@ -242,7 +245,7 @@ export const AmountInfoSection = ({
{ (transactionCategory === TransactionCategory.CashReceipt) && { (transactionCategory === TransactionCategory.CashReceipt) &&
<> <>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;공급가액</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.supplyAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.supplyAmount } value={ amountInfo?.supplyAmount }
@@ -252,7 +255,7 @@ export const AmountInfoSection = ({
</span> </span>
</li> </li>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;VAT</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.vat')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.vat } value={ amountInfo?.vat }
@@ -262,7 +265,7 @@ export const AmountInfoSection = ({
</span> </span>
</li> </li>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;봉사료</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.serviceAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.serviceAmount } value={ amountInfo?.serviceAmount }
@@ -272,7 +275,7 @@ export const AmountInfoSection = ({
</span> </span>
</li> </li>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;면세금액</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.taxFreeAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.taxFreeAmount } value={ amountInfo?.taxFreeAmount }
@@ -287,7 +290,7 @@ export const AmountInfoSection = ({
<> <>
{ (serviceCode === '02' || serviceCode === '03') && { (serviceCode === '02' || serviceCode === '03') &&
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;거래금액</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.transactionAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.transactionAmount } value={ amountInfo?.transactionAmount }
@@ -300,7 +303,7 @@ export const AmountInfoSection = ({
{ (serviceCode === '01') && { (serviceCode === '01') &&
<> <>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;신용카드금액</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.cardAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.cardAmount } value={ amountInfo?.cardAmount }
@@ -310,7 +313,7 @@ export const AmountInfoSection = ({
</span> </span>
</li> </li>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;포인트금액</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.pointAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.pointAmount } value={ amountInfo?.pointAmount }
@@ -320,7 +323,7 @@ export const AmountInfoSection = ({
</span> </span>
</li> </li>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;쿠폰금액</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.couponAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.couponAmount } value={ amountInfo?.couponAmount }
@@ -333,7 +336,7 @@ export const AmountInfoSection = ({
} }
{ (serviceCode === '01' || serviceCode === '02') && { (serviceCode === '01' || serviceCode === '02') &&
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;에스크로수수료</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.escrowFee')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.escrowFee } value={ amountInfo?.escrowFee }
@@ -348,7 +351,7 @@ export const AmountInfoSection = ({
{ (amountInfo?.simplePaymentServiceCode === 'E016') && { (amountInfo?.simplePaymentServiceCode === 'E016') &&
<> <>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;카카오머니</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.kakaoMoneyAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.multiPointAmount } value={ amountInfo?.multiPointAmount }
@@ -358,7 +361,7 @@ export const AmountInfoSection = ({
</span> </span>
</li> </li>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;카카오포인트</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.kakaoPointAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.multiCouponAmount } value={ amountInfo?.multiCouponAmount }
@@ -368,7 +371,7 @@ export const AmountInfoSection = ({
</span> </span>
</li> </li>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;카카오즉시할인</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.kakaoDiscountAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.kakaoDiscountAmount } value={ amountInfo?.kakaoDiscountAmount }
@@ -381,7 +384,7 @@ export const AmountInfoSection = ({
} }
{ (amountInfo?.simplePaymentServiceCode === 'E020') && { (amountInfo?.simplePaymentServiceCode === 'E020') &&
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;네이버포인트</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.naverPointAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.multiPointAmount } value={ amountInfo?.multiPointAmount }
@@ -394,7 +397,7 @@ export const AmountInfoSection = ({
{ (amountInfo?.simplePaymentServiceCode === 'E025') && { (amountInfo?.simplePaymentServiceCode === 'E025') &&
<> <>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;토스머니</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.tossMoneyAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.multiPointAmount } value={ amountInfo?.multiPointAmount }
@@ -404,7 +407,7 @@ export const AmountInfoSection = ({
</span> </span>
</li> </li>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;토스할인</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.tossDiscountAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.tossDiscountAmount } value={ amountInfo?.tossDiscountAmount }
@@ -418,7 +421,7 @@ export const AmountInfoSection = ({
{ (amountInfo?.simplePaymentServiceCode === 'E015') && { (amountInfo?.simplePaymentServiceCode === 'E015') &&
<> <>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;페이코포인트</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.paycoPointAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.multiPointAmount } value={ amountInfo?.multiPointAmount }
@@ -428,7 +431,7 @@ export const AmountInfoSection = ({
</span> </span>
</li> </li>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;페이코쿠폰</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.paycoCouponAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.multiCouponAmount } value={ amountInfo?.multiCouponAmount }
@@ -466,7 +469,7 @@ export const AmountInfoSection = ({
className="doc-btn" className="doc-btn"
type="button" type="button"
onClick={ () => onClickToDownloadConfirmation() } onClick={ () => onClickToDownloadConfirmation() }
>거래 확인서</button> >{t('transaction.fields.transactionConfirmation')}</button>
} }
</div> </div>
</div> </div>

30
src/entities/transaction/ui/section/billing-info-section.tsx
View File

@@ -1,9 +1,11 @@
import moment from 'moment'; import moment from 'moment';
import { InfoSectionProps } from '../../model/types'; import { InfoSectionProps } from '../../model/types';
import { useTranslation } from 'react-i18next';
export const BillingInfoSection = ({ export const BillingInfoSection = ({
billingInfo, billingInfo,
}: InfoSectionProps) => { }: InfoSectionProps) => {
const { t } = useTranslation();
const getInstallmentMonth = () => { const getInstallmentMonth = () => {
let rs = []; let rs = [];
@@ -13,8 +15,8 @@ export const BillingInfoSection = ({
key={ `key-installmentMonth`} key={ `key-installmentMonth`}
className="kv-row" className="kv-row"
> >
<span className="k">할부개월</span> <span className="k">{ t('transaction.fields.installmentMonth') }</span>
<span className="v">{ billingInfo?.installmentMonth }개월 할부</span> <span className="v">{ t('transaction.fields.installmentMonthly', { count: billingInfo?.installmentMonth }) }</span>
</li> </li>
); );
} }
@@ -24,8 +26,8 @@ export const BillingInfoSection = ({
key={ `key-installmentMonth`} key={ `key-installmentMonth`}
className="kv-row" className="kv-row"
> >
<span className="k">할부개월</span> <span className="k">{ t('transaction.fields.installmentMonth') }</span>
<span className="v">일시불</span> <span className="v">{ t('transaction.fields.lumpSum') }</span>
</li> </li>
); );
} }
@@ -34,43 +36,43 @@ export const BillingInfoSection = ({
return ( return (
<> <>
<div className="txn-section"> <div className="txn-section">
<div className="section-title">중요 정보</div> <div className="section-title">{ t('transaction.sections.importantInfo') }</div>
<ul className="kv-list"> <ul className="kv-list">
<li className="kv-row"> <li className="kv-row">
<span className="k">빌키</span> <span className="k">{ t('transaction.fields.billKey') }</span>
<span className="v">{ billingInfo?.billKey }</span> <span className="v">{ billingInfo?.billKey }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">TID</span> <span className="k">{ t('transaction.fields.tid') }</span>
<span className="v">{ billingInfo?.tid }</span> <span className="v">{ billingInfo?.tid }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">주분번호</span> <span className="k">{ t('transaction.fields.orderNumber') }</span>
<span className="v">{ billingInfo?.orderNumber }</span> <span className="v">{ billingInfo?.orderNumber }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">승인번호</span> <span className="k">{ t('transaction.fields.approvalNumber') }</span>
<span className="v">{ billingInfo?.approvalNumber }</span> <span className="v">{ billingInfo?.approvalNumber }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">승인일자</span> <span className="k">{ t('transaction.fields.approvalDate') }</span>
<span className="v">{ moment(billingInfo?.approvalDate).format('YYYY.MM.DD') }</span> <span className="v">{ moment(billingInfo?.approvalDate).format('YYYY.MM.DD') }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">요청상태</span> <span className="k">{ t('transaction.fields.requestStatus') }</span>
<span className="v">{ billingInfo?.requestStatus }</span> <span className="v">{ billingInfo?.requestStatus }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">처리결과</span> <span className="k">{ t('transaction.fields.processResult') }</span>
<span className="v">{ billingInfo?.processResult }</span> <span className="v">{ billingInfo?.processResult }</span>
</li> </li>
{ getInstallmentMonth() } { getInstallmentMonth() }
<li className="kv-row"> <li className="kv-row">
<span className="k">상품명</span> <span className="k">{ t('transaction.fields.productName') }</span>
<span className="v">{ billingInfo?.productName }</span> <span className="v">{ billingInfo?.productName }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">구매자</span> <span className="k">{ t('transaction.fields.buyer') }</span>
<span className="v">{ billingInfo?.buyerName }</span> <span className="v">{ billingInfo?.buyerName }</span>
</li> </li>
</ul> </ul>

22
src/entities/transaction/ui/section/detail-info-section.tsx
View File

@@ -1,4 +1,5 @@
import moment from 'moment'; import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoSectionKeys, InfoSectionProps } from '../../model/types'; import { InfoSectionKeys, InfoSectionProps } from '../../model/types';
import { SlideDown } from 'react-slidedown'; import { SlideDown } from 'react-slidedown';
@@ -10,6 +11,7 @@ export const DetailInfoSection = ({
isOpen, isOpen,
onClickToOpenInfo onClickToOpenInfo
}: InfoSectionProps) => { }: InfoSectionProps) => {
const { t } = useTranslation();
const onClickToSetOpenInfo = () => { const onClickToSetOpenInfo = () => {
if(!!onClickToOpenInfo){ if(!!onClickToOpenInfo){
@@ -24,45 +26,45 @@ export const DetailInfoSection = ({
className="section-title with-toggle" className="section-title with-toggle"
onClick={ () => onClickToSetOpenInfo() } onClick={ () => onClickToSetOpenInfo() }
> >
상세 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow> {t('transaction.sections.detailInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div> </div>
<SlideDown className={'my-dropdown-slidedown'}> <SlideDown className={'my-dropdown-slidedown'}>
{ !!isOpen && { !!isOpen &&
<ul className="kv-list"> <ul className="kv-list">
<li className="kv-row"> <li className="kv-row">
<span className="k">취소일자</span> <span className="k">{t('transaction.fields.cancelDate')}</span>
<span className="v">{ detailInfo?.cancelDate? moment(detailInfo?.cancelDate).format('YYYY.MM.DD'): '' }</span> <span className="v">{ detailInfo?.cancelDate? moment(detailInfo?.cancelDate).format('YYYY.MM.DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">취소승인번호</span> <span className="k">{t('transaction.fields.cancelApprovalNumber')}</span>
<span className="v">{ detailInfo?.cancelApprovalNumber }</span> <span className="v">{ detailInfo?.cancelApprovalNumber }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">현금영수증</span> <span className="k">{t('transaction.fields.receiptInfo')}</span>
<span className="v">{ detailInfo?.receiptInfo }</span> <span className="v">{ detailInfo?.receiptInfo }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">TID</span> <span className="k">{t('transaction.fields.tid')}</span>
<span className="v">{ detailInfo?.tid }</span> <span className="v">{ detailInfo?.tid }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">거래ID</span> <span className="k">{t('transaction.fields.transactionId')}</span>
<span className="v">{ detailInfo?.merchantTid }</span> <span className="v">{ detailInfo?.merchantTid }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">서브몰명</span> <span className="k">{t('transaction.fields.subMallName')}</span>
<span className="v">{ detailInfo?.subMallName }</span> <span className="v">{ detailInfo?.subMallName }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">서브몰 사업자 번호</span> <span className="k">{t('transaction.fields.subMallBusinessNumber')}</span>
<span className="v">{ detailInfo?.subMallBusinessNumber }</span> <span className="v">{ detailInfo?.subMallBusinessNumber }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">발행경로</span> <span className="k">{t('transaction.fields.issueChannel')}</span>
<span className="v">{ detailInfo?.issueChannel }</span> <span className="v">{ detailInfo?.issueChannel }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">실패사유</span> <span className="k">{t('transaction.fields.failureReason')}</span>
<span className="v">{ detailInfo?.failureReason }</span> <span className="v">{ detailInfo?.failureReason }</span>
</li> </li>
</ul> </ul>

24
src/entities/transaction/ui/section/escrow-info-section.tsx
View File

@@ -1,4 +1,5 @@
import moment from 'moment'; import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoSectionKeys, InfoSectionProps } from '../../model/types'; import { InfoSectionKeys, InfoSectionProps } from '../../model/types';
import { SlideDown } from 'react-slidedown'; import { SlideDown } from 'react-slidedown';
@@ -9,6 +10,7 @@ export const EscrowInfoSection = ({
isOpen, isOpen,
onClickToOpenInfo onClickToOpenInfo
}: InfoSectionProps) => { }: InfoSectionProps) => {
const { t } = useTranslation();
const onClickToSetOpenInfo = () => { const onClickToSetOpenInfo = () => {
if(!!onClickToOpenInfo){ if(!!onClickToOpenInfo){
@@ -23,49 +25,49 @@ export const EscrowInfoSection = ({
className="section-title with-toggle" className="section-title with-toggle"
onClick={ () => onClickToSetOpenInfo() } onClick={ () => onClickToSetOpenInfo() }
> >
에스크로 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow> {t('transaction.sections.escrowInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div> </div>
<SlideDown className={'my-dropdown-slidedown'}> <SlideDown className={'my-dropdown-slidedown'}>
{ !!isOpen && { !!isOpen &&
<ul className="kv-list"> <ul className="kv-list">
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;배송상태</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.deliveryStatus')}</span>
<span className="v">{ escrowInfo?.deliveryStatus }</span> <span className="v">{ escrowInfo?.deliveryStatus }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;배송등록</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.deliveryRegistration')}</span>
<span className="v">{ escrowInfo?.deliveryRegistrationDate? moment(escrowInfo?.deliveryRegistrationDate).format('YYYY.MM.DD'): '' }</span> <span className="v">{ escrowInfo?.deliveryRegistrationDate? moment(escrowInfo?.deliveryRegistrationDate).format('YYYY.MM.DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;배송완료</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.deliveryComplete')}</span>
<span className="v">{ escrowInfo?.deliveryCompleteDate? moment(escrowInfo?.deliveryCompleteDate).format('YYYY.MM.DD'): '' }</span> <span className="v">{ escrowInfo?.deliveryCompleteDate? moment(escrowInfo?.deliveryCompleteDate).format('YYYY.MM.DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;구매확인</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.purchaseConfirm')}</span>
<span className="v">{ escrowInfo?.purchaseConfirmDate? moment(escrowInfo?.purchaseConfirmDate).format('YYYY.MM.DD'): '' }</span> <span className="v">{ escrowInfo?.purchaseConfirmDate? moment(escrowInfo?.purchaseConfirmDate).format('YYYY.MM.DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;구매거절</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.purchaseReject')}</span>
<span className="v">{ escrowInfo?.purchaseRejectReason }</span> <span className="v">{ escrowInfo?.purchaseRejectReason }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;거절사유</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.rejectReason')}</span>
<span className="v">{ escrowInfo?.rejectReason }</span> <span className="v">{ escrowInfo?.rejectReason }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;에스크로인증번호</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.escrowCertNumber')}</span>
<span className="v">{ escrowInfo?.escrowCertNumber }</span> <span className="v">{ escrowInfo?.escrowCertNumber }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;택배사</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.deliveryCompany')}</span>
<span className="v">{ escrowInfo?.deliveryCompany }</span> <span className="v">{ escrowInfo?.deliveryCompany }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;운송장번호</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.trackingNumber')}</span>
<span className="v">{ escrowInfo?.trackingNumber }</span> <span className="v">{ escrowInfo?.trackingNumber }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;배송주소</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.deliveryAddress')}</span>
<span className="v">{ escrowInfo?.deliveryAddress }</span> <span className="v">{ escrowInfo?.deliveryAddress }</span>
</li> </li>
</ul> </ul>

40
src/entities/transaction/ui/section/important-info-section.tsx
View File

@@ -1,4 +1,5 @@
import moment from 'moment'; import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
import { InfoSectionProps, TransactionCategory } from '../../model/types'; import { InfoSectionProps, TransactionCategory } from '../../model/types';
import { useStore } from '@/shared/model/store'; import { useStore } from '@/shared/model/store';
@@ -9,6 +10,7 @@ export const ImportantInfoSection = ({
importantInfo, importantInfo,
serviceCode serviceCode
}: InfoSectionProps) => { }: InfoSectionProps) => {
const { t } = useTranslation();
let serviceCodes = useStore.getState().CommonStore.serviceCodes; let serviceCodes = useStore.getState().CommonStore.serviceCodes;
let serviceName = ''; let serviceName = '';
let statusName = ''; let statusName = '';
@@ -60,15 +62,15 @@ export const ImportantInfoSection = ({
} }
const subItems: Record<string, Record<string, string>> = { const subItems: Record<string, Record<string, string>> = {
moid: {name: '주문번호', type: 'string'}, moid: {name: t('transaction.fields.orderNumber'), type: 'string'},
tid: {name: 'TID', type: 'string'}, tid: {name: t('transaction.fields.tid'), type: 'string'},
statusName: {name: '거래상태', type: 'string'}, statusName: {name: t('transaction.fields.transactionStatus'), type: 'string'},
serviceName: {name: '거래수단', type: 'string'}, serviceName: {name: t('transaction.fields.transactionMethod'), type: 'string'},
approvalDate: {name: '승인일', type: 'date'}, approvalDate: {name: t('transaction.fields.approvalDay'), type: 'date'},
transactionDate: {name: '거래일', type: 'date'}, transactionDate: {name: t('filter.date'), type: 'date'},
requestDate: {name: '요청일', type: 'date'}, requestDate: {name: t('filter.date'), type: 'date'},
cancelDate: {name: '취소일', type: 'date'}, cancelDate: {name: t('transaction.fields.cancelDate'), type: 'date'},
goodsName: {name: '상품명', type: 'string'} goodsName: {name: t('transaction.fields.productName'), type: 'string'}
}; };
const openSubItems: Record<string, Array<string>> = { const openSubItems: Record<string, Array<string>> = {
@@ -146,7 +148,7 @@ export const ImportantInfoSection = ({
return ( return (
<> <>
<div className="txn-section"> <div className="txn-section">
<div className="section-title">중요 정보</div> <div className="section-title">{t('transaction.sections.importantInfo')}</div>
<ul className="kv-list"> <ul className="kv-list">
{ (transactionCategory === TransactionCategory.AllTransaction) && { (transactionCategory === TransactionCategory.AllTransaction) &&
subLi() subLi()
@@ -155,45 +157,45 @@ export const ImportantInfoSection = ({
(transactionCategory === TransactionCategory.Escrow) && (transactionCategory === TransactionCategory.Escrow) &&
<> <>
<li className="kv-row"> <li className="kv-row">
<span className="k">주문번호</span> <span className="k">{t('transaction.fields.orderNumber')}</span>
<span className="v">{ importantInfo?.orderNumber }</span> <span className="v">{ importantInfo?.orderNumber }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">TID</span> <span className="k">{t('transaction.fields.tid')}</span>
<span className="v">{ importantInfo?.tid }</span> <span className="v">{ importantInfo?.tid }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">거래상태</span> <span className="k">{t('transaction.fields.transactionStatus')}</span>
<span className="v">{ importantInfo?.transactionStatus }</span> <span className="v">{ importantInfo?.transactionStatus }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">거래수단</span> <span className="k">{t('transaction.fields.transactionMethod')}</span>
<span className="v">{ importantInfo?.paymentMethod }</span> <span className="v">{ importantInfo?.paymentMethod }</span>
</li> </li>
{ serviceCode === '01' && { serviceCode === '01' &&
<li className="kv-row"> <li className="kv-row">
<span className="k">승인일</span> <span className="k">{t('transaction.fields.approvalDay')}</span>
<span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span> <span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span>
</li> </li>
} }
{ serviceCode === '02' && { serviceCode === '02' &&
<li className="kv-row"> <li className="kv-row">
<span className="k">거래일</span> <span className="k">{t('filter.date')}</span>
<span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span> <span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span>
</li> </li>
} }
{ serviceCode === '03' && { serviceCode === '03' &&
<li className="kv-row"> <li className="kv-row">
<span className="k">요청일</span> <span className="k">{t('filter.date')}</span>
<span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span> <span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span>
</li> </li>
} }
<li className="kv-row"> <li className="kv-row">
<span className="k">취소일</span> <span className="k">{t('transaction.fields.cancelDate')}</span>
<span className="v">{ importantInfo?.cancelDate? moment(importantInfo?.cancelDate).format('YYYY-MM-DD'): '' }</span> <span className="v">{ importantInfo?.cancelDate? moment(importantInfo?.cancelDate).format('YYYY-MM-DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">상품명</span> <span className="k">{t('transaction.fields.productName')}</span>
<span className="v">{ importantInfo?.productName }</span> <span className="v">{ importantInfo?.productName }</span>
</li> </li>
</> </>

20
src/entities/transaction/ui/section/issue-info-section.tsx
View File

@@ -1,3 +1,4 @@
import { useTranslation } from 'react-i18next';
import { InfoSectionProps } from '../../model/types'; import { InfoSectionProps } from '../../model/types';
import moment from 'moment'; import moment from 'moment';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@@ -7,6 +8,7 @@ export const IssueInfoSection = ({
issueInfo, issueInfo,
purposeType, purposeType,
}: InfoSectionProps) => { }: InfoSectionProps) => {
const { t } = useTranslation();
const [issueDateTime, setIssueDateTime] = useState<string>(''); const [issueDateTime, setIssueDateTime] = useState<string>('');
useEffect(() => { useEffect(() => {
@@ -22,38 +24,38 @@ export const IssueInfoSection = ({
return ( return (
<> <>
<div className="txn-section"> <div className="txn-section">
<div className="section-title">발급 정보</div> <div className="section-title">{t('transaction.sections.issueInfo')}</div>
<ul className="kv-list"> <ul className="kv-list">
<li className="kv-row"> <li className="kv-row">
<span className="k">승인번호</span> <span className="k">{t('transaction.fields.approvalNumber')}</span>
<span className="v">{ issueInfo?.approvalNumber }</span> <span className="v">{ issueInfo?.approvalNumber }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">발행번호</span> <span className="k">{t('transaction.fields.issueNumber')}</span>
<span className="v">{ issueInfo?.issueNumber }</span> <span className="v">{ issueInfo?.issueNumber }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">발행일시</span> <span className="k">{t('transaction.fields.issueDateTime')}</span>
<span className="v">{ moment(issueDateTime).format('YYYY.MM.DD HH:mm:ss') }</span> <span className="v">{ moment(issueDateTime).format('YYYY.MM.DD HH:mm:ss') }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">용도</span> <span className="k">{t('transaction.fields.purpose')}</span>
<span className="v">{ issueInfo?.purpose }</span> <span className="v">{ issueInfo?.purpose }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">결제수단</span> <span className="k">{t('transaction.fields.paymentMethod')}</span>
<span className="v">{ issueInfo?.paymentMethod }</span> <span className="v">{ issueInfo?.paymentMethod }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">상품명</span> <span className="k">{t('transaction.fields.productName')}</span>
<span className="v">{ issueInfo?.productName }</span> <span className="v">{ issueInfo?.productName }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">진행상태</span> <span className="k">{t('transaction.fields.processResult')}</span>
<span className="v">{ issueInfo?.processResult }</span> <span className="v">{ issueInfo?.processResult }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">거래구분</span> <span className="k">{t('transaction.fields.transactionType')}</span>
<span className="v">{ issueInfo?.transactionType }</span> <span className="v">{ issueInfo?.transactionType }</span>
</li> </li>
</ul> </ul>

10
src/entities/transaction/ui/section/merchant-info-section.tsx
View File

@@ -1,3 +1,4 @@
import { useTranslation } from 'react-i18next';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoSectionKeys, InfoSectionProps } from '../../model/types'; import { InfoSectionKeys, InfoSectionProps } from '../../model/types';
import { SlideDown } from 'react-slidedown'; import { SlideDown } from 'react-slidedown';
@@ -8,6 +9,7 @@ export const MerchantInfoSection = ({
isOpen, isOpen,
onClickToOpenInfo onClickToOpenInfo
}: InfoSectionProps) => { }: InfoSectionProps) => {
const { t } = useTranslation();
const onClickToSetOpenInfo = () => { const onClickToSetOpenInfo = () => {
if(!!onClickToOpenInfo){ if(!!onClickToOpenInfo){
@@ -22,21 +24,21 @@ export const MerchantInfoSection = ({
className="section-title with-toggle" className="section-title with-toggle"
onClick={ () => onClickToSetOpenInfo() } onClick={ () => onClickToSetOpenInfo() }
> >
상점 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow> {t('transaction.sections.merchantInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div> </div>
<SlideDown className={'my-dropdown-slidedown'}> <SlideDown className={'my-dropdown-slidedown'}>
{ !!isOpen && { !!isOpen &&
<ul className="kv-list"> <ul className="kv-list">
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;상호</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.companyName')}</span>
<span className="v">{ merchantInfo?.companyName }</span> <span className="v">{ merchantInfo?.companyName }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;GID</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.gid')}</span>
<span className="v">{ merchantInfo?.gid }</span> <span className="v">{ merchantInfo?.gid }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;AID</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.aid')}</span>
<span className="v">{ merchantInfo?.aid }</span> <span className="v">{ merchantInfo?.aid }</span>
</li> </li>
</ul> </ul>

14
src/entities/transaction/ui/section/part-cancel-info-section.tsx
View File

@@ -4,6 +4,7 @@ import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoSectionKeys, InfoSectionProps } from '../../model/types'; import { InfoSectionKeys, InfoSectionProps } from '../../model/types';
import { SlideDown } from 'react-slidedown'; import { SlideDown } from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css'; import 'react-slidedown/lib/slidedown.css';
import { useTranslation } from 'react-i18next';
export const PartCancelInfoSection = ({ export const PartCancelInfoSection = ({
transactionCategory, transactionCategory,
@@ -12,13 +13,14 @@ export const PartCancelInfoSection = ({
isOpen, isOpen,
onClickToOpenInfo onClickToOpenInfo
}: InfoSectionProps) => { }: InfoSectionProps) => {
const { t } = useTranslation();
const subItems: Record<string, Record<string, string>> = { const subItems: Record<string, Record<string, string>> = {
originalTid: {name: '원거래 TID', type: 'string'}, originalTid: {name: t('transaction.fields.originalTid'), type: 'string'},
originalAmount: {name: '원거래 금액', type: 'number'}, originalAmount: {name: t('transaction.fields.originalAmount'), type: 'number'},
partCancelTid: {name: (serviceCode === '05')? '재승인 TID': '부분취소 TID', type: 'string'}, partCancelTid: {name: (serviceCode === '05')? t('transaction.fields.reApprovalTid'): t('transaction.fields.partCancelTid'), type: 'string'},
partCancelAmount: {name: '부분취소 금액', type: 'number'}, partCancelAmount: {name: t('transaction.fields.partCancelAmount'), type: 'number'},
remainingAmount: {name: (serviceCode === '05')? '재승인 금액': '부분취소 후 잔액', type: 'number'}, remainingAmount: {name: (serviceCode === '05')? t('transaction.fields.reApprovalAmount'): t('transaction.fields.remainingAmount'), type: 'number'},
}; };
const openSubItems: Record<string, Array<string>> = { const openSubItems: Record<string, Array<string>> = {
@@ -105,7 +107,7 @@ export const PartCancelInfoSection = ({
className="section-title with-toggle" className="section-title with-toggle"
onClick={ () => onClickToSetOpenInfo() } onClick={ () => onClickToSetOpenInfo() }
> >
부분취소 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow> { t('transaction.sections.partCancelInfo') } <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div> </div>
<SlideDown className={'my-dropdown-slidedown'}> <SlideDown className={'my-dropdown-slidedown'}>
{ !!isOpen && { !!isOpen &&

118
src/entities/transaction/ui/section/payment-info-section.tsx
View File

@@ -1,4 +1,5 @@
import moment from 'moment'; import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types'; import { InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types';
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
@@ -12,45 +13,46 @@ export const PaymentInfoSection = ({
isOpen, isOpen,
onClickToOpenInfo onClickToOpenInfo
}: InfoSectionProps) => { }: InfoSectionProps) => {
const { t } = useTranslation();
const subItems: Record<string, Record<string, string>> = { const subItems: Record<string, Record<string, string>> = {
approvalPurchase: {name: '승인매입', type: 'string'}, approvalPurchase: {name: t('transaction.fields.approvalPurchase'), type: 'string'},
approvalRejectCount: {name: '승인반송(횟수)', type: 'number', addString: '건'}, approvalRejectCount: {name: t('transaction.fields.approvalRejectCount'), type: 'number', addString: '건'},
approvalRepurchaseCount: {name: '승인재매입(횟수)', type: 'number', addString: '건'}, approvalRepurchaseCount: {name: t('transaction.fields.approvalRepurchaseCount'), type: 'number', addString: '건'},
approvalVAN: {name: '승인VAN', type: 'string'}, approvalVAN: {name: t('transaction.fields.approvalVAN'), type: 'string'},
cancelPurchase: {name: '취소매입', type: 'string'}, cancelPurchase: {name: t('transaction.fields.cancelPurchase'), type: 'string'},
cancelRejectCount: {name: '취소반송', type: 'number', addString: '건'}, cancelRejectCount: {name: t('transaction.fields.cancelRejectCount'), type: 'number', addString: '건'},
cancelRepurchaseCount: {name: '취소재매입', type: 'number', addString: '건'}, cancelRepurchaseCount: {name: t('transaction.fields.cancelRepurchaseCount'), type: 'number', addString: '건'},
purchaseVan: {name: '매입VAN', type: 'string'}, purchaseVan: {name: t('transaction.fields.purchaseVan'), type: 'string'},
purchaseCompany: {name: '매입사(발급사)', type: 'string'}, purchaseCompany: {name: t('transaction.fields.purchaseCompany'), type: 'string'},
cardNo: {name: '카드번호', type: 'string'}, cardNo: {name: t('transaction.fields.cardNo'), type: 'string'},
approvalNo: {name: '승인번호', type: 'string'}, approvalNo: {name: t('transaction.fields.approvalNo'), type: 'string'},
installmentMonth: {name: '할부기간', type: 'string', addString: '개월'}, installmentMonth: {name: t('transaction.fields.installmentPeriod'), type: 'string', addString: '개월'},
authentication: {name: '인증', type: 'string'}, authentication: {name: t('transaction.fields.authentication'), type: 'string'},
joinType: {name: '유형', type: 'string'}, joinType: {name: t('transaction.fields.joinType'), type: 'string'},
bankName: {name: '은행명', type: 'string'}, bankName: {name: t('transaction.fields.bankName'), type: 'string'},
accountNo: {name: '계좌번호', type: 'string'}, accountNo: {name: t('transaction.fields.accountNo'), type: 'string'},
refundCompleteDate: {name: '환불완료일', type: 'string'}, refundCompleteDate: {name: t('transaction.fields.refundCompleteDate'), type: 'string'},
customerId: {name: '고객ID', type: 'string'}, customerId: {name: t('transaction.fields.customerId'), type: 'string'},
culturelandId: {name: '컬처랜드ID', type: 'string'}, culturelandId: {name: t('transaction.fields.culturelandId'), type: 'string'},
partner: {name: '제휴사', type: 'string'}, partner: {name: t('transaction.fields.partner'), type: 'string'},
cpid: {name: 'CPID', type: 'string'}, cpid: {name: t('transaction.fields.cpid'), type: 'string'},
goodsCategory: {name: '상품구분', type: 'string'}, goodsCategory: {name: t('transaction.fields.goodsCategory'), type: 'string'},
cellphoneNo: {name: '휴대폰번호', type: 'string'}, cellphoneNo: {name: t('transaction.fields.cellphoneNo'), type: 'string'},
giftCardNumber: {name: '상품권번호', type: 'string'}, giftCardNumber: {name: t('transaction.fields.giftCardNumber'), type: 'string'},
depositBankName: {name: '입금금융기관명', type: 'string'}, depositBankName: {name: t('transaction.fields.depositBankName'), type: 'string'},
depositorName: {name: '입금자명', type: 'string'}, depositorName: {name: t('transaction.fields.depositorName'), type: 'string'},
depositDeadline: {name: '입금기한', type: 'date'}, depositDeadline: {name: t('transaction.fields.depositDeadline'), type: 'date'},
depositDate: {name: '입금일', type: 'date'}, depositDate: {name: t('transaction.fields.depositDate'), type: 'date'},
refundScheduleDate: {name: '환불예정일', type: 'date'}, refundScheduleDate: {name: t('transaction.fields.refundScheduleDate'), type: 'date'},
refundBankName: {name: '환불은행명', type: 'string'}, refundBankName: {name: t('transaction.fields.refundBankName'), type: 'string'},
refundAccountNo: {name: '환불계좌번호', type: 'string'}, refundAccountNo: {name: t('transaction.fields.refundAccountNo'), type: 'string'},
accountHolder: {name: '예금주', type: 'string'}, accountHolder: {name: t('transaction.fields.accountHolder'), type: 'string'},
}; };
const openSubItems: Record<string, Array<string>> = { const openSubItems: Record<string, Array<string>> = {
@@ -99,7 +101,7 @@ export const PaymentInfoSection = ({
<span className="v"> <span className="v">
{ (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'string') && { (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'string') &&
(k === 'installmentMonth' && newPaymentInfo[k] === '00') && (k === 'installmentMonth' && newPaymentInfo[k] === '00') &&
'일시불' t('transaction.fields.lumpSum')
} }
{ (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'string') && { (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'string') &&
(k === 'installmentMonth' && newPaymentInfo[k] !== '00') && (k === 'installmentMonth' && newPaymentInfo[k] !== '00') &&
@@ -142,7 +144,7 @@ export const PaymentInfoSection = ({
className="section-title with-toggle" className="section-title with-toggle"
onClick={ () => onClickToSetOpenInfo() } onClick={ () => onClickToSetOpenInfo() }
> >
결제 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow> {t('transaction.sections.paymentInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div> </div>
<SlideDown className={'my-dropdown-slidedown'}> <SlideDown className={'my-dropdown-slidedown'}>
{ !!isOpen && { !!isOpen &&
@@ -155,11 +157,11 @@ export const PaymentInfoSection = ({
{ (serviceCode === '01') && { (serviceCode === '01') &&
<> <>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인매입일</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalPurchaseDate')}</span>
<span className="v">{ paymentInfo?.approvalPurchase? moment(paymentInfo?.approvalPurchase).format('YYYY-MM-DD'): '' }</span> <span className="v">{ paymentInfo?.approvalPurchase? moment(paymentInfo?.approvalPurchase).format('YYYY-MM-DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인반송(횟수)</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalRejectCount')}</span>
<span className="v"> <span className="v">
<NumericFormat <NumericFormat
value={ paymentInfo?.approvalRejectCount } value={ paymentInfo?.approvalRejectCount }
@@ -169,7 +171,7 @@ export const PaymentInfoSection = ({
</span> </span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인재매입(횟수)</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalRepurchaseCount')}</span>
<span className="v"> <span className="v">
<NumericFormat <NumericFormat
value={ paymentInfo?.approvalRepurchaseCount } value={ paymentInfo?.approvalRepurchaseCount }
@@ -179,15 +181,15 @@ export const PaymentInfoSection = ({
</span> </span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인VAN</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalVAN')}</span>
<span className="v">{ paymentInfo?.approvalVAN }</span> <span className="v">{ paymentInfo?.approvalVAN }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소매입</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelPurchaseDate')}</span>
<span className="v">{ paymentInfo?.cancelPurchase? moment(paymentInfo?.cancelPurchase).format('YYYY-MM-DD'): '' }</span> <span className="v">{ paymentInfo?.cancelPurchase? moment(paymentInfo?.cancelPurchase).format('YYYY-MM-DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소반송(횟수)</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelRejectCount')}</span>
<span className="v"> <span className="v">
<NumericFormat <NumericFormat
value={ paymentInfo?.cancelRejectCount } value={ paymentInfo?.cancelRejectCount }
@@ -197,7 +199,7 @@ export const PaymentInfoSection = ({
</span> </span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소재매입(횟수)</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelRepurchaseCount')}</span>
<span className="v"> <span className="v">
<NumericFormat <NumericFormat
value={ paymentInfo?.cancelRepurchaseCount } value={ paymentInfo?.cancelRepurchaseCount }
@@ -207,27 +209,27 @@ export const PaymentInfoSection = ({
</span> </span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;매입VAN</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.purchaseVan')}</span>
<span className="v">{ paymentInfo?.purchaseVan }</span> <span className="v">{ paymentInfo?.purchaseVan }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;매입사(발급사)</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.purchaseCompany')}</span>
<span className="v">{ paymentInfo?.purchaseCompany }</span> <span className="v">{ paymentInfo?.purchaseCompany }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;카드번호</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cardNo')}</span>
<span className="v">{ paymentInfo?.cardNo }</span> <span className="v">{ paymentInfo?.cardNo }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인번호</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalNo')}</span>
<span className="v">{ paymentInfo?.approvalNo }</span> <span className="v">{ paymentInfo?.approvalNo }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;할부기간</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.installmentPeriod')}</span>
<span className="v">{ (paymentInfo?.installmentMonth === '00')? '일시불': paymentInfo?.installmentMonth }</span> <span className="v">{ (paymentInfo?.installmentMonth === '00')? t('transaction.fields.lumpSum'): paymentInfo?.installmentMonth }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;인증</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.authentication')}</span>
<span className="v">{ paymentInfo?.authentication }</span> <span className="v">{ paymentInfo?.authentication }</span>
</li> </li>
</> </>
@@ -235,7 +237,7 @@ export const PaymentInfoSection = ({
{ (serviceCode === '02') && { (serviceCode === '02') &&
<> <>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;유형</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.joinType')}</span>
<span className="v">{ paymentInfo?.joinType }</span> <span className="v">{ paymentInfo?.joinType }</span>
</li> </li>
</> </>
@@ -243,11 +245,11 @@ export const PaymentInfoSection = ({
{ (serviceCode === '02' || serviceCode === '03') && { (serviceCode === '02' || serviceCode === '03') &&
<> <>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;은행명</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.bankName')}</span>
<span className="v">{ paymentInfo?.bankName || paymentInfo?.depositBankName }</span> <span className="v">{ paymentInfo?.bankName || paymentInfo?.depositBankName }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;계좌번호</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.accountNo')}</span>
<span className="v">{ paymentInfo?.accountNo || paymentInfo?.virtualAccountNo }</span> <span className="v">{ paymentInfo?.accountNo || paymentInfo?.virtualAccountNo }</span>
</li> </li>
</> </>
@@ -255,31 +257,31 @@ export const PaymentInfoSection = ({
{ (serviceCode === '03') && { (serviceCode === '03') &&
<> <>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;입금자명</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.depositorName')}</span>
<span className="v">{ paymentInfo?.depositorName }</span> <span className="v">{ paymentInfo?.depositorName }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;입금기한</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.depositDeadline')}</span>
<span className="v">{ paymentInfo?.depositDeadline? moment(paymentInfo?.depositDeadline).format('YYYY-MM-DD'): '' }</span> <span className="v">{ paymentInfo?.depositDeadline? moment(paymentInfo?.depositDeadline).format('YYYY-MM-DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;입금일</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.depositDate')}</span>
<span className="v">{ paymentInfo?.depositDate? moment(paymentInfo?.depositDate).format('YYYY-MM-DD'): '' }</span> <span className="v">{ paymentInfo?.depositDate? moment(paymentInfo?.depositDate).format('YYYY-MM-DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;환불예정일</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.refundScheduleDate')}</span>
<span className="v">{ paymentInfo?.refundScheduleDate? moment(paymentInfo?.refundScheduleDate).format('YYYY-MM-DD'): '' }</span> <span className="v">{ paymentInfo?.refundScheduleDate? moment(paymentInfo?.refundScheduleDate).format('YYYY-MM-DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;환불은행명</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.refundBankName')}</span>
<span className="v">{ paymentInfo?.refundBankName }</span> <span className="v">{ paymentInfo?.refundBankName }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;환불계좌번호</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.refundAccountNo')}</span>
<span className="v">{ paymentInfo?.refundAccountNo }</span> <span className="v">{ paymentInfo?.refundAccountNo }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;예금주</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.accountHolder')}</span>
<span className="v">{ paymentInfo?.accountHolder }</span> <span className="v">{ paymentInfo?.accountHolder }</span>
</li> </li>
</> </>

20
src/entities/transaction/ui/section/settlement-info-section.tsx
View File

@@ -1,4 +1,5 @@
import moment from 'moment'; import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types'; import { InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types';
@@ -12,12 +13,13 @@ export const SettlementInfoSection = ({
isOpen, isOpen,
onClickToOpenInfo onClickToOpenInfo
}: InfoSectionProps) => { }: InfoSectionProps) => {
const { t } = useTranslation();
const subItems: Record<string, Record<string, string>> = { const subItems: Record<string, Record<string, string>> = {
approvalSettlementDate: {name: '승인정산일', type: 'date'}, approvalSettlementDate: {name: t('transaction.fields.approvalSettlementDate'), type: 'date'},
approvalSettlementAmount: {name: '승인정산금액', type: 'number'}, approvalSettlementAmount: {name: t('transaction.fields.approvalSettlementAmount'), type: 'number'},
cancelSettlementDate: {name: '취소정산일', type: 'date'}, cancelSettlementDate: {name: t('transaction.fields.cancelSettlementDate'), type: 'date'},
cancelSettlementAmount: {name: '취소정산금액', type: 'number'}, cancelSettlementAmount: {name: t('transaction.fields.cancelSettlementAmount'), type: 'number'},
}; };
const openSubItems: Record<string, Array<string>> = { const openSubItems: Record<string, Array<string>> = {
@@ -104,7 +106,7 @@ export const SettlementInfoSection = ({
className="section-title with-toggle" className="section-title with-toggle"
onClick={ () => onClickToSetOpenInfo() } onClick={ () => onClickToSetOpenInfo() }
> >
정산 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow> {t('transaction.sections.settlementInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div> </div>
<SlideDown className={'my-dropdown-slidedown'}> <SlideDown className={'my-dropdown-slidedown'}>
@@ -116,11 +118,11 @@ export const SettlementInfoSection = ({
{ (transactionCategory === TransactionCategory.Escrow) && { (transactionCategory === TransactionCategory.Escrow) &&
<> <>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인정산일</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalSettlementDate')}</span>
<span className="v">{ settlementInfo?.approvalSettlementDate? moment(settlementInfo?.approvalSettlementDate).format('YYYY.MM.DD'): '' }</span> <span className="v">{ settlementInfo?.approvalSettlementDate? moment(settlementInfo?.approvalSettlementDate).format('YYYY.MM.DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인정산금액</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalSettlementAmount')}</span>
<span className="v"> <span className="v">
<NumericFormat <NumericFormat
value={ settlementInfo?.approvalSettlementAmount } value={ settlementInfo?.approvalSettlementAmount }
@@ -131,11 +133,11 @@ export const SettlementInfoSection = ({
</span> </span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소정산일</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelSettlementDate')}</span>
<span className="v">{ settlementInfo?.cancelSettlementDate? moment(settlementInfo?.cancelSettlementDate).format('YYYY.MM.DD'): '' }</span> <span className="v">{ settlementInfo?.cancelSettlementDate? moment(settlementInfo?.cancelSettlementDate).format('YYYY.MM.DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소정산금액</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelSettlementAmount')}</span>
<span className="v"> <span className="v">
<NumericFormat <NumericFormat
value={ settlementInfo?.cancelSettlementAmount } value={ settlementInfo?.cancelSettlementAmount }

32
src/entities/transaction/ui/section/transaction-info-section.tsx
View File

@@ -1,4 +1,5 @@
import moment from 'moment'; import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types'; import { InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types';
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
@@ -12,15 +13,16 @@ export const TransactionInfoSection = ({
isOpen, isOpen,
onClickToOpenInfo onClickToOpenInfo
}: InfoSectionProps) => { }: InfoSectionProps) => {
const { t } = useTranslation();
const subItems: Record<string, Record<string, string>> = { const subItems: Record<string, Record<string, string>> = {
buyerName: {name: '구매자명', type: 'string'}, buyerName: {name: t('transaction.fields.buyerName'), type: 'string'},
buyerEmail: {name: '이메일', type: 'string'}, buyerEmail: {name: t('transaction.fields.buyerEmail'), type: 'string'},
buyerTel: {name: '전화번호', type: 'string'}, buyerTel: {name: t('transaction.fields.buyerTel'), type: 'string'},
cancelReason: {name: '취소사유', type: 'string'}, cancelReason: {name: t('transaction.fields.cancelReason'), type: 'string'},
cancelRequestor: {name: '취소요청자', type: 'string'}, cancelRequestor: {name: t('transaction.fields.cancelRequestor'), type: 'string'},
partialCancel: {name: '부분취소', type: 'string'}, partialCancel: {name: t('transaction.fields.partialCancel'), type: 'string'},
cashReceiptIssue: {name: '현금영수증발행', type: 'string'}, cashReceiptIssue: {name: t('transaction.fields.cashReceiptIssue'), type: 'string'},
}; };
const openSubItems: Record<string, Array<string>> = { const openSubItems: Record<string, Array<string>> = {
@@ -110,7 +112,7 @@ export const TransactionInfoSection = ({
className="section-title with-toggle" className="section-title with-toggle"
onClick={ () => onClickToSetOpenInfo() } onClick={ () => onClickToSetOpenInfo() }
> >
거래 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow> {t('transaction.sections.transactionInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div> </div>
<SlideDown className={'my-dropdown-slidedown'}> <SlideDown className={'my-dropdown-slidedown'}>
{ !!isOpen && { !!isOpen &&
@@ -121,32 +123,32 @@ export const TransactionInfoSection = ({
{ (transactionCategory === TransactionCategory.Escrow) && { (transactionCategory === TransactionCategory.Escrow) &&
<> <>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;구매자명</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.buyerName')}</span>
<span className="v">{ transactionInfo?.buyerName }</span> <span className="v">{ transactionInfo?.buyerName }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;이메일</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.buyerEmail')}</span>
<span className="v">{ transactionInfo?.buyerEmail }</span> <span className="v">{ transactionInfo?.buyerEmail }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;전화번호</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.buyerTel')}</span>
<span className="v">{ transactionInfo?.buyerTel }</span> <span className="v">{ transactionInfo?.buyerTel }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소사유</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelReason')}</span>
<span className="v">{ transactionInfo?.cancelReason }</span> <span className="v">{ transactionInfo?.cancelReason }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소요청자</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelRequestor')}</span>
<span className="v">{ transactionInfo?.cancelRequestor }</span> <span className="v">{ transactionInfo?.cancelRequestor }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;부분취소</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.partialCancel')}</span>
<span className="v">{ transactionInfo?.partialCancel }</span> <span className="v">{ transactionInfo?.partialCancel }</span>
</li> </li>
{ (serviceCode === '02' || serviceCode === '03') && { (serviceCode === '02' || serviceCode === '03') &&
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;현금영수증발행</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cashReceiptIssue')}</span>
<span className="v">{ transactionInfo?.cashReceiptIssue }</span> <span className="v">{ transactionInfo?.cashReceiptIssue }</span>
</li> </li>
} }

209
src/locales/en.json
View File

@@ -358,7 +358,214 @@
"searchOptions": "Search Options", "searchOptions": "Search Options",
"download": "Download", "download": "Download",
"cancelTransaction": "Cancel Transaction", "cancelTransaction": "Cancel Transaction",
"confirmCancel": "Do you want to cancel this transaction?" "confirmCancel": "Do you want to cancel this transaction?",
"bottomSheet": {
"escrowMailResend": {
"title": "Select Email Address",
"close": "Close",
"mailLabel": "Receive by Email",
"mail": "Mail",
"select": "Select",
"errorNoEmail": "No registered email information.\nPlease add email authentication information from the user management menu before applying."
},
"cashReceiptPurposeUpdate": {
"title": "Cash Receipt Purpose Change Notice",
"description": "When changing the purpose of a cash receipt, the existing issuance record will be cancelled and a new one will be issued according to the selected purpose.",
"expenseProof": "Expense Proof",
"incomeDeduction": "Income Deduction",
"expenseToIncome": "Expense Proof → Income Deduction",
"incomeToExpense": "Income Deduction → Expense Proof"
}
},
"sections": {
"importantInfo": "Important Information",
"billingInfo": "Billing Information",
"partCancelInfo": "Partial Cancel Information",
"detailInfo": "Detail Information",
"issueInfo": "Issue Information",
"escrowInfo": "Escrow Information",
"paymentInfo": "Payment Information",
"transactionInfo": "Transaction Information",
"settlementInfo": "Settlement Information",
"merchantInfo": "Merchant Information",
"amountDetail": "Amount Details"
},
"fields": {
"billKey": "Bill Key",
"tid": "TID",
"orderNumber": "Order Number",
"approvalNumber": "Approval Number",
"approvalDate": "Approval Date",
"approvalDay": "Approval Day",
"requestStatus": "Request Status",
"processResult": "Process Result",
"installmentMonth": "Installment Month",
"installmentPeriod": "Installment Period",
"installmentMonthly": "{{count}} Month Installment",
"lumpSum": "Lump Sum",
"productName": "Product Name",
"buyerName": "Buyer Name",
"buyer": "Buyer",
"originalTid": "Original TID",
"originalAmount": "Original Amount",
"partCancelTid": "Partial Cancel TID",
"reApprovalTid": "Re-approval TID",
"partCancelAmount": "Partial Cancel Amount",
"remainingAmount": "Remaining Amount",
"reApprovalAmount": "Re-approval Amount",
"cancelDate": "Cancel Date",
"cancelApprovalNumber": "Cancel Approval Number",
"receiptInfo": "Cash Receipt",
"transactionId": "Transaction ID",
"merchantTid": "Transaction ID",
"subMallName": "Sub Mall Name",
"subMallBusinessNumber": "Sub Mall Business Number",
"issueChannel": "Issue Channel",
"failureReason": "Failure Reason",
"issueNumber": "Issue Number",
"issueDate": "Issue Date",
"issueDateTime": "Issue Date Time",
"purpose": "Purpose",
"paymentMethod": "Payment Method",
"transactionStatus": "Transaction Status",
"transactionMethod": "Transaction Method",
"transactionType": "Transaction Type",
"deliveryStatus": "Delivery Status",
"deliveryRegistration": "Delivery Registration",
"deliveryComplete": "Delivery Complete",
"purchaseConfirm": "Purchase Confirm",
"purchaseReject": "Purchase Reject",
"rejectReason": "Reject Reason",
"escrowCertNumber": "Escrow Cert Number",
"deliveryCompany": "Delivery Company",
"trackingNumber": "Tracking Number",
"deliveryAddress": "Delivery Address",
"approvalPurchase": "Approval Purchase",
"approvalPurchaseDate": "Approval Purchase Date",
"approvalRejectCount": "Approval Reject (Count)",
"approvalRepurchaseCount": "Approval Repurchase (Count)",
"approvalVAN": "Approval VAN",
"cancelPurchase": "Cancel Purchase",
"cancelPurchaseDate": "Cancel Purchase",
"cancelRejectCount": "Cancel Reject (Count)",
"cancelRepurchaseCount": "Cancel Repurchase (Count)",
"purchaseVan": "Purchase VAN",
"purchaseCompany": "Purchase Company (Issuer)",
"cardNo": "Card Number",
"approvalNo": "Approval Number",
"authentication": "Authentication",
"joinType": "Type",
"bankName": "Bank Name",
"bank": "Bank",
"accountNo": "Account Number",
"refundCompleteDate": "Refund Complete Date",
"customerId": "Customer ID",
"culturelandId": "Cultureland ID",
"partner": "Partner",
"cpid": "CPID",
"goodsCategory": "Goods Category",
"cellphoneNo": "Cellphone Number",
"giftCardNumber": "Gift Card Number",
"depositBankName": "Deposit Bank Name",
"depositorName": "Depositor Name",
"depositDeadline": "Deposit Deadline",
"depositDate": "Deposit Date",
"refundScheduleDate": "Refund Schedule Date",
"refundBankName": "Refund Bank Name",
"refundAccountNo": "Refund Account Number",
"accountHolder": "Account Holder",
"buyerEmail": "Email",
"buyerTel": "Phone Number",
"cancelReason": "Cancel Reason",
"cancelRequestor": "Cancel Requestor",
"partialCancel": "Partial Cancel",
"cashReceiptIssue": "Cash Receipt Issue",
"approvalSettlementDate": "Approval Settlement Date",
"approvalSettlementAmount": "Approval Settlement Amount",
"cancelSettlementDate": "Cancel Settlement Date",
"cancelSettlementAmount": "Cancel Settlement Amount",
"companyName": "Company Name",
"gid": "GID",
"aid": "AID",
"mid": "MID",
"transactionRequestAmount": "Transaction Request Amount",
"approvalRequestAmount": "Approval Request Amount",
"transactionAmount": "Transaction Amount",
"creditCardAmount": "Credit Card Amount",
"cardAmount": "Credit Card Amount",
"pointAmount": "Point Amount",
"couponAmount": "Coupon Amount",
"escrowFee": "Escrow Fee",
"kakaoMoneyAmount": "Kakao Money",
"kakaoPointAmount": "Kakao Point",
"kakaoDiscountAmount": "Kakao Instant Discount",
"naverPointAmount": "Naver Point",
"tossMoneyAmount": "Toss Money",
"tossDiscountAmount": "Toss Discount",
"paycoPointAmount": "Payco Point",
"paycoCouponAmount": "Payco Coupon",
"supplyAmount": "Supply Amount",
"vat": "VAT",
"serviceAmount": "Service Charge",
"taxFreeAmount": "Tax Free Amount",
"amount": "Amount",
"totalBalance": "Total Balance",
"totalCancelAmount": "Total Cancel Amount",
"customerName": "Customer Name",
"transactionConfirmation": "Transaction Confirmation"
},
"handWrittenIssuance": {
"step1Title": "Enter Issue Information",
"step2Title": "Enter Issue Amount",
"businessNumber": "Business Number",
"incomeDeduction": "Income Deduction",
"expenseProof": "Expense Proof",
"productNamePlaceholder": "Product Name",
"buyerNamePlaceholder": "Buyer Name",
"issueNumberPlaceholder": "Business Number OR Phone Number",
"emailPlaceholder": "TEST123@nicepay.com",
"phoneNumberPlaceholder": "01012345678",
"issueAmount": "Issue Amount",
"vatAutoCalc": "VAT Auto Calculate",
"errorMessage": "The issue amount must equal the sum of supply amount, VAT, tax-free amount, and service charge."
},
"list": {
"paymentRequest": "Payment Request",
"manualIssuance": "Manual Issuance",
"separator": "|"
},
"cancel": {
"bankGroup": {
"select": "Select",
"notice": "Refunds will be paid to the entered account information without separate verification.\nPlease check the entered information once more."
},
"passwordGroup": {
"cancelPassword": "Cancel Password",
"passwordMismatch": "Password Mismatch"
},
"afterDeposit": {
"title": "Transaction Cancel (After Deposit Cancel)",
"notice": "The requested transaction cancellation can be processed after deposit.",
"cancelTransactionTitle": "Cancel Transaction Details",
"approvalAmount": "Approval Amount",
"depositRequestAmount": "Deposit Request Amount",
"depositInfoTitle": "Deposit Information",
"guide1": "Cancellation must be submitted through the [Cancel Request] button.",
"guide2": "Please enter the merchant name as the depositor name.",
"guide3": "Cancellation will proceed only if the same amount as the deposit request amount is deposited.",
"guide4": "Cancellation details can be confirmed after up to 3 days.",
"guide5": "After Deposit Cancellation Process:\nMerchant Cancel Request -> Merchant Deposit -> Confirm Deposit -> Process Cancel",
"guide6": "For transactions that have not been settled, please send transaction details to service@nicepay.co.kr. (Only for transactions with more than 2 days remaining until the settlement date)"
},
"partCancel": {
"balance": "Balance",
"cancelAmount": "Cancel Amount",
"taxableAmount": "Taxable Amount",
"taxAmount": "Tax Amount",
"taxFree": "Tax Free",
"serviceFee": "Service Fee"
}
}
}, },
"cashReceipt": { "cashReceipt": {
"title": "Cash Receipt", "title": "Cash Receipt",

209
src/locales/ko.json
View File

@@ -362,7 +362,214 @@
"searchOptions": "검색옵션", "searchOptions": "검색옵션",
"download": "다운로드", "download": "다운로드",
"cancelTransaction": "거래 취소", "cancelTransaction": "거래 취소",
"confirmCancel": "거래를 취소하시겠습니까?" "confirmCancel": "거래를 취소하시겠습니까?",
"bottomSheet": {
"escrowMailResend": {
"title": "이메일 주소를 선택하세요",
"close": "닫기",
"mailLabel": "메일로 받기",
"mail": "메일",
"select": "선택",
"errorNoEmail": "등록된 메일 정보가 없습니다.\n이메일 인증정보를 사용자관리 메뉴에서 추가 후 신청하세요."
},
"cashReceiptPurposeUpdate": {
"title": "현금영수증 용도 변경 안내",
"description": "현금영수증의 용도 변경 시 기존 발급 내역이 취소되며, 선택한 용도에 맞게 새로 발급됩니다.",
"expenseProof": "지출증빙용",
"incomeDeduction": "소득공제용",
"expenseToIncome": "지출증빙용 → 소득공제용",
"incomeToExpense": "소득공제용 → 지출증빙용"
}
},
"sections": {
"importantInfo": "중요 정보",
"billingInfo": "빌링 정보",
"partCancelInfo": "부분취소 정보",
"detailInfo": "상세 정보",
"issueInfo": "발급 정보",
"escrowInfo": "에스크로 정보",
"paymentInfo": "결제 정보",
"transactionInfo": "거래 정보",
"settlementInfo": "정산 정보",
"merchantInfo": "상점 정보",
"amountDetail": "금액상세"
},
"fields": {
"billKey": "빌키",
"tid": "TID",
"orderNumber": "주문번호",
"approvalNumber": "승인번호",
"approvalDate": "승인일자",
"approvalDay": "승인일",
"requestStatus": "요청상태",
"processResult": "처리결과",
"installmentMonth": "할부개월",
"installmentPeriod": "할부기간",
"installmentMonthly": "{{count}}개월 할부",
"lumpSum": "일시불",
"productName": "상품명",
"buyerName": "구매자명",
"buyer": "구매자",
"originalTid": "원거래 TID",
"originalAmount": "원거래 금액",
"partCancelTid": "부분취소 TID",
"reApprovalTid": "재승인 TID",
"partCancelAmount": "부분취소 금액",
"remainingAmount": "부분취소 후 잔액",
"reApprovalAmount": "재승인 금액",
"cancelDate": "취소일자",
"cancelApprovalNumber": "취소승인번호",
"receiptInfo": "현금영수증",
"transactionId": "거래ID",
"merchantTid": "거래ID",
"subMallName": "서브몰명",
"subMallBusinessNumber": "서브몰 사업자 번호",
"issueChannel": "발행경로",
"failureReason": "실패사유",
"issueNumber": "발행번호",
"issueDate": "발행일자",
"issueDateTime": "발행일시",
"purpose": "용도",
"paymentMethod": "결제수단",
"transactionStatus": "거래상태",
"transactionMethod": "거래수단",
"transactionType": "거래구분",
"deliveryStatus": "배송상태",
"deliveryRegistration": "배송등록",
"deliveryComplete": "배송완료",
"purchaseConfirm": "구매확인",
"purchaseReject": "구매거절",
"rejectReason": "거절사유",
"escrowCertNumber": "에스크로인증번호",
"deliveryCompany": "택배사",
"trackingNumber": "운송장번호",
"deliveryAddress": "배송주소",
"approvalPurchase": "승인매입",
"approvalPurchaseDate": "승인매입일",
"approvalRejectCount": "승인반송(횟수)",
"approvalRepurchaseCount": "승인재매입(횟수)",
"approvalVAN": "승인VAN",
"cancelPurchase": "취소매입",
"cancelPurchaseDate": "취소매입",
"cancelRejectCount": "취소반송(횟수)",
"cancelRepurchaseCount": "취소재매입(횟수)",
"purchaseVan": "매입VAN",
"purchaseCompany": "매입사(발급사)",
"cardNo": "카드번호",
"approvalNo": "승인번호",
"authentication": "인증",
"joinType": "유형",
"bankName": "은행명",
"bank": "은행",
"accountNo": "계좌번호",
"refundCompleteDate": "환불완료일",
"customerId": "고객ID",
"culturelandId": "컬처랜드ID",
"partner": "제휴사",
"cpid": "CPID",
"goodsCategory": "상품구분",
"cellphoneNo": "휴대폰번호",
"giftCardNumber": "상품권번호",
"depositBankName": "입금금융기관명",
"depositorName": "입금자명",
"depositDeadline": "입금기한",
"depositDate": "입금일",
"refundScheduleDate": "환불예정일",
"refundBankName": "환불은행명",
"refundAccountNo": "환불계좌번호",
"accountHolder": "예금주",
"buyerEmail": "이메일",
"buyerTel": "전화번호",
"cancelReason": "취소사유",
"cancelRequestor": "취소요청자",
"partialCancel": "부분취소",
"cashReceiptIssue": "현금영수증발행",
"approvalSettlementDate": "승인정산일",
"approvalSettlementAmount": "승인정산금액",
"cancelSettlementDate": "취소정산일",
"cancelSettlementAmount": "취소정산금액",
"companyName": "상호",
"gid": "GID",
"aid": "AID",
"mid": "MID",
"transactionRequestAmount": "거래요청금액",
"approvalRequestAmount": "승인요청금액",
"transactionAmount": "거래금액",
"creditCardAmount": "신용카드금액",
"cardAmount": "신용카드금액",
"pointAmount": "포인트금액",
"couponAmount": "쿠폰금액",
"escrowFee": "에스크로수수료",
"kakaoMoneyAmount": "카카오머니",
"kakaoPointAmount": "카카오포인트",
"kakaoDiscountAmount": "카카오 즉시할인",
"naverPointAmount": "네이버포인트",
"tossMoneyAmount": "토스머니",
"tossDiscountAmount": "토스할인",
"paycoPointAmount": "페이코포인트",
"paycoCouponAmount": "페이코쿠폰",
"supplyAmount": "공급가액",
"vat": "VAT",
"serviceAmount": "봉사료",
"taxFreeAmount": "면세금액",
"amount": "금액",
"totalBalance": "총 잔액",
"totalCancelAmount": "총 취소금액",
"customerName": "고객명",
"transactionConfirmation": "거래 확인서"
},
"handWrittenIssuance": {
"step1Title": "발행 정보 입력",
"step2Title": "발행 금액 입력",
"businessNumber": "사업자 번호",
"incomeDeduction": "소득공제",
"expenseProof": "지출증빙",
"productNamePlaceholder": "상품명",
"buyerNamePlaceholder": "구매자명",
"issueNumberPlaceholder": "사업자번호 OR 휴대폰번호",
"emailPlaceholder": "TEST123@nicepay.com",
"phoneNumberPlaceholder": "01012345678",
"issueAmount": "발행금액",
"vatAutoCalc": "VAT자동계산",
"errorMessage": "발행금액은 공급가액 VAT,면세금액, 봉사료의 총합과 같아야 합니다."
},
"list": {
"paymentRequest": "결제신청",
"manualIssuance": "수기발행",
"separator": "|"
},
"cancel": {
"bankGroup": {
"select": "선택",
"notice": "환불은 입력한 계좌정보로 별도 확인 절차없이 지급됩니다.\n입력 정보를 한번 더 확인해 주세요."
},
"passwordGroup": {
"cancelPassword": "취소 비밀번호",
"passwordMismatch": "비밀번호 불일치"
},
"afterDeposit": {
"title": "거래취소(입금 후 취소)",
"notice": "요청하신 거래취소는 입금 후 취소처리 가능합니다.",
"cancelTransactionTitle": "취소거래내역",
"approvalAmount": "승인금액",
"depositRequestAmount": "입금요청금액",
"depositInfoTitle": "입금 정보",
"guide1": "[취소요청] 버튼을 통해 취소 요청을 진행해야 접수됩니다.",
"guide2": "입금자명은 가맹점 상호로 입력해 주세요.",
"guide3": "입금요청금액과 동일한 금액을 입금해야 취소가 진행됩니다.",
"guide4": "취소내역은 최대 3일 이후 확인 가능합니다.",
"guide5": "입금 후 취소 프로세스 :\n가맹점의 취소요청 -> 가맹점의입금 -> 입금 확인 -> 취소 처리",
"guide6": "정산받지 않은 거래인 경우 service@nicepay.co.kr로 거래내역을 발송바랍니다. (단. 정산예정일이 2일 이상 남은 거래에 한함)"
},
"partCancel": {
"balance": "잔액",
"cancelAmount": "취소금액",
"taxableAmount": "과세액",
"taxAmount": "부가세",
"taxFree": "면세",
"serviceFee": "봉사료"
}
}
}, },
"cashReceipt": { "cashReceipt": {
"title": "현금영수증", "title": "현금영수증",