From 249461389e9e041d32d38bd3504aaadee61399f8 Mon Sep 17 00:00:00 2001
From: Jay Sheen <jay.sheen@bpsoft.co.kr>
Date: Tue, 4 Nov 2025 17:30:43 +0900
Subject: [PATCH] Apply t('home.money') localization to transaction
 amount-info-section
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove NumericFormat import dependency
- Replace 23 NumericFormat instances with t('home.money') pattern
- Remove hardcoded currency unit (원) - now included in locale
- Add null safety with || 0 for all amount values
- Applied to all transaction categories:
  - AllTransaction (various service codes)
  - CashReceipt (supplyAmount, vat, serviceAmount, taxFreeAmount)
  - Escrow (cardAmount, pointAmount, couponAmount, escrowFee)
  - Simple payment services (Kakao, Naver, Toss, Payco)
  - Billing

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../ui/section/amount-info-section.tsx        | 142 +++---------------
 1 file changed, 24 insertions(+), 118 deletions(-)

diff --git a/src/entities/transaction/ui/section/amount-info-section.tsx b/src/entities/transaction/ui/section/amount-info-section.tsx
index 51a99b9..1d12cd9 100644
--- a/src/entities/transaction/ui/section/amount-info-section.tsx
+++ b/src/entities/transaction/ui/section/amount-info-section.tsx
@@ -1,6 +1,5 @@
 import moment from 'moment';
 import { useTranslation } from 'react-i18next';
-import { NumericFormat } from 'react-number-format';
 import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
 import { useDownloadConfirmationMutation } from '../../api/use-download-confirmation-mutation';
 import { InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types';
@@ -119,11 +118,7 @@ export const AmountInfoSection = ({
         }
       }
       rs.push(
-        <NumericFormat
-          value={ value } 
-          thousandSeparator
-          displayType="text"
-        ></NumericFormat>
+        t('home.money', { value: new Intl.NumberFormat('en-US').format(value || 0) })
       )
     }
     return rs; 
@@ -202,43 +197,22 @@ export const AmountInfoSection = ({
           <div className="value">
             { (transactionCategory === TransactionCategory.AllTransaction) &&
               (serviceCode === '01' || serviceCode === '02' || serviceCode === '03' || serviceCode === '26') &&
-              <NumericFormat
-                value={ amountInfo?.transactionRequestAmount } 
-                thousandSeparator
-                displayType="text"
-              ></NumericFormat>
+              t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.transactionRequestAmount || 0) })
             }
             { (transactionCategory === TransactionCategory.AllTransaction) &&
-              (serviceCode === '05' || serviceCode === '14' || serviceCode === '21' 
+              (serviceCode === '05' || serviceCode === '14' || serviceCode === '21'
                 || serviceCode === '24' || serviceCode === '31') &&
-              <NumericFormat
-                value={ amountInfo?.transactionAmount} 
-                thousandSeparator
-                displayType="text"
-              ></NumericFormat> 
+              t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.transactionAmount || 0) })
             }
             { (transactionCategory === TransactionCategory.CashReceipt) &&
-              <NumericFormat
-                value={ amountInfo?.amount } 
-                thousandSeparator
-                displayType="text"
-              ></NumericFormat> 
+              t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.amount || 0) })
             }
             { (transactionCategory === TransactionCategory.Escrow) &&
-              <NumericFormat
-                value={ amountInfo?.approvalRequestAmount } 
-                thousandSeparator
-                displayType="text"
-              ></NumericFormat> 
+              t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.approvalRequestAmount || 0) })
             }
             { (transactionCategory === TransactionCategory.Billing) &&
-              <NumericFormat
-                value={ amountInfo?.transactionAmount } 
-                thousandSeparator
-                displayType="text"
-              ></NumericFormat> 
+              t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.transactionAmount || 0) })
             }
-            <span className="unit">원</span>
           </div>
           <button
             className="chip-btn"
@@ -261,41 +235,25 @@ export const AmountInfoSection = ({
                   <li className="amount-item">
                     <span className="label">·&nbsp;&nbsp;{t('transaction.fields.supplyAmount')}</span>
                     <span className="value">
-                      <NumericFormat
-                        value={ amountInfo?.supplyAmount || 0 }
-                        thousandSeparator
-                        displayType="text"
-                      ></NumericFormat>
+                      {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.supplyAmount || 0) })}
                     </span>
                   </li>
                   <li className="amount-item">
                     <span className="label">·&nbsp;&nbsp;{t('transaction.fields.vat')}</span>
                     <span className="value">
-                      <NumericFormat
-                        value={ amountInfo?.vat || 0 }
-                        thousandSeparator
-                        displayType="text"
-                      ></NumericFormat>
+                      {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.vat || 0) })}
                     </span>
                   </li>
                   <li className="amount-item">
                     <span className="label">·&nbsp;&nbsp;{t('transaction.fields.serviceAmount')}</span>
                     <span className="value">
-                      <NumericFormat
-                        value={ amountInfo?.serviceAmount || 0 }
-                        thousandSeparator
-                        displayType="text"
-                      ></NumericFormat>
+                      {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.serviceAmount || 0) })}
                     </span>
                   </li>
                   <li className="amount-item">
                     <span className="label">·&nbsp;&nbsp;{t('transaction.fields.taxFreeAmount')}</span>
                     <span className="value">
-                      <NumericFormat
-                        value={ amountInfo?.taxFreeAmount || 0 }
-                        thousandSeparator
-                        displayType="text"
-                      ></NumericFormat>
+                      {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.taxFreeAmount || 0) })}
                     </span>
                   </li>
                 </>
@@ -306,11 +264,7 @@ export const AmountInfoSection = ({
                     <li className="amount-item">
                       <span className="label">·&nbsp;&nbsp;{t('transaction.fields.transactionAmount')}</span>
                       <span className="value">
-                        <NumericFormat
-                          value={ amountInfo?.transactionAmount || 0 }
-                          thousandSeparator
-                          displayType="text"
-                        ></NumericFormat>
+                        {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.transactionAmount || 0) })}
                       </span>
                     </li>
                   }
@@ -319,31 +273,19 @@ export const AmountInfoSection = ({
                       <li className="amount-item">
                         <span className="label">·&nbsp;&nbsp;{t('transaction.fields.cardAmount')}</span>
                         <span className="value">
-                          <NumericFormat
-                            value={ amountInfo?.cardAmount || 0}
-                            thousandSeparator
-                            displayType="text"
-                          ></NumericFormat>
+                          {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.cardAmount || 0) })}
                         </span>
                       </li>
                       <li className="amount-item">
                         <span className="label">·&nbsp;&nbsp;{t('transaction.fields.pointAmount')}</span>
                         <span className="value">
-                          <NumericFormat
-                            value={ amountInfo?.pointAmount || 0 }
-                            thousandSeparator
-                            displayType="text"
-                          ></NumericFormat>
+                          {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.pointAmount || 0) })}
                         </span>
                       </li>
                       <li className="amount-item">
                         <span className="label">·&nbsp;&nbsp;{t('transaction.fields.couponAmount')}</span>
                         <span className="value">
-                          <NumericFormat
-                            value={ amountInfo?.couponAmount || 0 }
-                            thousandSeparator
-                            displayType="text"
-                          ></NumericFormat>
+                          {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.couponAmount || 0) })}
                         </span>
                       </li>
                     </>
@@ -352,11 +294,7 @@ export const AmountInfoSection = ({
                     <li className="amount-item">
                       <span className="label">·&nbsp;&nbsp;{t('transaction.fields.escrowFee')}</span>
                       <span className="value">
-                        <NumericFormat
-                          value={ amountInfo?.escrowFee || 0 }
-                          thousandSeparator
-                          displayType="text"
-                        ></NumericFormat>
+                        {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.escrowFee || 0) })}
                       </span>
                     </li>
                   }
@@ -367,31 +305,19 @@ export const AmountInfoSection = ({
                           <li className="amount-item">
                             <span className="label">·&nbsp;&nbsp;{t('transaction.fields.kakaoMoneyAmount')}</span>
                             <span className="value">
-                              <NumericFormat
-                                value={ amountInfo?.multiPointAmount || 0 }
-                                thousandSeparator
-                                displayType="text"
-                              ></NumericFormat>
+                              {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.multiPointAmount || 0) })}
                             </span>
                           </li>
                           <li className="amount-item">
                             <span className="label">·&nbsp;&nbsp;{t('transaction.fields.kakaoPointAmount')}</span>
                             <span className="value">
-                              <NumericFormat
-                                value={ amountInfo?.multiCouponAmount || 0 }
-                                thousandSeparator
-                                displayType="text"
-                              ></NumericFormat>
+                              {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.multiCouponAmount || 0) })}
                             </span>
                           </li>
                           <li className="amount-item">
                             <span className="label">·&nbsp;&nbsp;{t('transaction.fields.kakaoDiscountAmount')}</span>
                             <span className="value">
-                              <NumericFormat
-                                value={ amountInfo?.kakaoDiscountAmount || 0 }
-                                thousandSeparator
-                                displayType="text"
-                              ></NumericFormat>
+                              {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.kakaoDiscountAmount || 0) })}
                             </span>
                           </li>
                         </>
@@ -400,11 +326,7 @@ export const AmountInfoSection = ({
                         <li className="amount-item">
                           <span className="label">·&nbsp;&nbsp;{t('transaction.fields.naverPointAmount')}</span>
                           <span className="value">
-                            <NumericFormat
-                              value={ amountInfo?.multiPointAmount || 0 }
-                              thousandSeparator
-                              displayType="text"
-                            ></NumericFormat>
+                            {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.multiPointAmount || 0) })}
                           </span>
                         </li>
                       }
@@ -413,21 +335,13 @@ export const AmountInfoSection = ({
                           <li className="amount-item">
                             <span className="label">·&nbsp;&nbsp;{t('transaction.fields.tossMoneyAmount')}</span>
                             <span className="value">
-                              <NumericFormat
-                                value={ amountInfo?.multiPointAmount || 0 }
-                                thousandSeparator
-                                displayType="text"
-                              ></NumericFormat>
+                              {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.multiPointAmount || 0) })}
                             </span>
                           </li>
                           <li className="amount-item">
                             <span className="label">·&nbsp;&nbsp;{t('transaction.fields.tossDiscountAmount')}</span>
                             <span className="value">
-                              <NumericFormat
-                                value={ amountInfo?.tossDiscountAmount || 0 }
-                                thousandSeparator
-                                displayType="text"
-                              ></NumericFormat>
+                              {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.tossDiscountAmount || 0) })}
                             </span>
                           </li>
                         </>
@@ -437,21 +351,13 @@ export const AmountInfoSection = ({
                           <li className="amount-item">
                             <span className="label">·&nbsp;&nbsp;{t('transaction.fields.paycoPointAmount')}</span>
                             <span className="value">
-                              <NumericFormat
-                                value={ amountInfo?.multiPointAmount || 0 }
-                                thousandSeparator
-                                displayType="text"
-                              ></NumericFormat>
+                              {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.multiPointAmount || 0) })}
                             </span>
                           </li>
                           <li className="amount-item">
                             <span className="label">·&nbsp;&nbsp;{t('transaction.fields.paycoCouponAmount')}</span>
                             <span className="value">
-                              <NumericFormat
-                                value={ amountInfo?.multiCouponAmount || 0 }
-                                thousandSeparator
-                                displayType="text"
-                              ></NumericFormat>
+                              {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.multiCouponAmount || 0) })}
                             </span>
                           </li>
                         </>