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 {
searchKeyword: string;
category: string;
pagination?: DefaultRequestPagination;
page?: DefaultRequestPagination;
};
export interface NoticeItem {
id?: number;

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

@@ -54,6 +54,7 @@ export const FaqListPage = () => {
threshold: 1,
onIntersect
});
const callList = (type?: string) => {
setOnActionIntersect(false);
let listParams: FaqListParams = {
@@ -146,7 +147,7 @@ export const FaqListPage = () => {
></span>
<input
type="text"
placeholder={t('support.faq.searchPlaceholder')}
placeholder={ t('support.faq.searchPlaceholder') }
value={ searchValue }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setSearchValue(e.target.value) }
onKeyDown={ (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -159,24 +160,24 @@ export const FaqListPage = () => {
<div className="faq-filter">
<select
className="flex-1"
value={selectedCategory}
onChange={(e: ChangeEvent<HTMLSelectElement>) => setSelectedCategory(e.target.value)}>
<option value="">{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="06">{t('support.faq.categories.06')}</option>
<option value="07">{t('support.faq.categories.07')}</option>
<option value="08">{t('support.faq.categories.08')}</option>
<option value="99">{t('support.faq.categories.99')}</option>
value={ selectedCategory }
onChange={ (e: ChangeEvent<HTMLSelectElement>) => setSelectedCategory(e.target.value) }>
<option value="">{ 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="06">{ t('support.faq.categories.06') }</option>
<option value="07">{ t('support.faq.categories.07') }</option>
<option value="08">{ t('support.faq.categories.08') }</option>
<option value="99">{ t('support.faq.categories.99') }</option>
</select>
</div>
</div>
<div className="faq-list">
{ getFaqList() }
<div ref={setTarget}></div>
<div ref={ setTarget }></div>
</div>
</div>
<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 { useNoticeListMutation } from '@/entities/support/api/use-notice-list-mutation';
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 { HeaderType } from '@/entities/common/model/types';
import {
@@ -13,12 +13,15 @@ import {
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const NoticeListPage = () => {
const { navigate } = useNavigate();
const { t } = useTranslation();
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
const [nextCursor, setNextCursor] = useState<string | null>(null);
const [searchKeyword, setSearchKeyword] = useState<string>('');
const [selectedCategory, setSelectedCategory] = useState<string>('ALL');
const [resultList, setResultList] = useState<Array<NoticeItem>>([]);
@@ -31,16 +34,63 @@ export const NoticeListPage = () => {
});
const { mutateAsync: noticeList } = useNoticeListMutation();
const callList = () => {
let listParams = {
category: selectedCategory,
searchKeyword: searchKeyword,
...{page: pageParam}
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if(entry.isIntersecting){
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) => {
console.log(rs)
const { setTarget } = useIntersectionObserver({
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);
}
if(rs.hasNext){
setNextCursor(rs.nextCursor);
setOnActionIntersect(true);
}
else{
setNextCursor(null);
}
});
};
@@ -70,6 +120,7 @@ export const NoticeListPage = () => {
};
useEffect(() => {
setNextCursor(null);
callList();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedCategory]);
@@ -89,7 +140,7 @@ export const NoticeListPage = () => {
></span>
<input
type="text"
placeholder={t('support.notice.searchPlaceholder')}
placeholder={ t('support.notice.searchPlaceholder') }
value={ searchKeyword }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setSearchKeyword(e.target.value) }
onKeyDown={ (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -102,19 +153,20 @@ export const NoticeListPage = () => {
<div className="notice-filter">
<select
className="flex-1"
value={selectedCategory}
onChange={(e: ChangeEvent<HTMLSelectElement>) => setSelectedCategory(e.target.value)}
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>
<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>
<div className="notice-list-114">
{ getNoticeList() }
<div ref={ setTarget }></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 { PATHS } from '@/shared/constants/paths';
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 { QnaItem, QnaListParams, QnaListResponse } from '@/entities/support/model/types';
import { SupportQnaItem } from '@/entities/support/ui/qna-item';
import useIntersectionObserver from '@/widgets/intersection-observer';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { useStore } from '@/shared/model/store';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const QnaListPage = () => {
const { navigate } = useNavigate();