3d model 데이터블록 수정

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],