FAQ/QnA 페이지 다국어 지원 및 카테고리 필터 추가

- FAQ 페이지에 카테고리 필터 및 다국어 지원 추가
- QnA 페이지에 다국어 지원 적용
- 카테고리별 번역 추가 (계약/정산/개발/운영/한도/기타)
- 검색 기능 개선 (Enter 키 지원, 포커스 관리)

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

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

src/locales/en.json

@@ -86,6 +86,35 @@
                 "SERVICE": "Service",
                 "IMPORTANT": "Important"
             }
+        },
+        "faq": {
+            "title": "Frequently Asked Questions",
+            "searchPlaceholder": "Enter search keyword",
+            "all": "All",
+            "inquiryButton": "Contact Support",
+            "categories": {
+                "all": "All",
+                "01": "Contract",
+                "02": "Settlement",
+                "03": "Development",
+                "04": "Operations",
+                "05": "Limit",
+                "99": "Other"
+            }
+        },
+        "qna": {
+            "title": "Support Inquiry",
+            "merchant": "Merchant",
+            "all": "All",
+            "inquiryButton": "Submit Inquiry",
+            "categories": {
+                "all": "All",
+                "01": "Contract",
+                "02": "Settlement",
+                "03": "Development",
+                "04": "Operations",
+                "05": "Limit"
+            }
         }
     }
 }

src/locales/ko.json

@@ -86,6 +86,35 @@
                 "SERVICE": "서비스",
                 "IMPORTANT": "중요"
             }
+        },
+        "faq": {
+            "title": "자주 묻는 질문",
+            "searchPlaceholder": "검색어를 입력하세요",
+            "all": "전체",
+            "inquiryButton": "1:1 문의하기",
+            "categories": {
+                "all": "모두",
+                "01": "계약",
+                "02": "정산",
+                "03": "개발",
+                "04": "운영",
+                "05": "한도",
+                "99": "기타"
+            }
+        },
+        "qna": {
+            "title": "1:1 문의",
+            "merchant": "가맹점",
+            "all": "전체",
+            "inquiryButton": "1:1 문의하기",
+            "categories": {
+                "all": "모두",
+                "01": "계약",
+                "02": "정산",
+                "03": "개발",
+                "04": "운영",
+                "05": "한도"
+            }
         }
     }
 }

src/pages/support/faq/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 { HeaderType } from '@/entities/common/model/types';
@@ -15,12 +16,14 @@ import {
 
 export const FaqListPage = () => {
   const { navigate } = useNavigate();
+  const { t } = useTranslation();
 
   const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
   const [searchValue, setSearchValue] = useState<string>('');
+  const [selectedCategory, setSelectedCategory] = useState<string>('all');
   const [resultList, setResultList] = useState<Array<FaqItem>>([]);
 
-  useSetHeaderTitle('자주 묻는 질문');
+  useSetHeaderTitle(t('support.faq.title'));
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(true);
   useSetOnBack(() => {
@@ -30,7 +33,7 @@ export const FaqListPage = () => {
   const { mutateAsync: faqList } = useFaqListMutation();
   const callList = () => {
     let listParams = {
-      category: 'st',
+      category: selectedCategory,
       searchValue: searchValue,
       ...{page: pageParam}
     };
@@ -42,6 +45,10 @@ export const FaqListPage = () => {
   };
 
   const onClickToAction = () => {
+    // Remove focus from active element
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
     callList();
   };
 
@@ -69,7 +76,8 @@ export const FaqListPage = () => {
 
   useEffect(() => {
     callList();
-  }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedCategory]);
 
   return (
     <>
@@ -77,25 +85,39 @@ export const FaqListPage = () => {
         <div className="tab-content">
           <div className="tab-pane sub active">
             <div className="faq-section">
-              <div className="faq-search">
+              <div className="faq-controlls">
-                <span 
+                <div className="faq-search">
-                  className="ic16 search" 
+                  <span 
-                  aria-hidden="true"
+                    className="ic16 search" 
-                  onClick={ () => onClickToAction() }
+                    aria-hidden="true"
-                ></span>
+                    onClick={ () => onClickToAction() }
-                <input 
+                  ></span>
-                  type="text" 
+                  <input
-                  placeholder="검색어를 입력하세요"
+                    type="text"
-                  value={ searchValue }
+                    placeholder={t('support.faq.searchPlaceholder')}
-                  onChange={ (e: ChangeEvent<HTMLInputElement>) => setSearchValue(e.target.value) } 
+                    value={ searchValue }
-                />
+                    onChange={ (e: ChangeEvent<HTMLInputElement>) => setSearchValue(e.target.value) }
-              </div>
+                    onKeyDown={ (e: React.KeyboardEvent<HTMLInputElement>) => {
-              <div className="faq-filter">
+                      if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
-                <span className="text">전체</span>
+                        onClickToAction();
-                <span 
+                      }
-                  className="ic20 arrow-down" 
+                    }}
-                  aria-hidden="true"
+                  />
-                ></span>
+                </div>
+                <div className="faq-filter">
+                  <select
+                      className="flex-1"
+                      value={selectedCategory}
+                      onChange={(e: ChangeEvent<HTMLSelectElement>) => setSelectedCategory(e.target.value)}>
+                    <option value="all">{t('support.faq.categories.all')}</option>
+                    <option value="01">{t('support.faq.categories.01')}</option>
+                    <option value="02">{t('support.faq.categories.02')}</option>
+                    <option value="03">{t('support.faq.categories.03')}</option>
+                    <option value="04">{t('support.faq.categories.04')}</option>
+                    <option value="05">{t('support.faq.categories.05')}</option>
+                    <option value="99">{t('support.faq.categories.99')}</option>
+                  </select>
+                </div>
               </div>
               <div className="faq-list">
               { getFaqList() }
@@ -105,7 +127,7 @@ export const FaqListPage = () => {
               <button 
                 className="btn-50 btn-blue flex-1"
                 onClick={ () => onClickToNavigation() }
-              >1:1 문의하기</button>
+              >{t('support.faq.inquiryButton')}</button>
             </div>
           </div>
         </div>

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

@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'react';
+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 { HeaderType } from '@/entities/common/model/types';
@@ -15,11 +16,13 @@ import {
 
 export const QnaListPage = () => {
   const { navigate } = useNavigate();
+  const { t } = useTranslation();
 
   const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+  const [selectedCategory, setSelectedCategory] = useState<string>('all');
   const [resultList, setResultList] = useState<Array<QnaItem>>([]);
 
-  useSetHeaderTitle('1:1 문의');
+  useSetHeaderTitle(t('support.qna.title'));
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(true);
   useSetOnBack(() => {
@@ -29,6 +32,7 @@ export const QnaListPage = () => {
   const { mutateAsync: qnaList } = useQnaListMutation();
   const callList = () => {
     let listParams = {
+      category: selectedCategory,
       ...{page: pageParam}
     };
     
@@ -65,7 +69,8 @@ export const QnaListPage = () => {
 
   useEffect(() => {
     callList();
-  }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedCategory]);
 
   return (
     <>
@@ -74,16 +79,24 @@ export const QnaListPage = () => {
           <div className="tab-pane sub active">
             <div className="inq117">
               <div className="inq-merchant">
-                <div className="inq-title">가맹점</div>
+                <div className="inq-title">{t('support.qna.merchant')}</div>
                 <div className="notice-filter">
                   <select className="flex-1">
-                    <option>전체</option>
+                    <option>{t('support.qna.all')}</option>
                   </select>
                 </div>
               </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.qna.categories.all')}</option>
+                  <option value="01">{t('support.qna.categories.01')}</option>
+                  <option value="02">{t('support.qna.categories.02')}</option>
+                  <option value="03">{t('support.qna.categories.03')}</option>
+                  <option value="04">{t('support.qna.categories.04')}</option>
+                  <option value="05">{t('support.qna.categories.05')}</option>
                 </select>
               </div>
               <div className="inq-list">
@@ -94,7 +107,7 @@ export const QnaListPage = () => {
               <button 
                 className="btn-50 btn-blue flex-1"
                 onClick={ () => onClickToNavigation() }
-              >1:1 문의하기</button>
+              >{t('support.qna.inquiryButton')}</button>
             </div>
           </div>
         </div>