From 039340c59c3e01140fc86e4272b9d74db4e3e59d 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, 15 Jul 2022 15:16:39 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B5=AC=EC=97=AD=20draw=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=98=AE=EA=B8=B0=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/custom.css                     |   1 +
 .../basis/flight/plan/FlightPlanAreaMap.js    |  86 ++-
 .../basis/flight/plan/FlightPlanAreaModal.js  |   2 +-
 .../map/naver/draw/FlightPlanDraw.js          | 652 ++++++++++++++++++
 .../map/naver/draw/FlightPlanDrawTest.js      | 476 +++++++++++++
 .../flight/plan/FlightPlanAreaContainer.js    |   7 +-
 .../flight/plan/FlightPlanDetailContainer.js  |  16 +-
 7 files changed, 1212 insertions(+), 28 deletions(-)
 create mode 100644 src/components/map/naver/draw/FlightPlanDraw.js
 create mode 100644 src/components/map/naver/draw/FlightPlanDrawTest.js

diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css
index 0f44874..70639f7 100644
--- a/src/assets/css/custom.css
+++ b/src/assets/css/custom.css
@@ -250,6 +250,7 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon
 .left-menu-nav .test .btn-use{margin-left:20px; width: 35px; height: 35px; display: block; border: 0px solid transparent; box-sizing: content-box !important; background-color: #009cad;}
 
 .measure-control{position:absolute; z-index:100;}
+.area-button{position:relative; z-index:100; margin-top:10px; margin-left:10px;}
 
 .control-btn{margin-left: 7px; border-bottom: solid 1px #283046; margin-bottom:5px;}
 .buffer-input{text-align: center; border-radius: 100px; border: 1px solid #283046; width: 70px; margin-left: 5px;}
diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js
index 926493d..e512252 100644
--- a/src/components/basis/flight/plan/FlightPlanAreaMap.js
+++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js
@@ -4,28 +4,46 @@ import {
     CardBody,
     Button
 } from 'reactstrap';
+import { useDispatch, useSelector } from 'react-redux';
 import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone';
-import { JQueryDraw } from '../../../mapDraw/naver/draw/JQueryDraw';
+import { FlightPlanDraw } from '../../../map/naver/draw/FlightPlanDraw';
+import { FlightPlanDrawTest } from '../../../map/naver/draw/FlightPlanDrawTest';
+import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions';
 
 const FlightPlanAreaMap = (props) => {
+    const dispatch = useDispatch();
     const naver = window.naver;
     const airArea = props.airArea;
 
+    const mapControl = useSelector(state => state.controlMapReducer);
+
     const [map, setMap] = useState();
     const [isMapLoad, setIsMapLoad] = useState(false);
+    const [test, setTest] = useState();
 
     useEffect(() => {
-        NaverMapInit();
+      NaverMapInit();
     }, []);
 
     useEffect(() => {                
-        setIsMapLoad(true);
+      setIsMapLoad(true);
     }, [airArea]);
 
+    useEffect(() => {
+      testt();
+    }, [mapControl])
+
+    const testt = () => {
+      setTest(mapControl.drawType)
+      // console.log(test, 'test');
+    }
+
     const NaverMapInit = () => {
         const mapOptions = {
-            center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
-            zoom: 10,
+            // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
+            center: new naver.maps.LatLng(37.520357, 126.610166),
+            // zoom: 10,
+            zoom:17,
             zoomControl: true,
             mapTypeId: naver.maps.MapTypeId.NORMAL,
             zoomControlOptions: {
@@ -38,6 +56,9 @@ const FlightPlanAreaMap = (props) => {
         setMap(new naver.maps.Map('map', mapOptions));             
     };
 
+    const handlerDrawType = val => {
+      dispatch(drawTypeChangeAction(val));
+    };
 
     return (
         <Card className='mb-0'>
@@ -50,8 +71,27 @@ const FlightPlanAreaMap = (props) => {
                     </div>
                 </div>
 
-                <div id="map" style={{ width: '100%', height: '50vh'}}>
-                  <JQueryDraw map={map} naver={naver} />
+                <div style={{position:'relative'}}>
+                  <div id="map" style={{ width: '100%', height: '60vh', position: 'absoulte'}}>
+                    <FlightPlanDrawTest
+                      map = {map}
+                      naver = {naver}
+                      type = {test}
+                    />
+
+                    {/* <Button.Ripple
+                      color='primary'
+                      className='ripple-test'
+                    >
+                      확인
+                    </Button.Ripple>
+                    <Button.Ripple
+                      color='primary'
+                      className='ripple-test'
+                    >
+                      초기화
+                    </Button.Ripple> */}
+                  </div>
                 </div>
                 
                 
@@ -60,17 +100,27 @@ const FlightPlanAreaMap = (props) => {
                 ) : null}
                 
                 <div className='d-flex align-items-center mt-2'>
-                    <Button.Ripple
-                        className='mr-1'
-                        color='primary'                       
-                    >
-                        Line
-                    </Button.Ripple>
-                    <Button.Ripple 
-                        color='primary'                         
-                    >
-                        Circle
-                    </Button.Ripple>
+                  <Button.Ripple
+                    className='mr-1'
+                    color='primary'
+                    // onClick=
+                    onClick={e => handlerDrawType('LINE')}
+                  >
+                      WayPoint
+                  </Button.Ripple>
+                  <Button.Ripple
+                    className='mr-1'
+                    color='primary'
+                    onClick={e => handlerDrawType('CIRCLE')}
+                  >
+                      Circle
+                  </Button.Ripple>
+                  <Button.Ripple
+                      color='primary'
+                      onClick={e => handlerDrawType('POLYGON')}
+                  >
+                      Polygon
+                  </Button.Ripple>
                 </div>
             </CardBody>
         </Card>
diff --git a/src/components/basis/flight/plan/FlightPlanAreaModal.js b/src/components/basis/flight/plan/FlightPlanAreaModal.js
index 3bcee8f..49ce4e4 100644
--- a/src/components/basis/flight/plan/FlightPlanAreaModal.js
+++ b/src/components/basis/flight/plan/FlightPlanAreaModal.js
@@ -28,7 +28,7 @@ export const FlightPlanAreaModal = props => {
             setModal={props.setModal}   
             onSubmit={onSubmit} 
             setOnSubmit={setOnSubmit}        
-          />
+          /> 
         </ModalBody>
         {/* <ModalFooter>
           <Button
diff --git a/src/components/map/naver/draw/FlightPlanDraw.js b/src/components/map/naver/draw/FlightPlanDraw.js
new file mode 100644
index 0000000..e193de5
--- /dev/null
+++ b/src/components/map/naver/draw/FlightPlanDraw.js
@@ -0,0 +1,652 @@
+import $ from 'jquery';
+import '../../../../assets/css/custom.css'; 
+import { CustomInput } from 'reactstrap';
+
+import buffer from '@turf/buffer'
+
+export const FlightPlanDraw = props => {
+  const {naver} = props;
+  const {map} = props;
+
+
+  var Measure = function(buttons) {
+    this.$btnLine = buttons.line;
+    this.$btnPolygon = buttons.polygon;
+    this.$btnCircle = buttons.circle;
+    this.$btnRectangle = buttons.rectangle;
+
+    this._mode = null;
+
+    this._bindDOMEvents();
+  };
+
+  $.extend(
+    Measure.prototype,{
+    constructor: Measure,
+
+    setMap: function(map) {
+      console.log('setMap')
+      if (this.map) {
+        this._unbindMap(this.map);
+      }
+
+      this.map = map;
+
+      if (map) {
+        this._bindMap(map);
+      }
+    },
+
+    startMode: function(mode) {
+      console.log('startMode')
+      if (!mode) return;
+
+      if (mode === 'line') {
+        this._startDistance();
+      } if (mode === 'polygon') {
+        this._startArea();
+      } if (mode === 'circle') {
+        this._startCircle();
+      } if (mode === 'rectangle') {
+        this._startRectangle();
+      }
+    },
+
+    _startDistance: function() {
+      console.log('startDistance')
+      var map = this.map;
+      this._distanceListeners = [
+        naver.maps.Event.addListener(map, 'click', this._onClickDistance.bind(this))
+      ];
+    },
+
+    _startArea: function() {
+      console.log('startArea')
+      var map = this.map;
+
+      this._areaListeners = [
+        naver.maps.Event.addListener(map, 'click', this._onClickArea.bind(this)),
+        naver.maps.Event.addListener(map, 'rightclick', this._finishArea.bind(this))
+      ];
+
+      $(document).on('mousemove.measure', this._onMouseMoveArea.bind(this));
+    },
+
+    _startCircle: function() {
+      console.log('startCircle')
+      var map = this.map;
+      this._circleListeners = [
+        naver.maps.Event.addListener(map, 'click', this._onClickCircle.bind(this)),
+        naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this))
+      ];
+    },
+
+    _startRectangle: function() {
+      console.log('startRectangle')
+      var map = this.map;
+      this._rectangleListeners = [
+        naver.maps.Event.addListener(map, 'click', this._onClickRectangle.bind(this)),
+        naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.bind(this))
+      ]
+    },
+
+    _finishDistance: function() {
+      console.log('finishDistance')
+
+      naver.maps.Event.removeListener(this._distanceListeners);
+      delete this._distanceListeners;
+
+      $(document).off('mousemove.measure');
+
+      if (this._guideline) {
+        this._guideline.setMap(null);
+        delete this._guideline;
+      }
+
+      if (this._polyline) {
+        // console.log(this._polyline.getPath()._array, 'path')
+        let polypaths = this._polyline.getPath()._array;
+
+        //파싱
+        let polypathJSON = new Array();
+        for(let i = 0; i< polypaths.length; i++) {
+
+          //파싱
+          let obj = new Object();
+
+          obj.x = '' + polypaths[i]._lng + '';
+          obj.y = '' + polypaths[i]._lat + '';
+
+          obj = JSON.stringify(obj);
+          polypathJSON.push(JSON.parse(obj));  
+        }
+        console.log(polypathJSON, 'json polyline path')
+
+
+        //버퍼 생성에 필요한 coordinates 배열 변환
+        let lineStringPaths = [];
+        for(let i = 0; i < this._polyline.getPath().length; i++) {
+          lineStringPaths.push([this._polyline.getPath()._array[i].x, this._polyline.getPath()._array[i].y]);
+        }
+        console.log(lineStringPaths, 'polyline path')
+
+        //버퍼 생성을 위한 line 객체
+        const originalGeojson = {
+          type: "FeatureCollection",
+          features: [
+            {
+              type: "Feature",
+              properties: {},
+              geometry: {
+                type: "LineString",
+                coordinates: lineStringPaths
+              }
+            }
+          ]
+        };
+        console.log(originalGeojson)
+
+        //버퍼 객체
+        const bufferObj = buffer(originalGeojson, 50, {units:'meters'});
+
+        //버퍼 라인 생성
+        let bufferPath = bufferObj.features[0].geometry.coordinates[0];
+        console.log(bufferPath, 'buffer path')
+
+        this.bufferPolyline = new naver.maps.Polyline({
+          strokeColor: '#ff0000',
+          strokeWeight: 2,
+          strokeStyle: [4, 4],
+          strokeOpacity: 0.6,
+          path : bufferPath,
+          map: map
+        });
+
+        // 이거 하면 그동안 한거 싹 사라짐 -> 얘를 통해서 drawType이 바뀌면 다 날라가는 걸로 해보면 될듯
+        // this._polyline.setMap(null)
+        delete this._polyline;
+
+      }
+      //onfocus()의 반대기능 = blur()
+      this.$btnLine.removeClass('control-on').blur();
+
+      this._mode = null;
+    },
+
+    _finishArea: function() {
+      console.log('finishArea')
+      naver.maps.Event.removeListener(this._areaListeners);
+      delete this._areaListeners;
+
+      $(document).off('mousemove.measure');
+
+      if (this._polygon) {
+        var path = this._polygon.getPath();
+        path.pop();
+
+        delete this._polygon;
+      }
+
+      this.$btnPolygon.removeClass('control-on').blur();
+
+      this._mode = null;
+    },
+
+    _finishCircle: function() {
+      console.log('finishCircle')
+
+      naver.maps.Event.removeListener(this._circleListeners);
+      delete this._circleListeners;
+
+      $(document).off('mousemove.measure');
+
+      if(this._guidecircle) {
+        this._guidecircle.setMap(null);
+        this._radius.setMap(null);
+        delete this._raidus;
+        delete this._guidecircle;
+      }
+    
+      if (this._circle) {
+        // this._circle.setMap(null);
+        delete this._circle;
+      }
+
+      this.$btnCircle.removeClass('control-on').blur();
+
+      // delete this._lastDistance;
+      this._mode = null;
+    },
+
+    _finishRectangle: function() {
+      console.log('finishRectangle')
+
+      naver.maps.Event.removeListener(this._rectangleListeners);
+      delete this._rectangleListeners;
+
+      $(document).off('mousemove.measure');
+
+      if(this._rectangle) {
+        this._guiderectangle.setMap(null);
+        delete this._guiderectangle;
+      }
+
+      this.$btnRectangle.removeClass('control-on').blur();
+
+      this._mode = null;
+    },
+
+    finishMode: function(mode) {
+      console.log('finishMode')
+      if (!mode) return;
+
+      if (mode === 'line') {
+        this._finishDistance();
+      } if (mode === 'polygon') {
+        this._finishArea();
+      } if (mode === 'circle') {
+        this._finishCircle();
+      } if (mode === 'rectangle') {
+        this._finishRectangle();
+      }
+    },
+
+    _fromMetersToText: function(meters) {
+      meters = meters || 0;
+
+      var km = 1000,
+        text = meters;
+
+      if(meters >= km) {
+        text = parseFloat((meters / km).toFixed(1)) + 'km';
+      } else {
+        text = parseFloat(meters.toFixed(1)) + 'm';
+      }
+
+      return text;
+    },
+
+    _addMileStone: function(coord, text, css) {
+      if(!this._ms) this._ms = [];
+
+      let content;
+      if(text == 'Start') {
+        content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:14px;color:#ff0000;"><span>'+ text +'</span></div>'
+      } else {
+        content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;color:#737373;"><span>'+ text +'</span></div>'
+      }
+
+      var ms = new naver.maps.Marker({
+        position: coord,
+        icon: {
+          content: content,
+          anchor: new naver.maps.Point(-5, -5)
+        },
+        map: this.map
+      });
+
+      var msElement = $(ms.getElement());
+
+      if(css) {
+        msElement.css(css);
+      } else {
+        msElement.css('font-size', '13px');
+      }
+
+      this._ms.push(ms);
+    },
+
+    _onClickDistance: function(e) {
+      console.log('onClickDistance')
+      var map = this.map,
+        coord = e.coord;
+
+      if (!this._polyline) {
+        // 임시로 보여줄 점선 폴리라인을 생성합니다.
+        this._guideline = new naver.maps.Polyline({
+          strokeColor: '#0000ff',
+          strokeWeight: 3,
+          strokeStyle: [4, 4],
+          strokeOpacity: 0.2,
+          path: [coord],
+          map: map
+        });
+
+        // this._lastDistance = this._guideline.getDistance();
+
+        $(document).on('mousemove.measure', this._onMouseMoveDistance.bind(this));
+        this._distanceListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishDistance.bind(this)));
+
+        // 실제 거리재기에 사용되는 폴리라인을 생성합니다.
+        this._polyline = new naver.maps.Polyline({
+          strokeLineCap: 'round',
+          strokeLineJoin: 'round',
+          strokeColor: '#0000ff',
+          strokeWeight: 3,
+          strokeOpacity: 0.6,
+          path: [coord],
+          map: map
+        });
+
+        this._lastDistance = this._polyline.getDistance();
+        this._addMileStone(coord, 'Start');
+
+      } else {
+        this._guideline.setPath([e.coord]);
+        this._polyline.getPath().push(coord);
+
+        var distance = this._polyline.getDistance();
+        this._addMileStone(coord, this._fromMetersToText(distance - this._lastDistance));
+        this._lastDistance = distance;
+      }
+    },
+
+    _onMouseMoveDistance: function(e) {
+      console.log('onMouseMoveDistance')
+      var map = this.map,
+          proj = this.map.getProjection(),
+          coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+          path = this._guideline.getPath();
+
+      if (path.getLength() === 2) {
+        //맨 뒷 값 삭제 = 기존클릭좌표만 남겨둬라 = 실시간으로 좌표들어가야 하니까
+        path.pop();
+      }
+
+      // [기존 클릭 좌표, 실시간 좌표]
+      path.push(coord);
+    },
+
+    _onClickArea: function(e) {
+      console.log('onClickArea')
+      var map = this.map,
+        coord = e.coord;
+
+      if (!this._polygon) {
+        this._polygon = new naver.maps.Polygon({
+          strokeOpacity: 0.8,
+          fillColor: '#0000ff',
+          fillOpacity: 0.1,
+          paths: [coord],
+          map: map
+        });
+      } else {
+        this._polygon.getPath().push(coord);
+      }
+    },
+
+    _onMouseMoveArea: function(e) {
+      console.log('onMouseMoveArea')
+      if (!this._polygon) return;
+
+      var map = this.map,
+          proj = this.map.getProjection(),
+          coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+          path = this._polygon.getPath();
+
+      if (path.getLength() >= 2) {
+        path.pop();
+      }
+
+      path.push(coord);
+    },
+
+    _onClickCircle: function(e) {
+      console.log('onClickCircle')
+      var map = this.map,
+        coord = e.coord;
+
+      if(!this._circle) {
+
+        //가이드 라인
+        this._radius = new naver.maps.Polyline({
+          strokeStyle: [4, 4],
+          strokeOpacity: 0.6,
+          path: [coord],
+          map: map
+        });
+        this._lastDistance = this._radius.getDistance();
+
+        // 임시로 보여줄 원형
+        this._guidecircle = new naver.maps.Circle({
+          strokeOpacity: 0.8,
+          strokeStyle: [4, 4],
+          fillColor: '#0000ff',
+          fillOpacity: 0.1,
+          center: coord,
+          radius: this._lastDistance,
+          map: map
+        });
+
+        $(document).on('mousemove.measure', this._onMouseMoveCircle.bind(this));
+        this._circleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this)));
+        
+        // 실제 사용되는 원형
+        this._circle = new naver.maps.Circle({
+          strokeOpacity: 0.8,
+          fillColor: '#0000ff',
+          fillOpacity: 0.1,
+          center: coord,
+          radius: this._lastDistance,
+          map: map
+        });
+
+      } else {
+        // this._guidecircle.setCenter(e.coord);
+        // this._circle.setCenter(coord);
+        // if(this._radius.getPath().length() === 2) {
+        //   this._radius.getPath().pop();
+        // }
+        
+        // this._radius.getPath().push(coord);
+
+        var distance = this._radius.getDistance();
+        this._lastDistance = distance;
+        this._circle.setRadius(this._lastDistance);
+
+
+      }
+    },
+
+    _onMouseMoveCircle: function(e) {
+      console.log('onMouseMoveCircle')
+      if(!this._circle) return;
+
+      var map = this.map,
+          proj = this.map.getProjection(),
+          coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+          path = this._radius.getPath(),
+          center = this._guidecircle.getCenter(), //LatLng으로 나옴
+          r = proj.getDistance(coord, center);
+
+      if(path.getLength() === 2) {
+        path.pop();
+      }
+      path.push(coord);
+      this._guidecircle.setRadius(r);
+    },
+
+    _onClickRectangle: function(e) {
+      console.log('onClickRectangle')
+      var map = this.map,
+        coord = e.coord;
+      
+      this.max_x = 0;
+      this.max_y = 0;
+
+
+      if(!this._rectangle) {
+        //min = 고정값
+        this.fixed = coord;
+        this.min = [this.fixed.x, this.fixed.y];
+        this.max = [this.max_x, this.max_y];
+        this.boundscoord = [this.min[0], this.min[1], this.min[0], this.min[1]];
+
+        // 임시로 보여줄 사각형
+        this._guiderectangle = new naver.maps.Rectangle({
+          strokeStyle: [4, 4],
+          strokeOpacity: 0.6,
+          bounds: this.boundscoord,
+          map: map
+        });
+
+        $(document).on('mousemove.measure', this._onMouseMoveRectangle.bind(this));
+        this._rectangleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.bind(this)));
+
+        //실제 사용되는 사각형
+        this._rectangle = new naver.maps.Rectangle({
+          strokeOpacity: 0.8,
+          fillColor: '#0000ff',
+          fillOpacity: 0.1,
+          bounds: this.boundscoord,
+          map: map
+        });
+
+      } else {
+        this.max = [coord.x, coord.y];
+        this.boundscoord = [this.min[0], this.min[1], this.max[0], this.max[1]];
+        this._rectangle.setBounds(this.boundscoord);
+      }
+    },
+
+    _onMouseMoveRectangle: function(e) {
+      console.log('onMouseMoveRectangle')
+      if(!this._rectangle) return;
+
+      var map = this.map,
+         proj = this.map.getProjection(),
+        coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+       bounds = this._guiderectangle.getBounds(),
+          max = [coord.x, coord.y];
+
+      this.boundscoord = [this.min[0], this.min[1],max[0], max[1]];
+      this._guiderectangle.setBounds(this.boundscoord);
+    },
+
+    _bindMap: function(map) {
+      console.log('bindMap')
+    },
+
+    _unbindMap: function() {
+      console.log('unbindMap')
+      this.unbindAll();
+    },
+
+    _bindDOMEvents: function() {
+      console.log('bindDOMEvents')
+      this.$btnLine.on('click.measure', this._onClickButton.bind(this, 'line'));
+      this.$btnPolygon.on('click.measure', this._onClickButton.bind(this, 'polygon'));
+      this.$btnCircle.on('click.measure', this._onClickButton.bind(this, 'circle'));
+      this.$btnRectangle.on('click.measure', this._onClickButton.bind(this, 'rectangle'));
+
+    },
+
+    _onClickButton: function(newMode, e) {
+      //newMode는 방금 클릭한 값(line, polygon, circle...)
+      console.log('onClickButton')
+      e.preventDefault();
+
+      var btn = $(e.target),
+          map = this.map,
+          mode = this._mode;
+      //this._mode는 클릭하기 전 값(첫 클릭이면 null)
+
+      if (btn.hasClass('control-on')) {
+        console.log('remove')
+        btn.removeClass('control-on');
+      } else {
+        console.log('add')
+        btn.addClass('control-on');
+      }
+
+      this._clearMode(mode);
+
+      if (mode === newMode) {
+        this._mode = null;
+        return;
+      }
+
+      this._mode = newMode;
+
+      this.startMode(newMode);
+    },
+
+    _clearMode: function(mode) {
+      console.log('clearMode')
+      if (!mode) return;
+
+      if (mode === 'line') {
+        if (this._polyline) {
+          this._polyline.setMap(null);
+          delete this._polyline;
+        }
+
+        this._finishDistance();
+      } else if (mode === 'polygon') {
+        if (this._polygon) {
+          this._polygon.setMap(null);
+          delete this._polygon;
+        }
+
+        this._finishArea();
+      } else if (mode === 'circle') {
+        if (this._circle) {
+          this._circle.setMap(null);
+          delete this._circle;
+        }
+
+        this._finishCircle();
+      } else if (mode === 'rectangle') {
+        if(this._rectangle) {
+          this._rectangle.setMap(null);
+          delete this._rectangle;
+        }
+      }
+    }
+  });
+
+  // id랑 매치시켜서 옵션 지정함
+  var measures = new Measure({
+    line: $('#line'),
+    polygon: $('#polygon'),
+    circle: $('#circle'),
+    rectangle: $('#rectangle')
+  });
+
+  measures.setMap(map);
+
+  return(
+    <>
+      <div style={{ position: 'relative' }}>
+      <ul className="measure-control">
+        <li>
+          <CustomInput
+            id='line'
+            type='image'
+            className='control-btn'
+            src='http://static.naver.net/maps/mantle/drawing/1x/polyline.png'
+          />
+          <CustomInput
+            id='polygon'
+            type='image'
+            className='control-btn'
+            src='http://static.naver.net/maps/mantle/drawing/1x/polygon.png'
+          />
+          <CustomInput
+            id='circle'
+            type='image'
+            className='control-btn'
+            src='http://static.naver.net/maps/mantle/drawing/1x/ellipse.png'
+          />
+          <CustomInput
+            id='rectangle'
+            type='image'
+            className='control-btn'
+            src='http://static.naver.net/maps/mantle/drawing/1x/rectangle.png'
+          />
+        </li>
+      </ul>
+      </div>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/src/components/map/naver/draw/FlightPlanDrawTest.js b/src/components/map/naver/draw/FlightPlanDrawTest.js
new file mode 100644
index 0000000..5274f16
--- /dev/null
+++ b/src/components/map/naver/draw/FlightPlanDrawTest.js
@@ -0,0 +1,476 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import $ from 'jquery';
+import {
+  Button
+} from 'reactstrap';
+
+import buffer from '@turf/buffer'
+
+export const FlightPlanDrawTest = props => {
+  const mapControl = useSelector(state => state.controlMapReducer);
+  const naver = props.naver;
+  const map = props.map;
+  let mode = props.type;
+
+  let polylineListeners;
+  let polyline;
+  let guideline;
+  let lastDistance;
+  let bufferPolyline;
+
+  let polygonListeners;
+  let polygon;
+
+  let circleListeners;
+  let circle;
+  let guidecircle;
+  let radiusline;
+  let circleInfo;
+
+  let mousedownEve;
+  let clickEve;
+  let mouseupEve;
+
+  let check;
+
+  useEffect(() => {
+    drawInit();
+  }, [mapControl.drawType])
+
+  const drawInit = () => {
+    if(mapControl.drawType==='LINE') {
+      console.log('line')
+      onClickButton('line');
+    } else if(mapControl.drawType==='CIRCLE') {
+      console.log('circle')
+      onClickButton('circle');
+    } else if(mapControl.drawType==='POLYGON') {
+      console.log('polygon')
+      onClickButton('polygon');
+    }
+    
+  }
+
+  const onClickButton = (newMode) => {
+    console.log('onClickButton');
+
+    clearMode(mode);
+
+    if(mode === newMode) {
+      mode = null;
+      return;
+    }
+
+    mode = newMode;
+
+    startMode(newMode);
+  }
+
+  const clearMode = (mode) => {
+    console.log('clearMode')
+
+    if(!mode) return;
+
+    if (mode === 'line') {
+      if(polyline) {
+        polyline.setMap(null);
+        polyline = '';
+      }
+      finishPolyline();
+    } else if(mode === 'polygon') {
+      if(polygon) {
+        polygon.setMap(null);
+        polygon = '';
+      }
+      finishPolygon();
+    } else if(mode === 'circle') {
+      if(circle) {
+        circle.setMap(null);
+        circle = '';
+      }
+      finishCircle();
+    }
+  }
+
+  const startMode = (mode) => {
+    console.log('startMode')
+    if (!mode) return;
+
+    if (mode === 'line') {
+      startPolyline();
+    } if (mode === 'polygon') {
+      startPolygon();
+    } if (mode === 'circle') {
+      startCircle();
+    }
+  }
+
+  const startPolyline = () => {
+    console.log('startPolyline')
+      // var map = this.map;
+    polylineListeners = [
+      naver.maps.Event.addListener(map, 'click', function(e) {
+        onClickPolyline(e);
+      })
+    ];
+  }
+
+  const startPolygon = () => {
+    console.log('startPolygon')
+
+    polygonListeners = [
+      naver.maps.Event.addListener(map, 'click', function(e) {
+        onClickPolygon(e);
+      }),
+      naver.maps.Event.addListener(map, 'rightclick', function(e) {
+        finishPolygon();
+      })
+    ];
+
+    $(document).on('mousemove.measure', function(e) {
+      onMouseMovePolygon(e);
+    })
+  }
+
+  const startCircle = () => {
+    console.log('startCircle')
+
+    clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e) })
+  }
+
+  const finishPolyline = () => {
+    console.log('finishPolyline')
+
+    naver.maps.Event.removeListener(polylineListeners);
+    polylineListeners = [];
+
+    $(document).off('mousemove.measure');
+
+    if(guideline) {
+      guideline.setMap(null);
+      guideline = '';
+    }
+
+    if(polyline) {
+      let polypaths = polyline.getPath()._array;
+
+      //파싱
+      let polypathJSON = new Array();
+      for(let i = 0; i< polypaths.length; i++) {
+        //파싱
+        let obj = new Object();
+
+        obj.x = '' + polypaths[i]._lng + '';
+        obj.y = '' + polypaths[i]._lat + '';
+
+        obj = JSON.stringify(obj);
+        polypathJSON.push(JSON.parse(obj));  
+      }
+      console.log(polypathJSON, 'json polyline path');
+
+      //버퍼 생성에 필요한 coordinates 배열 변환
+      let lineStringPaths = [];
+      for(let i = 0; i< polyline.getPath().length; i++) {
+        lineStringPaths.push([polyline.getPath()._array[i].x, polyline.getPath()._array[i].y]);
+      }
+      console.log(lineStringPaths, 'polyline path')
+
+      //버퍼 생성을 위한 line 객체
+      const originalGeojson = {
+        type: "FeatureCollection",
+        features: [
+          {
+            type: "Feature",
+            properties: {},
+            geometry: {
+              type: "LineString",
+              coordinates: lineStringPaths
+            }
+          }
+        ]
+      };
+      console.log(originalGeojson)
+
+      //버퍼 객체
+      const bufferObj = buffer(originalGeojson, 50, {units:'meters'});
+
+      //버퍼 라인 생성
+      let bufferPath = bufferObj.features[0].geometry.coordinates[0];
+      console.log(bufferPath, 'buffer path')
+
+      bufferPolyline = new naver.maps.Polyline({
+        strokeColor: '#ff0000',
+        strokeWeight: 2,
+        strokeStyle: [4, 4],
+        strokeOpacity: 0.6,
+        path : bufferPath,
+        map: map
+      });
+
+      polyline = '';
+    }
+
+    mode = null;
+  }
+
+  const finishPolygon = () => {
+    console.log('finishPolygon')
+    naver.maps.Event.removeListener(polygonListeners);
+    polygonListeners = [];
+
+    $(document).off('mousemove.measure');
+
+    if(polygon) {
+      var path = polygon.getPath();
+      path.pop();
+
+      polygon = '';
+    }
+
+    mode = null;
+  }
+
+  const finishCircle = () => {
+    console.log('finishCircle')
+
+    naver.maps.Event.removeListener(clickEve);
+    naver.maps.Event.removeListener(onmousedown);
+    naver.maps.Event.removeListener(onmouseup);
+
+    if(circle) {
+      circleInfo = {
+        center: circle.getCenter(),
+        radius: circle.getRadius()
+      }
+
+      circle.setMap(null);
+      circle = '';
+      radiusline.setMap(null);
+      radiusline = '';
+    }
+
+    mode = null;
+    console.log(circleInfo);
+  }
+
+  const finishMode = () => {
+    console.log('finishMode')
+    if(!mode) return;
+
+    if(mode === 'LINE') {
+      finishPolyline();
+    } else if(mode === 'POLYGON') {
+      finishPolygon();
+    } else if(mode === 'CIRCLE') {
+      finishCircle();
+    }
+  }
+
+  const onClickPolyline = (e) => {
+    console.log('onClickPolyline')
+    var coord = e.coord;
+
+    if(!polyline) {
+      guideline = new naver.maps.Polyline({
+        strokeColor: '#0000ff',
+        strokeWeight: 5,
+        strokeStyle: [4, 4],
+        strokeOpacity: 0.2,
+        path: [coord],
+        // path: [0],
+        map: map
+      });
+
+      // lastDistance = guideline.getDistance();
+
+      // distanceListeners.push(naver.maps.Event.addListener(map, 'mousemove', onMouseMoveDistance(e)));
+      $(document).on('mousemove.measure', function(e) {
+        onMouseMovePolyline(e);
+      });
+      polylineListeners.push(naver.maps.Event.addListener(map, 'rightclick', function() {
+        finishPolyline();
+      }));
+
+      polyline = new naver.maps.Polyline({
+        strokeLineCap: 'round',
+        strokeLineJoin: 'round',
+        strokeColor: '#0000ff',
+        strokeWeight: 5,
+        strokeOpacity: 0.6,
+        path: [coord],
+        // path: [0],
+        map: map
+      });
+
+      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) => {
+    console.log('onMouseMovePolyline')
+    var proj = map.getProjection(),
+      coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+      path = guideline.getPath();
+
+    if(path.getLength() === 2) {
+      path.pop();
+    }
+
+    path.push(coord);
+  }
+
+  const onClickPolygon = (e) => {
+    console.log('onClickPolygon')
+    var coord = e.coord;
+
+    if(!polygon) {
+      polygon = new naver.maps.Polygon({
+        strokeOpacity: 0.8,
+        fillColor: '#0000ff',
+        fillOpacity: 0.1,
+        paths: [coord],
+        map: map
+      });
+    } else {
+      polygon.getPath().push(coord);
+    }
+  }
+
+  const onMouseMovePolygon = (e) => {
+    console.log('onMouseMovePolygon')
+    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) {
+      path.pop();
+    }
+
+    path.push(coord);
+  }
+
+  const onClickCircle = (e) => {
+    console.log('onClickCircle')
+    var coord = e.coord;
+
+    if(!check) {
+      if(!circle) {
+        //가이드라인
+        radiusline = new naver.maps.Polyline({
+          strokeStyle: [4, 4],
+          strokeOpacity: 0.6,
+          path: [coord],
+          map: map
+        });
+        lastDistance = radiusline.getDistance();
+
+        //실제 사용되는 원형
+        circle = new naver.maps.Circle({
+          strokeOpacity: 0.8,
+          fillColor: '#0000ff',
+          fillOpacity: 0.1,
+          center: coord,
+          radius: 100,
+          map: map,
+          clickable: true
+        });
+
+        mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function(e) { onMouseDownCircle(e); })
+      } else {
+        circle.setRadius(100);
+        circle.setCenter(coord);
+
+        radiusline.setPath([coord])
+      }
+    } else {
+
+    }
+  }
+
+  const onMouseDownCircle = (e) => {
+    console.log('onMouseDownCircle')
+    
+    naver.maps.Event.removeListener(clickEve);
+
+    map.setOptions({
+      draggable: false,
+      pinchZoom: false,
+      scrollWheel: false,
+      keyboardShortcuts: false,
+      disableDoubleTapZoom: true,
+      disableDoubleClickZoom: true,
+      disableTwoFingerTapZoom: true
+    })
+
+    $(document).on('mousemove.measure', function(e) { onMouseMoveCircle(e); });
+    $(document).on('mouseup.measure', function(e) { onMouseUpCircle(e); });
+  }
+
+  const onMouseMoveCircle = (e) => {
+    console.log('onMouseMoveCircle')
+
+    check = true;
+
+    var proj = map.getProjection(),
+      coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+      path = radiusline.getPath(),
+      center = circle.getCenter(),
+      r = proj.getDistance(coord, center);
+
+    if(path.getLength() === 2) {
+      path.pop();
+    }
+    path.push(coord);
+    circle.setRadius(r);
+  }
+
+  const onMouseUpCircle = (e) => {
+    console.log('onMouseUpCircle')
+
+    map.setOptions({
+      draggable: true,
+      pinchZoom: true,
+      scrollWheel: true,
+      keyboardShortcuts: true,
+      disableDoubleTapZoom: false,
+      disableDoubleClickZoom: false,
+      disableTwoFingerTapZoom: false
+    })
+
+    $(document).off('mousemove.measure');
+    $(document).off('mouseup.measure');
+
+    clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e); })
+    check = false;
+  }
+
+  return (
+    <>
+      <Button.Ripple
+        color='primary'
+        className='area-button'
+        onClick = {e => finishMode(e)}
+      >
+        확인
+      </Button.Ripple>
+      <Button.Ripple
+        color='primary'
+        className='area-button'
+      >
+        초기화
+      </Button.Ripple>
+    </>
+  );
+};
\ No newline at end of file
diff --git a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js
index 39dc57e..b182d37 100644
--- a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js
+++ b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js
@@ -51,14 +51,15 @@ const FlightPlanAreaContainer = (props) => {
 
     return (  
         <Row>
-            <Col md={6} lg={6}>
+            {/* <Col md={6} lg={6}> */}
+            <Col>
                 {airArea != null ? (
                     <FlightPlanAreaMap
                         airArea={airArea}
                     />
                 ) : null}                
             </Col>
-            <Col md={6} lg={6}>                
+            {/* <Col md={6} lg={6}>                
                 <FlightPlanAreaForm
                     modal={props.modal}
                     setModal={props.setModal}
@@ -66,7 +67,7 @@ const FlightPlanAreaContainer = (props) => {
                     errors={errors}
                     submit={handleSubmit(createAirArea)}
                 />                    
-            </Col>
+            </Col> */}
         </Row>      
         
     )
diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js
index 3df9a61..50ab86d 100644
--- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js
+++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js
@@ -18,7 +18,8 @@ const FlightPlanDetailContainer = () => {
     const [areaInfo, setAreaInfo] = useState();    
     const [modal, setModal] = useState({
         isOpen: false,
-        title: '',        
+        title: '', 
+        body: <FlightPlanAreaContainer />
     });
 
     /* Form Validation Checking */
@@ -55,11 +56,14 @@ const FlightPlanDetailContainer = () => {
                 openModal={openModal}
                 areaInfo={areaInfo}
             />
-            <FlightPlanAreaModal 
-                modal={modal}
-                save={saveFlightPlanArea}
-                setModal={setModal}
-            /> 
+            {modal.isOpen ? (
+              <FlightPlanAreaModal 
+                  modal={modal}
+                  save={saveFlightPlanArea}
+                  setModal={setModal}
+              /> 
+              ) : null
+            }
         </CustomDetailLayout>
     )