From 04caab913cc1ca8f52b2137ce7396e1c24c4fc23 Mon Sep 17 00:00:00 2001 From: "focp212@naver.com" Date: Sat, 15 Nov 2025 15:30:08 +0900 Subject: [PATCH] =?UTF-8?q?=EC=9E=90=EA=B8=88=EC=9D=B4=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../model/link-pay/types.ts | 8 +- .../additional-service/ui/ars/ars-list.tsx | 5 +- .../ui/fund-account/result-list-wrap.tsx | 92 ++++++++++++++- .../ui/fund-account/transfer-list-wrap.tsx | 109 ++++++++++++++++-- .../link-payment-history-list.tsx | 99 +++++++++++++++- .../link-payment-history-wrap.tsx | 2 + .../link-payment/link-payment-wait-list.tsx | 99 +++++++++++++++- .../link-payment-wait-send-wrap.tsx | 2 + .../ui/payout/payout-list.tsx | 5 +- src/entities/settlement/ui/list-wrap.tsx | 5 +- src/entities/vat-return/ui/list-wrap.tsx | 5 +- 11 files changed, 405 insertions(+), 26 deletions(-) diff --git a/src/entities/additional-service/model/link-pay/types.ts b/src/entities/additional-service/model/link-pay/types.ts index acb6921..c68c42c 100644 --- 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; mid: string; setDetailData: (detailData: DetailData) => void; -} + onClickToOpenFilter: () => void; + onClickToOpenDownloadBottomSheet: () => void; +}; export interface LinkPaymentWaitListProps { additionalServiceCategory: AdditionalServiceCategory; listItems: Array; mid: string; setDetailData: (detailData: DetailData) => void; -} + onClickToOpenFilter: () => void; + onClickToOpenDownloadBottomSheet: () => void; +}; export interface LinkPaymentHistoryFilterProps extends FilterProps { mid: string; diff --git a/src/entities/additional-service/ui/ars/ars-list.tsx b/src/entities/additional-service/ui/ars/ars-list.tsx index 53c96a2..c1f8a8d 100644 --- 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 = ({ } -
+
0)? listHeight + 'px': 'unset' }} + > { getListDateGroup() }
diff --git a/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx b/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx index 8a0c8e5..6f92d2e 100644 --- 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(''); const [detailTid, setDetailTid] = useState(''); + const { groupDate, setGroupDate } = useGroupDateStore(); + const { groupDateOn, setGroupDateOn } = useGroupDateOnStore(); + + const [listHeight, setListHeight] = useState(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>) => { + let maxItem = null; + if(data.length > 0){ + let numberArr = data.map(( + value: Record, + index: number + ) => { + return value.top; + }); + let max = Math.max(...numberArr); + maxItem = data.filter(( + value: Record, + index: number + ) => { + return value.top === max; + }); + } + + return maxItem? maxItem[0]: null; + }; + + const setScrollAction = (e: Event) => { + let dateHeader = document.querySelectorAll('.date-header'); + let posData: Array> = []; + 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 = () => {
- -
+ { groupDateOn && +
+ { groupDate } +
+ + +
+
+ } +
0)? listHeight + 'px': 'unset' }} + > { getListDateGroup() } -
diff --git a/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx b/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx index 558b37f..6a1b944 100644 --- 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(0); + const { groupDate, setGroupDate } = useGroupDateStore(); + const { groupDateOn, setGroupDateOn } = useGroupDateOnStore(); + + const [listHeight, setListHeight] = useState(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>) => { + let maxItem = null; + if(data.length > 0){ + let numberArr = data.map(( + value: Record, + index: number + ) => { + return value.top; + }); + let max = Math.max(...numberArr); + maxItem = data.filter(( + value: Record, + index: number + ) => { + return value.top === max; + }); + } + + return maxItem? maxItem[0]: null; + }; + + const setScrollAction = (e: Event) => { + let dateHeader = document.querySelectorAll('.date-header'); + let posData: Array> = []; + 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 = () => {
- -
+ { groupDateOn && +
+ { groupDate } +
+ + +
+
+ } +
0)? listHeight + 'px': 'unset' }} + > { getListDateGroup() }
diff --git 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 index 42c28fb..cce9f07 100644 --- 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(0); const getListDateGroup = () => { let rs = []; @@ -56,9 +68,92 @@ export const LinkPaymentHistoryList = ({ return rs; }; + const getMax = (data: Array>) => { + let maxItem = null; + if(data.length > 0){ + let numberArr = data.map(( + value: Record, + index: number + ) => { + return value.top; + }); + let max = Math.max(...numberArr); + maxItem = data.filter(( + value: Record, + index: number + ) => { + return value.top === max; + }); + } + + return maxItem? maxItem[0]: null; + }; + + const setScrollAction = (e: Event) => { + let dateHeader = document.querySelectorAll('.date-header'); + let posData: Array> = []; + 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 ( <> -
+ { groupDateOn && +
+ { groupDate } +
+ + +
+
+ } +
0)? listHeight + 'px': 'unset' }} + > {getListDateGroup()}
diff --git 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 index a6b0fcd..d046d24 100644 --- 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 } >
diff --git 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 index 576531b..bf18de3 100644 --- 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(0); const getListDateGroup = () => { let rs = []; @@ -56,9 +68,92 @@ export const LinkPaymentWaitList = ({ return rs; }; + const getMax = (data: Array>) => { + let maxItem = null; + if(data.length > 0){ + let numberArr = data.map(( + value: Record, + index: number + ) => { + return value.top; + }); + let max = Math.max(...numberArr); + maxItem = data.filter(( + value: Record, + index: number + ) => { + return value.top === max; + }); + } + + return maxItem? maxItem[0]: null; + }; + + const setScrollAction = (e: Event) => { + let dateHeader = document.querySelectorAll('.date-header'); + let posData: Array> = []; + 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 ( <> -
+ { groupDateOn && +
+ { groupDate } +
+ + +
+
+ } +
0)? listHeight + 'px': 'unset' }} + > {getListDateGroup()}
diff --git 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 index 133b92c..b9ea7dd 100644 --- 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 } >
diff --git a/src/entities/additional-service/ui/payout/payout-list.tsx b/src/entities/additional-service/ui/payout/payout-list.tsx index e2d5551..8d15eed 100644 --- 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 = ({
} -
+
0)? listHeight + 'px': 'unset' }} + > {getListDateGroup()}
diff --git a/src/entities/settlement/ui/list-wrap.tsx b/src/entities/settlement/ui/list-wrap.tsx index 9a9b010..b12498e 100644 --- a/src/entities/settlement/ui/list-wrap.tsx +++ b/src/entities/settlement/ui/list-wrap.tsx @@ -606,7 +606,10 @@ export const ListWrap = ({
} -
+
0)? listHeight + 'px': 'unset' }} + > { (periodType === SettlementPeriodType.SETTLEMENT_DATE) && getSettlementDateListDateGroup() } diff --git a/src/entities/vat-return/ui/list-wrap.tsx b/src/entities/vat-return/ui/list-wrap.tsx index 3a0d46e..e5b97c4 100644 --- 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 = () => {
} -
+
0)? listHeight + 'px': 'unset' }} + > {getListDateGroup()}