From de4e8ce3c598fa862b80e02ed13f39b14ff10e2d Mon Sep 17 00:00:00 2001
From: Jay Sheen <jay.sheen@bpsoft.co.kr>
Date: Thu, 30 Oct 2025 18:22:15 +0900
Subject: [PATCH] Add i18n localization to calendar filter component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 src/locales/en.json               |  2 ++
 src/locales/ko.json               |  2 ++
 src/shared/ui/filter/calendar.tsx | 32 ++++++++++++++++---------------
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index f67b51d..5faf48b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -91,6 +91,8 @@
           "issueNumber": "Issue Number"
         },
         "periods": {
+          "today": "Today",
+          "week": "1 Week",
           "currentMonth": "Current Month",
           "1month": "1 Month",
           "2months": "2 Months",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 2c5c95b..63db7b4 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -91,6 +91,8 @@
           "issueNumber": "발행번호"
         },
         "periods": {
+          "today": "당일",
+          "week": "일주일",
           "currentMonth": "당월",
           "1month": "1개월",
           "2months": "2개월",
diff --git a/src/shared/ui/filter/calendar.tsx b/src/shared/ui/filter/calendar.tsx
index 164f5f0..4cd5675 100644
--- a/src/shared/ui/filter/calendar.tsx
+++ b/src/shared/ui/filter/calendar.tsx
@@ -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>