LogView 리팩토링

LogDetailModal 생성
화면별 히스토리(LogDetailModal) 적용
This commit is contained in:
2025-05-22 14:55:37 +09:00
parent 64bf449de7
commit 1532793cc1
35 changed files with 1977 additions and 352 deletions

View File

@@ -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';
@@ -41,6 +41,9 @@ import { getDateOnly, getTimeOnly, secondToMinutes } from '../../utils/date';
import { alertTypes, battleEventStatusType } from '../../assets/data/types';
import { useAlert } from '../../context/AlertProvider';
import { useLoading } from '../../context/LoadingProvider';
import LogDetailModal from '../../components/common/modal/LogDetailModal';
import { historyTables } from '../../assets/data/data';
import { LogHistory } from '../../apis';
const BattleEvent = () => {
const token = sessionStorage.getItem('token');
@@ -51,6 +54,7 @@ const BattleEvent = () => {
const {withLoading} = useLoading();
const [detailData, setDetailData] = useState({});
const [historyData, setHistoryData] = useState({});
const {
modalState,
@@ -58,6 +62,7 @@ const BattleEvent = () => {
handleModalClose
} = useModal({
detail: 'hidden',
history: 'hidden'
});
const [modalType, setModalType] = useState('regist');
@@ -123,6 +128,17 @@ const BattleEvent = () => {
const handleModalSubmit = async (type, param = null) => {
switch (type) {
case "history":
const params = {};
params.db_type = "MYSQL"
params.sql_id = param.id;
params.table_name = historyTables.battleEvent
await LogHistory(token, params).then(data => {
setHistoryData(data);
handleModalView('history');
});
break;
case "regist":
setModalType('regist');
handleModalView('detail');
@@ -290,40 +306,41 @@ const BattleEvent = () => {
</thead>
<tbody>
{dataList?.event_list?.map(battle => (
<tr key={battle.row_num}>
<td>
<CheckBox name={'select'} id={battle.id}
setData={(e) => handleSelectRow(e, battle)}
checked={isRowSelected(battle.id)} />
</td>
<td>{battle.group_id}</td>
<td>{battle.event_id}</td>
<td>{battle.event_name}</td>
<StatusWapper>
<StatusLabel $status={battle.repeat_type}>
{battleRepeatType.find(data => data.value === battle.repeat_type).name}
</StatusLabel>
</StatusWapper>
<td>{getDateOnly(convertKTCDate(battle.event_start_dt))}</td>
<td>{getDateOnly(battle.event_end_dt)}</td>
<td>{getTimeOnly(convertKTCDate(battle.event_start_dt))}</td>
<td>{getTimeOnly(endTime(convertKTCDate(battle.event_start_dt), battle.event_operation_time))}</td>
<StatusWapper>
<StatusLabel $status={battle.status}>
{battleEventStatus.find(data => data.value === battle.status).name}
</StatusLabel>
</StatusWapper>
<td>{secondToMinutes(battle.round_time)}</td>
<td>{battle.reward_group_id}</td>
<td>{battle.round_count}</td>
<td>{battle.hot_time}</td>
<td>
<Button theme="line" text="상세보기"
handleClick={e => handleModalSubmit('detail', battle.id)} />
</td>
<td>{battle.update_by}</td>
</tr>
))}
<tr key={battle.row_num}>
<td>
<CheckBox name={'select'} id={battle.id}
setData={(e) => handleSelectRow(e, battle)}
checked={isRowSelected(battle.id)} />
</td>
<td>{battle.group_id}</td>
<td>{battle.event_id}</td>
<td>{battle.event_name}</td>
<StatusWapper>
<StatusLabel $status={battle.repeat_type}>
{battleRepeatType.find(data => data.value === battle.repeat_type).name}
</StatusLabel>
</StatusWapper>
<td>{getDateOnly(convertKTCDate(battle.event_start_dt))}</td>
<td>{getDateOnly(battle.event_end_dt)}</td>
<td>{getTimeOnly(convertKTCDate(battle.event_start_dt))}</td>
<td>{getTimeOnly(endTime(convertKTCDate(battle.event_start_dt), battle.event_operation_time))}</td>
<StatusWapper>
<StatusLabel $status={battle.status}>
{battleEventStatus.find(data => data.value === battle.status).name}
</StatusLabel>
</StatusWapper>
<td>{secondToMinutes(battle.round_time)}</td>
<td>{battle.reward_group_id}</td>
<td>{battle.round_count}</td>
<td>{battle.hot_time}</td>
<td>
<Button theme="line" text="상세보기"
handleClick={e => handleModalSubmit('detail', battle.id)} />
</td>
<td><Button theme="line" text="히스토리"
handleClick={e => handleModalSubmit('history', battle)} /></td>
</tr>
))}
</tbody>
</TableStyle>
</TableWrapper>
@@ -344,6 +361,14 @@ const BattleEvent = () => {
rewardData={battleRewardData}
/>
<LogDetailModal
viewMode="changed"
detailView={modalState.historyModal}
handleDetailView={() => handleModalClose('history')}
changedData={historyData}
title="히스토리"
/>
</>
)
};