드론교통지도 control 부분 주석

src/views/control/alarm/ControlAlarmDetail.js

@@ -1,7 +1,10 @@
-import { useState, useEffect } from 'react';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Card  } from 'reactstrap'
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 
-const ControlAlarmDetail = ({ historyModal, setHistoryModal, controlGpWarnLog }) => {
+const ControlAlarmDetail = ({
+  historyModal,
+  setHistoryModal,
+  controlGpWarnLog
+}) => {
   return (
     <Modal
       isOpen={historyModal}
@@ -10,7 +13,7 @@ const ControlAlarmDetail = ({ historyModal, setHistoryModal, controlGpWarnLog })
     >
       <ModalHeader toggle={() => setHistoryModal(!historyModal)}>
         <div className='drone-ti'>
-                    <span className="drone-name">{controlGpWarnLog?.idntfNum}</span>
+          <span className='drone-name'>{controlGpWarnLog?.idntfNum}</span>
           <span>알림내역</span>
         </div>
       </ModalHeader>
@@ -23,7 +26,7 @@ const ControlAlarmDetail = ({ historyModal, setHistoryModal, controlGpWarnLog })
             <th>날짜</th>
             <th>내용</th>
           </tr>
-                    {controlGpWarnLog ?
+          {controlGpWarnLog ? (
             controlGpWarnLog.map((p, i) => {
               return (
                 <tr key={i}>
@@ -32,25 +35,22 @@ const ControlAlarmDetail = ({ historyModal, setHistoryModal, controlGpWarnLog })
                   <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 color='info' onClick={() => setHistoryModal(!historyModal)}>
           확인
         </Button>
       </ModalFooter>
     </Modal>
-    )
-}
+  );
+};
 
 export default ControlAlarmDetail;

src/views/control/alarm/ControlAlarmList.js

@@ -1,40 +1,49 @@
 import { useEffect, useState } from 'react';
 import { X } from 'react-feather';
 import { useDispatch, useSelector } from 'react-redux';
-import { controlGpArcrftWarnAction, controlGpLogAction } from '../../../modules/control/gp/actions/controlGpAction';
+import { controlGpLogAction } from '../../../modules/control/gp/actions/controlGpAction';
 import ControlAlarmDetail from './ControlAlarmDetail';
 import { Badge } from 'reactstrap';
 
 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 { objectId, isClickObject } = useSelector(state => state.controlMapReducer);
 
+  // 비정상상황 기체 목록
+  const { controlGpArcrftWarnList } = useSelector(
+    state => state.controlGpLogState
+  );
+
+  // 클릭한 기체 Id, 비행중인 기체 클릭 여부
+  const { objectId, isClickObject } = useSelector(
+    state => state.controlMapReducer
+  );
 
+  // 전체 드론, 비정상 드론 개수
   const [total, setTotal] = useState({
     totalDroneCnt: 0,
     totalWarnCnt: 0,
     warnList: []
   });
 
-    const handleWarnDetail = (cntrlId) => {
+  // 비정상상황 상세 히스토리 모달 표출
+  const handleWarnDetail = cntrlId => {
     setHistoryModal(prev => !prev);
-
     dispatch(controlGpLogAction.request({ id: cntrlId }));
-    }
+  };
 
+  // 비행중인 기체 클릭 시 비정상상황 사이드메뉴 닫힘
   useEffect(() => {
     if (isClickObject) {
       props.setOpenAlarmList(false);
     }
+  }, [objectId, isClickObject]);
 
-    }, [objectId, isClickObject])
-
+  // 비정상상황 기체 개수 계산
   useEffect(() => {
     if (controlGpArcrftWarnList) {
       let totalWarnCnt = 0;
@@ -50,10 +59,9 @@ const ControlAlarmList = props => {
           totalDroneCnt: controlGpArcrftWarnList.length,
           totalWarnCnt: totalWarnCnt,
           warnList: controlGpArcrftWarnList
+        };
+      });
     }
-            })
-        }
-
   }, [controlGpArcrftWarnList]);
 
   return (
@@ -63,7 +71,6 @@ const ControlAlarmList = props => {
           <h4>실시간 비정상 알림 정보</h4>
           <button
             className='btn-icon'
-                        // outline
             color='primary'
             onClick={() => props.setOpenAlarmList(false)}
           >
@@ -100,67 +107,36 @@ const ControlAlarmList = props => {
           <h4>알림 목록</h4>
         </div>
         {total?.warnList.map((warn, i) => {
-                    const warnContent = warn.warnType === 'PLAN' ? '비행 경로 이탈' : '비정상 상황 발생'
+          const warnContent =
+            warn.warnType === 'PLAN' ? '비행 경로 이탈' : '비정상 상황 발생';
 
           return (
-                        <div className='layer-content-list' key={i} onClick={() => handleWarnDetail(warn.cntrlId)}>
+            <div
+              className='layer-content-list'
+              key={i}
+              onClick={() => handleWarnDetail(warn.cntrlId)}
+            >
               <dl className='notice-list'>
                 <dt>
                   <div className='list-ti'>
                     <div className='list-left-txt'>{warn.idntfNum}</div>
-                                        <div className='list-right-txt'>{warn.occurDt ? warn.occurDt : '-'}</div>
+                    <div className='list-right-txt'>
+                      {warn.occurDt ? warn.occurDt : '-'}
                     </div>
-                                    <div className='list-ti'>
-                                        <div className='list-left-txt'>{warnContent ? warnContent : '-'}</div>
-                                        <div className='list-right-txt'>{warn.warnCount ? warn.warnCount : '-'}건</div>                                
                   </div>
-                                </dt>
-                            </dl>
-                        </div>
-                    )
-                })}
-                {/* <div className='layer-content-list'>
-                    <dl className='notice-list'>
-                        <dt>
                   <div className='list-ti'>
-                                <div className='list-left-txt'>PAV-001</div>
-                                <div className='list-right-txt'>2022. 09. 02 10:00:30</div>
+                    <div className='list-left-txt'>
+                      {warnContent ? warnContent : '-'}
                     </div>
-                            <div className='list-ti'>
-                                <div className='list-left-txt'>비행 경로 이탈</div>
-                                <div className='list-right-txt'>22건</div>                                
-                            </div>                            
-                        </dt>
-                    </dl>
-                </div>
-                <div className='layer-content-list'>
-                    <dl className='notice-list'>
-                        <dt>
-                            <div className='list-ti'>
-                                <div className='list-left-txt'>PAV-002</div>
-                                <div className='list-right-txt'>2022. 09. 02 11:23:52</div>
+                    <div className='list-right-txt'>
+                      {warn.warnCount ? warn.warnCount : '-'}건
                     </div>
-                            <div className='list-ti'>
-                                <div className='list-left-txt'>비행 경로 이탈</div>
-                                <div className='list-right-txt'>10건</div>                                
                   </div>
                 </dt>
               </dl>
             </div>
-                <div className='layer-content-list'>
-                    <dl className='notice-list'>
-                        <dt>
-                            <div className='list-ti'>
-                                <div className='list-left-txt'>PAV-003</div>
-                                <div className='list-right-txt'>-</div>
-                            </div>                            
-                            <div className='list-ti'>
-                                <div className='list-left-txt'>-</div>
-                                <div className='list-right-txt'>0건</div>                                
-                            </div>                            
-                        </dt>
-                    </dl>
-                </div>                */}
+          );
+        })}
       </div>
 
       <ControlAlarmDetail

src/views/control/alarm/ControlAlarmNotice.js

@@ -1,45 +0,0 @@
-import { Bell, ChevronDown, ChevronUp } from "react-feather";
-import { ReactComponent as DroneMenuIcon } from '../../../assets/images/drone_menu_icon.svg';
-
-const ControlAlarmNotice = () => {
-  {}
-    return(
-        
-      <div>
-        {/* <div className='notice'>
-        <div className='notice-icon'>
-          <Bell size={20} />
-        </div>
-        <div className='notice-txt'>
-          <dl>
-            <dt>
-              <span className='time'>2021-06-17 12:00:00</span>AVSF123 장애물
-              지역에 접근하였습니다111.
-            </dt>
-            <dt>
-              <span className='time'>2021-06-30 13:00:00</span>AVSF123
-              비행금지구역에 접근하였습니다.
-            </dt>
-            <dt>
-              <span className='time'>2021-08-20 14:00:00</span>AVSF123
-              국립공원구역에 접근하였습니다.
-            </dt>
-          </dl>
-        </div>
-        <div className='notice-btn'>
-          <button>
-            <ChevronUp size={15} />
-          </button>
-          <button>
-            <ChevronDown size={15} />
-          </button>
-        </div>
-      </div> */}
-
-      </div>
-      
-     
-    )
-}
-
-export default ControlAlarmNotice;

src/views/control/main/ControlMain.js

@@ -11,7 +11,6 @@ import {
   Cloud,
   CloudRain,
   CloudSnow,
-  Moon,
   Grid
 } from 'react-feather';
 
@@ -19,7 +18,6 @@ import { AiOutlinePoweroff } from 'react-icons/ai';
 import { IoAlertOutline } from 'react-icons/io5';
 import { ReactComponent as DroneMenuIcon } from '../../../assets/images/drone_menu_icon.svg';
 import { Card } from 'reactstrap';
-import ControlAlarmNotice from '../alarm/ControlAlarmNotice';
 import ControlReportList from '../report/ControlReportList';
 import ControlReportDetail from '../report/ControlReportDetail';
 import ControlAlarmList from '../alarm/ControlAlarmList';
@@ -28,71 +26,51 @@ import WebsocketClient from '../../../components/websocket/WebsocketClient';
 import { useDispatch, useSelector } from 'react-redux';
 import { controlweatherAction } from '../../../modules/control/gp/actions/controlGpAction';
 import * as Actions from '../../../modules/account/login/actions/authAction';
-import {
-  ctrlDrawTypeChangeAction,
-  objectUnClickAction
-} from '../../../modules/control/map/actions/controlMapActions';
+import { objectUnClickAction } from '../../../modules/control/map/actions/controlMapActions';
 
 const ControlMain = () => {
   const dispatch = useDispatch();
+  const history = useHistory();
 
+  // 비행중인 기체 클릭 여부
   const { isClickObject } = useSelector(state => state.controlMapReducer);
-  const { controlGpList, controlGroupAuthInfo } = useSelector(
-    state => state.controlGpState
-  );
+
+  // 비행중인 기체 정보
+  const { controlGpList } = useSelector(state => state.controlGpState);
+
+  // 기체 상세 정보
   const { controlDetail, controlWheather } = useSelector(
     state => state.controlGpDtlState
   );
+
+  // 드론 기체 갯수 (드론 + uam)
   const { controlGpCountDrone, controlGpCountFlight } = useSelector(
     state => state.controlGpCountState
   );
 
-  // pav박람회 -> uam, 드론 구별을 위한 임시 코드
-  // (이 작업으로 고도화 하려면 추후에 서버에서 uam타입을 새로 더 받아 작업해야 함)
+  // 드론, uam 기체 갯수
   const [droneCount, setDroneCount] = useState(0);
   const [uamCount, setUamCount] = useState(0);
 
+  // 비정상상황 여부
   const [alarm, setAlarm] = useState(false);
-  const { user } = useSelector(state => state.authState);
-  const [oepnReportList, setOpenReportList] = useState(false);
-  // const [openReportDetail, setOpenReportDetail] = useState(false);
-  // const [openWeatherList, setOpenWeatherList] = useState(false);
 
-  const [openAlarmList, setOpenAlarmList] = useState(false);
+  // 오른쪽 사이드 메뉴 표출 여부
   const [openSetting, setOpenSetting] = useState(true);
-  const history = useHistory();
-
-  const openMenu = val => {
-    if (val === 'reportList') {
-      setOpenReportList(true);
-      // setOpenReportDetail(false);
-      // setOpenWeatherList(false);
-      setOpenAlarmList(false);
-    } else if (val === 'weatherList') {
-      setOpenReportList(false);
-      // setOpenReportDetail(false);
-      // setOpenWeatherList(true);
-      setOpenAlarmList(false);
-    } else if (val === 'alarmList') {
-      dispatch(objectUnClickAction());
-
-      setOpenReportList(false);
-      // setOpenReportDetail(false);
-      // setOpenWeatherList(false);
-      setOpenAlarmList(true);
 
-      setAlarm(false);
-    }
-  };
+  // 왼쪽 드론 정보 사이드 메뉴 표출 여부
+  const [oepnReportList, setOpenReportList] = useState(false);
 
-  // const openReportDetailParam = val => {
-  //   setOpenReportDetail(true);
-  // };
+  // 왼쪽 드론 비정상상황 알림 사이드 메뉴 표출 여부
+  const [openAlarmList, setOpenAlarmList] = useState(false);
 
-  const handlerLogout = () => {
-    dispatch(Actions.logout.request());
+  // 김포공항 좌표
+  const rq = {
+    nx: 37.558522,
+    ny: 126.793722
   };
 
+  // 드론 비정상상황일 시 왼쪽 사이드 메뉴 알람 표시 아이콘 변경
   useEffect(() => {
     if (controlGpList) {
       const warnGps = controlGpList.find(gps => {
@@ -105,6 +83,7 @@ const ControlMain = () => {
     }
   }, [controlGpList]);
 
+  // 비행중인 기체 클릭 시 열려있는 사이드 메뉴 닫기
   useEffect(() => {
     if (isClickObject) {
       setOpenReportList(false);
@@ -112,6 +91,7 @@ const ControlMain = () => {
     }
   }, [isClickObject]);
 
+  // 드론, uam 기체 갯수 계산
   useEffect(() => {
     if (controlGpCountDrone) {
       const uamCnt = controlGpCountDrone.filter(i =>
@@ -126,19 +106,43 @@ const ControlMain = () => {
     }
   }, [controlGpCountDrone]);
 
-  const handlerClose = () => {
+  // 김포공항 날씨 API호출
+  useEffect(() => {
+    dispatch(controlweatherAction.request(rq));
+  }, []);
+
+  // 화면 왼쪽 사이드 메뉴 오픈 시 다른 메뉴 닫기
+  const openMenu = val => {
+    console.log(val, '--');
+    if (val === 'reportList') {
       setOpenReportList(true);
+      setOpenAlarmList(false);
+    } else if (val === 'weatherList') {
+      setOpenReportList(false);
+      setOpenAlarmList(false);
+    } else if (val === 'alarmList') {
       dispatch(objectUnClickAction());
+
+      setOpenReportList(false);
+      setOpenAlarmList(true);
+
+      setAlarm(false);
+    }
   };
-  //날씨 API
-  const rq = {
-    nx: 37.558522,
-    ny: 126.793722
+
+  // 로그아웃
+  const handlerLogout = () => {
+    dispatch(Actions.logout.request());
   };
-  useEffect(() => {
-    dispatch(controlweatherAction.request(rq));
-  }, []);
-  function weathericon() {
+
+  // 드론 상세정보 창 닫기
+  const handlerClose = () => {
+    setOpenReportList(true);
+    dispatch(objectUnClickAction());
+  };
+
+  // 김포공항 날씨 아이콘 설정
+  const weathericon = () => {
     if (controlWheather) {
       let wheatherDetail = controlWheather.items.item;
       let skyDetail = wheatherDetail[6].fcstValue;
@@ -150,24 +154,10 @@ const ControlMain = () => {
         return <Sun size={20} />;
       } else return <Cloud size={20} />;
     }
-  }
-
-  const handlerDrawType = val => {
-    dispatch(ctrlDrawTypeChangeAction(val));
-  };
-
-  const ThemeToggler = () => {
-    if (skin === 'dark') {
-      return <Sun className='ficon' onClick={() => setSkin('light')} />;
-    } else {
-      return <Moon className='ficon' onClick={() => setSkin('dark')} />;
-    }
   };
 
   return (
     <>
-      <ControlAlarmNotice />
-
       <div className='left-menu'>
         <h1 className='logo'>
           <img src={logo} width='80' />
@@ -283,12 +273,6 @@ const ControlMain = () => {
             <div className='data-list-box'>
               <div className='data-list'>
                 <span>드론</span>
-                {/* <span>{controlGpList ? controlGpList.length : 0}</span> */}
-                {/* <span>
-                  {controlGpCountDrone?.length > 0
-                    ? controlGpCountDrone?.length
-                    : 0}
-                </span> */}
                 <span>{droneCount}</span>
               </div>
               <div className='data-list'>
@@ -297,7 +281,6 @@ const ControlMain = () => {
               </div>
               <div className='data-list'>
                 <span>항공기</span>
-                {/* <span>2147대</span> */}
                 <span>
                   {controlGpCountFlight?.length > 0
                     ? controlGpCountFlight?.length
@@ -307,30 +290,10 @@ const ControlMain = () => {
             </div>
           </Card>
         </div>
-        {/* <div className='main-data-box flight-data'>
-          <Card>
-            <div className='data-box-header'>
-              <span className='box-ti'>화재경보</span>
-            </div>
-            <div className='data-list-box'>
-              <div className='data-list' style={{ cursor: 'pointer' }}>
-                <span onClick={() => handlerDrawType('CIRCLE')}>
-                  화재구역설정
-                </span>
-              </div>
-              <div className='data-list' style={{ cursor: 'pointer' }}>
-                <span onClick={() => handlerDrawType('RESET')}>초기화</span>
-              </div>
-            </div>
-          </Card>
-        </div> */}
       </div>
 
       {oepnReportList ? (
-        <ControlReportList
-          // openReportDetailParam={openReportDetailParam}
-          setOpenReportList={setOpenReportList}
-        />
+        <ControlReportList setOpenReportList={setOpenReportList} />
       ) : (
         <div />
       )}
@@ -339,11 +302,6 @@ const ControlMain = () => {
       ) : (
         <div />
       )}
-      {/* {openWeatherList ? (
-        <WeatherList setOpenWeatherList={setOpenWeatherList} />
-      ) : (
-        <div />
-      )} */}
 
       {openAlarmList ? (
         <ControlAlarmList setOpenAlarmList={setOpenAlarmList} />

src/views/control/report/ControlReportDetail.js

@@ -1,45 +1,51 @@
 import moment from 'moment';
-import React, { useMemo } 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';
 import uam_img from '../../../assets/images/uam_img.jpg';
 import drone_yellow from '../../../assets/images/drone_yellow.png';
-import { IMG_PATH } from '../../../configs/constants';
-import { objectUnClickAction } from '../../../modules/control/map/actions/controlMapActions';
 import {
   GET_ARCTFT_TYPE_CD,
   GET_WGHT_TYPE_CD
 } from '../../../utility/CondeUtil';
-import {
-  controlGpLogAction,
-  controlweatherAction
-} from '../../../modules/control/gp';
+import { controlGpLogAction } from '../../../modules/control/gp';
 import ControlAlarmDetail from '../alarm/ControlAlarmDetail';
-import axios from '../../../modules/utils/customAxiosUtil';
 import {
   Navigation2,
-  Search,
   Compass,
   Sun,
   Cloud,
   CloudRain,
   CloudSnow
 } from 'react-feather';
-import { WHEATHER_KEY } from '../../../configs/constants';
 import { Table } from 'reactstrap';
+
 const ControlReportDetail = props => {
   const dispatch = useDispatch();
+
+  // 비정상상황 모달
   const [historyModal, setHistoryModal] = useState(false);
 
+  // 기체 상세정보
   const { controlGpDetail, controlDetail } = useSelector(
     state => state.controlGpDtlState
   );
-  //const { controlWheather } = useSelector(state => state.ControlGpWeatherState);
+
+  // 비정상상황 히스토리 내역
   const { controlGpWarnLog } = useSelector(state => state.controlGpLogState);
 
-  function weathericon() {
+  // 해당 드론의 비정상상황 알림내역 불러옴
+  useEffect(() => {
+    if (historyModal) {
+      if (controlGpDetail) {
+        dispatch(controlGpLogAction.request({ id: controlGpDetail.controlId }));
+      }
+    }
+  }, [historyModal]);
+
+  // 날씨 아이콘 표출
+  const weathericon = () => {
     if (controlDetail) {
       let wheatherDetail = controlDetail.items.item;
       let skyDetail = wheatherDetail[6].fcstValue;
@@ -51,16 +57,9 @@ const ControlReportDetail = props => {
         return <Sun />;
       } else return <Cloud />;
     }
-  }
-
-  useEffect(() => {
-    if (historyModal) {
-      if (controlGpDetail) {
-        dispatch(controlGpLogAction.request({ id: controlGpDetail.controlId }));
-      }
-    }
-  }, [historyModal]);
+  };
 
+  // 상세정보에 내역이 없으면 -로 표출
   const nullMessage = val => {
     if (val) {
       return val;
@@ -68,6 +67,7 @@ const ControlReportDetail = props => {
       return '-';
     }
   };
+
   return (
     <div className='left-layer'>
       <div className='layer-content'>
@@ -76,7 +76,6 @@ const ControlReportDetail = props => {
           <button
             className='btn-icon'
             color='primary'
-            // onClick={() => props.setOpenReportDetail(false)}
             onClick={() => props.handlerClose()}
           >
             <X size={20} />
@@ -101,11 +100,6 @@ const ControlReportDetail = props => {
               : controlGpDetail?.objectId}
           </div>
           <div className='drone-img'>
-            {/* {controlDetail?.imageUrl ? (
-              <img src={IMG_PATH + controlDetail?.imageUrl} />
-            ) : (
-              <img src={drone_img} />
-            )} */}
             {controlGpDetail?.objectId.includes('UAM') ? (
               <img src={uam_img} />
             ) : (
@@ -138,18 +132,6 @@ const ControlReportDetail = props => {
                   {GET_ARCTFT_TYPE_CD(controlDetail?.arcrftTypeCd)}
                 </div>
               </dt>
-              {/* <dt>
-                <div className='list-left-txt'>배터리 잔량</div>
-                <div className='list-right-txt'>
-                  {controlGpDetail?.betteryLevel} %
-                </div>
-              </dt>
-              <dt>
-                <div className='list-left-txt'>배터리 전압</div>
-                <div className='list-right-txt'>
-                  {controlGpDetail?.betteryVoltage} volt
-                </div>
-              </dt> */}
             </dl>
           </div>
         </div>
@@ -177,12 +159,6 @@ const ControlReportDetail = props => {
                     : '-'}
                 </div>
               </dt>
-              {/* <dt>
-                <div className='list-left-txt'>현재위치</div>
-                <div className='list-right-txt'>
-                  인천광역시 부평구 안남로 272
-                </div>
-              </dt> */}
               <dt>
                 <div className='list-left-txt'>속도</div>
                 <div className='list-right-txt'>
@@ -207,25 +183,12 @@ const ControlReportDetail = props => {
                     : '-'}
                 </div>
               </dt>
-              {/* <dt>
-                <div className='list-left-txt'>비행거리</div>
-                <div className='list-right-txt'>
-                  {nullMessage(controlGpDetail?.moveDistance)}{' '}
-                  {controlGpDetail?.moveDistanceType}
-                </div>
-              </dt> */}
               <dt>
                 <div className='list-left-txt'>헤딩 방위각</div>
                 <div className='list-right-txt'>
                   {nullMessage(controlGpDetail?.heading)}
                 </div>
               </dt>
-              {/* <dt>
-                <div className='list-left-txt'>상태</div>
-                <div className='list-right-txt'>
-                  {nullMessage(controlGpDetail?.dronStatus)}
-                </div>
-              </dt> */}
               <dt>
                 <div className='list-left-txt'>위치정보 수신 시간</div>
                 <div className='list-right-txt'>
@@ -248,10 +211,6 @@ const ControlReportDetail = props => {
         <div className='layer-content-box'>
           <div className='layer-content-info'>
             <dl>
-              {/* <dt>
-                <div className='list-left-txt'>소속기관</div>
-                <div className='list-right-txt'>팔네트웍스</div>
-              </dt> */}
               <dt>
                 <div className='list-left-txt'>담당자 이름</div>
                 <div className='list-right-txt'>

src/views/control/report/ControlReportList.js

@@ -3,27 +3,24 @@ import { useState } from 'react';
 import { Search, X } from 'react-feather';
 import { useDispatch, useSelector } from 'react-redux';
 import { Badge, Button, Input, InputGroup } from 'reactstrap';
-import {
-  controlGpDtlAction,
-  controlGpFlightPlanAction
-} from '../../../modules/control/gp';
+import { controlGpDtlAction } from '../../../modules/control/gp';
 import { objectClickAction } from '../../../modules/control/map/actions/controlMapActions';
-import { NavLink } from 'react-router-dom';
 
 const ControlReportList = props => {
+  const dispatch = useDispatch();
+
+  // 비행중인 기체 정보 리스트
   const { controlGpList } = useSelector(state => state.controlGpState);
-  const [filterId, setFilterId] = useState('');
 
-  const dispatch = useDispatch();
+  // 검색한 식별번호
+  const [filterId, setFilterId] = useState('');
 
+  // 기체 상세정보 표출
   const handlerDetail = item => {
     dispatch(objectClickAction(item.controlId));
     dispatch(controlGpDtlAction.request(item.controlId));
-    // dispatch(controlGpFlightPlanAction.request(item.objectId));
   };
 
-  // useEffect(() => {}, [filterId]);
-
   return (
     <div className='left-layer'>
       <div className='layer-content'>
@@ -97,34 +94,6 @@ const ControlReportList = props => {
                       {item.dronStatus ? item.dronStatus : '-'}
                     </div>
                   </dt>
-
-                  {item.objectId.includes('NAMWON') ? (
-                    <dt>
-                      <div className='data-list'>
-                        <NavLink
-                          to='/system/multi/views'
-                          target='_blank'
-                          style={{ width: '100%' }}
-                        >
-                          <span>실시간 영상보기</span>
-                        </NavLink>
-                      </div>
-                    </dt>
-                  ) : (
-                    <></>
-                  )}
-
-                  {/* <dt>
-                    <div className='data-list'>
-                      <a
-                        href='http://palnet.co.kr/'
-                        target='_blank'
-                        style={{ width: '100%' }}
-                      >
-                        <span>실시간 영상보기</span>
-                      </a>
-                    </div>
-                  </dt> */}
                 </dl>
               </div>
             );

src/views/control/setting/ControlSetting.js

@@ -4,15 +4,17 @@ import { Button, ButtonGroup, CustomInput } from 'reactstrap';
 import * as Actions from '../../../modules/menu/actions/menuAction';
 import {
   areaClickAction,
-  mapTypeChangeAction,
-  sensorClickAction
+  mapTypeChangeAction
 } from '../../../modules/control/map/actions/controlMapActions';
 
 const ControlSetting = props => {
   const dispatch = useDispatch();
   const history = useHistory();
+
+  // 지도, 지도타입, 공역 타입 컨트롤
   const mapControl = useSelector(state => state.controlMapReducer);
 
+  // 지도 유형 변경
   const handlerMapType = val => {
     if (val === mapControl.mapType) return;
     if (val === 'TERRAIN') {
@@ -35,24 +37,16 @@ const ControlSetting = props => {
     dispatch(mapTypeChangeAction(val));
   };
 
+  // 공역 표출
   const handlerAreaClick = val => {
     dispatch(areaClickAction(val));
   };
 
-  const handlerSensorClick = (val, isChecked) => {
-    if (isChecked) {
-      dispatch(sensorClickAction(val));
-    } else {
-      dispatch(sensorClickAction(''));
-    }
-  };
-
   return (
     <div className=''>
       <div className='layer-content'>
         <div className='layer-ti'>
           <h4>지도유형</h4>
-          {/* <button className='btn-icon' outline color='primary'><X size={20} /></button> */}
         </div>
         <div className='map-btn'>
           <ButtonGroup>
@@ -270,103 +264,8 @@ const ControlSetting = props => {
           </a>
         </div>
       </div>
-      {/* <div className='layer-content'>
-                <div className='layer-ti'>
-                    <h4>환경지표</h4>
-                </div>
-                <div className='layer-content-box'>
-                    <div className='layer-content-info layer-switch-list'>
-                        <dl>
-                            <dt>
-                                <div className='list-left-txt'>
-                                    <span className='dot-icon color-red'></span>미세먼지(DUST)
-                                </div>
-                                <div className='list-right-txt'>
-                                    <CustomInput
-                                        onChange={e => handlerSensorClick('dust', e.target.checked)}
-                                        className='custom-control-primary'
-                                        type='switch'
-                                        id='sensorDust'
-                                        name='sensorDust'
-                                        inline
-                                        checked={mapControl.sensor === 'dust'}
-                                    // defaultChecked={mapControl.sensor === 'dust'}
-                                    />
-                                </div>
-                            </dt>
-                            <dt>
-                                <div className='list-left-txt'>
-                                    <span className='dot-icon color-pink'></span>오존(O3)
-                                </div>
-                                <div className='list-right-txt'>
-                                    <CustomInput
-                                        onChange={e => handlerSensorClick('o3', e.target.checked)}
-                                        className='custom-control-primary'
-                                        type='switch'
-                                        id='sensorO3'
-                                        name='sensorO3'
-                                        inline
-                                        checked={mapControl.sensor === 'o3'}
-                                    // defaultChecked={mapControl.sensor === 'o3'}
-                                    />
-                                </div>
-                            </dt>
-                            <dt>
-                                <div className='list-left-txt'>
-                                    <span className='dot-icon color-orange'></span>이산화질소(No2)
-                                </div>
-                                <div className='list-right-txt'>
-                                    <CustomInput
-                                        onChange={e => handlerSensorClick('no2', e.target.checked)}
-                                        className='custom-control-primary'
-                                        type='switch'
-                                        id='sensorNo2'
-                                        name='sensorNo2'
-                                        inline
-                                        checked={mapControl.sensor === 'no2'}
-                                    // defaultChecked={mapControl.sensor === 'no2'}
-                                    />
-                                </div>
-                            </dt>
-                            <dt>
-                                <div className='list-left-txt'>
-                                    <span className='dot-icon color-brown'></span>일산화탄소(Co)
-                                </div>
-                                <div className='list-right-txt'>
-                                    <CustomInput
-                                        onChange={e => handlerSensorClick('co', e.target.checked)}
-                                        className='custom-control-primary'
-                                        type='switch'
-                                        id='sensorCo'
-                                        name='sensorCo'
-                                        inline
-                                        checked={mapControl.sensor === 'co'}
-                                    // defaultChecked={mapControl.sensor === 'co'}
-                                    />
-                                </div>
-                            </dt>
-                            <dt>
-                                <div className='list-left-txt'>
-                                    <span className='dot-icon color-purple'></span>아황산가스(So2)
-                                </div>
-                                <div className='list-right-txt'>
-                                    <CustomInput
-                                        onChange={e => handlerSensorClick('so2', e.target.checked)}
-                                        className='custom-control-primary'
-                                        type='switch'
-                                        id='sensorSo2'
-                                        name='sensorSo2'
-                                        inline
-                                        checked={mapControl.sensor === 'so2'}
-                                    // defaultChecked={mapControl.sensor === 'so2'}
-                                    />
-                                </div>
-                            </dt>
-                        </dl>
-                    </div>
-                </div>
-            </div> */}
     </div>
   );
 };
+
 export default ControlSetting;