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