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:
@@ -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",
|
||||||
|
|||||||
@@ -91,6 +91,8 @@
|
|||||||
"issueNumber": "발행번호"
|
"issueNumber": "발행번호"
|
||||||
},
|
},
|
||||||
"periods": {
|
"periods": {
|
||||||
|
"today": "당일",
|
||||||
|
"week": "일주일",
|
||||||
"currentMonth": "당월",
|
"currentMonth": "당월",
|
||||||
"1month": "1개월",
|
"1month": "1개월",
|
||||||
"2months": "2개월",
|
"2months": "2개월",
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user