From f5a636f2314678611e806fc919e70c05f8770b12 Mon Sep 17 00:00:00 2001
From: JANGHYUNn <kimjh2369@gmail.com>
Date: Fri, 12 Jul 2024 11:25:48 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A7=81=EC=84=A0=20=EA=B1=B0=EB=A6=AC?=
 =?UTF-8?q?=EC=B8=A1=EC=A0=95=20=EC=9E=84=EC=8B=9C=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/map/mapbox/MapBoxMap.js        | 30 +++++++++++++++----
 .../flight/OperationApprovalsContainer.js     | 30 +++++++++++++++----
 2 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js
index 7dbfcf10..d90fccaf 100644
--- a/src/components/map/mapbox/MapBoxMap.js
+++ b/src/components/map/mapbox/MapBoxMap.js
@@ -573,16 +573,14 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
     });
 
     map.on('click', e => {
+      console.log(drawObj.getMode());
       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 => {
+      let distance = 0;
       if (startPoint) {
         // console.log(drawObj.getAll());
         const feature = [];
@@ -596,13 +594,34 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
           },
           type: 'Feature'
         };
-        const distance = turf.length(obj);
+        distance = turf.length(obj);
+        mouseCursorRef.current.style.left = e.originalEvent.pageX + 'px';
+        mouseCursorRef.current.style.top = e.originalEvent.pageY + 45 + 'px';
         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`;
+        if (drawObj.getMode() === 'simple_select') {
+          // startPoint = null;
+          const box = document.getElementById('distance_box');
+          box.innerText = `${distance.toLocaleString()}km`;
+          box.style.display = 'block';
+          mouseCursorRef.current.style.display = 'none';
+          mouseCursorRef.current.style.innerText = '';
+        }
+        if (drawObj.getMode() === 'direct_select') {
+          const box = document.getElementById('distance_box');
+          box.innerText = `${distance.toLocaleString()}km`;
+        }
+      } else {
+        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 = '시작점 선택';
+        }
       }
     });
 
@@ -636,6 +655,7 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
           fontWeight: 500
         }}
       ></div>
+
       {isMapLoaded && mapObject ? (
         <>
           <DronToast />
diff --git a/src/containers/flight/OperationApprovalsContainer.js b/src/containers/flight/OperationApprovalsContainer.js
index b9e7ff2c..6edc0313 100644
--- a/src/containers/flight/OperationApprovalsContainer.js
+++ b/src/containers/flight/OperationApprovalsContainer.js
@@ -417,7 +417,12 @@ export default function OperationApprovalsContainer({ mode }) {
     });
   };
 
-  const handlerDrawTypeChange = val => {
+  const handlerDrawTypeChange = (e, val) => {
+    // const cursor = document.getElementById('distance_cursor');
+    // cursor.style.display = 'block';
+    // cursor.style.left = e.clientX + 'px';
+    // cursor.style.top = e.clientY + 45 + 'px';
+    // cursor.innerText = '시작점 선택';
     dispatch(clientChangeDrawType(val));
     handlerStartMode(val, drawObj);
   };
@@ -453,6 +458,21 @@ export default function OperationApprovalsContainer({ mode }) {
             test
           </Button>
         </div>
+        <div
+          id='distance_box'
+          style={{
+            position: 'absolute',
+            zIndex: '9999',
+            left: '500px',
+            top: '20px',
+            background: '#8a1c05',
+            color: '#fff',
+            padding: '5px',
+            borderRadius: '5px',
+            fontWeight: 500,
+            display: 'none'
+          }}
+        ></div>
         <div>
           <Modal
             isOpen={testModal}
@@ -689,16 +709,16 @@ export default function OperationApprovalsContainer({ mode }) {
                   <ButtonGroup>
                     <Button
                       color={drawType === 'LINE' ? 'primary' : ''}
-                      onClick={() => {
-                        handlerDrawTypeChange('LINE');
+                      onClick={e => {
+                        handlerDrawTypeChange(e, 'LINE');
                       }}
                     >
                       직선
                     </Button>
                     <Button
                       color={drawType === 'POLYGON' ? 'primary' : ''}
-                      onClick={() => {
-                        handlerDrawTypeChange('POLYGON');
+                      onClick={e => {
+                        handlerDrawTypeChange(e, 'POLYGON');
                       }}
                     >
                       다각형