diff --git a/src/components/basis/flight/plan/FlightPlanAreaForm.js b/src/components/basis/flight/plan/FlightPlanAreaForm.js
new file mode 100644
index 00000000..a07daf45
--- /dev/null
+++ b/src/components/basis/flight/plan/FlightPlanAreaForm.js
@@ -0,0 +1,122 @@
+import React from 'react';
+import {
+ Card,
+ CardBody,
+ Col,
+ FormGroup,
+ Input,
+ Label,
+ Row,
+ Button
+} from 'reactstrap';
+
+const FlightPlanAreaForm = () => {
+
+ return (
+
+
+
+
+
+ )
+}
+
+export default FlightPlanAreaForm;
\ No newline at end of file
diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js
new file mode 100644
index 00000000..44a55929
--- /dev/null
+++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js
@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import {
+ Card,
+ CardBody,
+} from 'reactstrap';
+
+const FlightPlanAreaMap = () => {
+ const naver = window.naver;
+ const [map, setMap] = useState();
+
+ useEffect(() => {
+ NaverMapInit();
+ }, []);
+ useEffect(() => {
+ }, [map]);
+
+ const NaverMapInit = () => {
+ const mapOptions = {
+ center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547),
+ zoom: 10,
+ zoomControl: true,
+ mapTypeId: naver.maps.MapTypeId.HYBRID,
+ zoomControlOptions: {
+ position: naver.maps.Position.TOP_LEFT,
+
+ style: naver.maps.ZoomControlStyle.SMALL
+ }
+ };
+
+ setMap(new naver.maps.Map('map', mapOptions));
+ };
+
+
+ return (
+
+
+
+
+
+
+
+ )
+}
+
+export default FlightPlanAreaMap;
\ No newline at end of file
diff --git a/src/components/basis/flight/plan/FlightPlanForm.js b/src/components/basis/flight/plan/FlightPlanForm.js
new file mode 100644
index 00000000..624aaa22
--- /dev/null
+++ b/src/components/basis/flight/plan/FlightPlanForm.js
@@ -0,0 +1,378 @@
+import React from 'react';
+import {
+ Card,
+ CardBody,
+ Col,
+ FormGroup,
+ Input,
+ Label,
+ Row,
+ Button
+} from 'reactstrap';
+import Flatpickr from 'react-flatpickr';
+
+
+const FlightPlanForm = (props) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default FlightPlanForm;
\ No newline at end of file
diff --git a/src/components/basis/flight/plan/FlightPlanGrid.js b/src/components/basis/flight/plan/FlightPlanGrid.js
new file mode 100644
index 00000000..8e7bb6e7
--- /dev/null
+++ b/src/components/basis/flight/plan/FlightPlanGrid.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import {
+ Row,
+ Col,
+ Table,
+ Badge,
+ UncontrolledDropdown,
+ DropdownMenu,
+ DropdownItem,
+ DropdownToggle,
+ Card,
+ CardHeader,
+ CardBody,
+ CardTitle,
+ CardSubtitle,
+ ButtonGroup,
+ Button,
+ Input,
+ CustomInput,
+ FormGroup
+ } from 'reactstrap';
+
+const FlightPlanGrid = (props) => {
+ return (
+
+
+
+
+
+
{"비행 계획"} 목록
+ 검색결과 총 0건
+
+
+
+ 계획서 생성
+
+
+
+
+
+
+
+ )
+}
+
+export default FlightPlanGrid;
\ No newline at end of file
diff --git a/src/components/modal/FormModal.js b/src/components/modal/FormModal.js
new file mode 100644
index 00000000..5c7f92f2
--- /dev/null
+++ b/src/components/modal/FormModal.js
@@ -0,0 +1,37 @@
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+
+export const FormModal = props => {
+ return (
+
+
+ props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })
+ }
+ className='modal-dialog-centered modal-xl'
+ >
+
+ props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })
+ }
+ >
+ {props.modal.title}
+
+
+ {props.modal.contents}
+
+
+
+
+
+
+ );
+};
diff --git a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js
new file mode 100644
index 00000000..3475f73c
--- /dev/null
+++ b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js
@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import { CustomDetailLayout } from '../../../../components/layout/CustomDetailLayout';
+import FlightPlanAreaForm from '../../../../components/basis/flight/plan/FlightPlanAreaForm';
+import { Button, Col, Row } from 'reactstrap';
+import FlightPlanAreaMap from '../../../../components/basis/flight/plan/FlightPlanAreaMap';
+
+const FlightPlanAreaContainer = () => {
+
+ return (
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default FlightPlanAreaContainer;
\ No newline at end of file
diff --git a/src/containers/basis/flight/plan/FlightPlanContainer.js b/src/containers/basis/flight/plan/FlightPlanContainer.js
new file mode 100644
index 00000000..980e913c
--- /dev/null
+++ b/src/containers/basis/flight/plan/FlightPlanContainer.js
@@ -0,0 +1,24 @@
+import React, { } from 'react';
+import { Link, useHistory } from 'react-router-dom';
+import FlightPlanGrid from '../../../../components/basis/flight/plan/FlightPlanGrid';
+import { CustomMainLayout } from '../../../../components/layout/CustomMainLayout';
+
+const FlightPlanContainer = () => {
+
+ const history = useHistory();
+
+ const moveFlightPlan = () => {
+ history.push('/basis/flight/plan/create');
+ };
+
+
+ return (
+
+
+
+ )
+}
+
+export default FlightPlanContainer;
\ No newline at end of file
diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js
new file mode 100644
index 00000000..da3a91dd
--- /dev/null
+++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js
@@ -0,0 +1,42 @@
+import React, {useState} from 'react';
+import FlightPlanForm from '../../../../components/basis/flight/plan/FlightPlanForm';
+import { CustomDetailLayout } from '../../../../components/layout/CustomDetailLayout';
+import { FormModal } from '../../../../components/modal/FormModal';
+import FlightPlanAreaContainer from './FlightPlanAreaContainer';
+
+
+const FlightPlanDetailContainer = () => {
+ const [modal, setModal] = useState({
+ isOpen: false,
+ title: '',
+ contents: '',
+ });
+
+ const saveFlightPlanArea = () => {
+ console.log('비행 구역 설정 저장');
+ }
+
+ const openModal = () => {
+ setModal({
+ isOpen: true,
+ title: '비행 구역 설정',
+ contents:
+ });
+ }
+
+ return (
+
+
+
+
+ )
+
+}
+
+export default FlightPlanDetailContainer;
\ No newline at end of file
diff --git a/src/navigation/basis/index.js b/src/navigation/basis/index.js
index 850a6e89..300c5e74 100644
--- a/src/navigation/basis/index.js
+++ b/src/navigation/basis/index.js
@@ -45,5 +45,19 @@ export default [
}
],
navLink: '#'
- }
+ },
+ {
+ id: 'basis_001_03',
+ type: 'dropdown',
+ title: '비행 계획 관리',
+ children: [
+ {
+ id: 'basis_001_03_01',
+ type: 'item',
+ title: '비행 계획 목록',
+ navLink: '/basis/flight/plan/index'
+ }
+ ],
+ navLink: '#'
+ }
];
diff --git a/src/router/routes/RouteBasis.js b/src/router/routes/RouteBasis.js
index 3f195349..ce7dd1f4 100644
--- a/src/router/routes/RouteBasis.js
+++ b/src/router/routes/RouteBasis.js
@@ -38,7 +38,19 @@ const RouteBasis = [
{
path: '/basis/dron/create',
component: lazy(() => import('../../views/basis/dron/BasisDronDetail'))
- }
+ },
+ {
+ path: '/basis/flight/plan/index',
+ component: lazy(() => import('../../views/basis/flight/plan/FlightPlan'))
+ },
+ {
+ path: '/basis/flight/plan/create',
+ component: lazy(() => import('../../views/basis/flight/plan/FlightPlanDetail'))
+ },
+ {
+ path: '/basis/flight/plan/detail/:id',
+ component: lazy(() => import('../../views/basis/flight/plan/FlightPlanDetail'))
+ },
];
export default RouteBasis;
diff --git a/src/views/basis/flight/plan/FlightPlan.js b/src/views/basis/flight/plan/FlightPlan.js
new file mode 100644
index 00000000..b7a5c86e
--- /dev/null
+++ b/src/views/basis/flight/plan/FlightPlan.js
@@ -0,0 +1,14 @@
+// ** Styles
+import '@styles/react/libs/flatpickr/flatpickr.scss';
+import '@styles/react/libs/tables/react-dataTable-component.scss';
+import React from 'react';
+import '../../../../assets/css/custom.css';
+import FlightPlanContainer from '../../../../containers/basis/flight/plan/FlightPlanContainer';
+
+const FlightPlan = props => {
+ return (
+
+ );
+};
+
+export default FlightPlan;
\ No newline at end of file
diff --git a/src/views/basis/flight/plan/FlightPlanDetail.js b/src/views/basis/flight/plan/FlightPlanDetail.js
new file mode 100644
index 00000000..9b7b49b8
--- /dev/null
+++ b/src/views/basis/flight/plan/FlightPlanDetail.js
@@ -0,0 +1,11 @@
+import React, { useState } from 'react';
+import FlightPlanDetailContainer from '../../../../containers/basis/flight/plan/FlightPlanDetailContainer';
+import '../../../../assets/css/custom.css';
+
+const FlightPlanDetail = () => {
+ return (
+
+ )
+}
+
+export default FlightPlanDetail;
\ No newline at end of file