laanc 취소/닫기 버튼 기능 추가

src/containers/laanc/LaancPlanContainer.js

@@ -23,12 +23,15 @@ import {
   Label,
   Input
 } from 'reactstrap';
+import { AREA_DETAIL_INIT } from '../../modules/basis/flight/actions/basisFlightAction';
+import { useDispatch } from 'react-redux';
 
 export default function LaancPlanContainer({
   currentParm,
   disabledAnimation,
   setDisabledAnimation
 }) {
+  const dispatch = useDispatch();
   const [step, setStep] = useState(1);
   const [detailData, setDetailData] = useState(initFlightBas.initDetail);
   const [centeredModal, setCenteredModal] = useState(false);
@@ -196,6 +199,11 @@ export default function LaancPlanContainer({
     }
   };
 
+  const handlerLaancClose = () => {
+    setDisabledAnimation(!disabledAnimation);
+    dispatch(AREA_DETAIL_INIT());
+  };
+
   return (
     <>
       <div className='disabled-animation-modal'>
@@ -219,6 +227,7 @@ export default function LaancPlanContainer({
                 centeredModal={centeredModal}
                 setCenteredModal={setCenteredModal}
                 currentParm={currentParm}
+                handlerLaancClose={handlerLaancClose}
               />
             </>
           )}
@@ -230,6 +239,7 @@ export default function LaancPlanContainer({
               setDisabledAnimation={setDisabledAnimation}
               centeredModal={centeredModal}
               setCenteredModal={setCenteredModal}
+              handlerLaancClose={handlerLaancClose}
             />
           )}
           {step === 3 && (
@@ -238,6 +248,7 @@ export default function LaancPlanContainer({
               data={detailData}
               disabledAnimation={disabledAnimation}
               setDisabledAnimation={setDisabledAnimation}
+              handlerLaancClose={handlerLaancClose}
             />
           )}
         </Modal>

src/views/laanc/LaacnStep3.js

@@ -21,7 +21,8 @@ export default function LaacnStep3({
   handlerStep,
   disabledAnimation,
   data,
-  setDisabledAnimation
+  setDisabledAnimation,
+  handlerLaancClose
 }) {
   const [centeredModal2, setCenteredModal2] = useState(false);
   const { user } = useSelector(state => state.authState);
@@ -29,10 +30,7 @@ export default function LaacnStep3({
     <>
       <ModalHeader>
         LAANC 승인 요청
-        <Button
+        <Button color='danger' onClick={handlerLaancClose}>
-          color='danger'
-          onClick={() => setDisabledAnimation(!disabledAnimation)}
-        >
           취소
         </Button>
       </ModalHeader>

src/views/laanc/LaancStep1.js

@@ -51,7 +51,8 @@ export default function LaancStep1({
   setDisabledAnimation,
   centeredModal,
   setCenteredModal,
-  currentParm
+  currentParm,
+  handlerLaancClose
 }) {
   const { user } = useSelector(state => state.authState);
   const { areaCoordList } = useSelector(state => state.flightState);
@@ -68,12 +69,6 @@ export default function LaancStep1({
     if (!currentParm) setCenteredModal(mapParam);
   }, [location]);
 
-  useEffect(() => {
-    // return () => {
-    //   dispatch(AREA_DETAIL_INIT());
-    // };
-  }, []);
-
   useEffect(() => {
     console.log(areaCoordList, '저장상태');
   }, [areaCoordList]);
@@ -83,13 +78,7 @@ export default function LaancStep1({
     <>
       <ModalHeader>
         LAANC 승인 요청
-        <Button
+        <Button color='danger' onClick={handlerLaancClose}>
-          color='danger'
-          onClick={() => {
-            setDisabledAnimation(!disabledAnimation);
-            dispatch(AREA_DETAIL_INIT());
-          }}
-        >
           취소
         </Button>
       </ModalHeader>
@@ -498,11 +487,7 @@ export default function LaancStep1({
         </div>
       </ModalBody>
       <ModalFooter>
-        <Button
+        <Button outline color='danger' onClick={handlerLaancClose}>
-          outline
-          color='danger'
-          onClick={() => setDisabledAnimation(!disabledAnimation)}
-        >
           닫기
         </Button>
         <ul className='step'>

src/views/laanc/LaancStep2.js

@@ -46,7 +46,8 @@ export default function LaancStep2({
   disabledAnimation,
   setDisabledAnimation,
   centeredModal,
-  setCenteredModal
+  setCenteredModal,
+  handlerLaancClose
 }) {
   const [isterms, setIsterms] = useState(false);
   const [detailData, setDetailData] = useState(initFlightBas.initDetail);
@@ -71,10 +72,7 @@ export default function LaancStep2({
     <>
       <ModalHeader>
         LAANC 승인 요청
-        <Button
+        <Button color='danger' onClick={handlerLaancClose}>
-          color='danger'
-          onClick={() => setDisabledAnimation(!disabledAnimation)}
-        >
           취소
         </Button>
       </ModalHeader>