페이징 방어코드 추가

2025-10-26 12:35:09 +09:00
parent f4b8ee29d8
commit fdedc3d519
22 changed files with 459 additions and 254 deletions
--- a/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx
+++ b/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx
@@ -23,6 +23,7 @@ import { AccountHolderAuthListItem, AccountHolderAuthStatus, ExtensionAccountHol
 import { AdditionalServiceCategory } from '@/entities/additional-service/model/types';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
+import useIntersectionObserver from '@/widgets/intersection-observer';

 export const AccountHolderAuthPage = () => {
  const { navigate } = useNavigate();
@@ -34,6 +35,7 @@ export const AccountHolderAuthPage = () => {
    extensionCode: 'ACCOUNT_AUTH'
  });

+  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
  const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
  const [listItems, setListItems] = useState<Array<ExtensionAccountHolderAuthContentItem>>([]);
  const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -52,26 +54,71 @@ export const AccountHolderAuthPage = () => {

  const { mutateAsync: accountHolderAuthList } = useExtensionAccountHolderAuthListMutation();
  const { mutateAsync: downloadExcel } = useExtensionAccountHolderAuthDownloadExcelMutation();
+  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 && !!pageParam.cursor){
+          setOnActionIntersect(false);
+          callList('page');
+        } 
+      }
+      else{
+        console.log('Element is no longer intersecting with the root.');
+      }
+    });
+  };

-  const callList = (option?: {
-    sortType?: SortTypeKeys,
-    status?: AccountHolderAuthStatus
-  }) => {
+  const { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });
+
+  const callList = (type?: string) => {
    let listParams = {
      mid: mid,
      fromDate: fromDate,
      toDate: toDate,
      authStatus: authStatus,
-      page: pageParam
+      page: {
+        ...pageParam,
+        ...{ sortType: sortType }
+      }
    };
-
-    if (listParams.page) {
-      listParams.page.sortType = option?.sortType || sortType;
-      setPageParam(listParams.page);
+    if(type !== 'page' && listParams.page){
+      listParams.page.cursor = null;
    }

    accountHolderAuthList(listParams).then((rs) => {
-      setListItems(rs.content);
+      if(type === 'page'){
+        setListItems([
+          ...listItems,
+          ...rs.content
+        ]);
+      }
+      else{
+        setListItems(rs.content);
+      }
+      if(rs.hasNext 
+        && rs.nextCursor !== pageParam.cursor
+        && rs.content.length === DEFAULT_PAGE_PARAM.size
+      ){
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: rs.nextCursor }
+        });
+      }
+      else{
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: null }
+        });
+      }
+      setOnActionIntersect(
+        !!rs.hasNext 
+        && rs.nextCursor !== pageParam.cursor
+        && rs.content.length === DEFAULT_PAGE_PARAM.size
+      );
    });
  };

@@ -82,9 +129,6 @@ export const AccountHolderAuthPage = () => {

  const onClickToSort = (sort: SortTypeKeys) => {
    setSortType(sort);
-    callList({
-      sortType: sort
-    });
  };

  const onClickToAuthStatus = (val: AccountHolderAuthStatus) => {
@@ -118,7 +162,8 @@ export const AccountHolderAuthPage = () => {
    mid,
    fromDate,
    toDate,
-    authStatus
+    authStatus,
+    sortType
  ]);

  if (!hasAccess) {
@@ -191,6 +236,7 @@ export const AccountHolderAuthPage = () => {
              listItems={listItems}
              mid={mid}
            ></AccountHolderAuthList>
+            <div ref={ setTarget }></div>
          </div>
        </div>
      </main>
--- a/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx
+++ b/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx
@@ -23,6 +23,7 @@ import { AccountHolderSearchListItem, AccountHolderSearchCl, AccountHolderResult
 import { resultStatusBtnGroup } from '@/entities/additional-service/model/account-holder-search/constant';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
+import useIntersectionObserver from '@/widgets/intersection-observer';

 export const AccountHolderSearchPage = () => {
  const { navigate } = useNavigate();
@@ -34,6 +35,7 @@ export const AccountHolderSearchPage = () => {
    extensionCode: 'SEARCH_ACCOUNT_NAME'
  });

+  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
  const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
  const [listItems, setListItems] = useState<Array<AccountHolderSearchListItem>>([]);
  const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
@@ -56,11 +58,29 @@ export const AccountHolderSearchPage = () => {

  const { mutateAsync: accountHolderSearchList } = useExtensionAccountHolderSearchListMutation();
  const { mutateAsync: downloadExcel } = useExtensionAccountHolderSearchDownloadExcelMutation();
+  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 && !!pageParam.cursor){
+          setOnActionIntersect(false);
+          callList('page');
+        } 
+      }
+      else{
+        console.log('Element is no longer intersecting with the root.');
+      }
+    });
+  };

-  const callList = (option?: {
-    sortType?: SortTypeKeys,
-    resultStatus?: AccountHolderResultStatus
-  }) => {
+  const { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });
+
+
+  const callList = (type?: string) => {
+    setOnActionIntersect(false);
    let listParams = {
      mid: mid,
      searchCl: searchCl,
@@ -68,17 +88,46 @@ export const AccountHolderSearchPage = () => {
      fromDate: startDate,
      toDate: endDate,
      bankCode: bank,
-      resultStatus: option?.resultStatus ?? resultStatus,
-      page: pageParam
+      resultStatus: resultStatus,
+      page: {
+				...pageParam,
+				...{ sortType: sortType }
+			}
    }
-
-    if (listParams.page) {
-      listParams.page.sortType = option?.sortType || sortType;
-      setPageParam(listParams.page);
+    if(type !== 'page' && listParams.page){
+      listParams.page.cursor = null;
    }

    accountHolderSearchList(listParams).then((rs) => {
-      setListItems(rs.content);
+      if(type === 'page'){
+        setListItems([
+          ...listItems,
+          ...rs.content
+        ]);
+      }
+      else{
+        setListItems(rs.content);
+      }
+			if(rs.hasNext 
+        && rs.nextCursor !== pageParam.cursor
+        && rs.content.length === DEFAULT_PAGE_PARAM.size
+      ){
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: rs.nextCursor }
+        });
+      }
+      else{
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: null }
+        });
+			}
+			setOnActionIntersect(
+        !!rs.hasNext 
+        && rs.nextCursor !== pageParam.cursor
+        && rs.content.length === DEFAULT_PAGE_PARAM.size
+      );
    });
  }

@@ -110,9 +159,6 @@ export const AccountHolderSearchPage = () => {

  const onClickToSort = (sort: SortTypeKeys) => {
    setSortType(sort);
-    callList({
-      sortType: sort
-    });
  };

  const onClickToTransactionStatus = (val: AccountHolderResultStatus) => {
@@ -128,7 +174,8 @@ export const AccountHolderSearchPage = () => {
    startDate,
    endDate,
    bank,
-    resultStatus
+    resultStatus,
+    sortType
  ]);

  if (!hasAccess) {
@@ -199,6 +246,7 @@ export const AccountHolderSearchPage = () => {
              listItems={listItems}
              mid={mid}
            ></AccountHolderSearchList>
+            <div ref={ setTarget }></div>
          </div>
        </div>
      </main>
--- a/src/pages/additional-service/alimtalk/list-page.tsx
+++ b/src/pages/additional-service/alimtalk/list-page.tsx
@@ -65,6 +65,7 @@ export const AlimtalkListPage = () => {
      if(entry.isIntersecting){
        console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
        if(onActionIntersect && !!pageParam.cursor){
+          setOnActionIntersect(false);
          callList('page');
        } 
      }
@@ -114,6 +115,7 @@ export const AlimtalkListPage = () => {
        setListItems(rs.content);
      }
 			if(rs.hasNext 
+        && rs.nextCursor !== pageParam.cursor
        && rs.content.length === DEFAULT_PAGE_PARAM.size
      ){
        setPageParam({
@@ -129,6 +131,7 @@ export const AlimtalkListPage = () => {
      }
      setOnActionIntersect(
        !!rs.hasNext 
+        && rs.nextCursor !== pageParam.cursor
        && rs.content.length === DEFAULT_PAGE_PARAM.size
      );
    });
--- a/src/pages/additional-service/ars/list-page.tsx
+++ b/src/pages/additional-service/ars/list-page.tsx
@@ -56,6 +56,7 @@ export const ArsListPage = () => {
      if(entry.isIntersecting){
        console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
        if(onActionIntersect && !!pageParam.cursor){
+          setOnActionIntersect(false);
          callList('page');
        } 
      }
@@ -108,6 +109,7 @@ export const ArsListPage = () => {
        setListItems(rs.content);
      }
 			if(rs.hasNext 
+        && rs.nextCursor !== pageParam.cursor
        && rs.content.length === DEFAULT_PAGE_PARAM.size
      ){
        setPageParam({
@@ -123,6 +125,7 @@ export const ArsListPage = () => {
      }
      setOnActionIntersect(
        !!rs.hasNext 
+        && rs.nextCursor !== pageParam.cursor
        && rs.content.length === DEFAULT_PAGE_PARAM.size
      );
    });
--- a/src/pages/additional-service/face-auth/face-auth-page.tsx
+++ b/src/pages/additional-service/face-auth/face-auth-page.tsx
@@ -9,10 +9,10 @@ import { JSX, useEffect, useState } from 'react';
 import { useStore } from '@/shared/model/store';
 import { PATHS } from '@/shared/constants/paths';
 import {
-    useSetHeaderTitle,
-    useSetHeaderType,
-    useSetFooterMode,
-    useSetOnBack
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+	useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';

 import { FaceAuthFilter } from '@/entities/additional-service/ui/face-auth/filter/face-auth-filter';
@@ -23,238 +23,291 @@ import { useExtensionFaceAuthListtMutation } from '@/entities/additional-service
 import { useExtensionFaceAuthDownloadExcelMutation } from '@/entities/additional-service/api/face-auth/use-extension-face-auth-download-excel-mutation';
 import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group';
 import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
+import useIntersectionObserver from '@/widgets/intersection-observer';

 export const FaceAuthPage = () => {
-    const { navigate } = useNavigate();
-    const userMid = useStore.getState().UserStore.mid;
+	const { navigate } = useNavigate();
+	const userMid = useStore.getState().UserStore.mid;
+	let recentCursor: null | string = null;

-    // 권한 체크
-    const { hasAccess, AccessDeniedDialog } = useExtensionAccessCheck({
-        extensionCode: 'FACE_AUTH'
-    });
-    
-    const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
-    const [listItems, setListItems] = useState<Array<FaceAuthListItem>>([]);
-    const [filterOn, setFilterOn] = useState<boolean>(false);
-    const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
-    const [mid, setMid] = useState<string>(userMid);
-    const [userMallId, setUserMallId] = useState<string>('');
-    const [fromDate, setFromDate] = useState<string>(moment().format('YYYYMMDD'));
-    const [toDate, setToDate] = useState<string>(moment().format('YYYYMMDD'));
-    const [transType, setTransType] = useState<FaceAuthTransType>(FaceAuthTransType.ALL);
-    const [authResult, setAuthResult] = useState<FaceAuthResult>(FaceAuthResult.ALL);
-    const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+	// 권한 체크
+	const { hasAccess, AccessDeniedDialog } = useExtensionAccessCheck({
+		extensionCode: 'FACE_AUTH'
+	});
+	
+	const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
+	const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
+	const [listItems, setListItems] = useState<Array<FaceAuthListItem>>([]);
+	const [filterOn, setFilterOn] = useState<boolean>(false);
+	const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
+	const [mid, setMid] = useState<string>(userMid);
+	const [userMallId, setUserMallId] = useState<string>('');
+	const [fromDate, setFromDate] = useState<string>(moment().format('YYYYMMDD'));
+	const [toDate, setToDate] = useState<string>(moment().format('YYYYMMDD'));
+	const [transType, setTransType] = useState<FaceAuthTransType>(FaceAuthTransType.ALL);
+	const [authResult, setAuthResult] = useState<FaceAuthResult>(FaceAuthResult.ALL);
+	const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);

-    useSetHeaderTitle('안면인증');
-    useSetHeaderType(HeaderType.LeftArrow);
-    useSetFooterMode(false);
-    useSetOnBack(() => {
-        navigate(PATHS.home);
-    });
+	useSetHeaderTitle('안면인증');
+	useSetHeaderType(HeaderType.LeftArrow);
+	useSetFooterMode(false);
+	useSetOnBack(() => {
+		navigate(PATHS.home);
+	});

-    const { mutateAsync: faceAuthHistoryList } = useExtensionFaceAuthListtMutation();
-    const { mutateAsync: downloadExcel } = useExtensionFaceAuthDownloadExcelMutation();
+	const { mutateAsync: faceAuthHistoryList } = useExtensionFaceAuthListtMutation();
+	const { mutateAsync: downloadExcel } = useExtensionFaceAuthDownloadExcelMutation();
+	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 && !!pageParam.cursor){
+					setOnActionIntersect(false);
+					callList('page');
+				} 
+			}
+			else{
+				console.log('Element is no longer intersecting with the root.');
+			}
+		});
+	};

-    const callList = (option?: {
-        sortType?: SortTypeKeys,
-        authResult?: FaceAuthResult
-    }) => {
-        let params: ExtensionFaceAuthListParams = {
-            mid: "faceauth0m",
-            userMallId: userMallId,
-            fromDate: fromDate,
-            toDate: toDate,
-            transType: transType,
-            authResult: option?.authResult ?? authResult,
-            page: pageParam
-        };
+	const { setTarget } = useIntersectionObserver({ 
+		threshold: 1, 
+		onIntersect 
+	});

-        if (params.page) {
-            params.page.sortType = option?.sortType || sortType;
-            setPageParam(params.page);
-        }
+	const callList = (type?: string) => {
+		let listParams: ExtensionFaceAuthListParams = {
+			mid: "faceauth0m",
+			userMallId: userMallId,
+			fromDate: fromDate,
+			toDate: toDate,
+			transType: transType,
+			authResult: authResult,
+			page: {
+				...pageParam,
+				...{ sortType: sortType }
+			}
+		};
+		if(type !== 'page' && listParams.page){
+      listParams.page.cursor = null;
+    }

-        faceAuthHistoryList(params).then((rs: ExtensionFaceAuthListResponse) => {
-            setListItems(rs.content);
+		faceAuthHistoryList(listParams).then((rs: ExtensionFaceAuthListResponse) => {
+			if(type === 'page'){
+        setListItems([
+          ...listItems,
+          ...rs.content
+        ]);
+      }
+      else{
+        setListItems(rs.content);
+      }
+			if(rs.hasNext 
+				&& rs.nextCursor !== pageParam.cursor
+        && rs.content.length === DEFAULT_PAGE_PARAM.size
+      ){
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: rs.nextCursor }
        });
-    };
+      }
+      else{
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: null }
+        });
+			}
+			setOnActionIntersect(
+        !!rs.hasNext 
+				&& rs.nextCursor !== pageParam.cursor
+        && rs.content.length === DEFAULT_PAGE_PARAM.size
+      );
+    });
+	};

-    const onClickToOpenEmailBottomSheet = () => {
-        setEmailBottomSheetOn(true);
-    };
+	const onClickToOpenEmailBottomSheet = () => {
+		setEmailBottomSheetOn(true);
+	};

-    const onSendRequest = (selectedEmail?: string) => {
-        if (selectedEmail) {
-            const params: ExtensionFaceAuthExcelDownlaodPrams = {
-                mid: "faceauth0m",
-                email: selectedEmail,
-                fromDate: fromDate,
-                toDate: toDate
-            };
-            downloadExcel(params).then((rs: ExtensionFaceAuthExcelDownlaodResponse) => {
-                console.log('Excel Download Status:', rs.status);
-            });
-        }
-        setEmailBottomSheetOn(false);
-    };
+	const onSendRequest = (selectedEmail?: string) => {
+		if(selectedEmail){
+			const params: ExtensionFaceAuthExcelDownlaodPrams = {
+				mid: "faceauth0m",
+				email: selectedEmail,
+				fromDate: fromDate,
+				toDate: toDate
+			};
+			downloadExcel(params).then((rs: ExtensionFaceAuthExcelDownlaodResponse) => {
+				console.log('Excel Download Status:', rs.status);
+			});
+		}
+		setEmailBottomSheetOn(false);
+	};

-    const onClickToOpenFilter = () => {
-        setFilterOn(!filterOn);
-    };
+	const onClickToOpenFilter = () => {
+		setFilterOn(!filterOn);
+	};

-    const onClickToSort = (sort: SortTypeKeys) => {
-        setSortType(sort);
-        callList({ sortType: sort });
-    };
+	const onClickToSort = (sort: SortTypeKeys) => {
+		setSortType(sort);
+	};

-    const onClickToAuthResult = (val: FaceAuthResult) => {
-        setAuthResult(val);
-    };
+	const onClickToAuthResult = (val: FaceAuthResult) => {
+		setAuthResult(val);
+	};

-    const getListDateGroup = () => {
-        let rs = [];
-        let date = '';
-        let list = [];
-        for (let i = 0; i < listItems.length; i++) {
-            let item = listItems[i];
-            if (!!item) {
-                let requestDate = item?.requestDate;
-                requestDate = requestDate?.substring(0, 8);
-                if (!!requestDate) {
-                    if (i === 0) {
-                        date = requestDate;
-                    }
-                    if (date !== requestDate) {
-                        if (list.length > 0) {
-                            rs.push(
-                                <ListDateGroup
-                                    additionalServiceCategory={AdditionalServiceCategory.FaceAuth}
-                                    mid={mid}
-                                    key={date + '-' + i}
-                                    date={date}
-                                    items={list as any}
-                                ></ListDateGroup>
-                            );
-                        }
-                        date = requestDate;
-                        list = [];
-                    }
-                    list.push(item);
-                }
-            }
-        }
-        if (list.length > 0) {
-            rs.push(
-                <ListDateGroup
-                    additionalServiceCategory={AdditionalServiceCategory.FaceAuth}
-                    mid={mid}
-                    key={date + '-last'}
-                    date={date}
-                    items={list as any}
-                ></ListDateGroup>
-            );
-        }
-        return rs;
-    };
+	const getListDateGroup = () => {
+		let rs = [];
+		let date = '';
+		let list = [];
+		for(let i = 0; i < listItems.length; i++){
+			let item = listItems[i];
+			if(!!item){
+				let requestDate = item?.requestDate;
+				requestDate = requestDate?.substring(0, 8);
+				if(!!requestDate){
+					if(i === 0){
+						date = requestDate;
+					}
+					if(date !== requestDate){
+						if(list.length > 0){
+							rs.push(
+								<ListDateGroup
+									additionalServiceCategory={AdditionalServiceCategory.FaceAuth}
+									mid={mid}
+									key={date + '-' + i}
+									date={date}
+									items={list as any}
+								></ListDateGroup>
+							);
+						}
+						date = requestDate;
+						list = [];
+					}
+					list.push(item);
+				}
+			}
+		}
+		if(list.length > 0){
+			rs.push(
+				<ListDateGroup
+					additionalServiceCategory={AdditionalServiceCategory.FaceAuth}
+					mid={mid}
+					key={date + '-last'}
+					date={date}
+					items={list as any}
+				></ListDateGroup>
+			);
+		}
+		return rs;
+	};

-    useEffect(() => {
-        callList();
-    }, [mid, userMallId, fromDate, toDate, transType, authResult]);
+	useEffect(() => {
+		callList();
+	}, [
+		mid, userMallId, 
+		fromDate, toDate, 
+		transType, authResult,
+		sortType
+	]);

-    // if (!hasAccess) {
-    //     return <AccessDeniedDialog />;
-    // }
+	// if (!hasAccess) {
+	//     return <AccessDeniedDialog />;
+	// }
    
-    return (
-        <>
-            <main>
-                <div className="tab-content">
-                    <div className="tab-pane sub active">
-                        <section className="summary-section">
-                            <div className="credit-controls">
-                                <div>
-                                    <input
-                                        className="credit-period"
-                                        type="text"
-                                        value={moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD')}
-                                        readOnly={true}
-                                    />
-                                    <button
-                                        className="filter-btn"
-                                        aria-label="필터"
-                                    >
-                                        <img
-                                            src={IMAGE_ROOT + '/ico_setting.svg'}
-                                            alt="검색옵션"
-                                            onClick={() => onClickToOpenFilter()}
-                                        />
-                                    </button>
-                                </div>
-                                <button
-                                    className="download-btn"
-                                    aria-label="다운로드"
-                                    onClick={() => onClickToOpenEmailBottomSheet()}
-                                >
-                                    <img
-                                        src={IMAGE_ROOT + '/ico_download.svg'}
-                                        alt="다운로드"
-                                    />
-                                </button>
-                            </div>
-                        </section>
+	return (
+		<>
+			<main>
+				<div className="tab-content">
+					<div className="tab-pane sub active">
+						<section className="summary-section">
+							<div className="credit-controls">
+								<div>
+									<input
+										className="credit-period"
+										type="text"
+										value={moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD')}
+										readOnly={true}
+									/>
+									<button
+										className="filter-btn"
+										aria-label="필터"
+									>
+										<img
+											src={IMAGE_ROOT + '/ico_setting.svg'}
+											alt="검색옵션"
+											onClick={() => onClickToOpenFilter()}
+										/>
+									</button>
+								</div>
+								<button
+									className="download-btn"
+									aria-label="다운로드"
+									onClick={() => onClickToOpenEmailBottomSheet()}
+								>
+									<img
+										src={IMAGE_ROOT + '/ico_download.svg'}
+										alt="다운로드"
+									/>
+								</button>
+							</div>
+						</section>

-                        <div className="filter-section">
-                            <SortTypeBox
-                                sortType={sortType}
-                                onClickToSort={onClickToSort}
-                                sortOptions={[
-                                    { key: SortTypeKeys.LATEST, label: '최신순' },
-                                    { key: SortTypeKeys.OLDEST, label: '오래된순' }
-                                ]}
-                            ></SortTypeBox>
-                            <div className="excrow">
-                                <div className="full-menu-keywords no-padding">
-                                    {
-                                        AuthResultBtnGroup.map((value, index) => (
-                                            <span
-                                                key={`key-service-code=${index}`}
-                                                className={`keyword-tag ${(authResult === value.value) ? 'active' : ''}`}
-                                                onClick={() => onClickToAuthResult(value.value)}
-                                            >{value.name}</span>
-                                        ))
-                                    }
-                                </div>
-                            </div>
-                        </div>
-                        <section className="transaction-list">
-                            {getListDateGroup()}
-                        </section>
-                    </div>
-                </div>
-            </main>
-            <FaceAuthFilter
-                filterOn={filterOn}
-                setFilterOn={setFilterOn}
-                mid={mid}
-                userMallId={userMallId}
-                fromDate={fromDate}
-                toDate={toDate}
-                transType={transType}
-                authResult={authResult}
-                setMid={setMid}
-                setUserMallId={setUserMallId}
-                setFromDate={setFromDate}
-                setToDate={setToDate}
-                setTransType={setTransType}
-                setAuthResult={setAuthResult}
-            />
-            <EmailBottomSheet
-                bottomSheetOn={emailBottomSheetOn}
-                setBottomSheetOn={setEmailBottomSheetOn}
-                imageSave={false}
-                sendEmail={true}
-                sendRequest={onSendRequest}
-            ></EmailBottomSheet>
-        </>
-    );
+						<div className="filter-section">
+							<SortTypeBox
+								sortType={sortType}
+								onClickToSort={onClickToSort}
+								sortOptions={[
+									{ key: SortTypeKeys.LATEST, label: '최신순' },
+									{ key: SortTypeKeys.OLDEST, label: '오래된순' }
+								]}
+							></SortTypeBox>
+							<div className="excrow">
+								<div className="full-menu-keywords no-padding">
+									{
+										AuthResultBtnGroup.map((value, index) => (
+											<span
+												key={`key-service-code=${index}`}
+												className={`keyword-tag ${(authResult === value.value) ? 'active' : ''}`}
+												onClick={() => onClickToAuthResult(value.value)}
+											>{value.name}</span>
+										))
+									}
+								</div>
+							</div>
+						</div>
+						<section className="transaction-list">
+							{ getListDateGroup() }
+						</section>
+						<div ref={ setTarget }></div>
+					</div>
+				</div>
+			</main>
+			<FaceAuthFilter
+				filterOn={filterOn}
+				setFilterOn={setFilterOn}
+				mid={mid}
+				userMallId={userMallId}
+				fromDate={fromDate}
+				toDate={toDate}
+				transType={transType}
+				authResult={authResult}
+				setMid={setMid}
+				setUserMallId={setUserMallId}
+				setFromDate={setFromDate}
+				setToDate={setToDate}
+				setTransType={setTransType}
+				setAuthResult={setAuthResult}
+			/>
+			<EmailBottomSheet
+				bottomSheetOn={emailBottomSheetOn}
+				setBottomSheetOn={setEmailBottomSheetOn}
+				imageSave={false}
+				sendEmail={true}
+				sendRequest={onSendRequest}
+			></EmailBottomSheet>
+		</>
+	);
 };
--- a/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx
+++ b/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx
@@ -61,6 +61,7 @@ export const KeyInPaymentPage = () => {
      if(entry.isIntersecting){
        console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
        if(onActionIntersect && !!pageParam.cursor){
+          setOnActionIntersect(false);
          callList('page');
        } 
      }
@@ -104,6 +105,7 @@ export const KeyInPaymentPage = () => {
        setListItems(rs.content);
      }
 			if(rs.hasNext 
+        && rs.nextCursor !== pageParam.cursor
        && rs.content.length === DEFAULT_PAGE_PARAM.size
      ){
        setPageParam({
@@ -119,6 +121,7 @@ export const KeyInPaymentPage = () => {
      }
      setOnActionIntersect(
        !!rs.hasNext 
+        && rs.nextCursor !== pageParam.cursor
        && rs.content.length === DEFAULT_PAGE_PARAM.size
      );
    });
--- a/src/pages/additional-service/payout/list-page.tsx
+++ b/src/pages/additional-service/payout/list-page.tsx
@@ -61,6 +61,7 @@ export const PayoutListPage = () => {
      if(entry.isIntersecting){
        console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
        if(onActionIntersect && !!pageParam.cursor){
+          setOnActionIntersect(false);
          callList('page');
        } 
      }
@@ -116,6 +117,7 @@ export const PayoutListPage = () => {
        setListItems(rs.content);
      }
 			if(rs.hasNext 
+        && rs.nextCursor !== pageParam.cursor
        && rs.content.length === DEFAULT_PAGE_PARAM.size
      ){
        setPageParam({
@@ -131,6 +133,7 @@ export const PayoutListPage = () => {
      }
      setOnActionIntersect(
        !!rs.hasNext 
+        && rs.nextCursor !== pageParam.cursor
        && rs.content.length === DEFAULT_PAGE_PARAM.size
      );
    });
--- a/src/pages/additional-service/sms-payment/sms-payment-page.tsx
+++ b/src/pages/additional-service/sms-payment/sms-payment-page.tsx
@@ -58,6 +58,7 @@ export const SmsPaymentPage = () => {
      if(entry.isIntersecting){
        console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
        if(onActionIntersect && !!pageParam.cursor){
+          setOnActionIntersect(false);
          callList('page');
        } 
      }
@@ -104,6 +105,7 @@ export const SmsPaymentPage = () => {
        setListItems(rs.content);
      }
 			if(rs.hasNext 
+        && rs.nextCursor !== pageParam.cursor
        && rs.content.length === DEFAULT_PAGE_PARAM.size
      ){
        setPageParam({
@@ -119,6 +121,7 @@ export const SmsPaymentPage = () => {
      }
      setOnActionIntersect(
        !!rs.hasNext 
+        && rs.nextCursor !== pageParam.cursor
        && rs.content.length === DEFAULT_PAGE_PARAM.size
      );
    });