From a78e5ccc04b411c613d57bcec8bad7d70e900ce7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?=
 <stc9606@palnet.co.kr>
Date: Thu, 11 Aug 2022 15:29:19 +0900
Subject: [PATCH] =?UTF-8?q?=EB=93=9C=EB=A1=A0=20=EC=9A=B4=ED=95=AD?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=ED=91=9C=EC=B6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/map/naver/NaverMap.js          | 14 ++-----
 src/components/map/naver/dron/DronMarker.js   | 41 +++++++++++++++++++
 src/components/map/naver/dron/DronPlan.js     |  4 +-
 .../control/map/reducers/controlMapReducer.ts |  2 +-
 4 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/src/components/map/naver/NaverMap.js b/src/components/map/naver/NaverMap.js
index fd98985..3f85905 100644
--- a/src/components/map/naver/NaverMap.js
+++ b/src/components/map/naver/NaverMap.js
@@ -1,26 +1,18 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import dronicon from '../../../assets/control/icon/drone.png';
 import { DronMarker } from './dron/DronMarker';
 import { DronHistory } from './dron/DronHistory';
-
 import NaverMapControl from './NaverMapControl';
 import { NaverMapSearch } from './search/NaverMapSearch';
 import { FeatureAirZone } from './feature/FeatureAirZone';
 import geoJson from '../geojson/airArea.json';
-import SensorZone from "./sensor/SensorZone";
 import { controlGroupAuthAction } from '../../../modules/control/gp';
 import DronPlan from './dron/DronPlan';
-import DronToast from './dron/DronToast';
-import { toast } from 'react-toastify';
 
 export const NaverCustomMap = () => {
     const dispatch = useDispatch();
-    const naver = window.naver;
-
-    // const { controlGpContains } = useSelector(state => state.controlGpFltPlanState);
-
-    const [isMapLoad, setIsMapLoad] = useState(false);
+    const naver = window.naver;    
+    
     const [mapObject, setMapObject] = useState(null);
     const [arrPolyline, setArrPolyline] = useState([]);
 
@@ -39,7 +31,7 @@ export const NaverCustomMap = () => {
             center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
             zoom: 10,
             zoomControl: true,
-            mapTypeId: naver.maps.MapTypeId.HYBRID,
+            mapTypeId: naver.maps.MapTypeId.NORMAR,
             zoomControlOptions: {
                 position: naver.maps.Position.TOP_LEFT,
 
diff --git a/src/components/map/naver/dron/DronMarker.js b/src/components/map/naver/dron/DronMarker.js
index f61ab98..3bd155c 100644
--- a/src/components/map/naver/dron/DronMarker.js
+++ b/src/components/map/naver/dron/DronMarker.js
@@ -105,6 +105,9 @@ export const DronMarker = props => {
 
         marker.setMap(props.map);
 
+        // drone 정보 창
+        markerInfoWindow(marker);
+
         naver.maps.Event.addListener(marker, 'click', function (e) {
             handlerDronClick(marker);
         });
@@ -182,5 +185,43 @@ export const DronMarker = props => {
         setArrMarkers(arrData);
     };
 
+    const markerInfoWindow = (marker) => {
+        controlGpList.forEach(gps => {
+            
+            const contents = [
+                `<div class="tooltip-box">`,
+                `   <div class="tooltip-ti">`,
+                `       <span>${marker.id}</span>`,
+                `   </div>`,
+                `   <div class="tooltip-txt">`,
+                `       <div class="tooltip-txt-list">`,                
+                `          <span>${gps.speed}${gps.speedType}</span>`,
+                `       </div>`,
+                `       <div class="tooltip-txt-list">`,
+                `          <span>${gps.elev}${gps.elevType}</span>`,
+                `       </div>`,
+                `       <div class="tooltip-txt-list">`,
+                `          <span>${gps.heading}</span>`,
+                `       </div>`,
+                `   </div>`,
+                `</div>`
+            ].join('');
+
+            const info = new naver.maps.InfoWindow({ 
+                id: marker.id,
+                content: contents,
+                backgroundColor: '#283046', //박스안쪽영역 컬러                
+                anchorSize: new props.naver.maps.Size(30, -10),
+                anchorSkew: false,
+                anchorColor: '#283046',
+                pixelOffset: new props.naver.maps.Point(20, -20)
+            });
+
+            console.log(info);
+
+            info.open(props.map, marker);
+        });
+    }
+
     return null;
 };
diff --git a/src/components/map/naver/dron/DronPlan.js b/src/components/map/naver/dron/DronPlan.js
index bb8e03d..c669b16 100644
--- a/src/components/map/naver/dron/DronPlan.js
+++ b/src/components/map/naver/dron/DronPlan.js
@@ -11,9 +11,7 @@ const DronPlan = ({ naver, map }) => {
     const { controlGpList } = useSelector(state => state.controlGpState);
     const { controlGpFltPlanList } = useSelector(state => state.controlGpFltPlanState);
     const { objectId, isClickObject } = useSelector(state => state.controlMapReducer);
-    const { controlGpContains } = useSelector(state => state.controlGpFltPlanState);
-
-
+    
     const [area, setArea] = useState(); // 비행 구역 관리
     const [buffer, setBuffer] = useState(); // 버퍼 구역 관리
     const [controlId, setControlId] = useState(); // 식별번호 저장
diff --git a/src/modules/control/map/reducers/controlMapReducer.ts b/src/modules/control/map/reducers/controlMapReducer.ts
index 0eb82f5..116007a 100644
--- a/src/modules/control/map/reducers/controlMapReducer.ts
+++ b/src/modules/control/map/reducers/controlMapReducer.ts
@@ -1,6 +1,6 @@
 // ** Initial State
 const initialState = {
-  mapType: 'HYBRID',
+  mapType: 'NORMAL',
   objectId: null,
   isClickObject: false,
   area0001: true, // 비행금지 구역