공지사항 페이지 개선 - 카테고리 필터 및 다국어 지원

- 공지사항 리스트/상세 페이지에 다국어(i18n) 적용
- 카테고리 선택 필터 기능 추가 (전체/공지/이벤트/서비스/중요)
- 검색창 Enter 키 지원 및 한글 입력 이슈 해결
- 검색/필터 실행 시 input 포커스 자동 해제

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/app/providers/app-provider.tsx

@@ -5,6 +5,7 @@ import { CookiesProvider } from 'react-cookie';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { GlobalErrorBoundary } from '@/widgets/error-boundaries';
 import { getGlobalQueryClient } from '@/shared/configs/query';
+import '@/locales/i18n';
 
 interface AppProviderProps {
   children: React.ReactNode;

src/entities/support/ui/notice-item.tsx

@@ -2,15 +2,17 @@ import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { NoticeItemProps } from '../model/types';
 import moment from 'moment';
+import { useTranslation } from 'react-i18next';
 
 export const SupportNoticeItem = ({
   id,
   title,
   category,
   regDate,
-  isNew
+  isNew // eslint-disable-line @typescript-eslint/no-unused-vars
 }: NoticeItemProps) => {
   const { navigate } = useNavigate();
+  const { t } = useTranslation();
 
   const onClickToDetail = () => {
     navigate(PATHS.support.notice.detail, {
@@ -30,7 +32,7 @@ export const SupportNoticeItem = ({
         <div className="notice-txt">
           <div className="notice-title-114">{ title }</div>
           <div className="notice-meta-114">
-            <span className="blue">{ category }</span> ㅣ <span>{ moment(regDate).format('YYYY.MM.DD HH:mm:ss') }</span>
+            <span className="blue">{ t(`support.notice.categories.${category}`) }</span> ㅣ <span>{ moment(regDate).format('YYYY.MM.DD HH:mm:ss') }</span>
           </div>
         </div>
       </div>

src/locales/en.json

@@ -74,5 +74,18 @@
         "status": "Status",
         "completed": "Completed",
         "failed": "Failed"
-      }
+      },
+    "support": {
+        "notice": {
+            "title": "Notice",
+            "searchPlaceholder": "Enter search keyword",
+            "categories": {
+                "ALL": "All",
+                "NOTICE": "Notice",
+                "EVENT": "Event",
+                "SERVICE": "Service",
+                "IMPORTANT": "Important"
+            }
+        }
+    }
 }

src/locales/i18n.ts

@@ -13,8 +13,8 @@ i18n
       en: {translation: en},
       ko: {translation: ko},
     },
-    lng: 'en',
+    lng: 'ko',
-    fallbackLng: 'en',
+    fallbackLng: 'ko',
     debug: true,
     interpolation: {
       escapeValue: false,

src/locales/ko.json

@@ -74,5 +74,18 @@
         "status": "상태",
         "completed": "완료",
         "failed": "실패"
-      }
+      },
+    "support": {
+        "notice": {
+            "title": "공지사항",
+            "searchPlaceholder": "검색어를 입력하세요",
+            "categories": {
+                "ALL": "전체",
+                "NOTICE": "공지",
+                "EVENT": "이벤트",
+                "SERVICE": "서비스",
+                "IMPORTANT": "중요"
+            }
+        }
+    }
 }

src/pages/support/notice/detail-page.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router';
+import { useTranslation } from 'react-i18next';
 import { PATHS } from '@/shared/constants/paths';
 import { useNoticeDetailMutation } from '@/entities/support/api/use-notice-detail-mutation';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { HeaderType } from '@/entities/common/model/types';
 import { NoticeItem } from '@/entities/support/model/types';
-import { 
+import {
   useSetHeaderTitle,
   useSetHeaderType,
   useSetFooterMode,
@@ -16,12 +17,13 @@ import moment from 'moment';
 export const NoticeDetailPage = () => {
   const { navigate } = useNavigate();
   const location = useLocation();
+  const { t } = useTranslation();
 
   const [result, setResult] = useState<NoticeItem>({});
 
   let from = location?.state.from;
 
-  useSetHeaderTitle('공지사항');
+  useSetHeaderTitle(t('support.notice.title'));
   useSetHeaderType(HeaderType.RightClose);
   useSetFooterMode(false);
   useSetOnBack(() => {
@@ -51,6 +53,7 @@ export const NoticeDetailPage = () => {
 
   useEffect(() => {
     callDetail();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
@@ -61,7 +64,7 @@ export const NoticeDetailPage = () => {
             <div className="option-list pb-120">
               <div className="notice-detail">
                 <div className="notice-detail__title">{ result.title }</div>
-                <div className="notice-detail__meta">{ moment(result.regDate).format('YYYY.MM.DD') } | { result.category }</div>
+                <div className="notice-detail__meta">{ moment(result.regDate).format('YYYY.MM.DD') } | { t(`support.notice.categories.${result.category}`) }</div>
                 <div className="notice-detail__divider"></div>
                 <div className="notice-detail__body">{ result.content }</div>
               </div>

src/pages/support/notice/list-page.tsx

@@ -1,4 +1,5 @@
 import { ChangeEvent, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useNoticeListMutation } from '@/entities/support/api/use-notice-list-mutation';
@@ -6,7 +7,7 @@ import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
 import { NoticeItem } from '@/entities/support/model/types';
 import { SupportNoticeItem } from '@/entities/support/ui/notice-item';
 import { HeaderType } from '@/entities/common/model/types';
-import { 
+import {
 	useSetHeaderTitle,
 	useSetHeaderType,
 	useSetFooterMode,
@@ -15,12 +16,14 @@ import {
 
 export const NoticeListPage = () => {
   const { navigate } = useNavigate();
+  const { t } = useTranslation();
 
   const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
   const [searchKeyword, setSearchKeyword] = useState<string>('');
+  const [selectedCategory, setSelectedCategory] = useState<string>('ALL');
   const [resultList, setResultList] = useState<Array<NoticeItem>>([]);
 
-  useSetHeaderTitle('공지사항');
+  useSetHeaderTitle(t('support.notice.title'));
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(true);
   useSetOnBack(() => {
@@ -30,11 +33,11 @@ export const NoticeListPage = () => {
   const { mutateAsync: noticeList } = useNoticeListMutation();
   const callList = () => {
     let listParams = {
-      category: 'ALL',
+      category: selectedCategory,
       searchKeyword: searchKeyword,
       ...{page: pageParam}
     };
-    
+
     noticeList(listParams).then((rs) => {
       console.log(rs)
       setResultList(rs.content);
@@ -42,6 +45,10 @@ export const NoticeListPage = () => {
   };
 
   const onClickToAction = () => {
+    // Remove focus from active element
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
     callList();
   };
 
@@ -64,7 +71,8 @@ export const NoticeListPage = () => {
 
   useEffect(() => {
     callList();
-  }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedCategory]);
 
   return (
     <>
@@ -79,16 +87,29 @@ export const NoticeListPage = () => {
                     aria-hidden="true"
                     onClick={ () => onClickToAction() }
                   ></span>
-                  <input 
+                  <input
                     type="text"
-                    placeholder="검색어를 입력하세요"
+                    placeholder={t('support.notice.searchPlaceholder')}
                     value={ searchKeyword }
                     onChange={ (e: ChangeEvent<HTMLInputElement>) => setSearchKeyword(e.target.value) }
+                    onKeyDown={ (e: React.KeyboardEvent<HTMLInputElement>) => {
+                      if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
+                        onClickToAction();
+                      }
+                    }}
                   />
                 </div>
                 <div className="notice-filter">
-                  <select className="flex-1">
+                  <select
-                    <option>전체</option>
+                    className="flex-1"
+                    value={selectedCategory}
+                    onChange={(e: ChangeEvent<HTMLSelectElement>) => setSelectedCategory(e.target.value)}
+                  >
+                    <option value="ALL">{t('support.notice.categories.ALL')}</option>
+                    <option value="NOTICE">{t('support.notice.categories.NOTICE')}</option>
+                    <option value="EVENT">{t('support.notice.categories.EVENT')}</option>
+                    <option value="SERVICE">{t('support.notice.categories.SERVICE')}</option>
+                    <option value="IMPORTANT">{t('support.notice.categories.IMPORTANT')}</option>
                   </select>
                 </div>
               </div>