공지사항 paging

src/entities/support/model/types.ts

@@ -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;

src/pages/support/faq/list-page.tsx

@@ -54,6 +54,7 @@ export const FaqListPage = () => {
     threshold: 1, 
     onIntersect 
   });
+
   const callList = (type?: string) => {
     setOnActionIntersect(false);
     let listParams: FaqListParams = {

src/pages/support/notice/list-page.tsx

@@ -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]);
@@ -115,6 +166,7 @@ export const NoticeListPage = () => {
               </div>
               <div className="notice-list-114">
                 { getNoticeList() } 
+                <div ref={ setTarget }></div>
               </div>
             </div>
           </div>

src/pages/support/qna/list-page.tsx

@@ -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();