@mint-ui/map 1.2.0-test.10 → 1.2.0-test.12

package/dist/components/mint-map/core/MintMapController.d.ts

@@ -24,6 +24,7 @@ export declare abstract class MintMapController {
     abstract updateMarker(marker: Marker, options: MarkerOptions): void;
     abstract clearDrawable(drawable: Drawable): boolean;
     abstract markerToTheTop(marker: Marker): void;
+    abstract restoreMarkerZIndex(marker: Marker): void;
     abstract isMapDragged(): boolean;
     abstract setMapDragged(value: boolean): void;
     abstract setMarkerZIndex(marker: Marker, zIndex: number): void;

package/dist/components/mint-map/core/MintMapCore.js

@@ -9,8 +9,7 @@ var MapTypes = require('../types/MapTypes.js');
 var MintMapProvider = require('./provider/MintMapProvider.js');
 var MintMapCore_module = require('./MintMapCore.module.scss.js');
 require('./advanced/woongCanvas/shared/types.js');
-require('../types/MapDrawables.js');
-require('../types/MapEventTypes.js');
+require('./advanced/woongCanvas/shared/utils.js');
 var context = require('./advanced/woongCanvas/shared/context.js');
 require('./advanced/woongCanvas/shared/performance.js');
 

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

@@ -0,0 +1,162 @@
+import React from "react";
+import { MarkerOptions } from "../../../types";
+import { KonvaCanvasMarkerData, CanvasDataType, CustomRenderBase, CustomRenderAnimation, CustomRenderEvent } from "./shared";
+export { KonvaMarkerProvider, LRUCache, SpatialHashGrid, CanvasDataType } from "./shared";
+export type { KonvaCanvasMarkerOption, Paths, KonvaCanvasMarkerData, CustomRenderBase, CustomRenderAnimation, CustomRenderEvent, RenderUtils, RenderBaseParams, RenderAnimationParams, RenderEventParams } from "./shared";
+/**
+ * 공통 Props (MARKER와 POLYGON 모두 사용)
+ */
+interface WoongCanvasLayerBaseProps<T> extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
+    /** 렌더링할 데이터 배열 (마커 또는 폴리곤) */
+    data: KonvaCanvasMarkerData<T>[];
+    /** 마커 클릭 시 호출되는 콜백 (선택) */
+    onClick?: (payload: KonvaCanvasMarkerData<T>, selectedIds: Set<string>) => void;
+    /** 마커에 마우스 오버 시 호출되는 콜백 (선택) */
+    onMouseOver?: (payload: KonvaCanvasMarkerData<T>) => void;
+    /** 마커에서 마우스 아웃 시 호출되는 콜백 (선택) */
+    onMouseOut?: (payload: KonvaCanvasMarkerData<T>) => void;
+    /** 다중 선택 활성화 여부 (기본: false) */
+    enableMultiSelect?: boolean;
+    /** hover 시 마커를 최상단으로 표시 (기본: false) */
+    topOnHover?: boolean;
+    /** 뷰포트 컬링 활성화 여부 (기본: true) */
+    enableViewportCulling?: boolean;
+    /** 뷰포트 컬링 여유 공간 (기본: 100px) */
+    cullingMargin?: number;
+    /** LRU 캐시 최대 크기 (기본: 10000) */
+    maxCacheSize?: number;
+    /** 외부에서 제어하는 선택된 항목 배열 (선택) */
+    selectedItems?: KonvaCanvasMarkerData<T>[];
+    /** 외부에서 전달된 단일 선택 아이템 (특별한 효과용) */
+    selectedItem?: KonvaCanvasMarkerData<T> | null;
+    /** 상호작용 비활성화 (hover, click 등 모든 이벤트 차단) */
+    disableInteraction?: boolean;
+}
+/**
+ * MARKER 타입 Props - 커스텀 렌더링 필수
+ */
+interface WoongCanvasLayerPropsForMarker<T> extends WoongCanvasLayerBaseProps<T> {
+    /** 데이터 타입 */
+    dataType: CanvasDataType.MARKER;
+    /** Base Layer 렌더링 함수 (필수) */
+    renderBase: CustomRenderBase<T>;
+    /** Animation Layer 렌더링 함수 (선택, 애니메이션용) */
+    renderAnimation?: CustomRenderAnimation<T>;
+    /** Event Layer 렌더링 함수 (선택) */
+    renderEvent?: CustomRenderEvent<T>;
+}
+/**
+ * POLYGON 타입 Props - 스타일 속성으로 내부 처리
+ */
+interface WoongCanvasLayerPropsForPolygon<T> extends WoongCanvasLayerBaseProps<T> {
+    /** 데이터 타입 */
+    dataType: CanvasDataType.POLYGON;
+    /** 기본 폴리곤 채우기 색상 (필수) */
+    baseFillColor: string;
+    /** 기본 폴리곤 테두리 색상 (필수) */
+    baseStrokeColor: string;
+    /** 기본 폴리곤 테두리 두께 (필수) */
+    baseLineWidth: number;
+    /** 선택된 폴리곤 채우기 색상 (필수) */
+    selectedFillColor: string;
+    /** 선택된 폴리곤 테두리 색상 (필수) */
+    selectedStrokeColor: string;
+    /** 선택된 폴리곤 테두리 두께 (필수) */
+    selectedLineWidth: number;
+    /** 마지막 선택된 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor) */
+    activeFillColor?: string;
+    /** 마지막 선택된 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor) */
+    activeStrokeColor?: string;
+    /** 마지막 선택된 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth) */
+    activeLineWidth?: number;
+    /** Hover 시 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor) */
+    hoveredFillColor?: string;
+    /** Hover 시 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor) */
+    hoveredStrokeColor?: string;
+    /** Hover 시 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth) */
+    hoveredLineWidth?: number;
+}
+/**
+ * 최종 Props 타입 - Discriminated Union
+ */
+export declare type WoongCanvasLayerProps<T> = WoongCanvasLayerPropsForMarker<T> | WoongCanvasLayerPropsForPolygon<T>;
+/**
+ * 🚀 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️⃣ 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: KonvaCanvasMarkerData<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} 전체 문서
+ */
+declare const WoongCanvasLayer: <T>(props: WoongCanvasLayerProps<T>) => React.ReactPortal;
+export default WoongCanvasLayer;

package/dist/components/mint-map/core/advanced/woongCanvas/{WoongKonvaMarker.js → WoongCanvasLayer.js}

@@ -14,6 +14,7 @@ var types = require('./shared/types.js');
 var utils = require('./shared/utils.js');
 var context = require('./shared/context.js');
 var performance = require('./shared/performance.js');
+var renderer = require('./shared/renderer.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -23,42 +24,27 @@ var Konva__default = /*#__PURE__*/_interopDefaultLegacy(Konva);
 // 메인 컴포넌트
 // ============================================================================
 
-/**
- * Konva 기반 고성능 마커/폴리곤 렌더링 컴포넌트
- *
- * 특징:
- * - Base/Event 레이어 분리로 성능 최적화
- * - LRU 캐시로 좌표 변환 결과 캐싱
- * - Spatial Hash Grid로 빠른 Hit Test
- * - Viewport Culling으로 보이는 영역만 렌더링
- *
- * @template T 마커 데이터의 추가 속성 타입
- */
-
-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 ? performance.DEFAULT_CULLING_MARGIN : _e,
-      _f = _a.maxCacheSize,
-      maxCacheSize = _f === void 0 ? performance.DEFAULT_MAX_CACHE_SIZE : _f,
-      externalSelectedItems = _a.selectedItems,
-      externalSelectedItem = _a.selectedItem,
-      _g = _a.disableInteraction,
-      disableInteraction = _g === void 0 ? false : _g,
-      options = tslib.__rest(_a, ["markers", "dataType", "onClick", "onMouseOver", "onMouseOut", "renderBase", "renderAnimation", "renderEvent", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // --------------------------------------------------------------------------
+var WoongCanvasLayerComponent = 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 ? performance.DEFAULT_CULLING_MARGIN : _d,
+      _e = props.maxCacheSize,
+      maxCacheSize = _e === void 0 ? performance.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
   // --------------------------------------------------------------------------
 
@@ -83,9 +69,9 @@ var WoongKonvaMarkerComponent = function (_a) {
   // 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 상태 관리
   // --------------------------------------------------------------------------
 
@@ -257,6 +243,7 @@ var WoongKonvaMarkerComponent = function (_a) {
   };
   /**
    * 마커 좌표 변환 결과를 캐시하고 반환
+   *
    * @param markerData 마커 데이터
    * @returns 변환된 좌표 또는 null
    */
@@ -336,7 +323,7 @@ var WoongKonvaMarkerComponent = function (_a) {
       }
     }
   }; // --------------------------------------------------------------------------
-  // 렌더링 함수
+  // 렌더링 함수 결정 (dataType에 따라)
   // --------------------------------------------------------------------------
 
   /**
@@ -351,6 +338,18 @@ var WoongKonvaMarkerComponent = function (_a) {
   /** Base Layer에서 사용할 빈 Set (재사용) */
 
   React.useRef(new Set());
+  /**
+   * 실제 사용할 렌더링 함수 결정
+   * - MARKER: 외부에서 전달받은 renderBase 사용 (필수)
+   * - POLYGON: renderer.ts의 팩토리 함수로 생성 (props 기반)
+   */
+
+  var renderBase = dataType === types.CanvasDataType.MARKER ? props.renderBase : renderer.renderPolygonBase(props.baseFillColor, props.baseStrokeColor, props.baseLineWidth);
+  var renderAnimation = dataType === types.CanvasDataType.MARKER ? props.renderAnimation : undefined;
+  var renderEvent = dataType === types.CanvasDataType.MARKER ? props.renderEvent : function () {
+    var polygonProps = props;
+    return renderer.renderPolygonEvent(polygonProps.selectedFillColor, polygonProps.selectedStrokeColor, polygonProps.selectedLineWidth, polygonProps.activeFillColor, polygonProps.activeStrokeColor, polygonProps.activeLineWidth, polygonProps.hoveredFillColor, polygonProps.hoveredStrokeColor, polygonProps.hoveredLineWidth);
+  }();
   /**
    * Base 레이어 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
    *
@@ -715,11 +714,11 @@ var WoongKonvaMarkerComponent = function (_a) {
 
     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);
@@ -996,13 +995,13 @@ var WoongKonvaMarkerComponent = function (_a) {
 
     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 = '';
@@ -1019,18 +1018,18 @@ var WoongKonvaMarkerComponent = function (_a) {
     /**
      * 선택 상태 동기화 (최적화 버전)
      *
-     * 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();
@@ -1053,40 +1052,107 @@ var WoongKonvaMarkerComponent = function (_a) {
     selectedItemsMapRef.current = newSelectedItemsMap; // 즉시 렌더링
 
     renderAllImmediate();
-  }, [markers]);
+  }, [data]);
   return reactDom.createPortal(React__default["default"].createElement("div", {
     ref: containerRef,
-    style: tslib.__assign({
+    style: {
       position: 'absolute',
       width: '100%',
       height: '100%'
-    }, disableInteraction && {
-      pointerEvents: 'none'
-    })
+    }
   }), 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️⃣ 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}
+ * />
+ * ```
  *
- * 비교 전략:
- * 1. markers 배열 비교
- * 2. selectedItems 배열 비교 (외부 제어)
+ * ### 2️⃣ MARKER 모드 (커스텀 렌더링)
+ * ```tsx
+ * <WoongCanvasLayer
+ *   dataType={CanvasDataType.MARKER}
+ *   data={markers}
+ *   renderBase={renderMarkerBase}              // required
+ *   renderAnimation={renderMarkerAnimation}    // optional
+ *   renderEvent={renderMarkerEvent}            // optional
+ *   topOnHover={true}
+ *   onClick={handleClick}
+ * />
+ * ```
  *
- * 주의: JSON.stringify() 사용 금지! (매우 느림)
+ * ## 📊 데이터 형식
+ * ```typescript
+ * const data: KonvaCanvasMarkerData<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 WoongKonvaMarker = React__default["default"].memo(WoongKonvaMarkerComponent, function (prevProps, nextProps) {
-  // 1. markers 비교
-  var prevMarkers = prevProps.markers;
-  var nextMarkers = nextProps.markers; // 참조가 같으면 스킵
+var WoongCanvasLayer = React__default["default"].memo(WoongCanvasLayerComponent, function (prevProps, nextProps) {
+  // 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; // 변경됨 → 리렌더링
       }
     }
@@ -1101,18 +1167,6 @@ var WoongKonvaMarker = React__default["default"].memo(WoongKonvaMarkerComponent,
     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; // 변경됨 → 리렌더링
   }
@@ -1127,4 +1181,4 @@ Object.defineProperty(exports, 'CanvasDataType', {
 exports.KonvaMarkerProvider = context.KonvaMarkerProvider;
 exports.LRUCache = performance.LRUCache;
 exports.SpatialHashGrid = performance.SpatialHashGrid;
-exports["default"] = WoongKonvaMarker;
+exports["default"] = WoongCanvasLayer;

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

@@ -1,3 +1,3 @@
-export { default as WoongKonvaMarker } from "./WoongKonvaMarker";
-export * from "./WoongKonvaMarker";
+export { default as WoongCanvasLayer } from "./WoongCanvasLayer";
+export * from "./WoongCanvasLayer";
 export * from "./shared";

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

@@ -0,0 +1,59 @@
+/**
+ * 폴리곤 렌더링 유틸리티
+ *
+ * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
+ */
+import { CustomRenderBase, CustomRenderEvent, KonvaCanvasMarkerData } from "./types";
+/**
+ * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
+ */
+export declare const drawPolygon: ({ ctx, polygonOffsets, isDonutPolygon, fillColor, strokeColor, lineWidth }: {
+    ctx: CanvasRenderingContext2D;
+    polygonOffsets: number[][][][];
+    isDonutPolygon: boolean;
+    fillColor: string;
+    strokeColor: string;
+    lineWidth: number;
+}) => void;
+/**
+ * 폴리곤 Base 렌더링 함수
+ *
+ * @param baseFillColor 기본 폴리곤 채우기 색상
+ * @param baseStrokeColor 기본 폴리곤 테두리 색상
+ * @param baseLineWidth 기본 폴리곤 테두리 두께
+ * @returns Base Layer 렌더링 함수
+ *
+ * @example
+ * const renderBase = renderPolygonBase(
+ *   'rgba(255, 100, 100, 0.5)',
+ *   'rgba(200, 50, 50, 0.8)',
+ *   2
+ * );
+ */
+export declare const renderPolygonBase: <T = any>(baseFillColor: string, baseStrokeColor: string, baseLineWidth: number) => CustomRenderBase<KonvaCanvasMarkerData<T>>;
+/**
+ * 폴리곤 Event 렌더링 함수
+ *
+ * @param selectedFillColor 선택된 폴리곤 채우기 색상
+ * @param selectedStrokeColor 선택된 폴리곤 테두리 색상
+ * @param selectedLineWidth 선택된 폴리곤 테두리 두께
+ * @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, 193, 7, 0.7)',
+ *   'rgba(255, 152, 0, 1)',
+ *   4,
+ *   'rgba(255, 0, 0, 0.8)',
+ *   undefined,
+ *   undefined,
+ *   'rgba(100, 150, 255, 0.8)'
+ * );
+ */
+export declare const renderPolygonEvent: <T = any>(selectedFillColor: string, selectedStrokeColor: string, selectedLineWidth: number, activeFillColor?: string, activeStrokeColor?: string, activeLineWidth?: number, hoveredFillColor?: string, hoveredStrokeColor?: string, hoveredLineWidth?: number) => CustomRenderEvent<KonvaCanvasMarkerData<T>>;