드론교통관리 비행예상경로 사라지는 현상 수정

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

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+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(
+        const feature = planGeo.features.filter(
-          geo => geo.properties.idntfNum === obj.properties.idntfNum
+          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);
   };