관제 데이터블록 custom overlay

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

@@ -37,7 +37,7 @@ export const DronMarker = props => {
   const { joinList } = useSelector(state => state.groupState);
 
   const [arrMarkers, setArrMarkers] = useState([]);
-  // const [arrInfos, setArrInfos] = useState([]);
+  const [arrInfos, setArrInfos] = useState([]);
 
   let naver = props.naver;
   let map = props.map;
@@ -95,6 +95,12 @@ export const DronMarker = props => {
     );
   }, []);
 
+  useEffect(() => {
+    if (arrMarkers.length != 0) {
+      markerInfo(arrMarkers);
+    }
+  }, [arrMarkers]);
+
   useEffect(() => {
     markerInit();
   }, [controlGpList]);
@@ -302,6 +308,16 @@ export const DronMarker = props => {
           const arrData = arrMarkers.filter(item => item.id != marker.id);
           removeArrMarkers(arrData);
 
+          dispatch(objectUnClickAction());
+        }
+      });
+      arrInfos.map(info => {
+        const isExists = controlGpList.find(item => item.objectId === info._id);
+        if (!isExists) {
+          removeInfos(info);
+          const arrData = arrInfos.filter(item => item.id != info._id);
+          removeArrInfos(arrData);
+
           dispatch(objectUnClickAction());
         }
       });
@@ -317,10 +333,10 @@ export const DronMarker = props => {
 
         if (arrMarkers) {
           const isExists = arrMarkers.find(ele => ele.id === item.objectId);
-          // const isInfos = arrInfos.find( info => info._id === item.objectId )
+          const isInfos = arrInfos.find(info => info._id === item.objectId);
           if (isExists) {
             moveMarkers(isExists, position, item);
-            // moveInfos(isInfos, position);
+            moveInfos(isInfos, position);
           } else {
             addMarkers(position, item.objectId, item.controlId, item);
           }
@@ -440,9 +456,9 @@ export const DronMarker = props => {
     setArrInfos(arrData);
   };
 
-  const markerInfo = () => {
+  const markerInfo = arrMarkers => {
     arrMarkers.forEach((marker, idx) => {
-      // infoInit(marker, controlGpList[idx], idx);
+      infoInit(marker, controlGpList[idx], idx);
 
       if (controlGpList.length != 0) {
         const info = new CustomOverlay({