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

- FAQ 페이지에 카테고리 필터 및 다국어 지원 추가 - QnA 페이지에 다국어 지원 적용 - 카테고리별 번역 추가 (계약/정산/개발/운영/한도/기타) - 검색 기능 개선 (Enter 키 지원, 포커스 관리) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-18 16:49:57 +09:00
parent 630970138d
commit 92dad13d0f
4 changed files with 124 additions and 31 deletions
--- a/src/locales/en.json
+++ b/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"
+            }
        }
    }
 }
--- a/src/locales/ko.json
+++ b/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": "한도"
+            }
        }
    }
 }
--- a/src/pages/support/faq/list-page.tsx
+++ b/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">
-                <span 
-                  className="ic16 search" 
-                  aria-hidden="true"
-                  onClick={ () => onClickToAction() }
-                ></span>
-                <input 
-                  type="text" 
-                  placeholder="검색어를 입력하세요"
-                  value={ searchValue }
-                  onChange={ (e: ChangeEvent<HTMLInputElement>) => setSearchValue(e.target.value) } 
-                />
-              </div>
-              <div className="faq-filter">
-                <span className="text">전체</span>
-                <span 
-                  className="ic20 arrow-down" 
-                  aria-hidden="true"
-                ></span>
+              <div className="faq-controlls">
+                <div className="faq-search">
+                  <span 
+                    className="ic16 search" 
+                    aria-hidden="true"
+                    onClick={ () => onClickToAction() }
+                  ></span>
+                  <input
+                    type="text"
+                    placeholder={t('support.faq.searchPlaceholder')}
+                    value={ searchValue }
+                    onChange={ (e: ChangeEvent<HTMLInputElement>) => setSearchValue(e.target.value) }
+                    onKeyDown={ (e: React.KeyboardEvent<HTMLInputElement>) => {
+                      if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
+                        onClickToAction();
+                      }
+                    }}
+                  />
+                </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>
--- a/src/pages/support/qna/list-page.tsx
+++ b/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">
-                  <option>전체</option>
+                <select
+                      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>