diff --git a/src/locales/en.json b/src/locales/en.json index d08f49f..51ad35c 100644 --- 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" + } } } } \ No newline at end of file diff --git a/src/locales/ko.json b/src/locales/ko.json index 123bd43..f7e5d07 100644 --- 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": "한도" + } } } } \ No newline at end of file diff --git a/src/pages/support/faq/list-page.tsx b/src/pages/support/faq/list-page.tsx index 0c6248c..e0315a8 100644 --- 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(''); + const [selectedCategory, setSelectedCategory] = useState('all'); const [resultList, setResultList] = useState>([]); - 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 = () => {
-
- - ) => setSearchValue(e.target.value) } - /> -
-
- 전체 - +
+
+ + ) => setSearchValue(e.target.value) } + onKeyDown={ (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && !e.nativeEvent.isComposing) { + onClickToAction(); + } + }} + /> +
+
+ +
{ getFaqList() } @@ -105,7 +127,7 @@ export const FaqListPage = () => { + >{t('support.faq.inquiryButton')}
diff --git a/src/pages/support/qna/list-page.tsx b/src/pages/support/qna/list-page.tsx index 40cb1af..1e5e454 100644 --- 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('all'); const [resultList, setResultList] = useState>([]); - 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 = () => {
-
가맹점
+
{t('support.qna.merchant')}
- ) => setSelectedCategory(e.target.value)}> + + + + + +
@@ -94,7 +107,7 @@ export const QnaListPage = () => { + >{t('support.qna.inquiryButton')}