From 186b50ec25facaaab55fe7ecbfae43fe6faa73ee Mon Sep 17 00:00:00 2001 From: "focp212@naver.com" Date: Sat, 15 Nov 2025 15:11:55 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B6=80=EA=B0=80=EC=84=9C=EB=B9=84=EC=8A=A4?= =?UTF-8?q?=20=EC=A0=95=EC=82=B0=20=EC=8B=A0=EC=9A=A9=EC=B9=B4=EB=93=9CARS?= =?UTF-8?q?=20=20=EC=A7=80=EA=B8=89=EB=8C=80=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../additional-service/model/ars/types.ts | 2 + .../additional-service/model/payout/types.ts | 4 +- .../additional-service/ui/ars/ars-list.tsx | 210 ++++++++++++----- .../ui/payout/payout-list.tsx | 213 +++++++++++++----- src/entities/settlement/ui/list-wrap.tsx | 91 +++++++- src/entities/vat-return/ui/list-wrap.tsx | 126 +++++++++-- .../additional-service/ars/list-page.tsx | 2 + .../additional-service/payout/list-page.tsx | 2 + 8 files changed, 507 insertions(+), 143 deletions(-) diff --git a/src/entities/additional-service/model/ars/types.ts b/src/entities/additional-service/model/ars/types.ts index f5a363a..d364617 100644 --- a/src/entities/additional-service/model/ars/types.ts +++ b/src/entities/additional-service/model/ars/types.ts @@ -26,6 +26,8 @@ export interface ArsListProps { listItems: Array; mid: string; setDetailData: (detailData: DetailData) => void; + onClickToOpenFilter: () => void; + onClickToOpenDownloadBottomSheet: () => void; } export interface ExtensionArsResendParams { diff --git a/src/entities/additional-service/model/payout/types.ts b/src/entities/additional-service/model/payout/types.ts index bec8d61..fbe7f0f 100644 --- a/src/entities/additional-service/model/payout/types.ts +++ b/src/entities/additional-service/model/payout/types.ts @@ -19,7 +19,9 @@ export interface PayoutListProps { searchDateType: PayoutSearchDateType mid: string; setDetailData: (detailData: DetailData) => void; -} + onClickToOpenFilter: () => void; + onClickToOpenDownloadBottomSheet: () => void; +}; export interface PayoutListItem { tid?: string; diff --git a/src/entities/additional-service/ui/ars/ars-list.tsx b/src/entities/additional-service/ui/ars/ars-list.tsx index 5d98345..53c96a2 100644 --- a/src/entities/additional-service/ui/ars/ars-list.tsx +++ b/src/entities/additional-service/ui/ars/ars-list.tsx @@ -1,68 +1,160 @@ +import { useEffect, useState } from "react"; import { ArsListProps } from "../../model/ars/types"; import { AdditionalServiceCategory, 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 ArsList = ({ - additionalServiceCategory, - listItems, - mid, - setDetailData + additionalServiceCategory, + listItems, + mid, + setDetailData, + onClickToOpenFilter, + onClickToOpenDownloadBottomSheet }: ArsListProps) => { + const { t, i18n } = useTranslation(); + + const { groupDate, setGroupDate } = useGroupDateStore(); + const { groupDateOn, setGroupDateOn } = useGroupDateOnStore(); + + const [listHeight, setListHeight] = useState(0); - const getListDateGroup = () => { - let rs = []; - let date = ''; - let list: Array = []; - for (let i = 0; i < listItems.length; i++) { - let item = listItems[i]; - if (!!item) { - let orderDate = item?.orderDate || ''; - let itemDate = orderDate.substring(0, 8); - if (!!itemDate) { - if (i === 0) { - date = itemDate; - } - if (date !== itemDate) { - if (list.length > 0) { - rs.push( - - ); - } - date = itemDate; - list = []; - } - list.push(item); - } - } - } - if (list.length > 0) { - rs.push( - - ); - } - return rs; - }; + const getListDateGroup = () => { + let rs = []; + let date = ''; + let list: Array = []; + for(let i=0;i 0){ + rs.push( + + ); + } + date = itemDate; + list = []; + } + list.push(item); + } + } + } + if(list.length > 0){ + rs.push( + + ); + } + return rs; + }; - return ( - <> -
- {getListDateGroup()} -
- - ) + 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; + }; -} \ No newline at end of file + 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 } +
+ + +
+
+ } +
+ { getListDateGroup() } +
+ + ); + +}; \ No newline at end of file diff --git a/src/entities/additional-service/ui/payout/payout-list.tsx b/src/entities/additional-service/ui/payout/payout-list.tsx index e669d2e..e2d5551 100644 --- a/src/entities/additional-service/ui/payout/payout-list.tsx +++ b/src/entities/additional-service/ui/payout/payout-list.tsx @@ -1,69 +1,162 @@ +import { useTranslation } from "react-i18next"; import { PayoutListProps, PayoutSearchDateType } from "../../model/payout/types"; import { AdditionalServiceCategory } 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 PayoutList = ({ - additionalServiceCategory, - listItems, - searchDateType, - mid, - setDetailData + additionalServiceCategory, + listItems, + searchDateType, + mid, + setDetailData, + onClickToOpenFilter, + onClickToOpenDownloadBottomSheet }: PayoutListProps) => { + const { t, i18n } = useTranslation(); + + const { groupDate, setGroupDate } = useGroupDateStore(); + const { groupDateOn, setGroupDateOn } = useGroupDateOnStore(); + + const [listHeight, setListHeight] = useState(0); - const getListDateGroup = () => { - let rs = []; - let date = ''; - let list = []; - for (let i = 0; i < listItems.length; i++) { - let itemDateStr = ''; - if (searchDateType === PayoutSearchDateType.REQUEST_DATE) { - itemDateStr = listItems[i]?.requestDate || ''; - } else if (searchDateType === PayoutSearchDateType.SETTLEMENT_DATE) { - itemDateStr = listItems[i]?.settlementDate || ''; - } - let itemDate = itemDateStr.substring(0, 8); - if (i === 0) { - date = itemDate; - } - if (date !== itemDate) { - if (list.length > 0) { - rs.push( - - ); - } - date = itemDate; - list = []; - } - list.push(listItems[i] as any); - } - if (list.length > 0) { - rs.push( - - ); - } - return rs; - }; + const getListDateGroup = () => { + let rs = []; + let date = ''; + let list = []; + for (let i=0;i 0){ + rs.push( + + ); + } + date = itemDate; + list = []; + } + list.push(listItems[i] as any); + } + if(list.length > 0){ + rs.push( + + ); + } + return rs; + }; - return ( - <> -
- {getListDateGroup()} -
- - ) + 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; + }; -} \ No newline at end of file + 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 } +
+ + +
+
+ } +
+ {getListDateGroup()} +
+ + ); + +}; \ No newline at end of file diff --git a/src/entities/settlement/ui/list-wrap.tsx b/src/entities/settlement/ui/list-wrap.tsx index a178f26..9a9b010 100644 --- a/src/entities/settlement/ui/list-wrap.tsx +++ b/src/entities/settlement/ui/list-wrap.tsx @@ -1,6 +1,6 @@ import moment from 'moment'; import { useEffect, useState } from 'react'; -import { IMAGE_ROOT } from '@/shared/constants/common'; +import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common'; import { ListDateGroup } from './list-date-group'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant'; @@ -29,7 +29,7 @@ import { SettlementsHistoryExcelParams } from '../model/types'; import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types'; -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'; @@ -87,6 +87,11 @@ export const ListWrap = ({ const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState(false); + const { groupDate, setGroupDate } = useGroupDateStore(); + const { groupDateOn, setGroupDateOn } = useGroupDateOnStore(); + + const [listHeight, setListHeight] = useState(0); + const { mutateAsync: settlementsHistory } = useSettlementsHistoryMutation(); const { mutateAsync: settlementsHistorySummary} = useSettlementsHistorySummaryMutation(); const { mutateAsync: settlementsTransactionList } = useSettlementsTransactionListMutation(); @@ -420,6 +425,51 @@ export const ListWrap = ({ }); } }; + + 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(); @@ -427,7 +477,21 @@ export const ListWrap = ({ mid, periodType, sortType, startDate, endDate, paymentMethod - ]); + ]); + + 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 ( <> @@ -521,6 +585,27 @@ export const ListWrap = ({ + { groupDateOn && +
+ { groupDate } +
+ + +
+
+ }
{ (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 5b35360..3a0d46e 100644 --- a/src/entities/vat-return/ui/list-wrap.tsx +++ b/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(false); const [detailTaxInvoiceNumber, setDetailTaxInvoiceNumber] = useState(''); + const { groupDate, setGroupDate } = useGroupDateStore(); + const { groupDateOn, setGroupDateOn } = useGroupDateOnStore(); + + const [listHeight, setListHeight] = useState(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>) => { + 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(); + }, [ + 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 ( <>
@@ -223,34 +288,55 @@ export const ListWrap = () => {
+ { groupDateOn && +
+ { groupDate } +
+ + +
+
+ }
{getListDateGroup()}
diff --git a/src/pages/additional-service/ars/list-page.tsx b/src/pages/additional-service/ars/list-page.tsx index 48b2bd3..3b66309 100644 --- a/src/pages/additional-service/ars/list-page.tsx +++ b/src/pages/additional-service/ars/list-page.tsx @@ -291,6 +291,8 @@ export const ArsListPage = () => { listItems={listItems} mid={mid} setDetailData={setDetailData} + onClickToOpenFilter={ onClickToOpenFilter } + onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet } >
diff --git a/src/pages/additional-service/payout/list-page.tsx b/src/pages/additional-service/payout/list-page.tsx index 5a6b0e4..fc5cc4e 100644 --- a/src/pages/additional-service/payout/list-page.tsx +++ b/src/pages/additional-service/payout/list-page.tsx @@ -348,6 +348,8 @@ export const PayoutListPage = () => { searchDateType={searchDateType} mid={mid} setDetailData={setDetailData} + onClickToOpenFilter={ onClickToOpenFilter } + onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet } >