From 20e3ab63e5e1c944048c42cac30ce4af5e8ce008 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?=
 <junheee@palnet.co.kr>
Date: Wed, 16 Nov 2022 16:36:24 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B4=80=EC=A0=9C=20=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=EB=B8=94=EB=A1=9D=20custom=20overlay?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/map/naver/dron/DronMarker.js | 26 +++++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/map/naver/dron/DronMarker.js b/src/components/map/naver/dron/DronMarker.js
index 212b44d3..ad4e9e1a 100644
--- a/src/components/map/naver/dron/DronMarker.js
+++ b/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({