Add i18n localization to calendar-month filter component
- Add translation keys to filter namespace: - filter.periods.currentMonth: Current month period option - filter.periods.2months: 2 months period option - filter.selectDate: Date selection placeholder and alt text - Localize shared/ui/filter/calendar-month.tsx: - Replace hardcoded "조회기간" with filter.period - Replace hardcoded "당월" with filter.periods.currentMonth - Replace hardcoded "2개월" with filter.periods.2months - Replace hardcoded "3개월" with filter.periods.3months - Replace hardcoded "직접입력" with filter.periods.custom - Replace hardcoded "날짜 선택" with filter.selectDate 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -4,6 +4,7 @@ import { CalendarType, FilterMonthOptions } from '@/entities/common/model/types'
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import NiceCalendarMonth from '../calendar/nice-calendar-month';
|
||||
import { useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
interface FilterCalendarMonthProps {
|
||||
title?: string;
|
||||
@@ -20,7 +21,8 @@ export const FilterCalendarMonth = ({
|
||||
setStartMonth,
|
||||
setEndMonth
|
||||
}: FilterCalendarMonthProps) => {
|
||||
const [filterTitle, setFilterTitle] = useState<string>(title || '조회기간');
|
||||
const { t } = useTranslation();
|
||||
const [filterTitle, setFilterTitle] = useState<string>(title || t('filter.period'));
|
||||
const [monthReadOnly, setMonthReadyOnly] = useState<boolean>(false);
|
||||
const [filterMonthOptionsBtn, setFilterMonthOptionsBtn] = useState<FilterMonthOptions>(FilterMonthOptions.Input);
|
||||
const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
|
||||
@@ -83,22 +85,22 @@ export const FilterCalendarMonth = ({
|
||||
<div className="opt-label">{ filterTitle }</div>
|
||||
<div className="opt-controls col below h36">
|
||||
<div className="chip-row">
|
||||
<span
|
||||
<span
|
||||
className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Month1)? 'active': ''}` }
|
||||
onClick={ () => setFilterMonth(FilterMonthOptions.Month1) }
|
||||
>당월</span>
|
||||
<span
|
||||
>{t('filter.periods.currentMonth')}</span>
|
||||
<span
|
||||
className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Month2)? 'active': ''}` }
|
||||
onClick={ () => setFilterMonth(FilterMonthOptions.Month2) }
|
||||
>2개월</span>
|
||||
<span
|
||||
>{t('filter.periods.2months')}</span>
|
||||
<span
|
||||
className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Month3)? 'active': ''}` }
|
||||
onClick={ () => setFilterMonth(FilterMonthOptions.Month3) }
|
||||
>3개월</span>
|
||||
<span
|
||||
>{t('filter.periods.3months')}</span>
|
||||
<span
|
||||
className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Input)? 'active': ''}` }
|
||||
onClick={ () => setFilterMonth(FilterMonthOptions.Input) }
|
||||
>직접입력</span>
|
||||
>{t('filter.periods.custom')}</span>
|
||||
</div>
|
||||
<div className="range-row">
|
||||
<div className="input-wrapper date">
|
||||
@@ -106,7 +108,7 @@ export const FilterCalendarMonth = ({
|
||||
id="startDate"
|
||||
className="date-input"
|
||||
type="text"
|
||||
placeholder="날짜 선택"
|
||||
placeholder={t('filter.selectDate')}
|
||||
value={ moment(startMonth).format('YYYY.MM') }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
|
||||
readOnly={ monthReadOnly }
|
||||
@@ -118,7 +120,7 @@ export const FilterCalendarMonth = ({
|
||||
>
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_date.svg' }
|
||||
alt="날짜 선택"
|
||||
alt={t('filter.selectDate')}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
@@ -128,19 +130,19 @@ export const FilterCalendarMonth = ({
|
||||
id="endDate"
|
||||
className="date-input"
|
||||
type="text"
|
||||
placeholder="날짜 선택"
|
||||
placeholder={t('filter.selectDate')}
|
||||
value={ moment(endMonth).format('YYYY.MM') }
|
||||
onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
|
||||
readOnly={ monthReadOnly }
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
<button
|
||||
type="button"
|
||||
className="date-btn"
|
||||
onClick={ () => onClickToOpenCalendar(CalendarType.End) }
|
||||
>
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_date.svg' }
|
||||
alt="날짜 선택"
|
||||
alt={t('filter.selectDate')}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user