[Object Object] 표시 오류 수정: Intl.NumberFormat 사용

This commit is contained in:
Jay Sheen
2025-10-30 10:19:25 +09:00
parent 3dbd6b4dda
commit 2553aca4de
17 changed files with 47 additions and 47 deletions

View File

@@ -47,7 +47,7 @@ export const TitleInfoWrap = ({
<>
<div className="num-amount">
<span className="amount-text">
{t('home.money', { value: <NumericFormat value={titleInfo?.amount} thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(titleInfo?.amount || 0) })}
</span>
</div>
<div className="num-store">{titleInfo?.corpName}</div>
@@ -59,7 +59,7 @@ export const TitleInfoWrap = ({
<>
<div className="num-amount">
<span className="amount-text">
{t('home.money', { value: <NumericFormat value={titleInfo?.amount} thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(titleInfo?.amount || 0) })}
</span>
</div>
<div className="num-store">{titleInfo?.corpName}</div>

View File

@@ -557,7 +557,7 @@ export const ListItem = ({
else if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
rs.push(
<div className="transaction-amount">
{t('home.money', { value: <NumericFormat value={amount} thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
</div>
);
}
@@ -566,7 +566,7 @@ export const ListItem = ({
) {
rs.push(
<div className="transaction-amount">
{t('home.money', { value: <NumericFormat value={amount} thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
</div>
);
}
@@ -576,7 +576,7 @@ export const ListItem = ({
key="payout-item-amount"
className="transaction-amount"
>
{t('home.money', { value: <NumericFormat value={amount} thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
</div>
);
}
@@ -588,7 +588,7 @@ export const ListItem = ({
key="fund-account-transfer-amount"
className="transaction-amount"
>
{t('home.money', { value: <NumericFormat value={amount} thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
</div>
);
}
@@ -598,7 +598,7 @@ export const ListItem = ({
key="payout-item-amount"
className="transaction-amount"
>
{t('home.money', { value: <NumericFormat value={amount} thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
</div>
);
}

View File

@@ -71,7 +71,7 @@ export const BoxContainer1 = () => {
<h3>{t('home.todaySales')}</h3>
<div className="today-sales">
<span className="won01">
{t('home.money', { value: <NumericFormat value={ sales?.todayTotalAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(sales?.todayTotalAmount || 0) })}
</span>
<span className={ `per ${(increaseRate && increaseRate >= 0)? 'plus': 'minus'}` }>
<NumericFormat
@@ -119,7 +119,7 @@ export const BoxContainer1 = () => {
<h3>{t('home.todaySettlement')}</h3>
<div className="today-sales">
<span className="won02">
{t('home.money', { value: <NumericFormat value={ settlement?.todaySettlementAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(settlement?.todaySettlementAmount || 0) })}
</span>
<span className="per">{t('home.depositCompleted')}</span>
<a className="arrow">
@@ -150,7 +150,7 @@ export const BoxContainer1 = () => {
<div className="remain-limit">
<span>{t('home.remainingSettlementLimit')}</span>
<strong style={{marginLeft: '4px'}}>
{t('home.money', { value: <NumericFormat value={ settlement?.availableCredit } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(settlement?.availableCredit || 0) })}
</strong>
</div>
</div>

View File

@@ -112,7 +112,7 @@ export const BoxContainer2 = () => {
<h4>{t('home.totalSales')}</h4>
<div className="today-sales mt-sty">
<span className="won01">
{t('home.money', { value: <NumericFormat value={ sales?.currentMonthAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(sales?.currentMonthAmount || 0) })}
</span>
<span className={ `per ${(salesIncrease && salesIncrease >= 0)? 'plus': 'minus'}` }>
<NumericFormat
@@ -136,7 +136,7 @@ export const BoxContainer2 = () => {
<h4>{t('home.totalSettlement')}</h4>
<div className="today-sales mt-sty">
<span className="won02">
{t('home.money', { value: <NumericFormat value={ settlement?.currentMonthSettlementAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(settlement?.currentMonthSettlementAmount || 0) })}
</span>
<span className={ `per ${(settlementIncrease && settlementIncrease >= 0)? 'plus': 'minus'}` }>
<NumericFormat
@@ -166,7 +166,7 @@ export const BoxContainer2 = () => {
<h4>{t('home.averageTransactionAmount')}</h4>
<div className="two-account">
<span>
{t('home.money', { value: <NumericFormat value={ averageTransactionAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(averageTransactionAmount || 0) })}
</span>
</div>
</div>
@@ -174,7 +174,7 @@ export const BoxContainer2 = () => {
<h4>{t('home.dailyAverageSalesAndCount')}</h4>
<div className="two-account">
<span>
{t('home.money', { value: <NumericFormat value={ dailyAverageSales } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(dailyAverageSales || 0) })}
(<NumericFormat
value={ dailyAverageCount }
thousandSeparator

View File

@@ -103,7 +103,7 @@ export const NoInterestInfoBottomSheet = ({
<div className="desc dot">
<span>{t('payment.applicationAmount')} : </span>
<span>
{t('home.money', { value: <NumericFormat value={ value.applicationAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(value.applicationAmount || 0) })}
</span>
</div>
</>

View File

@@ -22,7 +22,7 @@ export const AmountInfoWrap = ({
<li className="kv-row">
<span className="k">{t('settlement.totalTransactionAmount')}</span>
<span className="v">
{t('home.money', { value: <NumericFormat value={ amountInfo?.totalTransactionAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.totalTransactionAmount || 0) })}
<NumericFormat
value={ amountInfo?.totalTransactionCount }
thousandSeparator
@@ -35,7 +35,7 @@ export const AmountInfoWrap = ({
<li>
<span>·&nbsp;&nbsp;{t('settlement.creditCard')}</span>
<span className="unset-child-span">
{t('home.money', { value: <NumericFormat value={ amountInfo?.creditCardAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.creditCardAmount || 0) })}
<NumericFormat
value={ amountInfo?.creditCardCount }
thousandSeparator
@@ -48,7 +48,7 @@ export const AmountInfoWrap = ({
<li>
<span>·&nbsp;&nbsp;{t('settlement.accountTransfer')}</span>
<span className="unset-child-span">
{t('home.money', { value: <NumericFormat value={ amountInfo?.accountTransferAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.accountTransferAmount || 0) })}
<NumericFormat
value={ amountInfo?.accountTransferCount }
thousandSeparator
@@ -159,49 +159,49 @@ export const AmountInfoWrap = ({
<li className="kv-row">
<span className="k">{t('settlement.transactionAmount')}</span>
<span className="v">
{t('home.money', { value: <NumericFormat value={ amountInfo?.transactionAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.transactionAmount || 0) })}
</span>
</li>
<li className="kv-row">
<span className="k">{t('settlement.paymentFee')}</span>
<span className="v">
{t('home.money', { value: <NumericFormat value={ amountInfo?.paymentFee } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.paymentFee || 0) })}
</span>
</li>
<li className="kv-row">
<span className="k">{t('settlement.escrowFee')}</span>
<span className="v">
{t('home.money', { value: <NumericFormat value={ amountInfo?.escrowFee } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.escrowFee || 0) })}
</span>
</li>
<li className="kv-row">
<span className="k">{t('settlement.authFee')}</span>
<span className="v">
{t('home.money', { value: <NumericFormat value={ amountInfo?.authFee } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.authFee || 0) })}
</span>
</li>
<li className="kv-row">
<span className="k">VAT</span>
<span className="v">
{t('home.money', { value: <NumericFormat value={ amountInfo?.vatFee } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.vatFee || 0) })}
</span>
</li>
<li className="kv-row">
<span className="k">{t('settlement.expectedSettlementAmount')}</span>
<span className="v">
{t('home.money', { value: <NumericFormat value={ amountInfo?.settlementAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.settlementAmount || 0) })}
</span>
</li>
<li className="kv-row">
<span className="k">{t('settlement.preSettlementCancelOffset')}</span>
<span className="v">
{t('home.money', { value: <NumericFormat value={ amountInfo?.preSettlementCancelOffset } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.preSettlementCancelOffset || 0) })}
</span>
</li>
<li className="kv-row bolder">
<span className="k">{t('settlement.settlementAmount')}</span>
<span className="v">
{t('home.money', { value: <NumericFormat value={ amountInfo?.finalSettlementAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.finalSettlementAmount || 0) })}
</span>
</li>
</ul>

View File

@@ -65,7 +65,7 @@ export const ListItem = ({
}
</div>
<div className="transaction-amount">
{t('home.money', { value: <NumericFormat value={ settlementAmount || transactionAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(settlementAmount || transactionAmount || 0) })}
</div>
</div>
</>

View File

@@ -391,7 +391,7 @@ export const ListWrap = ({
<div className="summary-label label">{t('settlement.settlementAmount')}</div>
<div className="summary-amount divTop">
<span className="amount-text">
{t('home.money', { value: <NumericFormat value={ settlementAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(settlementAmount || 0) })}
</span>
<button
onClick={ () => setIsOpenSummary(!isOpenSummary) }

View File

@@ -69,25 +69,25 @@ export const VatReturnListDetailBottomSheet = ({
<div className="row">
<div className="label desc dot">{t('vatReturn.transactionAmount')} :</div>
<div className="value">
{t('home.money', { value: <NumericFormat value={ transactionAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(transactionAmount || 0) })}
</div>
</div>
<div className="row">
<div className="label desc dot">{t('vatReturn.supplyAmount')} :</div>
<div className="value">
{t('home.money', { value: <NumericFormat value={ supplyAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(supplyAmount || 0) })}
</div>
</div>
<div className="row">
<div className="label desc dot">{t('vatReturn.vat')} :</div>
<div className="value">
{t('home.money', { value: <NumericFormat value={ vatAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(vatAmount || 0) })}
</div>
</div>
<div className="row">
<div className="label desc dot">{t('vatReturn.totalAmount')} :</div>
<div className="value">
{t('home.money', { value: <NumericFormat value={ totalAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(totalAmount || 0) })}
</div>
</div>
</div>
@@ -105,7 +105,7 @@ export const VatReturnListDetailBottomSheet = ({
<span className="date">{ value.transactionDate? moment(value.transactionDate).format('YYYY-MM-DD'): '' }</span>
<div className="amount">
<span className="text">
{t('home.money', { value: <NumericFormat value={ value.totalAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(value.totalAmount || 0) })}
</span>
<img
className="arrow down"
@@ -124,13 +124,13 @@ export const VatReturnListDetailBottomSheet = ({
</div>
<div className="values">
<span>
{t('home.money', { value: <NumericFormat value={ value.transactionAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(value.transactionAmount || 0) })}
</span>
<span>
{t('home.money', { value: <NumericFormat value={ value.supplyAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(value.supplyAmount || 0) })}
</span>
<span>
{t('home.money', { value: <NumericFormat value={ value.vatAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(value.vatAmount || 0) })}
</span>
</div>
</div>

View File

@@ -42,7 +42,7 @@ export const ListItem = ({
</div>
</div>
<div className="transaction-amount">
{t('home.money', { value: <NumericFormat value={ amount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
</div>
</div>
</>

View File

@@ -37,7 +37,7 @@ export const AmountSection = ({
<div className="txn-num-group">
<div className="txn-amount">
<div className="value">
{t('home.money', { value: <NumericFormat value={ detail.totalAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(detail.totalAmount || 0) })}
</div>
<button
className="chip-btn"
@@ -54,13 +54,13 @@ export const AmountSection = ({
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;{t('vatReturn.supplyAmount')}</span>
<span className="value">
{t('home.money', { value: <NumericFormat value={ detail.supplyAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(detail.supplyAmount || 0) })}
</span>
</li>
<li className="amount-item">
<span className="label">·&nbsp;&nbsp;{t('vatReturn.vat')}</span>
<span className="value">
{t('home.money', { value: <NumericFormat value={ detail.vatAmount } thousandSeparator displayType="text" /> })}
{t('home.money', { value: new Intl.NumberFormat('en-US').format(detail.vatAmount || 0) })}
</span>
</li>
</ul>