부가서비스 정산 신용카드ARS 지급대행

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

@@ -1,7 +1,7 @@
 import moment from 'moment';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IMAGE_ROOT } from '@/shared/constants/common';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
 import { ListFilter } from './filter/list-filter';
 import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
 import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
@@ -18,7 +18,7 @@ import {
 } from '../model/types';
 import { useVatReturnListMutation } from '../api/use-vat-return-list-mutation';
 import { ListDateGroup } from './list-date-group';
-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 { TaxInvoiceDetail } from './detail/tax-invoice-detail';
@@ -49,6 +49,11 @@ export const ListWrap = () => {
   const [detailOn, setDetailOn] = useState<boolean>(false);
   const [detailTaxInvoiceNumber, setDetailTaxInvoiceNumber] = useState<string>('');
 
+  const { groupDate, setGroupDate } = useGroupDateStore();
+  const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
+      
+  const [listHeight, setListHeight] = useState<number>(0);
+
   const { mutateAsync: vatReturnList } = useVatReturnListMutation();
   const { mutateAsync: vatReturnDownloadExcel } = useVatReturnDownloadExcelMutation();
 
@@ -118,7 +123,7 @@ export const ListWrap = () => {
     });
   };
 
-  const onClickToOpenFIlter = () => {
+  const onClickToOpenFilter = () => {
     setFilterOn(true);
   };
   const onClickToSort = (sort: SortTypeKeys) => {
@@ -158,12 +163,6 @@ export const ListWrap = () => {
     }
   };
 
-  useEffect(() => {
-    callList();
-  }, [
-    mid, startMonth, endMonth,
-    receiptType, targetType, sortType
-  ]);
   const setDetailData = (detailData: DetailData) => {
     setDetailOn(detailData.detailOn);
     setDetailTaxInvoiceNumber(detailData.taxInvoiceNumber);
@@ -179,7 +178,7 @@ export const ListWrap = () => {
       let item = listItems[i];
       if (!!item) {
         let issueDateTime = item?.issueDate;
-        let issueDate = issueDateTime?.substr(0, 8);
+        let issueDate = issueDateTime?.substr(0, 6);
         if (!!issueDate) {
           if (i === 0) {
             date = issueDate;
@@ -215,6 +214,72 @@ export const ListWrap = () => {
     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(() => {
+    callList();
+  }, [
+    mid, startMonth, endMonth,
+    receiptType, targetType, sortType
+  ]);
+
+  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="summary-section pt-30">
@@ -223,34 +288,55 @@ export const ListWrap = () => {
             <input
               type="text"
               className="credit-period"
-              value={moment(startMonth + '01').format('YYYY.MM') + '-' + moment(endMonth + '01').format('YYYY.MM')}
-              readOnly={true}
+              value={ moment(startMonth + '01').format('YYYY.MM') + '-' + moment(endMonth + '01').format('YYYY.MM') }
+              readOnly={ true }
             />
             <button
               className="filter-btn"
-              onClick={() => onClickToOpenFIlter()}
+              onClick={ onClickToOpenFilter }
             >
               <img
-                src={IMAGE_ROOT + '/ico_setting.svg'}
-                alt={t('transaction.searchOptions')}
+                src={ IMAGE_ROOT + '/ico_setting.svg' }
+                alt={ t('transaction.searchOptions') }
               />
             </button>
           </div>
           <button className="download-btn">
             <img
-              src={IMAGE_ROOT + '/ico_download.svg'}
-              alt={t('transaction.download')}
-              onClick={onClickToOpenDownloadBottomSheet}
+              src={ IMAGE_ROOT + '/ico_download.svg' }
+              alt={ t('transaction.download') }
+              onClick={ onClickToOpenDownloadBottomSheet }
             />
           </button>
         </div>
       </div>
       <div className="filter-section mt-10">
         <SortTypeBox
-          sortType={sortType}
-          onClickToSort={onClickToSort}
+          sortType={ sortType }
+          onClickToSort={ onClickToSort }
         ></SortTypeBox>
       </div>
+      { 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">
         {getListDateGroup()}
         <div ref={setTarget}></div>