@mint-ui/map 1.2.0 → 1.2.2

package/dist/components/mint-map/core/advanced/CanvasMarkerLayer/CanvasMarkerLayer.js

@@ -32,10 +32,12 @@ var CanvasMarkerLayer = function (props) {
       cullingMargin = _a === void 0 ? performance.DEFAULT_CULLING_MARGIN : _a,
       onOptimizationDataUpdate = props.onOptimizationDataUpdate,
       renderBase = props.renderBase,
-      options = tslib.__rest(props, ["data", "cullingMargin", "onOptimizationDataUpdate", "renderBase"]); // renderEvent가 있는 경우에만 인터랙션 관련 props 추출
+      _b = props.spatialGridCellSize,
+      spatialGridCellSize = _b === void 0 ? performance.SPATIAL_GRID_CELL_SIZE : _b,
+      options = tslib.__rest(props, ["data", "cullingMargin", "onOptimizationDataUpdate", "renderBase", "spatialGridCellSize"]); // renderEvent가 있는 경우에만 인터랙션 관련 props 추출
 
 
-  var _b = hasRenderEvent && 'renderEvent' in props ? props : {
+  var _c = hasRenderEvent && 'renderEvent' in props ? props : {
     disableInteraction: false,
     onClick: undefined,
     onMouseOut: undefined,
@@ -45,15 +47,15 @@ var CanvasMarkerLayer = function (props) {
     selectedItems: undefined,
     topStageZIndex: undefined
   },
-      _c = _b.disableInteraction,
-      disableInteraction = _c === void 0 ? false : _c,
-      onClick = _b.onClick,
-      onMouseOut = _b.onMouseOut,
-      onMouseOver = _b.onMouseOver,
-      renderEvent = _b.renderEvent,
-      externalSelectedItem = _b.selectedItem,
-      externalSelectedItems = _b.selectedItems,
-      rawTopStageZIndex = _b.topStageZIndex; // topStageZIndex가 있으면 hover 최상단 표시 활성화, 없으면 비활성화 (성능 우선)
+      _d = _c.disableInteraction,
+      disableInteraction = _d === void 0 ? false : _d,
+      onClick = _c.onClick,
+      onMouseOut = _c.onMouseOut,
+      onMouseOver = _c.onMouseOver,
+      renderEvent = _c.renderEvent,
+      externalSelectedItem = _c.selectedItem,
+      externalSelectedItems = _c.selectedItems,
+      rawTopStageZIndex = _c.topStageZIndex; // topStageZIndex가 있으면 hover 최상단 표시 활성화, 없으면 비활성화 (성능 우선)
 
 
   var topStageZIndex = rawTopStageZIndex;
@@ -100,7 +102,7 @@ var CanvasMarkerLayer = function (props) {
   } // 성능 최적화 Refs
 
 
-  var spatialIndexRef = React.useRef(new performance.SpatialHashGrid(performance.SPATIAL_GRID_CELL_SIZE));
+  var spatialIndexRef = React.useRef(new performance.SpatialHashGrid(spatialGridCellSize));
   var boundingBoxCacheRef = React.useRef(new Map());
   var viewportRef = React.useRef(null); // 뷰포트 영역 계산 (Viewport Culling용)
 
@@ -144,9 +146,18 @@ var CanvasMarkerLayer = function (props) {
 
   var buildSpatialIndex = function () {
     hooks.buildSpatialIndex(dataRef.current, spatialIndexRef.current, computeBoundingBox);
-  }; // 렌더링 유틸리티 객체
+  }; // spatialGridCellSize가 변경되면 SpatialHashGrid 재생성
 
 
+  React.useEffect(function () {
+    spatialIndexRef.current = new performance.SpatialHashGrid(spatialGridCellSize); // 인덱스 재구성 (데이터가 있을 때만)
+
+    if (dataRef.current.length > 0) {
+      buildSpatialIndex();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [spatialGridCellSize]); // 렌더링 유틸리티 객체
+
   var renderUtils = {
     getOrComputeMarkerOffset: getOrComputeMarkerOffset,
     getOrComputePolygonOffsets: function () {
@@ -351,7 +362,7 @@ var CanvasMarkerLayer = function (props) {
   }; // 지도 이벤트 핸들러 생성
 
 
-  var _d = hooks.createMapEventHandlers({
+  var _e = hooks.createMapEventHandlers({
     accumTranslateRef: accumTranslateRef,
     boundingBoxCacheRef: boundingBoxCacheRef,
     clearCache: function () {
@@ -364,12 +375,12 @@ var CanvasMarkerLayer = function (props) {
     prevCenterOffsetRef: prevCenterOffsetRef,
     renderAllImmediate: renderAllImmediate
   }),
-      handleIdleShared = _d.handleIdle,
-      handleZoomStart = _d.handleZoomStart,
-      handleZoomEnd = _d.handleZoomEnd,
-      handleCenterChangedShared = _d.handleCenterChanged,
-      handleDragStartShared = _d.handleDragStart,
-      handleDragEndShared = _d.handleDragEnd; // handleIdle 래핑: topStage transform 제거 추가
+      handleIdleShared = _e.handleIdle,
+      handleZoomStart = _e.handleZoomStart,
+      handleZoomEnd = _e.handleZoomEnd,
+      handleCenterChangedShared = _e.handleCenterChanged,
+      handleDragStartShared = _e.handleDragStart,
+      handleDragEndShared = _e.handleDragEnd; // handleIdle 래핑: topStage transform 제거 추가
 
 
   var handleIdle = function () {
@@ -415,8 +426,9 @@ var CanvasMarkerLayer = function (props) {
 
 
   var findData = function (offset) {
-    // topStageZIndex가 설정되어 있으면 hover된 항목을 최우선으로 확인
-    if (topStageZIndex !== undefined && hoveredItemRef.current) {
+    // hover된 항목이 있으면 최우선으로 확인 (topOnHover 기능 지원)
+    // topStageZIndex가 없어도 hover된 항목이 다른 마커 위에 있어도 계속 hover 상태 유지
+    if (hoveredItemRef.current) {
       var hovered = hoveredItemRef.current;
 
       if (utils.isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {

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

@@ -12,6 +12,8 @@ export interface CanvasMarkerLayerPropsWithoutEvent<T> extends Pick<MarkerOption
     cullingMargin?: number;
     /** Queue 캐시 최대 크기 (기본값: 30000) */
     maxCacheSize?: number;
+    /** Spatial Grid Hash 셀 크기 (픽셀 단위, 기본값: 200) */
+    spatialGridCellSize?: number;
     /** Base Layer 렌더링 함수 (필수) */
     renderBase: CustomRenderBase<T>;
     /** Event Layer 렌더링 함수가 없으면 인터랙션 관련 props 사용 불가 */
@@ -51,6 +53,8 @@ export interface CanvasMarkerLayerPropsWithEventWithSelectedItem<T> extends Pick
     cullingMargin?: number;
     /** Queue 캐시 최대 크기 (기본값: 30000) */
     maxCacheSize?: number;
+    /** Spatial Grid Hash 셀 크기 (픽셀 단위, 기본값: 200) */
+    spatialGridCellSize?: number;
     /** 외부에서 전달된 단일 선택 아이템 */
     selectedItem: CanvasData<T> | null;
     /** 외부에서 제어하는 선택된 항목 배열 (selectedItem과 공존 불가) */
@@ -89,6 +93,8 @@ export interface CanvasMarkerLayerPropsWithEventWithSelectedItems<T> extends Pic
     cullingMargin?: number;
     /** Queue 캐시 최대 크기 (기본값: 30000) */
     maxCacheSize?: number;
+    /** Spatial Grid Hash 셀 크기 (픽셀 단위, 기본값: 200) */
+    spatialGridCellSize?: number;
     /** 외부에서 제어하는 선택된 항목 배열 */
     selectedItems: CanvasData<T>[];
     /** 외부에서 전달된 단일 선택 아이템 (selectedItems와 공존 불가) */
@@ -127,6 +133,8 @@ export interface CanvasMarkerLayerPropsWithEventWithoutSelection<T> extends Pick
     cullingMargin?: number;
     /** Queue 캐시 최대 크기 (기본값: 30000) */
     maxCacheSize?: number;
+    /** Spatial Grid Hash 셀 크기 (픽셀 단위, 기본값: 200) */
+    spatialGridCellSize?: number;
     /** 외부에서 제어하는 선택된 항목 배열 */
     selectedItems?: never;
     /** 외부에서 전달된 단일 선택 아이템 */
@@ -166,6 +174,8 @@ export interface CanvasMarkerLayerPropsWithEventWithTopStageWithSelectedItem<T>
     cullingMargin?: number;
     /** Queue 캐시 최대 크기 (기본값: 30000) */
     maxCacheSize?: number;
+    /** Spatial Grid Hash 셀 크기 (픽셀 단위, 기본값: 200) */
+    spatialGridCellSize?: number;
     /** 외부에서 전달된 단일 선택 아이템 */
     selectedItem: CanvasData<T> | null;
     /** 외부에서 제어하는 선택된 항목 배열 (selectedItem과 공존 불가) */
@@ -205,6 +215,8 @@ export interface CanvasMarkerLayerPropsWithEventWithTopStageWithSelectedItems<T>
     cullingMargin?: number;
     /** Queue 캐시 최대 크기 (기본값: 30000) */
     maxCacheSize?: number;
+    /** Spatial Grid Hash 셀 크기 (픽셀 단위, 기본값: 200) */
+    spatialGridCellSize?: number;
     /** 외부에서 제어하는 선택된 항목 배열 */
     selectedItems: CanvasData<T>[];
     /** 외부에서 전달된 단일 선택 아이템 (selectedItems와 공존 불가) */
@@ -244,6 +256,8 @@ export interface CanvasMarkerLayerPropsWithEventWithTopStageWithoutSelection<T>
     cullingMargin?: number;
     /** Queue 캐시 최대 크기 (기본값: 30000) */
     maxCacheSize?: number;
+    /** Spatial Grid Hash 셀 크기 (픽셀 단위, 기본값: 200) */
+    spatialGridCellSize?: number;
     /** 외부에서 제어하는 선택된 항목 배열 */
     selectedItems?: never;
     /** 외부에서 전달된 단일 선택 아이템 */

package/dist/components/mint-map/core/advanced/CanvasPolygonLayer/CanvasPolygonLayer.js

@@ -36,7 +36,9 @@ var CanvasPolygonLayer = function (props) {
       externalSelectedItem = props.selectedItem,
       _c = props.disableInteraction,
       disableInteraction = _c === void 0 ? false : _c,
-      options = tslib.__rest(props, ["data", "enableMultiSelect", "cullingMargin", "onClick", "onOptimizationDataUpdate", "selectedItems", "selectedItem", "disableInteraction"]); // customStyle은 다른 방식과 함께 사용 가능
+      _d = props.spatialGridCellSize,
+      spatialGridCellSize = _d === void 0 ? performance.SPATIAL_GRID_CELL_SIZE : _d,
+      options = tslib.__rest(props, ["data", "enableMultiSelect", "cullingMargin", "onClick", "onOptimizationDataUpdate", "selectedItems", "selectedItem", "disableInteraction", "spatialGridCellSize"]); // customStyle은 다른 방식과 함께 사용 가능
 
 
   var hasCustomStyle = 'customStyle' in props && props.customStyle !== undefined;
@@ -88,7 +90,7 @@ var CanvasPolygonLayer = function (props) {
   } // 성능 최적화 Refs
 
 
-  var spatialIndexRef = React.useRef(new performance.SpatialHashGrid(performance.SPATIAL_GRID_CELL_SIZE));
+  var spatialIndexRef = React.useRef(new performance.SpatialHashGrid(spatialGridCellSize));
   var boundingBoxCacheRef = React.useRef(new Map());
   var viewportRef = React.useRef(null); // 폴리곤 좌표 변환 (위경도 → 화면 좌표, 공유 캐시 사용)
 
@@ -150,9 +152,18 @@ var CanvasPolygonLayer = function (props) {
 
   var buildSpatialIndex = function () {
     hooks.buildSpatialIndex(dataRef.current, spatialIndexRef.current, computeBoundingBox);
-  }; // 렌더링 유틸리티 객체
+  }; // spatialGridCellSize가 변경되면 SpatialHashGrid 재생성
 
 
+  React.useEffect(function () {
+    spatialIndexRef.current = new performance.SpatialHashGrid(spatialGridCellSize); // 인덱스 재구성 (데이터가 있을 때만)
+
+    if (dataRef.current.length > 0) {
+      buildSpatialIndex();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [spatialGridCellSize]); // 렌더링 유틸리티 객체
+
   var renderUtils = {
     getOrComputeMarkerOffset: function () {
       return null;
@@ -287,7 +298,7 @@ var CanvasPolygonLayer = function (props) {
   }; // 지도 이벤트 핸들러 생성
 
 
-  var _d = hooks.createMapEventHandlers({
+  var _e = hooks.createMapEventHandlers({
     accumTranslateRef: accumTranslateRef,
     boundingBoxCacheRef: boundingBoxCacheRef,
     clearCache: function () {
@@ -300,12 +311,12 @@ var CanvasPolygonLayer = function (props) {
     prevCenterOffsetRef: prevCenterOffsetRef,
     renderAllImmediate: renderAllImmediate
   }),
-      handleIdle = _d.handleIdle,
-      handleZoomStart = _d.handleZoomStart,
-      handleZoomEnd = _d.handleZoomEnd,
-      handleCenterChanged = _d.handleCenterChanged,
-      handleDragStartShared = _d.handleDragStart,
-      handleDragEndShared = _d.handleDragEnd;
+      handleIdle = _e.handleIdle,
+      handleZoomStart = _e.handleZoomStart,
+      handleZoomEnd = _e.handleZoomEnd,
+      handleCenterChanged = _e.handleCenterChanged,
+      handleDragStartShared = _e.handleDragStart,
+      handleDragEndShared = _e.handleDragEnd;
 
   var handleDragStart = function () {
     handleDragStartShared(); // 드래그 시작 시점의 hover 상태 저장

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

@@ -117,6 +117,8 @@ export interface CanvasPolygonLayerBaseProps<T> extends Pick<MarkerOptions, 'zIn
     cullingMargin?: number;
     /** Queue 캐시 최대 크기 (기본값: 30000) */
     maxCacheSize?: number;
+    /** Spatial Grid Hash 셀 크기 (픽셀 단위, 기본값: 200) */
+    spatialGridCellSize?: number;
     /** 외부에서 제어하는 선택된 항목 배열 */
     selectedItems?: CanvasData<T>[];
     /** 외부에서 전달된 단일 선택 아이템 */

package/dist/index.es.js

@@ -3985,10 +3985,12 @@ var CanvasMarkerLayer = function (props) {
       cullingMargin = _a === void 0 ? DEFAULT_CULLING_MARGIN : _a,
       onOptimizationDataUpdate = props.onOptimizationDataUpdate,
       renderBase = props.renderBase,
-      options = __rest(props, ["data", "cullingMargin", "onOptimizationDataUpdate", "renderBase"]); // renderEvent가 있는 경우에만 인터랙션 관련 props 추출
+      _b = props.spatialGridCellSize,
+      spatialGridCellSize = _b === void 0 ? SPATIAL_GRID_CELL_SIZE : _b,
+      options = __rest(props, ["data", "cullingMargin", "onOptimizationDataUpdate", "renderBase", "spatialGridCellSize"]); // renderEvent가 있는 경우에만 인터랙션 관련 props 추출
 
 
-  var _b = hasRenderEvent && 'renderEvent' in props ? props : {
+  var _c = hasRenderEvent && 'renderEvent' in props ? props : {
     disableInteraction: false,
     onClick: undefined,
     onMouseOut: undefined,
@@ -3998,15 +4000,15 @@ var CanvasMarkerLayer = function (props) {
     selectedItems: undefined,
     topStageZIndex: undefined
   },
-      _c = _b.disableInteraction,
-      disableInteraction = _c === void 0 ? false : _c,
-      onClick = _b.onClick,
-      onMouseOut = _b.onMouseOut,
-      onMouseOver = _b.onMouseOver,
-      renderEvent = _b.renderEvent,
-      externalSelectedItem = _b.selectedItem,
-      externalSelectedItems = _b.selectedItems,
-      rawTopStageZIndex = _b.topStageZIndex; // topStageZIndex가 있으면 hover 최상단 표시 활성화, 없으면 비활성화 (성능 우선)
+      _d = _c.disableInteraction,
+      disableInteraction = _d === void 0 ? false : _d,
+      onClick = _c.onClick,
+      onMouseOut = _c.onMouseOut,
+      onMouseOver = _c.onMouseOver,
+      renderEvent = _c.renderEvent,
+      externalSelectedItem = _c.selectedItem,
+      externalSelectedItems = _c.selectedItems,
+      rawTopStageZIndex = _c.topStageZIndex; // topStageZIndex가 있으면 hover 최상단 표시 활성화, 없으면 비활성화 (성능 우선)
 
 
   var topStageZIndex = rawTopStageZIndex;
@@ -4053,7 +4055,7 @@ var CanvasMarkerLayer = function (props) {
   } // 성능 최적화 Refs
 
 
-  var spatialIndexRef = useRef(new SpatialHashGrid(SPATIAL_GRID_CELL_SIZE));
+  var spatialIndexRef = useRef(new SpatialHashGrid(spatialGridCellSize));
   var boundingBoxCacheRef = useRef(new Map());
   var viewportRef = useRef(null); // 뷰포트 영역 계산 (Viewport Culling용)
 
@@ -4097,8 +4099,17 @@ var CanvasMarkerLayer = function (props) {
 
   var buildSpatialIndex$1 = function () {
     buildSpatialIndex(dataRef.current, spatialIndexRef.current, computeBoundingBox);
-  }; // 렌더링 유틸리티 객체
+  }; // spatialGridCellSize가 변경되면 SpatialHashGrid 재생성
+
+
+  useEffect(function () {
+    spatialIndexRef.current = new SpatialHashGrid(spatialGridCellSize); // 인덱스 재구성 (데이터가 있을 때만)
+
+    if (dataRef.current.length > 0) {
+      buildSpatialIndex$1();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
 
+  }, [spatialGridCellSize]); // 렌더링 유틸리티 객체
 
   var renderUtils = {
     getOrComputeMarkerOffset: getOrComputeMarkerOffset,
@@ -4304,7 +4315,7 @@ var CanvasMarkerLayer = function (props) {
   }; // 지도 이벤트 핸들러 생성
 
 
-  var _d = createMapEventHandlers({
+  var _e = createMapEventHandlers({
     accumTranslateRef: accumTranslateRef,
     boundingBoxCacheRef: boundingBoxCacheRef,
     clearCache: function () {
@@ -4317,12 +4328,12 @@ var CanvasMarkerLayer = function (props) {
     prevCenterOffsetRef: prevCenterOffsetRef,
     renderAllImmediate: renderAllImmediate
   }),
-      handleIdleShared = _d.handleIdle,
-      handleZoomStart = _d.handleZoomStart,
-      handleZoomEnd = _d.handleZoomEnd,
-      handleCenterChangedShared = _d.handleCenterChanged,
-      handleDragStartShared = _d.handleDragStart,
-      handleDragEndShared = _d.handleDragEnd; // handleIdle 래핑: topStage transform 제거 추가
+      handleIdleShared = _e.handleIdle,
+      handleZoomStart = _e.handleZoomStart,
+      handleZoomEnd = _e.handleZoomEnd,
+      handleCenterChangedShared = _e.handleCenterChanged,
+      handleDragStartShared = _e.handleDragStart,
+      handleDragEndShared = _e.handleDragEnd; // handleIdle 래핑: topStage transform 제거 추가
 
 
   var handleIdle = function () {
@@ -4368,8 +4379,9 @@ var CanvasMarkerLayer = function (props) {
 
 
   var findData = function (offset) {
-    // topStageZIndex가 설정되어 있으면 hover된 항목을 최우선으로 확인
-    if (topStageZIndex !== undefined && hoveredItemRef.current) {
+    // hover된 항목이 있으면 최우선으로 확인 (topOnHover 기능 지원)
+    // topStageZIndex가 없어도 hover된 항목이 다른 마커 위에 있어도 계속 hover 상태 유지
+    if (hoveredItemRef.current) {
       var hovered = hoveredItemRef.current;
 
       if (isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {
@@ -5989,7 +6001,9 @@ var CanvasPolygonLayer = function (props) {
       externalSelectedItem = props.selectedItem,
       _c = props.disableInteraction,
       disableInteraction = _c === void 0 ? false : _c,
-      options = __rest(props, ["data", "enableMultiSelect", "cullingMargin", "onClick", "onOptimizationDataUpdate", "selectedItems", "selectedItem", "disableInteraction"]); // customStyle은 다른 방식과 함께 사용 가능
+      _d = props.spatialGridCellSize,
+      spatialGridCellSize = _d === void 0 ? SPATIAL_GRID_CELL_SIZE : _d,
+      options = __rest(props, ["data", "enableMultiSelect", "cullingMargin", "onClick", "onOptimizationDataUpdate", "selectedItems", "selectedItem", "disableInteraction", "spatialGridCellSize"]); // customStyle은 다른 방식과 함께 사용 가능
 
 
   var hasCustomStyle = 'customStyle' in props && props.customStyle !== undefined;
@@ -6041,7 +6055,7 @@ var CanvasPolygonLayer = function (props) {
   } // 성능 최적화 Refs
 
 
-  var spatialIndexRef = useRef(new SpatialHashGrid(SPATIAL_GRID_CELL_SIZE));
+  var spatialIndexRef = useRef(new SpatialHashGrid(spatialGridCellSize));
   var boundingBoxCacheRef = useRef(new Map());
   var viewportRef = useRef(null); // 폴리곤 좌표 변환 (위경도 → 화면 좌표, 공유 캐시 사용)
 
@@ -6103,8 +6117,17 @@ var CanvasPolygonLayer = function (props) {
 
   var buildSpatialIndex$1 = function () {
     buildSpatialIndex(dataRef.current, spatialIndexRef.current, computeBoundingBox);
-  }; // 렌더링 유틸리티 객체
+  }; // spatialGridCellSize가 변경되면 SpatialHashGrid 재생성
+
+
+  useEffect(function () {
+    spatialIndexRef.current = new SpatialHashGrid(spatialGridCellSize); // 인덱스 재구성 (데이터가 있을 때만)
+
+    if (dataRef.current.length > 0) {
+      buildSpatialIndex$1();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
 
+  }, [spatialGridCellSize]); // 렌더링 유틸리티 객체
 
   var renderUtils = {
     getOrComputeMarkerOffset: function () {
@@ -6240,7 +6263,7 @@ var CanvasPolygonLayer = function (props) {
   }; // 지도 이벤트 핸들러 생성
 
 
-  var _d = createMapEventHandlers({
+  var _e = createMapEventHandlers({
     accumTranslateRef: accumTranslateRef,
     boundingBoxCacheRef: boundingBoxCacheRef,
     clearCache: function () {
@@ -6253,12 +6276,12 @@ var CanvasPolygonLayer = function (props) {
     prevCenterOffsetRef: prevCenterOffsetRef,
     renderAllImmediate: renderAllImmediate
   }),
-      handleIdle = _d.handleIdle,
-      handleZoomStart = _d.handleZoomStart,
-      handleZoomEnd = _d.handleZoomEnd,
-      handleCenterChanged = _d.handleCenterChanged,
-      handleDragStartShared = _d.handleDragStart,
-      handleDragEndShared = _d.handleDragEnd;
+      handleIdle = _e.handleIdle,
+      handleZoomStart = _e.handleZoomStart,
+      handleZoomEnd = _e.handleZoomEnd,
+      handleCenterChanged = _e.handleCenterChanged,
+      handleDragStartShared = _e.handleDragStart,
+      handleDragEndShared = _e.handleDragEnd;
 
   var handleDragStart = function () {
     handleDragStartShared(); // 드래그 시작 시점의 hover 상태 저장

package/dist/index.umd.js

@@ -3989,10 +3989,12 @@
         cullingMargin = _a === void 0 ? DEFAULT_CULLING_MARGIN : _a,
         onOptimizationDataUpdate = props.onOptimizationDataUpdate,
         renderBase = props.renderBase,
-        options = tslib.__rest(props, ["data", "cullingMargin", "onOptimizationDataUpdate", "renderBase"]); // renderEvent가 있는 경우에만 인터랙션 관련 props 추출
+        _b = props.spatialGridCellSize,
+        spatialGridCellSize = _b === void 0 ? SPATIAL_GRID_CELL_SIZE : _b,
+        options = tslib.__rest(props, ["data", "cullingMargin", "onOptimizationDataUpdate", "renderBase", "spatialGridCellSize"]); // renderEvent가 있는 경우에만 인터랙션 관련 props 추출
 
 
-    var _b = hasRenderEvent && 'renderEvent' in props ? props : {
+    var _c = hasRenderEvent && 'renderEvent' in props ? props : {
       disableInteraction: false,
       onClick: undefined,
       onMouseOut: undefined,
@@ -4002,15 +4004,15 @@
       selectedItems: undefined,
       topStageZIndex: undefined
     },
-        _c = _b.disableInteraction,
-        disableInteraction = _c === void 0 ? false : _c,
-        onClick = _b.onClick,
-        onMouseOut = _b.onMouseOut,
-        onMouseOver = _b.onMouseOver,
-        renderEvent = _b.renderEvent,
-        externalSelectedItem = _b.selectedItem,
-        externalSelectedItems = _b.selectedItems,
-        rawTopStageZIndex = _b.topStageZIndex; // topStageZIndex가 있으면 hover 최상단 표시 활성화, 없으면 비활성화 (성능 우선)
+        _d = _c.disableInteraction,
+        disableInteraction = _d === void 0 ? false : _d,
+        onClick = _c.onClick,
+        onMouseOut = _c.onMouseOut,
+        onMouseOver = _c.onMouseOver,
+        renderEvent = _c.renderEvent,
+        externalSelectedItem = _c.selectedItem,
+        externalSelectedItems = _c.selectedItems,
+        rawTopStageZIndex = _c.topStageZIndex; // topStageZIndex가 있으면 hover 최상단 표시 활성화, 없으면 비활성화 (성능 우선)
 
 
     var topStageZIndex = rawTopStageZIndex;
@@ -4057,7 +4059,7 @@
     } // 성능 최적화 Refs
 
 
-    var spatialIndexRef = React.useRef(new SpatialHashGrid(SPATIAL_GRID_CELL_SIZE));
+    var spatialIndexRef = React.useRef(new SpatialHashGrid(spatialGridCellSize));
     var boundingBoxCacheRef = React.useRef(new Map());
     var viewportRef = React.useRef(null); // 뷰포트 영역 계산 (Viewport Culling용)
 
@@ -4101,8 +4103,17 @@
 
     var buildSpatialIndex$1 = function () {
       buildSpatialIndex(dataRef.current, spatialIndexRef.current, computeBoundingBox);
-    }; // 렌더링 유틸리티 객체
+    }; // spatialGridCellSize가 변경되면 SpatialHashGrid 재생성
+
+
+    React.useEffect(function () {
+      spatialIndexRef.current = new SpatialHashGrid(spatialGridCellSize); // 인덱스 재구성 (데이터가 있을 때만)
+
+      if (dataRef.current.length > 0) {
+        buildSpatialIndex$1();
+      } // eslint-disable-next-line react-hooks/exhaustive-deps
 
+    }, [spatialGridCellSize]); // 렌더링 유틸리티 객체
 
     var renderUtils = {
       getOrComputeMarkerOffset: getOrComputeMarkerOffset,
@@ -4308,7 +4319,7 @@
     }; // 지도 이벤트 핸들러 생성
 
 
-    var _d = createMapEventHandlers({
+    var _e = createMapEventHandlers({
       accumTranslateRef: accumTranslateRef,
       boundingBoxCacheRef: boundingBoxCacheRef,
       clearCache: function () {
@@ -4321,12 +4332,12 @@
       prevCenterOffsetRef: prevCenterOffsetRef,
       renderAllImmediate: renderAllImmediate
     }),
-        handleIdleShared = _d.handleIdle,
-        handleZoomStart = _d.handleZoomStart,
-        handleZoomEnd = _d.handleZoomEnd,
-        handleCenterChangedShared = _d.handleCenterChanged,
-        handleDragStartShared = _d.handleDragStart,
-        handleDragEndShared = _d.handleDragEnd; // handleIdle 래핑: topStage transform 제거 추가
+        handleIdleShared = _e.handleIdle,
+        handleZoomStart = _e.handleZoomStart,
+        handleZoomEnd = _e.handleZoomEnd,
+        handleCenterChangedShared = _e.handleCenterChanged,
+        handleDragStartShared = _e.handleDragStart,
+        handleDragEndShared = _e.handleDragEnd; // handleIdle 래핑: topStage transform 제거 추가
 
 
     var handleIdle = function () {
@@ -4372,8 +4383,9 @@
 
 
     var findData = function (offset) {
-      // topStageZIndex가 설정되어 있으면 hover된 항목을 최우선으로 확인
-      if (topStageZIndex !== undefined && hoveredItemRef.current) {
+      // hover된 항목이 있으면 최우선으로 확인 (topOnHover 기능 지원)
+      // topStageZIndex가 없어도 hover된 항목이 다른 마커 위에 있어도 계속 hover 상태 유지
+      if (hoveredItemRef.current) {
         var hovered = hoveredItemRef.current;
 
         if (isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {
@@ -5993,7 +6005,9 @@
         externalSelectedItem = props.selectedItem,
         _c = props.disableInteraction,
         disableInteraction = _c === void 0 ? false : _c,
-        options = tslib.__rest(props, ["data", "enableMultiSelect", "cullingMargin", "onClick", "onOptimizationDataUpdate", "selectedItems", "selectedItem", "disableInteraction"]); // customStyle은 다른 방식과 함께 사용 가능
+        _d = props.spatialGridCellSize,
+        spatialGridCellSize = _d === void 0 ? SPATIAL_GRID_CELL_SIZE : _d,
+        options = tslib.__rest(props, ["data", "enableMultiSelect", "cullingMargin", "onClick", "onOptimizationDataUpdate", "selectedItems", "selectedItem", "disableInteraction", "spatialGridCellSize"]); // customStyle은 다른 방식과 함께 사용 가능
 
 
     var hasCustomStyle = 'customStyle' in props && props.customStyle !== undefined;
@@ -6045,7 +6059,7 @@
     } // 성능 최적화 Refs
 
 
-    var spatialIndexRef = React.useRef(new SpatialHashGrid(SPATIAL_GRID_CELL_SIZE));
+    var spatialIndexRef = React.useRef(new SpatialHashGrid(spatialGridCellSize));
     var boundingBoxCacheRef = React.useRef(new Map());
     var viewportRef = React.useRef(null); // 폴리곤 좌표 변환 (위경도 → 화면 좌표, 공유 캐시 사용)
 
@@ -6107,8 +6121,17 @@
 
     var buildSpatialIndex$1 = function () {
       buildSpatialIndex(dataRef.current, spatialIndexRef.current, computeBoundingBox);
-    }; // 렌더링 유틸리티 객체
+    }; // spatialGridCellSize가 변경되면 SpatialHashGrid 재생성
+
+
+    React.useEffect(function () {
+      spatialIndexRef.current = new SpatialHashGrid(spatialGridCellSize); // 인덱스 재구성 (데이터가 있을 때만)
+
+      if (dataRef.current.length > 0) {
+        buildSpatialIndex$1();
+      } // eslint-disable-next-line react-hooks/exhaustive-deps
 
+    }, [spatialGridCellSize]); // 렌더링 유틸리티 객체
 
     var renderUtils = {
       getOrComputeMarkerOffset: function () {
@@ -6244,7 +6267,7 @@
     }; // 지도 이벤트 핸들러 생성
 
 
-    var _d = createMapEventHandlers({
+    var _e = createMapEventHandlers({
       accumTranslateRef: accumTranslateRef,
       boundingBoxCacheRef: boundingBoxCacheRef,
       clearCache: function () {
@@ -6257,12 +6280,12 @@
       prevCenterOffsetRef: prevCenterOffsetRef,
       renderAllImmediate: renderAllImmediate
     }),
-        handleIdle = _d.handleIdle,
-        handleZoomStart = _d.handleZoomStart,
-        handleZoomEnd = _d.handleZoomEnd,
-        handleCenterChanged = _d.handleCenterChanged,
-        handleDragStartShared = _d.handleDragStart,
-        handleDragEndShared = _d.handleDragEnd;
+        handleIdle = _e.handleIdle,
+        handleZoomStart = _e.handleZoomStart,
+        handleZoomEnd = _e.handleZoomEnd,
+        handleCenterChanged = _e.handleCenterChanged,
+        handleDragStartShared = _e.handleDragStart,
+        handleDragEndShared = _e.handleDragEnd;
 
     var handleDragStart = function () {
       handleDragStartShared(); // 드래그 시작 시점의 hover 상태 저장

package/package.json

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