3d model 데이터블록 수정

src/components/map/mapbox/MapBoxMap.js

@@ -497,13 +497,7 @@ export default function MapBoxMap() {
             const longitude = 126.6240164; // 3D Model 경도 값
             const latitude = 37.5643352; // 3D Model 위도 값
 
-            const info = new mapboxgl.Popup({
+            model.addTooltip(
-              closeButton: false,
-              closeOnClick: false,
-              offset: mapboxgl.Point(5, -60)
-            })
-              .setLngLat([126.6240164, 37.5643352])
-              .setHTML(
               `
             <div class="dblock-box">
               <div class="dblock-ti">
@@ -519,18 +513,19 @@ export default function MapBoxMap() {
                 </div>
               </div>
             </div>
-                `
+              `,
-              )
+              false
-              .addTo(map);
+            );
+            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; // 경도를 약간 증가시킵니다.
+              model.addTooltip(
-              info.setLngLat([ghlfkd[index][0], ghlfkd[index][1]]).setHTML(
                 `
                 <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],