@mint-ui/map 1.2.0-test.17 → 1.2.0-test.19

package/dist/components/mint-map/core/advanced/woongCanvas/WoongCanvasLayer.js

@@ -71,7 +71,7 @@ var WoongCanvasLayer = function (props) {
 
   /** data prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
 
-  var markersRef = React.useRef(data); // --------------------------------------------------------------------------
+  var dataRef = React.useRef(data); // --------------------------------------------------------------------------
   // State Refs - 선택 및 Hover 상태 관리
   // --------------------------------------------------------------------------
 
@@ -222,6 +222,10 @@ var WoongCanvasLayer = function (props) {
   /**
    * 아이템의 바운딩 박스 계산 (폴리곤/마커 공통)
    *
+   * 🎯 마커의 경우:
+   * - boxHeight: 본체만 (Hit Test 영역)
+   * - tailHeight: 꼬리 높이 (Viewport Culling용, 화면에 보이는 전체 영역)
+   *
    * @param item 마커 또는 폴리곤 데이터
    * @returns 바운딩 박스 또는 null
    */
@@ -262,14 +266,16 @@ var WoongCanvasLayer = function (props) {
         maxY: maxY
       };
     } else {
-      // 마커: 중심점 기준 박스 크기 계산
+      // 마커: 중심점 기준 박스 크기 계산 (꼬리 포함)
       var offset = getOrComputeMarkerOffset(item);
       if (!offset) return null;
       var boxWidth = item.boxWidth || 50;
       var boxHeight = item.boxHeight || 28;
+      var tailHeight = item.tailHeight || 0; // 🎯 tailHeight 사용 (Viewport Culling용)
+
       return {
         minX: offset.x - boxWidth / 2,
-        minY: offset.y - boxHeight - 6,
+        minY: offset.y - boxHeight - tailHeight,
         maxX: offset.x + boxWidth / 2,
         maxY: offset.y
       };
@@ -286,10 +292,10 @@ var WoongCanvasLayer = function (props) {
   var buildSpatialIndex = function () {
     var spatial = spatialIndexRef.current;
     spatial.clear();
-    var currentMarkers = markersRef.current;
+    var currentData = dataRef.current;
 
-    for (var _i = 0, currentMarkers_1 = currentMarkers; _i < currentMarkers_1.length; _i++) {
-      var item = currentMarkers_1[_i]; // 바운딩 박스 계산 (공통 함수 사용)
+    for (var _i = 0, currentData_1 = currentData; _i < currentData_1.length; _i++) {
+      var item = currentData_1[_i]; // 바운딩 박스 계산 (공통 함수 사용)
 
       var bbox = computeBoundingBox(item);
 
@@ -332,6 +338,10 @@ var WoongCanvasLayer = function (props) {
    * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
    * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
    * 3. 클로저로 최신 데이터 참조
+   *
+   * 🎯 topOnHover 지원:
+   * - renderEvent가 없을 때 Base Layer에서 hover 처리 (fallback)
+   * - renderEvent가 있으면 Event Layer에서 처리 (성능 최적화)
    */
 
   var doRenderBase = function () {
@@ -346,17 +356,40 @@ var WoongCanvasLayer = function (props) {
       shape = new Konva__default["default"].Shape({
         name: 'base-render-shape',
         sceneFunc: function (context, shape) {
-          var ctx = context; // 클로저로 최신 ref 값 참조
+          var ctx = context;
+          var hovered = hoveredItemRef.current; // 클로저로 최신 ref 값 참조
 
-          var visibleMarkers = enableViewportCulling ? markersRef.current.filter(function (item) {
+          var visibleItems = enableViewportCulling ? dataRef.current.filter(function (item) {
             return isInViewport(item);
-          }) : markersRef.current;
+          }) : dataRef.current; // topOnHover가 true이고 renderEvent가 없으면 Base Layer에서 hover 처리
+
+          if (topOnHover && !renderEvent && hovered) {
+            // hover된 항목 제외하고 렌더링
+            visibleItems = visibleItems.filter(function (item) {
+              return item.id !== hovered.id;
+            });
+          } // 일반 항목 렌더링
+
+
           renderBase({
             ctx: ctx,
-            items: visibleMarkers,
+            items: visibleItems,
             selectedIds: selectedIdsRef.current,
             utils: renderUtils
-          });
+          }); // hover된 항목을 최상단에 렌더링 (renderEvent가 없을 때만)
+
+          if (topOnHover && !renderEvent && hovered) {
+            var isHoveredInViewport = enableViewportCulling ? isInViewport(hovered) : true;
+
+            if (isHoveredInViewport) {
+              renderBase({
+                ctx: ctx,
+                items: [hovered],
+                selectedIds: selectedIdsRef.current,
+                utils: renderUtils
+              });
+            }
+          }
         },
         perfectDrawEnabled: false,
         listening: false,
@@ -384,7 +417,7 @@ var WoongCanvasLayer = function (props) {
     renderAnimation({
       layer: layer,
       selectedIds: selectedIdsRef.current,
-      items: markersRef.current,
+      items: dataRef.current,
       utils: renderUtils
     });
   };
@@ -589,12 +622,15 @@ var WoongCanvasLayer = function (props) {
     return null;
   };
   /**
-   * Hover 상태 설정 및 Event 레이어 렌더링
+   * Hover 상태 설정 및 레이어 렌더링
    *
    * @param data hover된 마커/폴리곤 데이터 또는 null
    *
    * 최적화: RAF 제거하여 즉시 렌더링 (16ms 지연 제거)
-   * topOnHover가 true일 때는 Base 레이어도 다시 그려서 z-order 변경
+   *
+   * 🎯 topOnHover 지원:
+   * - renderEvent가 있으면: Event Layer에서만 처리 (성능 최적화)
+   * - renderEvent가 없고 topOnHover=true면: Base Layer에서 처리
    */
 
 
@@ -606,10 +642,15 @@ var WoongCanvasLayer = function (props) {
     } else {
       controller.setMapCursor(data ? 'pointer' : 'grab');
     } // 즉시 렌더링 (RAF 없이)
-    // topOnHover는 Event Layer에서만 처리 (Base Layer 재렌더링 제거로 성능 향상)
 
 
-    doRenderEvent();
+    if (renderEvent) {
+      // renderEvent가 있으면 Event Layer에서만 처리 (성능 최적화)
+      doRenderEvent();
+    } else if (topOnHover) {
+      // renderEvent가 없고 topOnHover가 true면 Base Layer에서 처리
+      doRenderBase();
+    }
   };
   /**
    * 클릭 처리 (단일/다중 선택)
@@ -965,9 +1006,9 @@ var WoongCanvasLayer = function (props) {
   // --------------------------------------------------------------------------
 
   React.useEffect(function () {
-    if (!stageRef.current) return; // markersRef 동기화
+    if (!stageRef.current) return; // dataRef 동기화
 
-    markersRef.current = data; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
+    dataRef.current = data; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
 
     if (containerRef.current) {
       containerRef.current.style.transform = '';
@@ -995,13 +1036,13 @@ var WoongCanvasLayer = function (props) {
      * - O(전체 데이터 수 + 선택된 개수) - 매우 효율적
      */
 
-    var markersMap = new Map(data.map(function (m) {
+    var dataMap = new Map(data.map(function (m) {
       return [m.id, m];
     }));
     var newSelectedItemsMap = new Map();
     selectedIdsRef.current.forEach(function (id) {
-      // 현재 markers에 있으면 최신 데이터 사용
-      var currentItem = markersMap.get(id);
+      // 현재 data에 있으면 최신 데이터 사용
+      var currentItem = dataMap.get(id);
 
       if (currentItem) {
         newSelectedItemsMap.set(id, currentItem);
@@ -1013,7 +1054,7 @@ var WoongCanvasLayer = function (props) {
           newSelectedItemsMap.set(id, prevItem);
         }
       }
-    }); // selectedIdsRef는 그대로 유지 (화면 밖 마커도 선택 상태 유지)
+    }); // selectedIdsRef는 그대로 유지 (화면 밖 항목도 선택 상태 유지)
 
     selectedItemsMapRef.current = newSelectedItemsMap; // 즉시 렌더링
 

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

@@ -27,6 +27,7 @@ export interface KonvaCanvasOption {
     position: Position;
     boxWidth?: number;
     boxHeight?: number;
+    tailHeight?: number;
     paths?: Paths;
     isDonutPolygon?: boolean;
 }

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

@@ -26,7 +26,12 @@ export declare const isPointInPolygon: (point: Offset, polygon: number[][]) => b
  */
 export declare const isPointInPolygonData: (clickedOffset: Offset, polygonData: KonvaCanvasData<any>, getPolygonOffsets: (data: KonvaCanvasData<any>) => number[][][][] | null) => boolean;
 /**
- * 마커 히트 테스트
+ * 마커 히트 테스트 (클릭/hover 영역 체크)
+ *
+ * 🎯 중요: 꼬리(tail)는 Hit Test 영역에서 제외됩니다!
+ * - markerOffset.y는 마커 최하단(꼬리 끝) 좌표
+ * - boxHeight는 마커 본체만 포함 (꼬리 제외)
+ * - tailHeight만큼 위로 올려서 본체만 Hit Test 영역으로 사용
  */
 export declare const isPointInMarkerData: (clickedOffset: Offset, markerData: KonvaCanvasData<any>, getMarkerOffset: (data: KonvaCanvasData<any>) => Offset | null) => boolean;
 export declare const hexToRgba: (hexColor: string, alpha?: number) => string;

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

@@ -143,7 +143,12 @@ var isPointInPolygonData = function (clickedOffset, polygonData, getPolygonOffse
   return false;
 };
 /**
- * 마커 히트 테스트
+ * 마커 히트 테스트 (클릭/hover 영역 체크)
+ *
+ * 🎯 중요: 꼬리(tail)는 Hit Test 영역에서 제외됩니다!
+ * - markerOffset.y는 마커 최하단(꼬리 끝) 좌표
+ * - boxHeight는 마커 본체만 포함 (꼬리 제외)
+ * - tailHeight만큼 위로 올려서 본체만 Hit Test 영역으로 사용
  */
 
 var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset) {
@@ -151,9 +156,11 @@ var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset)
   if (!markerOffset) return false;
   var boxWidth = markerData.boxWidth || 50;
   var boxHeight = markerData.boxHeight || 28;
-  var tailHeight = 6;
+  var tailHeight = markerData.tailHeight || 0; // 🎯 tailHeight 사용!
+
   var x = markerOffset.x - boxWidth / 2;
-  var y = markerOffset.y - boxHeight - tailHeight;
+  var y = markerOffset.y - boxHeight - tailHeight; // 🔥 꼬리만큼 위로!
+
   return clickedOffset.x >= x && clickedOffset.x <= x + boxWidth && clickedOffset.y >= y && clickedOffset.y <= y + boxHeight;
 };
 var hexToRgba = function (hexColor, alpha) {

package/dist/index.es.js

@@ -931,7 +931,12 @@ var isPointInPolygonData = function (clickedOffset, polygonData, getPolygonOffse
   return false;
 };
 /**
- * 마커 히트 테스트
+ * 마커 히트 테스트 (클릭/hover 영역 체크)
+ *
+ * 🎯 중요: 꼬리(tail)는 Hit Test 영역에서 제외됩니다!
+ * - markerOffset.y는 마커 최하단(꼬리 끝) 좌표
+ * - boxHeight는 마커 본체만 포함 (꼬리 제외)
+ * - tailHeight만큼 위로 올려서 본체만 Hit Test 영역으로 사용
  */
 
 var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset) {
@@ -939,9 +944,11 @@ var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset)
   if (!markerOffset) return false;
   var boxWidth = markerData.boxWidth || 50;
   var boxHeight = markerData.boxHeight || 28;
-  var tailHeight = 6;
+  var tailHeight = markerData.tailHeight || 0; // 🎯 tailHeight 사용!
+
   var x = markerOffset.x - boxWidth / 2;
-  var y = markerOffset.y - boxHeight - tailHeight;
+  var y = markerOffset.y - boxHeight - tailHeight; // 🔥 꼬리만큼 위로!
+
   return clickedOffset.x >= x && clickedOffset.x <= x + boxWidth && clickedOffset.y >= y && clickedOffset.y <= y + boxHeight;
 };
 var hexToRgba = function (hexColor, alpha) {
@@ -5691,7 +5698,7 @@ var WoongCanvasLayer = function (props) {
 
   /** data prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
 
-  var markersRef = useRef(data); // --------------------------------------------------------------------------
+  var dataRef = useRef(data); // --------------------------------------------------------------------------
   // State Refs - 선택 및 Hover 상태 관리
   // --------------------------------------------------------------------------
 
@@ -5842,6 +5849,10 @@ var WoongCanvasLayer = function (props) {
   /**
    * 아이템의 바운딩 박스 계산 (폴리곤/마커 공통)
    *
+   * 🎯 마커의 경우:
+   * - boxHeight: 본체만 (Hit Test 영역)
+   * - tailHeight: 꼬리 높이 (Viewport Culling용, 화면에 보이는 전체 영역)
+   *
    * @param item 마커 또는 폴리곤 데이터
    * @returns 바운딩 박스 또는 null
    */
@@ -5882,14 +5893,16 @@ var WoongCanvasLayer = function (props) {
         maxY: maxY
       };
     } else {
-      // 마커: 중심점 기준 박스 크기 계산
+      // 마커: 중심점 기준 박스 크기 계산 (꼬리 포함)
       var offset = getOrComputeMarkerOffset(item);
       if (!offset) return null;
       var boxWidth = item.boxWidth || 50;
       var boxHeight = item.boxHeight || 28;
+      var tailHeight = item.tailHeight || 0; // 🎯 tailHeight 사용 (Viewport Culling용)
+
       return {
         minX: offset.x - boxWidth / 2,
-        minY: offset.y - boxHeight - 6,
+        minY: offset.y - boxHeight - tailHeight,
         maxX: offset.x + boxWidth / 2,
         maxY: offset.y
       };
@@ -5906,10 +5919,10 @@ var WoongCanvasLayer = function (props) {
   var buildSpatialIndex = function () {
     var spatial = spatialIndexRef.current;
     spatial.clear();
-    var currentMarkers = markersRef.current;
+    var currentData = dataRef.current;
 
-    for (var _i = 0, currentMarkers_1 = currentMarkers; _i < currentMarkers_1.length; _i++) {
-      var item = currentMarkers_1[_i]; // 바운딩 박스 계산 (공통 함수 사용)
+    for (var _i = 0, currentData_1 = currentData; _i < currentData_1.length; _i++) {
+      var item = currentData_1[_i]; // 바운딩 박스 계산 (공통 함수 사용)
 
       var bbox = computeBoundingBox(item);
 
@@ -5952,6 +5965,10 @@ var WoongCanvasLayer = function (props) {
    * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
    * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
    * 3. 클로저로 최신 데이터 참조
+   *
+   * 🎯 topOnHover 지원:
+   * - renderEvent가 없을 때 Base Layer에서 hover 처리 (fallback)
+   * - renderEvent가 있으면 Event Layer에서 처리 (성능 최적화)
    */
 
   var doRenderBase = function () {
@@ -5966,17 +5983,40 @@ var WoongCanvasLayer = function (props) {
       shape = new Konva.Shape({
         name: 'base-render-shape',
         sceneFunc: function (context, shape) {
-          var ctx = context; // 클로저로 최신 ref 값 참조
+          var ctx = context;
+          var hovered = hoveredItemRef.current; // 클로저로 최신 ref 값 참조
 
-          var visibleMarkers = enableViewportCulling ? markersRef.current.filter(function (item) {
+          var visibleItems = enableViewportCulling ? dataRef.current.filter(function (item) {
             return isInViewport(item);
-          }) : markersRef.current;
+          }) : dataRef.current; // topOnHover가 true이고 renderEvent가 없으면 Base Layer에서 hover 처리
+
+          if (topOnHover && !renderEvent && hovered) {
+            // hover된 항목 제외하고 렌더링
+            visibleItems = visibleItems.filter(function (item) {
+              return item.id !== hovered.id;
+            });
+          } // 일반 항목 렌더링
+
+
           renderBase({
             ctx: ctx,
-            items: visibleMarkers,
+            items: visibleItems,
             selectedIds: selectedIdsRef.current,
             utils: renderUtils
-          });
+          }); // hover된 항목을 최상단에 렌더링 (renderEvent가 없을 때만)
+
+          if (topOnHover && !renderEvent && hovered) {
+            var isHoveredInViewport = enableViewportCulling ? isInViewport(hovered) : true;
+
+            if (isHoveredInViewport) {
+              renderBase({
+                ctx: ctx,
+                items: [hovered],
+                selectedIds: selectedIdsRef.current,
+                utils: renderUtils
+              });
+            }
+          }
         },
         perfectDrawEnabled: false,
         listening: false,
@@ -6004,7 +6044,7 @@ var WoongCanvasLayer = function (props) {
     renderAnimation({
       layer: layer,
       selectedIds: selectedIdsRef.current,
-      items: markersRef.current,
+      items: dataRef.current,
       utils: renderUtils
     });
   };
@@ -6209,12 +6249,15 @@ var WoongCanvasLayer = function (props) {
     return null;
   };
   /**
-   * Hover 상태 설정 및 Event 레이어 렌더링
+   * Hover 상태 설정 및 레이어 렌더링
    *
    * @param data hover된 마커/폴리곤 데이터 또는 null
    *
    * 최적화: RAF 제거하여 즉시 렌더링 (16ms 지연 제거)
-   * topOnHover가 true일 때는 Base 레이어도 다시 그려서 z-order 변경
+   *
+   * 🎯 topOnHover 지원:
+   * - renderEvent가 있으면: Event Layer에서만 처리 (성능 최적화)
+   * - renderEvent가 없고 topOnHover=true면: Base Layer에서 처리
    */
 
 
@@ -6226,10 +6269,15 @@ var WoongCanvasLayer = function (props) {
     } else {
       controller.setMapCursor(data ? 'pointer' : 'grab');
     } // 즉시 렌더링 (RAF 없이)
-    // topOnHover는 Event Layer에서만 처리 (Base Layer 재렌더링 제거로 성능 향상)
 
 
-    doRenderEvent();
+    if (renderEvent) {
+      // renderEvent가 있으면 Event Layer에서만 처리 (성능 최적화)
+      doRenderEvent();
+    } else if (topOnHover) {
+      // renderEvent가 없고 topOnHover가 true면 Base Layer에서 처리
+      doRenderBase();
+    }
   };
   /**
    * 클릭 처리 (단일/다중 선택)
@@ -6585,9 +6633,9 @@ var WoongCanvasLayer = function (props) {
   // --------------------------------------------------------------------------
 
   useEffect(function () {
-    if (!stageRef.current) return; // markersRef 동기화
+    if (!stageRef.current) return; // dataRef 동기화
 
-    markersRef.current = data; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
+    dataRef.current = data; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
 
     if (containerRef.current) {
       containerRef.current.style.transform = '';
@@ -6615,13 +6663,13 @@ var WoongCanvasLayer = function (props) {
      * - O(전체 데이터 수 + 선택된 개수) - 매우 효율적
      */
 
-    var markersMap = new Map(data.map(function (m) {
+    var dataMap = new Map(data.map(function (m) {
       return [m.id, m];
     }));
     var newSelectedItemsMap = new Map();
     selectedIdsRef.current.forEach(function (id) {
-      // 현재 markers에 있으면 최신 데이터 사용
-      var currentItem = markersMap.get(id);
+      // 현재 data에 있으면 최신 데이터 사용
+      var currentItem = dataMap.get(id);
 
       if (currentItem) {
         newSelectedItemsMap.set(id, currentItem);
@@ -6633,7 +6681,7 @@ var WoongCanvasLayer = function (props) {
           newSelectedItemsMap.set(id, prevItem);
         }
       }
-    }); // selectedIdsRef는 그대로 유지 (화면 밖 마커도 선택 상태 유지)
+    }); // selectedIdsRef는 그대로 유지 (화면 밖 항목도 선택 상태 유지)
 
     selectedItemsMapRef.current = newSelectedItemsMap; // 즉시 렌더링
 

package/dist/index.umd.js

@@ -935,7 +935,12 @@
     return false;
   };
   /**
-   * 마커 히트 테스트
+   * 마커 히트 테스트 (클릭/hover 영역 체크)
+   *
+   * 🎯 중요: 꼬리(tail)는 Hit Test 영역에서 제외됩니다!
+   * - markerOffset.y는 마커 최하단(꼬리 끝) 좌표
+   * - boxHeight는 마커 본체만 포함 (꼬리 제외)
+   * - tailHeight만큼 위로 올려서 본체만 Hit Test 영역으로 사용
    */
 
   var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset) {
@@ -943,9 +948,11 @@
     if (!markerOffset) return false;
     var boxWidth = markerData.boxWidth || 50;
     var boxHeight = markerData.boxHeight || 28;
-    var tailHeight = 6;
+    var tailHeight = markerData.tailHeight || 0; // 🎯 tailHeight 사용!
+
     var x = markerOffset.x - boxWidth / 2;
-    var y = markerOffset.y - boxHeight - tailHeight;
+    var y = markerOffset.y - boxHeight - tailHeight; // 🔥 꼬리만큼 위로!
+
     return clickedOffset.x >= x && clickedOffset.x <= x + boxWidth && clickedOffset.y >= y && clickedOffset.y <= y + boxHeight;
   };
   var hexToRgba = function (hexColor, alpha) {
@@ -5695,7 +5702,7 @@
 
     /** data prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
 
-    var markersRef = React.useRef(data); // --------------------------------------------------------------------------
+    var dataRef = React.useRef(data); // --------------------------------------------------------------------------
     // State Refs - 선택 및 Hover 상태 관리
     // --------------------------------------------------------------------------
 
@@ -5846,6 +5853,10 @@
     /**
      * 아이템의 바운딩 박스 계산 (폴리곤/마커 공통)
      *
+     * 🎯 마커의 경우:
+     * - boxHeight: 본체만 (Hit Test 영역)
+     * - tailHeight: 꼬리 높이 (Viewport Culling용, 화면에 보이는 전체 영역)
+     *
      * @param item 마커 또는 폴리곤 데이터
      * @returns 바운딩 박스 또는 null
      */
@@ -5886,14 +5897,16 @@
           maxY: maxY
         };
       } else {
-        // 마커: 중심점 기준 박스 크기 계산
+        // 마커: 중심점 기준 박스 크기 계산 (꼬리 포함)
         var offset = getOrComputeMarkerOffset(item);
         if (!offset) return null;
         var boxWidth = item.boxWidth || 50;
         var boxHeight = item.boxHeight || 28;
+        var tailHeight = item.tailHeight || 0; // 🎯 tailHeight 사용 (Viewport Culling용)
+
         return {
           minX: offset.x - boxWidth / 2,
-          minY: offset.y - boxHeight - 6,
+          minY: offset.y - boxHeight - tailHeight,
           maxX: offset.x + boxWidth / 2,
           maxY: offset.y
         };
@@ -5910,10 +5923,10 @@
     var buildSpatialIndex = function () {
       var spatial = spatialIndexRef.current;
       spatial.clear();
-      var currentMarkers = markersRef.current;
+      var currentData = dataRef.current;
 
-      for (var _i = 0, currentMarkers_1 = currentMarkers; _i < currentMarkers_1.length; _i++) {
-        var item = currentMarkers_1[_i]; // 바운딩 박스 계산 (공통 함수 사용)
+      for (var _i = 0, currentData_1 = currentData; _i < currentData_1.length; _i++) {
+        var item = currentData_1[_i]; // 바운딩 박스 계산 (공통 함수 사용)
 
         var bbox = computeBoundingBox(item);
 
@@ -5956,6 +5969,10 @@
      * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
      * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
      * 3. 클로저로 최신 데이터 참조
+     *
+     * 🎯 topOnHover 지원:
+     * - renderEvent가 없을 때 Base Layer에서 hover 처리 (fallback)
+     * - renderEvent가 있으면 Event Layer에서 처리 (성능 최적화)
      */
 
     var doRenderBase = function () {
@@ -5970,17 +5987,40 @@
         shape = new Konva__default["default"].Shape({
           name: 'base-render-shape',
           sceneFunc: function (context, shape) {
-            var ctx = context; // 클로저로 최신 ref 값 참조
+            var ctx = context;
+            var hovered = hoveredItemRef.current; // 클로저로 최신 ref 값 참조
 
-            var visibleMarkers = enableViewportCulling ? markersRef.current.filter(function (item) {
+            var visibleItems = enableViewportCulling ? dataRef.current.filter(function (item) {
               return isInViewport(item);
-            }) : markersRef.current;
+            }) : dataRef.current; // topOnHover가 true이고 renderEvent가 없으면 Base Layer에서 hover 처리
+
+            if (topOnHover && !renderEvent && hovered) {
+              // hover된 항목 제외하고 렌더링
+              visibleItems = visibleItems.filter(function (item) {
+                return item.id !== hovered.id;
+              });
+            } // 일반 항목 렌더링
+
+
             renderBase({
               ctx: ctx,
-              items: visibleMarkers,
+              items: visibleItems,
               selectedIds: selectedIdsRef.current,
               utils: renderUtils
-            });
+            }); // hover된 항목을 최상단에 렌더링 (renderEvent가 없을 때만)
+
+            if (topOnHover && !renderEvent && hovered) {
+              var isHoveredInViewport = enableViewportCulling ? isInViewport(hovered) : true;
+
+              if (isHoveredInViewport) {
+                renderBase({
+                  ctx: ctx,
+                  items: [hovered],
+                  selectedIds: selectedIdsRef.current,
+                  utils: renderUtils
+                });
+              }
+            }
           },
           perfectDrawEnabled: false,
           listening: false,
@@ -6008,7 +6048,7 @@
       renderAnimation({
         layer: layer,
         selectedIds: selectedIdsRef.current,
-        items: markersRef.current,
+        items: dataRef.current,
         utils: renderUtils
       });
     };
@@ -6213,12 +6253,15 @@
       return null;
     };
     /**
-     * Hover 상태 설정 및 Event 레이어 렌더링
+     * Hover 상태 설정 및 레이어 렌더링
      *
      * @param data hover된 마커/폴리곤 데이터 또는 null
      *
      * 최적화: RAF 제거하여 즉시 렌더링 (16ms 지연 제거)
-     * topOnHover가 true일 때는 Base 레이어도 다시 그려서 z-order 변경
+     *
+     * 🎯 topOnHover 지원:
+     * - renderEvent가 있으면: Event Layer에서만 처리 (성능 최적화)
+     * - renderEvent가 없고 topOnHover=true면: Base Layer에서 처리
      */
 
 
@@ -6230,10 +6273,15 @@
       } else {
         controller.setMapCursor(data ? 'pointer' : 'grab');
       } // 즉시 렌더링 (RAF 없이)
-      // topOnHover는 Event Layer에서만 처리 (Base Layer 재렌더링 제거로 성능 향상)
 
 
-      doRenderEvent();
+      if (renderEvent) {
+        // renderEvent가 있으면 Event Layer에서만 처리 (성능 최적화)
+        doRenderEvent();
+      } else if (topOnHover) {
+        // renderEvent가 없고 topOnHover가 true면 Base Layer에서 처리
+        doRenderBase();
+      }
     };
     /**
      * 클릭 처리 (단일/다중 선택)
@@ -6589,9 +6637,9 @@
     // --------------------------------------------------------------------------
 
     React.useEffect(function () {
-      if (!stageRef.current) return; // markersRef 동기화
+      if (!stageRef.current) return; // dataRef 동기화
 
-      markersRef.current = data; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
+      dataRef.current = data; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
 
       if (containerRef.current) {
         containerRef.current.style.transform = '';
@@ -6619,13 +6667,13 @@
        * - O(전체 데이터 수 + 선택된 개수) - 매우 효율적
        */
 
-      var markersMap = new Map(data.map(function (m) {
+      var dataMap = new Map(data.map(function (m) {
         return [m.id, m];
       }));
       var newSelectedItemsMap = new Map();
       selectedIdsRef.current.forEach(function (id) {
-        // 현재 markers에 있으면 최신 데이터 사용
-        var currentItem = markersMap.get(id);
+        // 현재 data에 있으면 최신 데이터 사용
+        var currentItem = dataMap.get(id);
 
         if (currentItem) {
           newSelectedItemsMap.set(id, currentItem);
@@ -6637,7 +6685,7 @@
             newSelectedItemsMap.set(id, prevItem);
           }
         }
-      }); // selectedIdsRef는 그대로 유지 (화면 밖 마커도 선택 상태 유지)
+      }); // selectedIdsRef는 그대로 유지 (화면 밖 항목도 선택 상태 유지)
 
       selectedItemsMapRef.current = newSelectedItemsMap; // 즉시 렌더링
 

package/package.json

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