자금이체

2025-11-15 15:30:08 +09:00
parent 186b50ec25
commit 04caab913c
11 changed files with 405 additions and 26 deletions
--- a/src/entities/additional-service/model/link-pay/types.ts
+++ b/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;
--- a/src/entities/additional-service/ui/ars/ars-list.tsx
+++ b/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>
 		</>
--- a/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx
+++ b/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>
-
-      <section 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>
+      }
+      <section 
+        className="transaction-list"
+        style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
+      >
        { getListDateGroup() }
-        
      </section>
      <div ref={ setTarget }></div>
      <div className="apply-row">
--- a/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
+++ b/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 = () => {
-    if (!checkGrant(55, 'W')) {
-      showAlert(t('common.nopermission'));
-      return;
-    }
-    navigate(PATHS.additionalService.fundAccount.transferRequest);
-  };
+  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 (
    <>
@@ -335,8 +399,31 @@ export const FundAccountTransferListWrap = () => {
          </div>
        </div>
      </section>
-
-      <section className="transaction-list pb-86">
+      { 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>
+      }
+      <section 
+        className="transaction-list pb-86"
+        style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
+      >
        { getListDateGroup() }
      </section>
      <div ref={ setTarget }></div>
--- 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
@@ -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>
    </>
--- 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
@@ -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">
--- 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
@@ -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>
    </>
--- 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
@@ -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">
--- a/src/entities/additional-service/ui/payout/payout-list.tsx
+++ b/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>
 		</>
--- a/src/entities/settlement/ui/list-wrap.tsx
+++ b/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()
      }
--- a/src/entities/vat-return/ui/list-wrap.tsx
+++ b/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>