공지사항 paging

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 = {
+
+  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.');
+      }
+    });
+  };
+
+  const { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });
+
+  const callList = (type?: string) => {
+    let listParams: NoticeListParams = {
       category: selectedCategory,
       searchKeyword: searchKeyword,
-      ...{page: pageParam}
+      ...{
+        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) => {
-      console.log(rs)
-      setResultList(rs.content);
+    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>