From b48d0fd8447bf339bbbbecf3b9ad50103288b7af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?=
 <junh_eee@naver.com>
Date: Fri, 17 Nov 2023 15:32:27 +0900
Subject: [PATCH] =?UTF-8?q?=EB=93=9C=EB=A1=A0=EA=B5=90=ED=86=B5=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=EB=B9=84=ED=96=89=EC=98=88=EC=83=81=EA=B2=BD?=
 =?UTF-8?q?=EB=A1=9C=20=EC=82=AC=EB=9D=BC=EC=A7=80=EB=8A=94=20=ED=98=84?=
 =?UTF-8?q?=EC=83=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/map/mapbox/dron/DronPlan.js | 63 +++++++---------------
 1 file changed, 20 insertions(+), 43 deletions(-)

diff --git a/src/components/map/mapbox/dron/DronPlan.js b/src/components/map/mapbox/dron/DronPlan.js
index 1988f60..e296b49 100644
--- a/src/components/map/mapbox/dron/DronPlan.js
+++ b/src/components/map/mapbox/dron/DronPlan.js
@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
 import { handlerGetCircleCoord } from '../../../../utility/DrawUtil';
 
 export const dummyPolyline = [
@@ -404,7 +404,7 @@ export const dummyCircle = [
   }
 ];
 
-export default function DronPlan({ map, planGeo }) {
+export default function DronPlan({ map, planGeo, setPlanGeo }) {
   const { controlGpList } = useSelector(state => state.controlGpState);
   const { controlGpFltPlanList } = useSelector(
     state => state.controlGpFltPlanState
@@ -439,6 +439,13 @@ export default function DronPlan({ map, planGeo }) {
     }
   }, [controlGpList]);
 
+  const updatePlanGeo = feature => {
+    setPlanGeo(prev => ({
+      ...prev,
+      features: [...prev.features, feature]
+    }));
+  };
+
   const planInit = () => {
     // const planList = dummyPolyline;
     // const planList = dummyPolygon;
@@ -486,7 +493,7 @@ export default function DronPlan({ map, planGeo }) {
         },
         properties: { id: 'circle', idntfNum: idntfNum }
       };
-      planGeo.features.push(circle);
+      updatePlanGeo(circle);
       setObjArr(prev => [...prev, { idntfNum: idntfNum, obj: circle }]);
     }
   };
@@ -501,9 +508,8 @@ export default function DronPlan({ map, planGeo }) {
         },
         properties: { id: 'polygon', idntfNum: idntfNum }
       };
-      planGeo.features.push(polygon);
+      updatePlanGeo(polygon);
       setObjArr(prev => [...prev, { idntfNum: idntfNum, obj: polygon }]);
-      // setAreaArr(prev => [...prev, {idntfNum: idntfNum, polygon: polygon}]);
     }
   };
 
@@ -517,9 +523,8 @@ export default function DronPlan({ map, planGeo }) {
         },
         properties: { id: 'line', idntfNum: idntfNum }
       };
-      planGeo.features.push(line);
+      updatePlanGeo(line);
       setObjArr(prev => [...prev, { idntfNum: idntfNum, obj: line }]);
-      // setAreaArr(prev => [...prev, { idntfNum: idntfNum, line: line }]);
     }
 
     if (bufferList && bufferList.length > 1) {
@@ -537,9 +542,8 @@ export default function DronPlan({ map, planGeo }) {
         },
         properties: { id: 'buffer', idntfNum: idntfNum }
       };
-      planGeo.features.push(buffer);
+      updatePlanGeo(buffer);
       setObjArr(prev => [...prev, { idntfNum: idntfNum, obj: buffer }]);
-      // setBufferArr(prev => [...prev, { idntfNum: idntfNum, buffer: buffer }]);
     }
   };
 
@@ -550,46 +554,19 @@ export default function DronPlan({ map, planGeo }) {
         .map(obj => obj.obj);
 
       clearObj.map(obj => {
-        planGeo.features = planGeo.features.filter(
-          geo => geo.properties.idntfNum === obj.properties.idntfNum
+        const feature = planGeo.features.filter(
+          geo => geo.properties.idntfNum !== obj.properties.idntfNum
         );
+        setPlanGeo(prev => ({
+          ...prev,
+          features: feature
+        }));
       });
 
       const saveObj = objArr.filter(obj => !diffArr.includes(obj.idntfNum));
       setObjArr(saveObj);
     }
 
-    // if (areaArr) {
-    //   const clearArea = areaArr
-    //     .filter(area => diffArr.includes(area.idntfNum))
-    //     .map(obj => obj.line);
-
-    //   const clearBuffer = bufferArr
-    //     .filter(buffer => diffArr.includes(buffer.idntfNum))
-    //     .map(obj => obj.buffer);
-
-    //   clearArea.map(area => {
-    //     //지도에서 삭제
-    //     planGeo.features = planGeo.features.filter(
-    //       geo => geo.properties.idntfNum === area.properties.idntfNum
-    //     );
-    //   });
-    //   clearBuffer.map(buffer => {
-    //     //지도에서 삭제
-    //     planGeo.features = planGeo.features.filter(
-    //       geo => geo.properties.idntfNum === buffer.properties.idntfNum
-    //     );
-    //   });
-
-    //   const saveArea = areaArr.filter(area => !diffArr.includes(area.idntfNum));
-    //   const saveBuffer = bufferArr.filter(
-    //     buffer => !diffArr.includes(buffer.idntfNum)
-    //   );
-
-    //   setAreaArr(saveArea);
-    //   setBufferArr(saveBuffer);
-    // }
-
     map?.getSource('plan').setData(planGeo);
   };