From 7687b4823f25de88069ae4ae07774fb48621c8ad Mon Sep 17 00:00:00 2001
From: JANGHYUNn <kimjh2369@gmail.com>
Date: Fri, 12 Jul 2024 14:38:07 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B4=80=EC=A0=9C=EA=B3=BC,=20=EC=9A=B4?=
 =?UTF-8?q?=ED=95=AD=EA=B3=BC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B3=B5?=
 =?UTF-8?q?=ED=86=B5=20ui=20sync?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/map/mapbox/MapBoxMap.js        |  8 ++--
 .../flight/ControlApprovalsContainer.js       | 42 ++++++++++++++++++-
 2 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js
index d90fccaf..1bc3e417 100644
--- a/src/components/map/mapbox/MapBoxMap.js
+++ b/src/components/map/mapbox/MapBoxMap.js
@@ -594,10 +594,12 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
           },
           type: 'Feature'
         };
-        distance = turf.length(obj);
+        distance = turf.length(obj, { units: 'kilometers' });
+        distance = distance * 1000;
+        distance = distance.toFixed(2);
         mouseCursorRef.current.style.left = e.originalEvent.pageX + 'px';
         mouseCursorRef.current.style.top = e.originalEvent.pageY + 45 + 'px';
-        mouseCursorRef.current.innerText = `${distance.toLocaleString()}km`;
+        mouseCursorRef.current.innerText = `${distance.toLocaleString()}m`;
         // const endPoint = e.lngLat;
         // const distance = calculateDistance(startPoint, endPoint);
         // mouseCursorRef.current.innerText = `Distance from start point: ${distance.toFixed(
@@ -606,7 +608,7 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
         if (drawObj.getMode() === 'simple_select') {
           // startPoint = null;
           const box = document.getElementById('distance_box');
-          box.innerText = `${distance.toLocaleString()}km`;
+          box.innerText = `${distance.toLocaleString()}m`;
           box.style.display = 'block';
           mouseCursorRef.current.style.display = 'none';
           mouseCursorRef.current.style.innerText = '';
diff --git a/src/containers/flight/ControlApprovalsContainer.js b/src/containers/flight/ControlApprovalsContainer.js
index b57725a0..9178d922 100644
--- a/src/containers/flight/ControlApprovalsContainer.js
+++ b/src/containers/flight/ControlApprovalsContainer.js
@@ -33,7 +33,13 @@ import {
   ModalFooter,
   Table
 } from '@component/ui';
-import { FiUsers, FiFileText } from 'react-icons/fi';
+import {
+  FiUsers,
+  FiFileText,
+  FiRotateCw,
+  FiCornerUpLeft
+} from 'react-icons/fi';
+import { X } from 'react-feather';
 
 export default function ControlApprovalsContainer({ mode }) {
   const dispatch = useDispatch();
@@ -389,6 +395,40 @@ export default function ControlApprovalsContainer({ mode }) {
                   </ButtonGroup>
                 </div>
               </div>
+              <div className='data-box-btn-list'>
+                <h4>측정</h4>
+                <div className='distance-check'>
+                  <div class='btn-box'>
+                    <Button
+                      className='btn-icon rounded-circle'
+                      color='primary'
+                      size='sm'
+                    >
+                      <FiRotateCw size={16} />
+                    </Button>
+                    <Button
+                      className='btn-icon rounded-circle'
+                      color='primary'
+                      size='sm'
+                    >
+                      <FiCornerUpLeft size={16} />
+                    </Button>
+                    <Button
+                      className='btn-icon rounded-circle'
+                      color='dark'
+                      size='sm'
+                    >
+                      <X size={16} />
+                    </Button>
+                  </div>
+                  <div className='text'>
+                    <p>
+                      지도에서 지점을 클릭하여 거리를 측정하세요.
+                      <span className='finish'>총 거리 : 1050.24m</span>
+                    </p>
+                  </div>
+                </div>
+              </div>
             </Card>
           </div>
         </div>