Add i18n localization to calendar-month filter component

- Add translation keys to filter namespace:
  - filter.periods.currentMonth: Current month period option
  - filter.periods.2months: 2 months period option
  - filter.selectDate: Date selection placeholder and alt text

- Localize shared/ui/filter/calendar-month.tsx:
  - Replace hardcoded "조회기간" with filter.period
  - Replace hardcoded "당월" with filter.periods.currentMonth
  - Replace hardcoded "2개월" with filter.periods.2months
  - Replace hardcoded "3개월" with filter.periods.3months
  - 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

@@ -91,11 +91,14 @@
           "issueNumber": "Issue Number"
         },
         "periods": {
+          "currentMonth": "Current Month",
           "1month": "1 Month",
+          "2months": "2 Months",
           "3months": "3 Months",
           "6months": "6 Months",
           "custom": "Custom"
         },
+        "selectDate": "Select Date",
         "transactionType": "Payment Type",
         "transactionTypes": {
           "all": "All",

src/locales/ko.json

@@ -91,11 +91,14 @@
           "issueNumber": "발행번호"
         },
         "periods": {
+          "currentMonth": "당월",
           "1month": "1개월",
+          "2months": "2개월",
           "3months": "3개월",
           "6months": "6개월",
           "custom": "직접입력"
         },
+        "selectDate": "날짜 선택",
         "transactionType": "거래구분",
         "transactionTypes": {
           "all": "전체",

src/shared/ui/filter/calendar-month.tsx

@@ -4,6 +4,7 @@ import { CalendarType, FilterMonthOptions } from '@/entities/common/model/types'
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import NiceCalendarMonth from '../calendar/nice-calendar-month';
 import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 
 interface FilterCalendarMonthProps {
   title?: string;
@@ -20,7 +21,8 @@ export const FilterCalendarMonth = ({
   setStartMonth,
   setEndMonth
 }: FilterCalendarMonthProps) => {
-  const [filterTitle, setFilterTitle] = useState<string>(title || '조회기간');
+  const { t } = useTranslation();
+  const [filterTitle, setFilterTitle] = useState<string>(title || t('filter.period'));
   const [monthReadOnly, setMonthReadyOnly] = useState<boolean>(false);
   const [filterMonthOptionsBtn, setFilterMonthOptionsBtn] = useState<FilterMonthOptions>(FilterMonthOptions.Input);
   const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
@@ -83,22 +85,22 @@ export const FilterCalendarMonth = ({
         <div className="opt-label">{ filterTitle }</div>
         <div className="opt-controls col below h36">
           <div className="chip-row">
-            <span 
+            <span
               className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Month1)? 'active': ''}` }
               onClick={ () => setFilterMonth(FilterMonthOptions.Month1) }
-            >당월</span>
-            <span 
+            >{t('filter.periods.currentMonth')}</span>
+            <span
               className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Month2)? 'active': ''}` }
               onClick={ () => setFilterMonth(FilterMonthOptions.Month2) }
-            >2개월</span>
-            <span 
+            >{t('filter.periods.2months')}</span>
+            <span
               className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Month3)? 'active': ''}` }
               onClick={ () => setFilterMonth(FilterMonthOptions.Month3) }
-            >3개월</span>
-            <span 
+            >{t('filter.periods.3months')}</span>
+            <span
               className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Input)? 'active': ''}` }
               onClick={ () => setFilterMonth(FilterMonthOptions.Input) }
-            >직접입력</span>
+            >{t('filter.periods.custom')}</span>
           </div>
           <div className="range-row">
             <div className="input-wrapper date">
@@ -106,7 +108,7 @@ export const FilterCalendarMonth = ({
                 id="startDate"
                 className="date-input"
                 type="text"
-                placeholder="날짜 선택"
+                placeholder={t('filter.selectDate')}
                 value={ moment(startMonth).format('YYYY.MM') }
                 onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
                 readOnly={ monthReadOnly }
@@ -118,7 +120,7 @@ export const FilterCalendarMonth = ({
               >
                 <img
                   src={ IMAGE_ROOT + '/ico_date.svg' }
-                  alt="날짜 선택"
+                  alt={t('filter.selectDate')}
                 />
               </button>
             </div>
@@ -128,19 +130,19 @@ export const FilterCalendarMonth = ({
                 id="endDate"
                 className="date-input"
                 type="text"
-                placeholder="날짜 선택"
+                placeholder={t('filter.selectDate')}
                 value={ moment(endMonth).format('YYYY.MM') }
                 onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
                 readOnly={ monthReadOnly }
               />
-              <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>