From 113c4f87d6baac279bfda5e70f4857ab07797934 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?=
 <junheee@palnet.co.kr>
Date: Fri, 18 Aug 2023 16:58:55 +0900
Subject: [PATCH] =?UTF-8?q?mapbox=20=ED=85=8C=EC=8A=A4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                       | 10 +++++++--
 package.json                           |  2 ++
 public/index.html                      | 12 +++++++++++
 src/components/map/MapControl.js       |  5 ++++-
 src/components/map/naver/MapBoxTest.js | 29 ++++++++++++++++++++++++++
 src/configs/constants.js               |  2 ++
 6 files changed, 57 insertions(+), 3 deletions(-)
 create mode 100644 src/components/map/naver/MapBoxTest.js

diff --git a/.env.development b/.env.development
index a19bc27..110221d 100644
--- a/.env.development
+++ b/.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
diff --git a/package.json b/package.json
index b04381f..6a6b9ef 100644
--- a/package.json
+++ b/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",
diff --git a/public/index.html b/public/index.html
index 9a8cde0..9d5f7b5 100644
--- a/public/index.html
+++ b/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
diff --git a/src/components/map/MapControl.js b/src/components/map/MapControl.js
index a56e208..8d792ad 100644
--- a/src/components/map/MapControl.js
+++ b/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 />
   );
 };
diff --git a/src/components/map/naver/MapBoxTest.js b/src/components/map/naver/MapBoxTest.js
new file mode 100644
index 0000000..2bde40e
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/configs/constants.js b/src/configs/constants.js
index 23be2d9..9fe9c03 100644
--- a/src/configs/constants.js
+++ b/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;