측정

src/assets/css/custom.css

@@ -1266,3 +1266,9 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
 .pal-table-warp .success{color:#0090d8;font-weight:400;}
 .pal-table-warp .fail{color:#ed1125;font-weight:400;}
 
+.distance-check .btn-box{margin-top:6px}
+.distance-check .btn-box button + button{margin-left:0.4rem}
+.distance-check .btn-box .btn-icon:hover{box-shadow:none;}
+.distance-check .text{margin-top:6px}
+.distance-check .text p{font-weight:400;}
+.distance-check .text p .finish{display:block;margin-top:-4px;font-weight:400;color:#0090d8}

src/containers/flight/OperationApprovalsContainer.js

@@ -37,7 +37,8 @@ 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'
 
 import mapboxgl from 'mapbox-gl';
 import * as turf from '@turf/turf';
@@ -726,6 +727,28 @@ export default function OperationApprovalsContainer({ 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>