비정상상황 알림내역 팝업

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' />