공지사항 페이지 개선 - 카테고리 필터 및 다국어 지원
- 공지사항 리스트/상세 페이지에 다국어(i18n) 적용 - 카테고리 선택 필터 기능 추가 (전체/공지/이벤트/서비스/중요) - 검색창 Enter 키 지원 및 한글 입력 이슈 해결 - 검색/필터 실행 시 input 포커스 자동 해제 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jay Sheen
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user