Add localization for payment method and currency in transaction/settlement modules

- Add payment method name localization mapping for both Korean and English - Support payment methods: Credit Card, Virtual Account, Account Transfer, Simple Account Transfer, Mobile Payment, SSG Money, SSG Bank Account, Culture Voucher, Tmoney Pay - Update transaction list to use localized currency format (ko: 9,999,999원, en: ₩9,999,999) - Apply localization to payment method dropdown options in filters and list pages - Update settlement transaction info to display localized payment method names 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-31 10:23:04 +09:00
parent 81c46462a3
commit abb0843f51
7 changed files with 115 additions and 16 deletions
--- a/src/entities/settlement/model/constant.ts
+++ b/src/entities/settlement/model/constant.ts
@@ -18,3 +18,30 @@ export const getSettlementPaymentMethodOptionsGroup = (t: TFunction) => [
  {name: t('transaction.constants.cultureLand'), value: SettlementPaymentMethod.CULTURE_VOUCHER},
  {name: t('transaction.constants.tmoneyPay'), value: SettlementPaymentMethod.TMONEY_PAY},
 ];
+
+export const getPaymentMethodName = (t: TFunction, paymentMethod?: string): string => {
+  if (!paymentMethod) return '';
+
+  const methodMap: Record<string, string> = {
+    '신용카드': t('transaction.constants.creditCard'),
+    '가상계좌': t('transaction.constants.virtualAccount'),
+    '계좌이체': t('transaction.constants.accountTransfer'),
+    '간편계좌이체': t('transaction.constants.accountSimpleTransfer'),
+    '휴대폰': t('transaction.constants.mobilePayment'),
+    'SSG머니': t('transaction.constants.ssgMoney'),
+    'SSG은행계좌': t('transaction.constants.ssgBank'),
+    '문화상품권': t('transaction.constants.cultureLand'),
+    '티머니페이': t('transaction.constants.tmoneyPay'),
+    'Credit Card': t('transaction.constants.creditCard'),
+    'Virtual Account': t('transaction.constants.virtualAccount'),
+    'Account Transfer': t('transaction.constants.accountTransfer'),
+    'Simple Account Transfer': t('transaction.constants.accountSimpleTransfer'),
+    'Mobile Payment': t('transaction.constants.mobilePayment'),
+    'SSG Money': t('transaction.constants.ssgMoney'),
+    'SSG Bank Account': t('transaction.constants.ssgBank'),
+    'Culture Voucher': t('transaction.constants.cultureLand'),
+    'Tmoney Pay': t('transaction.constants.tmoneyPay'),
+  };
+
+  return methodMap[paymentMethod] || paymentMethod;
+};
--- a/src/entities/settlement/ui/info-wrap/transaction-info-wrap.tsx
+++ b/src/entities/settlement/ui/info-wrap/transaction-info-wrap.tsx
@@ -7,6 +7,7 @@ import {
  InfoWrapKeys,
  TransactionInfoWrapProps,
 } from '@/entities/settlement/model/types';
+import { getPaymentMethodName } from '@/entities/settlement/model/constant';

 export const TransactionInfoWrap = ({
  transactionInfo,
@@ -51,7 +52,7 @@ export const TransactionInfoWrap = ({
            </li>
            <li className="kv-row bolder">
              <span className="k">{t('transaction.fields.paymentMethod')}</span>
-              <span className="v">{ transactionInfo?.paymentMethod }</span>
+              <span className="v">{ getPaymentMethodName(t, transactionInfo?.paymentMethod) }</span>
            </li>
            <li className="kv-row bolder">
              <span className="k">{t('additionalService.settlementAgency.settlementDate')}</span>
--- a/src/entities/transaction/model/contant.ts
+++ b/src/entities/transaction/model/contant.ts
@@ -210,3 +210,30 @@ export const getBillingPaymentMethodBtnGroup = (t: TFunction) => [
  {name: t('transaction.constants.virtualAccount'), value: BillingPaymentMethod.VIRTUAL_ACCOUNT},
  {name: t('transaction.constants.mobilePayment'), value: BillingPaymentMethod.MOBILE_PAYMENT},
 ];
+
+export const getPaymentMethodName = (t: TFunction, paymentMethod?: string): string => {
+  if (!paymentMethod) return '';
+
+  const methodMap: Record<string, string> = {
+    '신용카드': t('transaction.constants.creditCard'),
+    '가상계좌': t('transaction.constants.virtualAccount'),
+    '계좌이체': t('transaction.constants.accountTransfer'),
+    '간편계좌이체': t('transaction.constants.accountSimpleTransfer'),
+    '휴대폰': t('transaction.constants.mobilePayment'),
+    'SSG머니': t('transaction.constants.ssgMoney'),
+    'SSG은행계좌': t('transaction.constants.ssgBank'),
+    '문화상품권': t('transaction.constants.cultureLand'),
+    '티머니페이': t('transaction.constants.tmoneyPay'),
+    'Credit Card': t('transaction.constants.creditCard'),
+    'Virtual Account': t('transaction.constants.virtualAccount'),
+    'Account Transfer': t('transaction.constants.accountTransfer'),
+    'Simple Account Transfer': t('transaction.constants.accountSimpleTransfer'),
+    'Mobile Payment': t('transaction.constants.mobilePayment'),
+    'SSG Money': t('transaction.constants.ssgMoney'),
+    'SSG Bank Account': t('transaction.constants.ssgBank'),
+    'Culture Voucher': t('transaction.constants.cultureLand'),
+    'Tmoney Pay': t('transaction.constants.tmoneyPay'),
+  };
+
+  return methodMap[paymentMethod] || paymentMethod;
+};
--- a/src/entities/transaction/ui/filter/all-transaction-filter.tsx
+++ b/src/entities/transaction/ui/filter/all-transaction-filter.tsx
@@ -83,6 +83,34 @@ export const AllTransactionFilter = ({
  const moidTidOptionsGroup = getAllTransactionMoidTidOptionsGroup(t);
  const allTransactionStatusCode = getAllTransactionStatusCode(t);

+  const getLocalizedServiceCodeName = (name?: string): string => {
+    if (!name) return '';
+
+    const nameMap: Record<string, string> = {
+      '전체': t('transaction.constants.all'),
+      '신용카드': t('transaction.constants.creditCard'),
+      '계좌이체': t('transaction.constants.accountTransfer'),
+      '가상계좌': t('transaction.constants.virtualAccount'),
+      '휴대폰': t('transaction.constants.mobilePayment'),
+      '문화상품권': t('transaction.constants.cultureLand'),
+      '(구)SSG머니': t('transaction.constants.ssgMoney'),
+      'SSG은행계좌결제': t('transaction.constants.ssgBank'),
+      '계좌간편결제': t('transaction.constants.accountSimpleTransfer'),
+      '티머니페이': t('transaction.constants.tmoneyPay'),
+    };
+
+    return nameMap[name] || name;
+  };
+
+  const getLocalizedServiceCodeOptions = () => {
+    if (!serviceCodeOptions) return [];
+
+    return serviceCodeOptions.map(option => ({
+      ...option,
+      name: getLocalizedServiceCodeName(option.name)
+    }));
+  };
+
  const onClickToClose = () => {
    setFilterOn(false);
  };
@@ -238,7 +266,7 @@ export const AllTransactionFilter = ({
              title={t('filter.paymentMethod')}
              selectValue={ filterServiceCode }
              selectSetter={ onChangeServiceCode }
-              selectOptions={ serviceCodeOptions }
+              selectOptions={ getLocalizedServiceCodeOptions() }
            ></FilterSelect>
            }

--- a/src/entities/transaction/ui/list-item.tsx
+++ b/src/entities/transaction/ui/list-item.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { ListItemProps, TransactionCategory } from '../model/types';
 import moment from 'moment';
 import { useStore } from '@/shared/model/store';
-import { getAllTransactionStatusCode } from '../model/contant';
+import { getAllTransactionStatusCode, getPaymentMethodName } from '../model/contant';
 import { useTranslation } from 'react-i18next';

 export const ListItem = ({
@@ -179,7 +179,7 @@ export const ListItem = ({
          <span className="separator">|</span>
          <span>{ transactionType }</span>
          <span className="separator">|</span>
-          <span>{ paymentMethod }</span>
+          <span>{ getPaymentMethodName(t, paymentMethod) }</span>
          <span className="separator">|</span>
          <span>{ processResult }</span>
        </div>
@@ -212,7 +212,7 @@ export const ListItem = ({
          <span className="separator">|</span>
          <span>{ processResult }</span>
          <span className="separator">|</span>
-          <span>{ paymentMethod }</span>
+          <span>{ getPaymentMethodName(t, paymentMethod) }</span>
        </div>
      );
    }
@@ -233,12 +233,7 @@ export const ListItem = ({
          { getDetail() }
        </div>
        <div className="transaction-amount">
-          <NumericFormat
-            value={ goodsAmount || amount || transactionAmount }
-            thousandSeparator
-            displayType="text"
-            suffix={ t('home.currencyWon') }
-          ></NumericFormat>
+          {t('home.money', { value: new Intl.NumberFormat('en-US').format(goodsAmount || amount || transactionAmount || 0) })}
        </div>
      </div>
    </>
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -93,7 +93,7 @@
        "periods": {
          "today": "Today",
          "week": "1 Week",
-          "currentMonth": "Current Month",
+          "currentMonth": "Current",
          "1month": "1 Month",
          "2months": "2 Months",
          "3months": "3 Months",
--- a/src/pages/transaction/all-transaction/list-page.tsx
+++ b/src/pages/transaction/all-transaction/list-page.tsx
@@ -197,16 +197,37 @@ export const AllTransactionListPage = () => {
    let rs = [];
    if(!!serviceCodeOptions && serviceCodeOptions.length > 0)
    for(let i=0;i<serviceCodeOptions.length;i++){
+      const option = serviceCodeOptions[i];
+      const localizedName = getLocalizedServiceCodeName(option?.name);
      rs.push(
        <option
          key={`key-${i}`}
-          value={serviceCodeOptions[i]?.value}
-        >{ serviceCodeOptions[i]?.name }</option>
+          value={option?.value}
+        >{ localizedName }</option>
      )
    }
    return rs;
  };

+  const getLocalizedServiceCodeName = (name?: string): string => {
+    if (!name) return '';
+
+    const nameMap: Record<string, string> = {
+      '전체': t('transaction.constants.all'),
+      '신용카드': t('transaction.constants.creditCard'),
+      '계좌이체': t('transaction.constants.accountTransfer'),
+      '가상계좌': t('transaction.constants.virtualAccount'),
+      '휴대폰': t('transaction.constants.mobilePayment'),
+      '문화상품권': t('transaction.constants.cultureLand'),
+      '(구)SSG머니': t('transaction.constants.ssgMoney'),
+      'SSG은행계좌결제': t('transaction.constants.ssgBank'),
+      '계좌간편결제': t('transaction.constants.accountSimpleTransfer'),
+      '티머니페이': t('transaction.constants.tmoneyPay'),
+    };
+
+    return nameMap[name] || name;
+  };
+
  useEffect(() => {
    callServiceCodeOptions();
  }, []);