- 부가서비스 스크롤 중 필터 체크 마크 추가

- 자금이체,알림톡 스크롤 중 DateGroup 누락 수정

src/entities/additional-service/model/account-holder-auth/types.ts

@@ -28,6 +28,7 @@ export interface AccountHolderAuthListProps {
   listItems: Array<AccountHolderAuthItem>;
   mid: string;
   setDetailData: (detailData: DetailData) => void;
+  filterUsed: boolean;
   onClickToOpenFilter: () => void;
   onClickToOpenDownloadBottomSheet: () => void;
 };

src/entities/additional-service/model/account-holder-search/types.ts

@@ -25,6 +25,7 @@ export interface AccountHolderSearchListProps {
   listItems: Array<AccountHolderSearchListItem>;
   mid: string;
   setDetailData: (detailData: DetailData) => void;
+  filterUsed: boolean;
   onClickToOpenFilter: () => void;
   onClickToOpenDownloadBottomSheet: () => void;
 };

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

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

src/entities/additional-service/model/key-in/types.ts

@@ -34,6 +34,7 @@ export interface KeyInPaymentListProps {
   additionalServiceCategory: AdditionalServiceCategory;
   listItems: Array<KeyInPaymentListItem>;
   mid?: string;
+  filterUsed: boolean;
   onClickToOpenFilter: () => void;
   onClickToOpenDownloadBottomSheet: () => void;
 };

src/entities/additional-service/model/link-pay/types.ts

@@ -105,6 +105,7 @@ export interface LinkPaymentHistoryListProps {
   listItems: Array<LinkPaymentHistoryListItem>;
   mid: string;
   setDetailData: (detailData: DetailData) => void;
+  filterUsed: boolean;
   onClickToOpenFilter: () => void;
   onClickToOpenDownloadBottomSheet: () => void;
 };
@@ -114,6 +115,7 @@ export interface LinkPaymentWaitListProps {
   listItems: Array<LinkPaymentWaitListItem>;
   mid: string;
   setDetailData: (detailData: DetailData) => void;
+  filterUsed: boolean;
   onClickToOpenFilter: () => void;
   onClickToOpenDownloadBottomSheet: () => void;
 };

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

@@ -19,6 +19,7 @@ export interface PayoutListProps {
   searchDateType:  PayoutSearchDateType
   mid: string;
   setDetailData: (detailData: DetailData) => void;
+  filterUsed: boolean;
   onClickToOpenFilter: () => void;
   onClickToOpenDownloadBottomSheet: () => void;
 };

src/entities/additional-service/model/sms-payment/types.ts

@@ -30,6 +30,7 @@ export interface SmsPaymentListProps {
   additionalServiceCategory: AdditionalServiceCategory;
   mid: string;
   onResendClick?: (seq: number) => void;
+  filterUsed: boolean;
   onClickToOpenFilter: () => void;
   onClickToOpenDownloadBottomSheet: () => void;
 };

src/entities/additional-service/ui/account-holder-auth/account-holder-auth-list.tsx

@@ -9,6 +9,7 @@ export const AccountHolderAuthList = ({
   listItems,
   mid,
   setDetailData,
+  filterUsed,
   onClickToOpenFilter,
   onClickToOpenDownloadBottomSheet
 }: AccountHolderAuthListProps) => {
@@ -37,12 +38,12 @@ export const AccountHolderAuthList = ({
             if (list.length > 0) {
               rs.push(
                 <ListDateGroup
-                  additionalServiceCategory={ additionalServiceCategory }
+                  additionalServiceCategory={additionalServiceCategory}
-                  key={ date + '-' + i }
+                  key={date + '-' + i}
-                  mid={ mid }
+                  mid={mid}
-                  date={ date }
+                  date={date}
-                  items={ list }
+                  items={list}
-                  setDetailData={ setDetailData }
+                  setDetailData={setDetailData}
                 ></ListDateGroup>
               );
             }
@@ -56,12 +57,12 @@ export const AccountHolderAuthList = ({
     if (list.length > 0) {
       rs.push(
         <ListDateGroup
-          additionalServiceCategory={ additionalServiceCategory }
+          additionalServiceCategory={additionalServiceCategory}
-          mid={ mid }
+          mid={mid}
-          key={ date + '-last' }
+          key={date + '-last'}
-          date={ date }
+          date={date}
-          items={ list }
+          items={list}
-          setDetailData={ setDetailData }
+          setDetailData={setDetailData}
         ></ListDateGroup>
       )
     }
@@ -88,30 +89,33 @@ export const AccountHolderAuthList = ({
 
   return (
     <>
-      { groupDateOn &&
+      {groupDateOn &&
-      <div className="summary-amount scroll-group-date">
+        <div className="summary-amount scroll-group-date">
-        <span className="amount-text">{ groupDate }</span>
+          <span className="amount-text">{groupDate}</span>
-        <div className="summary-actions">
+          <div className="summary-actions">
-          <button className="filter-btn">
+            <button className="filter-btn">
-            <img
+              <img
-              src={ IMAGE_ROOT + '/ico_setting.svg' }
+                src={IMAGE_ROOT + '/ico_setting.svg'}
-              alt={t('transaction.searchOptions')}
+                alt={t('transaction.searchOptions')}
-              onClick={ onClickToOpenFilter }
+                onClick={onClickToOpenFilter}
-            />
+              />
-          </button>
+              {filterUsed &&
-          <button className="download-btn">
+                <span className="notification-badge2"></span>
-            <img
+              }
-              src={ IMAGE_ROOT + '/ico_download.svg' }
+            </button>
-              alt={t('transaction.download')}
+            <button className="download-btn">
-              onClick={ onClickToOpenDownloadBottomSheet }
+              <img
-            />
+                src={IMAGE_ROOT + '/ico_download.svg'}
-          </button>
+                alt={t('transaction.download')}
+                onClick={onClickToOpenDownloadBottomSheet}
+              />
+            </button>
+          </div>
         </div>
-      </div>
       }
       <div
         className="transaction-list"
-        style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
+        style={{ height: (listHeight > 0) ? listHeight + 'px' : 'unset' }}
       >
         {getListDateGroup()}
       </div>

src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx

@@ -13,6 +13,7 @@ export const AccountHolderSearchList = ({
 	listItems,
 	mid,
 	setDetailData,
+	filterUsed,
 	onClickToOpenFilter,
   onClickToOpenDownloadBottomSheet
 }: AccountHolderSearchListProps) => {
@@ -111,6 +112,9 @@ export const AccountHolderSearchList = ({
 							alt={t('transaction.searchOptions')}
 							onClick={ onClickToOpenFilter }
 						/>
+						{ filterUsed &&
+						<span className="notification-badge2"></span>
+						}
 					</button>
 					<button className="download-btn">
 						<img
@@ -124,7 +128,6 @@ export const AccountHolderSearchList = ({
 			}
 			<section 
 				className="transaction-list"
-				style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
 			>
 				{ getListDateGroup() }
 			</section>

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

@@ -10,13 +10,14 @@ export const ArsList = ({
 	listItems,
 	mid,
 	setDetailData,
+	filterUsed,
 	onClickToOpenFilter,
 	onClickToOpenDownloadBottomSheet
 }: ArsListProps) => {
 	const { t, i18n } = useTranslation();
 
 	const [groupDate, setGroupDate] = useState<string>('');
-  const [groupDateOn, setGroupDateOn] = useState<boolean>(false);
+	const [groupDateOn, setGroupDateOn] = useState<boolean>(false);
 
 	const [listHeight, setListHeight] = useState<number>(0);
 
@@ -24,17 +25,17 @@ export const ArsList = ({
 		let rs = [];
 		let date = '';
 		let list: Array<ListItemProps> = [];
-		for(let i=0;i<listItems.length;i++){
+		for (let i = 0; i < listItems.length; i++) {
 			let item = listItems[i];
-			if(!!item){
+			if (!!item) {
 				let orderDate = item?.orderDate || '';
 				let itemDate = orderDate.substring(0, 8);
-				if(!!itemDate){
+				if (!!itemDate) {
-					if(i === 0){
+					if (i === 0) {
 						date = itemDate;
 					}
-					if(date !== itemDate){
+					if (date !== itemDate) {
-						if(list.length > 0){
+						if (list.length > 0) {
 							rs.push(
 								<ListDateGroup
 									additionalServiceCategory={additionalServiceCategory}
@@ -53,7 +54,7 @@ export const ArsList = ({
 				}
 			}
 		}
-		if(list.length > 0){
+		if (list.length > 0) {
 			rs.push(
 				<ListDateGroup
 					additionalServiceCategory={additionalServiceCategory}
@@ -88,32 +89,35 @@ export const ArsList = ({
 
 	return (
 		<>
-			{ groupDateOn &&
+			{groupDateOn &&
-			<div className="summary-amount scroll-group-date">
+				<div className="summary-amount scroll-group-date">
-				<span className="amount-text">{ groupDate }</span>
+					<span className="amount-text">{groupDate}</span>
-				<div className="summary-actions">
+					<div className="summary-actions">
-					<button className="filter-btn">
+						<button className="filter-btn">
-						<img
+							<img
-							src={ IMAGE_ROOT + '/ico_setting.svg' }
+								src={IMAGE_ROOT + '/ico_setting.svg'}
-							alt={t('transaction.searchOptions')}
+								alt={t('transaction.searchOptions')}
-							onClick={ onClickToOpenFilter }
+								onClick={onClickToOpenFilter}
-						/>
+							/>
-					</button>
+							{ filterUsed &&
-					<button className="download-btn">
+								<span className="notification-badge2"></span>
-						<img
+							}
-							src={ IMAGE_ROOT + '/ico_download.svg' }
+						</button>
-							alt={t('transaction.download')}
+						<button className="download-btn">
-							onClick={ onClickToOpenDownloadBottomSheet }
+							<img
-						/>
+								src={IMAGE_ROOT + '/ico_download.svg'}
-					</button>
+								alt={t('transaction.download')}
+								onClick={onClickToOpenDownloadBottomSheet}
+							/>
+						</button>
+					</div>
 				</div>
-			</div>
 			}
 			<section
 				className="transaction-list"
-				style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
+				style={{ height: (listHeight > 0) ? listHeight + 'px' : 'unset' }}
 			>
-				{ getListDateGroup() }
+				{getListDateGroup()}
 			</section>
 		</>
 	);

src/entities/additional-service/ui/fund-account/result-list-wrap.tsx

@@ -296,16 +296,24 @@ export const FundAccountResultListWrap = () => {
     let heightList = GetListHeight();
     setListHeight(heightList.listHeight);
 
-    let tabContent = document.querySelector('.tab-content');
+    // DOM이 렌더링된 후에 이벤트 리스너 등록
-    tabContent?.addEventListener('scroll', (e: Event) => {
+    const timer = setTimeout(() => {
-      setScrollAction(e, setGroupDate, setGroupDateOn);
+      let tabContent = document.querySelector('.tab-content');
-    });
+
+      const handleScroll = (e: Event) => {
+        setScrollAction(e, setGroupDate, setGroupDateOn);
+      };
+
+      tabContent?.addEventListener('scroll', handleScroll);
+
+      return () => {
+        tabContent?.removeEventListener('scroll', handleScroll);
+      };
+    }, 100);
 
     return () => {
       ListScrollOn(false);
-      tabContent?.removeEventListener('scroll', (e: Event) => {
+      clearTimeout(timer);
-        setScrollAction(e, setGroupDate, setGroupDateOn);
-      });
     };
   }, []);
 
@@ -425,6 +433,9 @@ export const FundAccountResultListWrap = () => {
                 alt={t('transaction.searchOptions')}
                 onClick={onClickToOpenFilter}
               />
+              {filterUsed &&
+                <span className="notification-badge2"></span>
+              }
             </button>
             <button className="download-btn">
               <img
@@ -438,7 +449,6 @@ export const FundAccountResultListWrap = () => {
       }
       <section
         className="transaction-list"
-        style={{ height: (listHeight > 0) ? listHeight + 'px' : 'unset' }}
       >
         {getListDateGroup()}
       </section>

src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx

@@ -78,8 +78,8 @@ export const FundAccountTransferListWrap = () => {
   const { mutateAsync: extensionFundAccountBalance } = useExtensionFundAccountBalanceMutation();
   const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
     entries.forEach((entry: IntersectionObserverEntry) => {
-      if(entry.isIntersecting){
+      if (entry.isIntersecting) {
-        if(onActionIntersect && !!pageParam.cursor){
+        if (onActionIntersect && !!pageParam.cursor) {
           setOnActionIntersect(false);
           callList('page');
         }
@@ -87,7 +87,7 @@ export const FundAccountTransferListWrap = () => {
     });
   };
 
-	const { setTarget } = useIntersectionObserver({ 
+  const { setTarget } = useIntersectionObserver({
     threshold: 1,
     onIntersect
   });
@@ -103,34 +103,34 @@ export const FundAccountTransferListWrap = () => {
       toDate: toDate,
       resultStatus: status,
       page: {
-				...pageParam,
+        ...pageParam,
-				...{ sortType: sortType }
+        ...{ sortType: sortType }
-			}
+      }
     };
-    if(type !== 'page' && listParams.page){
+    if (type !== 'page' && listParams.page) {
       listParams.page.cursor = null;
     }
 
     extensionFundAccountTransferList(listParams).then((rs: any) => {
-      if(type === 'page'){
+      if (type === 'page') {
         setListItems([
           ...listItems,
           ...rs.content
         ]);
       }
-      else{
+      else {
         setListItems(rs.content);
       }
-			if(rs.hasNext
+      if (rs.hasNext
         && rs.nextCursor !== pageParam.cursor
         && rs.content.length === DEFAULT_PAGE_PARAM.size
-      ){
+      ) {
         setPageParam({
           ...pageParam,
           ...{ cursor: rs.nextCursor }
         });
       }
-      else{
+      else {
         setPageParam({
           ...pageParam,
           ...{ cursor: null }
@@ -142,7 +142,7 @@ export const FundAccountTransferListWrap = () => {
         && rs.content.length === DEFAULT_PAGE_PARAM.size
       );
     }).catch((e: any) => {
-      if(e.response?.data?.error?.message){
+      if (e.response?.data?.error?.message) {
         snackBar(e.response?.data?.error?.message);
         return;
       }
@@ -160,18 +160,18 @@ export const FundAccountTransferListWrap = () => {
 
   const setDetailData = (detailData: DetailData) => {
     setDetailOn(detailData.detailOn);
-    if(detailData.seq){
+    if (detailData.seq) {
       setDetailSeq(detailData.seq);
     }
   };
 
   const onRequestDownloadExcel = (
-		selectedMode: DownloadSelectedMode,
+    selectedMode: DownloadSelectedMode,
-		userEmail?: string
+    userEmail?: string
-	) => {
+  ) => {
-    if(selectedMode === DownloadSelectedMode.EMAIL
+    if (selectedMode === DownloadSelectedMode.EMAIL
       && userEmail
-    ){
+    ) {
       const params: ExtensionFundAccountTransferExcelParams = {
         mid: mid,
         email: userEmail,
@@ -181,7 +181,7 @@ export const FundAccountTransferListWrap = () => {
       extensionFundAccountTransferExcel(params).then((rs: ExtensionFundAccountTransferExcelResponse) => {
         console.log('Excel Download Status:', rs.status);
       }).catch((e: any) => {
-        if(e.response?.data?.error?.message){
+        if (e.response?.data?.error?.message) {
           snackBar(e.response?.data?.error?.message);
           return;
         }
@@ -196,7 +196,7 @@ export const FundAccountTransferListWrap = () => {
     extensionFundAccountBalance(params).then((rs: ExtensionFundAccountBalanceResponse) => {
       setBalance(rs.balance);
     }).catch((e: any) => {
-      if(e.response?.data?.error?.message){
+      if (e.response?.data?.error?.message) {
         snackBar(e.response?.data?.error?.message);
         return;
       }
@@ -232,11 +232,11 @@ export const FundAccountTransferListWrap = () => {
             if (list.length > 0) {
               rs.push(
                 <ListDateGroup
-                  additionalServiceCategory={ AdditionalServiceCategory.FundAccountTransfer }
+                  additionalServiceCategory={AdditionalServiceCategory.FundAccountTransfer}
-                  key={ date + '-' + i }
+                  key={date + '-' + i}
-                  date={ date }
+                  date={date}
-                  items={ list }
+                  items={list}
-                  setDetailData={ setDetailData }
+                  setDetailData={setDetailData}
                 ></ListDateGroup>
               );
             }
@@ -250,12 +250,12 @@ export const FundAccountTransferListWrap = () => {
     if (list.length > 0) {
       rs.push(
         <ListDateGroup
-          additionalServiceCategory={ AdditionalServiceCategory.FundAccountTransfer }
+          additionalServiceCategory={AdditionalServiceCategory.FundAccountTransfer}
-          mid={ mid }
+          mid={mid}
-          key={ date + '-last' }
+          key={date + '-last'}
-          date={ date }
+          date={date}
-          items={ list }
+          items={list}
-          setDetailData={ setDetailData }
+          setDetailData={setDetailData}
         ></ListDateGroup>
       );
     }
@@ -272,17 +272,17 @@ export const FundAccountTransferListWrap = () => {
 
   const checkUsedFilter = () => {
     let rs: boolean = true;
-    if(searchCl === defaultParams.searchCl
+    if (searchCl === defaultParams.searchCl
       && searchValue === defaultParams.searchValue
       && fromDate === defaultParams.fromDate
       && toDate === defaultParams.toDate
       && status === defaultParams.status
       && bankCode === defaultParams.bankCode
-    ){
+    ) {
-      rs =  false;
+      rs = false;
     }
     setFilterUsed(rs);
-	};
+  };
 
   useEffect(() => {
     callList();
@@ -303,16 +303,24 @@ export const FundAccountTransferListWrap = () => {
     let heightList = GetListHeight();
     setListHeight(heightList.listHeight);
 
-    let tabContent = document.querySelector('.tab-content');
+    // DOM이 렌더링된 후에 이벤트 리스너 등록
-    tabContent?.addEventListener('scroll', (e: Event) => {
+    const timer = setTimeout(() => {
-      setScrollAction(e, setGroupDate, setGroupDateOn);
+      let tabContent = document.querySelector('.tab-content');
-    });
+
+      const handleScroll = (e: Event) => {
+        setScrollAction(e, setGroupDate, setGroupDateOn);
+      };
+
+      tabContent?.addEventListener('scroll', handleScroll);
+
+      return () => {
+        tabContent?.removeEventListener('scroll', handleScroll);
+      };
+    }, 100);
 
     return () => {
       ListScrollOn(false);
-      tabContent?.removeEventListener('scroll', (e: Event) => {
+      clearTimeout(timer);
-        setScrollAction(e, setGroupDate, setGroupDateOn);
-      });
     };
   }, []);
 
@@ -330,13 +338,13 @@ export const FundAccountTransferListWrap = () => {
             <button
               className="filter-btn"
               aria-label="필터"
-              onClick={ onClickToOpenFilter }
+              onClick={onClickToOpenFilter}
             >
               <img
                 src={IMAGE_ROOT + '/ico_setting.svg'}
                 alt="검색옵션"
               />
-              { filterUsed &&
+              {filterUsed &&
                 <span className="notification-badge2"></span>
               }
             </button>
@@ -344,7 +352,7 @@ export const FundAccountTransferListWrap = () => {
           <button
             className="download-btn"
             aria-label="다운로드"
-            onClick={ onClickToOpenDownloadBottomSheet }
+            onClick={onClickToOpenDownloadBottomSheet}
           >
             <img
               src={IMAGE_ROOT + '/ico_download.svg'}
@@ -386,34 +394,36 @@ export const FundAccountTransferListWrap = () => {
           </div>
         </div>
       </section>
-      { groupDateOn &&
+      {groupDateOn &&
-      <div className="summary-amount scroll-group-date">
+        <div className="summary-amount scroll-group-date">
-        <span className="amount-text">{ groupDate }</span>
+          <span className="amount-text">{groupDate}</span>
-        <div className="summary-actions">
+          <div className="summary-actions">
-          <button className="filter-btn">
+            <button className="filter-btn">
-            <img
+              <img
-              src={ IMAGE_ROOT + '/ico_setting.svg' }
+                src={IMAGE_ROOT + '/ico_setting.svg'}
-              alt={t('transaction.searchOptions')}
+                alt={t('transaction.searchOptions')}
-              onClick={ onClickToOpenFilter }
+                onClick={onClickToOpenFilter}
-            />
+              />
-          </button>
+              {filterUsed &&
-          <button className="download-btn">
+                <span className="notification-badge2"></span>
-            <img
+              }
-              src={ IMAGE_ROOT + '/ico_download.svg' }
+            </button>
-              alt={t('transaction.download')}
+            <button className="download-btn">
-              onClick={ onClickToOpenDownloadBottomSheet }
+              <img
-            />
+                src={IMAGE_ROOT + '/ico_download.svg'}
-          </button>
+                alt={t('transaction.download')}
+                onClick={onClickToOpenDownloadBottomSheet}
+              />
+            </button>
+          </div>
         </div>
-      </div>
       }
       <section
         className="transaction-list pb-86"
-        style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
       >
-        { getListDateGroup() }
+        {getListDateGroup()}
       </section>
-      <div ref={ setTarget }></div>
+      <div ref={setTarget}></div>
       <div className="apply-row">
         <button
           className="btn-50 btn-blue flex-1"
@@ -439,17 +449,17 @@ export const FundAccountTransferListWrap = () => {
         setStatus={setStatus}
       ></FundAccountTransactionFilter>
       <FundAccountTransferDetail
-        detailOn={ detailOn }
+        detailOn={detailOn}
-        setDetailOn={ setDetailOn }
+        setDetailOn={setDetailOn}
-        seq={ detailSeq }
+        seq={detailSeq}
       ></FundAccountTransferDetail>
-      { !!downloadBottomSheetOn && 
+      {!!downloadBottomSheetOn &&
         <DownloadBottomSheet
-          bottomSheetOn={ downloadBottomSheetOn }
+          bottomSheetOn={downloadBottomSheetOn}
-          setBottomSheetOn={ setDownloadBottomSheetOn }
+          setBottomSheetOn={setDownloadBottomSheetOn}
-          imageMode={ false }
+          imageMode={false}
-          emailMode={ true }
+          emailMode={true}
-          sendRequest={ onRequestDownloadExcel }
+          sendRequest={onRequestDownloadExcel}
         ></DownloadBottomSheet>
       }
     </>

src/entities/additional-service/ui/key-in-payment/key-in-payment-list.tsx

@@ -12,6 +12,7 @@ export const KeyInPaymentList = ({
   additionalServiceCategory,
   listItems,
   mid,
+  filterUsed,
   onClickToOpenFilter,
   onClickToOpenDownloadBottomSheet
 }: KeyInPaymentListProps) => {
@@ -96,30 +97,32 @@ export const KeyInPaymentList = ({
 
   return (
     <>
-      { groupDateOn &&
+      {groupDateOn &&
-      <div className="summary-amount scroll-group-date">
+        <div className="summary-amount scroll-group-date">
-        <span className="amount-text">{ groupDate }</span>
+          <span className="amount-text">{groupDate}</span>
-        <div className="summary-actions">
+          <div className="summary-actions">
-          <button className="filter-btn">
+            <button className="filter-btn">
-            <img
+              <img
-              src={ IMAGE_ROOT + '/ico_setting.svg' }
+                src={IMAGE_ROOT + '/ico_setting.svg'}
-              alt={t('transaction.searchOptions')}
+                alt={t('transaction.searchOptions')}
-              onClick={ onClickToOpenFilter }
+                onClick={onClickToOpenFilter}
-            />
+              />
-          </button>
+              {filterUsed &&
-          <button className="download-btn">
+                <span className="notification-badge2"></span>
-            <img
+              }
-              src={ IMAGE_ROOT + '/ico_download.svg' }
+            </button>
-              alt={t('transaction.download')}
+            <button className="download-btn">
-              onClick={ onClickToOpenDownloadBottomSheet }
+              <img
-            />
+                src={IMAGE_ROOT + '/ico_download.svg'}
-          </button>
+                alt={t('transaction.download')}
+                onClick={onClickToOpenDownloadBottomSheet}
+              />
+            </button>
+          </div>
         </div>
-      </div>
       }
       <section
         className="transaction-list"
-        style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
       >
         {getListDateGroup()}
       </section>

src/entities/additional-service/ui/link-payment/link-payment-history-list.tsx

@@ -9,6 +9,7 @@ export const LinkPaymentHistoryList = ({
   listItems,
   mid,
   setDetailData,
+  filterUsed,
   onClickToOpenFilter,
   onClickToOpenDownloadBottomSheet
 }: LinkPaymentHistoryListProps) => {
@@ -36,12 +37,12 @@ export const LinkPaymentHistoryList = ({
             if (list.length > 0) {
               rs.push(
                 <ListDateGroup
-                  additionalServiceCategory={ additionalServiceCategory }
+                  additionalServiceCategory={additionalServiceCategory}
-                  mid={ mid }
+                  mid={mid}
-                  key={ date + '-' + i }
+                  key={date + '-' + i}
-                  date={ date }
+                  date={date}
-                  items={ list }
+                  items={list}
-                  setDetailData={ setDetailData }
+                  setDetailData={setDetailData}
                 ></ListDateGroup>
               );
             }
@@ -55,12 +56,12 @@ export const LinkPaymentHistoryList = ({
     if (list.length > 0) {
       rs.push(
         <ListDateGroup
-          additionalServiceCategory={ additionalServiceCategory }
+          additionalServiceCategory={additionalServiceCategory}
-          mid={ mid }
+          mid={mid}
-          key={ date + '-last' }
+          key={date + '-last'}
-          date={ date }
+          date={date}
-          items={ list }
+          items={list}
-          setDetailData={ setDetailData }
+          setDetailData={setDetailData}
         ></ListDateGroup>
       );
     }
@@ -87,30 +88,32 @@ export const LinkPaymentHistoryList = ({
 
   return (
     <>
-      { groupDateOn &&
+      {groupDateOn &&
-      <div className="summary-amount scroll-group-date">
+        <div className="summary-amount scroll-group-date">
-        <span className="amount-text">{ groupDate }</span>
+          <span className="amount-text">{groupDate}</span>
-        <div className="summary-actions">
+          <div className="summary-actions">
-          <button className="filter-btn">
+            <button className="filter-btn">
-            <img
+              <img
-              src={ IMAGE_ROOT + '/ico_setting.svg' }
+                src={IMAGE_ROOT + '/ico_setting.svg'}
-              alt={t('transaction.searchOptions')}
+                alt={t('transaction.searchOptions')}
-              onClick={ onClickToOpenFilter }
+                onClick={onClickToOpenFilter}
-            />
+              />
-          </button>
+              {filterUsed &&
-          <button className="download-btn">
+                <span className="notification-badge2"></span>
-            <img
+              }
-              src={ IMAGE_ROOT + '/ico_download.svg' }
+            </button>
-              alt={t('transaction.download')}
+            <button className="download-btn">
-              onClick={ onClickToOpenDownloadBottomSheet }
+              <img
-            />
+                src={IMAGE_ROOT + '/ico_download.svg'}
-          </button>
+                alt={t('transaction.download')}
+                onClick={onClickToOpenDownloadBottomSheet}
+              />
+            </button>
+          </div>
         </div>
-      </div>
       }
       <div
         className="transaction-list"
-        style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
       >
         {getListDateGroup()}
       </div>

src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx

@@ -316,6 +316,7 @@ export const LinkPaymentHistoryWrap = () => {
 				additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
 				mid={mid}
 				setDetailData={setDetailData}
+				filterUsed={filterUsed}
 				onClickToOpenFilter={onClickToOpenFilter}
 				onClickToOpenDownloadBottomSheet={onClickToOpenDownloadBottomSheet}
 			></LinkPaymentHistoryList>

src/entities/additional-service/ui/link-payment/link-payment-wait-list.tsx

@@ -9,6 +9,7 @@ export const LinkPaymentWaitList = ({
   listItems,
   mid,
   setDetailData,
+  filterUsed,
   onClickToOpenFilter,
   onClickToOpenDownloadBottomSheet
 }: LinkPaymentWaitListProps) => {
@@ -36,12 +37,12 @@ export const LinkPaymentWaitList = ({
             if (list.length > 0) {
               rs.push(
                 <ListDateGroup
-                  additionalServiceCategory={ additionalServiceCategory }
+                  additionalServiceCategory={additionalServiceCategory}
-                  key={ date + '-' + i }
+                  key={date + '-' + i}
-                  mid={ mid }
+                  mid={mid}
-                  date={ date }
+                  date={date}
-                  items={ list }
+                  items={list}
-                  setDetailData={ setDetailData }
+                  setDetailData={setDetailData}
                 ></ListDateGroup>
               );
             }
@@ -55,12 +56,12 @@ export const LinkPaymentWaitList = ({
     if (list.length > 0) {
       rs.push(
         <ListDateGroup
-          additionalServiceCategory={ additionalServiceCategory }
+          additionalServiceCategory={additionalServiceCategory}
-          mid={ mid }
+          mid={mid}
-          key={ date + '-last' }
+          key={date + '-last'}
-          date={ date }
+          date={date}
-          items={ list }
+          items={list}
-          setDetailData={ setDetailData }
+          setDetailData={setDetailData}
         ></ListDateGroup>
       );
     }
@@ -87,30 +88,32 @@ export const LinkPaymentWaitList = ({
 
   return (
     <>
-      { groupDateOn &&
+      {groupDateOn &&
-      <div className="summary-amount scroll-group-date">
+        <div className="summary-amount scroll-group-date">
-        <span className="amount-text">{ groupDate }</span>
+          <span className="amount-text">{groupDate}</span>
-        <div className="summary-actions">
+          <div className="summary-actions">
-          <button className="filter-btn">
+            <button className="filter-btn">
-            <img
+              <img
-              src={ IMAGE_ROOT + '/ico_setting.svg' }
+                src={IMAGE_ROOT + '/ico_setting.svg'}
-              alt={t('transaction.searchOptions')}
+                alt={t('transaction.searchOptions')}
-              onClick={ onClickToOpenFilter }
+                onClick={onClickToOpenFilter}
-            />
+              />
-          </button>
+              {filterUsed &&
-          <button className="download-btn">
+                <span className="notification-badge2"></span>
-            <img
+              }
-              src={ IMAGE_ROOT + '/ico_download.svg' }
+            </button>
-              alt={t('transaction.download')}
+            <button className="download-btn">
-              onClick={ onClickToOpenDownloadBottomSheet }
+              <img
-            />
+                src={IMAGE_ROOT + '/ico_download.svg'}
-          </button>
+                alt={t('transaction.download')}
+                onClick={onClickToOpenDownloadBottomSheet}
+              />
+            </button>
+          </div>
         </div>
-      </div>
       }
       <div
         className="transaction-list"
-        style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
       >
         {getListDateGroup()}
       </div>

src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx

@@ -281,6 +281,7 @@ export const LinkPaymentWaitSendWrap = () => {
         additionalServiceCategory={AdditionalServiceCategory.LinkPaymentWait}
         mid={mid}
         setDetailData={setDetailData}
+        filterUsed={filterUsed}
         onClickToOpenFilter={onClickToOpenFilter}
         onClickToOpenDownloadBottomSheet={onClickToOpenDownloadBottomSheet}
       ></LinkPaymentWaitList>

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

@@ -10,13 +10,14 @@ export const PayoutList = ({
 	searchDateType,
 	mid,
 	setDetailData,
-  onClickToOpenFilter,
+	filterUsed,
-  onClickToOpenDownloadBottomSheet
+	onClickToOpenFilter,
+	onClickToOpenDownloadBottomSheet
 }: PayoutListProps) => {
 	const { t, i18n } = useTranslation();
 
 	const [groupDate, setGroupDate] = useState<string>('');
-  const [groupDateOn, setGroupDateOn] = useState<boolean>(false);
+	const [groupDateOn, setGroupDateOn] = useState<boolean>(false);
 
 	const [listHeight, setListHeight] = useState<number>(0);
 
@@ -24,20 +25,20 @@ export const PayoutList = ({
 		let rs = [];
 		let date = '';
 		let list = [];
-		for (let i=0;i<listItems.length;i++){
+		for (let i = 0; i < listItems.length; i++) {
 			let itemDateStr = '';
-			if(searchDateType === PayoutSearchDateType.REQUEST_DATE){
+			if (searchDateType === PayoutSearchDateType.REQUEST_DATE) {
 				itemDateStr = listItems[i]?.requestDate || '';
 			}
-			else if(searchDateType === PayoutSearchDateType.SETTLEMENT_DATE){
+			else if (searchDateType === PayoutSearchDateType.SETTLEMENT_DATE) {
 				itemDateStr = listItems[i]?.settlementDate || '';
 			}
 			let itemDate = itemDateStr.substring(0, 8);
-			if(i === 0){
+			if (i === 0) {
 				date = itemDate;
 			}
-			if(date !== itemDate){
+			if (date !== itemDate) {
-				if(list.length > 0){
+				if (list.length > 0) {
 					rs.push(
 						<ListDateGroup
 							additionalServiceCategory={additionalServiceCategory}
@@ -54,7 +55,7 @@ export const PayoutList = ({
 			}
 			list.push(listItems[i] as any);
 		}
-		if(list.length > 0){
+		if (list.length > 0) {
 			rs.push(
 				<ListDateGroup
 					additionalServiceCategory={additionalServiceCategory}
@@ -89,30 +90,32 @@ export const PayoutList = ({
 
 	return (
 		<>
-			{ groupDateOn &&
+			{groupDateOn &&
-			<div className="summary-amount scroll-group-date">
+				<div className="summary-amount scroll-group-date">
-				<span className="amount-text">{ groupDate }</span>
+					<span className="amount-text">{groupDate}</span>
-				<div className="summary-actions">
+					<div className="summary-actions">
-					<button className="filter-btn">
+						<button className="filter-btn">
-						<img
+							<img
-							src={ IMAGE_ROOT + '/ico_setting.svg' }
+								src={IMAGE_ROOT + '/ico_setting.svg'}
-							alt={t('transaction.searchOptions')}
+								alt={t('transaction.searchOptions')}
-							onClick={ onClickToOpenFilter }
+								onClick={onClickToOpenFilter}
-						/>
+							/>
-					</button>
+							{filterUsed &&
-					<button className="download-btn">
+								<span className="notification-badge2"></span>
-						<img
+							}
-							src={ IMAGE_ROOT + '/ico_download.svg' }
+						</button>
-							alt={t('transaction.download')}
+						<button className="download-btn">
-							onClick={ onClickToOpenDownloadBottomSheet }
+							<img
-						/>
+								src={IMAGE_ROOT + '/ico_download.svg'}
-					</button>
+								alt={t('transaction.download')}
+								onClick={onClickToOpenDownloadBottomSheet}
+							/>
+						</button>
+					</div>
 				</div>
-			</div>
 			}
 			<section
 				className="transaction-list"
-				style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
 			>
 				{getListDateGroup()}
 			</section>

src/entities/additional-service/ui/sms-payment/sms-payment-list.tsx

@@ -5,12 +5,13 @@ import { useEffect, useState } from 'react';
 import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } from '@/shared/constants/common';
 
 export const SmsPaymentList = ({
-    listItems,
+  listItems,
-    additionalServiceCategory,
+  additionalServiceCategory,
-    mid,
+  mid,
-    onResendClick,
+  onResendClick,
-    onClickToOpenFilter,
+  filterUsed,
-    onClickToOpenDownloadBottomSheet
+  onClickToOpenFilter,
+  onClickToOpenDownloadBottomSheet
 }: SmsPaymentListProps) => {
   const { t, i18n } = useTranslation();
 
@@ -25,23 +26,23 @@ export const SmsPaymentList = ({
     let list = [];
     for (let i = 0; i < listItems.length; i++) {
       let items = listItems[i];
-      if(!!items) {
+      if (!!items) {
         let sendDate = items?.sendDate;
         sendDate = sendDate?.substring(0, 8);
-        if(!!sendDate) {
+        if (!!sendDate) {
-          if(i === 0) {
+          if (i === 0) {
             date = sendDate;
           }
-          if(date !== sendDate) {
+          if (date !== sendDate) {
-            if(list.length > 0) {
+            if (list.length > 0) {
               rs.push(
                 <ListDateGroup
-                onResendClick={onResendClick}
+                  onResendClick={onResendClick}
-                additionalServiceCategory={additionalServiceCategory}
+                  additionalServiceCategory={additionalServiceCategory}
-                key={ date + '-' + i}
+                  key={date + '-' + i}
-                mid={mid}
+                  mid={mid}
-                date={ date }
+                  date={date}
-                items={ list }
+                  items={list}
                 ></ListDateGroup>
               );
             }
@@ -87,30 +88,32 @@ export const SmsPaymentList = ({
 
   return (
     <>
-      { groupDateOn &&
+      {groupDateOn &&
-      <div className="summary-amount scroll-group-date">
+        <div className="summary-amount scroll-group-date">
-        <span className="amount-text">{ groupDate }</span>
+          <span className="amount-text">{groupDate}</span>
-        <div className="summary-actions">
+          <div className="summary-actions">
-          <button className="filter-btn">
+            <button className="filter-btn">
-            <img
+              <img
-              src={ IMAGE_ROOT + '/ico_setting.svg' }
+                src={IMAGE_ROOT + '/ico_setting.svg'}
-              alt={t('transaction.searchOptions')}
+                alt={t('transaction.searchOptions')}
-              onClick={ onClickToOpenFilter }
+                onClick={onClickToOpenFilter}
-            />
+              />
-          </button>
+              {filterUsed &&
-          <button className="download-btn">
+                <span className="notification-badge2"></span>
-            <img
+              }
-              src={ IMAGE_ROOT + '/ico_download.svg' }
+            </button>
-              alt={t('transaction.download')}
+            <button className="download-btn">
-              onClick={ onClickToOpenDownloadBottomSheet }
+              <img
-            />
+                src={IMAGE_ROOT + '/ico_download.svg'}
-          </button>
+                alt={t('transaction.download')}
+                onClick={onClickToOpenDownloadBottomSheet}
+              />
+            </button>
+          </div>
         </div>
-      </div>
       }
       <section
         className="transaction-list"
-        style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
       >
         {getListDateGroup()}
       </section>

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

@@ -291,6 +291,7 @@ export const AccountHolderAuthPage = () => {
               listItems={listItems}
               mid={mid}
               setDetailData={setDetailData}
+              filterUsed={ filterUsed }
               onClickToOpenFilter={ onClickToOpenFilter }
               onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
             ></AccountHolderAuthList>

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

@@ -311,6 +311,7 @@ export const AccountHolderSearchPage = () => {
               listItems={listItems}
               mid={mid}
               setDetailData={setDetailData}
+              filterUsed={filterUsed}
               onClickToOpenFilter={ onClickToOpenFilter }
               onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
             ></AccountHolderSearchList>

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

@@ -324,16 +324,24 @@ export const AlimtalkListPage = () => {
     let heightList = GetListHeight();
     setListHeight(heightList.listHeight);
 
-    let tabContent = document.querySelector('.tab-content');
+    // DOM이 렌더링된 후에 이벤트 리스너 등록
-    tabContent?.addEventListener('scroll', (e: Event) => {
+    const timer = setTimeout(() => {
-      setScrollAction(e, setGroupDate, setGroupDateOn);
+      let tabContent = document.querySelector('.tab-content');
-    });
+
+      const handleScroll = (e: Event) => {
+        setScrollAction(e, setGroupDate, setGroupDateOn);
+      };
+
+      tabContent?.addEventListener('scroll', handleScroll);
+
+      return () => {
+        tabContent?.removeEventListener('scroll', handleScroll);
+      };
+    }, 100);
 
     return () => {
       ListScrollOn(false);
-      tabContent?.removeEventListener('scroll', (e: Event) => {
+      clearTimeout(timer);
-        setScrollAction(e, setGroupDate, setGroupDateOn);
-      });
     };
   }, []);
 
@@ -393,6 +401,9 @@ export const AlimtalkListPage = () => {
                     alt={t('transaction.searchOptions')}
                     onClick={ onClickToOpenFilter }
                   />
+                    { filterUsed &&
+                      <span className="notification-badge2"></span>
+                    }
                 </button>
                 <button className="download-btn">
                   <img

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

@@ -321,6 +321,7 @@ export const ArsListPage = () => {
               listItems={listItems}
               mid={mid}
               setDetailData={setDetailData}
+              filterUsed={filterUsed}
               onClickToOpenFilter={onClickToOpenFilter}
               onClickToOpenDownloadBottomSheet={onClickToOpenDownloadBottomSheet}
             ></ArsList>

src/pages/additional-service/face-auth/face-auth-page.tsx

@@ -78,8 +78,8 @@ export const FaceAuthPage = () => {
 	const { mutateAsync: downloadExcel } = useExtensionFaceAuthDownloadExcelMutation();
 	const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
 		entries.forEach((entry: IntersectionObserverEntry) => {
-			if(entry.isIntersecting){
+			if (entry.isIntersecting) {
-				if(onActionIntersect && !!pageParam.cursor){
+				if (onActionIntersect && !!pageParam.cursor) {
 					setOnActionIntersect(false);
 					callList('page');
 				}
@@ -105,42 +105,42 @@ export const FaceAuthPage = () => {
 				...{ sortType: sortType }
 			}
 		};
-		if(type !== 'page' && listParams.page){
+		if (type !== 'page' && listParams.page) {
-      listParams.page.cursor = null;
+			listParams.page.cursor = null;
-    }
+		}
 
 		faceAuthHistoryList(listParams).then((rs: ExtensionFaceAuthListResponse) => {
-			if(type === 'page'){
+			if (type === 'page') {
-        setListItems([
+				setListItems([
-          ...listItems,
+					...listItems,
-          ...rs.content
+					...rs.content
-        ]);
+				]);
-      }
+			}
-      else{
+			else {
-        setListItems(rs.content);
+				setListItems(rs.content);
-      }
+			}
-			if(rs.hasNext 
+			if (rs.hasNext
 				&& rs.nextCursor !== pageParam.cursor
-        && rs.content.length === DEFAULT_PAGE_PARAM.size
+				&& rs.content.length === DEFAULT_PAGE_PARAM.size
-      ){
+			) {
-        setPageParam({
+				setPageParam({
-          ...pageParam,
+					...pageParam,
-          ...{ cursor: rs.nextCursor }
+					...{ cursor: rs.nextCursor }
-        });
+				});
-      }
+			}
-      else{
+			else {
-        setPageParam({
+				setPageParam({
-          ...pageParam,
+					...pageParam,
-          ...{ cursor: null }
+					...{ cursor: null }
-        });
+				});
 			}
 			setOnActionIntersect(
-        !!rs.hasNext 
+				!!rs.hasNext
 				&& rs.nextCursor !== pageParam.cursor
-        && rs.content.length === DEFAULT_PAGE_PARAM.size
+				&& rs.content.length === DEFAULT_PAGE_PARAM.size
-      );
+			);
-    }).catch((e: any) => {
+		}).catch((e: any) => {
-			if(e.response?.data?.error?.message){
+			if (e.response?.data?.error?.message) {
 				snackBar(e.response?.data?.error?.message);
 				return;
 			}
@@ -159,9 +159,9 @@ export const FaceAuthPage = () => {
 		selectedMode: DownloadSelectedMode,
 		userEmail?: string
 	) => {
-		if(selectedMode === DownloadSelectedMode.EMAIL
+		if (selectedMode === DownloadSelectedMode.EMAIL
-      && userEmail
+			&& userEmail
-    ){
+		) {
 			const params: ExtensionFaceAuthExcelDownlaodPrams = {
 				mid: mid,
 				email: userEmail,
@@ -171,11 +171,11 @@ export const FaceAuthPage = () => {
 			downloadExcel(params).then((rs: ExtensionFaceAuthExcelDownlaodResponse) => {
 				console.log('Excel Download Status:', rs.status);
 			}).catch((e: any) => {
-        if(e.response?.data?.error?.message){
+				if (e.response?.data?.error?.message) {
-          snackBar(e.response?.data?.error?.message);
+					snackBar(e.response?.data?.error?.message);
-          return;
+					return;
-        }
+				}
-      });
+			});
 		}
 	};
 
@@ -195,17 +195,17 @@ export const FaceAuthPage = () => {
 		let rs = [];
 		let date = '';
 		let list = [];
-		for(let i = 0; i < listItems.length; i++){
+		for (let i = 0; i < listItems.length; i++) {
 			let item = listItems[i];
-			if(!!item){
+			if (!!item) {
 				let requestDate = item?.requestDate;
 				requestDate = requestDate?.substring(0, 8);
-				if(!!requestDate){
+				if (!!requestDate) {
-					if(i === 0){
+					if (i === 0) {
 						date = requestDate;
 					}
-					if(date !== requestDate){
+					if (date !== requestDate) {
-						if(list.length > 0){
+						if (list.length > 0) {
 							rs.push(
 								<ListDateGroup
 									additionalServiceCategory={AdditionalServiceCategory.FaceAuth}
@@ -223,7 +223,7 @@ export const FaceAuthPage = () => {
 				}
 			}
 		}
-		if(list.length > 0){
+		if (list.length > 0) {
 			rs.push(
 				<ListDateGroup
 					additionalServiceCategory={AdditionalServiceCategory.FaceAuth}
@@ -238,16 +238,16 @@ export const FaceAuthPage = () => {
 	};
 
 	const checkUsedFilter = () => {
-    let rs: boolean = true;
+		let rs: boolean = true;
-    if(userMallId === defaultParams.userMallId
+		if (userMallId === defaultParams.userMallId
-      && fromDate === defaultParams.fromDate
+			&& fromDate === defaultParams.fromDate
-      && toDate === defaultParams.toDate
+			&& toDate === defaultParams.toDate
-      && transType === defaultParams.transType
+			&& transType === defaultParams.transType
-      && authResult === defaultParams.authResult
+			&& authResult === defaultParams.authResult
-    ){
+		) {
-      rs =  false;
+			rs = false;
-    }
+		}
-    setFilterUsed(rs);
+		setFilterUsed(rs);
 	};
 
 	useEffect(() => {
@@ -278,8 +278,8 @@ export const FaceAuthPage = () => {
 		};
 	}, []);
 
-	if(!hasAccess){
+	if (!hasAccess) {
-	  return <AccessDeniedDialog />;
+		return <AccessDeniedDialog />;
 	}
 
 	return (
@@ -303,17 +303,17 @@ export const FaceAuthPage = () => {
 										<img
 											src={IMAGE_ROOT + '/ico_setting.svg'}
 											alt={t('transaction.searchOptions')}
-											onClick={ onClickToOpenFilter }
+											onClick={onClickToOpenFilter}
 										/>
-										{ filterUsed &&
+										{filterUsed &&
-                      <span className="notification-badge2"></span>
+											<span className="notification-badge2"></span>
-                    }
+										}
 									</button>
 								</div>
 								<button
 									className="download-btn"
 									aria-label={t('transaction.download')}
-									onClick={ onClickToOpenDownloadBottomSheet }
+									onClick={onClickToOpenDownloadBottomSheet}
 								>
 									<img
 										src={IMAGE_ROOT + '/ico_download.svg'}
@@ -346,34 +346,37 @@ export const FaceAuthPage = () => {
 								</div>
 							</div>
 						</div>
-						{ groupDateOn &&
+						{groupDateOn &&
-						<div className="summary-amount scroll-group-date">
+							<div className="summary-amount scroll-group-date">
-							<span className="amount-text">{ groupDate }</span>
+								<span className="amount-text">{groupDate}</span>
-							<div className="summary-actions">
+								<div className="summary-actions">
-								<button className="filter-btn">
+									<button className="filter-btn">
-									<img
+										<img
-										src={ IMAGE_ROOT + '/ico_setting.svg' }
+											src={IMAGE_ROOT + '/ico_setting.svg'}
-										alt={t('transaction.searchOptions')}
+											alt={t('transaction.searchOptions')}
-										onClick={ onClickToOpenFilter }
+											onClick={onClickToOpenFilter}
-									/>
+										/>
-								</button>
+										{ filterUsed &&
-								<button className="download-btn">
+											<span className="notification-badge2"></span>
-									<img
+										}
-										src={ IMAGE_ROOT + '/ico_download.svg' }
+									</button>
-										alt={t('transaction.download')}
+									<button className="download-btn">
-										onClick={ onClickToOpenDownloadBottomSheet }
+										<img
-									/>
+											src={IMAGE_ROOT + '/ico_download.svg'}
-								</button>
+											alt={t('transaction.download')}
+											onClick={onClickToOpenDownloadBottomSheet}
+										/>
+									</button>
+								</div>
 							</div>
-						</div>
 						}
 						<section
 							className="transaction-list"
-							style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
+							style={{ height: (listHeight > 0) ? listHeight + 'px' : 'unset' }}
 						>
-							{ getListDateGroup() }
+							{getListDateGroup()}
 						</section>
-						<div ref={ setTarget }></div>
+						<div ref={setTarget}></div>
 					</div>
 				</div>
 			</main>
@@ -393,13 +396,13 @@ export const FaceAuthPage = () => {
 				setTransType={setTransType}
 				setAuthResult={setAuthResult}
 			/>
-			{ !!downloadBottomSheetOn &&
+			{!!downloadBottomSheetOn &&
 				<DownloadBottomSheet
-					bottomSheetOn={ downloadBottomSheetOn }
+					bottomSheetOn={downloadBottomSheetOn}
-					setBottomSheetOn={ setDownloadBottomSheetOn }
+					setBottomSheetOn={setDownloadBottomSheetOn}
-					imageMode={ false }
+					imageMode={false}
-					emailMode={ true }
+					emailMode={true}
-					sendRequest={ onRequestDownloadExcel }
+					sendRequest={onRequestDownloadExcel}
 				></DownloadBottomSheet>
 			}
 		</>

src/pages/additional-service/key-in-payment/key-in-payment-page.tsx

@@ -289,6 +289,7 @@ export const KeyInPaymentPage = () => {
               listItems={listItems}
               additionalServiceCategory={AdditionalServiceCategory.KeyInPayment}
               mid={mid}
+              filterUsed={filterUsed}
               onClickToOpenFilter={ onClickToOpenFilter }
               onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
             ></KeyInPaymentList>

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

@@ -331,6 +331,7 @@ export const PayoutListPage = () => {
               searchDateType={searchDateType}
               mid={mid}
               setDetailData={setDetailData}
+              filterUsed={filterUsed}
               onClickToOpenFilter={onClickToOpenFilter}
               onClickToOpenDownloadBottomSheet={onClickToOpenDownloadBottomSheet}
             ></PayoutList>

src/pages/additional-service/sms-payment/sms-payment-page.tsx

@@ -278,6 +278,7 @@ export const SmsPaymentPage = () => {
               additionalServiceCategory={AdditionalServiceCategory.SMSPayment}
               mid={mid}
               onResendClick={onClickToShowDetail}
+              filterUsed={filterUsed}
               onClickToOpenFilter={ onClickToOpenFilter }
               onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
             ></SmsPaymentList>