지도 유형 이슈 수정

src/components/map/mapbox/MapBoxMap.js

@@ -100,8 +100,10 @@ export default function MapBoxMap() {
 
   // 지도 초기 셋팅
   useLayoutEffect(() => {
+    if (mapState.mapType === 'TERRAIN' || mapState.mapType === 'SATELLITE') {
       mapBoxMapInit();
-  }, []);
+    }
+  }, [mapState.mapType]);
 
   // 공역 표출 정보에 따른 공역 변경
   useEffect(() => {
@@ -299,7 +301,7 @@ export default function MapBoxMap() {
 
     const map = new mapboxgl.Map({
       container: 'map', // container ID
-      style: 'mapbox://styles/mapbox/streets-v12', // style URL
+      style: mapState.mapStyleUrl, // style URL
       center: [127.85101412107547, 37.520357], // starting position [lng, lat]
       zoom: 8.5, // starting zoom
       antialias: true,

src/containers/flight/NewFlightApprovalsContainer.js

@@ -23,8 +23,17 @@ import { setLogout } from '@src/redux/features/account/auth/authThunk';
 import logo from '../../assets/images/logo/kac_logo_ icon.svg';
 import { AiOutlinePoweroff } from 'react-icons/ai';
 import WebsocketClient from '../../components/websocket/WebsocketClient';
-import { Card, ButtonGroup, Button, Modal, ModalHeader, ModalBody, ModalFooter, Table } from '@component/ui';
+import {
-import { FiUsers, FiFileText } from "react-icons/fi";
+  Card,
+  ButtonGroup,
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Table
+} from '@component/ui';
+import { FiUsers, FiFileText } from 'react-icons/fi';
 
 export default function NewFlightApprovalsContainer({ mode }) {
   const dispatch = useDispatch();
@@ -37,7 +46,7 @@ export default function NewFlightApprovalsContainer({ mode }) {
   const [filter, setFilter] = useState('');
   // 지도
   const [mapObject, setMapObject] = useState();
-  const [mapType, setMapType] = useMapType();
+  const [setMapType] = useMapType();
   const { areaCoordList, isOpenModal } = useSelector(state => state.laancState);
 
   const [startDate, setStartDate] = useState(dayjs().format('YYYY-MM-DD'));
@@ -54,7 +63,7 @@ export default function NewFlightApprovalsContainer({ mode }) {
   // 미니맵 레이어
   const [previewLayer, setPreviewLayer] = useState();
 
-  const map = useSelector(state => state.mapState.map);
+  const { map, mapType } = useSelector(state => state.mapState);
 
   // popup
   const [isPopup, setIsPopup] = useState(false);
@@ -360,7 +369,10 @@ export default function NewFlightApprovalsContainer({ mode }) {
             </ModalHeader>
             <ModalBody className='onestop-validation'>
               <div className='pal-table-warp'>
-                <h5 className='table-ti'><FiFileText />기체 정보</h5>
+                <h5 className='table-ti'>
+                  <FiFileText />
+                  기체 정보
+                </h5>
                 <div className='pal-table'>
                   <Table responsive>
                     <thead>
@@ -376,7 +388,9 @@ export default function NewFlightApprovalsContainer({ mode }) {
                     <tbody>
                       <tr>
                         <td width='80'>1</td>
-                      <td width='120' className='success'>성공</td>
+                        <td width='120' className='success'>
+                          성공
+                        </td>
                         <td>163CGBEROA529Y</td>
                         <td>영리</td>
                         <td>25kg이하</td>
@@ -384,7 +398,9 @@ export default function NewFlightApprovalsContainer({ mode }) {
                       </tr>
                       <tr>
                         <td width='80'>2</td>
-                      <td width='120' className='fail'>실패</td>
+                        <td width='120' className='fail'>
+                          실패
+                        </td>
                         <td>163CGBEROA529Y</td>
                         <td>영리</td>
                         <td>25kg이하</td>
@@ -392,7 +408,9 @@ export default function NewFlightApprovalsContainer({ mode }) {
                       </tr>
                       <tr>
                         <td width='80'>2</td>
-                      <td width='120' className='fail'>실패</td>
+                        <td width='120' className='fail'>
+                          실패
+                        </td>
                         <td>163CGBEROA529Y</td>
                         <td>영리</td>
                         <td>25kg이하</td>
@@ -400,7 +418,9 @@ export default function NewFlightApprovalsContainer({ mode }) {
                       </tr>
                       <tr>
                         <td width='80'>2</td>
-                      <td width='120' className='fail'>실패</td>
+                        <td width='120' className='fail'>
+                          실패
+                        </td>
                         <td>163CGBEROA529Y</td>
                         <td>영리</td>
                         <td>25kg이하</td>
@@ -408,7 +428,9 @@ export default function NewFlightApprovalsContainer({ mode }) {
                       </tr>
                       <tr>
                         <td width='80'>2</td>
-                      <td width='120' className='fail'>실패</td>
+                        <td width='120' className='fail'>
+                          실패
+                        </td>
                         <td>163CGBEROA529Y</td>
                         <td>영리</td>
                         <td>25kg이하</td>
@@ -416,7 +438,9 @@ export default function NewFlightApprovalsContainer({ mode }) {
                       </tr>
                       <tr>
                         <td width='80'>2</td>
-                      <td width='120' className='fail'>실패</td>
+                        <td width='120' className='fail'>
+                          실패
+                        </td>
                         <td>163CGBEROA529Y</td>
                         <td>영리</td>
                         <td>25kg이하</td>
@@ -424,7 +448,9 @@ export default function NewFlightApprovalsContainer({ mode }) {
                       </tr>
                       <tr>
                         <td width='80'>2</td>
-                      <td width='120' className='fail'>실패</td>
+                        <td width='120' className='fail'>
+                          실패
+                        </td>
                         <td>163CGBEROA529Y</td>
                         <td>영리</td>
                         <td>25kg이하</td>
@@ -435,7 +461,10 @@ export default function NewFlightApprovalsContainer({ mode }) {
                 </div>
               </div>
               <div className='pal-table-warp'>
-                <h5 className='table-ti'><FiUsers/>조종자 정보</h5>
+                <h5 className='table-ti'>
+                  <FiUsers />
+                  조종자 정보
+                </h5>
                 <div className='pal-table'>
                   <Table>
                     <thead>
@@ -451,7 +480,9 @@ export default function NewFlightApprovalsContainer({ mode }) {
                     <tbody>
                       <tr>
                         <td width='80'>1</td>
-                      <td width='120' className='success'>성공</td>
+                        <td width='120' className='success'>
+                          성공
+                        </td>
                         <td>홍*동</td>
                         <td>1995****</td>
                         <td>91-****12</td>
@@ -459,7 +490,9 @@ export default function NewFlightApprovalsContainer({ mode }) {
                       </tr>
                       <tr>
                         <td width='80'>2</td>
-                      <td width='120' className='fail'>실패</td>
+                        <td width='120' className='fail'>
+                          실패
+                        </td>
                         <td>김*혜</td>
                         <td>1995****</td>
                         <td>91-****12</td>
@@ -467,7 +500,9 @@ export default function NewFlightApprovalsContainer({ mode }) {
                       </tr>
                       <tr>
                         <td width='80'>2</td>
-                      <td width='120' className='fail'>실패</td>
+                        <td width='120' className='fail'>
+                          실패
+                        </td>
                         <td>김*혜</td>
                         <td>1995****</td>
                         <td>91-****12</td>
@@ -475,7 +510,9 @@ export default function NewFlightApprovalsContainer({ mode }) {
                       </tr>
                       <tr>
                         <td width='80'>2</td>
-                      <td width='120' className='fail'>실패</td>
+                        <td width='120' className='fail'>
+                          실패
+                        </td>
                         <td>김*혜</td>
                         <td>1995****</td>
                         <td>91-****12</td>
@@ -483,7 +520,9 @@ export default function NewFlightApprovalsContainer({ mode }) {
                       </tr>
                       <tr>
                         <td width='80'>2</td>
-                      <td width='120' className='fail'>실패</td>
+                        <td width='120' className='fail'>
+                          실패
+                        </td>
                         <td>김*혜</td>
                         <td>1995****</td>
                         <td>91-****12</td>
@@ -491,7 +530,9 @@ export default function NewFlightApprovalsContainer({ mode }) {
                       </tr>
                       <tr>
                         <td width='80'>2</td>
-                      <td width='120' className='fail'>실패</td>
+                        <td width='120' className='fail'>
+                          실패
+                        </td>
                         <td>김*혜</td>
                         <td>1995****</td>
                         <td>91-****12</td>
@@ -499,7 +540,9 @@ export default function NewFlightApprovalsContainer({ mode }) {
                       </tr>
                       <tr>
                         <td width='80'>2</td>
-                      <td width='120' className='fail'>실패</td>
+                        <td width='120' className='fail'>
+                          실패
+                        </td>
                         <td>김*혜</td>
                         <td>1995****</td>
                         <td>91-****12</td>
@@ -511,10 +554,7 @@ export default function NewFlightApprovalsContainer({ mode }) {
               </div>
             </ModalBody>
             <ModalFooter>
-              <Button
+              <Button color='primary' onClick={() => setTestModal(!testModal)}>
-                color='primary'
-                onClick={() => setTestModal(!testModal)}
-              >
                 확인
               </Button>{' '}
             </ModalFooter>

src/redux/features/control/map/mapSlice.ts

@@ -4,6 +4,7 @@ import { IMapState } from './mapState';
 const initMap: IMapState = {
   map: undefined,
   mapType: 'TERRAIN',
+  mapStyleUrl: 'mapbox://styles/mapbox/streets-v12',
   objectId: '',
   isClickObject: false,
   area0001: true,
@@ -26,6 +27,16 @@ const mapSlice = createSlice({
     },
     clientMapTypeChange: (state, action) => {
       const value = action.payload;
+      let styleUrl = '';
+      if (value === 'TERRAIN' || value === 'SATELLITE') {
+        if (value === 'TERRAIN') {
+          styleUrl = 'mapbox://styles/mapbox/streets-v12';
+        } else {
+          styleUrl = 'mapbox://styles/mapbox/satellite-streets-v12';
+        }
+        state.mapStyleUrl = styleUrl;
+      }
+
       state.mapType = value;
     },
     clientObjectClick: (state, action) => {

src/redux/features/control/map/mapState.ts

@@ -1,6 +1,7 @@
 export interface IMapState {
   map: any;
   mapType: string;
+  mapStyleUrl: string;
   objectId: string;
   isClickObject: boolean;
   area0001: boolean;

src/utility/hooks/useMapType.ts

@@ -24,17 +24,23 @@ const useMapType = () => {
       mapState.map.setMaxPitch(85);
       mapState.map.dragRotate.enable();
     } else if (type === '2D') {
-      mapState.map.setMaxPitch(0);
+      // mapState.map.setMaxPitch(0);
-      mapState.map.setBearing(0);
+      // mapState.map.setBearing(0);
-      mapState.map.dragRotate.disable();
+      // mapState.map.dragRotate.disable();
     } else if (type === 'SATELLITE') {
       mapState.map.setStyle('mapbox://styles/mapbox/satellite-streets-v12');
+      mapState.map.setTerrain({
+        source: 'mapbox-dem',
+        exaggeration: 1
+      });
+      mapState.map.setMaxPitch(85);
+      mapState.map.dragRotate.enable();
     }
     dispatch(clientMapTypeChange(type));
-    setMapType(type);
+    // setMapType(type);
   };
 
-  return [mapType, handlerMapType];
+  return [handlerMapType];
 };
 
 export default useMapType;

src/views/control/setting/ControlSetting.js

@@ -18,7 +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 [setMapType] = useMapType();
   const dispatch = useDispatch();
   const history = useHistory();
 
@@ -140,19 +140,19 @@ const ControlSetting = props => {
           <div className='map-btn'>
             <ButtonGroup>
               <Button
-                color={mapType === 'TERRAIN' ? 'primary' : ''}
+                color={mapState.mapType === 'TERRAIN' ? 'primary' : ''}
                 onClick={e => setMapType('TERRAIN')}
               >
                 지형지도
               </Button>
               <Button
-                color={mapType === 'NORMAL' ? 'primary' : ''}
+                color={mapState.mapType === 'NORMAL' ? 'primary' : ''}
                 onClick={e => setMapType('NORMAL')}
               >
                 일반지도
               </Button>
               <Button
-                color={mapType === '2D' ? 'primary' : ''}
+                color={mapState.mapType === '2D' ? 'primary' : ''}
                 onClick={e => setMapType('2D')}
               >
                 2D