- SMS,KeyIn,ARS 페이지 스크롤 적용

- ARS 결제신청 :성공 결과 팝업 추가

src/pages/additional-service/account-holder-search/account-holder-search-page.tsx

@@ -3,9 +3,9 @@ import { PATHS } from '@/shared/constants/paths';
 import { useEffect, useState } from 'react';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { IMAGE_ROOT } from '@/shared/constants/common';
-import { HeaderType } from '@/entities/common/model/types';
+import { DefaultRequestPagination, HeaderType } from '@/entities/common/model/types';
 import { AccountHolderSearchFilter } from '@/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter';
-import { ProcessResult} from '@/entities/additional-service/model/types';
+import { ProcessResult } from '@/entities/additional-service/model/types';
 import {
   useSetHeaderTitle,
   useSetHeaderType,
@@ -21,20 +21,43 @@ import { AccountHolderSearchList } from '@/entities/additional-service/ui/accoun
 import { useStore } from '@/shared/model/store';
 import { AccountHolderSearchListItem, AccountHolderSearchType } from '@/entities/additional-service/model/account-holder-search/types';
 import { resultStatusBtnGroup } from '@/entities/additional-service/model/account-holder-search/constant';
+import useIntersectionObserver from '@/widgets/intersection-observer';
 
 export const AccountHolderSearchPage = () => {
   const { navigate } = useNavigate();
+
+  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 userMid = useStore.getState().UserStore.mid;
 
   const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
-  const [listItems, setListItems] = useState({});
-  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+  const [listItems, setListItems] = useState<Array<AccountHolderSearchListItem>>([]);
+  const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
+  const [nextCursor, setNextCursor] = useState<string | null>(null);
   const [filterOn, setFilterOn] = useState<boolean>(false);
   const [mid, setMid] = useState<string>(userMid);
-  const [searchType, setSearchType] = useState<AccountHolderSearchType>(AccountHolderSearchType.ACCOUNT_NO)
+  const [searchType, setSearchType] = useState<AccountHolderSearchType>(AccountHolderSearchType.ACCOUNT_NAME)
   const [searchKeyword, setSearchKeyword] = useState<string>('');
-  const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
-  const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
+  const [startDate, setStartDate] = useState(moment().format('YYYYMMDD'));
+  const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
   const [bank, setBank] = useState<string>('');
   const [processResult, setProcessResult] = useState<ProcessResult>(ProcessResult.ALL);
 
@@ -50,10 +73,17 @@ export const AccountHolderSearchPage = () => {
 
   const callList = (option?: {
     sortType?: SortTypeKeys,
-    val?: string
+    processResult?: ProcessResult,
+    resetPage?: boolean
   }) => {
-    pageParam.sortType = (option?.sortType) ? option.sortType : sortType;
-    setPageParam(pageParam);
+    setOnActionIntersect(false);
+
+    const currentPageParam = option?.resetPage
+      ? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType }
+      : { ...pageParam, sortType: option?.sortType ?? sortType };
+
+    setPageParam(currentPageParam);
+
     let listParams = {
       mid: mid,
       searchCl: searchType,
@@ -61,34 +91,31 @@ export const AccountHolderSearchPage = () => {
       fromDate: startDate,
       toDate: endDate,
       bankCode: bank,
-      resultStatus: processResult,
-      page: pageParam
+      resultStatus: option?.processResult ?? processResult,
+      ... {
+        page: currentPageParam
+      }
     }
 
     accountHolderSearchList(listParams).then((rs) => {
-      setListItems(assembleData(rs.content));
+      setListItems(option?.resetPage ? rs.content : [
+        ...listItems,
+        ...rs.content
+      ]);
+      if (rs.hasNext) {
+        setNextCursor(rs.nextCursor);
+        setPageParam({
+          ...currentPageParam,
+          cursor: rs.nextCursor
+        });
+        setOnActionIntersect(true)
+      }
+      else {
+        setNextCursor(null);
+      }
     });
   }
 
-  const assembleData = (content: Array<AccountHolderSearchListItem>) => {
-    console.log('rs.content:', content);
-    let data: any = {};
-    if (content && content.length > 0) {
-      for (let i = 0; i < content?.length; i++) {
-        let requestDate = content[i]?.requestDate?.substring(0, 8);
-        let groupDate = moment(requestDate).format('YYYYMMDD');
-        if (!!groupDate && !data.hasOwnProperty(groupDate)) {
-          data[groupDate] = [];
-        }
-        if (!!groupDate && data.hasOwnProperty(groupDate)) {
-          data[groupDate].push(content[i]);
-        }
-      }
-    }
-    console.log('Data : ', data);
-    return data;
-  };
-
   const onClickToOpenFilter = () => {
     setFilterOn(!filterOn);
   };
@@ -110,20 +137,31 @@ export const AccountHolderSearchPage = () => {
   const onClickToSort = (sort: SortTypeKeys) => {
     setSortType(sort);
     callList({
-      sortType: sort
+      sortType: sort,
+      resetPage: true
     });
   };
 
   const onClickToTransactionStatus = (val: ProcessResult) => {
     setProcessResult(val);
     callList({
-      val: val
+      processResult: val,
+      resetPage: true
     });
   };
 
   useEffect(() => {
-    callList();
-  }, []);
+    // 필터 조건이 변경되면 첫 페이지부터 다시 시작
+    callList({ resetPage: true });
+  }, [
+    mid,
+    searchType,
+    searchKeyword,
+    startDate,
+    endDate,
+    bank,
+    processResult
+  ]);
 
   return (
     <>
@@ -164,8 +202,8 @@ export const AccountHolderSearchPage = () => {
 
             <div className="filter-section">
               <SortTypeBox
-                sortType={ sortType }
-                onClickToSort={ onClickToSort }
+                sortType={sortType}
+                onClickToSort={onClickToSort}
               ></SortTypeBox>
               <div className="excrow">
                 <div className="full-menu-keywords no-padding">
@@ -184,6 +222,7 @@ export const AccountHolderSearchPage = () => {
             <AccountHolderSearchList
               listItems={listItems}
               mid={mid}
+              setTarget={setTarget}
             ></AccountHolderSearchList>
           </div>
         </div>