비행계획서 공역 표출

src/components/basis/flight/plan/FlightPlanAreaMap.js

@@ -4,16 +4,21 @@ import {
     CardBody,
     Button
 } from 'reactstrap';
+import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone';
 
-const FlightPlanAreaMap = () => {
+const FlightPlanAreaMap = (props) => {
     const naver = window.naver;
+    const airArea = props.airArea;
+
     const [map, setMap] = useState();
+    const [isMapLoad, setIsMapLoad] = useState(false);
 
     useEffect(() => {
         NaverMapInit();
     }, []);
-    useEffect(() => {        
+    useEffect(() => {                
-    }, [map]);
+        setIsMapLoad(true);
+    }, [airArea]);
 
     const NaverMapInit = () => {
         const mapOptions = {
@@ -28,7 +33,7 @@ const FlightPlanAreaMap = () => {
             }
         };    
         
-        setMap(new naver.maps.Map('map', mapOptions));       
+        setMap(new naver.maps.Map('map', mapOptions));             
     };
 
 
@@ -44,22 +49,23 @@ const FlightPlanAreaMap = () => {
                 </div>
 
                 <div id="map" style={{ width: '100%', height: '50vh'}}></div>
+                
+                
+                {isMapLoad ? (                    
+                    <FeatureAirZone map={map} naver={naver} features={airArea.features} />                    
+                ) : null}
+                
+                
 
                 <div className='d-flex align-items-center mt-2'>
                     <Button.Ripple
                         className='mr-1'
-                        color='primary'
+                        color='primary'                       
-                        // onClick={
-                        //     pageType === 'create'
-                        //     ? handleSubmit(handlerCreate)
-                        //     : handleSubmit(handlerUpdate)
-                        // }
                     >
                         Line
                     </Button.Ripple>
                     <Button.Ripple 
-                        color='primary' 
+                        color='primary'                         
-                        // onClick={handlerDelete}
                     >
                         Circle
                     </Button.Ripple>

src/containers/basis/flight/plan/FlightPlanAreaContainer.js

@@ -1,14 +1,38 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import FlightPlanAreaForm from '../../../../components/basis/flight/plan/FlightPlanAreaForm';
 import { Button, Col, Row } from 'reactstrap';
+import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction';
 import FlightPlanAreaMap from '../../../../components/basis/flight/plan/FlightPlanAreaMap';
 
+
 const FlightPlanAreaContainer = () => {
+    const dispatch = useDispatch();
+    const { areaList } = useSelector(state => state.flightState);
+
+    const [airArea, setAirArea] = useState(null);
+
+
+    const getAriAreaList = () => {
+        dispatch(Actions.AREA_LIST.request());
+    }
+
+    useEffect(() => {
+        getAriAreaList();
+    }, []);
+
+    useEffect(() => {        
+        setAirArea(areaList);
+    }, [areaList])
 
     return (  
         <Row>
             <Col md={6} lg={6}>
-                <FlightPlanAreaMap />
+                {airArea != null ? (
+                    <FlightPlanAreaMap
+                        airArea={airArea}
+                    />
+                ) : null}                
             </Col>
             <Col md={6} lg={6}>
                 <FlightPlanAreaForm />            

src/containers/basis/flight/plan/FlightPlanDetailContainer.js

@@ -12,6 +12,8 @@ const FlightPlanDetailContainer = () => {
         contents: '',
     });
 
+     
+    
     const saveFlightPlanArea = () => {
         console.log('비행 구역 설정 저장');
     }
@@ -25,7 +27,7 @@ const FlightPlanDetailContainer = () => {
     }
 
     return (
-        <CustomDetailLayout title={"비행 승인 신청서"}>
+        <CustomDetailLayout title={"비행 계획 신청서"}>
             <FlightPlanForm
                 openModal={openModal}
             />

src/modules/basis/flight/actions/basisFlightAction.ts

@@ -0,0 +1,21 @@
+import { AxiosError } from 'axios';
+import { createAsyncAction, ActionType} from 'typesafe-actions';
+import { FlightAreaData } from '../models/basisFlightModel';
+
+
+// 공역 조회
+const AREA_LIST_REQUEST = 'basis/flight/area/LIST_REQUEST';
+const AREA_LIST_SUCCESS = 'basis/flight/area/LIST_SUCCESS';
+const AREA_LIST_FAILURE = 'basis/flight/area/LIST_FAILURE';
+
+export const AREA_LIST = createAsyncAction(
+    AREA_LIST_REQUEST,
+    AREA_LIST_SUCCESS,
+    AREA_LIST_FAILURE
+)<FlightAreaData, { data: FlightAreaData }, AxiosError>();
+
+const actions = {
+    AREA_LIST
+};
+
+export type FlightAction = ActionType<typeof actions>;

src/modules/basis/flight/apis/basisFlightApi.ts

@@ -0,0 +1,9 @@
+import axios from '../../../utils/customAxiosUtil';
+import qs from 'qs';
+
+
+export const flightPlanAPI = {
+    area: async () => {
+        return await axios.get(`api/bas/flight/area`);
+    }
+}

src/modules/basis/flight/models/basisFlightModel.ts

@@ -0,0 +1,11 @@
+export interface FlightState {
+    areaList: FlightAreaData | undefined 
+}
+
+export interface FlightAreaData {
+   areaList: []
+}
+
+export const initFlight = {
+    areaList: undefined    
+};

src/modules/basis/flight/reducers/basisFlightReducer.ts

@@ -0,0 +1,15 @@
+import { createReducer } from 'typesafe-actions';
+import produce from 'immer';
+
+import * as Actions from '../actions/basisFlightAction';
+import { FlightState, initFlight } from '../models/basisFlightModel';
+import { any } from 'prop-types';
+
+
+export const flightReducer = createReducer<FlightState, Actions.FlightAction> ( initFlight )
+.handleAction(Actions.AREA_LIST.success, (state, action) => 
+    produce(state, draft => {
+        const {data} = action.payload;
+        draft.areaList = data;        
+    })
+) ;

src/modules/basis/flight/sagas/basisFlightSaga.ts

@@ -0,0 +1,43 @@
+import { call, put, takeEvery } from '@redux-saga/core/effects';
+import { ActionType } from 'typesafe-actions';
+import {
+  DELETE_MESSAGE,
+  DUPLATE_MESSAGE,
+  ERROR_MESSAGE,
+  SAVE_MESSAGE
+} from '../../../../configs/constants';
+import * as MessageActions from '../../../comn/message/actions/comnMessageAction';
+import * as Actions from '../actions/basisFlightAction';
+import * as Apis from '../apis/basisFlightApi';
+
+function* listAreaSaga(action: ActionType<typeof Actions.AREA_LIST.request>) {
+    try {
+        const response = yield call(Apis.flightPlanAPI.area);
+
+        if(response.errorCode) {
+            yield put(
+                MessageActions.IS_ERROR({
+                    errorCode: response.errorCode,
+                    errorMessage: response.errorMessage,
+                    isHistoryBack: false,
+                    isRefresh: false
+                })
+            );
+            return;
+        }
+
+        yield put(
+            Actions.AREA_LIST.success({ 
+                data: response
+            })
+        );
+    } catch (error: any) {
+        yield put(
+            Actions.AREA_LIST.failure(error)
+        );
+    }
+}
+
+export function* flightSaga() {
+    yield takeEvery(Actions.AREA_LIST.request, listAreaSaga);
+}

src/redux/reducers/rootReducer.ts

@@ -30,6 +30,8 @@ import auth from './auth';
 import layout from './layout';
 import navbar from './navbar';
 
+import { flightReducer } from '../../modules/basis/flight/reducers/basisFlightReducer';
+import { flightSaga } from '../../modules/basis/flight/sagas/basisFlightSaga';
 export interface StoreState {
   controlGpState: ControlGpState;
 }
@@ -43,6 +45,7 @@ export function* saga() {
   yield all([fork(basGroupSaga)]);
   yield all([fork(dronSaga)]);
   yield all([fork(analysisSimulatorSaga)]);
+  yield all([fork(flightSaga)]);
 }
 
 const rootReducer = combineReducers({
@@ -61,7 +64,8 @@ const rootReducer = combineReducers({
   controlGpDtlState: controlGpDtlReducer,
   menuState: menuReducer,
   analysisHistoryState: analysisHistoryReducer,
-  analysisSimulatorState: analysisSimulatorReducer
+  analysisSimulatorState: analysisSimulatorReducer,
+  flightState: flightReducer
 });
 
 export default rootReducer;