nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

공지사항 paging

Browse Source
This commit is contained in:
focp212@naver.com
2025-10-20 10:05:21 +09:00
parent e3e4ec8b83
commit b2a041e130
4 changed files with 86 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/entities/support/model/types.ts
View File

@@ -61,7 +61,7 @@ export interface QnaSaveResponse {
export interface NoticeListParams extends SupportParams { export interface NoticeListParams extends SupportParams {
searchKeyword: string; searchKeyword: string;
category: string; category: string;
pagination?: DefaultRequestPagination; page?: DefaultRequestPagination;
}; };
export interface NoticeItem { export interface NoticeItem {
id?: number; id?: number;

29
src/pages/support/faq/list-page.tsx
View File

@@ -54,6 +54,7 @@ export const FaqListPage = () => {
threshold: 1, threshold: 1,
onIntersect onIntersect
}); });
const callList = (type?: string) => { const callList = (type?: string) => {
setOnActionIntersect(false); setOnActionIntersect(false);
let listParams: FaqListParams = { let listParams: FaqListParams = {
@@ -146,7 +147,7 @@ export const FaqListPage = () => {
></span> ></span>
<input <input
type="text" type="text"
placeholder={t('support.faq.searchPlaceholder')} placeholder={ t('support.faq.searchPlaceholder') }
value={ searchValue } value={ searchValue }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setSearchValue(e.target.value) } onChange={ (e: ChangeEvent<HTMLInputElement>) => setSearchValue(e.target.value) }
onKeyDown={ (e: React.KeyboardEvent<HTMLInputElement>) => { onKeyDown={ (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -159,24 +160,24 @@ export const FaqListPage = () => {
<div className="faq-filter"> <div className="faq-filter">
<select <select
className="flex-1" className="flex-1"
value={selectedCategory} value={ selectedCategory }
onChange={(e: ChangeEvent<HTMLSelectElement>) => setSelectedCategory(e.target.value)}> onChange={ (e: ChangeEvent<HTMLSelectElement>) => setSelectedCategory(e.target.value) }>
<option value="">{t('support.faq.categories.all')}</option> <option value="">{ t('support.faq.categories.all') }</option>
<option value="01">{t('support.faq.categories.01')}</option> <option value="01">{ t('support.faq.categories.01') }</option>
<option value="02">{t('support.faq.categories.02')}</option> <option value="02">{ t('support.faq.categories.02') }</option>
<option value="03">{t('support.faq.categories.03')}</option> <option value="03">{ t('support.faq.categories.03') }</option>
<option value="04">{t('support.faq.categories.04')}</option> <option value="04">{ t('support.faq.categories.04') }</option>
<option value="05">{t('support.faq.categories.05')}</option> <option value="05">{ t('support.faq.categories.05') }</option>
<option value="06">{t('support.faq.categories.06')}</option> <option value="06">{ t('support.faq.categories.06') }</option>
<option value="07">{t('support.faq.categories.07')}</option> <option value="07">{ t('support.faq.categories.07') }</option>
<option value="08">{t('support.faq.categories.08')}</option> <option value="08">{ t('support.faq.categories.08') }</option>
<option value="99">{t('support.faq.categories.99')}</option> <option value="99">{ t('support.faq.categories.99') }</option>
</select> </select>
</div> </div>
</div> </div>
<div className="faq-list"> <div className="faq-list">
{ getFaqList() } { getFaqList() }
<div ref={setTarget}></div> <div ref={ setTarget }></div>
</div> </div>
</div> </div>
<div className="apply-row"> <div className="apply-row">

84
src/pages/support/notice/list-page.tsx
View File

@@ -4,7 +4,7 @@ import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useNoticeListMutation } from '@/entities/support/api/use-notice-list-mutation'; import { useNoticeListMutation } from '@/entities/support/api/use-notice-list-mutation';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant'; import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { NoticeItem } from '@/entities/support/model/types'; import { NoticeItem, NoticeListParams, NoticeListResponse } from '@/entities/support/model/types';
import { SupportNoticeItem } from '@/entities/support/ui/notice-item'; import { SupportNoticeItem } from '@/entities/support/ui/notice-item';
import { HeaderType } from '@/entities/common/model/types'; import { HeaderType } from '@/entities/common/model/types';
import { import {
@@ -13,12 +13,15 @@ import {
useSetFooterMode, useSetFooterMode,
useSetOnBack useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout'; } from '@/widgets/sub-layout/use-sub-layout';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const NoticeListPage = () => { export const NoticeListPage = () => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const { t } = useTranslation(); const { t } = useTranslation();
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
const [nextCursor, setNextCursor] = useState<string | null>(null);
const [searchKeyword, setSearchKeyword] = useState<string>(''); const [searchKeyword, setSearchKeyword] = useState<string>('');
const [selectedCategory, setSelectedCategory] = useState<string>('ALL'); const [selectedCategory, setSelectedCategory] = useState<string>('ALL');
const [resultList, setResultList] = useState<Array<NoticeItem>>([]); const [resultList, setResultList] = useState<Array<NoticeItem>>([]);
@@ -31,16 +34,63 @@ export const NoticeListPage = () => {
}); });
const { mutateAsync: noticeList } = useNoticeListMutation(); const { mutateAsync: noticeList } = useNoticeListMutation();
const callList = () => {
let listParams = { const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
category: selectedCategory, entries.forEach((entry: IntersectionObserverEntry) => {
searchKeyword: searchKeyword, if(entry.isIntersecting){
...{page: pageParam} console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if(onActionIntersect && !!nextCursor){
callList('page');
}
}
else{
console.log('Element is no longer intersecting with the root.');
}
});
}; };
noticeList(listParams).then((rs) => { const { setTarget } = useIntersectionObserver({
console.log(rs) threshold: 1,
onIntersect
});
const callList = (type?: string) => {
let listParams: NoticeListParams = {
category: selectedCategory,
searchKeyword: searchKeyword,
...{
page: pageParam
}
};
if(type === 'page'){
if(listParams.page){
listParams.page.cursor = nextCursor;
}
}
else{
setNextCursor(null);
if(listParams.page){
listParams.page.cursor = null;
}
}
noticeList(listParams).then((rs: NoticeListResponse) => {
if(type === 'page'){
setResultList([
...resultList,
...rs.content
]);
}
else{
setResultList(rs.content); setResultList(rs.content);
}
if(rs.hasNext){
setNextCursor(rs.nextCursor);
setOnActionIntersect(true);
}
else{
setNextCursor(null);
}
}); });
}; };
@@ -70,6 +120,7 @@ export const NoticeListPage = () => {
}; };
useEffect(() => { useEffect(() => {
setNextCursor(null);
callList(); callList();
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedCategory]); }, [selectedCategory]);
@@ -89,7 +140,7 @@ export const NoticeListPage = () => {
></span> ></span>
<input <input
type="text" type="text"
placeholder={t('support.notice.searchPlaceholder')} placeholder={ t('support.notice.searchPlaceholder') }
value={ searchKeyword } value={ searchKeyword }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setSearchKeyword(e.target.value) } onChange={ (e: ChangeEvent<HTMLInputElement>) => setSearchKeyword(e.target.value) }
onKeyDown={ (e: React.KeyboardEvent<HTMLInputElement>) => { onKeyDown={ (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -102,19 +153,20 @@ export const NoticeListPage = () => {
<div className="notice-filter"> <div className="notice-filter">
<select <select
className="flex-1" className="flex-1"
value={selectedCategory} value={ selectedCategory }
onChange={(e: ChangeEvent<HTMLSelectElement>) => setSelectedCategory(e.target.value)} onChange={ (e: ChangeEvent<HTMLSelectElement>) => setSelectedCategory(e.target.value) }
> >
<option value="ALL">{t('support.notice.categories.ALL')}</option> <option value="ALL">{ t('support.notice.categories.ALL') }</option>
<option value="NOTICE">{t('support.notice.categories.NOTICE')}</option> <option value="NOTICE">{ t('support.notice.categories.NOTICE') }</option>
<option value="EVENT">{t('support.notice.categories.EVENT')}</option> <option value="EVENT">{ t('support.notice.categories.EVENT') }</option>
<option value="SERVICE">{t('support.notice.categories.SERVICE')}</option> <option value="SERVICE">{ t('support.notice.categories.SERVICE') }</option>
<option value="IMPORTANT">{t('support.notice.categories.IMPORTANT')}</option> <option value="IMPORTANT">{ t('support.notice.categories.IMPORTANT') }</option>
</select> </select>
</div> </div>
</div> </div>
<div className="notice-list-114"> <div className="notice-list-114">
{ getNoticeList() } { getNoticeList() }
<div ref={ setTarget }></div>
</div> </div>
</div> </div>
</div> </div>

6
src/pages/support/qna/list-page.tsx
View File

@@ -1,4 +1,5 @@
import { ChangeEvent, useEffect, useRef, useState } from 'react'; import { useStore } from '@/shared/model/store';
import { ChangeEvent, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { PATHS } from '@/shared/constants/paths'; import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useNavigate } from '@/shared/lib/hooks/use-navigate';
@@ -7,14 +8,13 @@ import { useQnaListMutation } from '@/entities/support/api/use-qna-list-mutation
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant'; import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { QnaItem, QnaListParams, QnaListResponse } from '@/entities/support/model/types'; import { QnaItem, QnaListParams, QnaListResponse } from '@/entities/support/model/types';
import { SupportQnaItem } from '@/entities/support/ui/qna-item'; import { SupportQnaItem } from '@/entities/support/ui/qna-item';
import useIntersectionObserver from '@/widgets/intersection-observer';
import { import {
useSetHeaderTitle, useSetHeaderTitle,
useSetHeaderType, useSetHeaderType,
useSetFooterMode, useSetFooterMode,
useSetOnBack useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout'; } from '@/widgets/sub-layout/use-sub-layout';
import { useStore } from '@/shared/model/store';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const QnaListPage = () => { export const QnaListPage = () => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();