diff --git a/src/components/laanc/map/LaancMap.js b/src/components/laanc/map/LaancMap.js
index 5f01fe58..2ad07d6a 100644
--- a/src/components/laanc/map/LaancMap.js
+++ b/src/components/laanc/map/LaancMap.js
@@ -90,7 +90,7 @@ export default function LaancMap({ page, handleChange, data }) {
       attributionControl: false
     });
 
-    setDrawObj(getDraw());
+    setDrawObj(getDraw('laanc'));
     map.dragRotate.disable();
 
     const language = new MapboxLanguage();
diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js
index dbc6927c..7dbfcf10 100644
--- a/src/components/map/mapbox/MapBoxMap.js
+++ b/src/components/map/mapbox/MapBoxMap.js
@@ -7,6 +7,7 @@ import {
   Suspense
 } from 'react';
 import { useSelector, useDispatch } from '@src/redux/store';
+import * as turf from '@turf/turf';
 import {
   Button,
   Modal,
@@ -95,6 +96,8 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
   // 노탐 정보 모달
   const [centeredModal, setCenteredModal] = useState(false);
 
+  const mouseCursorRef = useRef(null);
+
   // 비행예상경로 geoJson 정보
   const [planGeo, setPlanGeo] = useState({
     type: 'FeatureCollection',
@@ -328,7 +331,7 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
     map.addControl(language);
     // 거리 축적
     map.addControl(new mapboxgl.ScaleControl());
-    const drawObj = getDraw();
+    const drawObj = getDraw('map');
     map.addControl(drawObj);
     // 드래그 제한 2d
     // map.dragRotate.disable();
@@ -346,6 +349,8 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
       }
     ));
 
+    let startPoint = null;
+
     map.on('style.load', () => {
       const layers = map.getStyle().layers;
       const labelLayerId = layers.find(
@@ -566,11 +571,52 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
 
       setMapLoaded(true);
     });
+
+    map.on('click', e => {
+      if (drawObj.getMode() === 'draw_line_string') {
+        mouseCursorRef.current.style.display = 'block';
+        mouseCursorRef.current.style.left = e.originalEvent.pageX + 'px';
+        mouseCursorRef.current.style.top = e.originalEvent.pageY + 45 + 'px';
+        // mouseCursorRef.current.innerText = '시작점 선택';
+        startPoint = e.lngLat;
+      }
+    });
+
+    map.on('mousemove', e => {
+      if (startPoint) {
+        // console.log(drawObj.getAll());
+        const feature = [];
+        drawObj
+          .getAll()
+          .features[0].geometry.coordinates.map(i => feature.push(i));
+        const obj = {
+          geometry: {
+            coordinates: [...feature],
+            type: 'LineString'
+          },
+          type: 'Feature'
+        };
+        const distance = turf.length(obj);
+        mouseCursorRef.current.innerText = `${distance.toLocaleString()}km`;
+        // const endPoint = e.lngLat;
+        // const distance = calculateDistance(startPoint, endPoint);
+        // mouseCursorRef.current.innerText = `Distance from start point: ${distance.toFixed(
+        //   2
+        // )} meters`;
+      }
+    });
+
     handlerDrawObjInit(drawObj);
     setMapObject(map);
     dispatch(clientMapInit(map));
   };
 
+  function calculateDistance(point1, point2) {
+    return mapboxgl.MercatorCoordinate.fromLngLat(point1).distanceTo(
+      mapboxgl.MercatorCoordinate.fromLngLat(point2)
+    );
+  }
+
   return (
     <>
       <div
@@ -578,6 +624,18 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
         ref={mapContainer}
         style={{ width: '100%', height: '100vh' }}
       ></div>
+      <div
+        ref={mouseCursorRef}
+        style={{
+          position: 'absolute',
+          display: 'none',
+          background: '#8a1c05',
+          color: '#fff',
+          padding: '5px',
+          borderRadius: '5px',
+          fontWeight: 500
+        }}
+      ></div>
       {isMapLoaded && mapObject ? (
         <>
           <DronToast />
diff --git a/src/utility/MapUtils.js b/src/utility/MapUtils.js
index f61faec3..c1a28193 100644
--- a/src/utility/MapUtils.js
+++ b/src/utility/MapUtils.js
@@ -476,96 +476,182 @@ export const flightlayerBuffer = source => {
 };
 
 // 비행구역 상세맵 draw 정보 셋팅
-export const getDraw = () =>
-  new MapboxDraw({
-    displayControlsDefault: false,
-    userProperties: true,
-    boxSelect: false,
-    modes: {
-      ...MapboxDraw.modes,
-      draw_circle: CircleMode,
-      drag_circle: DragCircleMode,
-      direct_select: DirectMode,
-      simple_select: SimpleSelectMode
-    },
-    styles: [
-      {
-        // polyline
-        id: 'gl-draw-line',
-        type: 'line',
-        filter: [
-          'all',
-          ['==', '$type', 'LineString'],
-          ['!=', 'mode', 'static']
-        ],
-        layout: {
-          'line-cap': 'round',
-          'line-join': 'round'
-        },
-        paint: {
-          'line-color': '#8a1c05',
-          'line-dasharray': [0.2, 2],
-          'line-width': 2
-        }
-      },
-      {
-        // polygon fill
-        id: 'gl-draw-polygon-fill',
-        type: 'fill',
-        filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
-        paint: {
-          'fill-color': '#8a1c05',
-          'fill-outline-color': '#8a1c05',
-          'fill-opacity': 0.1
-        }
+export const getDraw = mode => {
+  if (mode === 'laanc') {
+    return new MapboxDraw({
+      displayControlsDefault: false,
+      userProperties: true,
+      boxSelect: false,
+      modes: {
+        ...MapboxDraw.modes,
+        draw_circle: CircleMode,
+        drag_circle: DragCircleMode,
+        direct_select: DirectMode,
+        simple_select: SimpleSelectMode
       },
-      // polygon outline
-      {
-        id: 'gl-draw-polygon-stroke-active',
-        type: 'line',
-        filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
-        layout: {
-          'line-cap': 'round',
-          'line-join': 'round'
+      styles: [
+        {
+          // polyline
+          id: 'gl-draw-line',
+          type: 'line',
+          filter: [
+            'all',
+            ['==', '$type', 'LineString'],
+            ['!=', 'mode', 'static']
+          ],
+          layout: {
+            'line-cap': 'round',
+            'line-join': 'round'
+          },
+          paint: {
+            'line-color': '#8a1c05',
+            'line-dasharray': [0.2, 2],
+            'line-width': 2
+          }
         },
-        paint: {
-          'line-color': '#8a1c05',
-          'line-dasharray': [0.2, 2],
-          'line-width': 2
-        }
-      },
-      {
-        // vertex point halos
-        id: 'gl-draw-polygon-and-line-vertex-halo-active',
-        type: 'circle',
-        filter: [
-          'all',
-          ['==', 'meta', 'vertex'],
-          ['==', '$type', 'Point'],
-          ['!=', 'mode', 'static']
-        ],
-        paint: {
-          'circle-radius': 8,
-          'circle-color': '#ffffff'
+        {
+          // polygon fill
+          id: 'gl-draw-polygon-fill',
+          type: 'fill',
+          filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
+          paint: {
+            'fill-color': '#8a1c05',
+            'fill-outline-color': '#8a1c05',
+            'fill-opacity': 0.1
+          }
+        },
+        // polygon outline
+        {
+          id: 'gl-draw-polygon-stroke-active',
+          type: 'line',
+          filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
+          layout: {
+            'line-cap': 'round',
+            'line-join': 'round'
+          },
+          paint: {
+            'line-color': '#8a1c05',
+            'line-dasharray': [0.2, 2],
+            'line-width': 2
+          }
+        },
+        {
+          // vertex point halos
+          id: 'gl-draw-polygon-and-line-vertex-halo-active',
+          type: 'circle',
+          filter: [
+            'all',
+            ['==', 'meta', 'vertex'],
+            ['==', '$type', 'Point'],
+            ['!=', 'mode', 'static']
+          ],
+          paint: {
+            'circle-radius': 8,
+            'circle-color': '#ffffff'
+          }
+        },
+        {
+          // vertex points
+          id: 'gl-draw-polygon-and-line-vertex-active',
+          type: 'circle',
+          filter: [
+            'all',
+            ['==', 'meta', 'vertex'],
+            ['==', '$type', 'Point'],
+            ['!=', 'mode', 'static']
+          ],
+          paint: {
+            'circle-radius': 6,
+            'circle-color': '#8a1c05'
+          }
         }
+      ]
+    });
+  } else {
+    return new MapboxDraw({
+      displayControlsDefault: false,
+      userProperties: true,
+      boxSelect: false,
+      modes: {
+        ...MapboxDraw.modes,
+        draw_circle: CircleMode,
+        drag_circle: DragCircleMode,
+        direct_select: DirectMode,
+        simple_select: SimpleSelectMode
       },
-      {
-        // vertex points
-        id: 'gl-draw-polygon-and-line-vertex-active',
-        type: 'circle',
-        filter: [
-          'all',
-          ['==', 'meta', 'vertex'],
-          ['==', '$type', 'Point'],
-          ['!=', 'mode', 'static']
-        ],
-        paint: {
-          'circle-radius': 6,
-          'circle-color': '#8a1c05'
+      styles: [
+        {
+          // polyline
+          id: 'gl-draw-line',
+          type: 'line',
+          filter: [
+            'all',
+            ['==', '$type', 'LineString'],
+            ['!=', 'mode', 'static']
+          ],
+          layout: {
+            'line-cap': 'round',
+            'line-join': 'round'
+          },
+          paint: {
+            'line-color': '#8a1c05',
+            'line-width': 2
+          }
+        },
+        {
+          // polygon fill
+          id: 'gl-draw-polygon-fill',
+          type: 'fill',
+          filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
+          paint: {
+            'fill-color': '#8a1c05',
+            'fill-outline-color': '#8a1c05',
+            'fill-opacity': 0.1
+          }
+        },
+        // polygon outline
+        {
+          id: 'gl-draw-polygon-stroke-active',
+          type: 'line',
+          filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
+          layout: {
+            'line-cap': 'round',
+            'line-join': 'round'
+          },
+          paint: {
+            'line-color': '#8a1c05',
+            'line-dasharray': [0.2, 2],
+            'line-width': 2
+          }
+        },
+        {
+          // vertex point halos
+          id: 'gl-draw-polygon-and-line-vertex-halo-active',
+          type: 'circle',
+          filter: [
+            'all',
+            ['==', 'meta', 'vertex'],
+            ['==', '$type', 'Point'],
+            ['!=', 'mode', 'static']
+          ],
+          paint: {
+            'circle-radius': 8,
+            'circle-color': '#ffffff'
+          }
+        },
+        {
+          // vertex points
+          id: 'gl-draw-polygon-and-line-vertex-active',
+          type: 'circle',
+          paint: {
+            'circle-radius': 6,
+            'circle-color': '#8a1c05'
+          }
         }
-      }
-    ]
-  });
+      ]
+    });
+  }
+};
 
 /**
  * 그리기모드 셋팅