From be4c31d6e166ba6505af7270661e3cafd260f545 Mon Sep 17 00:00:00 2001
From: JANGHYUNn <kimjh2369@gmail.com>
Date: Thu, 21 Dec 2023 17:35:03 +0900
Subject: [PATCH] =?UTF-8?q?3d=20model=20=EB=8D=B0=EC=9D=B4=ED=84=B0?=
 =?UTF-8?q?=EB=B8=94=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/map/mapbox/MapBoxMap.js | 50 +++++++++++++-------------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js
index 953559d..1c13bc2 100644
--- a/src/components/map/mapbox/MapBoxMap.js
+++ b/src/components/map/mapbox/MapBoxMap.js
@@ -497,40 +497,35 @@ export default function MapBoxMap() {
             const longitude = 126.6240164; // 3D Model 경도 값
             const latitude = 37.5643352; // 3D Model 위도 값
 
-            const info = new mapboxgl.Popup({
-              closeButton: false,
-              closeOnClick: false,
-              offset: mapboxgl.Point(5, -60)
-            })
-              .setLngLat([126.6240164, 37.5643352])
-              .setHTML(
-                `
-              <div class="dblock-box">
-                <div class="dblock-ti">
-                  <span>UAM</span>
-                </div>
-                <div class="dblock-txt">
-                  <div class="dblock-txt-list">
-                      <span>0 M</span>
-                      <span>0 km</span>
-                     <span>
-                      37.5643352 126.6240164 
-                      </span>
-                  </div>
+            model.addTooltip(
+              `
+            <div class="dblock-box">
+              <div class="dblock-ti">
+                <span>UAM</span>
+              </div>
+              <div class="dblock-txt">
+                <div class="dblock-txt-list">
+                    <span>0 M</span>
+                    <span>0 km</span>
+                   <span>
+                    37.5643352 126.6240164
+                    </span>
                 </div>
               </div>
-                `
-              )
-              .addTo(map);
+            </div>
+              `,
+              false
+            );
+            model.tooltip.visible = true;
 
             model.setCoords([longitude, latitude, 0]); // 3D Model 위치 지정
             model.setRotation({ x: 0, y: 0, z: 250 }); // 3D Model 방향 각도 지정
             tb.add(model);
+
             let index = 0;
             // 0.5초마다 모델의 위치를 변경
             setInterval(() => {
-              // longitude += 0.001; // 경도를 약간 증가시킵니다.
-              info.setLngLat([ghlfkd[index][0], ghlfkd[index][1]]).setHTML(
+              model.addTooltip(
                 `
                 <div class="dblock-box">
                   <div class="dblock-ti">
@@ -548,8 +543,11 @@ export default function MapBoxMap() {
                     </div>
                   </div>
                 </div>
-                  `
+                  `,
+                false
               );
+
+              model.tooltip.visible = true;
               model.setCoords([
                 ghlfkd[index][0],
                 ghlfkd[index][1],