날씨 정보 추가 및 laanc 스텝 3 완료 페이지

src/views/laanc/FlightArea.js

@@ -28,6 +28,7 @@ import geoJson from '../../components/map/geojson/airArea.json';
 import axios from '../../modules/utils/customAxiosUtil';
 import { ErrorModal } from '../../components/modal/ErrorModal';
 import { FeatureAirZone } from '../../components/map/mapbox/feature/FeatureAirZone';
+import { WeatherContainer } from '../../containers/basis/flight/plan/WeatherContainer';
 
 export default function FlightArea({ centeredModal, setCenteredModal, page }) {
   const dispatch = useDispatch();
@@ -38,12 +39,14 @@ export default function FlightArea({ centeredModal, setCenteredModal, page }) {
   const [mapObject, setMapObject] = useState();
   const [isMapLoad, setIsMapLoad] = useState(false);
   const [previewLayer, setPreviewLayer] = useState();
-
+  const [formModal, setFormModal] = useState(false);
   const [alertModal, setAlertModal] = useState({
     isOpen: false,
     title: '',
     desc: ''
   });
+  //날씨 임시 데이터
+  const [wheather, setWheather] = useState([]);
 
   const previewGeo = {
     type: 'FeatureCollection',
@@ -60,6 +63,7 @@ export default function FlightArea({ centeredModal, setCenteredModal, page }) {
       if (area.areaType && area.areaType !== '') {
         if (!centeredModal && previewLayer) handlerPreviewDraw();
       }
+      setWheather(areaCoordList);
     }
   }, [areaCoordList, centeredModal, previewLayer]);
 
@@ -168,6 +172,11 @@ export default function FlightArea({ centeredModal, setCenteredModal, page }) {
     }
   };
 
+  // 날씨 handler
+  const handlerWeather = () => {
+    setFormModal(!formModal);
+  };
+
   const handlerMapInit = () => {
     mapboxgl.accessToken = MAPBOX_TOKEN;
 
@@ -371,6 +380,11 @@ export default function FlightArea({ centeredModal, setCenteredModal, page }) {
                 >
                   초기화
                 </Button>
+                {wheather[0]?.coordList[0].lat != 0 ? (
+                  <Button color='primary' onClick={handlerWeather}>
+                    날씨 정보
+                  </Button>
+                ) : null}
               </div>
               <div>
                 <Button
@@ -388,6 +402,21 @@ export default function FlightArea({ centeredModal, setCenteredModal, page }) {
         </Modal>
       ) : null}
       <ErrorModal modal={alertModal} setModal={setAlertModal} />
+      <Modal
+        isOpen={formModal}
+        toggle={handlerWeather}
+        className='modal-dialog-centered'
+      >
+        <ModalHeader toggle={handlerWeather}>날씨 정보</ModalHeader>
+        <ModalBody>
+          <WeatherContainer mapAreaCoordList={wheather} />
+        </ModalBody>
+        <ModalFooter>
+          <Button color='primary' onClick={handlerWeather}>
+            확인
+          </Button>
+        </ModalFooter>
+      </Modal>
     </div>
   );
 }

src/views/laanc/LaacnStep3.js

@@ -16,14 +16,14 @@ import {
   Badge
 } from 'reactstrap';
 import { useHistory } from 'react-router-dom';
-import { AlertCircle } from 'react-feather';
-
+import { AlertCircle, CheckCircle } from 'react-feather';
 export default function LaacnStep3({
   handlerStep,
   disabledAnimation,
   data,
   setDisabledAnimation
 }) {
+  const [centeredModal2, setCenteredModal2] = useState(false);
   const { user } = useSelector(state => state.authState);
   return (
     <>
@@ -219,9 +219,10 @@ export default function LaacnStep3({
           </li>
         </ul>
         {/* outline onClick={() => setCenteredModal2(!centeredModal2)} */}
-        <Button outline>다음</Button>
-
-        {/* <Modal
+        <Button outline onClick={() => setCenteredModal2(!centeredModal2)}>
+          다음
+        </Button>
+        <Modal
           isOpen={centeredModal2}
           toggle={() => setCenteredModal2(!centeredModal2)}
           className='modal-dialog-centered document-pop'
@@ -241,12 +242,12 @@ export default function LaacnStep3({
           <ModalFooter>
             <Button
               color='success'
-              onClick={() => setCenteredModal2(!centeredModal2)}
+              onClick={() => setDisabledAnimation(!disabledAnimation)}
             >
               완료
             </Button>{' '}
           </ModalFooter>
-        </Modal> */}
+        </Modal>
       </ModalFooter>
     </>
   );