@mint-ui/map 1.2.0-test.43 → 1.2.0-test.45

package/dist/components/mint-map/core/advanced/shared/types.d.ts

@@ -55,20 +55,19 @@ export interface CanvasOption {
  * };
  *
  * // ✅ 올바른 사용 (헬퍼 함수 사용)
- * const dataArray = createCanvasDataArray([serverData], (item) => ({
- *   id: String(item.id),
+ * const data = createCanvasData(serverData, {
+ *   id: String(serverData.id),
  *   position: new Position(lat, lng)
- * }));
- * const data = dataArray[0]; // 단일 항목이 필요한 경우
+ * });
  * ```
  */
 export declare type CanvasData<T = {}> = T & CanvasOption;
 /**
- * 서버 데이터 배열을 CanvasData 배열로 변환하는 헬퍼 함수
+ * 서버 데이터를 CanvasData로 변환하는 헬퍼 함수들
  *
- * @see createCanvasDataArray in ./utils.ts
+ * @see createCanvasData, createCanvasDataArray in ./utils.ts
  */
-export { createCanvasDataArray } from './utils';
+export { createCanvasData, createCanvasDataArray } from './utils';
 /**
  * 렌더링 유틸리티 함수들 (좌표 변환)
  *

package/dist/components/mint-map/core/advanced/shared/types.js

@@ -14,4 +14,5 @@ exports.CanvasDataType = void 0;
   CanvasDataType["POLYGON"] = "POLYGON";
 })(exports.CanvasDataType || (exports.CanvasDataType = {}));
 
+exports.createCanvasData = utils.createCanvasData;
 exports.createCanvasDataArray = utils.createCanvasDataArray;

package/dist/components/mint-map/core/advanced/shared/utils.d.ts

@@ -60,6 +60,39 @@ export declare const calculateTextBoxWidth: ({ text, fontConfig, padding, minWid
     padding: number;
     minWidth: number;
 }) => number;
+/**
+ * 서버 데이터를 CanvasData로 변환하는 헬퍼 함수
+ *
+ * 서버 데이터의 필드가 CanvasOption과 충돌하는 경우 (예: id, position 등),
+ * 이 함수를 사용하여 명시적으로 매핑할 수 있습니다.
+ *
+ * @template T 서버에서 받은 원본 데이터 타입
+ * @param serverData 서버에서 받은 원본 데이터
+ * @param canvasOptions CanvasOption 필드들 (충돌하는 필드는 여기서 명시적으로 지정)
+ * @returns CanvasData<T> 타입의 데이터
+ *
+ * @example
+ * ```typescript
+ * interface ServerData {
+ *   id: number;  // CanvasOption의 id와 충돌
+ *   name: string;
+ * }
+ *
+ * const serverData: ServerData = { id: 123, name: "Test" };
+ *
+ * // ✅ 올바른 사용
+ * const canvasData = createCanvasData(serverData, {
+ *   id: String(serverData.id),  // 명시적으로 변환
+ *   position: new Position(37.5, 127.0)
+ * });
+ *
+ * // canvasData는 CanvasData<ServerData> 타입이며:
+ * // - id: string (CanvasOption의 id)
+ * // - name: string (서버 데이터의 name)
+ * // - position: Position (CanvasOption의 position)
+ * ```
+ */
+export declare function createCanvasData<T extends Record<string, any>>(serverData: T, canvasOptions: CanvasOption): CanvasData<T>;
 /**
  * 서버 데이터 배열을 CanvasData 배열로 변환하는 헬퍼 함수
  *

package/dist/components/mint-map/core/advanced/shared/utils.js

@@ -212,6 +212,44 @@ var calculateTextBoxWidth = function (_a) {
   var textWidth = tempCtx.measureText(text).width;
   return Math.max(minWidth, textWidth + padding);
 };
+/**
+ * 서버 데이터를 CanvasData로 변환하는 헬퍼 함수
+ *
+ * 서버 데이터의 필드가 CanvasOption과 충돌하는 경우 (예: id, position 등),
+ * 이 함수를 사용하여 명시적으로 매핑할 수 있습니다.
+ *
+ * @template T 서버에서 받은 원본 데이터 타입
+ * @param serverData 서버에서 받은 원본 데이터
+ * @param canvasOptions CanvasOption 필드들 (충돌하는 필드는 여기서 명시적으로 지정)
+ * @returns CanvasData<T> 타입의 데이터
+ *
+ * @example
+ * ```typescript
+ * interface ServerData {
+ *   id: number;  // CanvasOption의 id와 충돌
+ *   name: string;
+ * }
+ *
+ * const serverData: ServerData = { id: 123, name: "Test" };
+ *
+ * // ✅ 올바른 사용
+ * const canvasData = createCanvasData(serverData, {
+ *   id: String(serverData.id),  // 명시적으로 변환
+ *   position: new Position(37.5, 127.0)
+ * });
+ *
+ * // canvasData는 CanvasData<ServerData> 타입이며:
+ * // - id: string (CanvasOption의 id)
+ * // - name: string (서버 데이터의 name)
+ * // - position: Position (CanvasOption의 position)
+ * ```
+ */
+
+function createCanvasData(serverData, canvasOptions) {
+  // 서버 데이터와 CanvasOption을 결합
+  // CanvasOption의 필드가 우선되므로 충돌하는 필드는 canvasOptions의 값이 사용됨
+  return tslib.__assign(tslib.__assign({}, serverData), canvasOptions);
+}
 /**
  * 서버 데이터 배열을 CanvasData 배열로 변환하는 헬퍼 함수
  *
@@ -249,16 +287,15 @@ var calculateTextBoxWidth = function (_a) {
 
 function createCanvasDataArray(serverDataArray, getCanvasOptions) {
   return serverDataArray.map(function (serverData, index) {
-    var canvasOptions = getCanvasOptions(serverData, index); // 서버 데이터와 CanvasOption을 결합
-    // CanvasOption의 필드가 우선되므로 충돌하는 필드는 canvasOptions의 값이 사용됨
-
-    return tslib.__assign(tslib.__assign({}, serverData), canvasOptions);
+    var canvasOptions = getCanvasOptions(serverData, index);
+    return createCanvasData(serverData, canvasOptions);
   });
 }
 
 exports.calculateTextBoxWidth = calculateTextBoxWidth;
 exports.computeMarkerOffset = computeMarkerOffset;
 exports.computePolygonOffsets = computePolygonOffsets;
+exports.createCanvasData = createCanvasData;
 exports.createCanvasDataArray = createCanvasDataArray;
 exports.hexToRgba = hexToRgba;
 exports.isPointInMarkerData = isPointInMarkerData;

package/dist/components/mint-map/core/advanced/woongCanvasMarker/WoongCanvasMarker.js

@@ -72,7 +72,9 @@ var WoongCanvasMarker = function (props) {
   var accumTranslateRef = React.useRef({
     x: 0,
     y: 0
-  }); // 성능 최적화 Refs
+  }); // 드래그 시작 시점의 hover 상태 저장 (드래그 중 hover 고정용)
+
+  var dragStartHoveredItemRef = React.useRef(null); // 성능 최적화 Refs
 
   var offsetCacheRef = React.useRef(new performance.LRUCache(maxCacheSize));
   var spatialIndexRef = React.useRef(new performance.SpatialHashGrid(performance.SPATIAL_GRID_CELL_SIZE));
@@ -271,14 +273,18 @@ var WoongCanvasMarker = function (props) {
       handleDragEndShared = _g.handleDragEnd;
 
   var handleDragStart = function () {
-    handleDragStartShared();
+    handleDragStartShared(); // 드래그 시작 시점의 hover 상태 저장
+
+    dragStartHoveredItemRef.current = hoveredItemRef.current;
     draggingRef.current = true;
     controller.setMapCursor('grabbing');
   };
 
   var handleDragEnd = function () {
     handleDragEndShared();
-    draggingRef.current = false;
+    draggingRef.current = false; // 드래그 종료 후 hover 상태 초기화 (다음 MOUSEMOVE에서 업데이트됨)
+
+    dragStartHoveredItemRef.current = null;
     controller.setMapCursor('grab');
   }; // Hit Test: 특정 좌표의 마커 찾기
 
@@ -309,6 +315,11 @@ var WoongCanvasMarker = function (props) {
 
 
   var setHovered = function (data) {
+    // 드래그 중에는 hover 상태 변경을 무시하고 드래그 시작 시점의 상태 유지
+    if (draggingRef.current) {
+      return;
+    }
+
     hoveredItemRef.current = data;
 
     if (draggingRef.current) {
@@ -358,6 +369,7 @@ var WoongCanvasMarker = function (props) {
 
 
   var handleClick = function (event) {
+    if (controller.isMapDragged()) return;
     if (disableInteractionRef.current) return;
     var clickedOffset = helpers.validateEvent(event, context$1, controller);
     if (!clickedOffset) return;
@@ -369,7 +381,9 @@ var WoongCanvasMarker = function (props) {
 
 
   var handleMouseMove = function (event) {
-    if (disableInteractionRef.current) return;
+    if (disableInteractionRef.current) return; // 드래그 중에는 hover 상태를 업데이트하지 않음 (드래그 시작 시점의 hover 상태 유지)
+
+    if (draggingRef.current) return;
     var mouseOffset = helpers.validateEvent(event, context$1, controller);
     if (!mouseOffset) return;
     var hoveredItem = findData(mouseOffset);

package/dist/components/mint-map/core/advanced/woongCanvasPolygon/WoongCanvasPolygon.js

@@ -82,7 +82,9 @@ var WoongCanvasPolygon = function (props) {
   var accumTranslateRef = React.useRef({
     x: 0,
     y: 0
-  }); // 성능 최적화 Refs
+  }); // 드래그 시작 시점의 hover 상태 저장 (드래그 중 hover 고정용)
+
+  var dragStartHoveredItemRef = React.useRef(null); // 성능 최적화 Refs
 
   var offsetCacheRef = React.useRef(new performance.LRUCache(maxCacheSize));
   var spatialIndexRef = React.useRef(new performance.SpatialHashGrid(performance.SPATIAL_GRID_CELL_SIZE));
@@ -255,14 +257,18 @@ var WoongCanvasPolygon = function (props) {
       handleDragEndShared = _f.handleDragEnd;
 
   var handleDragStart = function () {
-    handleDragStartShared();
+    handleDragStartShared(); // 드래그 시작 시점의 hover 상태 저장
+
+    dragStartHoveredItemRef.current = hoveredItemRef.current;
     draggingRef.current = true;
     controller.setMapCursor('grabbing');
   };
 
   var handleDragEnd = function () {
     handleDragEndShared();
-    draggingRef.current = false;
+    draggingRef.current = false; // 드래그 종료 후 hover 상태 초기화 (다음 MOUSEMOVE에서 업데이트됨)
+
+    dragStartHoveredItemRef.current = null;
     controller.setMapCursor('grab');
   }; // Hit Test: 특정 좌표의 폴리곤 찾기
 
@@ -284,6 +290,11 @@ var WoongCanvasPolygon = function (props) {
 
 
   var setHovered = function (data) {
+    // 드래그 중에는 hover 상태 변경을 무시하고 드래그 시작 시점의 상태 유지
+    if (draggingRef.current) {
+      return;
+    }
+
     hoveredItemRef.current = data;
 
     if (draggingRef.current) {
@@ -329,6 +340,7 @@ var WoongCanvasPolygon = function (props) {
 
 
   var handleClick = function (event) {
+    if (controller.isMapDragged()) return;
     if (disableInteractionRef.current) return;
     var clickedOffset = helpers.validateEvent(event, context$1, controller);
     if (!clickedOffset) return;
@@ -340,7 +352,9 @@ var WoongCanvasPolygon = function (props) {
 
 
   var handleMouseMove = function (event) {
-    if (disableInteractionRef.current) return;
+    if (disableInteractionRef.current) return; // 드래그 중에는 hover 상태를 업데이트하지 않음 (드래그 시작 시점의 hover 상태 유지)
+
+    if (draggingRef.current) return;
     var mouseOffset = helpers.validateEvent(event, context$1, controller);
     if (!mouseOffset) return;
     var hoveredItem = findData(mouseOffset);

package/dist/index.es.js

@@ -988,6 +988,44 @@ var calculateTextBoxWidth = function (_a) {
   var textWidth = tempCtx.measureText(text).width;
   return Math.max(minWidth, textWidth + padding);
 };
+/**
+ * 서버 데이터를 CanvasData로 변환하는 헬퍼 함수
+ *
+ * 서버 데이터의 필드가 CanvasOption과 충돌하는 경우 (예: id, position 등),
+ * 이 함수를 사용하여 명시적으로 매핑할 수 있습니다.
+ *
+ * @template T 서버에서 받은 원본 데이터 타입
+ * @param serverData 서버에서 받은 원본 데이터
+ * @param canvasOptions CanvasOption 필드들 (충돌하는 필드는 여기서 명시적으로 지정)
+ * @returns CanvasData<T> 타입의 데이터
+ *
+ * @example
+ * ```typescript
+ * interface ServerData {
+ *   id: number;  // CanvasOption의 id와 충돌
+ *   name: string;
+ * }
+ *
+ * const serverData: ServerData = { id: 123, name: "Test" };
+ *
+ * // ✅ 올바른 사용
+ * const canvasData = createCanvasData(serverData, {
+ *   id: String(serverData.id),  // 명시적으로 변환
+ *   position: new Position(37.5, 127.0)
+ * });
+ *
+ * // canvasData는 CanvasData<ServerData> 타입이며:
+ * // - id: string (CanvasOption의 id)
+ * // - name: string (서버 데이터의 name)
+ * // - position: Position (CanvasOption의 position)
+ * ```
+ */
+
+function createCanvasData(serverData, canvasOptions) {
+  // 서버 데이터와 CanvasOption을 결합
+  // CanvasOption의 필드가 우선되므로 충돌하는 필드는 canvasOptions의 값이 사용됨
+  return __assign(__assign({}, serverData), canvasOptions);
+}
 /**
  * 서버 데이터 배열을 CanvasData 배열로 변환하는 헬퍼 함수
  *
@@ -1025,10 +1063,8 @@ var calculateTextBoxWidth = function (_a) {
 
 function createCanvasDataArray(serverDataArray, getCanvasOptions) {
   return serverDataArray.map(function (serverData, index) {
-    var canvasOptions = getCanvasOptions(serverData, index); // 서버 데이터와 CanvasOption을 결합
-    // CanvasOption의 필드가 우선되므로 충돌하는 필드는 canvasOptions의 값이 사용됨
-
-    return __assign(__assign({}, serverData), canvasOptions);
+    var canvasOptions = getCanvasOptions(serverData, index);
+    return createCanvasData(serverData, canvasOptions);
   });
 }
 
@@ -5676,7 +5712,9 @@ var WoongCanvasMarker = function (props) {
   var accumTranslateRef = useRef({
     x: 0,
     y: 0
-  }); // 성능 최적화 Refs
+  }); // 드래그 시작 시점의 hover 상태 저장 (드래그 중 hover 고정용)
+
+  var dragStartHoveredItemRef = useRef(null); // 성능 최적화 Refs
 
   var offsetCacheRef = useRef(new LRUCache(maxCacheSize));
   var spatialIndexRef = useRef(new SpatialHashGrid(SPATIAL_GRID_CELL_SIZE));
@@ -5875,14 +5913,18 @@ var WoongCanvasMarker = function (props) {
       handleDragEndShared = _g.handleDragEnd;
 
   var handleDragStart = function () {
-    handleDragStartShared();
+    handleDragStartShared(); // 드래그 시작 시점의 hover 상태 저장
+
+    dragStartHoveredItemRef.current = hoveredItemRef.current;
     draggingRef.current = true;
     controller.setMapCursor('grabbing');
   };
 
   var handleDragEnd = function () {
     handleDragEndShared();
-    draggingRef.current = false;
+    draggingRef.current = false; // 드래그 종료 후 hover 상태 초기화 (다음 MOUSEMOVE에서 업데이트됨)
+
+    dragStartHoveredItemRef.current = null;
     controller.setMapCursor('grab');
   }; // Hit Test: 특정 좌표의 마커 찾기
 
@@ -5913,6 +5955,11 @@ var WoongCanvasMarker = function (props) {
 
 
   var setHovered = function (data) {
+    // 드래그 중에는 hover 상태 변경을 무시하고 드래그 시작 시점의 상태 유지
+    if (draggingRef.current) {
+      return;
+    }
+
     hoveredItemRef.current = data;
 
     if (draggingRef.current) {
@@ -5962,6 +6009,7 @@ var WoongCanvasMarker = function (props) {
 
 
   var handleClick = function (event) {
+    if (controller.isMapDragged()) return;
     if (disableInteractionRef.current) return;
     var clickedOffset = validateEvent(event, context, controller);
     if (!clickedOffset) return;
@@ -5973,7 +6021,9 @@ var WoongCanvasMarker = function (props) {
 
 
   var handleMouseMove = function (event) {
-    if (disableInteractionRef.current) return;
+    if (disableInteractionRef.current) return; // 드래그 중에는 hover 상태를 업데이트하지 않음 (드래그 시작 시점의 hover 상태 유지)
+
+    if (draggingRef.current) return;
     var mouseOffset = validateEvent(event, context, controller);
     if (!mouseOffset) return;
     var hoveredItem = findData(mouseOffset);
@@ -6560,7 +6610,9 @@ var WoongCanvasPolygon = function (props) {
   var accumTranslateRef = useRef({
     x: 0,
     y: 0
-  }); // 성능 최적화 Refs
+  }); // 드래그 시작 시점의 hover 상태 저장 (드래그 중 hover 고정용)
+
+  var dragStartHoveredItemRef = useRef(null); // 성능 최적화 Refs
 
   var offsetCacheRef = useRef(new LRUCache(maxCacheSize));
   var spatialIndexRef = useRef(new SpatialHashGrid(SPATIAL_GRID_CELL_SIZE));
@@ -6733,14 +6785,18 @@ var WoongCanvasPolygon = function (props) {
       handleDragEndShared = _f.handleDragEnd;
 
   var handleDragStart = function () {
-    handleDragStartShared();
+    handleDragStartShared(); // 드래그 시작 시점의 hover 상태 저장
+
+    dragStartHoveredItemRef.current = hoveredItemRef.current;
     draggingRef.current = true;
     controller.setMapCursor('grabbing');
   };
 
   var handleDragEnd = function () {
     handleDragEndShared();
-    draggingRef.current = false;
+    draggingRef.current = false; // 드래그 종료 후 hover 상태 초기화 (다음 MOUSEMOVE에서 업데이트됨)
+
+    dragStartHoveredItemRef.current = null;
     controller.setMapCursor('grab');
   }; // Hit Test: 특정 좌표의 폴리곤 찾기
 
@@ -6762,6 +6818,11 @@ var WoongCanvasPolygon = function (props) {
 
 
   var setHovered = function (data) {
+    // 드래그 중에는 hover 상태 변경을 무시하고 드래그 시작 시점의 상태 유지
+    if (draggingRef.current) {
+      return;
+    }
+
     hoveredItemRef.current = data;
 
     if (draggingRef.current) {
@@ -6807,6 +6868,7 @@ var WoongCanvasPolygon = function (props) {
 
 
   var handleClick = function (event) {
+    if (controller.isMapDragged()) return;
     if (disableInteractionRef.current) return;
     var clickedOffset = validateEvent(event, context, controller);
     if (!clickedOffset) return;
@@ -6818,7 +6880,9 @@ var WoongCanvasPolygon = function (props) {
 
 
   var handleMouseMove = function (event) {
-    if (disableInteractionRef.current) return;
+    if (disableInteractionRef.current) return; // 드래그 중에는 hover 상태를 업데이트하지 않음 (드래그 시작 시점의 hover 상태 유지)
+
+    if (draggingRef.current) return;
     var mouseOffset = validateEvent(event, context, controller);
     if (!mouseOffset) return;
     var hoveredItem = findData(mouseOffset);
@@ -9885,4 +9949,4 @@ function MintMap(_a) {
   }), loading));
 }
 
-export { AnimationPlayer, Bounds, CanvasDataType, CanvasMarker, CanvasMarkerClaude, CanvasMarkerHanquf, CircleMarker, DEFAULT_CULLING_MARGIN, DEFAULT_MAX_CACHE_SIZE, Drawable, GeoCalulator, GoogleMintMapController, LRUCache, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SPATIAL_GRID_CELL_SIZE, SVGCircle, SVGPolygon, SVGRect, Spacing, SpatialHashGrid, Status, WoongCanvasMarker, WoongCanvasPolygon, WoongCanvasProvider, buildSpatialIndex, calculateTextBoxWidth, computeMarkerOffset, computePolygonOffsets, createCanvasDataArray, createMapEventHandlers, getClusterInfo, getMapOfType, hexToRgba, isInViewport, isPointInMarkerData, isPointInPolygon, isPointInPolygonData, log, mapValuesToArray, syncExternalSelectedItems, syncSelectedItems, updateViewport, useMarkerMoving, useMintMapController, useWoongCanvasContext, validateEvent, waiting };
+export { AnimationPlayer, Bounds, CanvasDataType, CanvasMarker, CanvasMarkerClaude, CanvasMarkerHanquf, CircleMarker, DEFAULT_CULLING_MARGIN, DEFAULT_MAX_CACHE_SIZE, Drawable, GeoCalulator, GoogleMintMapController, LRUCache, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SPATIAL_GRID_CELL_SIZE, SVGCircle, SVGPolygon, SVGRect, Spacing, SpatialHashGrid, Status, WoongCanvasMarker, WoongCanvasPolygon, WoongCanvasProvider, buildSpatialIndex, calculateTextBoxWidth, computeMarkerOffset, computePolygonOffsets, createCanvasData, createCanvasDataArray, createMapEventHandlers, getClusterInfo, getMapOfType, hexToRgba, isInViewport, isPointInMarkerData, isPointInPolygon, isPointInPolygonData, log, mapValuesToArray, syncExternalSelectedItems, syncSelectedItems, updateViewport, useMarkerMoving, useMintMapController, useWoongCanvasContext, validateEvent, waiting };

package/dist/index.js

@@ -72,6 +72,7 @@ Object.defineProperty(exports, 'CanvasDataType', {
 exports.calculateTextBoxWidth = utils.calculateTextBoxWidth;
 exports.computeMarkerOffset = utils.computeMarkerOffset;
 exports.computePolygonOffsets = utils.computePolygonOffsets;
+exports.createCanvasData = utils.createCanvasData;
 exports.createCanvasDataArray = utils.createCanvasDataArray;
 exports.hexToRgba = utils.hexToRgba;
 exports.isPointInMarkerData = utils.isPointInMarkerData;

package/dist/index.umd.js

@@ -992,6 +992,44 @@
     var textWidth = tempCtx.measureText(text).width;
     return Math.max(minWidth, textWidth + padding);
   };
+  /**
+   * 서버 데이터를 CanvasData로 변환하는 헬퍼 함수
+   *
+   * 서버 데이터의 필드가 CanvasOption과 충돌하는 경우 (예: id, position 등),
+   * 이 함수를 사용하여 명시적으로 매핑할 수 있습니다.
+   *
+   * @template T 서버에서 받은 원본 데이터 타입
+   * @param serverData 서버에서 받은 원본 데이터
+   * @param canvasOptions CanvasOption 필드들 (충돌하는 필드는 여기서 명시적으로 지정)
+   * @returns CanvasData<T> 타입의 데이터
+   *
+   * @example
+   * ```typescript
+   * interface ServerData {
+   *   id: number;  // CanvasOption의 id와 충돌
+   *   name: string;
+   * }
+   *
+   * const serverData: ServerData = { id: 123, name: "Test" };
+   *
+   * // ✅ 올바른 사용
+   * const canvasData = createCanvasData(serverData, {
+   *   id: String(serverData.id),  // 명시적으로 변환
+   *   position: new Position(37.5, 127.0)
+   * });
+   *
+   * // canvasData는 CanvasData<ServerData> 타입이며:
+   * // - id: string (CanvasOption의 id)
+   * // - name: string (서버 데이터의 name)
+   * // - position: Position (CanvasOption의 position)
+   * ```
+   */
+
+  function createCanvasData(serverData, canvasOptions) {
+    // 서버 데이터와 CanvasOption을 결합
+    // CanvasOption의 필드가 우선되므로 충돌하는 필드는 canvasOptions의 값이 사용됨
+    return tslib.__assign(tslib.__assign({}, serverData), canvasOptions);
+  }
   /**
    * 서버 데이터 배열을 CanvasData 배열로 변환하는 헬퍼 함수
    *
@@ -1029,10 +1067,8 @@
 
   function createCanvasDataArray(serverDataArray, getCanvasOptions) {
     return serverDataArray.map(function (serverData, index) {
-      var canvasOptions = getCanvasOptions(serverData, index); // 서버 데이터와 CanvasOption을 결합
-      // CanvasOption의 필드가 우선되므로 충돌하는 필드는 canvasOptions의 값이 사용됨
-
-      return tslib.__assign(tslib.__assign({}, serverData), canvasOptions);
+      var canvasOptions = getCanvasOptions(serverData, index);
+      return createCanvasData(serverData, canvasOptions);
     });
   }
 
@@ -5680,7 +5716,9 @@
     var accumTranslateRef = React.useRef({
       x: 0,
       y: 0
-    }); // 성능 최적화 Refs
+    }); // 드래그 시작 시점의 hover 상태 저장 (드래그 중 hover 고정용)
+
+    var dragStartHoveredItemRef = React.useRef(null); // 성능 최적화 Refs
 
     var offsetCacheRef = React.useRef(new LRUCache(maxCacheSize));
     var spatialIndexRef = React.useRef(new SpatialHashGrid(SPATIAL_GRID_CELL_SIZE));
@@ -5879,14 +5917,18 @@
         handleDragEndShared = _g.handleDragEnd;
 
     var handleDragStart = function () {
-      handleDragStartShared();
+      handleDragStartShared(); // 드래그 시작 시점의 hover 상태 저장
+
+      dragStartHoveredItemRef.current = hoveredItemRef.current;
       draggingRef.current = true;
       controller.setMapCursor('grabbing');
     };
 
     var handleDragEnd = function () {
       handleDragEndShared();
-      draggingRef.current = false;
+      draggingRef.current = false; // 드래그 종료 후 hover 상태 초기화 (다음 MOUSEMOVE에서 업데이트됨)
+
+      dragStartHoveredItemRef.current = null;
       controller.setMapCursor('grab');
     }; // Hit Test: 특정 좌표의 마커 찾기
 
@@ -5917,6 +5959,11 @@
 
 
     var setHovered = function (data) {
+      // 드래그 중에는 hover 상태 변경을 무시하고 드래그 시작 시점의 상태 유지
+      if (draggingRef.current) {
+        return;
+      }
+
       hoveredItemRef.current = data;
 
       if (draggingRef.current) {
@@ -5966,6 +6013,7 @@
 
 
     var handleClick = function (event) {
+      if (controller.isMapDragged()) return;
       if (disableInteractionRef.current) return;
       var clickedOffset = validateEvent(event, context, controller);
       if (!clickedOffset) return;
@@ -5977,7 +6025,9 @@
 
 
     var handleMouseMove = function (event) {
-      if (disableInteractionRef.current) return;
+      if (disableInteractionRef.current) return; // 드래그 중에는 hover 상태를 업데이트하지 않음 (드래그 시작 시점의 hover 상태 유지)
+
+      if (draggingRef.current) return;
       var mouseOffset = validateEvent(event, context, controller);
       if (!mouseOffset) return;
       var hoveredItem = findData(mouseOffset);
@@ -6564,7 +6614,9 @@
     var accumTranslateRef = React.useRef({
       x: 0,
       y: 0
-    }); // 성능 최적화 Refs
+    }); // 드래그 시작 시점의 hover 상태 저장 (드래그 중 hover 고정용)
+
+    var dragStartHoveredItemRef = React.useRef(null); // 성능 최적화 Refs
 
     var offsetCacheRef = React.useRef(new LRUCache(maxCacheSize));
     var spatialIndexRef = React.useRef(new SpatialHashGrid(SPATIAL_GRID_CELL_SIZE));
@@ -6737,14 +6789,18 @@
         handleDragEndShared = _f.handleDragEnd;
 
     var handleDragStart = function () {
-      handleDragStartShared();
+      handleDragStartShared(); // 드래그 시작 시점의 hover 상태 저장
+
+      dragStartHoveredItemRef.current = hoveredItemRef.current;
       draggingRef.current = true;
       controller.setMapCursor('grabbing');
     };
 
     var handleDragEnd = function () {
       handleDragEndShared();
-      draggingRef.current = false;
+      draggingRef.current = false; // 드래그 종료 후 hover 상태 초기화 (다음 MOUSEMOVE에서 업데이트됨)
+
+      dragStartHoveredItemRef.current = null;
       controller.setMapCursor('grab');
     }; // Hit Test: 특정 좌표의 폴리곤 찾기
 
@@ -6766,6 +6822,11 @@
 
 
     var setHovered = function (data) {
+      // 드래그 중에는 hover 상태 변경을 무시하고 드래그 시작 시점의 상태 유지
+      if (draggingRef.current) {
+        return;
+      }
+
       hoveredItemRef.current = data;
 
       if (draggingRef.current) {
@@ -6811,6 +6872,7 @@
 
 
     var handleClick = function (event) {
+      if (controller.isMapDragged()) return;
       if (disableInteractionRef.current) return;
       var clickedOffset = validateEvent(event, context, controller);
       if (!clickedOffset) return;
@@ -6822,7 +6884,9 @@
 
 
     var handleMouseMove = function (event) {
-      if (disableInteractionRef.current) return;
+      if (disableInteractionRef.current) return; // 드래그 중에는 hover 상태를 업데이트하지 않음 (드래그 시작 시점의 hover 상태 유지)
+
+      if (draggingRef.current) return;
       var mouseOffset = validateEvent(event, context, controller);
       if (!mouseOffset) return;
       var hoveredItem = findData(mouseOffset);
@@ -9939,6 +10003,7 @@
   exports.calculateTextBoxWidth = calculateTextBoxWidth;
   exports.computeMarkerOffset = computeMarkerOffset;
   exports.computePolygonOffsets = computePolygonOffsets;
+  exports.createCanvasData = createCanvasData;
   exports.createCanvasDataArray = createCanvasDataArray;
   exports.createMapEventHandlers = createMapEventHandlers;
   exports.getClusterInfo = getClusterInfo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mint-ui/map",
-  "version": "1.2.0-test.43",
+  "version": "1.2.0-test.45",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "browser": "./dist/index.umd.js",