map btn

src/assets/css/custom.css

@@ -1243,4 +1243,11 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
 
 /*new approval table edit input*/
 .invoice-list-dataTable.flight-approval .ant-table .ant-input, 
-.invoice-list-dataTable.flight-approval .ant-table .ant-form-item-explain-error{font-size:0.8rem}
+.invoice-list-dataTable.flight-approval .ant-table .ant-form-item-explain-error{font-size:0.8rem}
+
+.main-data{position:absolute;z-index: 999;top:10px;left:100px;display:flex;font-size:0.875rem;transition: 0.5s ease;-webkit-transition: 0.5s ease;}
+.main-data-box + .main-data-box{margin-left:20px;}
+.data-box-btn .card{min-height:88px;margin:0;padding:14px; background:#fff;}
+.data-box-btn-list h4{color: #555;font-weight: 500;margin-bottom:4px;}
+.data-box-btn-list + .data-box-btn-list{margin-top:0.8rem}
+.data-box-btn-list .btn{border-top:0;border-bottom:0;}

src/containers/flight/NewFlightApprovalsContainer.js

@@ -22,6 +22,7 @@ import { setLogout } from '@src/redux/features/account/auth/authThunk';
 import logo from '../../assets/images/logo/kac_logo_ icon.svg';
 import { AiOutlinePoweroff } from 'react-icons/ai';
 import WebsocketClient from '../../components/websocket/WebsocketClient';
+import { Card, ButtonGroup, Button } from '@component/ui';
 
 export default function NewFlightApprovalsContainer({ mode }) {
   const dispatch = useDispatch();
@@ -333,6 +334,41 @@ export default function NewFlightApprovalsContainer({ mode }) {
   return (
     <>
       <div className='map' style={{ width: '100%' }}>
+        <div className="main-data">
+          <div className='data-box-btn'>
+            <Card>
+              <div className='data-box-btn-list'>
+                <h4>지도유형</h4>
+                <div className='map-btn'>
+                  <ButtonGroup>
+                    <Button primary>
+                      지형지도
+                    </Button>
+                    <Button primary>
+                      일반지도
+                    </Button>
+                    <Button primary>
+                      2D
+                    </Button>
+                  </ButtonGroup>
+                </div>
+              </div>
+              <div className='data-box-btn-list'>
+                <h4>거리측정</h4>
+                <div className='map-btn'>
+                  <ButtonGroup>
+                    <Button primary>
+                      직선
+                    </Button>
+                    <Button primary>
+                      다각형
+                    </Button>
+                  </ButtonGroup>
+                </div>
+              </div>
+            </Card>
+          </div>
+        </div>
         <MapControl />
       </div>
       <div className='left-menu'>