비즈니스 로그 수정

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 = () => {
 				/>
 			</FormWrapper>
 			<ViewTableInfo orderType="asc" pageType="B" total={dataList?.total} total_all={dataList?.total_all} handleOrderBy={handleOrderByChange} handlePageSize={handlePageSizeChange}>
-				<ExcelDownButton data={dataList?.generic_list} fileName={t('FILE_BUSINESS_LOG')} />
+				<DownloadContainer>
+					<ExcelDownButton
+						data={dataList?.generic_list}
+						fileName={t('FILE_BUSINESS_LOG')}
+						onLoadingChange={setDownloadState}
+					/>
+					{downloadState.loading && (
+						<CircularProgressWrapper>
+							<CircularProgress
+								progress={downloadState.progress}
+								size={36}
+								progressColor="#4A90E2"
+							/>
+						</CircularProgressWrapper>
+					)}
+				</DownloadContainer>
 			</ViewTableInfo>
-			{loading ? <TableSkeleton width='100%' count={15} /> :
+			{dataLoading ? <TableSkeleton width='100%' count={15} /> :
 				<>
 					<TableWrapper>
 						<TableStyle ref={tableRef}>
@@ -169,7 +217,7 @@ const BusinessLogView = () => {
 							</tr>
 							</thead>
 							<tbody>
-							{dataList?.generic_list?.map((item, index) => (
+							{displayData?.map((item, index) => (
 								<Fragment key={index}>
 									<tr>
 										<td>{item.logTime}</td>
@@ -206,7 +254,15 @@ const BusinessLogView = () => {
 							</tbody>
 						</TableStyle>
 					</TableWrapper>
-					<Pagination postsPerPage={searchParams.pageSize} totalPosts={dataList?.total_all} setCurrentPage={handlePageChange} currentPage={searchParams.currentPage} pageLimit={INITIAL_PAGE_LIMIT} />
+					{dataList?.generic_list &&
+					<FrontPagination
+						data={dataList.generic_list}
+						itemsPerPage={itemsPerPage}
+						currentPage={currentPage}
+						setCurrentPage={setCurrentPage}
+						pageLimit={10}
+						onPageChange={handleClientPageChange}
+					/>}
 					<TopButton />
 				</>
 			}
@@ -221,4 +277,16 @@ const BusinessLogView = () => {
 	);
 };
 
-export default withAuth(authType.businessLogRead)(BusinessLogView);
+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;
+`;