LAANC step 페이지 연결

src/views/laanc/Apply.js

@@ -24,16 +24,19 @@ import {
 import {
   initFlight,
   initFlightBas
-} from '../../../../modules/basis/flight/models/basisFlightModel';
+} from '../../modules/basis/flight/models/basisFlightModel';
+import { useHistory } from 'react-router-dom';
 import {
   areaClickAction,
   environmentClickAction,
   mapTypeChangeAction,
   sensorClickAction
-} from '../../../../modules/control/map/actions/controlMapActions';
+} from '../../modules/control/map/actions/controlMapActions';
 
 const Apply = props => {
   const [detailData, setDetailData] = useState(initFlightBas.initDetail);
+
+  const history = useHistory();
   // 변경감지
   const handleChange = ({ name, value, type, index, pIndex }) => {
     setDetailData(prevState => ({
@@ -41,6 +44,12 @@ const Apply = props => {
       [name]: value
     }));
   };
+  const handleClick = value => {
+    props.handlerStep(value);
+  };
+  const handlerLaanc = () => {
+    history.replace('/control');
+  };
 
   return (
     <div className=''>
@@ -53,7 +62,7 @@ const Apply = props => {
           <Button.Ripple
             color='danger'
             className='badge badge-danger'
-            onClick={() => props.handlerLaanc()}
+            onClick={() => handlerLaanc()}
           >
             취소
           </Button.Ripple>
@@ -305,7 +314,7 @@ const Apply = props => {
                     <Button.Ripple
                       color='danger'
                       bsSize='sm'
-                      //   onClick={props.handlerStep(1)}
+                      onClick={() => handleClick(1)}
                     >
                       이전
                     </Button.Ripple>
@@ -313,7 +322,7 @@ const Apply = props => {
                       className='mr-1'
                       color='primary'
                       beSize='sm'
-                      //   onClick={props.handlerStep(3)}
+                      //onClick={() => handleClick(3)}
                     >
                       다음
                     </Button.Ripple>

src/views/laanc/FlightPlan.js

@@ -24,17 +24,18 @@ import {
 import {
   initFlight,
   initFlightBas
-} from '../../../../modules/basis/flight/models/basisFlightModel';
+} from '../../modules/basis/flight/models/basisFlightModel';
 import {
   areaClickAction,
   environmentClickAction,
   mapTypeChangeAction,
   sensorClickAction
-} from '../../../../modules/control/map/actions/controlMapActions';
-
+} from '../../modules/control/map/actions/controlMapActions';
+import { useHistory } from 'react-router-dom';
 const FlightPlan = props => {
   const [detailData, setDetailData] = useState(initFlightBas.initDetail);
 
+  const history = useHistory();
   const handleChange = ({ name, value, type, index, pIndex }) => {
     setDetailData(prevState => ({
       ...prevState,
@@ -42,6 +43,14 @@ const FlightPlan = props => {
     }));
   };
 
+  const handleClick = value => {
+    props.handlerStep(value);
+  };
+
+  const handlerLaanc = () => {
+    history.replace('/control');
+  };
+
   return (
     <div className=''>
       <div className='layer-content'>
@@ -53,7 +62,7 @@ const FlightPlan = props => {
           <Button.Ripple
             color='danger'
             className='badge badge-danger'
-            onClick={() => props.handlerLaanc()}
+            onClick={() => handlerLaanc()}
           >
             취소
           </Button.Ripple>
@@ -487,7 +496,7 @@ const FlightPlan = props => {
                     className='mr-1'
                     color='primary'
                     bsSize='sm'
-                    // onClick={props.handlerStep(2)}
+                    onClick={() => handleClick(2)}
                   >
                     다음
                   </Button.Ripple>

src/views/laanc/LeftMenu.js

@@ -1,8 +1,16 @@
 import logo from '../../assets/images/pal_logo.png';
 import tp_logo from '../../assets/images/tplogo_wh.png';
 import kac_logo from '../../assets/images/kac_logo_wh.png';
+import FlightPlan from './FlightPlan';
+import Apply from './Apply';
+import { useState } from 'react';
 
 function LeftMenu() {
+  const [step, setStep] = useState(1);
+
+  const handlerStep = step => {
+    setStep(step);
+  };
   return (
     <>
       <div className='left-menu'>
@@ -13,8 +21,9 @@ function LeftMenu() {
       </div>
       <div className='right-menu active'>
         <button className='right-layer-btn' onClick={() => {}}></button>
-        <div className='right-layer active'>
-          <div>asdsad</div>
+        <div className='right-layer active' style={{ width: '567.58px' }}>
+          {step === 1 && <FlightPlan handlerStep={handlerStep} />}
+          {step === 2 && <Apply handlerStep={handlerStep} />}
         </div>
       </div>
     </>