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

- 자금이체,알림톡 스크롤 중 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) => {
@@ -98,6 +99,9 @@ export const AccountHolderAuthList = ({
                 alt={t('transaction.searchOptions')}
                 onClick={onClickToOpenFilter}
               />
+              {filterUsed &&
+                <span className="notification-badge2"></span>
+              }
             </button>
             <button className="download-btn">
               <img

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,6 +10,7 @@ export const ArsList = ({
 	listItems,
 	mid,
 	setDetailData,
+	filterUsed,
 	onClickToOpenFilter,
 	onClickToOpenDownloadBottomSheet
 }: ArsListProps) => {
@@ -98,6 +99,9 @@ export const ArsList = ({
 								alt={t('transaction.searchOptions')}
 								onClick={onClickToOpenFilter}
 							/>
+							{ filterUsed &&
+								<span className="notification-badge2"></span>
+							}
 						</button>
 						<button className="download-btn">
 							<img

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

@@ -296,16 +296,24 @@ export const FundAccountResultListWrap = () => {
     let heightList = GetListHeight();
     setListHeight(heightList.listHeight);
 
+    // DOM이 렌더링된 후에 이벤트 리스너 등록
+    const timer = setTimeout(() => {
       let tabContent = document.querySelector('.tab-content');
-    tabContent?.addEventListener('scroll', (e: Event) => {
+
+      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

@@ -303,16 +303,24 @@ export const FundAccountTransferListWrap = () => {
     let heightList = GetListHeight();
     setListHeight(heightList.listHeight);
 
+    // DOM이 렌더링된 후에 이벤트 리스너 등록
+    const timer = setTimeout(() => {
       let tabContent = document.querySelector('.tab-content');
-    tabContent?.addEventListener('scroll', (e: Event) => {
+
+      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);
-      });
     };
   }, []);
 
@@ -396,6 +404,9 @@ export const FundAccountTransferListWrap = () => {
                 alt={t('transaction.searchOptions')}
                 onClick={onClickToOpenFilter}
               />
+              {filterUsed &&
+                <span className="notification-badge2"></span>
+              }
             </button>
             <button className="download-btn">
               <img
@@ -409,7 +420,6 @@ export const FundAccountTransferListWrap = () => {
       }
       <section
         className="transaction-list pb-86"
-        style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
       >
         {getListDateGroup()}
       </section>

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) => {
@@ -106,6 +107,9 @@ export const KeyInPaymentList = ({
                 alt={t('transaction.searchOptions')}
                 onClick={onClickToOpenFilter}
               />
+              {filterUsed &&
+                <span className="notification-badge2"></span>
+              }
             </button>
             <button className="download-btn">
               <img
@@ -119,7 +123,6 @@ export const KeyInPaymentList = ({
       }
       <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) => {
@@ -97,6 +98,9 @@ export const LinkPaymentHistoryList = ({
                 alt={t('transaction.searchOptions')}
                 onClick={onClickToOpenFilter}
               />
+              {filterUsed &&
+                <span className="notification-badge2"></span>
+              }
             </button>
             <button className="download-btn">
               <img
@@ -110,7 +114,6 @@ export const LinkPaymentHistoryList = ({
       }
       <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) => {
@@ -97,6 +98,9 @@ export const LinkPaymentWaitList = ({
                 alt={t('transaction.searchOptions')}
                 onClick={onClickToOpenFilter}
               />
+              {filterUsed &&
+                <span className="notification-badge2"></span>
+              }
             </button>
             <button className="download-btn">
               <img
@@ -110,7 +114,6 @@ export const LinkPaymentWaitList = ({
       }
       <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,6 +10,7 @@ export const PayoutList = ({
 	searchDateType,
 	mid,
 	setDetailData,
+	filterUsed,
 	onClickToOpenFilter,
 	onClickToOpenDownloadBottomSheet
 }: PayoutListProps) => {
@@ -99,6 +100,9 @@ export const PayoutList = ({
 								alt={t('transaction.searchOptions')}
 								onClick={onClickToOpenFilter}
 							/>
+							{filterUsed &&
+								<span className="notification-badge2"></span>
+							}
 						</button>
 						<button className="download-btn">
 							<img
@@ -112,7 +116,6 @@ export const PayoutList = ({
 			}
 			<section
 				className="transaction-list"
-				style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
 			>
 				{getListDateGroup()}
 			</section>

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

@@ -9,6 +9,7 @@ export const SmsPaymentList = ({
   additionalServiceCategory,
   mid,
   onResendClick,
+  filterUsed,
   onClickToOpenFilter,
   onClickToOpenDownloadBottomSheet
 }: SmsPaymentListProps) => {
@@ -97,6 +98,9 @@ export const SmsPaymentList = ({
                 alt={t('transaction.searchOptions')}
                 onClick={onClickToOpenFilter}
               />
+              {filterUsed &&
+                <span className="notification-badge2"></span>
+              }
             </button>
             <button className="download-btn">
               <img
@@ -110,7 +114,6 @@ export const SmsPaymentList = ({
       }
       <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);
 
+    // DOM이 렌더링된 후에 이벤트 리스너 등록
+    const timer = setTimeout(() => {
       let tabContent = document.querySelector('.tab-content');
-    tabContent?.addEventListener('scroll', (e: Event) => {
+
+      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

@@ -356,6 +356,9 @@ export const FaceAuthPage = () => {
 											alt={t('transaction.searchOptions')}
 											onClick={onClickToOpenFilter}
 										/>
+										{ filterUsed &&
+											<span className="notification-badge2"></span>
+										}
 									</button>
 									<button className="download-btn">
 										<img

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>