diff --git a/src/entities/additional-service/model/account-holder-auth/types.ts b/src/entities/additional-service/model/account-holder-auth/types.ts index acec12f..1326182 100644 --- a/src/entities/additional-service/model/account-holder-auth/types.ts +++ b/src/entities/additional-service/model/account-holder-auth/types.ts @@ -28,6 +28,7 @@ export interface AccountHolderAuthListProps { listItems: Array; mid: string; setDetailData: (detailData: DetailData) => void; + filterUsed: boolean; onClickToOpenFilter: () => void; onClickToOpenDownloadBottomSheet: () => void; }; diff --git a/src/entities/additional-service/model/account-holder-search/types.ts b/src/entities/additional-service/model/account-holder-search/types.ts index f8a5da0..7d2e0cd 100644 --- a/src/entities/additional-service/model/account-holder-search/types.ts +++ b/src/entities/additional-service/model/account-holder-search/types.ts @@ -25,6 +25,7 @@ export interface AccountHolderSearchListProps { listItems: Array; mid: string; setDetailData: (detailData: DetailData) => void; + filterUsed: boolean; onClickToOpenFilter: () => void; onClickToOpenDownloadBottomSheet: () => void; }; diff --git a/src/entities/additional-service/model/ars/types.ts b/src/entities/additional-service/model/ars/types.ts index d364617..530ade8 100644 --- a/src/entities/additional-service/model/ars/types.ts +++ b/src/entities/additional-service/model/ars/types.ts @@ -26,6 +26,7 @@ export interface ArsListProps { listItems: Array; mid: string; setDetailData: (detailData: DetailData) => void; + filterUsed: boolean; onClickToOpenFilter: () => void; onClickToOpenDownloadBottomSheet: () => void; } diff --git a/src/entities/additional-service/model/key-in/types.ts b/src/entities/additional-service/model/key-in/types.ts index 1121c0c..5982523 100644 --- a/src/entities/additional-service/model/key-in/types.ts +++ b/src/entities/additional-service/model/key-in/types.ts @@ -34,6 +34,7 @@ export interface KeyInPaymentListProps { additionalServiceCategory: AdditionalServiceCategory; listItems: Array; mid?: string; + filterUsed: boolean; onClickToOpenFilter: () => void; onClickToOpenDownloadBottomSheet: () => void; }; diff --git a/src/entities/additional-service/model/link-pay/types.ts b/src/entities/additional-service/model/link-pay/types.ts index d9e85b8..819197f 100644 --- a/src/entities/additional-service/model/link-pay/types.ts +++ b/src/entities/additional-service/model/link-pay/types.ts @@ -105,6 +105,7 @@ export interface LinkPaymentHistoryListProps { listItems: Array; mid: string; setDetailData: (detailData: DetailData) => void; + filterUsed: boolean; onClickToOpenFilter: () => void; onClickToOpenDownloadBottomSheet: () => void; }; @@ -114,6 +115,7 @@ export interface LinkPaymentWaitListProps { listItems: Array; mid: string; setDetailData: (detailData: DetailData) => void; + filterUsed: boolean; onClickToOpenFilter: () => void; onClickToOpenDownloadBottomSheet: () => void; }; diff --git a/src/entities/additional-service/model/payout/types.ts b/src/entities/additional-service/model/payout/types.ts index fbe7f0f..1ea1014 100644 --- a/src/entities/additional-service/model/payout/types.ts +++ b/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; }; diff --git a/src/entities/additional-service/model/sms-payment/types.ts b/src/entities/additional-service/model/sms-payment/types.ts index 135749c..567722d 100644 --- a/src/entities/additional-service/model/sms-payment/types.ts +++ b/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; }; 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 ad4368b..0d9e022 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 @@ -9,14 +9,15 @@ export const AccountHolderAuthList = ({ listItems, mid, setDetailData, + filterUsed, onClickToOpenFilter, onClickToOpenDownloadBottomSheet }: AccountHolderAuthListProps) => { const { t, i18n } = useTranslation(); - + const [groupDate, setGroupDate] = useState(''); const [groupDateOn, setGroupDateOn] = useState(false); - + const [listHeight, setListHeight] = useState(0); const getListDateGroup = () => { @@ -37,12 +38,12 @@ export const AccountHolderAuthList = ({ if (list.length > 0) { rs.push( ); } @@ -56,12 +57,12 @@ export const AccountHolderAuthList = ({ if (list.length > 0) { rs.push( ) } @@ -77,7 +78,7 @@ export const AccountHolderAuthList = ({ tabContent?.addEventListener('scroll', (e: Event) => { setScrollAction(e, setGroupDate, setGroupDateOn); }); - + return () => { ListScrollOn(false); tabContent?.removeEventListener('scroll', (e: Event) => { @@ -88,30 +89,33 @@ export const AccountHolderAuthList = ({ return ( <> - { groupDateOn && -
- { groupDate } -
- - + {groupDateOn && +
+ {groupDate} +
+ + +
-
} -
0)? listHeight + 'px': 'unset' }} + style={{ height: (listHeight > 0) ? listHeight + 'px' : 'unset' }} > {getListDateGroup()}
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 2aa82d4..0decf4e 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 @@ -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 && + + }
- } + }
0)? listHeight + 'px': 'unset' }} > { getListDateGroup() }
diff --git a/src/entities/additional-service/ui/ars/ars-list.tsx b/src/entities/additional-service/ui/ars/ars-list.tsx index 4cf61f8..b68e61e 100644 --- a/src/entities/additional-service/ui/ars/ars-list.tsx +++ b/src/entities/additional-service/ui/ars/ars-list.tsx @@ -10,31 +10,32 @@ export const ArsList = ({ listItems, mid, setDetailData, + filterUsed, onClickToOpenFilter, onClickToOpenDownloadBottomSheet }: ArsListProps) => { const { t, i18n } = useTranslation(); - + const [groupDate, setGroupDate] = useState(''); - const [groupDateOn, setGroupDateOn] = useState(false); - + const [groupDateOn, setGroupDateOn] = useState(false); + const [listHeight, setListHeight] = useState(0); const getListDateGroup = () => { let rs = []; let date = ''; let list: Array = []; - for(let i=0;i 0){ + if (date !== itemDate) { + if (list.length > 0) { rs.push( 0){ + if (list.length > 0) { rs.push( { setScrollAction(e, setGroupDate, setGroupDateOn); }); - + return () => { ListScrollOn(false); tabContent?.removeEventListener('scroll', (e: Event) => { @@ -88,32 +89,35 @@ export const ArsList = ({ return ( <> - { groupDateOn && -
- { groupDate } -
- - + {groupDateOn && +
+ {groupDate} +
+ + +
-
} -
0)? listHeight + 'px': 'unset' }} + style={{ height: (listHeight > 0) ? listHeight + 'px' : 'unset' }} > - { getListDateGroup() } + {getListDateGroup()}
); 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 697ca50..65204ec 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 @@ -296,16 +296,24 @@ export const FundAccountResultListWrap = () => { let heightList = GetListHeight(); setListHeight(heightList.listHeight); - let tabContent = document.querySelector('.tab-content'); - tabContent?.addEventListener('scroll', (e: Event) => { - setScrollAction(e, setGroupDate, setGroupDateOn); - }); + // DOM이 렌더링된 후에 이벤트 리스너 등록 + const timer = setTimeout(() => { + 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) => { - setScrollAction(e, setGroupDate, setGroupDateOn); - }); + clearTimeout(timer); }; }, []); @@ -425,6 +433,9 @@ export const FundAccountResultListWrap = () => { alt={t('transaction.searchOptions')} onClick={onClickToOpenFilter} /> + {filterUsed && + + } @@ -344,7 +352,7 @@ export const FundAccountTransferListWrap = () => {
- { groupDateOn && -
- { groupDate } -
- - + {groupDateOn && +
+ {groupDate} +
+ + +
-
} -
0)? listHeight + 'px': 'unset' }} > - { getListDateGroup() } + {getListDateGroup()}
-
+
- + {groupDateOn && +
+ {groupDate} +
+ + +
-
} -
0)? listHeight + 'px': 'unset' }} > {getListDateGroup()}
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 bf159be..ed568a2 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 @@ -9,14 +9,15 @@ export const LinkPaymentHistoryList = ({ listItems, mid, setDetailData, + filterUsed, onClickToOpenFilter, onClickToOpenDownloadBottomSheet }: LinkPaymentHistoryListProps) => { const { t, i18n } = useTranslation(); - + const [groupDate, setGroupDate] = useState(''); const [groupDateOn, setGroupDateOn] = useState(false); - + const [listHeight, setListHeight] = useState(0); const getListDateGroup = () => { @@ -36,12 +37,12 @@ export const LinkPaymentHistoryList = ({ if (list.length > 0) { rs.push( ); } @@ -55,12 +56,12 @@ export const LinkPaymentHistoryList = ({ if (list.length > 0) { rs.push( ); } @@ -76,7 +77,7 @@ export const LinkPaymentHistoryList = ({ tabContent?.addEventListener('scroll', (e: Event) => { setScrollAction(e, setGroupDate, setGroupDateOn); }); - + return () => { ListScrollOn(false); tabContent?.removeEventListener('scroll', (e: Event) => { @@ -87,30 +88,32 @@ export const LinkPaymentHistoryList = ({ return ( <> - { groupDateOn && -
- { groupDate } -
- - + {groupDateOn && +
+ {groupDate} +
+ + +
-
} -
0)? listHeight + 'px': 'unset' }} > {getListDateGroup()}
diff --git a/src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx b/src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx index 6172d79..8137062 100644 --- a/src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx +++ b/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} > 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 576ff45..b536d42 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 @@ -9,14 +9,15 @@ export const LinkPaymentWaitList = ({ listItems, mid, setDetailData, + filterUsed, onClickToOpenFilter, onClickToOpenDownloadBottomSheet }: LinkPaymentWaitListProps) => { const { t, i18n } = useTranslation(); - + const [groupDate, setGroupDate] = useState(''); const [groupDateOn, setGroupDateOn] = useState(false); - + const [listHeight, setListHeight] = useState(0); const getListDateGroup = () => { @@ -36,12 +37,12 @@ export const LinkPaymentWaitList = ({ if (list.length > 0) { rs.push( ); } @@ -55,12 +56,12 @@ export const LinkPaymentWaitList = ({ if (list.length > 0) { rs.push( ); } @@ -76,7 +77,7 @@ export const LinkPaymentWaitList = ({ tabContent?.addEventListener('scroll', (e: Event) => { setScrollAction(e, setGroupDate, setGroupDateOn); }); - + return () => { ListScrollOn(false); tabContent?.removeEventListener('scroll', (e: Event) => { @@ -87,30 +88,32 @@ export const LinkPaymentWaitList = ({ return ( <> - { groupDateOn && -
- { groupDate } -
- - + {groupDateOn && +
+ {groupDate} +
+ + +
-
} -
0)? listHeight + 'px': 'unset' }} > {getListDateGroup()}
diff --git a/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx b/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx index fe4544d..7d3165b 100644 --- a/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx +++ b/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} > diff --git a/src/entities/additional-service/ui/payout/payout-list.tsx b/src/entities/additional-service/ui/payout/payout-list.tsx index 4cc2f4d..1c32549 100644 --- a/src/entities/additional-service/ui/payout/payout-list.tsx +++ b/src/entities/additional-service/ui/payout/payout-list.tsx @@ -10,34 +10,35 @@ export const PayoutList = ({ searchDateType, mid, setDetailData, - onClickToOpenFilter, - onClickToOpenDownloadBottomSheet + filterUsed, + onClickToOpenFilter, + onClickToOpenDownloadBottomSheet }: PayoutListProps) => { const { t, i18n } = useTranslation(); - + const [groupDate, setGroupDate] = useState(''); - const [groupDateOn, setGroupDateOn] = useState(false); - + const [groupDateOn, setGroupDateOn] = useState(false); + const [listHeight, setListHeight] = useState(0); const getListDateGroup = () => { let rs = []; let date = ''; let list = []; - for (let i=0;i 0){ + if (date !== itemDate) { + if (list.length > 0) { rs.push( 0){ + if (list.length > 0) { rs.push( { setScrollAction(e, setGroupDate, setGroupDateOn); }); - + return () => { ListScrollOn(false); tabContent?.removeEventListener('scroll', (e: Event) => { @@ -89,30 +90,32 @@ export const PayoutList = ({ return ( <> - { groupDateOn && -
- { groupDate } -
- - + {groupDateOn && +
+ {groupDate} +
+ + +
-
} -
0)? listHeight + 'px': 'unset' }} > {getListDateGroup()}
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 c9d53a4..0b27b73 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 @@ -5,18 +5,19 @@ import { useEffect, useState } from 'react'; import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } from '@/shared/constants/common'; export const SmsPaymentList = ({ - listItems, - additionalServiceCategory, - mid, - onResendClick, - onClickToOpenFilter, - onClickToOpenDownloadBottomSheet + listItems, + additionalServiceCategory, + mid, + onResendClick, + filterUsed, + onClickToOpenFilter, + onClickToOpenDownloadBottomSheet }: SmsPaymentListProps) => { const { t, i18n } = useTranslation(); - + const [groupDate, setGroupDate] = useState(''); const [groupDateOn, setGroupDateOn] = useState(false); - + const [listHeight, setListHeight] = useState(0); const getListDateGroup = () => { @@ -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(i === 0) { + if (!!sendDate) { + if (i === 0) { date = sendDate; } - if(date !== sendDate) { - if(list.length > 0) { + if (date !== sendDate) { + if (list.length > 0) { rs.push( ); } @@ -76,7 +77,7 @@ export const SmsPaymentList = ({ tabContent?.addEventListener('scroll', (e: Event) => { setScrollAction(e, setGroupDate, setGroupDateOn); }); - + return () => { ListScrollOn(false); tabContent?.removeEventListener('scroll', (e: Event) => { @@ -87,30 +88,32 @@ export const SmsPaymentList = ({ return ( <> - { groupDateOn && -
- { groupDate } -
- - + {groupDateOn && +
+ {groupDate} +
+ + +
-
} -
0)? listHeight + 'px': 'unset' }} > {getListDateGroup()}
diff --git a/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx b/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx index 3559178..5b92d55 100644 --- a/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx +++ b/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx @@ -291,6 +291,7 @@ export const AccountHolderAuthPage = () => { listItems={listItems} mid={mid} setDetailData={setDetailData} + filterUsed={ filterUsed } onClickToOpenFilter={ onClickToOpenFilter } onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet } > diff --git a/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx b/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx index b1cf839..c48ae4d 100644 --- a/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx +++ b/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx @@ -311,6 +311,7 @@ export const AccountHolderSearchPage = () => { listItems={listItems} mid={mid} setDetailData={setDetailData} + filterUsed={filterUsed} onClickToOpenFilter={ onClickToOpenFilter } onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet } > diff --git a/src/pages/additional-service/alimtalk/list-page.tsx b/src/pages/additional-service/alimtalk/list-page.tsx index f5489f0..631f76c 100644 --- a/src/pages/additional-service/alimtalk/list-page.tsx +++ b/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'); - tabContent?.addEventListener('scroll', (e: Event) => { - setScrollAction(e, setGroupDate, setGroupDateOn); - }); - + // DOM이 렌더링된 후에 이벤트 리스너 등록 + const timer = setTimeout(() => { + 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) => { - setScrollAction(e, setGroupDate, setGroupDateOn); - }); + clearTimeout(timer); }; }, []); @@ -393,6 +401,9 @@ export const AlimtalkListPage = () => { alt={t('transaction.searchOptions')} onClick={ onClickToOpenFilter } /> + { filterUsed && + + }
- { groupDateOn && -
- { groupDate } -
- - + {groupDateOn && +
+ {groupDate} +
+ + +
-
} -
0)? listHeight + 'px': 'unset' }} + style={{ height: (listHeight > 0) ? listHeight + 'px' : 'unset' }} > - { getListDateGroup() } + {getListDateGroup()}
-
+
@@ -393,13 +396,13 @@ export const FaceAuthPage = () => { setTransType={setTransType} setAuthResult={setAuthResult} /> - { !!downloadBottomSheetOn && + {!!downloadBottomSheetOn && } diff --git a/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx b/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx index 8e06b24..2245305 100644 --- a/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx +++ b/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx @@ -289,6 +289,7 @@ export const KeyInPaymentPage = () => { listItems={listItems} additionalServiceCategory={AdditionalServiceCategory.KeyInPayment} mid={mid} + filterUsed={filterUsed} onClickToOpenFilter={ onClickToOpenFilter } onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet } > diff --git a/src/pages/additional-service/payout/list-page.tsx b/src/pages/additional-service/payout/list-page.tsx index ecb6991..6d87d9c 100644 --- a/src/pages/additional-service/payout/list-page.tsx +++ b/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} > diff --git a/src/pages/additional-service/sms-payment/sms-payment-page.tsx b/src/pages/additional-service/sms-payment/sms-payment-page.tsx index 74f97eb..2398e48 100644 --- a/src/pages/additional-service/sms-payment/sms-payment-page.tsx +++ b/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 } >