비즈니스 로그 위치 변경

src/pages/DataManage/BusinessLogView.js

@@ -5,6 +5,12 @@ import {
 	TableStyle,
 	FormWrapper,
 	TableWrapper,
+	TableActionButton,
+	TableDetailRow,
+	TableDetailContainer,
+	TableDetailFlex,
+	TableDetailColumn,
+	DetailTableInfo,
 } from '../../styles/Components';
 
 import { withAuth } from '../../utils/hook';
@@ -14,7 +20,7 @@ import {
 } from '../../assets/data';
 import { INITIAL_PAGE_LIMIT, INITIAL_PAGE_SIZE } from '../../assets/data/adminConstants';
 import { useTranslation } from 'react-i18next';
-import { DynamicModal, ExcelDownButton, Pagination, ViewTableInfo } from '../../components/common';
+import { 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';
@@ -67,7 +73,7 @@ const BusinessLogView = () => {
 		if (!actor || typeof actor !== 'object') return <></>;
 
 		return (
-			<DetailTable>
+			<DetailTableInfo>
 				<thead>
 				<tr>
 					<th colSpan="2">Actor 정보</th>
@@ -86,7 +92,7 @@ const BusinessLogView = () => {
 					</tr>
 				))}
 				</tbody>
-			</DetailTable>
+			</DetailTableInfo>
 		);
 	};
 
@@ -95,7 +101,7 @@ const BusinessLogView = () => {
 		if (!infos || !Array.isArray(infos) || infos.length === 0) return <></>;
 
 		return (
-			<DetailTable>
+			<DetailTableInfo>
 				<thead>
 				<tr>
 					<th colSpan="2">Infos 정보</th>
@@ -120,7 +126,7 @@ const BusinessLogView = () => {
 					</Fragment>
 				))}
 				</tbody>
-			</DetailTable>
+			</DetailTableInfo>
 		);
 	};
 
@@ -174,26 +180,26 @@ const BusinessLogView = () => {
 										<td>{item.action}</td>
 										<td>{item.domain === 'None' ? '-' : item.domain}</td>
 										<td>
-											<ActionButton onClick={() => toggleRowExpand(index)}>
+											<TableActionButton onClick={() => toggleRowExpand(index)}>
 												{expandedRows[index] ? '접기' : '상세보기'}
-											</ActionButton>
+											</TableActionButton>
 										</td>
 									</tr>
 									{expandedRows[index] && (
-										<DetailRow>
+										<TableDetailRow>
 											<td colSpan={tableHeaders.length}>
-												<DetailContainer>
-													<DetailFlex>
-														<DetailColumn>
+												<TableDetailContainer>
+													<TableDetailFlex>
+														<TableDetailColumn>
 															{renderActorData(item.header?.Actor)}
-														</DetailColumn>
-														<DetailColumn>
+														</TableDetailColumn>
+														<TableDetailColumn>
 															{renderInfosData(item.body?.Infos)}
-														</DetailColumn>
-													</DetailFlex>
-												</DetailContainer>
+														</TableDetailColumn>
+													</TableDetailFlex>
+												</TableDetailContainer>
 											</td>
-										</DetailRow>
+										</TableDetailRow>
 									)}
 								</Fragment>
 							))}
@@ -201,6 +207,7 @@ const BusinessLogView = () => {
 						</TableStyle>
 					</TableWrapper>
 					<Pagination postsPerPage={searchParams.pageSize} totalPosts={dataList?.total_all} setCurrentPage={handlePageChange} currentPage={searchParams.currentPage} pageLimit={INITIAL_PAGE_LIMIT} />
+					<TopButton />
 				</>
 			}
 
@@ -214,64 +221,4 @@ const BusinessLogView = () => {
 	);
 };
 
-// Styled components for the detail view
-const DetailRow = styled.tr`
-	background-color: #f8f9fa;
-`;
-
-const DetailContainer = styled.div`
-	padding: 15px;
-	background-color: #f8f9fa;
-`;
-
-const DetailFlex = styled.div`
-	display: flex;
-	gap: 20px;
-	flex-wrap: wrap;
-`;
-
-const DetailColumn = styled.div`
-	flex: 1 1 48%;
-	min-width: 300px;
-`;
-
-const DetailTable = styled.table`
-	width: 100%;
-	border-collapse: collapse;
-	margin-bottom: 15px;
-	font-size: 12px;
-	
-	th, td {
-		border: 1px solid #ddd;
-		padding: 8px;
-		text-align: left;
-	}
-	
-	th {
-		background-color: #f1f1f1;
-		font-weight: bold;
-	}
-	
-	tr:nth-child(even) {
-		background-color: #f8f8f8;
-	}
-`;
-
-const ActionButton = styled.button`
-	cursor: pointer;
-	background: #4a89dc;
-	color: white;
-	border: none;
-	border-radius: 3px;
-	padding: 2px 5px;
-	font-size: 13px;
-	min-width: max-content;
-	width: 80px;
-	height: 24px;
-	
-	&:hover {
-		background: #3a70bc;
-	}
-`;
-
-export default withAuth(authType.landRead)(BusinessLogView);
+export default withAuth(authType.businessLogRead)(BusinessLogView);

src/pages/DataManage/index.js

@@ -2,3 +2,4 @@ export { default as UserView } from './UserView';
 export { default as LandInfoView } from './LandInfoView';
 export { default as GameLogView } from './GameLogView';
 export { default as CryptView } from './CryptView';
+export { default as BusinessLogView} from './BusinessLogView';