관제과, 운항과 페이지 공통 ui sync

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 = '';

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>