LogView 리팩토링

LogDetailModal 생성
화면별 히스토리(LogDetailModal) 적용

src/pages/UserManage/CaliumRequest.js

@@ -1,4 +1,4 @@
-import { useState, Fragment, useRef } from 'react';
+import React, { useState, Fragment, useRef } from 'react';
 import { useRecoilValue } from 'recoil';
 import { useTranslation } from 'react-i18next';
 import 'react-datepicker/dist/react-datepicker.css';
@@ -19,7 +19,7 @@ import {
 import {Button, ExcelDownButton, Pagination, ViewTableInfo} from '../../components/common';
 import { convertKTC, truncateText } from '../../utils';
 import { CaliumRequestRegistModal } from '../../components/UserManage';
-import { CaliumCharge } from '../../apis';
+import { CaliumCharge, LogHistory } from '../../apis';
 import { useModal, withAuth } from '../../hooks/hook';
 import { CommonSearchBar, useCommonSearch } from '../../components/ServiceManage';
 import { INITIAL_PAGE_LIMIT } from '../../assets/data/adminConstants';
@@ -27,6 +27,8 @@ import { useAlert } from '../../context/AlertProvider';
 import { useLoading } from '../../context/LoadingProvider';
 import { alertTypes } from '../../assets/data/types';
 import useCommonSearchOld from '../../hooks/useCommonSearchOld';
+import LogDetailModal from '../../components/common/modal/LogDetailModal';
+import { historyTables } from '../../assets/data/data';
 
 const CaliumRequest = () => {
 	const token = sessionStorage.getItem('token');
@@ -37,6 +39,7 @@ const CaliumRequest = () => {
 
 	const tableRef = useRef(null);
 	const [selectCharge, setSelectCharge] = useState({});
+	const [historyData, setHistoryData] = useState({});
 
 	const {
 		modalState,
@@ -44,6 +47,7 @@ const CaliumRequest = () => {
 		handleModalClose
 	} = useModal({
 		register: 'hidden',
+		history: 'hidden'
 	});
 
 	const {
@@ -61,6 +65,17 @@ const CaliumRequest = () => {
 
 	const handleSubmit = async (type, param = null) => {
 		switch (type) {
+			case "history":
+				const params = {};
+				params.db_type = "MYSQL"
+				params.sql_id = param.id;
+				params.table_name = historyTables.caliumRequest
+
+				await LogHistory(token, params).then(data => {
+					setHistoryData(data);
+					handleModalView('history');
+				});
+				break;
 			case "detail":
 				showModal(param, {
 					type: alertTypes.info
@@ -138,6 +153,7 @@ const CaliumRequest = () => {
 						<th width="80">요청수량</th>
 						<th width="160">진행상태</th>
 						<th width="210">최종 처리일시</th>
+						<th width="200">히스토리</th>
 					</tr>
 					</thead>
 					<tbody>
@@ -155,15 +171,22 @@ const CaliumRequest = () => {
 										</td>
 										<td>{calium.count}</td>
 										<StatusWapper>
-											<StatusLabel $status={calium.status}>{caliumStatus.map(data => data.value === calium.status && data.name)}</StatusLabel>
+											<StatusLabel
+												$status={calium.status}>{caliumStatus.map(data => data.value === calium.status && data.name)}</StatusLabel>
 											{calium.status === commonStatus.complete && userInfo.auth_list?.some(auth => auth.id === authType.eventUpdate) && calium.create_by === userInfo.name &&
-												<ChargeBtn onClick={() => handleSubmit('chargedConfirm', {id: calium.id, count: calium.count})}>충전</ChargeBtn>
+												<ChargeBtn onClick={() => handleSubmit('chargedConfirm', {
+													id: calium.id,
+													count: calium.count,
+												})}>충전</ChargeBtn>
 											}
 										</StatusWapper>
 										<td>{convertKTC(calium.state_time)}</td>
+										<td><Button theme="line" text="히스토리"
+													handleClick={e => handleSubmit('history', calium)} />
+										</td>
 									</tr>
 								</Fragment>
-							))}
+						))}
 					</tbody>
 				</TableStyle>
 			</TableWrapper>
@@ -185,6 +208,14 @@ const CaliumRequest = () => {
 				userInfo={userInfo}
 			/>
 
+			<LogDetailModal
+				viewMode="changed"
+				detailView={modalState.historyModal}
+				handleDetailView={() => handleModalClose('history')}
+				changedData={historyData}
+				title="히스토리"
+			/>
+
 		</>
 	);
 };