diff --git a/src/pages/DataManage/BusinessLogView.js b/src/pages/DataManage/BusinessLogView.js index d3e7edf..4633d77 100644 --- a/src/pages/DataManage/BusinessLogView.js +++ b/src/pages/DataManage/BusinessLogView.js @@ -1,4 +1,4 @@ -import React, { Fragment, useMemo, useRef, useState } from 'react'; +import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { Title, @@ -20,10 +20,20 @@ import { } from '../../assets/data'; import { INITIAL_PAGE_LIMIT, INITIAL_PAGE_SIZE } from '../../assets/data/adminConstants'; import { useTranslation } from 'react-i18next'; -import { DynamicModal, ExcelDownButton, Pagination, TopButton, ViewTableInfo } from '../../components/common'; +import { + DownloadProgress, + DynamicModal, + ExcelDownButton, + Pagination, + TopButton, + ViewTableInfo, +} from '../../components/common'; import { TableSkeleton } from '../../components/Skeleton/TableSkeleton'; import BusinessLogSearchBar, { useBusinessLogSearch } from '../../components/ServiceManage/searchBar/BusinessLogSearchBar'; import styled from 'styled-components'; +import FrontPagination from '../../components/common/Pagination/FrontPagination'; +import Loading from '../../components/common/Loading'; +import CircularProgress from '../../components/common/CircularProgress'; const BusinessLogView = () => { const token = sessionStorage.getItem('token'); @@ -33,19 +43,45 @@ const BusinessLogView = () => { const [alertMsg, setAlertMsg] = useState(''); const [expandedRows, setExpandedRows] = useState({}); + const [downloadState, setDownloadState] = useState({ + loading: false, + progress: 0 + }); + + const [currentPage, setCurrentPage] = useState(1); + const [itemsPerPage, setItemsPerPage] = useState(500); + const [displayData, setDisplayData] = useState([]); const { searchParams, - loading, + loading: dataLoading, data: dataList, handleSearch, handleReset, handlePageChange, - handlePageSizeChange, handleOrderByChange, updateSearchParams } = useBusinessLogSearch(token, 500, setAlertMsg); + const handlePageSizeChange = (newSize) => { + setItemsPerPage(newSize); + setCurrentPage(1); + }; + + const handleClientPageChange = useCallback((slicedData) => { + setDisplayData(slicedData); + }, []); + + useEffect(() => { + setCurrentPage(1); + if (dataList?.generic_list && dataList.generic_list.length > 0) { + const initialData = dataList.generic_list.slice(0, itemsPerPage); + setDisplayData(initialData); + } else { + setDisplayData([]); + } + }, [dataList, itemsPerPage]); + const toggleRowExpand = (index) => { setExpandedRows(prev => ({ ...prev, @@ -53,7 +89,6 @@ const BusinessLogView = () => { })); }; - // 테이블 헤더 컬럼 구성 const tableHeaders = useMemo(() => { return [ { id: 'logTime', label: '일시', width: '120px' }, @@ -68,7 +103,6 @@ const BusinessLogView = () => { }, []); - // Actor 데이터 렌더링 함수 const renderActorData = (actor) => { if (!actor || typeof actor !== 'object') return <>; @@ -96,7 +130,6 @@ const BusinessLogView = () => { ); }; - // Infos 데이터 렌더링 함수 const renderInfosData = (infos) => { if (!infos || !Array.isArray(infos) || infos.length === 0) return <>; @@ -155,9 +188,24 @@ const BusinessLogView = () => { /> - + + + {downloadState.loading && ( + + + + )} + - {loading ? : + {dataLoading ? : <> @@ -169,7 +217,7 @@ const BusinessLogView = () => { - {dataList?.generic_list?.map((item, index) => ( + {displayData?.map((item, index) => ( {item.logTime} @@ -206,7 +254,15 @@ const BusinessLogView = () => { - + {dataList?.generic_list && + } } @@ -221,4 +277,16 @@ const BusinessLogView = () => { ); }; -export default withAuth(authType.businessLogRead)(BusinessLogView); \ No newline at end of file +export default withAuth(authType.businessLogRead)(BusinessLogView); + +const DownloadContainer = styled.div` + display: flex; + align-items: center; + gap: 10px; +`; + +const CircularProgressWrapper = styled.div` + display: flex; + align-items: center; + justify-content: center; +`; \ No newline at end of file