diff --git a/src/entities/additional-service/ui/account-holder-auth/account-holder-auth-list.tsx b/src/entities/additional-service/ui/account-holder-auth/account-holder-auth-list.tsx
index 637dc46..605892a 100644
--- a/src/entities/additional-service/ui/account-holder-auth/account-holder-auth-list.tsx
+++ b/src/entities/additional-service/ui/account-holder-auth/account-holder-auth-list.tsx
@@ -3,7 +3,7 @@ import { AccountHolderAuthListProps } from '../../model/account-holder-auth/type
 import { useTranslation } from 'react-i18next';
 import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store';
 import { useEffect, useState } from 'react';
-import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } from '@/shared/constants/common';
 
 export const AccountHolderAuthList = ({
   additionalServiceCategory,
@@ -69,62 +69,21 @@ export const AccountHolderAuthList = ({
     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(() => {
     ListScrollOn(true);
     let heightList = GetListHeight();
     setListHeight(heightList.listHeight);
 
     let tabContent = document.querySelector('.tab-content');
-    tabContent?.addEventListener('scroll', setScrollAction);
+    tabContent?.addEventListener('scroll', (e: Event) => {
+      setScrollAction(e, setGroupDate, setGroupDateOn);
+    });
     
     return () => {
       ListScrollOn(false);
-      tabContent?.removeEventListener('scroll', setScrollAction);
+      tabContent?.removeEventListener('scroll', (e: Event) => {
+        setScrollAction(e, setGroupDate, setGroupDateOn);
+      });
     };
   }, []);
 
diff --git a/src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx b/src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx
index fff43a7..e31fdf5 100644
--- a/src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx
+++ b/src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx
@@ -8,7 +8,7 @@ import { checkGrant } from '@/shared/lib/check-grant';
 import { showAlert } from '@/widgets/show-alert';
 import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store';
 import { useEffect, useState } from 'react';
-import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } from '@/shared/constants/common';
 
 export const AccountHolderSearchList = ({
 	listItems,
@@ -82,62 +82,21 @@ export const AccountHolderSearchList = ({
 		navigate(PATHS.additionalService.accountHolderSearch.request)
 	};
 
-	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);
+		tabContent?.addEventListener('scroll', (e: Event) => {
+			setScrollAction(e, setGroupDate, setGroupDateOn);
+		});
 		
 		return () => {
 			ListScrollOn(false);
-			tabContent?.removeEventListener('scroll', setScrollAction);
+			tabContent?.removeEventListener('scroll', (e: Event) => {
+				setScrollAction(e, setGroupDate, setGroupDateOn);
+			});
 		};
 	}, []);
 
diff --git a/src/entities/additional-service/ui/ars/ars-list.tsx b/src/entities/additional-service/ui/ars/ars-list.tsx
index c1f8a8d..826497c 100644
--- a/src/entities/additional-service/ui/ars/ars-list.tsx
+++ b/src/entities/additional-service/ui/ars/ars-list.tsx
@@ -2,7 +2,7 @@ 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 { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } from "@/shared/constants/common";
 import { useTranslation } from "react-i18next";
 import { useGroupDateOnStore, useGroupDateStore } from "@/shared/model/store";
 
@@ -69,62 +69,21 @@ export const ArsList = ({
 		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(() => {
 		ListScrollOn(true);
 		let heightList = GetListHeight();
 		setListHeight(heightList.listHeight);
 
 		let tabContent = document.querySelector('.tab-content');
-		tabContent?.addEventListener('scroll', setScrollAction);
+		tabContent?.addEventListener('scroll', (e: Event) => {
+			setScrollAction(e, setGroupDate, setGroupDateOn);
+		});
 		
 		return () => {
 			ListScrollOn(false);
-			tabContent?.removeEventListener('scroll', setScrollAction);
+			tabContent?.removeEventListener('scroll', (e: Event) => {
+				setScrollAction(e, setGroupDate, setGroupDateOn);
+			});
 		};
 	}, []);
 
diff --git a/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx b/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx
index 6f92d2e..4daa607 100644
--- a/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx
+++ b/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx
@@ -1,6 +1,6 @@
 import moment from 'moment';
 import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
-import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } from '@/shared/constants/common';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { JSX, useEffect, useState } from 'react';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
@@ -264,51 +264,6 @@ export const FundAccountResultListWrap = () => {
     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(() => {
     callSummary();
     ListScrollOn(true);
@@ -316,10 +271,15 @@ export const FundAccountResultListWrap = () => {
     setListHeight(heightList.listHeight);
     
     let tabContent = document.querySelector('.tab-content');
-    tabContent?.addEventListener('scroll', setScrollAction);
+    tabContent?.addEventListener('scroll', (e: Event) => {
+      setScrollAction(e, setGroupDate, setGroupDateOn);
+    });
+    
     return () => {
       ListScrollOn(false);
-      tabContent?.removeEventListener('scroll', setScrollAction);
+      tabContent?.removeEventListener('scroll', (e: Event) => {
+        setScrollAction(e, setGroupDate, setGroupDateOn);
+      });
     };
   }, []);
 
diff --git a/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx b/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
index 6a1b944..77c3e0d 100644
--- a/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
+++ b/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
@@ -1,5 +1,5 @@
 import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
-import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } from '@/shared/constants/common';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { JSX, useEffect, useState } from 'react';
 import {
@@ -260,51 +260,6 @@ export const FundAccountTransferListWrap = () => {
     navigate(PATHS.additionalService.fundAccount.transferRequest);
   };
 
-  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();
   }, [
@@ -324,11 +279,15 @@ export const FundAccountTransferListWrap = () => {
     setListHeight(heightList.listHeight);
 
     let tabContent = document.querySelector('.tab-content');
-    tabContent?.addEventListener('scroll', setScrollAction);
+    tabContent?.addEventListener('scroll', (e: Event) => {
+      setScrollAction(e, setGroupDate, setGroupDateOn);
+    });
     
     return () => {
       ListScrollOn(false);
-      tabContent?.removeEventListener('scroll', setScrollAction);
+      tabContent?.removeEventListener('scroll', (e: Event) => {
+        setScrollAction(e, setGroupDate, setGroupDateOn);
+      });
     };
   }, []);
 
diff --git a/src/entities/additional-service/ui/key-in-payment/key-in-payment-list.tsx b/src/entities/additional-service/ui/key-in-payment/key-in-payment-list.tsx
index 3ebc860..1ae4e95 100644
--- a/src/entities/additional-service/ui/key-in-payment/key-in-payment-list.tsx
+++ b/src/entities/additional-service/ui/key-in-payment/key-in-payment-list.tsx
@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { checkGrant } from '@/shared/lib/check-grant';
 import { showAlert } from '@/widgets/show-alert';
-import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } from '@/shared/constants/common';
 import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store';
 
 export const KeyInPaymentList = ({
@@ -77,62 +77,21 @@ export const KeyInPaymentList = ({
     navigate(PATHS.additionalService.keyInPayment.request);
   };
 
-  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);
+    tabContent?.addEventListener('scroll', (e: Event) => {
+      setScrollAction(e, setGroupDate, setGroupDateOn);
+    });
     
     return () => {
       ListScrollOn(false);
-      tabContent?.removeEventListener('scroll', setScrollAction);
+      tabContent?.removeEventListener('scroll', (e: Event) => {
+        setScrollAction(e, setGroupDate, setGroupDateOn);
+      });
     };
   }, []);
 
diff --git a/src/entities/additional-service/ui/link-payment/link-payment-history-list.tsx b/src/entities/additional-service/ui/link-payment/link-payment-history-list.tsx
index cce9f07..811ff4e 100644
--- a/src/entities/additional-service/ui/link-payment/link-payment-history-list.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-history-list.tsx
@@ -1,4 +1,4 @@
-import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } from '@/shared/constants/common';
 import { LinkPaymentHistoryListProps } from '../../model/link-pay/types';
 import { ListDateGroup } from '../list-date-group';
 import { useTranslation } from 'react-i18next';
@@ -68,62 +68,21 @@ export const LinkPaymentHistoryList = ({
     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(() => {
     ListScrollOn(true);
     let heightList = GetListHeight();
     setListHeight(heightList.listHeight);
 
     let tabContent = document.querySelector('.tab-content');
-    tabContent?.addEventListener('scroll', setScrollAction);
+    tabContent?.addEventListener('scroll', (e: Event) => {
+      setScrollAction(e, setGroupDate, setGroupDateOn);
+    });
     
     return () => {
       ListScrollOn(false);
-      tabContent?.removeEventListener('scroll', setScrollAction);
+      tabContent?.removeEventListener('scroll', (e: Event) => {
+        setScrollAction(e, setGroupDate, setGroupDateOn);
+      });
     };
   }, []);
 
diff --git a/src/entities/additional-service/ui/link-payment/link-payment-wait-list.tsx b/src/entities/additional-service/ui/link-payment/link-payment-wait-list.tsx
index bf18de3..c970728 100644
--- a/src/entities/additional-service/ui/link-payment/link-payment-wait-list.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-wait-list.tsx
@@ -3,7 +3,7 @@ import { LinkPaymentWaitListProps } from '../../model/link-pay/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';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } from '@/shared/constants/common';
 
 export const LinkPaymentWaitList = ({
   additionalServiceCategory,
@@ -68,62 +68,21 @@ export const LinkPaymentWaitList = ({
     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(() => {
     ListScrollOn(true);
     let heightList = GetListHeight();
     setListHeight(heightList.listHeight);
 
     let tabContent = document.querySelector('.tab-content');
-    tabContent?.addEventListener('scroll', setScrollAction);
+    tabContent?.addEventListener('scroll', (e: Event) => {
+      setScrollAction(e, setGroupDate, setGroupDateOn);
+    });
     
     return () => {
       ListScrollOn(false);
-      tabContent?.removeEventListener('scroll', setScrollAction);
+      tabContent?.removeEventListener('scroll', (e: Event) => {
+        setScrollAction(e, setGroupDate, setGroupDateOn);
+      });
     };
   }, []);
 
diff --git a/src/entities/additional-service/ui/payout/payout-list.tsx b/src/entities/additional-service/ui/payout/payout-list.tsx
index 8d15eed..1d55fd7 100644
--- a/src/entities/additional-service/ui/payout/payout-list.tsx
+++ b/src/entities/additional-service/ui/payout/payout-list.tsx
@@ -4,7 +4,7 @@ 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";
+import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } from "@/shared/constants/common";
 
 export const PayoutList = ({
 	additionalServiceCategory,
@@ -71,62 +71,21 @@ export const PayoutList = ({
 		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(() => {
 		ListScrollOn(true);
 		let heightList = GetListHeight();
 		setListHeight(heightList.listHeight);
 
 		let tabContent = document.querySelector('.tab-content');
-		tabContent?.addEventListener('scroll', setScrollAction);
+		tabContent?.addEventListener('scroll', (e: Event) => {
+			setScrollAction(e, setGroupDate, setGroupDateOn);
+		});
 		
 		return () => {
 			ListScrollOn(false);
-			tabContent?.removeEventListener('scroll', setScrollAction);
+			tabContent?.removeEventListener('scroll', (e: Event) => {
+				setScrollAction(e, setGroupDate, setGroupDateOn);
+			});
 		};
 	}, []);
 
diff --git a/src/entities/additional-service/ui/sms-payment/sms-payment-list.tsx b/src/entities/additional-service/ui/sms-payment/sms-payment-list.tsx
index a5185bd..967db0f 100644
--- a/src/entities/additional-service/ui/sms-payment/sms-payment-list.tsx
+++ b/src/entities/additional-service/ui/sms-payment/sms-payment-list.tsx
@@ -3,7 +3,7 @@ import { SmsPaymentListProps } from '../../model/sms-payment/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';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } from '@/shared/constants/common';
 
 export const SmsPaymentList = ({
     listItems,
@@ -68,62 +68,21 @@ export const SmsPaymentList = ({
     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(() => {
     ListScrollOn(true);
     let heightList = GetListHeight();
     setListHeight(heightList.listHeight);
 
     let tabContent = document.querySelector('.tab-content');
-    tabContent?.addEventListener('scroll', setScrollAction);
+    tabContent?.addEventListener('scroll', (e: Event) => {
+      setScrollAction(e, setGroupDate, setGroupDateOn);
+    });
     
     return () => {
       ListScrollOn(false);
-      tabContent?.removeEventListener('scroll', setScrollAction);
+      tabContent?.removeEventListener('scroll', (e: Event) => {
+        setScrollAction(e, setGroupDate, setGroupDateOn);
+      });
     };
   }, []);
 
diff --git a/src/entities/settlement/ui/list-wrap.tsx b/src/entities/settlement/ui/list-wrap.tsx
index b12498e..009cd8a 100644
--- a/src/entities/settlement/ui/list-wrap.tsx
+++ b/src/entities/settlement/ui/list-wrap.tsx
@@ -1,6 +1,6 @@
 import moment from 'moment';
 import { useEffect, useState } from 'react';
-import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } 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';
@@ -426,51 +426,6 @@ 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();
   }, [
@@ -485,11 +440,15 @@ export const ListWrap = ({
     setListHeight(heightList.listHeight);
 
     let tabContent = document.querySelector('.tab-content');
-    tabContent?.addEventListener('scroll', setScrollAction);
+    tabContent?.addEventListener('scroll', (e: Event) => {
+      setScrollAction(e, setGroupDate, setGroupDateOn);
+    });
     
     return () => {
       ListScrollOn(false);
-      tabContent?.removeEventListener('scroll', setScrollAction);
+      tabContent?.removeEventListener('scroll', (e: Event) => {
+        setScrollAction(e, setGroupDate, setGroupDateOn);
+      });
     };
   }, []);
 
diff --git a/src/entities/transaction/ui/all-transaction-list.tsx b/src/entities/transaction/ui/all-transaction-list.tsx
index dc718fc..e7a4cf4 100644
--- a/src/entities/transaction/ui/all-transaction-list.tsx
+++ b/src/entities/transaction/ui/all-transaction-list.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { AllTransactionListProps, ListItemProps } from '../model/types';
 import { ListDateGroup } from './list-date-group';
-import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } from '@/shared/constants/common';
 import { useTranslation } from 'react-i18next';
 import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store';
 
@@ -64,51 +64,6 @@ export const AllTransactionList = ({
     }
     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(() => {
     ListScrollOn(true);
@@ -116,11 +71,15 @@ export const AllTransactionList = ({
     setListHeight(heightList.listHeight);
 
     let tabContent = document.querySelector('.tab-content');
-    tabContent?.addEventListener('scroll', setScrollAction);
+    tabContent?.addEventListener('scroll', (e: Event) => {
+      setScrollAction(e, setGroupDate, setGroupDateOn);
+    });
     
     return () => {
       ListScrollOn(false);
-      tabContent?.removeEventListener('scroll', setScrollAction);
+      tabContent?.removeEventListener('scroll', (e: Event) => {
+        setScrollAction(e, setGroupDate, setGroupDateOn);
+      });
     };
   }, []);
 
diff --git a/src/entities/transaction/ui/billing-list.tsx b/src/entities/transaction/ui/billing-list.tsx
index fb0d0c4..dee7b2d 100644
--- a/src/entities/transaction/ui/billing-list.tsx
+++ b/src/entities/transaction/ui/billing-list.tsx
@@ -3,7 +3,7 @@ import { ListDateGroup } from './list-date-group';
 import { useTranslation } from 'react-i18next';
 import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store';
 import { useEffect, useState } from 'react';
-import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } from '@/shared/constants/common';
 
 export const BillingList = ({
   transactionCategory,
@@ -63,51 +63,6 @@ export const BillingList = ({
     }
     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(() => {
     ListScrollOn(true);
@@ -115,11 +70,15 @@ export const BillingList = ({
     setListHeight(heightList.listHeight);
 
     let tabContent = document.querySelector('.tab-content');
-    tabContent?.addEventListener('scroll', setScrollAction);
+    tabContent?.addEventListener('scroll', (e: Event) => {
+      setScrollAction(e, setGroupDate, setGroupDateOn);
+    });
     
     return () => {
       ListScrollOn(false);
-      tabContent?.removeEventListener('scroll', setScrollAction);
+      tabContent?.removeEventListener('scroll', (e: Event) => {
+        setScrollAction(e, setGroupDate, setGroupDateOn);
+      });
     };
   }, []);
   
diff --git a/src/entities/transaction/ui/cash-receipt-list.tsx b/src/entities/transaction/ui/cash-receipt-list.tsx
index ab21aa0..a4b5f72 100644
--- a/src/entities/transaction/ui/cash-receipt-list.tsx
+++ b/src/entities/transaction/ui/cash-receipt-list.tsx
@@ -3,7 +3,7 @@ import { CashReceiptListProps } 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';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } from '@/shared/constants/common';
 
 export const CashReceiptList = ({
   transactionCategory,
@@ -64,62 +64,21 @@ export const CashReceiptList = ({
     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(() => {
     ListScrollOn(true);
     let heightList = GetListHeight();
     setListHeight(heightList.listHeight);
 
     let tabContent = document.querySelector('.tab-content');
-    tabContent?.addEventListener('scroll', setScrollAction);
-    
+    tabContent?.addEventListener('scroll', (e: Event) => {
+      setScrollAction(e, setGroupDate, setGroupDateOn);
+    });
+        
     return () => {
       ListScrollOn(false);
-      tabContent?.removeEventListener('scroll', setScrollAction);
+      tabContent?.removeEventListener('scroll', (e: Event) => {
+        setScrollAction(e, setGroupDate, setGroupDateOn);
+      });
     };
   }, []);
 
diff --git a/src/entities/transaction/ui/escrow-list.tsx b/src/entities/transaction/ui/escrow-list.tsx
index cfb42ac..896a5e8 100644
--- a/src/entities/transaction/ui/escrow-list.tsx
+++ b/src/entities/transaction/ui/escrow-list.tsx
@@ -3,7 +3,7 @@ import { EscrowListProps } 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';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } from '@/shared/constants/common';
 
 export const EscrowList = ({ 
   transactionCategory,
@@ -63,51 +63,6 @@ export const EscrowList = ({
     }
     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(() => {
     ListScrollOn(true);
@@ -115,11 +70,15 @@ export const EscrowList = ({
     setListHeight(heightList.listHeight);
 
     let tabContent = document.querySelector('.tab-content');
-    tabContent?.addEventListener('scroll', setScrollAction);
+    tabContent?.addEventListener('scroll', (e: Event) => {
+      setScrollAction(e, setGroupDate, setGroupDateOn);
+    });
     
     return () => {
       ListScrollOn(false);
-      tabContent?.removeEventListener('scroll', setScrollAction);
+      tabContent?.removeEventListener('scroll', (e: Event) => {
+        setScrollAction(e, setGroupDate, setGroupDateOn);
+      });
     };
   }, []);
   
diff --git a/src/entities/vat-return/ui/list-wrap.tsx b/src/entities/vat-return/ui/list-wrap.tsx
index e5b97c4..0eeed6f 100644
--- a/src/entities/vat-return/ui/list-wrap.tsx
+++ b/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 { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } 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';
@@ -214,51 +214,6 @@ 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();
   }, [
@@ -272,11 +227,15 @@ export const ListWrap = () => {
     setListHeight(heightList.listHeight);
 
     let tabContent = document.querySelector('.tab-content');
-    tabContent?.addEventListener('scroll', setScrollAction);
+    tabContent?.addEventListener('scroll', (e: Event) => {
+      setScrollAction(e, setGroupDate, setGroupDateOn);
+    });
     
     return () => {
       ListScrollOn(false);
-      tabContent?.removeEventListener('scroll', setScrollAction);
+      tabContent?.removeEventListener('scroll', (e: Event) => {
+        setScrollAction(e, setGroupDate, setGroupDateOn);
+      });
     };
   }, []);
 
diff --git a/src/pages/additional-service/alimtalk/list-page.tsx b/src/pages/additional-service/alimtalk/list-page.tsx
index 1ab500c..cc641a9 100644
--- a/src/pages/additional-service/alimtalk/list-page.tsx
+++ b/src/pages/additional-service/alimtalk/list-page.tsx
@@ -1,7 +1,7 @@
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { DefaultRequestPagination, HeaderType, SortTypeKeys } from '@/entities/common/model/types';
-import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } from '@/shared/constants/common';
 import {
   useSetHeaderTitle,
   useSetHeaderType,
@@ -282,62 +282,21 @@ export const AlimtalkListPage = () => {
     sendCl
   ]);
 
-  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);
+    tabContent?.addEventListener('scroll', (e: Event) => {
+      setScrollAction(e, setGroupDate, setGroupDateOn);
+    });
     
     return () => {
       ListScrollOn(false);
-      tabContent?.removeEventListener('scroll', setScrollAction);
+      tabContent?.removeEventListener('scroll', (e: Event) => {
+        setScrollAction(e, setGroupDate, setGroupDateOn);
+      });
     };
   }, []);
 
diff --git a/src/pages/additional-service/face-auth/face-auth-page.tsx b/src/pages/additional-service/face-auth/face-auth-page.tsx
index 0f129f5..f315f91 100644
--- a/src/pages/additional-service/face-auth/face-auth-page.tsx
+++ b/src/pages/additional-service/face-auth/face-auth-page.tsx
@@ -4,7 +4,7 @@ import { DefaultRequestPagination, HeaderType, SortTypeKeys } from '@/entities/c
 import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } from '@/shared/constants/common';
 import { useEffect, useState } from 'react';
 import { useGroupDateOnStore, useGroupDateStore, useStore } from '@/shared/model/store';
 import { PATHS } from '@/shared/constants/paths';
@@ -238,62 +238,21 @@ export const FaceAuthPage = () => {
 		sortType
 	]);
 
-	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);
+		tabContent?.addEventListener('scroll', (e: Event) => {
+			setScrollAction(e, setGroupDate, setGroupDateOn);
+		});
 		
 		return () => {
 			ListScrollOn(false);
-			tabContent?.removeEventListener('scroll', setScrollAction);
+			tabContent?.removeEventListener('scroll', (e: Event) => {
+				setScrollAction(e, setGroupDate, setGroupDateOn);
+			});
 		};
 	}, []);
 
diff --git a/src/shared/constants/common.ts b/src/shared/constants/common.ts
index bfab8ab..dcc9c12 100644
--- a/src/shared/constants/common.ts
+++ b/src/shared/constants/common.ts
@@ -1,4 +1,5 @@
 import packageInfo from '../../../package.json';
+import { useGroupDateOnStore, useGroupDateStore } from '../model/store';
 
 export const IMAGE_ROOT = '/images';
 export const RELEASE_VERSION = packageInfo.version;
@@ -32,4 +33,53 @@ export const GetListHeight = () => {
     filterSectionHeight: filterSectionHeight,
     listHeight: innerHeight - headerHeight - summarySectionHeight - filterSectionHeight
   }
+};
+
+export 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;
+};
+
+export const setScrollAction = (
+  e: Event, 
+  setGroupDate: (groupDate: string) => void, 
+  setGroupDateOn: (groupDateOn: boolean) => void
+) => {
+  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('');
+  }
 };
\ No newline at end of file