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"
},
"periods": {
"today": "Today",
"week": "1 Week",
"currentMonth": "Current Month",
"1month": "1 Month",
"2months": "2 Months",

View File

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

View File

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