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

- 공지사항 리스트/상세 페이지에 다국어(i18n) 적용 - 카테고리 선택 필터 기능 추가 (전체/공지/이벤트/서비스/중요) - 검색창 Enter 키 지원 및 한글 입력 이슈 해결 - 검색/필터 실행 시 input 포커스 자동 해제 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-18 10:54:29 +09:00
parent 71d5cd0d4c
commit 2910b20974
7 changed files with 71 additions and 18 deletions
--- a/src/app/providers/app-provider.tsx
+++ b/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;
--- a/src/entities/support/ui/notice-item.tsx
+++ b/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>
--- a/src/locales/en.json
+++ b/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"
+            }
+        }
+    }
 }
--- a/src/locales/i18n.ts
+++ b/src/locales/i18n.ts
@@ -13,8 +13,8 @@ i18n
      en: {translation: en},
      ko: {translation: ko},
    },
-    lng: 'en',
-    fallbackLng: 'en',
+    lng: 'ko',
+    fallbackLng: 'ko',
    debug: true,
    interpolation: {
      escapeValue: false,
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -74,5 +74,18 @@
        "status": "상태",
        "completed": "완료",
        "failed": "실패"
-      }
+      },
+    "support": {
+        "notice": {
+            "title": "공지사항",
+            "searchPlaceholder": "검색어를 입력하세요",
+            "categories": {
+                "ALL": "전체",
+                "NOTICE": "공지",
+                "EVENT": "이벤트",
+                "SERVICE": "서비스",
+                "IMPORTANT": "중요"
+            }
+        }
+    }
 }
--- a/src/pages/support/notice/detail-page.tsx
+++ b/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>
--- a/src/pages/support/notice/list-page.tsx
+++ b/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">
-                    <option>전체</option>
+                  <select
+                    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>