@mint-ui/map 1.2.0-test.3 → 1.2.0-test.31

package/dist/index.umd.js

@@ -864,18 +864,67 @@
     return inside;
   };
   /**
-   * 폴리곤 히트 테스트
+   * 폴리곤 히트 테스트 (도넛 폴리곤 지원)
+   *
+   * 로직:
+   * 1. 외부 폴리곤(첫 번째): 내부에 있어야 함
+   * 2. 내부 구멍들(나머지): 내부에 있으면 안 됨 (evenodd 규칙)
+   *
+   * 중요: 도넛 폴리곤과 내부 폴리곤은 별개의 polygonData로 처리됨
+   * - 도넛 폴리곤 A: isDonutPolygon=true
+   * - 내부 폴리곤 B: isDonutPolygon=false (별도 데이터)
    */
 
   var isPointInPolygonData = function (clickedOffset, polygonData, getPolygonOffsets) {
     var polygonOffsets = getPolygonOffsets(polygonData);
-    if (!polygonOffsets) return false;
+    if (!polygonOffsets) return false; // 🍩 도넛 폴리곤 처리 (isDonutPolygon === true)
 
-    for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
-      var multiPolygon = polygonOffsets_1[_i];
+    if (polygonData.isDonutPolygon) {
+      for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
+        var multiPolygon = polygonOffsets_1[_i];
+        if (multiPolygon.length === 0) continue; // 외부 폴리곤만 있는 경우 (구멍 없음) - 일반 폴리곤처럼 처리
+
+        if (multiPolygon.length === 1) {
+          if (isPointInPolygon(clickedOffset, multiPolygon[0])) {
+            return true;
+          }
+
+          continue;
+        } // 1. 외부 폴리곤(첫 번째)에 포함되는지 확인
+
+
+        var outerPolygon = multiPolygon[0];
+
+        if (!isPointInPolygon(clickedOffset, outerPolygon)) {
+          continue; // 외부 폴리곤 밖이면 다음 multiPolygon 확인
+        } // 2. 내부 구멍들(나머지)에 포함되는지 확인
+
+
+        for (var i = 1; i < multiPolygon.length; i++) {
+          var hole = multiPolygon[i];
+
+          if (isPointInPolygon(clickedOffset, hole)) {
+            // ❌ 구멍 안에 있음 → 이 도넛 폴리곤은 히트 안 됨
+            // 다른 multiPolygon 체크하지 않고 바로 false 반환
+            // (도넛 폴리곤의 구멍 안은 무조건 클릭 불가)
+            return false;
+          }
+        } // ✅ 외부 폴리곤 안 + 구멍 밖 = 히트!
 
-      for (var _a = 0, multiPolygon_2 = multiPolygon; _a < multiPolygon_2.length; _a++) {
-        var polygonGroup = multiPolygon_2[_a];
+
+        return true;
+      }
+
+      return false;
+    } // 일반 폴리곤 처리 (isDonutPolygon === false 또는 undefined)
+
+
+    for (var _a = 0, polygonOffsets_2 = polygonOffsets; _a < polygonOffsets_2.length; _a++) {
+      var multiPolygon = polygonOffsets_2[_a];
+
+      for (var _b = 0, multiPolygon_2 = multiPolygon; _b < multiPolygon_2.length; _b++) {
+        var polygonGroup = multiPolygon_2[_b];
+        if (polygonGroup.length === 0) continue;
 
         if (isPointInPolygon(clickedOffset, polygonGroup)) {
           return true;
@@ -886,7 +935,12 @@
     return false;
   };
   /**
-   * 마커 히트 테스트
+   * 마커 히트 테스트 (클릭/hover 영역 체크)
+   *
+   * 🎯 중요: 꼬리(tail)는 Hit Test 영역에서 제외됩니다!
+   * - markerOffset.y는 마커 최하단(꼬리 끝) 좌표
+   * - boxHeight는 마커 본체만 포함 (꼬리 제외)
+   * - tailHeight만큼 위로 올려서 본체만 Hit Test 영역으로 사용
    */
 
   var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset) {
@@ -894,11 +948,53 @@
     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) {
+    if (alpha === void 0) {
+      alpha = 1;
+    } // NOTE: 입력된 hexColor에서 "#" 제거
+
+
+    var hex = hexColor.replace('#', ''); // NOTE: 6자리일 경우 알파 값은 사용자가 제공한 alpha 값으로 설정
+
+    if (hex.length === 6) {
+      var r = parseInt(hex.substring(0, 2), 16);
+      var g = parseInt(hex.substring(2, 4), 16);
+      var b = parseInt(hex.substring(4, 6), 16);
+      return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
+    }
+
+    throw new Error('Invalid hex color format');
+  };
+  var tempCanvas = document.createElement('canvas');
+  var tempCtx = tempCanvas.getContext('2d');
+  /**
+   * 텍스트 박스의 너비를 계산합니다.
+   *
+   * @param {Object} params - 파라미터 객체
+   * @param {string} params.text - 측정할 텍스트
+   * @param {string} params.fontConfig - 폰트 설정 (예: 'bold 16px Arial')
+   * @param {number} params.padding - 텍스트 박스에 적용할 패딩 값
+   * @param {number} params.minWidth - 최소 너비
+   * @returns {number} 계산된 텍스트 박스의 너비
+   */
+
+  var calculateTextBoxWidth = function (_a) {
+    var text = _a.text,
+        fontConfig = _a.fontConfig,
+        padding = _a.padding,
+        minWidth = _a.minWidth;
+    if (!tempCtx) return 0;
+    tempCtx.font = fontConfig;
+    var textWidth = tempCtx.measureText(text).width;
+    return Math.max(minWidth, textWidth + padding);
+  };
 
   var KonvaMarkerContext = React.createContext(null);
   var KonvaMarkerProvider = function (_a) {
@@ -946,7 +1042,9 @@
       var clickedOffset = controller.positionToOffset(event.param.position); // zIndex 순서대로 순회 (높은 것부터)
 
       for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
-        var component = _b[_i];
+        var component = _b[_i]; // 🚫 상호작용이 비활성화된 컴포넌트는 스킵
+
+        if (component.isInteractionDisabled()) continue;
         var data = component.findData(clickedOffset);
 
         if (data) {
@@ -974,7 +1072,9 @@
       var newHoveredData = null;
 
       for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
-        var component = _b[_i];
+        var component = _b[_i]; // 🚫 상호작용이 비활성화된 컴포넌트는 스킵
+
+        if (component.isInteractionDisabled()) continue;
         var data = component.findData(mouseOffset);
 
         if (data) {
@@ -5325,42 +5425,257 @@
     }))));
   }
 
-  // 메인 컴포넌트
-  // ============================================================================
+  /**
+   * 폴리곤 렌더링 유틸리티
+   *
+   * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
+   */
 
   /**
-   * Konva 기반 고성능 마커/폴리곤 렌더링 컴포넌트
+   * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
+   */
+  var drawPolygon = function (_a) {
+    var ctx = _a.ctx,
+        polygonOffsets = _a.polygonOffsets,
+        isDonutPolygon = _a.isDonutPolygon,
+        fillColor = _a.fillColor,
+        strokeColor = _a.strokeColor,
+        lineWidth = _a.lineWidth;
+
+    for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
+      var multiPolygon = polygonOffsets_1[_i];
+
+      if (isDonutPolygon) {
+        ctx.beginPath(); // 1. 외부 폴리곤 그리기
+
+        if (multiPolygon[0] && multiPolygon[0].length > 0) {
+          ctx.moveTo(multiPolygon[0][0][0], multiPolygon[0][0][1]);
+
+          for (var i = 1; i < multiPolygon[0].length; i++) {
+            ctx.lineTo(multiPolygon[0][i][0], multiPolygon[0][i][1]);
+          }
+
+          ctx.closePath();
+        } // 2. 내부 폴리곤 (구멍들) 그리기 - 같은 path에 추가
+
+
+        for (var j = 1; j < multiPolygon.length; j++) {
+          var innerPolygon = multiPolygon[j];
+          if (innerPolygon.length === 0) continue;
+          ctx.moveTo(innerPolygon[0][0], innerPolygon[0][1]);
+
+          for (var i = 1; i < innerPolygon.length; i++) {
+            ctx.lineTo(innerPolygon[i][0], innerPolygon[i][1]);
+          }
+
+          ctx.closePath();
+        } // 3. evenodd fill rule로 구멍 뚫기
+
+
+        ctx.fillStyle = fillColor;
+        ctx.fill('evenodd'); // 4. 외곽선 그리기
+
+        ctx.strokeStyle = strokeColor;
+        ctx.lineWidth = lineWidth;
+        ctx.stroke();
+      } else {
+        // 일반 폴리곤
+        for (var _b = 0, multiPolygon_1 = multiPolygon; _b < multiPolygon_1.length; _b++) {
+          var polygonGroup = multiPolygon_1[_b];
+          if (!polygonGroup.length) continue;
+          ctx.beginPath();
+          var firstPoint = polygonGroup[0];
+          ctx.moveTo(firstPoint[0], firstPoint[1]);
+
+          for (var i = 1; i < polygonGroup.length; i++) {
+            var point = polygonGroup[i];
+            ctx.lineTo(point[0], point[1]);
+          }
+
+          ctx.closePath();
+          ctx.fillStyle = fillColor;
+          ctx.strokeStyle = strokeColor;
+          ctx.lineWidth = lineWidth;
+          ctx.fill();
+          ctx.stroke();
+        }
+      }
+    }
+  };
+  /**
+   * 폴리곤 Base 렌더링 함수
    *
-   * 특징:
-   * - Base/Event 레이어 분리로 성능 최적화
-   * - LRU 캐시로 좌표 변환 결과 캐싱
-   * - Spatial Hash Grid로 빠른 Hit Test
-   * - Viewport Culling으로 보이는 영역만 렌더링
+   * @param baseFillColor 기본 폴리곤 채우기 색상
+   * @param baseStrokeColor 기본 폴리곤 테두리 색상
+   * @param baseLineWidth 기본 폴리곤 테두리 두께
+   * @returns Base Layer 렌더링 함수
    *
-   * @template T 마커 데이터의 추가 속성 타입
+   * @example
+   * const renderBase = renderPolygonBase(
+   *   'rgba(255, 100, 100, 0.5)',
+   *   'rgba(200, 50, 50, 0.8)',
+   *   2
+   * );
    */
 
-  var WoongKonvaMarkerComponent = function (_a) {
-    var markers = _a.markers,
-        dataType = _a.dataType,
-        onClick = _a.onClick,
-        onMouseOver = _a.onMouseOver,
-        onMouseOut = _a.onMouseOut,
-        renderBase = _a.renderBase,
-        renderAnimation = _a.renderAnimation,
-        renderEvent = _a.renderEvent,
-        _b = _a.enableMultiSelect,
-        enableMultiSelect = _b === void 0 ? false : _b,
-        _c = _a.topOnHover,
-        topOnHover = _c === void 0 ? false : _c,
-        _d = _a.enableViewportCulling,
-        enableViewportCulling = _d === void 0 ? true : _d,
-        _e = _a.cullingMargin,
-        cullingMargin = _e === void 0 ? DEFAULT_CULLING_MARGIN : _e,
-        _f = _a.maxCacheSize,
-        maxCacheSize = _f === void 0 ? DEFAULT_MAX_CACHE_SIZE : _f,
-        externalSelectedItems = _a.selectedItems,
-        options = tslib.__rest(_a, ["markers", "dataType", "onClick", "onMouseOver", "onMouseOut", "renderBase", "renderAnimation", "renderEvent", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems"]); // --------------------------------------------------------------------------
+  var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth) {
+    return function (_a) {
+      var ctx = _a.ctx,
+          items = _a.items,
+          selectedIds = _a.selectedIds,
+          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;
+        if (!item.paths) continue;
+        var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+        if (!polygonOffsets) continue;
+        drawPolygon({
+          ctx: ctx,
+          polygonOffsets: polygonOffsets,
+          isDonutPolygon: item.isDonutPolygon || false,
+          fillColor: baseFillColor,
+          strokeColor: baseStrokeColor,
+          lineWidth: baseLineWidth
+        });
+      }
+    };
+  };
+  /**
+   * 폴리곤 Event 렌더링 함수
+   *
+   * @param baseFillColor 기본 폴리곤 채우기 색상 (필수, fallback용)
+   * @param baseStrokeColor 기본 폴리곤 테두리 색상 (필수, fallback용)
+   * @param baseLineWidth 기본 폴리곤 테두리 두께 (필수, fallback용)
+   * @param selectedFillColor 선택된 폴리곤 채우기 색상 (선택, 기본값: baseFillColor)
+   * @param selectedStrokeColor 선택된 폴리곤 테두리 색상 (선택, 기본값: baseStrokeColor)
+   * @param selectedLineWidth 선택된 폴리곤 테두리 두께 (선택, 기본값: baseLineWidth)
+   * @param activeFillColor 마지막 선택된 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
+   * @param activeStrokeColor 마지막 선택된 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
+   * @param activeLineWidth 마지막 선택된 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
+   * @param hoveredFillColor Hover 시 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
+   * @param hoveredStrokeColor Hover 시 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
+   * @param hoveredLineWidth Hover 시 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
+   * @returns Event Layer 렌더링 함수
+   *
+   * @example
+   * const renderEvent = renderPolygonEvent(
+   *   'rgba(255, 100, 100, 0.5)',  // baseFillColor
+   *   'rgba(200, 50, 50, 0.8)',    // baseStrokeColor
+   *   2,                            // baseLineWidth
+   *   'rgba(255, 193, 7, 0.7)',    // selectedFillColor
+   *   'rgba(255, 152, 0, 1)',      // selectedStrokeColor
+   *   4                             // selectedLineWidth
+   * );
+   */
+
+  var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth) {
+    // 기본값 설정 (base 기준)
+    var _selectedFillColor = selectedFillColor || baseFillColor;
+
+    var _selectedStrokeColor = selectedStrokeColor || baseStrokeColor;
+
+    var _selectedLineWidth = selectedLineWidth || baseLineWidth;
+
+    var _activeFillColor = activeFillColor || _selectedFillColor;
+
+    var _activeStrokeColor = activeStrokeColor || _selectedStrokeColor;
+
+    var _activeLineWidth = activeLineWidth || _selectedLineWidth;
+
+    var _hoveredFillColor = hoveredFillColor || _selectedFillColor;
+
+    var _hoveredStrokeColor = hoveredStrokeColor || _selectedStrokeColor;
+
+    var _hoveredLineWidth = hoveredLineWidth || _selectedLineWidth;
+
+    return function (_a) {
+      var ctx = _a.ctx,
+          hoveredItem = _a.hoveredItem,
+          utils = _a.utils,
+          selectedItems = _a.selectedItems,
+          selectedItem = _a.selectedItem; // 1. 선택된 항목들 그리기 (마지막 선택 항목과 호버된 항목 제외)
+
+      if (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) {
+        for (var _i = 0, selectedItems_1 = selectedItems; _i < selectedItems_1.length; _i++) {
+          var item = selectedItems_1[_i]; // 마지막 선택 항목과 호버된 항목은 나중에 따로 그림
+
+          if (item.id === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) || (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) === item.id) continue;
+          if (!item.paths) continue;
+          var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+          if (!polygonOffsets) continue;
+          drawPolygon({
+            ctx: ctx,
+            polygonOffsets: polygonOffsets,
+            isDonutPolygon: item.isDonutPolygon || false,
+            fillColor: _selectedFillColor,
+            strokeColor: _selectedStrokeColor,
+            lineWidth: _selectedLineWidth
+          });
+        }
+      } // 2. 마지막 선택된 항목 그리기 (호버되지 않은 경우)
+
+
+      if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.paths) && (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) !== selectedItem.id) {
+        var polygonOffsets = utils.getOrComputePolygonOffsets(selectedItem);
+
+        if (polygonOffsets) {
+          drawPolygon({
+            ctx: ctx,
+            polygonOffsets: polygonOffsets,
+            isDonutPolygon: selectedItem.isDonutPolygon || false,
+            fillColor: _activeFillColor,
+            strokeColor: _activeStrokeColor,
+            lineWidth: _activeLineWidth
+          });
+        }
+      } // 3. 호버된 항목 그리기 (가장 위에 표시)
+
+
+      if (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.paths) {
+        var polygonOffsets = utils.getOrComputePolygonOffsets(hoveredItem);
+        if (!polygonOffsets) return;
+        var isSelected = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(function (item) {
+          return item.id === hoveredItem.id;
+        });
+        drawPolygon({
+          ctx: ctx,
+          polygonOffsets: polygonOffsets,
+          isDonutPolygon: hoveredItem.isDonutPolygon || false,
+          fillColor: isSelected ? _activeFillColor : _hoveredFillColor,
+          strokeColor: isSelected ? _activeStrokeColor : _hoveredStrokeColor,
+          lineWidth: isSelected ? _activeLineWidth : _hoveredLineWidth
+        });
+      }
+    };
+  };
+
+  // 메인 컴포넌트
+  // ============================================================================
+
+  var WoongCanvasLayer = function (props) {
+    var data = props.data,
+        dataType = props.dataType,
+        onClick = props.onClick,
+        onMouseOver = props.onMouseOver,
+        onMouseOut = props.onMouseOut,
+        _a = props.enableMultiSelect,
+        enableMultiSelect = _a === void 0 ? false : _a,
+        _b = props.topOnHover,
+        topOnHover = _b === void 0 ? false : _b,
+        _c = props.enableViewportCulling,
+        enableViewportCulling = _c === void 0 ? true : _c,
+        _d = props.cullingMargin,
+        cullingMargin = _d === void 0 ? DEFAULT_CULLING_MARGIN : _d,
+        _e = props.maxCacheSize,
+        maxCacheSize = _e === void 0 ? DEFAULT_MAX_CACHE_SIZE : _e,
+        externalSelectedItems = props.selectedItems,
+        externalSelectedItem = props.selectedItem,
+        _f = props.disableInteraction,
+        disableInteraction = _f === void 0 ? false : _f,
+        options = tslib.__rest(props, ["data", "dataType", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // --------------------------------------------------------------------------
     // Hooks & Context
     // --------------------------------------------------------------------------
 
@@ -5385,18 +5700,21 @@
     // Data Refs - 선택 및 Hover 상태 관리
     // --------------------------------------------------------------------------
 
-    /** markers prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
+    /** data prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
 
-    var markersRef = React.useRef(markers); // --------------------------------------------------------------------------
+    var dataRef = React.useRef(data); // --------------------------------------------------------------------------
     // State Refs - 선택 및 Hover 상태 관리
     // --------------------------------------------------------------------------
 
+    /** 상호작용 비활성화 상태 (Ref로 관리하여 클로저 문제 해결) */
+
+    var disableInteractionRef = React.useRef(disableInteraction);
     /** 현재 Hover 중인 항목 */
 
     var hoveredItemRef = React.useRef(null);
-    /** 마지막으로 클릭된 항목 */
+    /** 외부에서 전달된 선택 항목 (Ref로 관리하여 클로저 문제 해결) */
 
-    var lastClickedItemRef = React.useRef(null);
+    var selectedItemRef = React.useRef(externalSelectedItem);
     /**
      * 선택된 항목의 ID Set
      *
@@ -5479,55 +5797,11 @@
       var bbox = boundingBoxCacheRef.current.get(item.id);
 
       if (!bbox) {
-        // 폴리곤인 경우
-        if (dataType === exports.CanvasDataType.POLYGON) {
-          var offsets = getOrComputePolygonOffsets(item);
-          if (!offsets) return false; // 바운딩 박스 계산 (최적화: 직접 비교)
-
-          var minX = Infinity,
-              minY = Infinity,
-              maxX = -Infinity,
-              maxY = -Infinity;
-
-          for (var _i = 0, offsets_1 = offsets; _i < offsets_1.length; _i++) {
-            var multiPolygon = offsets_1[_i];
-
-            for (var _a = 0, multiPolygon_1 = multiPolygon; _a < multiPolygon_1.length; _a++) {
-              var polygonGroup = multiPolygon_1[_a];
-
-              for (var _b = 0, polygonGroup_1 = polygonGroup; _b < polygonGroup_1.length; _b++) {
-                var _c = polygonGroup_1[_b],
-                    x = _c[0],
-                    y = _c[1];
-                if (x < minX) minX = x;
-                if (y < minY) minY = y;
-                if (x > maxX) maxX = x;
-                if (y > maxY) maxY = y;
-              }
-            }
-          }
-
-          bbox = {
-            minX: minX,
-            minY: minY,
-            maxX: maxX,
-            maxY: maxY
-          };
-          boundingBoxCacheRef.current.set(item.id, bbox);
-        } // 마커인 경우
-        else {
-          var offset = getOrComputeMarkerOffset(item);
-          if (!offset) return false;
-          var boxWidth = item.boxWidth || 50;
-          var boxHeight = item.boxHeight || 28;
-          bbox = {
-            minX: offset.x - boxWidth / 2,
-            minY: offset.y - boxHeight - 6,
-            maxX: offset.x + boxWidth / 2,
-            maxY: offset.y
-          };
-          boundingBoxCacheRef.current.set(item.id, bbox);
-        }
+        // 바운딩 박스 계산 (공통 함수 사용)
+        var computed = computeBoundingBox(item);
+        if (!computed) return false;
+        bbox = computed;
+        boundingBoxCacheRef.current.set(item.id, bbox);
       } // 바운딩 박스와 viewport 교차 체크
 
 
@@ -5556,6 +5830,7 @@
     };
     /**
      * 마커 좌표 변환 결과를 캐시하고 반환
+     *
      * @param markerData 마커 데이터
      * @returns 변환된 좌표 또는 null
      */
@@ -5572,6 +5847,71 @@
 
       return result;
     }; // --------------------------------------------------------------------------
+    // 유틸리티 함수: 바운딩 박스 계산
+    // --------------------------------------------------------------------------
+
+    /**
+     * 아이템의 바운딩 박스 계산 (폴리곤/마커 공통)
+     *
+     * 🎯 마커의 경우:
+     * - boxHeight: 본체만 (Hit Test 영역)
+     * - tailHeight: 꼬리 높이 (Viewport Culling용, 화면에 보이는 전체 영역)
+     *
+     * @param item 마커 또는 폴리곤 데이터
+     * @returns 바운딩 박스 또는 null
+     */
+
+
+    var computeBoundingBox = function (item) {
+      if (dataType === exports.CanvasDataType.POLYGON) {
+        // 폴리곤: 모든 좌표의 최소/최대값 계산
+        var offsets = getOrComputePolygonOffsets(item);
+        if (!offsets) return null;
+        var minX = Infinity,
+            minY = Infinity,
+            maxX = -Infinity,
+            maxY = -Infinity;
+
+        for (var _i = 0, offsets_1 = offsets; _i < offsets_1.length; _i++) {
+          var multiPolygon = offsets_1[_i];
+
+          for (var _a = 0, multiPolygon_1 = multiPolygon; _a < multiPolygon_1.length; _a++) {
+            var polygonGroup = multiPolygon_1[_a];
+
+            for (var _b = 0, polygonGroup_1 = polygonGroup; _b < polygonGroup_1.length; _b++) {
+              var _c = polygonGroup_1[_b],
+                  x = _c[0],
+                  y = _c[1];
+              if (x < minX) minX = x;
+              if (y < minY) minY = y;
+              if (x > maxX) maxX = x;
+              if (y > maxY) maxY = y;
+            }
+          }
+        }
+
+        return {
+          minX: minX,
+          minY: minY,
+          maxX: maxX,
+          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 - tailHeight,
+          maxX: offset.x + boxWidth / 2,
+          maxY: offset.y
+        };
+      }
+    }; // --------------------------------------------------------------------------
     // 유틸리티 함수: 공간 인덱싱
     // --------------------------------------------------------------------------
 
@@ -5583,59 +5923,19 @@
     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]; // 바운딩 박스 계산 (공통 함수 사용)
 
-        if (dataType === exports.CanvasDataType.POLYGON) {
-          // 폴리곤: 바운딩 박스 계산 (최적화: 직접 비교)
-          var offsets = getOrComputePolygonOffsets(item);
-
-          if (offsets) {
-            var minX = Infinity,
-                minY = Infinity,
-                maxX = -Infinity,
-                maxY = -Infinity;
-
-            for (var _a = 0, offsets_2 = offsets; _a < offsets_2.length; _a++) {
-              var multiPolygon = offsets_2[_a];
-
-              for (var _b = 0, multiPolygon_2 = multiPolygon; _b < multiPolygon_2.length; _b++) {
-                var polygonGroup = multiPolygon_2[_b];
-
-                for (var _c = 0, polygonGroup_2 = polygonGroup; _c < polygonGroup_2.length; _c++) {
-                  var _d = polygonGroup_2[_c],
-                      x = _d[0],
-                      y = _d[1];
-                  if (x < minX) minX = x;
-                  if (y < minY) minY = y;
-                  if (x > maxX) maxX = x;
-                  if (y > maxY) maxY = y;
-                }
-              }
-            }
+        var bbox = computeBoundingBox(item);
 
-            spatial.insert(item, minX, minY, maxX, maxY);
-          }
-        } else {
-          // 마커: 점 기반 바운딩 박스
-          var offset = getOrComputeMarkerOffset(item);
-
-          if (offset) {
-            var boxWidth = item.boxWidth || 50;
-            var boxHeight = item.boxHeight || 28;
-            var tailHeight = 6;
-            var minX = offset.x - boxWidth / 2;
-            var minY = offset.y - boxHeight - tailHeight;
-            var maxX = offset.x + boxWidth / 2;
-            var maxY = offset.y;
-            spatial.insert(item, minX, minY, maxX, maxY);
-          }
+        if (bbox) {
+          spatial.insert(item, bbox.minX, bbox.minY, bbox.maxX, bbox.maxY);
         }
       }
     }; // --------------------------------------------------------------------------
-    // 렌더링 함수
+    // 렌더링 함수 결정 (dataType에 따라)
     // --------------------------------------------------------------------------
 
     /**
@@ -5650,6 +5950,18 @@
     /** Base Layer에서 사용할 빈 Set (재사용) */
 
     React.useRef(new Set());
+    /**
+     * 실제 사용할 렌더링 함수 결정
+     * - MARKER: 외부에서 전달받은 renderBase 사용 (필수)
+     * - POLYGON: renderer.ts의 팩토리 함수로 생성 (props 기반)
+     */
+
+    var renderBase = dataType === exports.CanvasDataType.MARKER ? props.renderBase : renderPolygonBase(props.baseFillColor, props.baseStrokeColor, props.baseLineWidth);
+    var renderAnimation = dataType === exports.CanvasDataType.MARKER ? props.renderAnimation : undefined;
+    var renderEvent = dataType === exports.CanvasDataType.MARKER ? props.renderEvent : function () {
+      var polygonProps = props;
+      return renderPolygonEvent(polygonProps.baseFillColor, polygonProps.baseStrokeColor, polygonProps.baseLineWidth, polygonProps.selectedFillColor, polygonProps.selectedStrokeColor, polygonProps.selectedLineWidth, polygonProps.activeFillColor, polygonProps.activeStrokeColor, polygonProps.activeLineWidth, polygonProps.hoveredFillColor, polygonProps.hoveredStrokeColor, polygonProps.hoveredLineWidth);
+    }();
     /**
      * Base 레이어 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
      *
@@ -5657,6 +5969,10 @@
      * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
      * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
      * 3. 클로저로 최신 데이터 참조
+     *
+     * 🎯 topOnHover 지원:
+     * - renderEvent가 없을 때 Base Layer에서 hover 처리 (fallback)
+     * - renderEvent가 있으면 Event Layer에서 처리 (성능 최적화)
      */
 
     var doRenderBase = function () {
@@ -5671,17 +5987,42 @@
         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,
+              hoveredItem: hovered,
               utils: renderUtils
-            });
+            }); // hover된 항목을 최상단에 렌더링 (renderEvent가 없을 때만)
+
+            if (topOnHover && !renderEvent && hovered) {
+              var isHoveredInViewport = enableViewportCulling ? isInViewport(hovered) : true;
+
+              if (isHoveredInViewport) {
+                renderBase({
+                  ctx: ctx,
+                  items: [hovered],
+                  selectedIds: selectedIdsRef.current,
+                  hoveredItem: hovered,
+                  utils: renderUtils
+                });
+              }
+            }
           },
           perfectDrawEnabled: false,
           listening: false,
@@ -5709,7 +6050,7 @@
       renderAnimation({
         layer: layer,
         selectedIds: selectedIdsRef.current,
-        items: markersRef.current,
+        items: dataRef.current,
         utils: renderUtils
       });
     };
@@ -5724,9 +6065,9 @@
 
 
     var doRenderEvent = function () {
-      if (!renderEvent) return;
       var layer = eventLayerRef.current;
-      if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
+      if (!layer) return;
+      if (!renderEvent) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
 
       var shape = layer.findOne('.event-render-shape');
 
@@ -5739,13 +6080,47 @@
             var ctx = context; // 클로저로 최신 ref 값 참조
 
             var selectedItems = Array.from(selectedItemsMapRef.current.values());
-            renderEvent({
-              ctx: ctx,
-              hoveredItem: hoveredItemRef.current,
-              utils: renderUtils,
-              selectedItems: selectedItems,
-              lastClickedItem: lastClickedItemRef.current
-            });
+            var hovered = hoveredItemRef.current; // topOnHover가 true이면 hover된 항목을 최상단에 렌더링
+
+            if (topOnHover && hovered) {
+              // 1. 먼저 일반 항목들 렌더링 (hover된 항목 제외)
+              renderEvent({
+                ctx: ctx,
+                hoveredItem: null,
+                utils: renderUtils,
+                selectedItems: selectedItems.filter(function (item) {
+                  return item.id !== hovered.id;
+                }),
+                selectedItem: selectedItemRef.current
+              }); // 2. hover된 항목을 최상단에 렌더링
+
+              var isHoveredInViewport = enableViewportCulling ? isInViewport(hovered) : true;
+
+              if (isHoveredInViewport) {
+                // hover된 항목이 선택되어 있다면 hoverSelectedItems에 포함시켜서 
+                // renderEvent에서 hover 스타일만 적용되도록 함
+                var hoveredIsSelected = selectedItems.some(function (item) {
+                  return item.id === hovered.id;
+                });
+                var hoverSelectedItems = hoveredIsSelected ? [hovered] : [];
+                renderEvent({
+                  ctx: ctx,
+                  hoveredItem: hovered,
+                  utils: renderUtils,
+                  selectedItems: hoverSelectedItems,
+                  selectedItem: selectedItemRef.current
+                });
+              }
+            } else {
+              // topOnHover가 false이거나 hover된 항목이 없으면 일반 렌더링
+              renderEvent({
+                ctx: ctx,
+                hoveredItem: hovered,
+                utils: renderUtils,
+                selectedItems: selectedItems,
+                selectedItem: selectedItemRef.current
+              });
+            }
           },
           perfectDrawEnabled: false,
           listening: false,
@@ -5914,12 +6289,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에서 처리
      */
 
 
@@ -5931,10 +6309,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();
+      }
     };
     /**
      * 클릭 처리 (단일/다중 선택)
@@ -5948,9 +6331,7 @@
 
 
     var handleLocalClick = function (data) {
-      // 0. 마지막 클릭 항목 저장
-      lastClickedItemRef.current = data; // 1. 선택 상태 업데이트
-
+      // 1. 선택 상태 업데이트
       if (enableMultiSelect) {
         // 다중 선택: Set과 Map 동시 업데이트
         var newSelected = new Set(selectedIdsRef.current);
@@ -6000,15 +6381,20 @@
     var handleClick = function (event) {
       var _a;
 
+      if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
+
       if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
 
       try {
         var clickedOffset = controller.positionToOffset(event.param.position);
-        var data = findData(clickedOffset);
+        var data_1 = findData(clickedOffset);
 
-        if (data) {
-          handleLocalClick(data);
-          if (onClick) onClick(data, selectedIdsRef.current);
+        if (data_1) {
+          handleLocalClick(data_1);
+
+          if (onClick) {
+            onClick(data_1, selectedIdsRef.current);
+          }
         }
       } catch (error) {
         console.error('[WoongKonvaMarker] handleClick error:', error);
@@ -6022,6 +6408,8 @@
     var handleMouseMove = function (event) {
       var _a;
 
+      if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
+
       if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
 
       try {
@@ -6062,6 +6450,8 @@
 
 
     var handleMouseLeave = function () {
+      if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
+
       var prevHovered = hoveredItemRef.current;
 
       if (prevHovered) {
@@ -6196,7 +6586,11 @@
           handleLocalClick: handleLocalClick,
           getSelectedIds: function () {
             return selectedIdsRef.current;
-          }
+          },
+          isInteractionDisabled: function () {
+            return disableInteractionRef.current;
+          } // 🚫 상호작용 비활성화 여부 반환
+
         };
         context.registerComponent(componentInstance);
       } // Cleanup 함수
@@ -6235,7 +6629,14 @@
         boundingBoxCacheRef.current.clear();
         spatialIndexRef.current.clear();
       };
-    }, []); // --------------------------------------------------------------------------
+    }, []); // 초기화는 한 번만
+    // --------------------------------------------------------------------------
+    // Lifecycle: disableInteraction 동기화
+    // --------------------------------------------------------------------------
+
+    React.useEffect(function () {
+      disableInteractionRef.current = disableInteraction;
+    }, [disableInteraction]); // --------------------------------------------------------------------------
     // Lifecycle: 외부 selectedItems 동기화
     // --------------------------------------------------------------------------
 
@@ -6258,13 +6659,23 @@
       doRenderEvent();
     }, [externalSelectedItems]); // 배열 자체를 dependency로 사용
     // --------------------------------------------------------------------------
-    // Lifecycle: 마커 데이터 변경 시 렌더링
+    // Lifecycle: 외부 selectedItem 변경 시 Event Layer 리렌더링
     // --------------------------------------------------------------------------
 
     React.useEffect(function () {
-      if (!stageRef.current) return; // markersRef 동기화
+      if (!stageRef.current) return; // Ref 동기화
 
-      markersRef.current = markers; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
+      selectedItemRef.current = externalSelectedItem; // selectedItem이 변경되면 Event Layer만 다시 그림
+
+      doRenderEvent();
+    }, [externalSelectedItem]); // --------------------------------------------------------------------------
+    // Lifecycle: 데이터 변경 시 렌더링
+    // --------------------------------------------------------------------------
+
+    React.useEffect(function () {
+      if (!stageRef.current) return; // dataRef 동기화
+
+      dataRef.current = data; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
 
       if (containerRef.current) {
         containerRef.current.style.transform = '';
@@ -6281,24 +6692,24 @@
       /**
        * 선택 상태 동기화 (최적화 버전)
        *
-       * markers가 변경되면 selectedItemsMapRef도 업데이트 필요
+       * data가 변경되면 selectedItemsMapRef도 업데이트 필요
        * (참조가 바뀌므로 기존 Map의 데이터는 stale 상태)
        *
-       * 🔥 중요: 화면 밖 마커도 선택 상태 유지!
-       * - 현재 markers에 있으면 최신 데이터로 업데이트
+       * 🔥 중요: 화면 밖 데이터도 선택 상태 유지!
+       * - 현재 data에 있으면 최신 데이터로 업데이트
        * - 없으면 기존 selectedItemsMapRef의 데이터 유지
        *
-       * 최적화: markers를 Map으로 먼저 변환하여 find() 순회 제거
-       * - O(전체 마커 수 + 선택된 개수) - 매우 효율적
+       * 최적화: data를 Map으로 먼저 변환하여 find() 순회 제거
+       * - O(전체 데이터 수 + 선택된 개수) - 매우 효율적
        */
 
-      var markersMap = new Map(markers.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);
@@ -6310,12 +6721,12 @@
             newSelectedItemsMap.set(id, prevItem);
           }
         }
-      }); // selectedIdsRef는 그대로 유지 (화면 밖 마커도 선택 상태 유지)
+      }); // selectedIdsRef는 그대로 유지 (화면 밖 항목도 선택 상태 유지)
 
       selectedItemsMapRef.current = newSelectedItemsMap; // 즉시 렌더링
 
       renderAllImmediate();
-    }, [markers]);
+    }, [data]);
     return reactDom.createPortal(React__default["default"].createElement("div", {
       ref: containerRef,
       style: {
@@ -6325,40 +6736,6 @@
       }
     }), divElement);
   };
-  /**
-   * 🔥 React.memo 최적화: 마커 배열과 selectedItems 변경 체크
-   *
-   * 비교 전략:
-   * 1. markers 배열 비교
-   * 2. selectedItems 배열 비교 (외부 제어)
-   *
-   * 주의: JSON.stringify() 사용 금지! (매우 느림)
-   */
-
-
-  React__default["default"].memo(WoongKonvaMarkerComponent, function (prevProps, nextProps) {
-    // 1. markers 비교
-    var prevMarkers = prevProps.markers;
-    var nextMarkers = nextProps.markers; // 참조가 같으면 스킵
-
-    if (prevMarkers !== nextMarkers) {
-      // 길이가 다르면 변경됨
-      if (prevMarkers.length !== nextMarkers.length) return false; // 각 마커의 ID 비교
-
-      for (var i = 0; i < prevMarkers.length; i++) {
-        if (prevMarkers[i].id !== nextMarkers[i].id) {
-          return false; // 변경됨 → 리렌더링
-        }
-      }
-    } // 2. selectedItems 비교 (참조만 비교)
-
-
-    if (prevProps.selectedItems !== nextProps.selectedItems) {
-      return false; // 변경됨 → 리렌더링
-    }
-
-    return true; // 같음 → 리렌더링 스킵
-  });
 
   var css_248z = ".MintMapWrapper-module_mint-map-control-wrapper-container__DONh7 {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  pointer-events: none;\n  z-index: 101;\n}\n\n.MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV {\n  position: absolute;\n  z-index: 1;\n}";
   var styles = {"mint-map-control-wrapper-container":"MintMapWrapper-module_mint-map-control-wrapper-container__DONh7","mint-map-overlay-wrapper":"MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV"};
@@ -9235,10 +9612,13 @@
   exports.Spacing = Spacing;
   exports.SpatialHashGrid = SpatialHashGrid;
   exports.Status = Status;
+  exports.WoongCanvasLayer = WoongCanvasLayer;
+  exports.calculateTextBoxWidth = calculateTextBoxWidth;
   exports.computeMarkerOffset = computeMarkerOffset;
   exports.computePolygonOffsets = computePolygonOffsets;
   exports.getClusterInfo = getClusterInfo;
   exports.getMapOfType = getMapOfType;
+  exports.hexToRgba = hexToRgba;
   exports.isPointInMarkerData = isPointInMarkerData;
   exports.isPointInPolygon = isPointInPolygon;
   exports.isPointInPolygonData = isPointInPolygonData;