diff --git a/src/containers/flight/NewFlightApprovalsContainer.js b/src/containers/flight/NewFlightApprovalsContainer.js
index 819e7158..de47096a 100644
--- a/src/containers/flight/NewFlightApprovalsContainer.js
+++ b/src/containers/flight/NewFlightApprovalsContainer.js
@@ -11,6 +11,7 @@ import {
flightlayerBuffer
} from '../../utility/MapUtils';
import { useHistory } from 'react-router-dom';
+import useMapType from '@hooks/useMapType';
import { clientSaveAreaCoordinateList } from '@src/redux/features/laanc/laancSlice';
import { MapControl } from '../../components/map/MapControl';
import { clientSetIsMapLoading } from '@src/redux/features/laanc/laancSlice';
@@ -35,7 +36,7 @@ export default function NewFlightApprovalsContainer({ mode }) {
const [filter, setFilter] = useState('');
// 지도
const [mapObject, setMapObject] = useState();
-
+ const [mapType, setMapType] = useMapType();
const { areaCoordList, isOpenModal } = useSelector(state => state.laancState);
const [startDate, setStartDate] = useState(dayjs().format('YYYY-MM-DD'));
@@ -343,9 +344,24 @@ export default function NewFlightApprovalsContainer({ mode }) {
지도유형
-
-
-
+
+
+
diff --git a/src/utility/hooks/useMapType.ts b/src/utility/hooks/useMapType.ts
new file mode 100644
index 00000000..1aa0d870
--- /dev/null
+++ b/src/utility/hooks/useMapType.ts
@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from '@src/redux/store';
+import { clientMapTypeChange } from '@src/redux/features/control/map/mapSlice';
+
+type mapType = 'TERRAIN' | 'NORMAL' | '2D' | 'SATELLITE';
+
+const useMapType = () => {
+ const [mapType, setMapType] = useState('TERRAIN');
+ const dispatch = useDispatch();
+ // 지도, 지도타입, 공역 타입 컨트롤
+ const mapState = useSelector(state => state.mapState);
+
+ const handlerMapType = (type: mapType) => {
+ if (type === 'TERRAIN') {
+ mapState.map.setStyle('mapbox://styles/mapbox/streets-v12');
+ mapState.map.setTerrain({
+ source: 'mapbox-dem',
+ exaggeration: 1
+ });
+ mapState.map.setMaxPitch(85);
+ mapState.map.dragRotate.enable();
+ } else if (type === 'NORMAL') {
+ mapState.map.setTerrain();
+ mapState.map.setMaxPitch(85);
+ mapState.map.dragRotate.enable();
+ } else if (type === '2D') {
+ mapState.map.setMaxPitch(0);
+ mapState.map.setBearing(0);
+ mapState.map.dragRotate.disable();
+ } else if (type === 'SATELLITE') {
+ mapState.map.setStyle('mapbox://styles/mapbox/satellite-streets-v12');
+ }
+ dispatch(clientMapTypeChange(type));
+ setMapType(type);
+ };
+
+ return [mapType, handlerMapType];
+};
+
+export default useMapType;
diff --git a/src/views/control/setting/ControlSetting.js b/src/views/control/setting/ControlSetting.js
index db44d025..701ff6d1 100644
--- a/src/views/control/setting/ControlSetting.js
+++ b/src/views/control/setting/ControlSetting.js
@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from '@src/redux/store';
import { useHistory } from 'react-router-dom';
import mapboxgl from 'mapbox-gl';
import { Button, ButtonGroup, CustomInput } from '@component/ui';
+import useMapType from '@hooks/useMapType';
import {
clientAreaClick,
clientFlightAreaClick,
@@ -17,6 +18,7 @@ import flatGimpo from '../../../components/map/geojson/flatGimpoAirportAirArea.j
import { clientDispatchTopMenu } from '@src/redux/features/layout/layoutSlice';
const ControlSetting = props => {
+ const [mapType, setMapType] = useMapType();
const dispatch = useDispatch();
const history = useHistory();
@@ -123,28 +125,6 @@ const ControlSetting = props => {
return markers;
};
- // 지도 유형 변경
- const handlerMapType = val => {
- if (val === mapState.mapType) return;
- if (val === 'TERRAIN') {
- mapState.map.setTerrain({
- source: 'mapbox-dem',
- exaggeration: 1
- });
- mapState.map.setMaxPitch(85);
- mapState.map.dragRotate.enable();
- } else if (val === 'NORMAL') {
- mapState.map.setTerrain();
- mapState.map.setMaxPitch(85);
- mapState.map.dragRotate.enable();
- } else if (val === '2D') {
- mapState.map.setMaxPitch(0);
- mapState.map.setBearing(0);
- mapState.map.dragRotate.disable();
- }
- dispatch(clientMapTypeChange(val));
- };
-
// 공역 표출
const handlerAreaClick = (e, val) => {
dispatch(clientAreaClick(val));
@@ -160,20 +140,20 @@ const ControlSetting = props => {