[관제] 비정상 알림 상세 작업

src/views/control/alarm/ControlAlarmDetail.js

@@ -0,0 +1,54 @@
+import { useState, useEffect } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Card  } from 'reactstrap'
+
+const ControlAlarmDetail = ({ historyModal, setHistoryModal, controlGpWarnLog }) => {
+    return (
+        <Modal
+            isOpen={historyModal}
+            toggle={() => setHistoryModal(!historyModal)}
+            className='modal-dialog-centered historyModal'
+        >
+            <ModalHeader toggle={() => setHistoryModal(!historyModal)}>
+                <div className='drone-ti'>
+                    <span className="drone-name">{controlGpWarnLog?.idntfNum}</span>
+                    <span>알림내역</span>
+                </div>
+            </ModalHeader>
+
+            <ModalBody>
+                <table className='table pal-table'>
+                    <tr>
+                        <th>번호</th>
+                        <th>날짜</th>
+                        <th>내용</th>
+                    </tr>
+                    {controlGpWarnLog ?
+                        controlGpWarnLog.map((p, i) => {
+                            return (
+                                <tr key={i}>
+                                    <th>{i + 1}</th>
+                                    <th>{p.createDt}</th>
+                                    <th>{p.warnType}</th>
+                                </tr>
+                            )
+                        })
+                        :
+                        <tr>
+                            <th colSpan={3}>데이터가 없습니다.</th>
+                        </tr>
+                    }
+                </table>
+            </ModalBody>
+            <ModalFooter>
+                <Button
+                    color='info'
+                    onClick={() => setHistoryModal(!historyModal)}
+                >
+                    확인
+                </Button>
+            </ModalFooter>
+        </Modal>
+    )
+}
+
+export default ControlAlarmDetail;

src/views/control/alarm/ControlAlarmList.js

@@ -1,13 +1,17 @@
 import { useEffect, useState } from 'react';
 import { X } from 'react-feather';
 import { useDispatch, useSelector } from 'react-redux';
-import { controlGpArcrftWarnAction } from '../../../modules/control/gp/actions/controlGpAction';
+import { controlGpArcrftWarnAction, controlGpLogAction } from '../../../modules/control/gp/actions/controlGpAction';
+import ControlAlarmDetail from './ControlAlarmDetail';
 
 const ControlAlarmList = props => {
     const dispatch = useDispatch();
     
+    const [historyModal, setHistoryModal] = useState(false);
+
     const { controlGpList } = useSelector(state => state.controlGpState);
     const { controlGpArcrftWarnList } = useSelector(state => state.controlGpLogState);    
+    const { controlGpWarnLog } = useSelector(state => state.controlGpLogState);
     
     const [total, setTotal] = useState({
         totalDroneCnt: 0,
@@ -15,6 +19,12 @@ const ControlAlarmList = props => {
         warnList: []
     });    
 
+    const handleWarnDetail = (cntrlId) => {
+        setHistoryModal(prev => !prev);
+
+        dispatch(controlGpLogAction.request({id : cntrlId}));
+    }
+
     useEffect(() => {
         if(controlGpArcrftWarnList) {
             let totalWarnCnt = 0;
@@ -90,11 +100,11 @@ const ControlAlarmList = props => {
                 <div className='layer-ti'>
                     <h4>알림 목록</h4>
                 </div>
-                {!total ? null : total.warnList.map((warn, i) => {
+                {total?.warnList.map((warn, i) => {
                     const warnContent = warn.warnType === 'PLAN' ? '비행 경로 이탈' : '비정상 상황 발생'
 
                     return (
-                        <div className='layer-content-list' key={i}>
+                        <div className='layer-content-list' key={i} onClick={() => handleWarnDetail(warn.cntrlId)}>
                             <dl className='notice-list'>
                                 <dt>
                                     <div className='list-ti'>
@@ -153,6 +163,12 @@ const ControlAlarmList = props => {
                     </dl>
                 </div>                */}
             </div>
+
+            <ControlAlarmDetail 
+                historyModal={historyModal}
+                setHistoryModal={setHistoryModal}
+                controlGpWarnLog={controlGpWarnLog}
+            />
         </div>
     );
 };

src/views/control/report/ControlReportDetail.js

@@ -11,8 +11,9 @@ import {
   GET_ARCTFT_TYPE_CD,
   GET_WGHT_TYPE_CD
 } from '../../../utility/CondeUtil';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Card  } from 'reactstrap'
+
 import { controlGpLogAction } from '../../../modules/control/gp';
+import ControlAlarmDetail from '../alarm/ControlAlarmDetail';
 
 const ControlReportDetail = props => {
   const dispatch = useDispatch();
@@ -62,53 +63,6 @@ const ControlReportDetail = props => {
             <button type="button" className='history-btn'onClick={() => setHistoryModal(!historyModal)}>비정상상황 알림내역</button> 
         </div>
 
-        <Modal
-          isOpen={historyModal}
-          toggle={() => setHistoryModal(!historyModal)}
-          className='modal-dialog-centered historyModal'
-        >
-        <ModalHeader toggle={() => setHistoryModal(!historyModal)}>
-        <div className='drone-ti'>
-          <span className="drone-name">{controlGpDetail?.objectId}</span>
-          <span>알림내역</span>
-        </div>
-      
-        </ModalHeader>
-        <ModalBody>
-          <table className='table pal-table'>
-            <tr>
-              <th>번호</th>
-              <th>날짜</th>
-              <th>내용</th>
-            </tr>
-            {controlGpWarnLog ?
-              controlGpWarnLog.map((p, i) => {
-                return (
-                  <tr>
-                    <th>{i+1}</th>
-                    <th>{p.createDt}</th>
-                    <th>{p.warnType}</th>
-                  </tr>
-                )
-              })
-            :
-                <tr>
-                  <th colSpan={3}>데이터가 없습니다.</th>
-                </tr>
-            }
-          </table>
-        </ModalBody>
-        <ModalFooter>
-          <Button
-            color='info'
-            onClick={() => setHistoryModal(!historyModal)}
-          >
-            확인
-          </Button>
-        </ModalFooter>
-      </Modal>
-
-
         <div className='layer-content-box'>
           <div className='drone-ti'>
             <img src={drone_yellow} width='40' />
@@ -272,6 +226,12 @@ const ControlReportDetail = props => {
           </div>
         </div>
       </div>
+
+      <ControlAlarmDetail 
+        historyModal={historyModal}
+        setHistoryModal={setHistoryModal}
+        controlGpWarnLog={controlGpWarnLog}
+      />
     </div>
   );
 };