자금이체

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>
     </>