부가서비스 정산 신용카드ARS 지급대행

src/entities/additional-service/model/ars/types.ts

@@ -26,6 +26,8 @@ export interface ArsListProps {
   listItems: Array<ListItemProps>;
   mid: string;
   setDetailData: (detailData: DetailData) => void;
+  onClickToOpenFilter: () => void;
+  onClickToOpenDownloadBottomSheet: () => void;
 }
 
 export interface ExtensionArsResendParams {

src/entities/additional-service/model/payout/types.ts

@@ -19,7 +19,9 @@ export interface PayoutListProps {
   searchDateType:  PayoutSearchDateType
   mid: string;
   setDetailData: (detailData: DetailData) => void;
-}
+  onClickToOpenFilter: () => void;
+  onClickToOpenDownloadBottomSheet: () => void;
+};
 
 export interface PayoutListItem {
   tid?: string;

src/entities/additional-service/ui/ars/ars-list.tsx

@@ -1,68 +1,160 @@
+import { useEffect, useState } from "react";
 import { ArsListProps } from "../../model/ars/types";
 import { AdditionalServiceCategory, ListItemProps } from "../../model/types";
 import { ListDateGroup } from "../list-date-group";
+import { GetListHeight, IMAGE_ROOT, ListScrollOn } from "@/shared/constants/common";
+import { useTranslation } from "react-i18next";
+import { useGroupDateOnStore, useGroupDateStore } from "@/shared/model/store";
 
 export const ArsList = ({
-    additionalServiceCategory,
-    listItems,
-    mid,
-    setDetailData
+	additionalServiceCategory,
+	listItems,
+	mid,
+	setDetailData,
+	onClickToOpenFilter,
+	onClickToOpenDownloadBottomSheet
 }: ArsListProps) => {
+	const { t, i18n } = useTranslation();
+	
+	const { groupDate, setGroupDate } = useGroupDateStore();
+	const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
+		
+	const [listHeight, setListHeight] = useState<number>(0);
 
-    const getListDateGroup = () => {
-        let rs = [];
-        let date = '';
-        let list: Array<ListItemProps> = [];
-        for (let i = 0; i < listItems.length; i++) {
-            let item = listItems[i];
-            if (!!item) {
-                let orderDate = item?.orderDate || '';
-                let itemDate = orderDate.substring(0, 8);
-                if (!!itemDate) {
-                    if (i === 0) {
-                        date = itemDate;
-                    }
-                    if (date !== itemDate) {
-                        if (list.length > 0) {
-                            rs.push(
-                                <ListDateGroup
-                                    additionalServiceCategory={additionalServiceCategory}
-                                    mid={mid}
-                                    key={date + '-' + i}
-                                    date={date}
-                                    items={list}
-                                    setDetailData={setDetailData}
-                                ></ListDateGroup>
-                            );
-                        }
-                        date = itemDate;
-                        list = [];
-                    }
-                    list.push(item);
-                }
-            }
-        }
-        if (list.length > 0) {
-            rs.push(
-                <ListDateGroup
-                    additionalServiceCategory={additionalServiceCategory}
-                    mid={mid}
-                    key={date + '-last'}
-                    date={date}
-                    items={list}
-                    setDetailData={setDetailData}
-                ></ListDateGroup>
-            );
-        }
-        return rs;
-    };
+	const getListDateGroup = () => {
+		let rs = [];
+		let date = '';
+		let list: Array<ListItemProps> = [];
+		for(let i=0;i<listItems.length;i++){
+			let item = listItems[i];
+			if(!!item){
+				let orderDate = item?.orderDate || '';
+				let itemDate = orderDate.substring(0, 8);
+				if(!!itemDate){
+					if(i === 0){
+						date = itemDate;
+					}
+					if(date !== itemDate){
+						if(list.length > 0){
+							rs.push(
+								<ListDateGroup
+									additionalServiceCategory={additionalServiceCategory}
+									mid={mid}
+									key={date + '-' + i}
+									date={date}
+									items={list}
+									setDetailData={setDetailData}
+								></ListDateGroup>
+							);
+						}
+						date = itemDate;
+						list = [];
+					}
+					list.push(item);
+				}
+			}
+		}
+		if(list.length > 0){
+			rs.push(
+				<ListDateGroup
+					additionalServiceCategory={additionalServiceCategory}
+					mid={mid}
+					key={date + '-last'}
+					date={date}
+					items={list}
+					setDetailData={setDetailData}
+				></ListDateGroup>
+			);
+		}
+		return rs;
+	};
 
-    return (
-        <>
-            <section className="transaction-list">
-                {getListDateGroup()}
-            </section>
-        </>
-    )
+	const getMax = (data: Array<Record<string, any>>) => {
+    let maxItem = null;
+    if(data.length > 0){
+      let numberArr = data.map((
+        value: Record<string, any>, 
+        index: number
+      ) => {
+        return value.top;
+      });
+      let max = Math.max(...numberArr);
+      maxItem = data.filter((
+        value: Record<string, any>, 
+        index: number
+      ) => {
+        return value.top === max;
+      });
+    } 
+    
+    return maxItem? maxItem[0]: null;
+  };
 
-}
+  const setScrollAction = (e: Event) => {
+    let dateHeader = document.querySelectorAll('.date-header');
+    let posData: Array<Record<string, any>> = [];
+    dateHeader.forEach((value, index) => {
+      let date: string = value.innerHTML;
+      let top: number = value.getBoundingClientRect().top;
+      if(top < 10){
+        posData.push({
+          date: date,
+          top: top
+        });
+      }
+    });
+    let maxItem = getMax(posData);
+    if(maxItem){
+      setGroupDateOn(true);
+      setGroupDate(maxItem.date);
+    }
+    else{
+      setGroupDateOn(false);
+      setGroupDate('');
+    }
+  };
+
+	useEffect(() => {
+		ListScrollOn(true);
+		let heightList = GetListHeight();
+		setListHeight(heightList.listHeight);
+
+		let tabContent = document.querySelector('.tab-content');
+		tabContent?.addEventListener('scroll', setScrollAction);
+		
+		return () => {
+			ListScrollOn(false);
+			tabContent?.removeEventListener('scroll', setScrollAction);
+		};
+	}, []);
+
+	return (
+		<>
+			{ groupDateOn &&
+			<div className="summary-amount scroll-group-date">
+				<span className="amount-text">{ groupDate }</span>
+				<div className="summary-actions">
+					<button className="filter-btn">
+						<img
+							src={ IMAGE_ROOT + '/ico_setting.svg' }
+							alt={t('transaction.searchOptions')}
+							onClick={ onClickToOpenFilter }
+						/>
+					</button>
+					<button className="download-btn">
+						<img
+							src={ IMAGE_ROOT + '/ico_download.svg' }
+							alt={t('transaction.download')}
+							onClick={ onClickToOpenDownloadBottomSheet }
+						/>
+					</button>
+				</div>
+			</div>
+			}
+			<section className="transaction-list">
+				{ getListDateGroup() }
+			</section>
+		</>
+	);
+
+};

src/entities/additional-service/ui/payout/payout-list.tsx

@@ -1,69 +1,162 @@
+import { useTranslation } from "react-i18next";
 import { PayoutListProps, PayoutSearchDateType } from "../../model/payout/types";
 import { AdditionalServiceCategory } from "../../model/types";
 import { ListDateGroup } from "../list-date-group";
+import { useGroupDateOnStore, useGroupDateStore } from "@/shared/model/store";
+import { useEffect, useState } from "react";
+import { GetListHeight, IMAGE_ROOT, ListScrollOn } from "@/shared/constants/common";
 
 export const PayoutList = ({
-    additionalServiceCategory,
-    listItems,
-    searchDateType,
-    mid,
-    setDetailData
+	additionalServiceCategory,
+	listItems,
+	searchDateType,
+	mid,
+	setDetailData,
+  onClickToOpenFilter,
+  onClickToOpenDownloadBottomSheet
 }: PayoutListProps) => {
+	const { t, i18n } = useTranslation();
+	
+	const { groupDate, setGroupDate } = useGroupDateStore();
+	const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
+		
+	const [listHeight, setListHeight] = useState<number>(0);
 
-    const getListDateGroup = () => {
-        let rs = [];
-        let date = '';
-        let list = [];
-        for (let i = 0; i < listItems.length; i++) {
-            let itemDateStr = '';
-            if (searchDateType === PayoutSearchDateType.REQUEST_DATE) {
-                itemDateStr = listItems[i]?.requestDate || '';
-            } else if (searchDateType === PayoutSearchDateType.SETTLEMENT_DATE) {
-                itemDateStr = listItems[i]?.settlementDate || '';
-            }
-            let itemDate = itemDateStr.substring(0, 8);
-            if (i === 0) {
-                date = itemDate;
-            }
-            if (date !== itemDate) {
-                if (list.length > 0) {
-                    rs.push(
-                        <ListDateGroup
-                            additionalServiceCategory={additionalServiceCategory}
-                            mid={mid}
-                            key={date + '-' + i}
-                            date={date}
-                            items={list}
-                            setDetailData={setDetailData}
-                        ></ListDateGroup>
-                    );
-                }
-                date = itemDate;
-                list = [];
-            }
-            list.push(listItems[i] as any);
-        }
-        if (list.length > 0) {
-            rs.push(
-                <ListDateGroup
-                    additionalServiceCategory={additionalServiceCategory}
-                    mid={mid}
-                    key={date + '-last'}
-                    date={date}
-                    items={list}
-                    setDetailData={setDetailData}
-                ></ListDateGroup>
-            );
-        }
-        return rs;
-    };
+	const getListDateGroup = () => {
+		let rs = [];
+		let date = '';
+		let list = [];
+		for (let i=0;i<listItems.length;i++){
+			let itemDateStr = '';
+			if(searchDateType === PayoutSearchDateType.REQUEST_DATE){
+				itemDateStr = listItems[i]?.requestDate || '';
+			}
+			else if(searchDateType === PayoutSearchDateType.SETTLEMENT_DATE){
+				itemDateStr = listItems[i]?.settlementDate || '';
+			}
+			let itemDate = itemDateStr.substring(0, 8);
+			if(i === 0){
+				date = itemDate;
+			}
+			if(date !== itemDate){
+				if(list.length > 0){
+					rs.push(
+						<ListDateGroup
+							additionalServiceCategory={additionalServiceCategory}
+							mid={mid}
+							key={date + '-' + i}
+							date={date}
+							items={list}
+							setDetailData={setDetailData}
+						></ListDateGroup>
+					);
+				}
+				date = itemDate;
+				list = [];
+			}
+			list.push(listItems[i] as any);
+		}
+		if(list.length > 0){
+			rs.push(
+				<ListDateGroup
+					additionalServiceCategory={additionalServiceCategory}
+					mid={mid}
+					key={date + '-last'}
+					date={date}
+					items={list}
+					setDetailData={setDetailData}
+				></ListDateGroup>
+			);
+		}
+		return rs;
+	};
 
-    return (
-        <>
-            <section className="transaction-list">
-                {getListDateGroup()}
-            </section>
-        </>
-    )
+	const getMax = (data: Array<Record<string, any>>) => {
+    let maxItem = null;
+    if(data.length > 0){
+      let numberArr = data.map((
+        value: Record<string, any>, 
+        index: number
+      ) => {
+        return value.top;
+      });
+      let max = Math.max(...numberArr);
+      maxItem = data.filter((
+        value: Record<string, any>, 
+        index: number
+      ) => {
+        return value.top === max;
+      });
+    } 
+    
+    return maxItem? maxItem[0]: null;
+  };
 
-}
+  const setScrollAction = (e: Event) => {
+    let dateHeader = document.querySelectorAll('.date-header');
+    let posData: Array<Record<string, any>> = [];
+    dateHeader.forEach((value, index) => {
+      let date: string = value.innerHTML;
+      let top: number = value.getBoundingClientRect().top;
+      if(top < 10){
+        posData.push({
+          date: date,
+          top: top
+        });
+      }
+    });
+    let maxItem = getMax(posData);
+    if(maxItem){
+      setGroupDateOn(true);
+      setGroupDate(maxItem.date);
+    }
+    else{
+      setGroupDateOn(false);
+      setGroupDate('');
+    }
+  };
+
+	useEffect(() => {
+		ListScrollOn(true);
+		let heightList = GetListHeight();
+		setListHeight(heightList.listHeight);
+
+		let tabContent = document.querySelector('.tab-content');
+		tabContent?.addEventListener('scroll', setScrollAction);
+		
+		return () => {
+			ListScrollOn(false);
+			tabContent?.removeEventListener('scroll', setScrollAction);
+		};
+	}, []);
+
+	return (
+		<>
+			{ groupDateOn &&
+			<div className="summary-amount scroll-group-date">
+				<span className="amount-text">{ groupDate }</span>
+				<div className="summary-actions">
+					<button className="filter-btn">
+						<img
+							src={ IMAGE_ROOT + '/ico_setting.svg' }
+							alt={t('transaction.searchOptions')}
+							onClick={ onClickToOpenFilter }
+						/>
+					</button>
+					<button className="download-btn">
+						<img
+							src={ IMAGE_ROOT + '/ico_download.svg' }
+							alt={t('transaction.download')}
+							onClick={ onClickToOpenDownloadBottomSheet }
+						/>
+					</button>
+				</div>
+			</div>
+			}
+			<section className="transaction-list">
+				{getListDateGroup()}
+			</section>
+		</>
+	);
+
+};

src/entities/settlement/ui/list-wrap.tsx

@@ -1,6 +1,6 @@
 import moment from 'moment';
 import { useEffect, useState } from 'react';
-import { IMAGE_ROOT } from '@/shared/constants/common';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
 import { ListDateGroup } from './list-date-group';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
@@ -29,7 +29,7 @@ import {
   SettlementsHistoryExcelParams
 } from '../model/types';
 import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
-import { useStore } from '@/shared/model/store';
+import { useGroupDateOnStore, useGroupDateStore, useStore } from '@/shared/model/store';
 import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { useTranslation } from 'react-i18next';
@@ -87,6 +87,11 @@ export const ListWrap = ({
 
   const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
 
+  const { groupDate, setGroupDate } = useGroupDateStore();
+  const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
+    
+  const [listHeight, setListHeight] = useState<number>(0);
+
   const { mutateAsync: settlementsHistory } = useSettlementsHistoryMutation();
   const { mutateAsync: settlementsHistorySummary} = useSettlementsHistorySummaryMutation();
   const { mutateAsync: settlementsTransactionList } = useSettlementsTransactionListMutation();
@@ -420,6 +425,51 @@ export const ListWrap = ({
       });
     }
   };
+
+  const getMax = (data: Array<Record<string, any>>) => {
+    let maxItem = null;
+    if(data.length > 0){
+      let numberArr = data.map((
+        value: Record<string, any>, 
+        index: number
+      ) => {
+        return value.top;
+      });
+      let max = Math.max(...numberArr);
+      maxItem = data.filter((
+        value: Record<string, any>, 
+        index: number
+      ) => {
+        return value.top === max;
+      });
+    } 
+    
+    return maxItem? maxItem[0]: null;
+  };
+
+  const setScrollAction = (e: Event) => {
+    let dateHeader = document.querySelectorAll('.date-header');
+    let posData: Array<Record<string, any>> = [];
+    dateHeader.forEach((value, index) => {
+      let date: string = value.innerHTML;
+      let top: number = value.getBoundingClientRect().top;
+      if(top < 10){
+        posData.push({
+          date: date,
+          top: top
+        });
+      }
+    });
+    let maxItem = getMax(posData);
+    if(maxItem){
+      setGroupDateOn(true);
+      setGroupDate(maxItem.date);
+    }
+    else{
+      setGroupDateOn(false);
+      setGroupDate('');
+    }
+  };
     
   useEffect(() => {
     callList();
@@ -427,7 +477,21 @@ export const ListWrap = ({
     mid, periodType, sortType,
     startDate, endDate,
     paymentMethod
-  ]);  
+  ]);
+  
+  useEffect(() => {
+    ListScrollOn(true);
+    let heightList = GetListHeight();
+    setListHeight(heightList.listHeight);
+
+    let tabContent = document.querySelector('.tab-content');
+    tabContent?.addEventListener('scroll', setScrollAction);
+    
+    return () => {
+      ListScrollOn(false);
+      tabContent?.removeEventListener('scroll', setScrollAction);
+    };
+  }, []);
 
   return (
     <>
@@ -521,6 +585,27 @@ export const ListWrap = ({
           </div>
         </div>
       </div>
+      { groupDateOn &&
+      <div className="summary-amount scroll-group-date">
+        <span className="amount-text">{ groupDate }</span>
+        <div className="summary-actions">
+          <button className="filter-btn">
+            <img
+              src={ IMAGE_ROOT + '/ico_setting.svg' }
+              alt={t('transaction.searchOptions')}
+              onClick={ onClickToOpenFilter }
+            />
+          </button>
+          <button className="download-btn">
+            <img
+              src={ IMAGE_ROOT + '/ico_download.svg' }
+              alt={t('transaction.download')}
+              onClick={ onClickToOpenDownloadBottomSheet }
+            />
+          </button>
+        </div>
+      </div>
+      }
       <div className="transaction-list">
       { (periodType === SettlementPeriodType.SETTLEMENT_DATE) && 
         getSettlementDateListDateGroup()

src/entities/vat-return/ui/list-wrap.tsx

@@ -1,7 +1,7 @@
 import moment from 'moment';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IMAGE_ROOT } from '@/shared/constants/common';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
 import { ListFilter } from './filter/list-filter';
 import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
 import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
@@ -18,7 +18,7 @@ import {
 } from '../model/types';
 import { useVatReturnListMutation } from '../api/use-vat-return-list-mutation';
 import { ListDateGroup } from './list-date-group';
-import { useStore } from '@/shared/model/store';
+import { useGroupDateOnStore, useGroupDateStore, useStore } from '@/shared/model/store';
 import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { TaxInvoiceDetail } from './detail/tax-invoice-detail';
@@ -49,6 +49,11 @@ export const ListWrap = () => {
   const [detailOn, setDetailOn] = useState<boolean>(false);
   const [detailTaxInvoiceNumber, setDetailTaxInvoiceNumber] = useState<string>('');
 
+  const { groupDate, setGroupDate } = useGroupDateStore();
+  const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
+      
+  const [listHeight, setListHeight] = useState<number>(0);
+
   const { mutateAsync: vatReturnList } = useVatReturnListMutation();
   const { mutateAsync: vatReturnDownloadExcel } = useVatReturnDownloadExcelMutation();
 
@@ -118,7 +123,7 @@ export const ListWrap = () => {
     });
   };
 
-  const onClickToOpenFIlter = () => {
+  const onClickToOpenFilter = () => {
     setFilterOn(true);
   };
   const onClickToSort = (sort: SortTypeKeys) => {
@@ -158,12 +163,6 @@ export const ListWrap = () => {
     }
   };
 
-  useEffect(() => {
-    callList();
-  }, [
-    mid, startMonth, endMonth,
-    receiptType, targetType, sortType
-  ]);
   const setDetailData = (detailData: DetailData) => {
     setDetailOn(detailData.detailOn);
     setDetailTaxInvoiceNumber(detailData.taxInvoiceNumber);
@@ -179,7 +178,7 @@ export const ListWrap = () => {
       let item = listItems[i];
       if (!!item) {
         let issueDateTime = item?.issueDate;
-        let issueDate = issueDateTime?.substr(0, 8);
+        let issueDate = issueDateTime?.substr(0, 6);
         if (!!issueDate) {
           if (i === 0) {
             date = issueDate;
@@ -215,6 +214,72 @@ export const ListWrap = () => {
     return rs;
   };
 
+  const getMax = (data: Array<Record<string, any>>) => {
+    let maxItem = null;
+    if(data.length > 0){
+      let numberArr = data.map((
+        value: Record<string, any>, 
+        index: number
+      ) => {
+        return value.top;
+      });
+      let max = Math.max(...numberArr);
+      maxItem = data.filter((
+        value: Record<string, any>, 
+        index: number
+      ) => {
+        return value.top === max;
+      });
+    } 
+    
+    return maxItem? maxItem[0]: null;
+  };
+
+  const setScrollAction = (e: Event) => {
+    let dateHeader = document.querySelectorAll('.date-header');
+    let posData: Array<Record<string, any>> = [];
+    dateHeader.forEach((value, index) => {
+      let date: string = value.innerHTML;
+      let top: number = value.getBoundingClientRect().top;
+      if(top < 10){
+        posData.push({
+          date: date,
+          top: top
+        });
+      }
+    });
+    let maxItem = getMax(posData);
+    if(maxItem){
+      setGroupDateOn(true);
+      setGroupDate(maxItem.date);
+    }
+    else{
+      setGroupDateOn(false);
+      setGroupDate('');
+    }
+  };
+
+  useEffect(() => {
+    callList();
+  }, [
+    mid, startMonth, endMonth,
+    receiptType, targetType, sortType
+  ]);
+
+  useEffect(() => {
+    ListScrollOn(true);
+    let heightList = GetListHeight();
+    setListHeight(heightList.listHeight);
+
+    let tabContent = document.querySelector('.tab-content');
+    tabContent?.addEventListener('scroll', setScrollAction);
+    
+    return () => {
+      ListScrollOn(false);
+      tabContent?.removeEventListener('scroll', setScrollAction);
+    };
+  }, []);
+
   return (
     <>
       <div className="summary-section pt-30">
@@ -223,34 +288,55 @@ export const ListWrap = () => {
             <input
               type="text"
               className="credit-period"
-              value={moment(startMonth + '01').format('YYYY.MM') + '-' + moment(endMonth + '01').format('YYYY.MM')}
-              readOnly={true}
+              value={ moment(startMonth + '01').format('YYYY.MM') + '-' + moment(endMonth + '01').format('YYYY.MM') }
+              readOnly={ true }
             />
             <button
               className="filter-btn"
-              onClick={() => onClickToOpenFIlter()}
+              onClick={ onClickToOpenFilter }
             >
               <img
-                src={IMAGE_ROOT + '/ico_setting.svg'}
-                alt={t('transaction.searchOptions')}
+                src={ IMAGE_ROOT + '/ico_setting.svg' }
+                alt={ t('transaction.searchOptions') }
               />
             </button>
           </div>
           <button className="download-btn">
             <img
-              src={IMAGE_ROOT + '/ico_download.svg'}
-              alt={t('transaction.download')}
-              onClick={onClickToOpenDownloadBottomSheet}
+              src={ IMAGE_ROOT + '/ico_download.svg' }
+              alt={ t('transaction.download') }
+              onClick={ onClickToOpenDownloadBottomSheet }
             />
           </button>
         </div>
       </div>
       <div className="filter-section mt-10">
         <SortTypeBox
-          sortType={sortType}
-          onClickToSort={onClickToSort}
+          sortType={ sortType }
+          onClickToSort={ onClickToSort }
         ></SortTypeBox>
       </div>
+      { groupDateOn &&
+      <div className="summary-amount scroll-group-date">
+        <span className="amount-text">{ groupDate }</span>
+        <div className="summary-actions">
+          <button className="filter-btn">
+            <img
+              src={ IMAGE_ROOT + '/ico_setting.svg' }
+              alt={ t('transaction.searchOptions') }
+              onClick={ onClickToOpenFilter }
+            />
+          </button>
+          <button className="download-btn">
+            <img
+              src={ IMAGE_ROOT + '/ico_download.svg' }
+              alt={ t('transaction.download') }
+              onClick={ onClickToOpenDownloadBottomSheet }
+            />
+          </button>
+        </div>
+      </div>
+      }
       <div className="transaction-list">
         {getListDateGroup()}
         <div ref={setTarget}></div>

src/pages/additional-service/ars/list-page.tsx

@@ -291,6 +291,8 @@ export const ArsListPage = () => {
               listItems={listItems}
               mid={mid}
               setDetailData={setDetailData}
+              onClickToOpenFilter={ onClickToOpenFilter }
+              onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
             ></ArsList>
             <div ref={setTarget}></div>
           </div>

src/pages/additional-service/payout/list-page.tsx

@@ -348,6 +348,8 @@ export const PayoutListPage = () => {
               searchDateType={searchDateType}
               mid={mid}
               setDetailData={setDetailData}
+              onClickToOpenFilter={ onClickToOpenFilter }
+              onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
             ></PayoutList>
             <div ref={setTarget}></div>
             <div className="apply-row">