@mint-ui/map 1.2.0-test.11 → 1.2.0-test.13

package/dist/index.es.js

@@ -961,6 +961,29 @@ var hexToRgba = function (hexColor, 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 = createContext(null);
 var KonvaMarkerProvider = function (_a) {
@@ -5613,20 +5636,8 @@ var renderPolygonEvent = function (selectedFillColor, selectedStrokeColor, selec
 // 메인 컴포넌트
 // ============================================================================
 
-/**
- * Konva 기반 고성능 마커/폴리곤 렌더링 컴포넌트
- *
- * 특징:
- * - Base/Event 레이어 분리로 성능 최적화
- * - LRU 캐시로 좌표 변환 결과 캐싱
- * - Spatial Hash Grid로 빠른 Hit Test
- * - Viewport Culling으로 보이는 영역만 렌더링
- *
- * @template T 마커 데이터의 추가 속성 타입
- */
-
 var WoongCanvasLayerComponent = function (props) {
-  var markers = props.markers,
+  var data = props.data,
       dataType = props.dataType,
       onClick = props.onClick,
       onMouseOver = props.onMouseOver,
@@ -5645,11 +5656,13 @@ var WoongCanvasLayerComponent = function (props) {
       externalSelectedItem = props.selectedItem,
       _f = props.disableInteraction,
       disableInteraction = _f === void 0 ? false : _f,
-      options = __rest(props, ["markers", "dataType", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // --------------------------------------------------------------------------
+      options = __rest(props, ["data", "dataType", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // renderConfig 추출 (MARKER 모드에서만 존재)
+
+
+  var renderConfig = dataType === CanvasDataType.MARKER ? props.renderConfig : undefined; // --------------------------------------------------------------------------
   // Hooks & Context
   // --------------------------------------------------------------------------
 
-
   var controller = useMintMapController();
   var context = useKonvaMarkerContext();
   var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // --------------------------------------------------------------------------
@@ -5670,9 +5683,9 @@ var WoongCanvasLayerComponent = function (props) {
   // Data Refs - 선택 및 Hover 상태 관리
   // --------------------------------------------------------------------------
 
-  /** markers prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
+  /** data prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
 
-  var markersRef = useRef(markers); // --------------------------------------------------------------------------
+  var markersRef = useRef(data); // --------------------------------------------------------------------------
   // State Refs - 선택 및 Hover 상태 관리
   // --------------------------------------------------------------------------
 
@@ -5844,6 +5857,7 @@ var WoongCanvasLayerComponent = function (props) {
   };
   /**
    * 마커 좌표 변환 결과를 캐시하고 반환
+   *
    * @param markerData 마커 데이터
    * @returns 변환된 좌표 또는 null
    */
@@ -5980,7 +5994,8 @@ var WoongCanvasLayerComponent = function (props) {
             ctx: ctx,
             items: visibleMarkers,
             selectedIds: selectedIdsRef.current,
-            utils: renderUtils
+            utils: renderUtils,
+            config: renderConfig
           });
         },
         perfectDrawEnabled: false,
@@ -6010,7 +6025,8 @@ var WoongCanvasLayerComponent = function (props) {
       layer: layer,
       selectedIds: selectedIdsRef.current,
       items: markersRef.current,
-      utils: renderUtils
+      utils: renderUtils,
+      config: renderConfig
     });
   };
   /**
@@ -6051,7 +6067,8 @@ var WoongCanvasLayerComponent = function (props) {
             hoveredItem: hoveredItemRef.current,
             utils: renderUtils,
             selectedItems: selectedItems,
-            selectedItem: selectedItemRef.current
+            selectedItem: selectedItemRef.current,
+            config: renderConfig
           });
         },
         perfectDrawEnabled: false,
@@ -6314,11 +6331,11 @@ var WoongCanvasLayerComponent = function (props) {
 
     try {
       var clickedOffset = controller.positionToOffset(event.param.position);
-      var data = findData(clickedOffset);
+      var data_1 = findData(clickedOffset);
 
-      if (data) {
-        handleLocalClick(data);
-        onClick(data, selectedIdsRef.current);
+      if (data_1) {
+        handleLocalClick(data_1);
+        onClick(data_1, selectedIdsRef.current);
       }
     } catch (error) {
       console.error('[WoongKonvaMarker] handleClick error:', error);
@@ -6595,13 +6612,13 @@ var WoongCanvasLayerComponent = function (props) {
 
     doRenderEvent();
   }, [externalSelectedItem]); // --------------------------------------------------------------------------
-  // Lifecycle: 마커 데이터 변경 시 렌더링
+  // Lifecycle: 데이터 변경 시 렌더링
   // --------------------------------------------------------------------------
 
   useEffect(function () {
     if (!stageRef.current) return; // markersRef 동기화
 
-    markersRef.current = markers; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
+    markersRef.current = data; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
 
     if (containerRef.current) {
       containerRef.current.style.transform = '';
@@ -6618,18 +6635,18 @@ var WoongCanvasLayerComponent = function (props) {
     /**
      * 선택 상태 동기화 (최적화 버전)
      *
-     * 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 markersMap = new Map(data.map(function (m) {
       return [m.id, m];
     }));
     var newSelectedItemsMap = new Map();
@@ -6652,7 +6669,7 @@ var WoongCanvasLayerComponent = function (props) {
     selectedItemsMapRef.current = newSelectedItemsMap; // 즉시 렌더링
 
     renderAllImmediate();
-  }, [markers]);
+  }, [data]);
   return createPortal(React.createElement("div", {
     ref: containerRef,
     style: {
@@ -6663,27 +6680,96 @@ var WoongCanvasLayerComponent = function (props) {
   }), divElement);
 };
 /**
- * 🔥 React.memo 최적화: 마커 배열과 selectedItems 변경 체크
+ * 🚀 WoongCanvasLayer - Konva 기반 초고성능 마커/폴리곤 렌더링 컴포넌트
+ *
+ * ## 📌 주요 특징
+ * - **30,000개 이상의 폴리곤/마커를 60fps로 렌더링**
+ * - **Multi-Layer 아키텍처**: Base/Animation/Event 레이어 분리
+ * - **Spatial Hash Grid**: O(1) 수준의 빠른 Hit Test
+ * - **LRU 캐시**: 좌표 변환 결과 캐싱으로 성능 최적화
+ * - **Viewport Culling**: 화면에 보이는 영역만 렌더링
+ * - **Discriminated Union Props**: 타입 안전한 MARKER/POLYGON 모드
  *
- * 비교 전략:
- * 1. markers 배열 비교
- * 2. selectedItems 배열 비교 (외부 제어)
+ * ## 🎯 사용 방법
  *
- * 주의: JSON.stringify() 사용 금지! (매우 느림)
+ * ### 1️⃣ POLYGON 모드 (자동 렌더링)
+ * ```tsx
+ * <WoongCanvasLayer
+ *   dataType={CanvasDataType.POLYGON}
+ *   data={polygons}
+ *   baseFillColor="rgba(255, 100, 100, 0.5)"
+ *   baseStrokeColor="rgba(200, 50, 50, 0.8)"
+ *   baseLineWidth={2}
+ *   selectedFillColor="rgba(255, 193, 7, 0.7)"
+ *   selectedStrokeColor="rgba(255, 152, 0, 1)"
+ *   selectedLineWidth={4}
+ *   hoveredFillColor="rgba(100, 150, 255, 0.8)"  // optional
+ *   hoveredStrokeColor="rgba(0, 100, 200, 1)"    // optional
+ *   hoveredLineWidth={3}                         // optional
+ *   enableMultiSelect={true}
+ *   onClick={handleClick}
+ * />
+ * ```
+ *
+ * ### 2️⃣ MARKER 모드 (커스텀 렌더링)
+ * ```tsx
+ * <WoongCanvasLayer
+ *   dataType={CanvasDataType.MARKER}
+ *   data={markers}
+ *   renderBase={renderMarkerBase}              // required
+ *   renderAnimation={renderMarkerAnimation}    // optional
+ *   renderEvent={renderMarkerEvent}            // optional
+ *   topOnHover={true}
+ *   onClick={handleClick}
+ * />
+ * ```
+ *
+ * ## 📊 데이터 형식
+ * ```typescript
+ * const data: KonvaCanvasData<T>[] = [
+ *   {
+ *     id: 'unique-id',
+ *     position: new Position(lat, lng),
+ *     // POLYGON: paths 필수
+ *     paths: [[[lat, lng], [lat, lng], ...]],
+ *     // MARKER: boxWidth/boxHeight 권장 (Hit Test 정확도)
+ *     boxWidth: 60,
+ *     boxHeight: 75,
+ *     // 커스텀 데이터
+ *     ...customData
+ *   }
+ * ];
+ * ```
+ *
+ * ## ⚡ 성능 최적화 팁
+ * 1. **동적 boxWidth 계산**: `measureText()`로 실제 너비 계산 후 전달
+ * 2. **enableViewportCulling**: 대량 데이터 시 필수 (기본 true)
+ * 3. **selectedItems 외부 관리**: 상태를 외부에서 관리하여 리렌더링 최소화
+ * 4. **React.memo 최적화**: 컴포넌트가 자동으로 불필요한 리렌더링 방지
+ *
+ * @template T 마커/폴리곤 데이터의 추가 속성 타입
+ *
+ * @example
+ * // 동적 boxWidth 계산 예시
+ * const tempCtx = document.createElement('canvas').getContext('2d');
+ * tempCtx.font = 'bold 15px Arial';
+ * const boxWidth = Math.max(60, tempCtx.measureText(text).width + 20);
+ *
+ * @see {@link https://github.com/your-repo/docs/WoongCanvasLayer.md} 전체 문서
  */
 
 
 var WoongCanvasLayer = React.memo(WoongCanvasLayerComponent, function (prevProps, nextProps) {
-  // 1. markers 비교
-  var prevMarkers = prevProps.markers;
-  var nextMarkers = nextProps.markers; // 참조가 같으면 스킵
+  // 1. data 비교
+  var prevData = prevProps.data;
+  var nextData = nextProps.data; // 참조가 같으면 스킵
 
-  if (prevMarkers !== nextMarkers) {
+  if (prevData !== nextData) {
     // 길이가 다르면 변경됨
-    if (prevMarkers.length !== nextMarkers.length) return false; // 각 마커의 ID 비교
+    if (prevData.length !== nextData.length) return false; // 각 데이터의 ID 비교
 
-    for (var i = 0; i < prevMarkers.length; i++) {
-      if (prevMarkers[i].id !== nextMarkers[i].id) {
+    for (var i = 0; i < prevData.length; i++) {
+      if (prevData[i].id !== nextData[i].id) {
         return false; // 변경됨 → 리렌더링
       }
     }
@@ -6698,18 +6784,6 @@ var WoongCanvasLayer = React.memo(WoongCanvasLayerComponent, function (prevProps
     return false; // 변경됨 → 리렌더링
   }
 
-  if (prevProps.onClick !== nextProps.onClick) {
-    return false; // 변경됨 → 리렌더링
-  }
-
-  if (prevProps.onMouseOver !== nextProps.onMouseOver) {
-    return false; // 변경됨 → 리렌더링
-  }
-
-  if (prevProps.onMouseOut !== nextProps.onMouseOut) {
-    return false; // 변경됨 → 리렌더링
-  }
-
   if (prevProps.disableInteraction !== nextProps.disableInteraction) {
     return false; // 변경됨 → 리렌더링
   }
@@ -9548,4 +9622,4 @@ function MintMap(_a) {
   }), loading));
 }
 
-export { AnimationPlayer, Bounds, CanvasDataType, CanvasMarker, CanvasMarkerClaude, CanvasMarkerHanquf, CircleMarker, DEFAULT_CULLING_MARGIN, DEFAULT_MAX_CACHE_SIZE, Drawable, GeoCalulator, GoogleMintMapController, KonvaMarkerProvider, LRUCache, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SPATIAL_GRID_CELL_SIZE, SVGCircle, SVGPolygon, SVGRect, Spacing, SpatialHashGrid, Status, WoongCanvasLayer, computeMarkerOffset, computePolygonOffsets, getClusterInfo, getMapOfType, hexToRgba, isPointInMarkerData, isPointInPolygon, isPointInPolygonData, log, useKonvaMarkerContext, useMarkerMoving, useMintMapController, waiting };
+export { AnimationPlayer, Bounds, CanvasDataType, CanvasMarker, CanvasMarkerClaude, CanvasMarkerHanquf, CircleMarker, DEFAULT_CULLING_MARGIN, DEFAULT_MAX_CACHE_SIZE, Drawable, GeoCalulator, GoogleMintMapController, KonvaMarkerProvider, LRUCache, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SPATIAL_GRID_CELL_SIZE, SVGCircle, SVGPolygon, SVGRect, Spacing, SpatialHashGrid, Status, WoongCanvasLayer, calculateTextBoxWidth, computeMarkerOffset, computePolygonOffsets, getClusterInfo, getMapOfType, hexToRgba, isPointInMarkerData, isPointInPolygon, isPointInPolygonData, log, useKonvaMarkerContext, useMarkerMoving, useMintMapController, waiting };

package/dist/index.js

@@ -65,6 +65,7 @@ Object.defineProperty(exports, 'CanvasDataType', {
 	enumerable: true,
 	get: function () { return types.CanvasDataType; }
 });
+exports.calculateTextBoxWidth = utils.calculateTextBoxWidth;
 exports.computeMarkerOffset = utils.computeMarkerOffset;
 exports.computePolygonOffsets = utils.computePolygonOffsets;
 exports.hexToRgba = utils.hexToRgba;

package/dist/index.umd.js

@@ -965,6 +965,29 @@
 
     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) {
@@ -5617,20 +5640,8 @@
   // 메인 컴포넌트
   // ============================================================================
 
-  /**
-   * Konva 기반 고성능 마커/폴리곤 렌더링 컴포넌트
-   *
-   * 특징:
-   * - Base/Event 레이어 분리로 성능 최적화
-   * - LRU 캐시로 좌표 변환 결과 캐싱
-   * - Spatial Hash Grid로 빠른 Hit Test
-   * - Viewport Culling으로 보이는 영역만 렌더링
-   *
-   * @template T 마커 데이터의 추가 속성 타입
-   */
-
   var WoongCanvasLayerComponent = function (props) {
-    var markers = props.markers,
+    var data = props.data,
         dataType = props.dataType,
         onClick = props.onClick,
         onMouseOver = props.onMouseOver,
@@ -5649,11 +5660,13 @@
         externalSelectedItem = props.selectedItem,
         _f = props.disableInteraction,
         disableInteraction = _f === void 0 ? false : _f,
-        options = tslib.__rest(props, ["markers", "dataType", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // --------------------------------------------------------------------------
+        options = tslib.__rest(props, ["data", "dataType", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // renderConfig 추출 (MARKER 모드에서만 존재)
+
+
+    var renderConfig = dataType === exports.CanvasDataType.MARKER ? props.renderConfig : undefined; // --------------------------------------------------------------------------
     // Hooks & Context
     // --------------------------------------------------------------------------
 
-
     var controller = useMintMapController();
     var context = useKonvaMarkerContext();
     var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // --------------------------------------------------------------------------
@@ -5674,9 +5687,9 @@
     // Data Refs - 선택 및 Hover 상태 관리
     // --------------------------------------------------------------------------
 
-    /** markers prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
+    /** data prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
 
-    var markersRef = React.useRef(markers); // --------------------------------------------------------------------------
+    var markersRef = React.useRef(data); // --------------------------------------------------------------------------
     // State Refs - 선택 및 Hover 상태 관리
     // --------------------------------------------------------------------------
 
@@ -5848,6 +5861,7 @@
     };
     /**
      * 마커 좌표 변환 결과를 캐시하고 반환
+     *
      * @param markerData 마커 데이터
      * @returns 변환된 좌표 또는 null
      */
@@ -5984,7 +5998,8 @@
               ctx: ctx,
               items: visibleMarkers,
               selectedIds: selectedIdsRef.current,
-              utils: renderUtils
+              utils: renderUtils,
+              config: renderConfig
             });
           },
           perfectDrawEnabled: false,
@@ -6014,7 +6029,8 @@
         layer: layer,
         selectedIds: selectedIdsRef.current,
         items: markersRef.current,
-        utils: renderUtils
+        utils: renderUtils,
+        config: renderConfig
       });
     };
     /**
@@ -6055,7 +6071,8 @@
               hoveredItem: hoveredItemRef.current,
               utils: renderUtils,
               selectedItems: selectedItems,
-              selectedItem: selectedItemRef.current
+              selectedItem: selectedItemRef.current,
+              config: renderConfig
             });
           },
           perfectDrawEnabled: false,
@@ -6318,11 +6335,11 @@
 
       try {
         var clickedOffset = controller.positionToOffset(event.param.position);
-        var data = findData(clickedOffset);
+        var data_1 = findData(clickedOffset);
 
-        if (data) {
-          handleLocalClick(data);
-          onClick(data, selectedIdsRef.current);
+        if (data_1) {
+          handleLocalClick(data_1);
+          onClick(data_1, selectedIdsRef.current);
         }
       } catch (error) {
         console.error('[WoongKonvaMarker] handleClick error:', error);
@@ -6599,13 +6616,13 @@
 
       doRenderEvent();
     }, [externalSelectedItem]); // --------------------------------------------------------------------------
-    // Lifecycle: 마커 데이터 변경 시 렌더링
+    // Lifecycle: 데이터 변경 시 렌더링
     // --------------------------------------------------------------------------
 
     React.useEffect(function () {
       if (!stageRef.current) return; // markersRef 동기화
 
-      markersRef.current = markers; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
+      markersRef.current = data; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
 
       if (containerRef.current) {
         containerRef.current.style.transform = '';
@@ -6622,18 +6639,18 @@
       /**
        * 선택 상태 동기화 (최적화 버전)
        *
-       * 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 markersMap = new Map(data.map(function (m) {
         return [m.id, m];
       }));
       var newSelectedItemsMap = new Map();
@@ -6656,7 +6673,7 @@
       selectedItemsMapRef.current = newSelectedItemsMap; // 즉시 렌더링
 
       renderAllImmediate();
-    }, [markers]);
+    }, [data]);
     return reactDom.createPortal(React__default["default"].createElement("div", {
       ref: containerRef,
       style: {
@@ -6667,27 +6684,96 @@
     }), divElement);
   };
   /**
-   * 🔥 React.memo 최적화: 마커 배열과 selectedItems 변경 체크
+   * 🚀 WoongCanvasLayer - Konva 기반 초고성능 마커/폴리곤 렌더링 컴포넌트
+   *
+   * ## 📌 주요 특징
+   * - **30,000개 이상의 폴리곤/마커를 60fps로 렌더링**
+   * - **Multi-Layer 아키텍처**: Base/Animation/Event 레이어 분리
+   * - **Spatial Hash Grid**: O(1) 수준의 빠른 Hit Test
+   * - **LRU 캐시**: 좌표 변환 결과 캐싱으로 성능 최적화
+   * - **Viewport Culling**: 화면에 보이는 영역만 렌더링
+   * - **Discriminated Union Props**: 타입 안전한 MARKER/POLYGON 모드
    *
-   * 비교 전략:
-   * 1. markers 배열 비교
-   * 2. selectedItems 배열 비교 (외부 제어)
+   * ## 🎯 사용 방법
    *
-   * 주의: JSON.stringify() 사용 금지! (매우 느림)
+   * ### 1️⃣ POLYGON 모드 (자동 렌더링)
+   * ```tsx
+   * <WoongCanvasLayer
+   *   dataType={CanvasDataType.POLYGON}
+   *   data={polygons}
+   *   baseFillColor="rgba(255, 100, 100, 0.5)"
+   *   baseStrokeColor="rgba(200, 50, 50, 0.8)"
+   *   baseLineWidth={2}
+   *   selectedFillColor="rgba(255, 193, 7, 0.7)"
+   *   selectedStrokeColor="rgba(255, 152, 0, 1)"
+   *   selectedLineWidth={4}
+   *   hoveredFillColor="rgba(100, 150, 255, 0.8)"  // optional
+   *   hoveredStrokeColor="rgba(0, 100, 200, 1)"    // optional
+   *   hoveredLineWidth={3}                         // optional
+   *   enableMultiSelect={true}
+   *   onClick={handleClick}
+   * />
+   * ```
+   *
+   * ### 2️⃣ MARKER 모드 (커스텀 렌더링)
+   * ```tsx
+   * <WoongCanvasLayer
+   *   dataType={CanvasDataType.MARKER}
+   *   data={markers}
+   *   renderBase={renderMarkerBase}              // required
+   *   renderAnimation={renderMarkerAnimation}    // optional
+   *   renderEvent={renderMarkerEvent}            // optional
+   *   topOnHover={true}
+   *   onClick={handleClick}
+   * />
+   * ```
+   *
+   * ## 📊 데이터 형식
+   * ```typescript
+   * const data: KonvaCanvasData<T>[] = [
+   *   {
+   *     id: 'unique-id',
+   *     position: new Position(lat, lng),
+   *     // POLYGON: paths 필수
+   *     paths: [[[lat, lng], [lat, lng], ...]],
+   *     // MARKER: boxWidth/boxHeight 권장 (Hit Test 정확도)
+   *     boxWidth: 60,
+   *     boxHeight: 75,
+   *     // 커스텀 데이터
+   *     ...customData
+   *   }
+   * ];
+   * ```
+   *
+   * ## ⚡ 성능 최적화 팁
+   * 1. **동적 boxWidth 계산**: `measureText()`로 실제 너비 계산 후 전달
+   * 2. **enableViewportCulling**: 대량 데이터 시 필수 (기본 true)
+   * 3. **selectedItems 외부 관리**: 상태를 외부에서 관리하여 리렌더링 최소화
+   * 4. **React.memo 최적화**: 컴포넌트가 자동으로 불필요한 리렌더링 방지
+   *
+   * @template T 마커/폴리곤 데이터의 추가 속성 타입
+   *
+   * @example
+   * // 동적 boxWidth 계산 예시
+   * const tempCtx = document.createElement('canvas').getContext('2d');
+   * tempCtx.font = 'bold 15px Arial';
+   * const boxWidth = Math.max(60, tempCtx.measureText(text).width + 20);
+   *
+   * @see {@link https://github.com/your-repo/docs/WoongCanvasLayer.md} 전체 문서
    */
 
 
   var WoongCanvasLayer = React__default["default"].memo(WoongCanvasLayerComponent, function (prevProps, nextProps) {
-    // 1. markers 비교
-    var prevMarkers = prevProps.markers;
-    var nextMarkers = nextProps.markers; // 참조가 같으면 스킵
+    // 1. data 비교
+    var prevData = prevProps.data;
+    var nextData = nextProps.data; // 참조가 같으면 스킵
 
-    if (prevMarkers !== nextMarkers) {
+    if (prevData !== nextData) {
       // 길이가 다르면 변경됨
-      if (prevMarkers.length !== nextMarkers.length) return false; // 각 마커의 ID 비교
+      if (prevData.length !== nextData.length) return false; // 각 데이터의 ID 비교
 
-      for (var i = 0; i < prevMarkers.length; i++) {
-        if (prevMarkers[i].id !== nextMarkers[i].id) {
+      for (var i = 0; i < prevData.length; i++) {
+        if (prevData[i].id !== nextData[i].id) {
           return false; // 변경됨 → 리렌더링
         }
       }
@@ -6702,18 +6788,6 @@
       return false; // 변경됨 → 리렌더링
     }
 
-    if (prevProps.onClick !== nextProps.onClick) {
-      return false; // 변경됨 → 리렌더링
-    }
-
-    if (prevProps.onMouseOver !== nextProps.onMouseOver) {
-      return false; // 변경됨 → 리렌더링
-    }
-
-    if (prevProps.onMouseOut !== nextProps.onMouseOut) {
-      return false; // 변경됨 → 리렌더링
-    }
-
     if (prevProps.disableInteraction !== nextProps.disableInteraction) {
       return false; // 변경됨 → 리렌더링
     }
@@ -9597,6 +9671,7 @@
   exports.SpatialHashGrid = SpatialHashGrid;
   exports.Status = Status;
   exports.WoongCanvasLayer = WoongCanvasLayer;
+  exports.calculateTextBoxWidth = calculateTextBoxWidth;
   exports.computeMarkerOffset = computeMarkerOffset;
   exports.computePolygonOffsets = computePolygonOffsets;
   exports.getClusterInfo = getClusterInfo;

package/package.json

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

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

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-interface Cluster {
-    buildingCnt: number;
-    lat: number;
-    lng: number;
-}
-export interface ClusterMarkerProps {
-    cluster: Cluster;
-}
-declare const ClusterMarker: ({ cluster }: ClusterMarkerProps) => JSX.Element;
-export default ClusterMarker;