From 36b62c62500116657a87da4c16c9bbb1fc248531 Mon Sep 17 00:00:00 2001
From: kimjh2369 <kimjh2369@gmail.com>
Date: Tue, 9 Jul 2024 15:28:47 +0900
Subject: [PATCH] =?UTF-8?q?mapbox=20map=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20hook=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../flight/NewFlightApprovalsContainer.js     | 24 +++++++++--
 src/utility/hooks/useMapType.ts               | 40 +++++++++++++++++++
 src/views/control/setting/ControlSetting.js   | 36 ++++-------------
 3 files changed, 68 insertions(+), 32 deletions(-)
 create mode 100644 src/utility/hooks/useMapType.ts

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