Add i18n localization to calendar filter component

- Add translation keys to filter.periods namespace:
  - filter.periods.today: Today period option
  - filter.periods.week: Week period option

- Localize shared/ui/filter/calendar.tsx:
  - Replace hardcoded "조회기간" with filter.period
  - Replace hardcoded "당일" with filter.periods.today
  - Replace hardcoded "일주일" with filter.periods.week
  - Replace hardcoded "1개월" with filter.periods.1month
  - 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:
Jay Sheen
2025-10-30 18:22:15 +09:00
parent d8c25b154c
commit de4e8ce3c5
3 changed files with 21 additions and 15 deletions

View File

@@ -91,6 +91,8 @@
"issueNumber": "Issue Number" "issueNumber": "Issue Number"
}, },
"periods": { "periods": {
"today": "Today",
"week": "1 Week",
"currentMonth": "Current Month", "currentMonth": "Current Month",
"1month": "1 Month", "1month": "1 Month",
"2months": "2 Months", "2months": "2 Months",

View File

@@ -91,6 +91,8 @@
"issueNumber": "발행번호" "issueNumber": "발행번호"
}, },
"periods": { "periods": {
"today": "당일",
"week": "일주일",
"currentMonth": "당월", "currentMonth": "당월",
"1month": "1개월", "1month": "1개월",
"2months": "2개월", "2months": "2개월",

View File

@@ -4,6 +4,7 @@ import { CalendarType, FilterDateOptions } from '@/entities/common/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common'; import { IMAGE_ROOT } from '@/shared/constants/common';
import NiceCalendar from '../calendar/nice-calendar'; import NiceCalendar from '../calendar/nice-calendar';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
interface FilterCalendarProps { interface FilterCalendarProps {
title?: string; title?: string;
@@ -20,7 +21,8 @@ export const FilterCalendar = ({
setStartDate, setStartDate,
setEndDate setEndDate
}: FilterCalendarProps) => { }: FilterCalendarProps) => {
const [filterTitle, setFilterTitle] = useState<string>(title || '조회기간'); const { t } = useTranslation();
const [filterTitle, setFilterTitle] = useState<string>(title || t('filter.period'));
const [dateReadOnly, setDateReadyOnly] = useState<boolean>(false); const [dateReadOnly, setDateReadyOnly] = useState<boolean>(false);
const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input); const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
const [calendarOpen, setCalendarOpen] = useState<boolean>(false); const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
@@ -109,19 +111,19 @@ export const FilterCalendar = ({
<span <span
className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Today)? 'active': ''}` } className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Today)? 'active': ''}` }
onClick={ () => setFilterDate(FilterDateOptions.Today) } onClick={ () => setFilterDate(FilterDateOptions.Today) }
></span> >{t('filter.periods.today')}</span>
<span <span
className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Week)? 'active': ''}` } className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Week)? 'active': ''}` }
onClick={ () => setFilterDate(FilterDateOptions.Week) } onClick={ () => setFilterDate(FilterDateOptions.Week) }
></span> >{t('filter.periods.week')}</span>
<span <span
className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Month)? 'active': ''}` } className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Month)? 'active': ''}` }
onClick={ () => setFilterDate(FilterDateOptions.Month) } onClick={ () => setFilterDate(FilterDateOptions.Month) }
>1</span> >{t('filter.periods.1month')}</span>
<span <span
className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Input)? 'active': ''}` } className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Input)? 'active': ''}` }
onClick={ () => setFilterDate(FilterDateOptions.Input) } onClick={ () => setFilterDate(FilterDateOptions.Input) }
></span> >{t('filter.periods.custom')}</span>
</div> </div>
<div className="range-row"> <div className="range-row">
<div className="input-wrapper date"> <div className="input-wrapper date">
@@ -129,7 +131,7 @@ export const FilterCalendar = ({
id="startDate" id="startDate"
className="date-input" className="date-input"
type="text" type="text"
placeholder="날짜 선택" placeholder={t('filter.selectDate')}
value={ newStartDate } value={ newStartDate }
onChange={ (e: ChangeEvent<HTMLInputElement>) => {} } onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
readOnly={ dateReadOnly } readOnly={ dateReadOnly }
@@ -141,7 +143,7 @@ export const FilterCalendar = ({
> >
<img <img
src={ IMAGE_ROOT + '/ico_date.svg' } src={ IMAGE_ROOT + '/ico_date.svg' }
alt="날짜 선택" alt={t('filter.selectDate')}
/> />
</button> </button>
</div> </div>
@@ -151,7 +153,7 @@ export const FilterCalendar = ({
id="endDate" id="endDate"
className="date-input" className="date-input"
type="text" type="text"
placeholder="날짜 선택" placeholder={t('filter.selectDate')}
value={ newEndDate } value={ newEndDate }
onChange={ (e: ChangeEvent<HTMLInputElement>) => {} } onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
readOnly={ dateReadOnly } readOnly={ dateReadOnly }
@@ -163,7 +165,7 @@ export const FilterCalendar = ({
> >
<img <img
src={ IMAGE_ROOT + '/ico_date.svg' } src={ IMAGE_ROOT + '/ico_date.svg' }
alt="날짜 선택" alt={t('filter.selectDate')}
/> />
</button> </button>
</div> </div>