@mint-ui/map 1.2.0 → 1.2.1

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/renderer.js

@@ -149,14 +149,14 @@ var drawPolygon = function (_a) {
 var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth) {
   return function (_a) {
     var ctx = _a.ctx,
-        items = _a.items,
-        selectedIds = _a.selectedIds,
-        utils = _a.utils;
+        items = _a.items;
+        _a.selectedIds;
+        var utils = _a.utils;
 
     for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
       var item = items_1[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
-
-      if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+      // if (selectedIds.has(item.id)) continue;
+      // paths가 없으면 스킵
 
       if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
 
@@ -326,14 +326,14 @@ var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth
 var renderPolygonBaseWithObject = function (renderStyle) {
   return function (_a) {
     var ctx = _a.ctx,
-        items = _a.items,
-        selectedIds = _a.selectedIds,
-        utils = _a.utils;
+        items = _a.items;
+        _a.selectedIds;
+        var utils = _a.utils;
 
     for (var _i = 0, items_2 = items; _i < items_2.length; _i++) {
       var item = items_2[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
-
-      if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+      // if (selectedIds.has(item.id)) continue;
+      // paths가 없으면 스킵
 
       if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
 
@@ -489,14 +489,14 @@ var renderPolygonEventWithObject = function (renderStyle) {
 var renderPolygonBaseWithCustomStyle = function (customStyle) {
   return function (_a) {
     var ctx = _a.ctx,
-        items = _a.items,
-        selectedIds = _a.selectedIds,
-        utils = _a.utils;
+        items = _a.items;
+        _a.selectedIds;
+        var utils = _a.utils;
 
     for (var _i = 0, items_3 = items; _i < items_3.length; _i++) {
       var item = items_3[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
-
-      if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+      // if (selectedIds.has(item.id)) continue;
+      // paths가 없으면 스킵
 
       if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
 
@@ -665,14 +665,14 @@ var renderPolygonEventWithCustomStyle = function (customStyle) {
 var renderPolygonBaseWithHybrid = function (customStyle, baseFillColor, baseStrokeColor, baseLineWidth) {
   return function (_a) {
     var ctx = _a.ctx,
-        items = _a.items,
-        selectedIds = _a.selectedIds,
-        utils = _a.utils;
+        items = _a.items;
+        _a.selectedIds;
+        var utils = _a.utils;
 
     for (var _i = 0, items_4 = items; _i < items_4.length; _i++) {
       var item = items_4[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
-
-      if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+      // if (selectedIds.has(item.id)) continue;
+      // paths가 없으면 스킵
 
       if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
 
@@ -898,14 +898,14 @@ var renderPolygonEventWithHybrid = function (customStyle, baseFillColor, baseStr
 var renderPolygonBaseWithHybridObject = function (customStyle, renderStyle) {
   return function (_a) {
     var ctx = _a.ctx,
-        items = _a.items,
-        selectedIds = _a.selectedIds,
-        utils = _a.utils;
+        items = _a.items;
+        _a.selectedIds;
+        var utils = _a.utils;
 
     for (var _i = 0, items_5 = items; _i < items_5.length; _i++) {
       var item = items_5[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
-
-      if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+      // if (selectedIds.has(item.id)) continue;
+      // paths가 없으면 스킵
 
       if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
 

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)) {
@@ -5048,14 +5060,14 @@ var drawPolygon = function (_a) {
 var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth) {
   return function (_a) {
     var ctx = _a.ctx,
-        items = _a.items,
-        selectedIds = _a.selectedIds,
-        utils = _a.utils;
+        items = _a.items;
+        _a.selectedIds;
+        var utils = _a.utils;
 
     for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
       var item = items_1[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
-
-      if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+      // if (selectedIds.has(item.id)) continue;
+      // paths가 없으면 스킵
 
       if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
 
@@ -5225,14 +5237,14 @@ var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth
 var renderPolygonBaseWithObject = function (renderStyle) {
   return function (_a) {
     var ctx = _a.ctx,
-        items = _a.items,
-        selectedIds = _a.selectedIds,
-        utils = _a.utils;
+        items = _a.items;
+        _a.selectedIds;
+        var utils = _a.utils;
 
     for (var _i = 0, items_2 = items; _i < items_2.length; _i++) {
       var item = items_2[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
-
-      if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+      // if (selectedIds.has(item.id)) continue;
+      // paths가 없으면 스킵
 
       if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
 
@@ -5388,14 +5400,14 @@ var renderPolygonEventWithObject = function (renderStyle) {
 var renderPolygonBaseWithCustomStyle = function (customStyle) {
   return function (_a) {
     var ctx = _a.ctx,
-        items = _a.items,
-        selectedIds = _a.selectedIds,
-        utils = _a.utils;
+        items = _a.items;
+        _a.selectedIds;
+        var utils = _a.utils;
 
     for (var _i = 0, items_3 = items; _i < items_3.length; _i++) {
       var item = items_3[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
-
-      if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+      // if (selectedIds.has(item.id)) continue;
+      // paths가 없으면 스킵
 
       if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
 
@@ -5564,14 +5576,14 @@ var renderPolygonEventWithCustomStyle = function (customStyle) {
 var renderPolygonBaseWithHybrid = function (customStyle, baseFillColor, baseStrokeColor, baseLineWidth) {
   return function (_a) {
     var ctx = _a.ctx,
-        items = _a.items,
-        selectedIds = _a.selectedIds,
-        utils = _a.utils;
+        items = _a.items;
+        _a.selectedIds;
+        var utils = _a.utils;
 
     for (var _i = 0, items_4 = items; _i < items_4.length; _i++) {
       var item = items_4[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
-
-      if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+      // if (selectedIds.has(item.id)) continue;
+      // paths가 없으면 스킵
 
       if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
 
@@ -5797,14 +5809,14 @@ var renderPolygonEventWithHybrid = function (customStyle, baseFillColor, baseStr
 var renderPolygonBaseWithHybridObject = function (customStyle, renderStyle) {
   return function (_a) {
     var ctx = _a.ctx,
-        items = _a.items,
-        selectedIds = _a.selectedIds,
-        utils = _a.utils;
+        items = _a.items;
+        _a.selectedIds;
+        var utils = _a.utils;
 
     for (var _i = 0, items_5 = items; _i < items_5.length; _i++) {
       var item = items_5[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
-
-      if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+      // if (selectedIds.has(item.id)) continue;
+      // paths가 없으면 스킵
 
       if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
 
@@ -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)) {
@@ -5052,14 +5064,14 @@
   var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth) {
     return function (_a) {
       var ctx = _a.ctx,
-          items = _a.items,
-          selectedIds = _a.selectedIds,
-          utils = _a.utils;
+          items = _a.items;
+          _a.selectedIds;
+          var utils = _a.utils;
 
       for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
         var item = items_1[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
-
-        if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+        // if (selectedIds.has(item.id)) continue;
+        // paths가 없으면 스킵
 
         if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
 
@@ -5229,14 +5241,14 @@
   var renderPolygonBaseWithObject = function (renderStyle) {
     return function (_a) {
       var ctx = _a.ctx,
-          items = _a.items,
-          selectedIds = _a.selectedIds,
-          utils = _a.utils;
+          items = _a.items;
+          _a.selectedIds;
+          var utils = _a.utils;
 
       for (var _i = 0, items_2 = items; _i < items_2.length; _i++) {
         var item = items_2[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
-
-        if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+        // if (selectedIds.has(item.id)) continue;
+        // paths가 없으면 스킵
 
         if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
 
@@ -5392,14 +5404,14 @@
   var renderPolygonBaseWithCustomStyle = function (customStyle) {
     return function (_a) {
       var ctx = _a.ctx,
-          items = _a.items,
-          selectedIds = _a.selectedIds,
-          utils = _a.utils;
+          items = _a.items;
+          _a.selectedIds;
+          var utils = _a.utils;
 
       for (var _i = 0, items_3 = items; _i < items_3.length; _i++) {
         var item = items_3[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
-
-        if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+        // if (selectedIds.has(item.id)) continue;
+        // paths가 없으면 스킵
 
         if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
 
@@ -5568,14 +5580,14 @@
   var renderPolygonBaseWithHybrid = function (customStyle, baseFillColor, baseStrokeColor, baseLineWidth) {
     return function (_a) {
       var ctx = _a.ctx,
-          items = _a.items,
-          selectedIds = _a.selectedIds,
-          utils = _a.utils;
+          items = _a.items;
+          _a.selectedIds;
+          var utils = _a.utils;
 
       for (var _i = 0, items_4 = items; _i < items_4.length; _i++) {
         var item = items_4[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
-
-        if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+        // if (selectedIds.has(item.id)) continue;
+        // paths가 없으면 스킵
 
         if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
 
@@ -5801,14 +5813,14 @@
   var renderPolygonBaseWithHybridObject = function (customStyle, renderStyle) {
     return function (_a) {
       var ctx = _a.ctx,
-          items = _a.items,
-          selectedIds = _a.selectedIds,
-          utils = _a.utils;
+          items = _a.items;
+          _a.selectedIds;
+          var utils = _a.utils;
 
       for (var _i = 0, items_5 = items; _i < items_5.length; _i++) {
         var item = items_5[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
-
-        if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+        // if (selectedIds.has(item.id)) continue;
+        // paths가 없으면 스킵
 
         if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
 
@@ -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.1",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "browser": "./dist/index.umd.js",