.

src/assets/css/custom.css

@@ -898,3 +898,8 @@ background-size: 75% auto;
 .step-reservation-header .place span{font-size:1.5rem;font-weight:500;color:#fff}
 .step-reservation-header .arrow svg{width:22px;margin-top:-2px;margin-left:8px;margin-right:8px}
 
+.fsm-box{padding:1rem}
+.fsm-ti{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #404656;padding-bottom:0.5rem;margin-bottom:1rem}
+.fsm-ti h5{font-weight:500}
+.fsm-ti .btn-wrap button + button{margin-left:0.5rem}
+.fsm-box .list-input label{font-size:0.875rem}

src/views/control/setting/ControlFsm.js

@@ -1,53 +1,135 @@
 import { useState } from 'react';
-import {
+import { Button, Row, Col, FormGroup, Label, Input, Modal, ModalHeader, ModalBody } from 'reactstrap';
-  Badge,
-  Button,
-  Input,
-  InputGroup,
-  Modal,
-  ModalHeader,
-  ModalBody,
-  Nav,
-  NavItem,
-  NavLink
-} from 'reactstrap';
-import {
-  Step1,
-  Step2,
-  Step3,
-  Step4,
-  ReserveStep1,
-  ReserveStep2,
-  ReserveStep3,
-  ReserveStep4
-} from './steps';
-
-export default function ControlReservation({ modal, handler }) {
-  const [activeTab, setActiveTab] = useState(1);
-  const [step, setStep] = useState(1);
-  const [airTraficCheck, setAirTraficCheck] = useState(1);
-  const [isChoise, setIsChoise] = useState(false);
-  const [search, setSearch] = useState(false);
-  const [reserveStep, setReserveStep] = useState(1);
 
+export default function ControlFsm({ modal, handler }) {
   return (
     <div
       className='vertically-centered-modal'
-      style={{ maxWidth: '95vh', height: '95vh', margin: 0 }}
     >
       <Modal
         isOpen={modal}
         toggle={handler}
         className='modal-dialog-centered modal-lg'
-        style={{ margin: '0px auto', maxWidth: '90%', minHeight: '100vh' }}
       >
         <ModalHeader
           toggle={handler}
         >
-          FSM 비행계획서 작성
+          FSM 비행계획서
         </ModalHeader>
         <ModalBody className='pal-modal-body'>
-          ddd
+            <div className='fsm-wrap'>
+              <div className='fsm-box'>
+                <div className='fsm-ti'>
+                  <h5>비행계획서 상세정보</h5>
+                  <div className='btn-wrap'>
+                    <Button>CHG</Button>
+                    <Button>CNL</Button>
+                    <Button color='success'>비행계획서 제출</Button>
+                  </div>
+                </div>
+                <Row>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>서류구분</Label>
+                      <Input
+                        type='select'
+                        name='select'
+                        bsSize='sm'
+                        id=''
+                      >
+                        <option>1</option>
+                      </Input>
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>항공기 등록기호</Label>
+                      <Input
+                        type='text'
+                        id=''
+                        bsSize='sm'
+                        placeholder=''
+                        value=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>비행계획일자</Label>
+                      <Input
+                        type='text'
+                        id=''
+                        bsSize='sm'
+                        placeholder=''
+                        value=''
+                      />
+                    </FormGroup>
+                  </Col>
+                </Row>
+                <Row>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Priority</Label>
+                      <Input
+                        type='select'
+                        name='select'
+                        bsSize='sm'
+                        id=''
+                      >
+                        <option>1</option>
+                      </Input>
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Filing Time</Label>
+                      <Input
+                        type='text'
+                        id=''
+                        bsSize='sm'
+                        placeholder=''
+                        value=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>의뢰부서</Label>
+                      <Input
+                        type='text'
+                        id=''
+                        bsSize='sm'
+                        placeholder=''
+                        value=''
+                      />
+                    </FormGroup>
+                  </Col>
+                </Row>
+                <hr/>
+                <Row>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Message Type</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                  <Col className='list-input' md='3' sm='12'>
+                    <FormGroup>
+                      <Label for=''>Flight Identity(Callsign)</Label>
+                      <Input
+                        type='text'
+                        bsSize='sm'
+                        id=''
+                      />
+                    </FormGroup>
+                  </Col>
+                </Row>
+              </div>
+            </div>
         </ModalBody>
       </Modal>
     </div>