거래내역조회 스크롤시 리스트

src/entities/transaction/model/types.ts

@@ -155,21 +155,29 @@ export interface AllTransactionListProps {
   transactionCategory: TransactionCategory;
   listItems: Array<ListItemProps>;
   setDetailData: (detailData: DetailData) => void;
+  onClickToOpenFilter?: () => void;
+  onClickToOpenDownloadBottomSheet?: () => void;
 };
 export interface CashReceiptListProps {
   transactionCategory: TransactionCategory;
   listItems: Array<ListItemProps>;
   setDetailData: (detailData: DetailData) => void;
+  onClickToOpenFilter?: () => void;
+  onClickToOpenDownloadBottomSheet?: () => void;
 };
 export interface EscrowListProps {
   transactionCategory: TransactionCategory;
   listItems: Array<ListItemProps>;
   setDetailData: (detailData: DetailData) => void;
+  onClickToOpenFilter?: () => void;
+  onClickToOpenDownloadBottomSheet?: () => void;
 };
 export interface BillingListProps {
   transactionCategory: TransactionCategory;
   listItems: Array<ListItemProps>;
   setDetailData: (detailData: DetailData) => void;
+  onClickToOpenFilter?: () => void;
+  onClickToOpenDownloadBottomSheet?: () => void;
 };
 export interface AllTransactionListItem {
   tid?: string;

src/entities/transaction/ui/all-transaction-list.tsx

@@ -1,11 +1,23 @@
+import { useEffect, useState } from 'react';
 import { AllTransactionListProps, ListItemProps } from '../model/types';
 import { ListDateGroup } from './list-date-group';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
+import { useTranslation } from 'react-i18next';
+import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store';
 
 export const AllTransactionList = ({ 
   transactionCategory,
   listItems,
-  setDetailData
+  setDetailData,
+  onClickToOpenFilter,
+  onClickToOpenDownloadBottomSheet
 }: AllTransactionListProps) => {
+  const { t, i18n } = useTranslation();
+
+  const { groupDate, setGroupDate } = useGroupDateStore();
+  const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
+  
+  const [listHeight, setListHeight] = useState<number>(0);
   
   const getListDateGroup = () => {
     let rs = [];
@@ -53,9 +65,92 @@ export const AllTransactionList = ({
     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/transaction/ui/billing-list.tsx

@@ -1,14 +1,23 @@
-import { PATHS } from '@/shared/constants/paths';
-import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { BillingListProps } from '../model/types';
 import { ListDateGroup } from './list-date-group';
 import { useTranslation } from 'react-i18next';
+import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store';
+import { useEffect, useState } from 'react';
+import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
 
 export const BillingList = ({
   transactionCategory,
   listItems,
-  setDetailData
+  setDetailData,
+  onClickToOpenFilter,
+  onClickToOpenDownloadBottomSheet
 }: BillingListProps) => {
+  const { t, i18n } = useTranslation();
+  
+  const { groupDate, setGroupDate } = useGroupDateStore();
+  const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
+    
+  const [listHeight, setListHeight] = useState<number>(0);
   
   const getListDateGroup = () => {
     let rs = [];
@@ -55,12 +64,94 @@ export const BillingList = ({
     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 &&
-      { getListDateGroup() }
+      <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/transaction/ui/cash-receipt-list.tsx

@@ -1,11 +1,24 @@
+import { useTranslation } from 'react-i18next';
 import { CashReceiptListProps } from '../model/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 CashReceiptList = ({
   transactionCategory,
   listItems,
-  setDetailData
+  setDetailData,
+  onClickToOpenFilter,
+  onClickToOpenDownloadBottomSheet
 }: CashReceiptListProps) => {
+  const { t, i18n } = useTranslation();
+  
+  const { groupDate, setGroupDate } = useGroupDateStore();
+  const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
+    
+  const [listHeight, setListHeight] = useState<number>(0);
+
   const getListDateGroup = () => {
     let rs = [];
     let date = '';
@@ -51,11 +64,94 @@ export const CashReceiptList = ({
     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 &&
-      { getListDateGroup() }
+        <div className="summary-amount scroll-group-date">
-      </div>
+          <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/transaction/ui/escrow-list.tsx

@@ -1,11 +1,23 @@
+import { useTranslation } from 'react-i18next';
 import { EscrowListProps } from '../model/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 EscrowList = ({ 
   transactionCategory,
   listItems,
-  setDetailData
+  setDetailData,
+  onClickToOpenFilter,
+  onClickToOpenDownloadBottomSheet
 }: EscrowListProps) => {
+  const { t, i18n } = useTranslation();
+  
+  const { groupDate, setGroupDate } = useGroupDateStore();
+  const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
+    
+  const [listHeight, setListHeight] = useState<number>(0);
   
   const getListDateGroup = () => {
     let rs = [];
@@ -52,9 +64,92 @@ export const EscrowList = ({
     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/vat-return/ui/section/amount-section.tsx

@@ -155,7 +155,13 @@ export const AmountSection = ({
         <TaxInvoiceSample
           taxInvoiceSampleOn={ taxInvoiceSampleOn }
           setTaxInvoiceSampleOn={ setTaxInvoiceSampleOn }
-          
+          supplierInfo={ supplierInfo }
+          recipientInfo={ recipientInfo }
+          issueDate={ issueDate }
+          supplyAmount={ supplyAmount }
+          taxAmount={ taxAmount }
+          totalAmount={ totalAmount }
+          transactionDetails={ transactionDetails }
         ></TaxInvoiceSample>
       }
     </>

src/pages/transaction/all-transaction/list-page.tsx

@@ -307,11 +307,10 @@ export const AllTransactionListPage = () => {
     searchCl, searchValue
   ]);
 
-
 	return (
 		<>
 			<main>
-				<div className="tab-content">
+        <div className="tab-content">
 					<div className="tab-pane sub active">
 						<div className="summary-section">
 							<div className="summary-label">{t('transaction.searchAmount')}</div>
@@ -324,14 +323,14 @@ export const AllTransactionListPage = () => {
 										<img
                       src={ IMAGE_ROOT + '/ico_setting.svg' }
                       alt={t('transaction.searchOptions')}
-                      onClick={ () => onClickToOpenFilter() }
+                      onClick={ onClickToOpenFilter }
                     />
 									</button>
 									<button className="download-btn">
 										<img
                       src={ IMAGE_ROOT + '/ico_download.svg' }
                       alt={t('transaction.download')}
-                      onClick={ () => onClickToOpenDownloadBottomSheet() }
+                      onClick={ onClickToOpenDownloadBottomSheet }
                     />
 									</button>
 								</div>
@@ -365,6 +364,8 @@ export const AllTransactionListPage = () => {
               listItems={ listItems }
               transactionCategory={ TransactionCategory.AllTransaction }
               setDetailData={ setDetailData }
+              onClickToOpenFilter={ onClickToOpenFilter }
+              onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
             ></AllTransactionList>
             <div ref={ setTarget }></div>
 					</div>

src/pages/transaction/billing/list-page.tsx

@@ -240,7 +240,7 @@ export const BillingListPage = () => {
 										<img
 											src={ IMAGE_ROOT + '/ico_setting.svg' }
 											alt={ t('transaction.searchOptions') }
-											onClick={ () => onClickToOpenFilter() }
+											onClick={ onClickToOpenFilter }
 										/>
 									</button>
 								</div>
@@ -248,7 +248,7 @@ export const BillingListPage = () => {
 									<img
 										src={ IMAGE_ROOT + '/ico_download.svg' }
 										alt={ t('transaction.download') }
-										onClick={ () => onClickToOpenDownloadBottomSheet() }
+										onClick={ onClickToOpenDownloadBottomSheet }
 									/>
 								</button>
 							</div>
@@ -277,6 +277,8 @@ export const BillingListPage = () => {
 							listItems={ listItems }
 							transactionCategory={ TransactionCategory.Billing }
 							setDetailData={ setDetailData }
+							onClickToOpenFilter={ onClickToOpenFilter }
+              onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
 						></BillingList>
 						<div ref={ setTarget }></div>
 					</div>

src/pages/transaction/cash-receipt/list-page.tsx

@@ -270,7 +270,7 @@ export const CashReceiptListPage = () => {
 										<img
 											src={ IMAGE_ROOT + '/ico_setting.svg' }
 											alt={ t('transaction.searchOptions') }
-											onClick={ () => onClickToOpenFilter() }
+											onClick={ onClickToOpenFilter }
 										/>
 									</button>
 								</div>
@@ -278,7 +278,7 @@ export const CashReceiptListPage = () => {
 									<img
 										src={IMAGE_ROOT + '/ico_download.svg'}
 										alt={ t('transaction.download') }
-										onClick={() => onClickToOpenDownloadBottomSheet()}
+										onClick={ onClickToOpenDownloadBottomSheet }
 									/>
 								</button>
 							</div>
@@ -327,6 +327,8 @@ export const CashReceiptListPage = () => {
 							listItems={ listItems }
 							transactionCategory={ TransactionCategory.CashReceipt }
 							setDetailData={ setDetailData }
+							onClickToOpenFilter={ onClickToOpenFilter }
+              onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
 						></CashReceiptList>
 						<div ref={ setTarget }></div>
 					</div>

src/pages/transaction/escrow/list-page.tsx

@@ -233,7 +233,7 @@ export const EscrowListPage = () => {
 										<img
 											src={ IMAGE_ROOT + '/ico_setting.svg' }
 											alt={ t('transaction.searchOptions') }
-											onClick={ () => onClickToOpenFilter() }
+											onClick={ onClickToOpenFilter }
 										/>
 									</button>
 								</div>
@@ -241,7 +241,7 @@ export const EscrowListPage = () => {
 									<img
 										src={ IMAGE_ROOT + '/ico_download.svg' }
 										alt={ t('transaction.download') }
-										onClick={ () => onClickToOpenDownloadBottomSheet() }
+										onClick={ onClickToOpenDownloadBottomSheet }
 									/>
 								</button>
 							</div>
@@ -270,6 +270,8 @@ export const EscrowListPage = () => {
 							listItems={ listItems }
 							transactionCategory={ TransactionCategory.Escrow }
 							setDetailData={ setDetailData }
+							onClickToOpenFilter={ onClickToOpenFilter }
+              onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
 						></EscrowList>
 						<div ref={ setTarget }></div>
 					</div>

src/shared/ui/assets/css/style-fix.css

@@ -546,5 +546,8 @@ main.pop{
   width: calc(100% - 42px);
   top: 50px;
   padding-left: 10px;
-  
+  padding-bottom: 20px;
+}
+.filter-section{
+  margin-bottom: 0;
 }

src/shared/ui/assets/css/style-tax-invoice.css

@@ -65,7 +65,6 @@
 .tax-invoice {
   margin: 0; background: #FAFAFA;
   min-height: unset; 
-  
   position: fixed;
   left: 0;
   top: 0;