faq

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

@@ -2,10 +2,10 @@ 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 { HeaderType } from '@/entities/common/model/types';
+import { DefaultRequestPagination, HeaderType } from '@/entities/common/model/types';
 import { useFaqListMutation } from '@/entities/support/api/use-faq-list-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
-import { FaqItem } from '@/entities/support/model/types';
+import { FaqItem, FaqListParams, FaqListResponse } from '@/entities/support/model/types';
 import { SupportFaqItem } from '@/entities/support/ui/faq-item';
 import { 
 	useSetHeaderTitle,
@@ -13,12 +13,34 @@ import {
 	useSetFooterMode,
   useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
+import useIntersectionObserver from '@/widgets/intersection-observer';
 
 export const FaqListPage = () => {
   const { navigate } = useNavigate();
   const { t } = useTranslation();
 
-  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
+  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){
+          callList();
+        } 
+      }
+      else{
+        console.log('Element is no longer intersecting with the root.');
+      }
+    });
+  };
+
+  const { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });
+
+  const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
+  const [nextCursor, setNextCursor] = useState<string | null>(null);
   const [searchCl, setSearchCl] = useState<string | null>('HEAD');
   const [searchValue, setSearchValue] = useState<string>('');
   const [selectedCategory, setSelectedCategory] = useState<string>('');
@@ -33,16 +55,30 @@ export const FaqListPage = () => {
 
   const { mutateAsync: faqList } = useFaqListMutation();
   const callList = () => {
-    let listParams = {
+    setOnActionIntersect(false);
+    let listParams: FaqListParams = {
       category: selectedCategory,
       searchCl: (!!searchValue)? searchCl: null,
       searchValue: searchValue,
       ...{page: pageParam}
     };
     
-    faqList(listParams).then((rs) => {
-      console.log(rs)
-      setResultList(rs.content);
+    faqList(listParams).then((rs: FaqListResponse) => {
+      setResultList([
+        ...resultList,
+        ...rs.content
+      ]);
+      if(rs.hasNext){
+        setNextCursor(rs.nextCursor);
+        setPageParam({
+          ...pageParam,
+          cursor: rs.nextCursor
+        });
+        setOnActionIntersect(true);
+      }
+      else{
+        setNextCursor(null);
+      }
     });
   };
 
@@ -125,7 +161,8 @@ export const FaqListPage = () => {
                 </div>
               </div>
               <div className="faq-list">
-              { getFaqList() }
+                { getFaqList() }
+                <div ref={setTarget}></div>
               </div>
             </div>
             <div className="apply-row">

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

@@ -18,10 +18,9 @@ import useIntersectionObserver from '@/widgets/intersection-observer';
 
 export const QnaListPage = () => {
   const { navigate } = useNavigate();
-  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
-  
-  const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
 
+  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
+  const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
     entries.forEach((entry: IntersectionObserverEntry) => {
       if(entry.isIntersecting){
         console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
@@ -40,7 +39,6 @@ export const QnaListPage = () => {
     onIntersect 
   });
 
-
   const midOptions = useStore.getState().UserStore.selectOptionsMids;
   const userMid = useStore.getState().UserStore.mid;
   const { t } = useTranslation();
@@ -50,7 +48,6 @@ export const QnaListPage = () => {
   const [nextCursor, setNextCursor] = useState<string | null>(null);
   const [statusCode, setStatusCode] = useState<string>(''); // 02, 03
   const [resultList, setResultList] = useState<Array<QnaItem>>([]);
-
  
   useSetHeaderTitle(t('support.qna.title'));
   useSetHeaderType(HeaderType.LeftArrow);
@@ -108,7 +105,7 @@ export const QnaListPage = () => {
           contents={ resultList[i]?.contents }
           answer={ resultList[i]?.answer }
         ></SupportQnaItem>
-      )
+      );
     }
     return rs;
   };