From fa5a56105d5c29a33f2693ae572ab4680b323cd0 Mon Sep 17 00:00:00 2001
From: Jay Sheen <jay.sheen@bpsoft.co.kr>
Date: Tue, 4 Nov 2025 16:50:54 +0900
Subject: [PATCH] Add t('home.count') localization and apply to
 amount-info-wrap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add home.count key to locale files
  - ko: "{{value}}건"
  - en: "{{value}} txns"
- Replace all NumericFormat with t('home.money') and t('home.count') in amount-info-wrap.tsx
- Apply count localization to transaction counts (totalTransactionCount, creditCardCount, accountTransferCount)
- Apply money localization to all remaining amount fields
- Remove NumericFormat dependency from amount-info-wrap.tsx

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../ui/info-wrap/amount-info-wrap.tsx         | 85 ++++---------------
 src/locales/en.json                           |  3 +-
 src/locales/ko.json                           |  1 +
 3 files changed, 21 insertions(+), 68 deletions(-)

diff --git a/src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx b/src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx
index 0af3e0e..bdcf400 100644
--- a/src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx
+++ b/src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx
@@ -1,4 +1,3 @@
-import { NumericFormat } from 'react-number-format';
 import { useTranslation } from 'react-i18next';
 import {
   InfoWrapKeys,
@@ -23,39 +22,27 @@ export const AmountInfoWrap = ({
               <span className="k">{t('settlement.totalTransactionAmount')}</span>
               <span className="v">
                 {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.totalTransactionAmount || 0) })}
-                <NumericFormat
-                  value={ amountInfo?.totalTransactionCount }
-                  thousandSeparator
-                  displayType="text"
-                  prefix=' ('
-                  suffix='건)'
-                ></NumericFormat>
+                {' ('}
+                {t('home.count', { value: new Intl.NumberFormat('en-US').format(amountInfo?.totalTransactionCount || 0) })}
+                {')'}
               </span>
               <ul className="txn-amount-detail">
                 <li>
                   <span>·&nbsp;&nbsp;{t('settlement.creditCard')}</span>
                   <span className="unset-child-span">
                     {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.creditCardAmount || 0) })}
-                    <NumericFormat
-                      value={ amountInfo?.creditCardCount }
-                      thousandSeparator
-                      displayType="text"
-                      prefix=' ('
-                      suffix='건)'
-                    ></NumericFormat>
+                    {' ('}
+                    {t('home.count', { value: new Intl.NumberFormat('en-US').format(amountInfo?.creditCardCount || 0) })}
+                    {')'}
                   </span>
                 </li>
                 <li>
                   <span>·&nbsp;&nbsp;{t('settlement.accountTransfer')}</span>
                   <span className="unset-child-span">
                     {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.accountTransferAmount || 0) })}
-                    <NumericFormat
-                      value={ amountInfo?.accountTransferCount }
-                      thousandSeparator
-                      displayType="text"
-                      prefix=' ('
-                      suffix='건)'
-                    ></NumericFormat>
+                    {' ('}
+                    {t('home.count', { value: new Intl.NumberFormat('en-US').format(amountInfo?.accountTransferCount || 0) })}
+                    {')'}
                   </span>
                 </li>
               </ul>
@@ -63,51 +50,31 @@ export const AmountInfoWrap = ({
             <li className="kv-row">
               <span className="k">{t('settlement.totalPgFee')}</span>
               <span className="v">
-                <NumericFormat
-                  value={ amountInfo?.totalPgFee }
-                  thousandSeparator
-                  displayType="text"
-                ></NumericFormat>
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.totalPgFee || 0) })}
               </span>
               <ul className="txn-amount-detail">
                 <li>
                   <span>·&nbsp;&nbsp;{t('settlement.paymentFee')}</span>
                   <span>
-                    <NumericFormat
-                      value={ amountInfo?.paymentFee }
-                      thousandSeparator
-                      displayType="text"
-                    ></NumericFormat>
+                    {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.paymentFee || 0) })}
                   </span>
                 </li>
                 <li>
                   <span>·&nbsp;&nbsp;{t('settlement.escrowFee')}</span>
                   <span>
-                    <NumericFormat
-                      value={ amountInfo?.escrowFee }
-                      thousandSeparator
-                      displayType="text"
-                    ></NumericFormat>
+                    {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.escrowFee || 0) })}
                   </span>
                 </li>
                 <li>
                   <span>·&nbsp;&nbsp;{t('settlement.authFee')}</span>
                   <span>
-                    <NumericFormat
-                      value={ amountInfo?.authFee }
-                      thousandSeparator
-                      displayType="text"
-                    ></NumericFormat>
+                    {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.authFee || 0) })}
                   </span>
                 </li>
                 <li>
                   <span>·&nbsp;&nbsp;VAT</span>
                   <span>
-                    <NumericFormat
-                      value={ amountInfo?.vatFee }
-                      thousandSeparator
-                      displayType="text"
-                    ></NumericFormat>
+                    {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.vatFee || 0) })}
                   </span>
                 </li>
               </ul>
@@ -115,41 +82,25 @@ export const AmountInfoWrap = ({
             <li className="kv-row">
               <span className="k">{t('settlement.hold')}</span>
               <span className="v">
-                <NumericFormat
-                  value={ amountInfo?.holdAmount }
-                  thousandSeparator
-                  displayType="text"
-                ></NumericFormat>
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.holdAmount || 0) })}
               </span>
             </li>
             <li className="kv-row">
               <span className="k">{t('settlement.release')}</span>
               <span className="v">
-                <NumericFormat
-                  value={ amountInfo?.releaseAmount }
-                  thousandSeparator
-                  displayType="text"
-                ></NumericFormat>
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.releaseAmount || 0) })}
               </span>
             </li>
             <li className="kv-row">
               <span className="k">{t('settlement.offset')}</span>
               <span className="v">
-                <NumericFormat
-                  value={ amountInfo?.offsetAmount }
-                  thousandSeparator
-                  displayType="text"
-                ></NumericFormat>
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.offsetAmount || 0) })}
               </span>
             </li>
             <li className="kv-row bolder">
               <span className="k">{t('settlement.settlementAmount')}</span>
               <span className="v">
-                <NumericFormat
-                  value={ settlementAmount }
-                  thousandSeparator
-                  displayType="text"
-                ></NumericFormat>
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(settlementAmount || 0) })}
               </span>
             </li>
           </ul>
diff --git a/src/locales/en.json b/src/locales/en.json
index 5d1c48c..e3e220a 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -366,7 +366,7 @@
         "todaySettlement": "Today's Settlement",
         "approvalCount": "Approved",
         "cancelCount": "Cancelled",
-        "count": " cases",
+        "count": "",
         "depositCompleted": "Completed",
         "settlementLimit": "Settlement Limit",
         "percentRemaining": "% remaining",
@@ -378,6 +378,7 @@
         "currencyWon": "",
         "currencySymbol": "₩",
         "money": "₩{{value}}",
+        "count": "{{value}} txns",
         "goToSales": "Go to Sales",
         "transactionInsights": "Transaction Insights",
         "basedOnLastWeek": "Based on Last Week",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index fd6a007..0c9efdc 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -378,6 +378,7 @@
         "currencyWon": "원",
         "currencySymbol": "₩",
         "money": "{{value}}원",
+        "count": "{{value}}건",
         "goToSales": "오늘 매출 바로가기",
         "transactionInsights": "거래 인사이트",
         "basedOnLastWeek": "최근 일주일 기준",