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:
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user