diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js
index bed2c68..e424b12 100644
--- a/src/components/basis/flight/plan/FlightPlanAreaMap.js
+++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js
@@ -1,18 +1,24 @@
 import React, { useEffect, useState } from 'react';
 import {
     Card,
-    CardBody,     
+    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(() => {        
-    }, [map]);
+    useEffect(() => {                
+        setIsMapLoad(true);
+    }, [airArea]);
 
     const NaverMapInit = () => {
         const mapOptions = {
@@ -27,12 +33,12 @@ const FlightPlanAreaMap = () => {
             }
         };    
         
-        setMap(new naver.maps.Map('map', mapOptions));       
+        setMap(new naver.maps.Map('map', mapOptions));             
     };
 
 
     return (
-        <Card>
+        <Card className='mb-0'>
             <CardBody>                
                 <div className='search-cont search-info pd-0'>
                     <div className='cont-ti mb-1 d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
@@ -43,8 +49,28 @@ 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'                       
+                    >
+                        Line
+                    </Button.Ripple>
+                    <Button.Ripple 
+                        color='primary'                         
+                    >
+                        Circle
+                    </Button.Ripple>
+                </div>
             </CardBody>
-         
         </Card>
     )
 }
diff --git a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js
index 9c530af..1e2cecd 100644
--- a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js
+++ b/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 />            
diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js
index da3a91d..99809ec 100644
--- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js
+++ b/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}
             />
diff --git a/src/modules/basis/flight/actions/basisFlightAction.ts b/src/modules/basis/flight/actions/basisFlightAction.ts
new file mode 100644
index 0000000..f7cd37c
--- /dev/null
+++ b/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>;
\ No newline at end of file
diff --git a/src/modules/basis/flight/apis/basisFlightApi.ts b/src/modules/basis/flight/apis/basisFlightApi.ts
new file mode 100644
index 0000000..32ca049
--- /dev/null
+++ b/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`);
+    }
+}
\ No newline at end of file
diff --git a/src/modules/basis/flight/models/basisFlightModel.ts b/src/modules/basis/flight/models/basisFlightModel.ts
new file mode 100644
index 0000000..3880268
--- /dev/null
+++ b/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    
+};
\ No newline at end of file
diff --git a/src/modules/basis/flight/reducers/basisFlightReducer.ts b/src/modules/basis/flight/reducers/basisFlightReducer.ts
new file mode 100644
index 0000000..32ad54b
--- /dev/null
+++ b/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;        
+    })
+) ;
\ No newline at end of file
diff --git a/src/modules/basis/flight/sagas/basisFlightSaga.ts b/src/modules/basis/flight/sagas/basisFlightSaga.ts
new file mode 100644
index 0000000..9676eaa
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/src/redux/reducers/rootReducer.ts b/src/redux/reducers/rootReducer.ts
index a801d00..57d7156 100644
--- a/src/redux/reducers/rootReducer.ts
+++ b/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;