자금이체

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

@@ -105,14 +105,18 @@ export interface LinkPaymentHistoryListProps {
   listItems: Array<LinkPaymentHistoryListItem>;
   mid: string;
   setDetailData: (detailData: DetailData) => void;
-}
+  onClickToOpenFilter: () => void;
+  onClickToOpenDownloadBottomSheet: () => void;
+};
 
 export interface LinkPaymentWaitListProps {
   additionalServiceCategory: AdditionalServiceCategory;
   listItems: Array<LinkPaymentWaitListItem>;
   mid: string;
   setDetailData: (detailData: DetailData) => void;
-}
+  onClickToOpenFilter: () => void;
+  onClickToOpenDownloadBottomSheet: () => void;
+};
 
 export interface LinkPaymentHistoryFilterProps extends FilterProps {
   mid: string;

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

@@ -151,7 +151,10 @@ export const ArsList = ({
 				</div>
 			</div>
 			}
-			<section className="transaction-list">
+			<section 
+				className="transaction-list"
+				style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
+			>
 				{ getListDateGroup() }
 			</section>
 		</>

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

@@ -1,6 +1,6 @@
 import moment from 'moment';
 import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
-import { IMAGE_ROOT } from '@/shared/constants/common';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { JSX, useEffect, useState } from 'react';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
@@ -14,7 +14,7 @@ import { PATHS } from '@/shared/constants/paths';
 import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
 import { getFundAccountResultStatusBtnGroup, getFundAccountStatusBtnGroup } from '../../model/fund-account/constant';
 import { FundAccountResultFilter } from '../filter/fund-account-result-filter';
-import { useStore } from '@/shared/model/store';
+import { useGroupDateOnStore, useGroupDateStore, useStore } from '@/shared/model/store';
 import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { useTranslation } from 'react-i18next';
@@ -59,6 +59,11 @@ export const FundAccountResultListWrap = () => {
   const [detailMid, setDetailMid] = useState<string>('');
   const [detailTid, setDetailTid] = useState<string>('');
 
+  const { groupDate, setGroupDate } = useGroupDateStore();
+  const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
+      
+  const [listHeight, setListHeight] = useState<number>(0);
+
   const { mutateAsync: extensionFundAccountResultList } = useExtensionFundAccountResultListMutation();
   const { mutateAsync: extensionFundAccountResultExcel } = useExtensionFundAccountResultExcelMutation();
   const { mutateAsync: extensionFundAccountResultSummary } = useExtensionFundAccountResultSummaryMutation();
@@ -259,8 +264,63 @@ export const FundAccountResultListWrap = () => {
     return rs;
   };
 
+  const getMax = (data: Array<Record<string, any>>) => {
+    let maxItem = null;
+    if(data.length > 0){
+      let numberArr = data.map((
+        value: Record<string, any>, 
+        index: number
+      ) => {
+        return value.top;
+      });
+      let max = Math.max(...numberArr);
+      maxItem = data.filter((
+        value: Record<string, any>, 
+        index: number
+      ) => {
+        return value.top === max;
+      });
+    } 
+    
+    return maxItem? maxItem[0]: null;
+  };
+
+  const setScrollAction = (e: Event) => {
+    let dateHeader = document.querySelectorAll('.date-header');
+    let posData: Array<Record<string, any>> = [];
+    dateHeader.forEach((value, index) => {
+      let date: string = value.innerHTML;
+      let top: number = value.getBoundingClientRect().top;
+      if(top < 10){
+        posData.push({
+          date: date,
+          top: top
+        });
+      }
+    });
+    let maxItem = getMax(posData);
+    if(maxItem){
+      setGroupDateOn(true);
+      setGroupDate(maxItem.date);
+    }
+    else{
+      setGroupDateOn(false);
+      setGroupDate('');
+    }
+  };
+
   useEffect(() => {
     callSummary();
+    ListScrollOn(true);
+    let heightList = GetListHeight();
+    setListHeight(heightList.listHeight);
+    
+    let tabContent = document.querySelector('.tab-content');
+    tabContent?.addEventListener('scroll', setScrollAction);
+    return () => {
+      ListScrollOn(false);
+      tabContent?.removeEventListener('scroll', setScrollAction);
+    };
   }, []);
 
   useEffect(() => {
@@ -365,10 +425,32 @@ export const FundAccountResultListWrap = () => {
           </div>
         </div>
       </section>
-
+      { groupDateOn &&
-      <section className="transaction-list">
+      <div className="summary-amount scroll-group-date">
+        <span className="amount-text">{ groupDate }</span>
+        <div className="summary-actions">
+          <button className="filter-btn">
+            <img
+              src={ IMAGE_ROOT + '/ico_setting.svg' }
+              alt={t('transaction.searchOptions')}
+              onClick={ onClickToOpenFilter }
+            />
+          </button>
+          <button className="download-btn">
+            <img
+              src={ IMAGE_ROOT + '/ico_download.svg' }
+              alt={t('transaction.download')}
+              onClick={ onClickToOpenDownloadBottomSheet }
+            />
+          </button>
+        </div>
+      </div>
+      }
+      <section 
+        className="transaction-list"
+        style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
+      >
         { getListDateGroup() }
-        
       </section>
       <div ref={ setTarget }></div>
       <div className="apply-row">

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

@@ -1,5 +1,5 @@
 import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
-import { IMAGE_ROOT } from '@/shared/constants/common';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { JSX, useEffect, useState } from 'react';
 import {
@@ -23,7 +23,7 @@ import { getFundAccountStatusBtnGroup } from '../../model/fund-account/constant'
 import { useExtensionFundAccountBalanceMutation } from '../../api/fund-account/use-extension-fund-account-balance-mutation';
 import { FundAccountTransactionFilter } from '../filter/fund-account-trnasaction-filter';
 import { PATHS } from '@/shared/constants/paths';
-import { useStore } from '@/shared/model/store';
+import { useGroupDateOnStore, useGroupDateStore, useStore } from '@/shared/model/store';
 import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { useTranslation } from 'react-i18next';
@@ -58,6 +58,11 @@ export const FundAccountTransferListWrap = () => {
 
   const [balance, setBalance] = useState<number>(0);
 
+  const { groupDate, setGroupDate } = useGroupDateStore();
+  const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
+    
+  const [listHeight, setListHeight] = useState<number>(0);
+
   const { mutateAsync: extensionFundAccountTransferList } = useExtensionFundAccountTransferListMutation();
   const { mutateAsync: extensionFundAccountTransferExcel } = useExtensionFundAccountTransferExcelMutation();
   const { mutateAsync: extensionFundAccountBalance } = useExtensionFundAccountBalanceMutation();
@@ -247,6 +252,59 @@ export const FundAccountTransferListWrap = () => {
     return rs;
   };
 
+  const onClickToNavigate = () => {
+    if (!checkGrant(55, 'W')) {
+      showAlert(t('common.nopermission'));
+      return;
+    }
+    navigate(PATHS.additionalService.fundAccount.transferRequest);
+  };
+
+  const getMax = (data: Array<Record<string, any>>) => {
+    let maxItem = null;
+    if(data.length > 0){
+      let numberArr = data.map((
+        value: Record<string, any>, 
+        index: number
+      ) => {
+        return value.top;
+      });
+      let max = Math.max(...numberArr);
+      maxItem = data.filter((
+        value: Record<string, any>, 
+        index: number
+      ) => {
+        return value.top === max;
+      });
+    } 
+    
+    return maxItem? maxItem[0]: null;
+  };
+
+  const setScrollAction = (e: Event) => {
+    let dateHeader = document.querySelectorAll('.date-header');
+    let posData: Array<Record<string, any>> = [];
+    dateHeader.forEach((value, index) => {
+      let date: string = value.innerHTML;
+      let top: number = value.getBoundingClientRect().top;
+      if(top < 10){
+        posData.push({
+          date: date,
+          top: top
+        });
+      }
+    });
+    let maxItem = getMax(posData);
+    if(maxItem){
+      setGroupDateOn(true);
+      setGroupDate(maxItem.date);
+    }
+    else{
+      setGroupDateOn(false);
+      setGroupDate('');
+    }
+  };
+
   useEffect(() => {
     callList();
   }, [
@@ -260,13 +318,19 @@ export const FundAccountTransferListWrap = () => {
     sortType
   ]);
 
-  const onClickToNavigate = () => {
+  useEffect(() => {
-    if (!checkGrant(55, 'W')) {
+    ListScrollOn(true);
-      showAlert(t('common.nopermission'));
+    let heightList = GetListHeight();
-      return;
+    setListHeight(heightList.listHeight);
-    }
+
-    navigate(PATHS.additionalService.fundAccount.transferRequest);
+    let tabContent = document.querySelector('.tab-content');
-  };
+    tabContent?.addEventListener('scroll', setScrollAction);
+    
+    return () => {
+      ListScrollOn(false);
+      tabContent?.removeEventListener('scroll', setScrollAction);
+    };
+  }, []);
 
   return (
     <>
@@ -335,8 +399,31 @@ export const FundAccountTransferListWrap = () => {
           </div>
         </div>
       </section>
-
+      { groupDateOn &&
-      <section className="transaction-list pb-86">
+      <div className="summary-amount scroll-group-date">
+        <span className="amount-text">{ groupDate }</span>
+        <div className="summary-actions">
+          <button className="filter-btn">
+            <img
+              src={ IMAGE_ROOT + '/ico_setting.svg' }
+              alt={t('transaction.searchOptions')}
+              onClick={ onClickToOpenFilter }
+            />
+          </button>
+          <button className="download-btn">
+            <img
+              src={ IMAGE_ROOT + '/ico_download.svg' }
+              alt={t('transaction.download')}
+              onClick={ onClickToOpenDownloadBottomSheet }
+            />
+          </button>
+        </div>
+      </div>
+      }
+      <section 
+        className="transaction-list pb-86"
+        style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
+      >
         { getListDateGroup() }
       </section>
       <div ref={ setTarget }></div>

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

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

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

@@ -282,6 +282,8 @@ export const LinkPaymentHistoryWrap = () => {
 				additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
 				mid={mid}
 				setDetailData={setDetailData}
+				onClickToOpenFilter={ onClickToOpenFilter }
+      	onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
 			></LinkPaymentHistoryList>
 			<div ref={setTarget}></div>
 			<div className="apply-row">

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

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

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

@@ -252,6 +252,8 @@ export const LinkPaymentWaitSendWrap = () => {
         additionalServiceCategory={ AdditionalServiceCategory.LinkPaymentWait }
         mid={ mid }
         setDetailData={ setDetailData }
+        onClickToOpenFilter={ onClickToOpenFilter }
+        onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
       ></LinkPaymentWaitList>
       <div ref={ setTarget }></div>
       <div className="apply-row">

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

@@ -153,7 +153,10 @@ export const PayoutList = ({
 				</div>
 			</div>
 			}
-			<section className="transaction-list">
+			<section 
+				className="transaction-list"
+				style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
+			>
 				{getListDateGroup()}
 			</section>
 		</>

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

@@ -606,7 +606,10 @@ export const ListWrap = ({
         </div>
       </div>
       }
-      <div className="transaction-list">
+      <div 
+        className="transaction-list"
+        style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
+      >
       { (periodType === SettlementPeriodType.SETTLEMENT_DATE) && 
         getSettlementDateListDateGroup()
       }

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

@@ -337,7 +337,10 @@ export const ListWrap = () => {
         </div>
       </div>
       }
-      <div className="transaction-list">
+      <div 
+        className="transaction-list"
+        style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
+      >
         {getListDateGroup()}
         <div ref={setTarget}></div>
       </div>