From 508cea9f1baf1427269f067ef4a4d66719374628 Mon Sep 17 00:00:00 2001
From: geun1416 <1416geun@naver.com>
Date: Fri, 22 Sep 2023 18:19:01 +0900
Subject: [PATCH] laanc step 1

---
 src/assets/css/custom.css                     |  15 +-
 .../basis/flight/plan/FlightPlanContainer.js  | 151 +++++++++++++++++-
 2 files changed, 160 insertions(+), 6 deletions(-)

diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css
index 81f1c34..407f59d 100644
--- a/src/assets/css/custom.css
+++ b/src/assets/css/custom.css
@@ -905,7 +905,14 @@ background-size: 75% auto;
 .laanc-btn{width:100%;font-size:1rem}
 .onstop-link a{width:100%;color: #8a1c05}
 .onstop-link a + a{margin-top:10px}
-.pal-card-box .laanc-btn{max-width:280px}
-
-.laanc-dim{position: absolute;width:100%;height:100vh;background:rgb(0, 0, 0, 0.5);top:0;left:0;}
-.laanc-layout{position:absolute;top:0;right:0;width:400px;height:100vh;background:red;z-index: 999;}
\ No newline at end of file
+.laanc-pop-btn{font-size:1rem;min-width:280px;margin-bottom:1rem}
+.laanc-modal{margin:0;position:fixed;right:0;top:0;height:100vh;overflow-y: scroll;box-shadow: -4px 1px 10px #ddd;}
+.laanc-modal .modal-content{height:100vh;}
+.laanc-modal .modal-header{position:sticky;width:100%;top:0;z-index:2;}
+.laanc-modal .modal-header h5{display:flex;width:100%;align-items: center;justify-content: space-between;}
+.laanc-modal .modal-header h5 button{position: absolute;z-index: 3;right:0px}
+.laanc-modal .modal-body{overflow-y:scroll;padding-bottom:90px;}
+.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;}
\ No newline at end of file
diff --git a/src/containers/basis/flight/plan/FlightPlanContainer.js b/src/containers/basis/flight/plan/FlightPlanContainer.js
index eb68eff..a04fe53 100644
--- a/src/containers/basis/flight/plan/FlightPlanContainer.js
+++ b/src/containers/basis/flight/plan/FlightPlanContainer.js
@@ -6,7 +6,7 @@ import { CustomMainLayout } from '../../../../components/layout/CustomMainLayout
 import FlightPlanSearch from '../../../../components/basis/flight/plan/FlightPlanSearch';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import * as FlightAction from '../../../../modules/basis/flight/actions/basisFlightAction';
-import { Row, Col, Button } from 'reactstrap';
+import { Row, Col, Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert, FormGroup, Label, Input  } from 'reactstrap';
 import {
   JOIN_LIST,
   GROUP_LIST
@@ -178,10 +178,157 @@ const FlightPlanContainer = () => {
   const onChangePage = page => {
     dispatch(FlightAction.FLIGHT_PLAN_LIST.request({ ...searchData, page }));
   };
+
+  const [centeredModal, setCenteredModal] = useState(false)
+  const [disabledAnimation, setDisabledAnimation] = useState(false)
+
   return (
 
     <CustomMainLayout title={'LAANC 신청 목록'}>
-      d안돼에에에에에에에
+      <div className='disabled-animation-modal'>
+        <Button color='primary' className='laanc-pop-btn' onClick={() => setDisabledAnimation(!disabledAnimation)}>
+          LAANC 신청하기
+        </Button>
+        <Modal
+          isOpen={disabledAnimation}
+          toggle={() => setDisabledAnimation(!disabledAnimation)}
+          className='modal-dialog-centered laanc-modal'
+          fade={false}
+          backdrop={false}
+        >
+          <ModalHeader>LAANC 승인 요청<Button color='danger' onClick={() => setDisabledAnimation(!disabledAnimation)}>취소</Button></ModalHeader>
+          <ModalBody>
+            <div>
+              <Row>
+              <Col className='list-input' md='6' sm='12'>                           
+                <FormGroup>
+                  <div className='ti'>조종사 정보</div>
+                  <Label for='test'><span className='necessary'>*</span>성명</Label>
+                  <Input type='text' id='test' size='sm' placeholder='' value='홍길동' disabled/>
+                </FormGroup>
+              </Col>
+              <Col className='list-input' md='6' sm='12'>                           
+                <FormGroup>
+                <div className='ti'>비행 유형</div>
+                  <Label for='test'><span className='necessary'>*</span>종류</Label>
+                  <Input type='select' name='select' size='sm' id='test'>
+                      <option>무인 비행기</option>
+                      <option>무인 헬리콥터</option>
+                      <option>무인 멀티콥터</option> 
+                      <option>무인 비행선</option>                        
+                  </Input>
+                </FormGroup>
+              </Col>
+              <Col className='list-input' md='12'> 
+                <div className='ti'>비행 계획 정보</div>                          
+                  <Row>
+                    <Col className='list-input' md='4'>                           
+                      <FormGroup>
+                        <Label for='test'><span className='necessary'>*</span>비행 시작 일자</Label>
+                        <Input type='text' id='test' size='sm' placeholder='' />
+                      </FormGroup>
+                    </Col> 
+                    <Col className='list-input' md='4'>                           
+                      <FormGroup>
+                        <Label for='test'><span className='necessary'>*</span>비행 종료 일자</Label>
+                        <Input type='text' id='test' size='sm' placeholder='' />
+                      </FormGroup>
+                    </Col> 
+                    <Col className='list-input' md='4'>                           
+                      <FormGroup>
+                        <Label for='test'><span className='necessary'>*</span>비행목적</Label>
+                        <Input type='text' id='test' size='sm' placeholder='' />
+                      </FormGroup>
+                    </Col> 
+                  </Row>
+                </Col>
+                <Col className='list-input' md='12' sm='12'> 
+                  <div className='ti'>비행 구역 정보<Button size='sm'>적용</Button></div>                          
+                  <Row>
+                    <Col className='list-input' md='6'>                           
+                      <FormGroup>
+                        <Label for='test'><span className='necessary'>*</span>고도</Label>
+                        <Input type='text' id='test' size='sm' placeholder='' />
+                      </FormGroup>
+                    </Col> 
+                    <Col className='list-input' md='6'>                           
+                      <FormGroup>
+                        <Label for='test'><span className='necessary'>*</span>반경</Label>
+                        <Input type='text' id='test' size='sm' placeholder='' />
+                      </FormGroup>
+                    </Col>
+                    <Col className='list-input' md='6'>                           
+                      <FormGroup>
+                        <Label for='test'><span className='necessary'>*</span>비행방식</Label>
+                        <Input type='text' id='test' size='sm' placeholder='' />
+                      </FormGroup>
+                    </Col>                    
+                    <Col className='list-input' md='6'>                           
+                      <FormGroup>
+                        <Label for='test'><span className='necessary'></span></Label>
+                        <Input type='text' id='test' size='sm' placeholder='' />
+                      </FormGroup>
+                    </Col>  
+                  </Row>
+                </Col>
+                <Col className='list-input' md='12' sm='12'> 
+                  <div className='ti'>기체 정보</div>                          
+                  <Row>
+                    <Col className='list-input' md='4'>                           
+                      <FormGroup>
+                        <Label for='test'><span className='necessary'>*</span>기체 중량</Label>
+                        <Input type='text' id='test' size='sm' placeholder='' />
+                      </FormGroup>
+                    </Col> 
+                    <Col className='list-input' md='4'>                           
+                      <FormGroup>
+                        <Label for='test'><span className='necessary'>*</span>기체 종류</Label>
+                        <Input type='text' id='test' size='sm' placeholder='' />
+                      </FormGroup>
+                    </Col>
+                    <Col className='list-input' md='4'>                           
+                      <FormGroup>
+                        <Label for='test'><span className='necessary'>*</span>기체 신고 번호</Label>
+                        <Input type='text' id='test' size='sm' placeholder='' />
+                      </FormGroup>
+                    </Col>                        
+                  </Row>
+                </Col>                                                                                                                         
+              </Row>
+            </div>
+            <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'>
+                    <ModalHeader toggle={() => setCenteredModal(!centeredModal)}>Vertically Centered</ModalHeader>
+                    <ModalBody>
+                      Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake
+                      candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake
+                      liquorice.
+                    </ModalBody>
+                    <ModalFooter>
+                      <Button color='primary' onClick={() => setCenteredModal(!centeredModal)}>
+                        Accept
+                      </Button>{' '}
+                    </ModalFooter>
+                  </Modal>
+                </div>
+            </div>
+            <div className='mt-1'>
+              <div className='ti'>유의사항</div>
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            {/* 유효성 검사 완료후 다음 진행할 수 있을때 버튼에 ouline 뺴주고 color='danger' 넣어주기 */}
+            <Button outline onClick={() => setDisabledAnimation(!disabledAnimation)}>
+              다음
+            </Button>{' '}
+          </ModalFooter>
+        </Modal>
+      </div>
       <div className='pal-card-box'>
         <Row>
           <Col sm='12' lg='12'>