[비행 관제] 상세, 비행구역 초기화 작업

src/components/map/naver/NaverMap.js

@@ -31,10 +31,6 @@ export const NaverCustomMap = () => {
   useEffect(() => {    
   }, [mapObject]);  
 
-  const test = aaaa => {
-    console.log(aaaa);
-  };
-
   const NaverMapInit = () => {
     const mapOptions = {
       center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
@@ -47,16 +43,8 @@ export const NaverCustomMap = () => {
         style: naver.maps.ZoomControlStyle.SMALL
       }
     };
-
-    // map = ;
-    setMapObject(new naver.maps.Map('map', mapOptions));
-    // naver.maps.Event.addListener(map, 'click', function (e) {
-    //   console.log(e);
-    // });
-
-    // naver.maps.Event.addListener(map, 'idle', function (e) {
-    //   console.log(e);
-    // });
+    
+    setMapObject(new naver.maps.Map('map', mapOptions));    
   };
 
   return (
@@ -66,8 +54,7 @@ export const NaverCustomMap = () => {
         <>
           <DronMarker
             map={mapObject}
-            naver={naver}            
-            test={test}
+            naver={naver}                        
           />
           <DronPlan
             map={mapObject}

src/components/map/naver/dron/DronMarker.js

@@ -4,26 +4,24 @@ import '../../../../assets/css/custom.css';
 import DronIconPulple from '../../../../assets/images/drone-marker-icon-pulple.png';
 import DronIcon from '../../../../assets/images/drone-marker-icon.png';
 import { controlGpDtlAction, controlGpHisAction, controlDbHisAction, controlGpFlightPlanAction } from '../../../../modules/control/gp';
-import { objectClickAction } from '../../../../modules/control/map/actions/controlMapActions';
+import { objectClickAction, objectUnClickAction } from '../../../../modules/control/map/actions/controlMapActions';
 
 export const DronMarker = props => {
+  const dispatch = useDispatch();
+
   const { controlGpList } = useSelector(state => state.controlGpState);
   const { controlGroupAuthInfo } = useSelector(state => state.controlGroupAuthState);
-
-  const { objectId, isClickObject } = useSelector(
-    state => state.controlMapReducer
-  );
-  const dispatch = useDispatch();
+  const { objectId, isClickObject } = useSelector(state => state.controlMapReducer);
+  
+  const [arrMarkers, setArrMarkers] = useState([]);
 
   let naver = props.naver;
 
   var contentString = ['<div class="iw_inner"> dddd', '</div>'].join('');
-
   var infowindow = new naver.maps.InfoWindow({
     content: contentString
   });
 
-  const [arrMarkers, setArrMarkers] = useState([]);
 
   useEffect(() => {
     markerInit();
@@ -121,6 +119,8 @@ export const DronMarker = props => {
             item => item.id != marker.id
           );
           removeArrMarkers(arrData);
+
+          dispatch(objectUnClickAction());
         }
       });
     }

src/components/map/naver/dron/DronPlan.js

@@ -1,8 +1,11 @@
 import { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
+import { controlGpFlightPlanInitAction } from '../../../../modules/control/gp';
 
 
 const DronPlan = ({ naver, map }) => {
+    const dispatch = useDispatch();
+
     const { controlGpList } = useSelector(state => state.controlGpState);
     const { controlGpFltPlanList } = useSelector(state => state.controlGpFltPlanState);
     const { objectId, isClickObject } = useSelector(state => state.controlMapReducer);
@@ -13,7 +16,7 @@ const DronPlan = ({ naver, map }) => {
 
     useEffect(() => {
         if (controlGpFltPlanList) {
-            init();        
+            init();
         }
     }, [controlGpFltPlanList])
 
@@ -29,9 +32,9 @@ const DronPlan = ({ naver, map }) => {
         
     }, [objectId ,isClickObject]);
 
-    useEffect(() => {
+    useEffect(() => {        
         // 구역 대상의 드론 데이터가 지도 상에 존재하고 있는지 체크해야 한다. (없을 경우 영역 제거)
-        if(controlId && isClickObject) {            
+        if (controlId && isClickObject) {            
             if (controlGpList) {                
                 const isExist = controlGpList.find(data => data.controlId === controlId)
 
@@ -170,6 +173,8 @@ const DronPlan = ({ naver, map }) => {
                 buffer.setMap(null);
                 setBuffer();
             }
+
+            dispatch(controlGpFlightPlanInitAction());
         }
     }
 

src/components/websocket/WebsocketClient.js

@@ -24,7 +24,7 @@ const WebsocketClient = () => {
 
     websocket.onmessage = e => {
       const data = e.data;      
-      const controlGpList = JSON.parse(data);      
+      const controlGpList = JSON.parse(data);            
       
       dispatch(Actions.controlGpAction.request(controlGpList));
     };

src/modules/control/gp/actions/controlGpAction.ts

@@ -1,6 +1,6 @@
 import { AxiosError } from 'axios';
 import { create } from 'sortablejs';
-import { ActionType, createAsyncAction } from 'typesafe-actions';
+import { ActionType, createAction, createAsyncAction } from 'typesafe-actions';
 import {
   ControlDetailData,
   ControlGpData,
@@ -33,11 +33,13 @@ const CONTROL_GROUP_AUTH_REQUEST = 'control/group/CONTROL_GROUP_AUTH_REQUEST';
 const CONTROL_GROUP_AUTH_SUCCESS = 'control/group/CONTROL_GROUP_AUTH_SUCCESS';
 const CONTROL_GROUP_AUTH_FAILURE = 'control/group/CONTROL_GROUP_AUTH_FAILURE';
 
-// [관제]
+// [관제] 비행 구역 조회
 const CONTROL_FLIGHT_PLAN_REQUEST = 'control/gp/flight/plan/CONTROL_FLIGHT_PLAN_REQUEST';
 const CONTROL_FLIGHT_PLAN_SUCCESS = 'control/gp/flight/plan/CONTROL_FLIGHT_PLAN_SUCCESS';
 const CONTROL_FLIGHT_PLAN_FAILURE = 'control/gp/flight/plan/CONTROL_FLIGHT_PLAN_FAILURE';
 
+const CONTROL_FLIGHT_PLAN_INIT = 'control/gp/flight/plan/CONTROL_FLIGHT_PLAN_INIT';
+
 export const controlGpAction = createAsyncAction(
   CONTROL_GP_REQUEST,
   CONTROL_GP_SUCCESS,
@@ -74,13 +76,16 @@ export const controlGpFlightPlanAction = createAsyncAction(
   CONTROL_FLIGHT_PLAN_FAILURE,
 )<ControlGpFlightPlanRQ, ControlGpFlightPlanDataList, AxiosError>();
 
+export const controlGpFlightPlanInitAction = createAction(CONTROL_FLIGHT_PLAN_INIT)();
+
 const actions = {
   controlGpAction,
   controlGpHisAction,
   controlGpDtlAction,
   controlGpRtDtlAction,
   controlGroupAuthAction,
-  controlGpFlightPlanAction
+  controlGpFlightPlanAction,
+  controlGpFlightPlanInitAction
 };
 
 export type ControlGpAction = ActionType<typeof actions>;

src/modules/control/gp/reducers/controlGpReducer.ts

@@ -5,6 +5,7 @@ import {
   controlGpAction,
   controlGpDtlAction,
   controlGpFlightPlanAction,
+  controlGpFlightPlanInitAction,
   controlGpHisAction,
   controlGpRtDtlAction,
   controlGroupAuthAction
@@ -24,6 +25,7 @@ export const controlGpReducer = createReducer<ControlGpState, ControlGpAction>(
 ).handleAction(controlGpAction.success, (state, action) =>
   produce(state, draft => {
     const { controlGpList } = action.payload;
+    console.log('gps ', controlGpList)
     draft.controlGpList = controlGpList;
   })
 )
@@ -35,7 +37,13 @@ export const controlGpFltPlanReducer = createReducer<ControlGpFlightPlanState, C
     const list = action.payload;
     draft.controlGpFltPlanList = list;
   })
-);
+)
+.handleAction(controlGpFlightPlanInitAction, (state, action) =>
+  produce(state, draft => {    
+    draft.controlGpFltPlanList = undefined;
+  })
+)
+
 
 export const controlGpHisReducer = createReducer<
   ControlGpHisState,