laanc 컴포넌트 작업

src/containers/basis/flight/laanc/LaancContainer.js

@@ -0,0 +1,259 @@
+import FlightPlan from '../../../../views/laanc/FlightPlan';
+import Apply from '../../../../views/laanc/Apply';
+import { useEffect, useState } from 'react';
+import moment from 'moment';
+import { WeatherContainer } from '../../../../containers/basis/flight/plan/WeatherContainer';
+import { ErrorModal } from '../../../../components/modal/ErrorModal';
+import {
+  initFlight,
+  initFlightBas
+} from '../../../../modules/basis/flight/models/basisFlightModel';
+import {
+  Row,
+  Col,
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Alert,
+  FormGroup,
+  Label,
+  Input
+} from 'reactstrap';
+
+const LaancContainer = () => {
+  const [step, setStep] = useState(1);
+  const [detailData, setDetailData] = useState(initFlightBas.initDetail);
+  const [formModal, setFormModal] = useState(false);
+  const [disabledAnimation, setDisabledAnimation] = useState(true);
+  const [modal2, setModal2] = useState({
+    isOpen: false,
+    title: '',
+    desc: ''
+  });
+  const [centeredModal, setCenteredModal] = useState(false);
+  //날씨 임시 데이터
+  const [wheather, setWheather] = useState([
+    {
+      coordList: [
+        {
+          lat: 37.40284040287055,
+          lon: 126.68639226254697
+        }
+      ]
+    }
+  ]);
+
+  // step 핸들러
+  const handlerStep = step => {
+    setStep(step);
+  };
+
+  const handlerLogout = () => {
+    dispatch(Actions.logout.request());
+  };
+
+  useEffect(() => {}, [detailData]);
+
+  // 날씨 핸들러
+  const handlerWeather = () => {
+    setFormModal(!formModal);
+  };
+
+  // 비행계획서 작성 핸들러
+  const handleChange = ({ name, value, type, index, pIndex }) => {
+    const arrName = `${type}List`;
+
+    switch (type) {
+      case 'area':
+      case 'pilot':
+      case 'arcrft':
+        if (name === 'fltElev' || name === 'bufferZone' || name === 'hpno') {
+          const newValue = value.replace(/[^0-9]/g, '');
+          setDetailData(prevState => {
+            const arr = [...prevState[arrName]];
+            const updateData = {
+              ...prevState[arrName][0],
+              [name]: newValue
+            };
+            arr[0] = updateData;
+            return {
+              ...prevState,
+              [arrName]: arr
+            };
+          });
+        } else {
+          setDetailData(prevState => {
+            const arr = [...prevState[arrName]];
+            const updateData = {
+              ...prevState[arrName][0],
+              [name]: value
+            };
+            arr[0] = updateData;
+            return {
+              ...prevState,
+              [arrName]: arr
+            };
+          });
+        }
+        break;
+      case 'plan':
+      default:
+        setDetailData(prevState => ({
+          ...prevState,
+          [name]: value
+        }));
+        break;
+    }
+  };
+
+  console.log('>>>>', detailData);
+  // 스텝 1 다음 버튼 이벤트
+  const handlerNext = () => {
+    const reg_email =
+      /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;
+    const check_num = /[0-9]/;
+    const check_kor =
+      /^[가-힣a-zA-Z0-9][^!@#$%^&*()+\=\[\]{};':"\\|,.<>\/?\s]*$/;
+    // 시작일자
+    const schFltStDt = moment(detailData.schFltStDt, 'YYYY-MM-DD HH:mm:ss');
+    // 종료일자
+    const schFltEndDt = moment(detailData.schFltEndDt, 'YYYY-MM-DD HH:mm:ss');
+
+    const currentDate = moment(); // 현재 날짜와 시간을 가져옵니다.
+
+    if (!detailData.pilotList[0].memberName) {
+      setModal2({
+        isOpen: true,
+        title: '필수값 입력 오류',
+        desc: '이름을 입력해 주세요.'
+      });
+      return false;
+    } else if (!check_num.test(detailData.pilotList[0].hpno)) {
+      setModal2({
+        isOpen: true,
+        title: '필수값 입력 오류',
+        desc: '연락처를 확인해 주세요.'
+      });
+      return false;
+    } else if (!reg_email.test(detailData.pilotList[0].email)) {
+      setModal2({
+        isOpen: true,
+        title: '필수값 입력 오류',
+        desc: '이메일을 확인해 주세요.'
+      });
+
+      return false;
+    } else if (
+      !schFltStDt.isAfter(currentDate) ||
+      !schFltEndDt.isAfter(currentDate)
+    ) {
+      setModal2({
+        isOpen: true,
+        title: '필수값 입력 오류',
+        desc: '비행 일자가 이미 지난 일자입니다.'
+      });
+      return false;
+    } else if (schFltStDt.isAfter(schFltEndDt)) {
+      setModal2({
+        isOpen: true,
+        title: '필수값 입력 오류',
+        desc: '비행일자를 확인해주세요.'
+      });
+      return false;
+    } else if (!detailData.fltPurpose) {
+      setModal2({
+        isOpen: true,
+        title: '필수값 입력 오류',
+        desc: '비행목적을 선택해 주세요.'
+      });
+
+      return false;
+    } else if (!detailData.areaList[0].fltElev) {
+      setModal2({
+        isOpen: true,
+        title: '필수값 입력 오류',
+        desc: '고도를 입력해 주세요.'
+      });
+
+      return false;
+    } else if (!detailData.areaList[0].bufferZone) {
+      setModal2({
+        isOpen: true,
+        title: '필수값 입력 오류',
+        desc: '반경을 입력해 주세요.'
+      });
+
+      return false;
+    } else if (!detailData.areaList[0].fltMethod) {
+      setModal2({
+        isOpen: true,
+        title: '필수값 입력 오류',
+        desc: '비행방식를 입력해 주세요.'
+      });
+
+      return false;
+    } else if (!detailData.arcrftList[0].groupNm) {
+      setModal2({
+        isOpen: true,
+        title: '필수값 입력 오류',
+        desc: '기체 신고 번호를 입력해 주세요.'
+      });
+
+      return false;
+    } else if (!detailData.arcrftList[0].arcrftTypeCd) {
+      setModal2({
+        isOpen: true,
+        title: '필수값 입력 오류',
+        desc: '기체 종류를 입력해 주세요.'
+      });
+
+      return false;
+    } else if (!detailData.arcrftList[0].ownerNm) {
+      setModal2({
+        isOpen: true,
+        title: '필수값 입력 오류',
+        desc: '소유자명(법인명)를 입력해 주세요.'
+      });
+
+      return false;
+    } else {
+      //api 호출 부분
+
+      setStep(2);
+    }
+  };
+
+  return (
+    <>
+      <div className='disabled-animation-modal'>
+        <Modal
+          isOpen={disabledAnimation}
+          toggle={() => setDisabledAnimation(!disabledAnimation)}
+          className='modal-dialog-centered laanc-modal'
+          fade={false}
+          backdrop={false}
+        >
+          {step === 1 && (
+            <>
+              <FlightPlan
+                //  handlerStep={handlerStep}
+                data={detailData}
+                handleChange={handleChange}
+                handlerNext={handlerNext}
+                handlerWeather={handlerWeather}
+                setDisabledAnimation={setDisabledAnimation}
+                disabledAnimation={disabledAnimation}
+              />
+            </>
+          )}
+
+          {step === 2 && <Apply handlerStep={handlerStep} data={detailData} />}
+        </Modal>
+        <ErrorModal modal={modal2} setModal={setModal2} />
+      </div>
+    </>
+  );
+};
+export default LaancContainer;

src/modules/laanc/reducers/laancReducers.ts

@@ -15,12 +15,14 @@ import {
 
 export const laancReducer = createReducer<laancState, Actions.LaancAction>(
   laancControlData
-).handleAction(Actions.laancFlightApproval.success, (state, action) =>
-  produce(state, draft => {
-    // laanc 승인 처리
-    const data = action.payload;
-    draft.laancApproval = data;
-  })
 );
 
+// handleAction(Actions.laancFlightApproval.success, (state, action) =>
+//   produce(state, draft => {
+//     // laanc 승인 처리
+//     const data = action.payload;
+//     draft.approval = data;
+// })
+// );
+
 export default laancReducer;

src/views/laanc/FlightArea.js

@@ -0,0 +1,49 @@
+import {
+  Row,
+  Col,
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Alert,
+  FormGroup,
+  Label,
+  Input
+} from 'reactstrap';
+
+const FlightArea = ({ centeredModal, setCenteredModal }) => {
+  return (
+    <div className='vertically-centered-modal'>
+      <Modal
+        isOpen={centeredModal}
+        toggle={() => setCenteredModal(!centeredModal)}
+        className='modal-dialog-centered modal-xl'
+      >
+        <ModalHeader toggle={() => setCenteredModal(!centeredModal)}>
+          비행 구역 설정
+        </ModalHeader>
+        <ModalBody>지도영역 지도 height 정해주기</ModalBody>
+        <ModalFooter>
+          <div className='laanc-map-btn'>
+            <div className='laanc-point'>
+              <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>
+  );
+};
+export default FlightArea;

src/views/laanc/FlightPlan.js

@@ -9,19 +9,19 @@ import '@styles/react/libs/flatpickr/flatpickr.scss';
 import { ErrorModal } from '../../components/modal/ErrorModal';
 import moment from 'moment';
 import {
-  Button,
-  InputGroup,
-  ButtonGroup,
-  InputGroupAddon,
-  Input,
   Row,
   Col,
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Alert,
   FormGroup,
   Label,
-  Card,
+  Input
-  CardBody,
-  CustomInput
 } from 'reactstrap';
+
 import {
   initFlight,
   initFlightBas
@@ -33,8 +33,17 @@ import {
   sensorClickAction
 } from '../../modules/control/map/actions/controlMapActions';
 import { useHistory } from 'react-router-dom';
-const FlightPlan = ({ handleChange, handlerNext, data, handlerWeather }) => {
+import FlightArea from './FlightArea';
+const FlightPlan = ({
+  handleChange,
+  handlerNext,
+  data,
+  handlerWeather,
+  disabledAnimation,
+  setDisabledAnimation
+}) => {
   const user = useSelector(state => state.authState);
+  const [centeredModal, setCenteredModal] = useState(false);
 
   const history = useHistory();
 
@@ -43,469 +52,371 @@ const FlightPlan = ({ handleChange, handlerNext, data, handlerWeather }) => {
   };
 
   return (
-    <div className=''>
+    <>
-      <div className='layer-content'>
+      <ModalHeader>
-        <div className='layer-ti'>
+        LAANC 승인 요청
-          <h4>LAANC 승인 요청</h4>
+        <Button
-          {/* <button className='btn-icon' outline color='primary'> */}
+          color='danger'
-          {/* <X size={20} /> */}
+          onClick={() => setDisabledAnimation(!disabledAnimation)}
-          {/* </button> */}
+        >
-          <Button.Ripple
+          취소
-            color='danger'
+        </Button>
-            className='badge badge-danger'
+      </ModalHeader>
-            onClick={() => handlerLaanc()}
+      <ModalBody>
-          >
+        <div>
-            취소
-          </Button.Ripple>
-        </div>
-      </div>
-      <Row>
-        <Col sm='12'>
           <Row>
-            <Col>
+            <Col className='list-input' md='6'>
-              <div className='search-cont search-info pd-0'>
+              <FormGroup>
-                <div className='cont-ti mb-1 d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+                <div className='ti'>조종사 정보</div>
-                  <div className='final'></div>
+                <Label for='test'>
-                </div>
+                  <span className='necessary'>*</span>성명
-                <dl>
+                </Label>
-                  <dt>
+                <Input
-                    <div className='layer-ti'>
+                  type='text'
-                      <h4>위치 선택</h4>
+                  id='memberName'
-                    </div>
+                  name='memberName'
-                    <div className='layer-ti'>
+                  size='sm'
-                      <Button.Ripple
+                  placeholder=''
-                        className='mr-1'
+                  value={data.pilotList[0].memberName || ''}
-                        color='primary'
+                  onChange={e => {
-                        onClick={e => handlerDrawType('LINE')}
+                    const { name, value } = e.target;
-                        //   disabled={isDisabled || isDone}
+                    handleChange({
-                      >
+                      type: 'pilot',
-                        WayPoint
+                      name,
-                      </Button.Ripple>
+                      value
-                      <Button.Ripple
+                    });
-                        className='mr-1'
+                  }}
-                        color='primary'
+                  disabled
-                        onClick={e => handlerDrawType('CIRCLE')}
+                />
-                        //   disabled={isDisabled || isDone}
+              </FormGroup>
-                      >
+            </Col>
-                        Circle
+            <Col className='list-input' md='6'>
-                      </Button.Ripple>
+              <FormGroup>
-                      <Button.Ripple
+                <div className='ti'>비행 유형</div>
-                        className='mr-1'
+                <Label for='test'>
-                        color='primary'
+                  <span className='necessary'>*</span>종류
-                        onClick={e => handlerDrawType('POLYGON')}
+                </Label>
-                        // disabled={isDisabled || isDone}
+                <Input type='select' name='select' size='sm' id='test'>
-                      >
+                  <option>무인 비행기</option>
-                        Polygon
+                  <option>무인 헬리콥터</option>
-                      </Button.Ripple>
+                  <option>무인 멀티콥터</option>
-                      <Button.Ripple color='info' onClick={handlerWeather}>
+                  <option>무인 비행선</option>
-                        날씨 정보
+                </Input>
-                      </Button.Ripple>
+              </FormGroup>
-                    </div>
+            </Col>
-                  </dt>
+            <Col className='list-input' md='12'>
-                  <div className='search-info-ti d-flex justify-content-between'>
+              <div className='ti'>비행 계획 정보</div>
-                    <h4 className='ti'>조종사 정보</h4>
+              <Row>
-                  </div>
+                <Col className='list-input' md='4'>
-                  <div className='search-info-box'>
+                  <FormGroup>
-                    <Row>
+                    <Label for='test'>
-                      <Col className='list-input' lg={3} md={3} sm={12}>
+                      <span className='necessary'>*</span>비행 시작 일자
-                        <FormGroup>
+                    </Label>
-                          <Label for='test'>
+                    <Flatpickr
-                            <span className='necessary'>*</span>성명
+                      className='form-control form-control-sm'
-                          </Label>
+                      type='text'
-                          <Input
+                      id='schFltStDt'
-                            type='text'
+                      name='schFltStDt'
-                            id='memberName'
+                      data-enable-time
-                            name='memberName'
+                      defaultValue={data.schFltStDt}
-                            // defaultValue={data.memberName}
+                      value={data.schFltStDt}
-                            value={data.pilotList[0].memberName || ''}
+                      options={{
-                            onChange={e => {
+                        minDate: moment().format('YYYY-MM-DD')
-                              const { name, value } = e.target;
+                      }}
-                              handleChange({
+                      onChange={date => {
-                                type: 'pilot',
+                        const value =
-                                name,
+                          moment(date[0]).format('YYYY-MM-DD HH:mm:ss') || '';
-                                value
+                        handleChange({
-                              });
+                          name: 'schFltStDt',
-                            }}
+                          value
-                            bsSize='sm'
+                        });
-                            placeholder='홍길동'
+                      }}
-                          />
+                      placeholder='비행 시작일자 선택(클릭)'
-                        </FormGroup>
+                    />
-                      </Col>
+                  </FormGroup>
-                      <Col className='list-input' lg={5} md={5} sm={12}>
+                </Col>
-                        <FormGroup className='m_ft'>
+                <Col className='list-input' md='4'>
-                          <div className='m_ft_box'>
+                  <FormGroup>
-                            <Label for='test'>
+                    <Label for='test'>
-                              <span className='necessary'>*</span> 핸드폰 번호
+                      <span className='necessary'>*</span>비행 종료 일자
-                            </Label>
+                    </Label>
-                            <Input
+                    <Flatpickr
-                              type='text'
+                      className='form-control form-control-sm'
-                              id='clncd'
+                      type='text'
-                              name='clncd'
+                      id='schFltEndDt'
-                              // defaultValue={data.clncd}
+                      name='schFltEndDt'
-                              // value={data.clncd || '+81'}
+                      data-enable-time
-                              bsSize='sm'
+                      defaultValue={data.schFltEndDt}
-                              placeholder='+82'
+                      value={data.schFltEndDt}
-                              onChange={e => {
+                      options={{
-                                const { name, value } = e.target;
+                        minDate: moment().format('YYYY-MM-DD')
-                                handleChange({
+                      }}
-                                  type: 'pilot',
+                      onChange={date => {
-                                  name,
+                        const value =
-                                  value
+                          moment(date[0]).format('YYYY-MM-DD HH:mm:ss') || '';
-                                });
+                        handleChange({
-                              }}
+                          name: 'schFltEndDt',
-                              readOnly
+                          value
-                            />
+                        });
-                          </div>
+                      }}
-                          <div className='m_ft_box'>
+                      placeholder='비행 종료일자 선택(클릭)'
-                            <Input
+                      // {...{options:{minDate: "today"}}}
-                              type='text'
+                    />
-                              id='hpno'
+                  </FormGroup>
-                              name='hpno'
+                </Col>
-                              // defaultValue={data.hpno}
+                <Col className='list-input' md='4'>
-                              value={data.pilotList[0].hpno || ''}
+                  <FormGroup>
-                              bsSize='sm'
+                    <Label for='test'>
-                              onChange={e => {
+                      <span className='necessary'>*</span>비행 목적
-                                const { name, value } = e.target;
+                    </Label>
-                                handleChange({
+                    <Input
-                                  type: 'pilot',
+                      type='select'
-                                  name,
+                      id='fltPurpose'
-                                  value
+                      name='fltPurpose'
-                                });
+                      value={data.fltPurpose}
-                              }}
+                      bsSize='sm'
-                              placeholder='010-0000-0000'
+                      onChange={e => {
-                            />
+                        const { name, value } = e.target;
-                          </div>
+                        handleChange({
-                        </FormGroup>
+                          type: 'plan',
-                      </Col>
+                          name,
-                      <Col className='list-input' lg={3} md={4} sm={12}>
+                          value
-                        <FormGroup>
+                        });
-                          <Label for='test'>
+                      }}
-                            <span className='necessary'>*</span>이메일
+                      // innerRef={data}
-                          </Label>
+                      // className={classnames({
-                          <Input
+                      // 'is-invalid': errors.arcrftTypeCd
-                            type='text'
+                      // })}
-                            id='email'
+                    >
-                            name='email'
+                      {/* TODO CDNOT 코드연동 필요 */}
-                            // defaultValue={data.email || ''}
+                      <option value=''>= 선택 =</option>
-                            value={data.pilotList[0].email}
+                      <option value='시험비행'>= 시험비행 =</option>
-                            bsSize='sm'
+                      <option value='교육비행'>= 교육비행 =</option>
-                            onChange={e => {
+                      <option value='사진/영상촬영'>= 사진/영상촬영 =</option>
-                              const { name, value } = e.target;
+                      <option value='비행훈련'>= 비행훈련 =</option>
-                              handleChange({
+                      <option value='비행교육'>= 비행교육 =</option>
-                                type: 'pilot',
+                      <option value='비행실기시험'>= 비행실기시험 =</option>
-                                name,
+                    </Input>
-                                value
+                  </FormGroup>
-                              });
+                </Col>
-                            }}
+              </Row>
-                            // innerRef={data}
+            </Col>
-                            placeholder=''
+            <Col className='list-input' md='12'>
-                          />
+              <div className='ti'>
-                        </FormGroup>
+                비행 구역 정보<Button size='sm'>적용</Button>
-                      </Col>
-                    </Row>
-                  </div>
-                  <div className='search-info-ti d-flex justify-content-between'>
-                    <h4 className='ti'>비행 계획 정보</h4>
-                  </div>
-                  <div className='search-info-box'>
-                    <Row>
-                      <Col className='list-input' lg={4} md={4} sm={12}>
-                        <FormGroup>
-                          <Label for='test'>
-                            <span className='necessary'>*</span>
-                            비행시작일자
-                          </Label>
-                          <Flatpickr
-                            className='form-control form-control-sm'
-                            type='text'
-                            id='schFltStDt'
-                            name='schFltStDt'
-                            data-enable-time
-                            defaultValue={data.schFltStDt}
-                            value={data.schFltStDt}
-                            options={{
-                              minDate: moment().format('YYYY-MM-DD')
-                            }}
-                            onChange={date => {
-                              const value =
-                                moment(date[0]).format('YYYY-MM-DD HH:mm:ss') ||
-                                '';
-                              handleChange({
-                                name: 'schFltStDt',
-                                value
-                              });
-                            }}
-                            placeholder='비행 시작일자 선택(클릭)'
-                          />
-                        </FormGroup>
-                      </Col>
-                      <Col className='list-input' lg={4} md={4} sm={12}>
-                        <FormGroup>
-                          <Label for='test'>
-                            <span className='necessary'>*</span>
-                            비행종료일자
-                          </Label>
-                          <Flatpickr
-                            className='form-control form-control-sm'
-                            type='text'
-                            id='schFltEndDt'
-                            name='schFltEndDt'
-                            data-enable-time
-                            defaultValue={data.schFltEndDt}
-                            value={data.schFltEndDt}
-                            options={{
-                              minDate: moment().format('YYYY-MM-DD')
-                            }}
-                            onChange={date => {
-                              const value =
-                                moment(date[0]).format('YYYY-MM-DD HH:mm:ss') ||
-                                '';
-                              handleChange({
-                                name: 'schFltEndDt',
-                                value
-                              });
-                            }}
-                            placeholder='비행 종료일자 선택(클릭)'
-                            // {...{options:{minDate: "today"}}}
-                          />
-                        </FormGroup>
-                      </Col>
-                      <Col className='list-input' lg={4} md={4} sm={12}>
-                        <FormGroup>
-                          <Label for='test'>
-                            <span className='necessary'>*</span>비행 목적
-                          </Label>
-                          <Input
-                            type='select'
-                            id='fltPurpose'
-                            name='fltPurpose'
-                            value={data.fltPurpose}
-                            bsSize='sm'
-                            onChange={e => {
-                              const { name, value } = e.target;
-                              handleChange({
-                                type: 'plan',
-                                name,
-                                value
-                              });
-                            }}
-                            // innerRef={data}
-                            // className={classnames({
-                            // 'is-invalid': errors.arcrftTypeCd
-                            // })}
-                          >
-                            {/* TODO CDNOT 코드연동 필요 */}
-                            <option value=''>= 선택 =</option>
-                            <option value='시험비행'>= 시험비행 =</option>
-                            <option value='교육비행'>= 교육비행 =</option>
-                            <option value='사진/영상촬영'>
-                              = 사진/영상촬영 =
-                            </option>
-                            <option value='비행훈련'>= 비행훈련 =</option>
-                            <option value='비행교육'>= 비행교육 =</option>
-                            <option value='비행실기시험'>
-                              = 비행실기시험 =
-                            </option>
-                          </Input>
-                        </FormGroup>
-                      </Col>
-                    </Row>
-                  </div>
-                  {/* TODO area 다건 표출 */}
-                  <div className='search-info-ti d-flex justify-content-between'>
-                    <h4 className='ti'>비행 구역 정보</h4>
-                  </div>
-                  <div className='search-info-box'>
-                    <Row>
-                      <Col className='list-input' lg={4} md={4} sm={12}>
-                        <FormGroup>
-                          <Label for='test'>
-                            <span className='necessary'>*</span>고도
-                          </Label>
-                          <Input
-                            type='text'
-                            id='fltElev'
-                            name='fltElev'
-                            // defaultValue={data.email || ''}
-                            value={data.areaList[0].fltElev}
-                            bsSize='sm'
-                            onChange={e => {
-                              const { name, value } = e.target;
-                              handleChange({
-                                type: 'area',
-                                name,
-                                value
-                              });
-                            }}
-                            // innerRef={data}
-                            placeholder='100m'
-                          />
-                        </FormGroup>
-                      </Col>
-                      <Col className='list-input' lg={4} md={4} sm={12}>
-                        <FormGroup>
-                          <Label for='test'>
-                            <span className='necessary'>*</span>반경
-                          </Label>
-                          <Input
-                            type='text'
-                            id='bufferZone'
-                            name='bufferZone'
-                            // defaultValue={data.email || ''}
-                            value={data.areaList[0].bufferZone}
-                            bsSize='sm'
-                            onChange={e => {
-                              const { name, value } = e.target;
-                              handleChange({
-                                type: 'area',
-                                name,
-                                value
-                              });
-                            }}
-                            // innerRef={data}
-                            placeholder='100m'
-                          />
-                        </FormGroup>
-                      </Col>
-                      <Col className='list-input' lg={4} md={4} sm={12}>
-                        <FormGroup>
-                          <Label for='test'>
-                            <span className='necessary'>*</span>비행방식
-                          </Label>
-                          <Input
-                            type='text'
-                            id='fltMethod'
-                            name='fltMethod'
-                            // defaultValue={data.email || ''}
-                            value={data.areaList[0].fltMethod}
-                            bsSize='sm'
-                            onChange={e => {
-                              const { name, value } = e.target;
-                              handleChange({
-                                type: 'area',
-                                name,
-                                value
-                              });
-                            }}
-                            // innerRef={data}
-                            placeholder=''
-                          />
-                        </FormGroup>
-                      </Col>
-                    </Row>
-                  </div>
-                  <div className='search-info-ti d-flex justify-content-between'>
-                    <h4 className='ti'>기체 정보</h4>
-                  </div>
-                  <div className='search-info-box'>
-                    <Row>
-                      <Col className='list-input' lg={4} md={4} sm={12}>
-                        <FormGroup>
-                          <Label for='test'>
-                            <span className='necessary'>*</span>기체 신고 번호
-                          </Label>
-                          <Input
-                            type='text'
-                            id='groupNm'
-                            name='groupNm'
-                            // defaultValue={data.email || ''}
-                            value={data.arcrftList[0].groupNm}
-                            bsSize='sm'
-                            onChange={e => {
-                              const { name, value } = e.target;
-                              handleChange({
-                                type: 'arcrft',
-                                name,
-                                value
-                              });
-                            }}
-                            // innerRef={data}
-                            placeholder=''
-                          />
-                        </FormGroup>
-                      </Col>
-                      <Col className='list-input' lg={4} md={4} sm={12}>
-                        <FormGroup>
-                          <Label for='test'>
-                            <span className='necessary'>*</span>기체 종류
-                          </Label>
-                          <Input
-                            type='text'
-                            id='arcrftTypeCd'
-                            name='arcrftTypeCd'
-                            // defaultValue={data.email || ''}
-                            value={data.arcrftList[0].arcrftTypeCd}
-                            bsSize='sm'
-                            onChange={e => {
-                              const { name, value } = e.target;
-                              handleChange({
-                                type: 'arcrft',
-                                name,
-                                value
-                              });
-                            }}
-                            // innerRef={data}
-                            placeholder='100m'
-                          />
-                        </FormGroup>
-                      </Col>
-                      <Col className='list-input' lg={4} md={4} sm={12}>
-                        <FormGroup>
-                          <Label for='test'>
-                            <span className='necessary'>*</span>소유자명(법인명)
-                          </Label>
-                          <Input
-                            type='text'
-                            id='ownerNm'
-                            name='ownerNm'
-                            // defaultValue={data.email || ''}
-                            value={data.arcrftList[0].ownerNm}
-                            bsSize='sm'
-                            onChange={e => {
-                              const { name, value } = e.target;
-                              handleChange({
-                                type: 'arcrft',
-                                name,
-                                value
-                              });
-                            }}
-                            // innerRef={data}
-                            placeholder=''
-                          />
-                        </FormGroup>
-                      </Col>
-                    </Row>
-                  </div>
-                  <div className='search-info-ti d-flex justify-content-between'>
-                    <h4 className='ti'>유의사항</h4>
-                  </div>
-                  {/* <div className='d-flex align-items-center'>
-                           
-                            {data.planSno ? (
-                              <Button.Ripple
-                                color='danger'
-                                size='sm'
-                                onClick={handleDelete}
-                              >
-                                삭제
-                              </Button.Ripple>
-                            ) : null}
-                          </div> */}
-                  <Button.Ripple
-                    className='mr-1'
-                    color='primary'
-                    bsSize='sm'
-                    onClick={() => handlerNext()}
-                  >
-                    다음
-                  </Button.Ripple>
-                </dl>
               </div>
+              <Row>
+                <Col className='list-input' md='6'>
+                  <FormGroup>
+                    <Label for='test'>
+                      <span className='necessary'>*</span>고도
+                    </Label>
+                    <Input
+                      type='text'
+                      id='fltElev'
+                      name='fltElev'
+                      // defaultValue={data.email || ''}
+                      value={data.areaList[0].fltElev}
+                      bsSize='sm'
+                      onChange={e => {
+                        const { name, value } = e.target;
+                        handleChange({
+                          type: 'area',
+                          name,
+                          value
+                        });
+                      }}
+                      // innerRef={data}
+                      placeholder='100m'
+                    />
+                  </FormGroup>
+                </Col>
+                <Col className='list-input' md='6'>
+                  <FormGroup>
+                    <Label for='test'>
+                      <span className='necessary'>*</span>반경
+                    </Label>
+                    <Input
+                      type='text'
+                      id='bufferZone'
+                      name='bufferZone'
+                      // defaultValue={data.email || ''}
+                      value={data.areaList[0].bufferZone}
+                      bsSize='sm'
+                      onChange={e => {
+                        const { name, value } = e.target;
+                        handleChange({
+                          type: 'area',
+                          name,
+                          value
+                        });
+                      }}
+                      // innerRef={data}
+                      placeholder='100m'
+                    />
+                  </FormGroup>
+                </Col>
+                <Col className='list-input' md='6'>
+                  <FormGroup>
+                    <Label for='test'>
+                      <span className='necessary'>*</span>비행방식
+                    </Label>
+                    <Input
+                      type='select'
+                      id='fltMethod'
+                      name='fltMethod'
+                      // defaultValue={data.email || ''}
+                      value={data.areaList[0].fltMethod}
+                      bsSize='sm'
+                      onChange={e => {
+                        const { name, value } = e.target;
+                        handleChange({
+                          type: 'area',
+                          name,
+                          value
+                        });
+                      }}
+                      // innerRef={data}
+                      placeholder=''
+                    >
+                      <option value=''>= 선택 =</option>
+                      <option value='시험비행'>= 시계비행 =</option>
+                      <option value='교육비행'>= 선화비행 =</option>
+                      <option value='사진/영상촬영'>= 계기비행 =</option>
+                      <option value='비행훈련'>= 격자비행 =</option>
+                      <option value='비행교육'>= 수직이착륙비행 =</option>
+                      <option value='비행실기시험'>= 수동조종비행 =</option>
+                      <option value='비행실기시험'>= 군집비행 =</option>
+                      <option value='비행실기시험'>= 직접입력 =</option>
+                      비행방식
+                    </Input>
+                  </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='직접입력 선택 후 활성화'
+                      disabled
+                    />
+                  </FormGroup>
+                </Col>
+              </Row>
+            </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='arcrftTypeCd'
+                      name='arcrftTypeCd'
+                      // defaultValue={data.email || ''}
+                      value={data.arcrftList[0].arcrftTypeCd}
+                      bsSize='sm'
+                      onChange={e => {
+                        const { name, value } = e.target;
+                        handleChange({
+                          type: 'arcrft',
+                          name,
+                          value
+                        });
+                      }}
+                      // innerRef={data}
+                      placeholder='100m'
+                    />
+                  </FormGroup>
+                </Col>
+                <Col className='list-input' md='4'>
+                  <FormGroup>
+                    <Label for='test'>
+                      <span className='necessary'>*</span>기체 신고 번호
+                    </Label>
+                    <Input
+                      type='text'
+                      id='groupNm'
+                      name='groupNm'
+                      // defaultValue={data.email || ''}
+                      value={data.arcrftList[0].groupNm}
+                      bsSize='sm'
+                      onChange={e => {
+                        const { name, value } = e.target;
+                        handleChange({
+                          type: 'arcrft',
+                          name,
+                          value
+                        });
+                      }}
+                      // innerRef={data}
+                      placeholder=''
+                    />
+                  </FormGroup>
+                </Col>
+              </Row>
             </Col>
           </Row>
-        </Col>
+        </div>
-      </Row>
+        <div>
-    </div>
+          <div className='ti'>
+            비행 구역 설정
+            <Button size='sm' onClick={() => setCenteredModal(!centeredModal)}>
+              자세히보기
+            </Button>
+          </div>
+          <div className='laanc-map-sm'>
+            여기가 지도 영역
+            <FlightArea
+              centeredModal={centeredModal}
+              setCenteredModal={setCenteredModal}
+            />
+          </div>
+        </div>
+        <div className='mt-1'>
+          <div className='ti'>유의사항</div>
+        </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={() => handlerNext()}>
+          다음
+        </Button>
+      </ModalFooter>
+    </>
   );
 };
 export default FlightPlan;