mapbox 테스트

.env.development

@@ -1,6 +1,10 @@
-REACT_APP_HOST = http://192.168.0.30:8080/
-REACT_APP_WS_HOST = ws://192.168.0.30:8081/ws
+# REACT_APP_HOST = http://192.168.0.30:8080/
+# REACT_APP_WS_HOST = ws://192.168.0.30:8081/ws
 
+# REACT_APP_IMAGE_HOST = https://palnet-file.s3.ap-northeast-2.amazonaws.com/
+
+REACT_APP_HOST = http://pav.palntour.com:8080/
+REACT_APP_WS_HOST = ws://pav.palntour.com:8081/ws
 REACT_APP_IMAGE_HOST = https://palnet-file.s3.ap-northeast-2.amazonaws.com/
 
 # Naver Search API HOST
@@ -12,3 +16,5 @@ REACT_WINDY_KEY = wf6Lkn1MAtqcgyW78xbceFHBz6ccsUo8
 # API KEY
 NAVER_APP_CLIENT_KEY = WGEct3bJhQC0pyMsP_GK
 NAVER_APP_SECRET_KEY = Q4K4OtUYol
+
+REACT_APP_MAPBOX_TOKEN = pk.eyJ1IjoianVuaGVlZSIsImEiOiJjbGxnNWVhc3IweDJsM2dvYmI1ZXg2MGljIn0.EmSS1ocpPJv2ZaduQHmz_Q

package.json

@@ -55,6 +55,7 @@
     "jsts": "^2.9.0",
     "jwt-decode": "^3.1.2",
     "leaflet": "1.6.0",
+    "mapbox-gl": "^2.15.0",
     "moment": "2.29.1",
     "nouislider": "14.6.2",
     "nouislider-react": "3.3.8",
@@ -82,6 +83,7 @@
     "react-indiana-drag-scroll": "^2.0.1",
     "react-intl": "3.11.0",
     "react-leaflet": "3.1.0",
+    "react-mapbox-gl": "^5.1.1",
     "react-paginate": "7.0.0",
     "react-perfect-scrollbar": "1.5.5",
     "react-player": "2.6.2",

public/index.html

@@ -12,6 +12,18 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
+    <!-- <link
+      href="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css"
+      rel="stylesheet""
+    /> -->
+
+    <link
+      rel="stylesheet"
+      href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.1/mapbox-gl-directions.css"
+      type="text/css"
+    />
+    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.1/mapbox-gl-directions.js"></script>
+    <!-- <script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script> -->
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <script

src/components/map/MapControl.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import { GoogleCustomMap } from './google/GoogleMap';
 import { NaverCustomMap } from './naver/NaverMap';
+import MapBoxTest from './naver/MapBoxTest';
 
 export const MapControl = props => {
   return (
-    <>{props.mapType === 'google' ? <GoogleCustomMap /> : <NaverCustomMap />}</>
+    // <>{props.mapType === 'google' ? <GoogleCustomMap /> : <NaverCustomMap />}</>
+    // <NaverCustomMap />
+    <MapBoxTest />
   );
 };

src/components/map/naver/MapBoxTest.js

@@ -0,0 +1,29 @@
+import mapboxgl from 'mapbox-gl';
+import { MAPBOX_TOKEN } from '../../../configs/constants';
+import { useContext, useEffect, useRef, useState } from 'react';
+import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';
+
+mapboxgl.accessToken = MAPBOX_TOKEN;
+export default function MapBoxTest() {
+  const mapContainer = useRef(null);
+  const map = useRef(null);
+  useEffect(() => {
+    if (map.current) return;
+    map.current = new mapboxgl.Map({
+      container: mapContainer.current,
+      style: 'mapbox://styles/mapbox/streets-v12',
+      center: [126.793722, 37.558522],
+      zoom: 9
+    });
+  });
+
+  return (
+    <div id='map'>
+      <div
+        style={{ width: '100%', height: '100vh' }}
+        ref={mapContainer}
+        className='map-container'
+      />
+    </div>
+  );
+}

src/configs/constants.js

@@ -5,6 +5,8 @@ export const NAVER_SEARCH_API_HOST = process.env.NAVER_SEARCH_API_HOST;
 
 export const IMG_PATH = process.env.REACT_APP_IMAGE_HOST;
 
+export const MAPBOX_TOKEN = process.env.REACT_APP_MAPBOX_TOKEN;
+
 // API KEY
 export const NAVER_APP_CLIENT_KEY = process.env.NAVER_APP_CLIENT_KEY;
 export const NAVER_APP_SECRET_KEY = process.env.NAVER_APP_SECRET_KEY;