step1 완료

src/assets/css/custom.css

@@ -915,4 +915,10 @@ background-size: 75% auto;
 .laanc-modal .form-group label{font-size:0.875rem;font-weight:400;}
 .laanc-modal .ti{font-size:1rem;font-weight:500;margin-bottom:8px;display:flex;align-items: center;justify-content: space-between;}
 .laanc-map-sm{min-height:300px;background:#ddd;}
-.laanc-modal .modal-footer{position: absolute;bottom:0;width:100%;z-index:4;background:#fff;}
+.laanc-modal .modal-footer{position: absolute;bottom:0;width:100%;z-index:4;background:#fff;justify-content: space-between}
+.laanc-modal .step{display:flex;position:absolute;left:50%;top:45%;transform: translate(-50%,-45%);}
+.laanc-modal .step li + li{margin-left:8px}
+.laanc-modal .step span{display:inline-block;width:14px;height:14px;border-radius:100%;background:#ddd}
+.laanc-modal .step span.on{background:#8a1c05}
+.laanc-map-btn{width:100%;display:flex;justify-content: space-between}
+.laanc-point button + button{margin-left:10px;}

src/containers/basis/flight/plan/FlightPlanContainer.js

@@ -236,7 +236,7 @@ const FlightPlanContainer = () => {
                     </Col> 
                     <Col className='list-input' md='4'>                           
                       <FormGroup>
-                        <Label for='test'><span className='necessary'>*</span>비행목적</Label>
+                        <Label for='test'><span className='necessary'>*</span>비행 목적</Label>
                         <Input type='text' id='test' size='sm' placeholder='' />
                       </FormGroup>
                     </Col> 
@@ -297,22 +297,30 @@ const FlightPlanContainer = () => {
               </Row>
             </div>
             <div>
-              <div className='ti'>비행구역설정<Button size='sm' onClick={() => setCenteredModal(!centeredModal)}>자세히보기</Button></div>
+              <div className='ti'>비행 구역 설정<Button size='sm' onClick={() => setCenteredModal(!centeredModal)}>자세히보기</Button></div>
                 <div className='laanc-map-sm'>
                   지도영역
                 </div>
                 <div className='vertically-centered-modal'>
-                  <Modal isOpen={centeredModal} toggle={() => setCenteredModal(!centeredModal)} className='modal-dialog-centered'>
+                  <Modal isOpen={centeredModal} toggle={() => setCenteredModal(!centeredModal)} className='modal-dialog-centered modal-xl'>
-                    <ModalHeader toggle={() => setCenteredModal(!centeredModal)}>Vertically Centered</ModalHeader>
+                    <ModalHeader toggle={() => setCenteredModal(!centeredModal)}>비행 구역 설정</ModalHeader>
                     <ModalBody>
-                      Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake
+                      지도영역 지도 height 정해주기
-                      candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake
-                      liquorice.
                     </ModalBody>
                     <ModalFooter>
-                      <Button color='primary' onClick={() => setCenteredModal(!centeredModal)}>
+                      <div className='laanc-map-btn'>
-                        Accept
+                          <div className='laanc-point'>
-                      </Button>{' '}
+                            <Button color='primary'>버튼1</Button>
+                            <Button color='primary'>버튼2</Button>
+                            <Button color='primary'>버튼3</Button>
+                            <Button color='primary'>버튼4</Button>
+                          </div>
+                          <div>
+                            <Button color='primary' onClick={() => setCenteredModal(!centeredModal)}>
+                              닫기
+                            </Button>
+                          </div>
+                      </div>  
                     </ModalFooter>
                   </Modal>
                 </div>
@@ -322,10 +330,18 @@ const FlightPlanContainer = () => {
             </div>
           </ModalBody>
           <ModalFooter>
+            <Button outline color='danger' onClick={() => setDisabledAnimation(!disabledAnimation)}>
+              이전
+            </Button>
+            <ul className='step'>
+              <li><span className='on'></span></li>
+              <li><span></span></li>
+              <li><span></span></li>
+            </ul>
             {/* 유효성 검사 완료후 다음 진행할 수 있을때 버튼에 ouline 뺴주고 color='danger' 넣어주기 */}
             <Button outline onClick={() => setDisabledAnimation(!disabledAnimation)}>
               다음
-            </Button>{' '}
+            </Button>
           </ModalFooter>
         </Modal>
       </div>