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