mapbox map 스타일 변경 hook 추가

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 }) {
                 <h4>지도유형</h4>
                 <div className='map-btn'>
                   <ButtonGroup>
-                    <Button primary>지형지도</Button>
+                    <Button
-                    <Button primary>일반지도</Button>
+                      color={mapType === 'TERRAIN' ? 'primary' : ''}
-                    <Button primary>2D</Button>
+                      onClick={e => setMapType('TERRAIN')}
+                    >
+                      지형지도
+                    </Button>
+                    <Button
+                      color={mapType === 'SATELLITE' ? 'primary' : ''}
+                      onClick={e => setMapType('SATELLITE')}
+                    >
+                      위성지도
+                    </Button>
+                    <Button
+                      color={mapType === '2D' ? 'primary' : ''}
+                      onClick={e => setMapType('2D')}
+                    >
+                      2D
+                    </Button>
                   </ButtonGroup>
                 </div>
               </div>

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<mapType>('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;

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 => {
           <div className='map-btn'>
             <ButtonGroup>
               <Button
-                color={mapState.mapType === 'TERRAIN' ? 'primary' : ''}
+                color={mapType === 'TERRAIN' ? 'primary' : ''}
-                onClick={e => handlerMapType('TERRAIN')}
+                onClick={e => setMapType('TERRAIN')}
               >
                 지형지도
               </Button>
               <Button
-                color={mapState.mapType === 'NORMAL' ? 'primary' : ''}
+                color={mapType === 'NORMAL' ? 'primary' : ''}
-                onClick={e => handlerMapType('NORMAL')}
+                onClick={e => setMapType('NORMAL')}
               >
                 일반지도
               </Button>
               <Button
-                color={mapState.mapType === '2D' ? 'primary' : ''}
+                color={mapType === '2D' ? 'primary' : ''}
-                onClick={e => handlerMapType('2D')}
+                onClick={e => setMapType('2D')}
               >
                 2D
               </Button>