From 255db144049907db7db7eca687d2c129e68c6085 Mon Sep 17 00:00:00 2001
From: Jay Sheen <jay.sheen@bpsoft.co.kr>
Date: Fri, 31 Oct 2025 11:01:50 +0900
Subject: [PATCH] Apply dynamic locale to list-date-group components for i18n
 support
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Update moment locale based on current language (ko/en-gb)
- Apply to transaction, settlement, and additional-service modules
- Add service name localization in transaction list-date-group
- Date format displays weekday in user's language (ko: 수, en: Wed)

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../additional-service/ui/list-date-group.tsx |  9 +++++-
 .../settlement/ui/list-date-group.tsx         |  9 +++++-
 .../transaction/ui/list-date-group.tsx        | 30 +++++++++++++++++--
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/entities/additional-service/ui/list-date-group.tsx b/src/entities/additional-service/ui/list-date-group.tsx
index daedc76..fd2320f 100644
--- a/src/entities/additional-service/ui/list-date-group.tsx
+++ b/src/entities/additional-service/ui/list-date-group.tsx
@@ -1,7 +1,9 @@
 import moment from 'moment';
 import 'moment/dist/locale/ko';
+import 'moment/dist/locale/en-gb';
 import { ListDateGroupProps } from '../model/types';
 import { ListItem } from '../ui/list-item';
+import { useTranslation } from 'react-i18next';
 
 export const ListDateGroup = ({
   additionalServiceCategory,
@@ -10,7 +12,12 @@ export const ListDateGroup = ({
   items,
   onResendClick
 }: ListDateGroupProps) => {
-  moment.locale('ko');
+  const { i18n } = useTranslation();
+
+  // Set moment locale based on current language
+  const currentLocale = i18n.language === 'ko' ? 'ko' : 'en-gb';
+  moment.locale(currentLocale);
+
   const getStateDate = () => {
     let stateDate = moment(date).format('YY.MM.DD(ddd)');
     return stateDate;
diff --git a/src/entities/settlement/ui/list-date-group.tsx b/src/entities/settlement/ui/list-date-group.tsx
index 10d1e47..72115bd 100644
--- a/src/entities/settlement/ui/list-date-group.tsx
+++ b/src/entities/settlement/ui/list-date-group.tsx
@@ -1,14 +1,21 @@
 import moment from 'moment';
 import 'moment/dist/locale/ko';
+import 'moment/dist/locale/en-gb';
 import { ListDateGroupProps } from '../model/types';
 import { ListItem } from './list-item';
+import { useTranslation } from 'react-i18next';
 
 export const ListDateGroup = ({
   date,
   periodType,
   items
 }: ListDateGroupProps) => {
-  moment.locale('ko');
+  const { i18n } = useTranslation();
+
+  // Set moment locale based on current language
+  const currentLocale = i18n.language === 'ko' ? 'ko' : 'en-gb';
+  moment.locale(currentLocale);
+
   const getStateDate = () => {
     let stateDate = moment(date).format('YY.MM.DD(ddd)');
     return stateDate;
diff --git a/src/entities/transaction/ui/list-date-group.tsx b/src/entities/transaction/ui/list-date-group.tsx
index 5b8c53d..40f912b 100644
--- a/src/entities/transaction/ui/list-date-group.tsx
+++ b/src/entities/transaction/ui/list-date-group.tsx
@@ -1,26 +1,52 @@
 import moment from 'moment';
 import 'moment/dist/locale/ko';
+import 'moment/dist/locale/en-gb';
 import { ListDateGroupProps } from '../model/types';
 import { ListItem } from './list-item';
 import { useStore } from '@/shared/model/store';
+import { useTranslation } from 'react-i18next';
 
 export const ListDateGroup = ({
   transactionCategory,
   date,
   items
 }: ListDateGroupProps) => {
-  moment.locale('ko');
+  const { t, i18n } = useTranslation();
+
+  // Set moment locale based on current language
+  const currentLocale = i18n.language === 'ko' ? 'ko' : 'en-gb';
+  moment.locale(currentLocale);
+
   let serviceCodes = useStore.getState().CommonStore.serviceCodes;
   const getStateDate = () => {
     let stateDate = moment(date).format('YY.MM.DD(ddd)');
     return stateDate;
   };
 
+  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 getServiceName = (serviceCode: string) => {
     let serviceName = '';
     for(let i=0;i<serviceCodes.length;i++){
       if(serviceCodes[i].value === serviceCode){
-        serviceName = serviceCodes[i].name;
+        serviceName = getLocalizedServiceCodeName(serviceCodes[i].name);
         break;
       }
     }