Apply dynamic locale to list-date-group components for i18n support

- 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>
This commit is contained in:
Jay Sheen
2025-10-31 11:01:50 +09:00
parent abb0843f51
commit 255db14404
3 changed files with 44 additions and 4 deletions

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;
}
}