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 from 'moment';
import 'moment/dist/locale/ko'; import 'moment/dist/locale/ko';
import 'moment/dist/locale/en-gb';
import { ListDateGroupProps } from '../model/types'; import { ListDateGroupProps } from '../model/types';
import { ListItem } from '../ui/list-item'; import { ListItem } from '../ui/list-item';
import { useTranslation } from 'react-i18next';
export const ListDateGroup = ({ export const ListDateGroup = ({
additionalServiceCategory, additionalServiceCategory,
@@ -10,7 +12,12 @@ export const ListDateGroup = ({
items, items,
onResendClick onResendClick
}: ListDateGroupProps) => { }: 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 = () => { const getStateDate = () => {
let stateDate = moment(date).format('YY.MM.DD(ddd)'); let stateDate = moment(date).format('YY.MM.DD(ddd)');
return stateDate; return stateDate;

View File

@@ -1,14 +1,21 @@
import moment from 'moment'; import moment from 'moment';
import 'moment/dist/locale/ko'; import 'moment/dist/locale/ko';
import 'moment/dist/locale/en-gb';
import { ListDateGroupProps } from '../model/types'; import { ListDateGroupProps } from '../model/types';
import { ListItem } from './list-item'; import { ListItem } from './list-item';
import { useTranslation } from 'react-i18next';
export const ListDateGroup = ({ export const ListDateGroup = ({
date, date,
periodType, periodType,
items items
}: ListDateGroupProps) => { }: 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 = () => { const getStateDate = () => {
let stateDate = moment(date).format('YY.MM.DD(ddd)'); let stateDate = moment(date).format('YY.MM.DD(ddd)');
return stateDate; return stateDate;

View File

@@ -1,26 +1,52 @@
import moment from 'moment'; import moment from 'moment';
import 'moment/dist/locale/ko'; import 'moment/dist/locale/ko';
import 'moment/dist/locale/en-gb';
import { ListDateGroupProps } from '../model/types'; import { ListDateGroupProps } from '../model/types';
import { ListItem } from './list-item'; import { ListItem } from './list-item';
import { useStore } from '@/shared/model/store'; import { useStore } from '@/shared/model/store';
import { useTranslation } from 'react-i18next';
export const ListDateGroup = ({ export const ListDateGroup = ({
transactionCategory, transactionCategory,
date, date,
items items
}: ListDateGroupProps) => { }: 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; let serviceCodes = useStore.getState().CommonStore.serviceCodes;
const getStateDate = () => { const getStateDate = () => {
let stateDate = moment(date).format('YY.MM.DD(ddd)'); let stateDate = moment(date).format('YY.MM.DD(ddd)');
return stateDate; 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) => { const getServiceName = (serviceCode: string) => {
let serviceName = ''; let serviceName = '';
for(let i=0;i<serviceCodes.length;i++){ for(let i=0;i<serviceCodes.length;i++){
if(serviceCodes[i].value === serviceCode){ if(serviceCodes[i].value === serviceCode){
serviceName = serviceCodes[i].name; serviceName = getLocalizedServiceCodeName(serviceCodes[i].name);
break; break;
} }
} }