From 4f61d66ff898173a8c88e53eb1ddaa0147b1936a Mon Sep 17 00:00:00 2001
From: geun <1416geun@naver.com>
Date: Fri, 12 Aug 2022 15:00:46 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B9=84=EC=A0=95=EC=83=81=EC=83=81=ED=99=A9?=
 =?UTF-8?q?=20=EC=95=8C=EB=A6=BC=EB=82=B4=EC=97=AD=20=ED=8C=9D=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../control/report/ControlReportDetail.js     | 40 +++++++++++++++++--
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/views/control/report/ControlReportDetail.js b/src/views/control/report/ControlReportDetail.js
index db8c9b5..d6dd0ca 100644
--- a/src/views/control/report/ControlReportDetail.js
+++ b/src/views/control/report/ControlReportDetail.js
@@ -1,5 +1,6 @@
 import moment from 'moment';
 import React from 'react';
+import { useState, useEffect } from 'react';
 import { X } from 'react-feather';
 import { useDispatch, useSelector } from 'react-redux';
 import drone_img from '../../../assets/images/drone.jpg';
@@ -10,8 +11,10 @@ import {
   GET_ARCTFT_TYPE_CD,
   GET_WGHT_TYPE_CD
 } from '../../../utility/CondeUtil';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter  } from 'reactstrap'
 
 const ControlReportDetail = props => {
+  const [historyModal, setHistoryModal] = useState(false);
   const dispatch = useDispatch();
 
   const { controlGpDetail, controlDetail } = useSelector(
@@ -34,7 +37,6 @@ const ControlReportDetail = props => {
       return '-';
     }
   };
-
   return (
     <div className='left-layer'>
       <div className='layer-content'>
@@ -51,9 +53,41 @@ const ControlReportDetail = props => {
         </div>
         
         <div className='layer-content-box mb-1'>
-            <button type="button" className='history-btn'>비정상상황 알림내역</button> 
+            <button type="button" className='history-btn'onClick={() => setHistoryModal(!historyModal)}>비정상상황 알림내역</button> 
         </div>
-      
+        <Modal
+          isOpen={historyModal}
+          toggle={() => setHistoryModal(!historyModal)}
+          className='modal-dialog-centered'
+        >
+          <ModalHeader toggle={() => setHistoryModal(!historyModal)}>
+          (기체명) 비정상상황 알림내역
+          </ModalHeader>
+          <ModalBody>
+            <table className='table pal-table'>
+              <tr>
+                <th>번호</th>
+                <th>날짜</th>
+                <th>내용</th>
+              </tr>
+              <tr>
+                <th>1</th>
+                <th>2022-08-12 22:12:05</th>
+                <th>탈출!!비상탈출!!!</th>
+              </tr>
+            </table>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              color='primary'
+              onClick={() => setHistoryModal(!historyModal)}
+            >
+              확인
+            </Button>
+          </ModalFooter>
+        </Modal>
+
+
         <div className='layer-content-box'>
           <div className='drone-ti'>
             <img src={drone_yellow} width='40' />