비행 구역 buffer 작업

src/components/basis/flight/plan/FlightPlanAreaMap.js

@@ -39,7 +39,11 @@ const FlightPlanAreaMap = (props) => {
 
     useEffect(() => {             
         ModeInit();
-    }, [mapControl.drawType])
+    }, [mapControl.drawType]);
+
+    useEffect(() => {        
+        setMapAreaCoordList(areaCoordList)
+    }, [areaCoordList]);
 
     const ModeInit = () => {
         setMode(mapControl.drawType)
@@ -122,7 +126,7 @@ const FlightPlanAreaMap = (props) => {
                             map={map} 
                             naver={naver}
                             mode={mode}                  
-                            areaCoordList={areaCoordList}                                        
+                            areaCoordList={mapAreaCoordList}                                        
                             handleCoordinates={handleCoordinates}       
                             handleInitCoordinates={handleInitCoordinates}                                                    
                         /> : null}

src/components/map/naver/draw/FlightPlanDrawTest.js

@@ -6,10 +6,10 @@ import { drawTypeChangeAction } from '../../../../modules/control/map/actions/co
 
 import GeoJSONReader from 'jsts/org/locationtech/jts/io/GeoJSONReader';
 import GeometryFactory from 'jsts/org/locationtech/jts/geom/GeometryFactory';
-import {BufferOp} from 'jsts/org/locationtech/jts/operation/buffer';
+import { BufferOp } from 'jsts/org/locationtech/jts/operation/buffer';
-import {DistanceOp} from 'jsts/org/locationtech/jts/operation/distance/DistanceOp';
+import { DistanceOp } from 'jsts/org/locationtech/jts/operation/distance/DistanceOp';
 
-import JSTSWKTReader from 'jsts/org/locationtech/jts/io/WKTReader'; 
+import JSTSWKTReader from 'jsts/org/locationtech/jts/io/WKTReader';
 import GeoJSONWriter from 'jsts/org/locationtech/jts/io/GeoJSONWriter';
 import JSTSBufferOp from 'jsts/org/locationtech/jts/operation/buffer/BufferOp'
 import JSTSBufferParameter from 'jsts/org/locationtech/jts/operation/buffer/BufferParameters';
@@ -23,10 +23,10 @@ export const FlightPlanDrawTest = props => {
   const [pastBuffer, setBuffer] = useState();
 
   const [pastPolygon, setPolygon] = useState();
-  
+
   const [pastCircle, setCircle] = useState();
   const [pastEve, setEve] = useState();
-  
+
   const [pastDragCircle, setDragCircle] = useState([]);
 
   const naver = props.naver;
@@ -57,21 +57,21 @@ export const FlightPlanDrawTest = props => {
 
   let check;
 
-  useEffect(() => {    
+  useEffect(() => {
     drawInit();
   }, [mapControl.drawType])
 
   useEffect(() => {
     handleDetailDrwa();
-  }, [])
+  }, [props.areaCoordList])
 
   const zoomChange = () => {
     let change;
-    if(change) {
+    if (change) {
       naver.maps.Event.removeListener(change);
     } else {
-      change = naver.maps.Event.addListener(map, 'zoom_changed', function() {
+      change = naver.maps.Event.addListener(map, 'zoom_changed', function () {
-        if(dragCircle) {
+        if (dragCircle) {
           // dragCircle.forEach(prev => prev.setRadius(map._mapOptions.zoom + 5));
           // dragCircle.forEach(prev => prev.setRadius(prev.getRadius() * 1.25));
         }
@@ -79,27 +79,27 @@ export const FlightPlanDrawTest = props => {
     }
   }
 
-  const drawInit = () => {   
+  const drawInit = () => {
-    console.log(mapControl.drawType); 
+    console.log(mapControl.drawType);
-    if(mapControl.drawType==='LINE') {
+    if (mapControl.drawType === 'LINE') {
       onClickButton('LINE');
-    } else if(mapControl.drawType==='CIRCLE') {
+    } else if (mapControl.drawType === 'CIRCLE') {
       onClickButton('CIRCLE');
-    } else if(mapControl.drawType==='POLYGON') {
+    } else if (mapControl.drawType === 'POLYGON') {
       onClickButton('POLYGON');
-    } else if(mapControl.drawType==='RESET') {
+    } else if (mapControl.drawType === 'RESET') {
       onClickReset('RESET')
     }
   }
 
   const onClickButton = (newMode) => {
-    console.log('onClickButton');        
+    console.log('onClickButton');
 
-    zoomChange();    
+    zoomChange();
 
     clearMode(mode);
 
-    if(mode === newMode) {
+    if (mode === newMode) {
       mode = null;
       return;
     }
@@ -109,11 +109,11 @@ export const FlightPlanDrawTest = props => {
     startMode(newMode);
   }
 
-  const clearMode = (mode) => { 
+  const clearMode = (mode) => {
     console.log('clearMode')
 
     // if(!mode) return;
-    
+
     // clear mode는 전체를 다 초기화 하는게 맞지 않을까..? 무조건 drawType이 변할때마다 초기화해주기로..
     if (pastPolyline) {
       console.log('clrea polyline ', pastPolyline)
@@ -126,7 +126,7 @@ export const FlightPlanDrawTest = props => {
     if (pastCircle) {
       console.log('clrea circle ', pastCircle)
       pastCircle.setMap(null);
-      naver.maps.Event.removeListener(pastEve); 
+      naver.maps.Event.removeListener(pastEve);
 
       setCircle();
     }
@@ -136,12 +136,12 @@ export const FlightPlanDrawTest = props => {
       pastDragCircle.forEach(c => c.setMap(null));
 
       setPolygon();
-      setDragCircle([]);        
+      setDragCircle([]);
     }
 
-    finishDraw();   
+    finishDraw();
-    props.handleInitCoordinates();     
+    props.handleInitCoordinates();
-    
+
     // if(mode === 'LINE' && pastPolyline) {
     //   pastPolyline.setMap(null);
     //   pastDragCircle.forEach(c => c.setMap(null));
@@ -176,23 +176,23 @@ export const FlightPlanDrawTest = props => {
     console.log('startMode')
 
     if (!mode) return;
-    
+
     if (mode === 'LINE') {
-      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickPolyline(e) });
+      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolyline(e) });
     } else if (mode === 'POLYGON') {
-      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickPolygon(e) });
+      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolygon(e) });
     } else if (mode === 'CIRCLE') {
-      setEve(naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e) }))
+      setEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }))
     }
   }
 
   const removeListener = () => {
     console.log('removeListener')
-    
+
     naver.maps.Event.removeListener(Eve.clickEve);
     naver.maps.Event.removeListener(Eve.mousedownEve);
     naver.maps.Event.removeListener(Eve.rightclickEve);
-    if(!circle) $(document).off('mousemove.measure');
+    if (!circle) $(document).off('mousemove.measure');
     // if(pastCircle) naver.maps.Event.removeListener(pastEve);
     naver.maps.Event.removeListener(pastEve);
   }
@@ -200,17 +200,17 @@ export const FlightPlanDrawTest = props => {
   const finishDraw = () => {
     console.log('finishDraw')
     removeListener();
-    if(polyline) {
+    if (polyline) {
       let polypaths = polyline.getPath()._array;
-      
+
-      if(guideline) {
+      if (guideline) {
         guideline.setMap(null);
         guideline = '';
       }
-      
+
-      if(polypaths.length >= 2) {
+      if (polypaths.length >= 2) {
         //꼭짓점 circle 생성
-        for(let index = 0; index < polypaths.length; index++) {
+        for (let index = 0; index < polypaths.length; index++) {
           dragCircle.push(
             new naver.maps.Circle({
               strokeOpacity: 1,
@@ -223,12 +223,12 @@ export const FlightPlanDrawTest = props => {
               clickable: true
             })
           )
-          
+
-          dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function() { onMouseDownDrag(index) }))
+          dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function () { onMouseDownDrag(index) }))
         }
         setDragCircle(dragCircle);
         setPolyline(polyline);
-        
+
         setAreaInfo(polypaths);
 
       } else {
@@ -236,13 +236,13 @@ export const FlightPlanDrawTest = props => {
         polyline = '';
       }
 
-    } else if(polygon) {
+    } else if (polygon) {
       let path = polygon.getPath();
       path.pop();
 
       let polygonpaths = polygon.getPath()._array;
       //꼭짓점 circle 생성
-      for(let index = 0; index < polygonpaths.length; index++) {
+      for (let index = 0; index < polygonpaths.length; index++) {
         dragCircle.push(
           new naver.maps.Circle({
             strokeOpacity: 1,
@@ -255,7 +255,7 @@ export const FlightPlanDrawTest = props => {
             clickable: true
           })
         )
-        dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function() { onMouseDownDrag(index) }))
+        dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function () { onMouseDownDrag(index) }))
       }
       setDragCircle(dragCircle);
       setPolygon(polygon);
@@ -267,8 +267,8 @@ export const FlightPlanDrawTest = props => {
     console.log('onClickPolyline')
     var coord = e.coord;
 
-    if(!check) {
+    if (!check) {
-      if(!polyline) {
+      if (!polyline) {
         //가이드라인
         guideline = new naver.maps.Polyline({
           strokeColor: '#283046',
@@ -278,7 +278,7 @@ export const FlightPlanDrawTest = props => {
           map: map
         });
         // lastDistance = guideline.getDistance();
-        
+
         //실제 사용되는 라인
         polyline = new naver.maps.Polyline({
           strokeLineCap: 'round',
@@ -289,21 +289,21 @@ export const FlightPlanDrawTest = props => {
           path: [coord],
           map: map
         });
-        
+
-        Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function() { finishDraw() })
+        Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() })
-        $(document).on('mousemove.measure', function(e) { onMouseMovePolyline(e); });
+        $(document).on('mousemove.measure', function (e) { onMouseMovePolyline(e); });
-        
+
         lastDistance = polyline.getDistance();
         // this._addMileStone(coord, 'Start');
       } else {
         guideline.setPath([e.coord]);
         polyline.getPath().push(coord);
-        
+
         var distance = polyline.getDistance();
         // addMileStone(coord, this._fromMetersToText(distance - this._lastDistance));
         lastDistance = distance;
       }
-    } 
+    }
   }
 
   const onMouseMovePolyline = (e) => {
@@ -312,7 +312,7 @@ export const FlightPlanDrawTest = props => {
       coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
       path = guideline.getPath();
 
-    if(path.getLength() === 2) {
+    if (path.getLength() === 2) {
       path.pop();
     }
 
@@ -323,7 +323,7 @@ export const FlightPlanDrawTest = props => {
     console.log('onClickPolygon')
     var coord = e.coord;
 
-    if(!polygon) {
+    if (!polygon) {
       polygon = new naver.maps.Polygon({
         strokeColor: '#283046',
         strokeOpacity: 1,
@@ -333,8 +333,8 @@ export const FlightPlanDrawTest = props => {
         map: map
       });
 
-      Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function() { finishDraw() })
+      Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() })
-      $(document).on('mousemove.measure', function(e) { onMouseMovePolygon(e) });      
+      $(document).on('mousemove.measure', function (e) { onMouseMovePolygon(e) });
     } else {
       polygon.getPath().push(coord);
     }
@@ -342,13 +342,13 @@ export const FlightPlanDrawTest = props => {
 
   const onMouseMovePolygon = (e) => {
     console.log('onMouseMovePolygon')
-    if(!polygon) return;
+    if (!polygon) return;
 
     var proj = map.getProjection(),
       coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
       path = polygon.getPath();
 
-    if(path.getLength() >= 2) {
+    if (path.getLength() >= 2) {
       path.pop();
     }
 
@@ -359,8 +359,8 @@ export const FlightPlanDrawTest = props => {
     console.log('onClickCircle')
     var coord = e.coord;
 
-    if(!check) {
+    if (!check) {
-      if(!circle) {
+      if (!circle) {
         //가이드라인
         radiusline = new naver.maps.Polyline({
           // strokeStyle: [4, 4],
@@ -382,7 +382,7 @@ export const FlightPlanDrawTest = props => {
           clickable: true
         });
 
-        Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function() { onMouseDownDrag(0); })        
+        Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); })
       } else {
         circle.setRadius(100);
         circle.setCenter(coord);
@@ -398,7 +398,7 @@ export const FlightPlanDrawTest = props => {
   const onMouseDownDrag = (index) => {
     console.log('onMouseDownDrag')
 
-    if(circle) {
+    if (circle) {
       naver.maps.Event.removeListener(Eve.clickEve);
     }
 
@@ -412,8 +412,8 @@ export const FlightPlanDrawTest = props => {
       disableTwoFingerTapZoom: true
     })
 
-    $(document).on('mousemove.measure', function(e) { onMouseMoveDrag(e, index) });
+    $(document).on('mousemove.measure', function (e) { onMouseMoveDrag(e, index) });
-    $(document).on('mouseup.measure', function() { onMouseUpDrag() });
+    $(document).on('mouseup.measure', function () { onMouseUpDrag() });
   }
 
   const onMouseMoveDrag = (e, index) => {
@@ -424,29 +424,29 @@ export const FlightPlanDrawTest = props => {
     var proj = map.getProjection(),
       coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY));
 
-    if(polyline) {
+    if (polyline) {
       var polypaths = polyline.getPath()._array;
 
       let movepath = [];
-      for(let i = 0; i < polypaths.length; i++) {
+      for (let i = 0; i < polypaths.length; i++) {
         let path;
-        if(i === index) {
+        if (i === index) {
           path = coord;
         } else {
           path = polypaths[i]
         }
         movepath.push(path);
       }
-      
+
       polyline.setPath(movepath);
 
-    } else if(polygon) {
+    } else if (polygon) {
       var polygonpaths = polygon.getPath()._array;
 
       let movepath = [];
-      for(let i = 0; i < polygonpaths.length; i++) {
+      for (let i = 0; i < polygonpaths.length; i++) {
         let path;
-        if(i === index) {
+        if (i === index) {
           path = coord;
         } else {
           path = polygonpaths[i]
@@ -455,19 +455,19 @@ export const FlightPlanDrawTest = props => {
       }
       polygon.setPaths(movepath)
 
-    } else if(circle) {
+    } else if (circle) {
       var circlepath = radiusline.getPath(),
         center = circle.getCenter(),
         r = proj.getDistance(coord, center);
 
-      if(circlepath.getLength() === 2) {
+      if (circlepath.getLength() === 2) {
         circlepath.pop();
       }
       circlepath.push(coord);
       circle.setRadius(r);
     }
-    
+
-    if(!circle) {
+    if (!circle) {
       dragCircle[index].setCenter(coord);
     }
   }
@@ -485,12 +485,12 @@ export const FlightPlanDrawTest = props => {
       disableTwoFingerTapZoom: false
     })
 
-    if(polyline) {
+    if (polyline) {
       bufferPolyline.setMap(null);
       // bufferMove();
     }
 
-    if(polygon) {
+    if (polygon) {
       var path = polygon.getPath()._array;
       setPolygon(polygon);
       // setAreaInfo(path, '');
@@ -499,9 +499,9 @@ export const FlightPlanDrawTest = props => {
     $(document).off('mousemove.measure');
     $(document).off('mouseup.measure');
 
-    if(circle) {
+    if (circle) {
       // Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e); })
-      setEve(naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e) }))
+      setEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }))
       setCircle(circle);
       setAreaInfo('', '');
     }
@@ -509,14 +509,14 @@ export const FlightPlanDrawTest = props => {
     check = false;
   }
 
-  const setAreaInfo = (path, bufferpath) => {    
+  const setAreaInfo = (path, bufferpath) => {
     areaInfo = {
-      coordinates : [],
+      coordinates: [],
       bufferZone: 0,
     };
 
     let prePath = [];
-    if(path) {      
+    if (path) {
       path.forEach((item) => {
         const p = {
           lat: item.y,
@@ -526,23 +526,23 @@ export const FlightPlanDrawTest = props => {
         prePath.push(p);
       })
       // path.forEach(prev=> prePath.push([prev.x, prev.y]))
-    }    
+    }
 
-    if(polyline) {
+    if (polyline) {
-      areaInfo.coordinates = prePath;               
+      areaInfo.coordinates = prePath;
-      areaInfo.areaType = 'LINE';      
+      areaInfo.areaType = 'LINE';
-    } else if(polygon) {
+    } else if (polygon) {
       areaInfo.coordinates = prePath;
-      areaInfo.areaType = 'POLYGON';      
+      areaInfo.areaType = 'POLYGON';
-    } else if(circle) {      
+    } else if (circle) {
       const point = {
         lat: circle.getCenter().y,
         lon: circle.getCenter().x
       }
-      
+
       areaInfo.coordinates.push(point);
       areaInfo.bufferZone = circle.getRadius();
-      areaInfo.areaType = 'CIRCLE';      
+      areaInfo.areaType = 'CIRCLE';
     }
     props.handleCoordinates(areaInfo);
     // console.log(areaInfo, 'areaInfo')
@@ -552,7 +552,7 @@ export const FlightPlanDrawTest = props => {
     let pol = polyline.getPath()._array;  //latlng point 다 준건가?    
 
     let lineStringPaths = [];
-    for(let i = 0; i< pol.length; i++) {
+    for (let i = 0; i < pol.length; i++) {
       // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToEPSG3857(pol[i]))
       // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToNaver(pol[i]))
       // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToTM128(pol[i]))
@@ -564,7 +564,7 @@ export const FlightPlanDrawTest = props => {
       // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToUTMK(naver.maps.Point(pol[i].x, pol[i].y)))
 
 
-      
+
       lineStringPaths.push([pol[i].x, pol[i].y]);
     }
     // console.log(map.getProjection().getProjectionName());
@@ -578,7 +578,7 @@ export const FlightPlanDrawTest = props => {
     const wkt = 'LINESTRING (126.6061581 37.5218642, 126.6061581 37.518052)'
     let coords = {
       "type": "LineString",
-      "coordinates" : lineStringPaths
+      "coordinates": lineStringPaths
     };
     const bufferCenter = new JSTSWKTReader().read(wkt)
     const bufferResult = JSTSBufferOp.bufferOp(
@@ -586,7 +586,7 @@ export const FlightPlanDrawTest = props => {
       bufferRadius
     )
 
-    const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult)    
+    const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult)
 
     // bufferPolyline = new naver.maps.Polyline({
     //   strokeColor: '#ff0000',
@@ -596,7 +596,7 @@ export const FlightPlanDrawTest = props => {
     //   strokeOpacity: 1,
     //   path : bufferPaths,
     //   // path: [
-        
+
     //   // ],
     //   map: map
     // });
@@ -609,7 +609,7 @@ export const FlightPlanDrawTest = props => {
     let pol = polyline.getPath()._array;
 
     let lineStringPaths = [];
-    for(let i = 0; i< polyline.getPath().length; i++) {
+    for (let i = 0; i < polyline.getPath().length; i++) {
       lineStringPaths.push([pol[i].x, pol[i].y]);
     }
     console.log(lineStringPaths, 'polyline path')
@@ -647,54 +647,54 @@ export const FlightPlanDrawTest = props => {
     //   map: map
     // });
 
-      //------------------------
+    //------------------------
 
-      let coords = {
+    let coords = {
-        "type": "LineString",
+      "type": "LineString",
-        "coordinates" : lineStringPaths
+      "coordinates": lineStringPaths
-      };
+    };
-
-      const reader = new GeoJSONReader();
-      const writer = new GeoJSONWriter();
 
-      const distance = (100 * 0.001) / 111.12;  //100미터
+    const reader = new GeoJSONReader();
-      const line = reader.read(coords);      
+    const writer = new GeoJSONWriter();
-      const buffer = BufferOp.bufferOp(line, distance, 0, 3);
 
-      let bufferpath = buffer._shell._points._coordinates;
+    const distance = (100 * 0.001) / 111.12;  //100미터
+    const line = reader.read(coords);
+    const buffer = BufferOp.bufferOp(line, distance, 0, 3);
 
-      let bufferPaths = [];
+    let bufferpath = buffer._shell._points._coordinates;
-      for(let i = 0; i< bufferpath.length; i++) {
-        bufferPaths.push([bufferpath[i].x, bufferpath[i].y]);
-      }
-      console.log(bufferPaths, 'bufferPaths')
 
-      bufferPolyline = new naver.maps.Polyline({
+    let bufferPaths = [];
-        strokeColor: '#ff0000',
+    for (let i = 0; i < bufferpath.length; i++) {
-        strokeColor: '#283046',
+      bufferPaths.push([bufferpath[i].x, bufferpath[i].y]);
-        strokeWeight: 2,
+    }
-        strokeStyle: [4, 4],
+    console.log(bufferPaths, 'bufferPaths')
-        strokeOpacity: 1,
+
-        path : bufferPaths,        
+    bufferPolyline = new naver.maps.Polyline({
-        map: map
+      strokeColor: '#ff0000',
-      });      
+      strokeColor: '#283046',
-      // setAreaInfo(polyline.getPath()._array, bufferPath);
+      strokeWeight: 2,
-      setAreaInfo(polyline.getPath()._array, bufferPaths);
+      strokeStyle: [4, 4],
-      setPolyline(polyline);
+      strokeOpacity: 1,
-      setBuffer(bufferPolyline)
+      path: bufferPaths,
+      map: map
+    });
+    // setAreaInfo(polyline.getPath()._array, bufferPath);
+    setAreaInfo(polyline.getPath()._array, bufferPaths);
+    setPolyline(polyline);
+    setBuffer(bufferPolyline)
   }
 
-  const onClickReset = () => {    
+  const onClickReset = () => {
     console.log('onClickRest - ', mapControl.drawType);
-    if(mapControl.drawType === 'RESET') {      
+    if (mapControl.drawType === 'RESET') {
       clearMode('RESET');
-    }    
+    }
   }
 
   const handleDetailDrwa = () => {
 
-    if (props.areaCoordList) {         
+    if (props.areaCoordList) {      
-      const areas = props.areaCoordList[0];        
+      const areas = props.areaCoordList[0];
 
       const paths = [];
 
@@ -702,9 +702,9 @@ export const FlightPlanDrawTest = props => {
         const path = new naver.maps.LatLng(coord.lat, coord.lon)
 
         paths.push(path);
-      });      
+      });
 
-      if(areas.areaType && areas.areaType === 'LINE') {
+      if (areas.areaType && areas.areaType === 'LINE') {
         polyline = new naver.maps.Polyline({
           strokeLineCap: 'round',
           strokeLineJoin: 'round',
@@ -714,12 +714,38 @@ export const FlightPlanDrawTest = props => {
           path: paths,
           map: map
         });
-        
+
         setPolyline(polyline)
-        // $(document).on('mousemove.measure', function(e) { onMouseMovePolyline(e); });
+
+        if (areas.bufferCoordList) {          
+          const bufferPaths = [];
+
+          areas.bufferCoordList.forEach((bfCoord) => {
+            const path = new naver.maps.LatLng(bfCoord.lat, bfCoord.lon);
+
+            bufferPaths.push(path);
+          });
+          console.log('buffer test : ',areas.bufferCoordList);
+          
+          if(pastPolygon) {
+            pastPolygon.setMap(null);
+          }
+
+          polygon = new naver.maps.Polygon({
+            strokeColor: '#283046',
+            strokeOpacity: 1,
+            fillColor: '#7367F0',
+            fillOpacity: 0.1,
+            paths: bufferPaths,
+            map: map
+          });
+          console.log(polygon);
+  
+          setPolygon(polygon);
+        }
       }
 
-      if(areas.areaType && areas.areaType === 'POLYGON') {
+      if (areas.areaType && areas.areaType === 'POLYGON') {
         polygon = new naver.maps.Polygon({
           strokeColor: '#283046',
           strokeOpacity: 1,
@@ -732,7 +758,7 @@ export const FlightPlanDrawTest = props => {
         setPolygon(polygon);
       }
 
-      if(areas.areaType && areas.areaType === 'CIRCLE') {
+      if (areas.areaType && areas.areaType === 'CIRCLE') {
         circle = new naver.maps.Circle({
           strokeColor: '#283046',
           strokeOpacity: 1,
@@ -747,10 +773,10 @@ export const FlightPlanDrawTest = props => {
         setCircle(circle);
       }
     }
-}
+  }
 
   return (
-    <>      
+    <>
     </>
   );
 };

src/containers/basis/flight/plan/FlightPlanDetailContainer.js

@@ -142,7 +142,7 @@ const FlightPlanDetailContainer = () => {
 
     useEffect(() => {
         // 조종사, 기체 정보 Redux 초기화
-        // dispatch(Actions.PILOT_ARCRFT_SELECT_INIT());
+        dispatch(Actions.PILOT_ARCRFT_SELECT_INIT());
     })
 
     const handleModal = (modal) => {