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

package/dist/index.umd.js

@@ -996,8 +996,8 @@
     return Math.max(minWidth, textWidth + padding);
   };
 
-  var KonvaMarkerContext = React.createContext(null);
-  var KonvaMarkerProvider = function (_a) {
+  var WoongCanvasContext = React.createContext(null);
+  var WoongCanvasProvider = function (_a) {
     var children = _a.children;
     var controller = useMintMapController(); // Refs
 
@@ -1142,12 +1142,12 @@
         unregisterComponent: unregisterComponent
       };
     }, [registerComponent, unregisterComponent]);
-    return React__default["default"].createElement(KonvaMarkerContext.Provider, {
+    return React__default["default"].createElement(WoongCanvasContext.Provider, {
       value: contextValue
     }, children);
   };
-  var useKonvaMarkerContext = function () {
-    var context = React.useContext(KonvaMarkerContext);
+  var useWoongCanvasContext = function () {
+    var context = React.useContext(WoongCanvasContext);
     return context;
   };
 
@@ -1229,7 +1229,7 @@
      * - 장점: 읽기 성능 대폭 향상 (10,000번 get → 이전보다 2배 빠름)
      * - 단점: 접근 빈도가 아닌 삽입 순서 기반 eviction (FIFO)
      *
-     * WoongKonvaMarker 사용 사례에 최적:
+     * WoongCanvasMarker 사용 사례에 최적:
      * - 좌표 변환 결과는 zoom/pan 시 어차피 전체 초기화
      * - 접근 빈도 추적보다 빠른 조회가 더 중요
      */
@@ -1567,7 +1567,7 @@
     }, [center]);
     return React__default["default"].createElement("div", {
       className: cn$3('mint-map-root')
-    }, mapInitialized && React__default["default"].createElement(KonvaMarkerProvider, null, children), React__default["default"].createElement("div", {
+    }, mapInitialized && React__default["default"].createElement(WoongCanvasProvider, null, children), React__default["default"].createElement("div", {
       className: cn$3('mint-map-container'),
       style: {
         visibility: visible ? 'inherit' : 'hidden'
@@ -5425,6 +5425,1011 @@
     }))));
   }
 
+  // 메인 컴포넌트
+  // ============================================================================
+
+  var WoongCanvasMarker = function (props) {
+    var data = props.data,
+        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,
+        renderBase = props.renderBase,
+        renderAnimation = props.renderAnimation,
+        renderEvent = props.renderEvent,
+        options = tslib.__rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "renderBase", "renderAnimation", "renderEvent"]); // --------------------------------------------------------------------------
+    // Hooks & Context
+    // --------------------------------------------------------------------------
+
+
+    var controller = useMintMapController();
+    var context = useWoongCanvasContext();
+    var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // --------------------------------------------------------------------------
+    // DOM Refs
+    // --------------------------------------------------------------------------
+
+    var divRef = React.useRef(document.createElement('div'));
+    var divElement = divRef.current;
+    var containerRef = React.useRef(null);
+    var markerRef = React.useRef(); // --------------------------------------------------------------------------
+    // Konva Refs
+    // --------------------------------------------------------------------------
+
+    var stageRef = React.useRef(null);
+    var baseLayerRef = React.useRef(null);
+    var animationLayerRef = React.useRef(null);
+    var eventLayerRef = React.useRef(null); // --------------------------------------------------------------------------
+    // Data Refs - 선택 및 Hover 상태 관리
+    // --------------------------------------------------------------------------
+
+    /** data prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
+
+    var dataRef = React.useRef(data); // --------------------------------------------------------------------------
+    // State Refs - 선택 및 Hover 상태 관리
+    // --------------------------------------------------------------------------
+
+    /** 상호작용 비활성화 상태 (Ref로 관리하여 클로저 문제 해결) */
+
+    var disableInteractionRef = React.useRef(disableInteraction);
+    /** 현재 Hover 중인 항목 */
+
+    var hoveredItemRef = React.useRef(null);
+    /** 외부에서 전달된 선택 항목 (Ref로 관리하여 클로저 문제 해결) */
+
+    var selectedItemRef = React.useRef(externalSelectedItem);
+    /**
+     * 선택된 항목의 ID Set
+     *
+     * 용도:
+     * 1. onClick 콜백에 전달 - onClick(data, selectedIdsRef.current)
+     * 2. 선택 여부 빠른 체크 - selectedIdsRef.current.has(id)
+     * 3. 메모리 효율 - ID만 저장 (작음)
+     *
+     * selectedItemsMapRef와 차이:
+     * - selectedIdsRef: ID만 저장 { "id1", "id2" }
+     * - selectedItemsMapRef: 전체 객체 저장 { id1: {...}, id2: {...} }
+     *
+     * 둘 다 필요: ID만 필요한 곳은 이것, 전체 데이터 필요한 곳은 Map
+     */
+
+    var selectedIdsRef = React.useRef(new Set());
+    /**
+     * 선택된 항목의 실제 데이터 Map (핵심 성능 최적화!)
+     *
+     * 목적: doRenderEvent에서 filter() 순회 제거
+     * - 이전: markersRef.current.filter() → O(전체 마커 수)
+     * - 현재: Map.values() → O(선택된 항목 수)
+     *
+     * 성능 개선: 10,000개 중 1개 선택 시
+     * - 이전: 10,000번 체크
+     * - 현재: 1번 접근 (10,000배 빠름!)
+     */
+
+    var selectedItemsMapRef = React.useRef(new Map()); // --------------------------------------------------------------------------
+    // Drag Refs
+    // --------------------------------------------------------------------------
+
+    var draggingRef = React.useRef(false);
+    var prevCenterOffsetRef = React.useRef(null);
+    var accumTranslateRef = React.useRef({
+      x: 0,
+      y: 0
+    }); // --------------------------------------------------------------------------
+    // Performance Refs (캐싱 & 최적화)
+    // --------------------------------------------------------------------------
+
+    /** 좌표 변환 결과 LRU 캐시 */
+
+    var offsetCacheRef = React.useRef(new LRUCache(maxCacheSize));
+    /** 공간 인덱스 (빠른 Hit Test) */
+
+    var spatialIndexRef = React.useRef(new SpatialHashGrid(SPATIAL_GRID_CELL_SIZE));
+    /** 바운딩 박스 캐시 (Viewport Culling 최적화) */
+
+    var boundingBoxCacheRef = React.useRef(new Map());
+    /** 뷰포트 경계 캐시 (Viewport Culling) */
+
+    var viewportRef = React.useRef(null); // --------------------------------------------------------------------------
+    // 유틸리티 함수: 뷰포트 관리
+    // --------------------------------------------------------------------------
+
+    /**
+     * 현재 뷰포트 영역 계산
+     */
+
+    var updateViewport = function () {
+      if (!stageRef.current) return;
+      var stage = stageRef.current;
+      viewportRef.current = {
+        minX: -cullingMargin,
+        maxX: stage.width() + cullingMargin,
+        minY: -cullingMargin,
+        maxY: stage.height() + cullingMargin
+      };
+    };
+    /**
+     * 아이템이 현재 뷰포트 안에 있는지 확인 (바운딩 박스 캐싱)
+     */
+
+
+    var isInViewport = function (item) {
+      if (!enableViewportCulling || !viewportRef.current) return true;
+      var viewport = viewportRef.current; // 캐시된 바운딩 박스 확인
+
+      var bbox = boundingBoxCacheRef.current.get(item.id);
+
+      if (!bbox) {
+        // 바운딩 박스 계산 (공통 함수 사용)
+        var computed = computeBoundingBox(item);
+        if (!computed) return false;
+        bbox = computed;
+        boundingBoxCacheRef.current.set(item.id, bbox);
+      } // 바운딩 박스와 viewport 교차 체크
+
+
+      return !(bbox.maxX < viewport.minX || bbox.minX > viewport.maxX || bbox.maxY < viewport.minY || bbox.minY > viewport.maxY);
+    }; // --------------------------------------------------------------------------
+    // 유틸리티 함수: 좌표 변환 캐싱
+    // --------------------------------------------------------------------------
+
+    /**
+     * 마커 좌표 변환 결과를 캐시하고 반환
+     *
+     * @param markerData 마커 데이터
+     * @returns 변환된 좌표 또는 null
+     */
+
+
+    var getOrComputeMarkerOffset = function (markerData) {
+      var cached = offsetCacheRef.current.get(markerData.id);
+      if (cached && !Array.isArray(cached)) return cached;
+      var result = computeMarkerOffset(markerData, controller);
+
+      if (result) {
+        offsetCacheRef.current.set(markerData.id, result);
+      }
+
+      return result;
+    }; // --------------------------------------------------------------------------
+    // 유틸리티 함수: 바운딩 박스 계산
+    // --------------------------------------------------------------------------
+
+    /**
+     * 마커의 바운딩 박스 계산
+     *
+     * 🎯 마커의 경우:
+     * - boxHeight: 본체만 (Hit Test 영역)
+     * - tailHeight: 꼬리 높이 (Viewport Culling용, 화면에 보이는 전체 영역)
+     *
+     * @param item 마커 데이터
+     * @returns 바운딩 박스 또는 null
+     */
+
+
+    var computeBoundingBox = function (item) {
+      // 마커: 중심점 기준 박스 크기 계산 (꼬리 포함)
+      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
+      };
+    }; // --------------------------------------------------------------------------
+    // 유틸리티 함수: 공간 인덱싱
+    // --------------------------------------------------------------------------
+
+    /**
+     * 공간 인덱스 빌드 (빠른 Hit Test를 위한 자료구조)
+     */
+
+
+    var buildSpatialIndex = function () {
+      var spatial = spatialIndexRef.current;
+      spatial.clear();
+      var currentData = dataRef.current;
+
+      for (var _i = 0, currentData_1 = currentData; _i < currentData_1.length; _i++) {
+        var item = currentData_1[_i]; // 바운딩 박스 계산 (공통 함수 사용)
+
+        var bbox = computeBoundingBox(item);
+
+        if (bbox) {
+          spatial.insert(item, bbox.minX, bbox.minY, bbox.maxX, bbox.maxY);
+        }
+      }
+    }; // --------------------------------------------------------------------------
+    // 렌더링 함수 결정 (dataType에 따라)
+    // --------------------------------------------------------------------------
+
+    /**
+     * 외부 렌더링 함수에 전달할 유틸리티 객체
+     */
+
+
+    var renderUtils = {
+      getOrComputePolygonOffsets: function () {
+        return null;
+      },
+      getOrComputeMarkerOffset: getOrComputeMarkerOffset
+    };
+    /** Base Layer에서 사용할 빈 Set (재사용) */
+
+    React.useRef(new Set());
+    /**
+     * Base 레이어 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
+     *
+     * 🔥 최적화:
+     * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
+     * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
+     * 3. 클로저로 최신 데이터 참조
+     *
+     * 🎯 topOnHover 지원:
+     * - renderEvent가 없을 때 Base Layer에서 hover 처리 (fallback)
+     * - renderEvent가 있으면 Event Layer에서 처리 (성능 최적화)
+     */
+
+    var doRenderBase = function () {
+      var layer = baseLayerRef.current;
+      if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
+
+      var shape = layer.findOne('.base-render-shape');
+
+      if (!shape) {
+        // 최초 생성 (한 번만 실행됨)
+        // sceneFunc도 여기서 한 번만 설정 (클로저로 최신 데이터 참조)
+        shape = new Konva__default["default"].Shape({
+          name: 'base-render-shape',
+          sceneFunc: function (context, shape) {
+            var ctx = context;
+            var hovered = hoveredItemRef.current; // 클로저로 최신 ref 값 참조
+
+            var visibleItems = enableViewportCulling ? dataRef.current.filter(function (item) {
+              return isInViewport(item);
+            }) : 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: 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,
+          hitStrokeWidth: 0
+        });
+        layer.add(shape);
+      } // sceneFunc는 이미 설정되어 있으므로 다시 그리기만
+
+
+      layer.batchDraw();
+    };
+    /**
+     * Animation 레이어 렌더링 (선택된 마커 애니메이션)
+     *
+     * 🔥 최적화: sceneFunc 내부에서 최신 items 참조
+     * - 선택 변경 시에만 재생성
+     * - 지도 이동 시에는 기존 Animation 계속 실행
+     */
+
+
+    var doRenderAnimation = function () {
+      if (!renderAnimation) return;
+      var layer = animationLayerRef.current;
+      if (!layer) return;
+      renderAnimation({
+        layer: layer,
+        selectedIds: selectedIdsRef.current,
+        items: dataRef.current,
+        utils: renderUtils
+      });
+    };
+    /**
+     * Event 레이어 렌더링 (hover + 선택 상태 표시)
+     *
+     * 🔥 최적화:
+     * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
+     * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
+     * 3. 클로저로 최신 데이터 참조
+     */
+
+
+    var doRenderEvent = function () {
+      var layer = eventLayerRef.current;
+      if (!layer) return;
+      if (!renderEvent) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
+
+      var shape = layer.findOne('.event-render-shape');
+
+      if (!shape) {
+        // 최초 생성 (한 번만 실행됨)
+        // sceneFunc도 여기서 한 번만 설정 (클로저로 최신 데이터 참조)
+        shape = new Konva__default["default"].Shape({
+          name: 'event-render-shape',
+          sceneFunc: function (context, shape) {
+            var ctx = context; // 클로저로 최신 ref 값 참조
+
+            var selectedItems = Array.from(selectedItemsMapRef.current.values());
+            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,
+          hitStrokeWidth: 0
+        });
+        layer.add(shape);
+      } // sceneFunc는 이미 설정되어 있으므로 다시 그리기만
+
+
+      layer.batchDraw();
+    };
+    /**
+     * 전체 즉시 렌더링 (IDLE 시 호출)
+     */
+
+
+    var renderAllImmediate = function () {
+      updateViewport();
+      buildSpatialIndex();
+      doRenderBase();
+      doRenderAnimation();
+      doRenderEvent();
+    }; // --------------------------------------------------------------------------
+    // 이벤트 핸들러: 지도 이벤트
+    // --------------------------------------------------------------------------
+
+    /**
+     * 지도 이동/줌 완료 시 처리
+     */
+
+
+    var handleIdle = function () {
+      prevCenterOffsetRef.current = null;
+      accumTranslateRef.current = {
+        x: 0,
+        y: 0
+      }; // 2. 캐시 정리 (지도 이동/줌으로 좌표 변환 결과가 바뀜)
+
+      offsetCacheRef.current.clear();
+      boundingBoxCacheRef.current.clear(); // 3. 마커 위치 업데이트
+
+      var bounds = controller.getCurrBounds();
+
+      var markerOptions = tslib.__assign({
+        position: bounds.nw
+      }, options);
+
+      markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // 4. transform 제거 전에 새 데이터로 즉시 렌더링 (겹침 방지)
+
+      if (containerRef.current) {
+        containerRef.current.style.transform = '';
+        containerRef.current.style.visibility = '';
+      } // 5. 새 위치에서 렌더링
+
+
+      renderAllImmediate();
+    };
+    /**
+     * 줌 시작 시 처리 (일시적으로 숨김)
+     */
+
+
+    var handleZoomStart = function () {
+      if (containerRef.current) {
+        containerRef.current.style.visibility = 'hidden';
+      }
+    };
+    /**
+     * 줌 종료 시 처리 (다시 표시)
+     */
+
+
+    var handleZoomEnd = function () {
+      if (containerRef.current) {
+        containerRef.current.style.visibility = '';
+      }
+    };
+    /**
+     * 지도 중심 변경 시 처리 (transform으로 이동 추적)
+     */
+
+
+    var handleCenterChanged = function () {
+      var center = controller.getCurrBounds().getCenter();
+      var curr = controller.positionToOffset(center);
+      var prev = prevCenterOffsetRef.current;
+
+      if (!prev) {
+        prevCenterOffsetRef.current = {
+          x: curr.x,
+          y: curr.y
+        };
+        return;
+      }
+
+      var dx = prev.x - curr.x;
+      var dy = prev.y - curr.y;
+      accumTranslateRef.current = {
+        x: accumTranslateRef.current.x + dx,
+        y: accumTranslateRef.current.y + dy
+      };
+      prevCenterOffsetRef.current = {
+        x: curr.x,
+        y: curr.y
+      };
+
+      if (containerRef.current) {
+        containerRef.current.style.transform = "translate(".concat(accumTranslateRef.current.x, "px, ").concat(accumTranslateRef.current.y, "px)");
+      }
+    }; // --------------------------------------------------------------------------
+    // Hit Test & 상태 관리
+    // --------------------------------------------------------------------------
+
+    /**
+     * 특정 좌표의 마커 데이터 찾기 (Spatial Index 사용)
+     *
+     * topOnHover가 true일 때:
+     * - 현재 hover된 항목을 최우선으로 체크
+     * - 시각적으로 최상단에 있는 항목이 hit test에서도 우선됨
+     *
+     * @param offset 검사할 좌표
+     * @returns 찾은 마커 데이터 또는 null
+     */
+
+
+    var findData = function (offset) {
+      // topOnHover가 true이고 현재 hover된 항목이 있으면, 그것을 먼저 체크
+      if (topOnHover && hoveredItemRef.current) {
+        var hovered = hoveredItemRef.current;
+
+        if (isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {
+          return hovered; // 여전히 hover된 항목 위에 있음
+        }
+      } // Spatial Index로 후보 항목만 빠르게 추출 (30,000개 → ~10개)
+
+
+      var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 마커 체크
+
+      for (var i = candidates.length - 1; i >= 0; i--) {
+        var item = candidates[i];
+
+        if (isPointInMarkerData(offset, item, getOrComputeMarkerOffset)) {
+          return item;
+        }
+      }
+
+      return null;
+    };
+    /**
+     * Hover 상태 설정 및 레이어 렌더링
+     *
+     * @param data hover된 마커/폴리곤 데이터 또는 null
+     *
+     * 최적화: RAF 제거하여 즉시 렌더링 (16ms 지연 제거)
+     *
+     * 🎯 topOnHover 지원:
+     * - renderEvent가 있으면: Event Layer에서만 처리 (성능 최적화)
+     * - renderEvent가 없고 topOnHover=true면: Base Layer에서 처리
+     */
+
+
+    var setHovered = function (data) {
+      hoveredItemRef.current = data;
+
+      if (draggingRef.current) {
+        controller.setMapCursor('grabbing');
+      } else {
+        controller.setMapCursor(data ? 'pointer' : 'grab');
+      } // 즉시 렌더링 (RAF 없이)
+
+
+      if (renderEvent) {
+        // renderEvent가 있으면 Event Layer에서만 처리 (성능 최적화)
+        doRenderEvent();
+      } else if (topOnHover) {
+        // renderEvent가 없고 topOnHover가 true면 Base Layer에서 처리
+        doRenderBase();
+      }
+    };
+    /**
+     * 클릭 처리 (단일/다중 선택)
+     *
+     * @param data 클릭된 마커/폴리곤 데이터
+     *
+     * 🔥 최적화: 단일 Shape 렌더링으로 Base Layer 재렌더링 속도 향상
+     * - sceneFunc에서 selectedIds를 체크하여 선택된 마커만 스킵
+     * - 객체 생성 오버헤드 제거로 1000개 이상도 부드럽게 처리
+     */
+
+
+    var handleLocalClick = function (data) {
+      // 1. 선택 상태 업데이트
+      if (enableMultiSelect) {
+        // 다중 선택: Set과 Map 동시 업데이트
+        var newSelected = new Set(selectedIdsRef.current);
+
+        if (newSelected.has(data.id)) {
+          newSelected.delete(data.id);
+          selectedItemsMapRef.current.delete(data.id);
+        } else {
+          newSelected.add(data.id);
+          selectedItemsMapRef.current.set(data.id, data);
+        }
+
+        selectedIdsRef.current = newSelected;
+      } else {
+        // 단일 선택: 토글
+        var newSelected = new Set();
+
+        if (!selectedIdsRef.current.has(data.id)) {
+          newSelected.add(data.id);
+          selectedItemsMapRef.current.clear();
+          selectedItemsMapRef.current.set(data.id, data);
+        } else {
+          selectedItemsMapRef.current.clear();
+        }
+
+        selectedIdsRef.current = newSelected;
+      }
+
+      if (!!renderAnimation) {
+        // 2. Base Layer 재렌더링 (단일 Shape로 최적화되어 빠름)
+        doRenderBase(); // 3. Animation Layer 렌더링 (선택된 마커 애니메이션)
+
+        doRenderAnimation();
+      } // 4. Event Layer 렌더링 (hover 처리)
+
+
+      doRenderEvent();
+    }; // --------------------------------------------------------------------------
+    // 이벤트 핸들러: UI 이벤트
+    // --------------------------------------------------------------------------
+
+    /**
+     * 클릭 이벤트 처리
+     */
+
+
+    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_1 = findData(clickedOffset);
+
+        if (data_1) {
+          handleLocalClick(data_1);
+
+          if (onClick) {
+            onClick(data_1, selectedIdsRef.current);
+          }
+        }
+      } catch (error) {
+        console.error('[WoongCanvasMarker] handleClick error:', error);
+      }
+    };
+    /**
+     * 마우스 이동 이벤트 처리 (hover 감지)
+     */
+
+
+    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 {
+        var mouseOffset = controller.positionToOffset(event.param.position);
+        var hoveredItem = findData(mouseOffset);
+        var prevHovered = hoveredItemRef.current;
+
+        if (prevHovered !== hoveredItem) {
+          setHovered(hoveredItem);
+          if (prevHovered && onMouseOut) onMouseOut(prevHovered);
+          if (hoveredItem && onMouseOver) onMouseOver(hoveredItem);
+        }
+      } catch (error) {
+        console.error('[WoongCanvasMarker] handleMouseMove error:', error);
+      }
+    };
+    /**
+     * 드래그 시작 처리 (커서를 grabbing으로 변경)
+     */
+
+
+    var handleDragStart = function () {
+      draggingRef.current = true;
+      controller.setMapCursor('grabbing');
+    };
+    /**
+     * 드래그 종료 처리 (커서를 기본으로 복원)
+     */
+
+
+    var handleDragEnd = function () {
+      draggingRef.current = false;
+      controller.setMapCursor('grab');
+    };
+    /**
+     * 마우스가 canvas를 벗어날 때 hover cleanup
+     */
+
+
+    var handleMouseLeave = function () {
+      if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
+
+      var prevHovered = hoveredItemRef.current;
+
+      if (prevHovered) {
+        hoveredItemRef.current = null;
+        controller.setMapCursor('grab');
+        doRenderEvent();
+
+        if (onMouseOut) {
+          onMouseOut(prevHovered);
+        }
+      }
+    }; // --------------------------------------------------------------------------
+    // Lifecycle: DOM 초기화
+    // --------------------------------------------------------------------------
+
+
+    React.useEffect(function () {
+      divElement.style.width = 'fit-content';
+      return function () {
+        if (markerRef.current) {
+          controller.clearDrawable(markerRef.current);
+          markerRef.current = undefined;
+        }
+      };
+    }, []); // --------------------------------------------------------------------------
+    // Lifecycle: 마커 생성/업데이트
+    // --------------------------------------------------------------------------
+
+    React.useEffect(function () {
+      if (options) {
+        var bounds = controller.getCurrBounds();
+
+        var markerOptions = tslib.__assign({
+          position: bounds.nw
+        }, options);
+
+        if (markerRef.current) {
+          controller.updateMarker(markerRef.current, markerOptions);
+        } else {
+          markerRef.current = new Marker(markerOptions);
+          markerRef.current.element = divElement;
+          controller.createMarker(markerRef.current);
+
+          if (divElement.parentElement) {
+            divElement.parentElement.style.pointerEvents = 'none';
+          }
+
+          if (options.zIndex !== undefined) {
+            controller.setMarkerZIndex(markerRef.current, options.zIndex);
+          }
+        }
+      }
+    }, [options]); // --------------------------------------------------------------------------
+    // Lifecycle: Konva 초기화 및 이벤트 리스너 등록
+    // --------------------------------------------------------------------------
+
+    React.useEffect(function () {
+      var mapDiv = controller.mapDivElement;
+      var stage = new Konva__default["default"].Stage({
+        container: containerRef.current,
+        width: mapDiv.offsetWidth,
+        height: mapDiv.offsetHeight
+      });
+      stageRef.current = stage; // 레이어 최적화 설정
+
+      var baseLayer = new Konva__default["default"].Layer({
+        listening: false // 이벤트 리스닝 비활성화로 성능 향상
+
+      });
+      var animationLayer = new Konva__default["default"].Layer({
+        listening: false
+      });
+      var eventLayer = new Konva__default["default"].Layer({
+        listening: false
+      });
+      baseLayerRef.current = baseLayer;
+      animationLayerRef.current = animationLayer;
+      eventLayerRef.current = eventLayer;
+      stage.add(baseLayer);
+
+      if (renderAnimation) {
+        stage.add(animationLayer);
+      }
+
+      stage.add(eventLayer); // 초기 뷰포트 설정
+
+      updateViewport(); // ResizeObserver (맵 크기 변경 감지)
+
+      var resizeRafId = null;
+      var resizeObserver = new ResizeObserver(function () {
+        // RAF로 다음 프레임에 한 번만 실행 (debounce 효과)
+        if (resizeRafId !== null) {
+          cancelAnimationFrame(resizeRafId);
+        }
+
+        resizeRafId = requestAnimationFrame(function () {
+          stage.width(mapDiv.offsetWidth);
+          stage.height(mapDiv.offsetHeight);
+          offsetCacheRef.current.clear();
+          boundingBoxCacheRef.current.clear();
+          updateViewport();
+          renderAllImmediate();
+          resizeRafId = null;
+        });
+      });
+      resizeObserver.observe(mapDiv);
+      controller.addEventListener('IDLE', handleIdle);
+      controller.addEventListener('ZOOMSTART', handleZoomStart);
+      controller.addEventListener('ZOOM_CHANGED', handleZoomEnd);
+      controller.addEventListener('CENTER_CHANGED', handleCenterChanged);
+      controller.addEventListener('CLICK', handleClick);
+      controller.addEventListener('MOUSEMOVE', handleMouseMove);
+      controller.addEventListener('DRAGSTART', handleDragStart);
+      controller.addEventListener('DRAGEND', handleDragEnd); // 맵 컨테이너에 mouseleave 이벤트 추가
+
+      mapDiv.addEventListener('mouseleave', handleMouseLeave);
+      renderAllImmediate(); // Context 사용 시 컴포넌트 등록 (다중 인스턴스 관리)
+
+      var componentInstance = null;
+
+      if (context) {
+        componentInstance = {
+          zIndex: currentZIndex,
+          hitTest: function (offset) {
+            return findData(offset) !== null;
+          },
+          onClick: onClick,
+          onMouseOver: onMouseOver,
+          onMouseOut: onMouseOut,
+          findData: findData,
+          setHovered: setHovered,
+          handleLocalClick: handleLocalClick,
+          getSelectedIds: function () {
+            return selectedIdsRef.current;
+          },
+          isInteractionDisabled: function () {
+            return disableInteractionRef.current;
+          } // 🚫 상호작용 비활성화 여부 반환
+
+        };
+        context.registerComponent(componentInstance);
+      } // Cleanup 함수
+
+
+      return function () {
+        // RAF 정리
+        if (resizeRafId !== null) {
+          cancelAnimationFrame(resizeRafId);
+        } // 옵저버 정리
+
+
+        resizeObserver.disconnect(); // 이벤트 리스너 정리
+
+        controller.removeEventListener('IDLE', handleIdle);
+        controller.removeEventListener('ZOOMSTART', handleZoomStart);
+        controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
+        controller.removeEventListener('CENTER_CHANGED', handleCenterChanged);
+        controller.removeEventListener('CLICK', handleClick);
+        controller.removeEventListener('MOUSEMOVE', handleMouseMove);
+        controller.removeEventListener('DRAGSTART', handleDragStart);
+        controller.removeEventListener('DRAGEND', handleDragEnd);
+        mapDiv.removeEventListener('mouseleave', handleMouseLeave); // Context 정리
+
+        if (context && componentInstance) {
+          context.unregisterComponent(componentInstance);
+        } // Konva 리소스 정리
+
+
+        baseLayer.destroyChildren();
+        animationLayer.destroyChildren();
+        eventLayer.destroyChildren();
+        stage.destroy(); // 캐시 정리
+
+        offsetCacheRef.current.clear();
+        boundingBoxCacheRef.current.clear();
+        spatialIndexRef.current.clear();
+      };
+    }, []); // 초기화는 한 번만
+    // --------------------------------------------------------------------------
+    // Lifecycle: disableInteraction 동기화
+    // --------------------------------------------------------------------------
+
+    React.useEffect(function () {
+      disableInteractionRef.current = disableInteraction;
+    }, [disableInteraction]); // --------------------------------------------------------------------------
+    // Lifecycle: 외부 selectedItems 동기화
+    // --------------------------------------------------------------------------
+
+    React.useEffect(function () {
+      if (!stageRef.current) return; // externalSelectedItems가 undefined면 외부 제어 안 함
+
+      if (externalSelectedItems === undefined) return; // 외부에서 전달된 selectedItems로 동기화
+
+      var newSelectedIds = new Set();
+      var newSelectedItemsMap = new Map();
+      externalSelectedItems.forEach(function (item) {
+        newSelectedIds.add(item.id);
+        newSelectedItemsMap.set(item.id, item);
+      });
+      selectedIdsRef.current = newSelectedIds;
+      selectedItemsMapRef.current = newSelectedItemsMap; // 렌더링
+
+      doRenderBase();
+      doRenderAnimation();
+      doRenderEvent();
+    }, [externalSelectedItems]); // 배열 자체를 dependency로 사용
+    // --------------------------------------------------------------------------
+    // Lifecycle: 외부 selectedItem 변경 시 Event Layer 리렌더링
+    // --------------------------------------------------------------------------
+
+    React.useEffect(function () {
+      if (!stageRef.current) return; // Ref 동기화
+
+      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 = '';
+      }
+
+      prevCenterOffsetRef.current = null;
+      accumTranslateRef.current = {
+        x: 0,
+        y: 0
+      }; // 캐시 정리 (새 데이터이므로 기존 캐시는 무효)
+
+      offsetCacheRef.current.clear();
+      boundingBoxCacheRef.current.clear();
+      /**
+       * 선택 상태 동기화 (최적화 버전)
+       *
+       * data가 변경되면 selectedItemsMapRef도 업데이트 필요
+       * (참조가 바뀌므로 기존 Map의 데이터는 stale 상태)
+       *
+       * 🔥 중요: 화면 밖 데이터도 선택 상태 유지!
+       * - 현재 data에 있으면 최신 데이터로 업데이트
+       * - 없으면 기존 selectedItemsMapRef의 데이터 유지
+       *
+       * 최적화: data를 Map으로 먼저 변환하여 find() 순회 제거
+       * - O(전체 데이터 수 + 선택된 개수) - 매우 효율적
+       */
+
+      var dataMap = new Map(data.map(function (m) {
+        return [m.id, m];
+      }));
+      var newSelectedItemsMap = new Map();
+      selectedIdsRef.current.forEach(function (id) {
+        // 현재 data에 있으면 최신 데이터 사용
+        var currentItem = dataMap.get(id);
+
+        if (currentItem) {
+          newSelectedItemsMap.set(id, currentItem);
+        } else {
+          // 화면 밖이면 기존 데이터 유지
+          var prevItem = selectedItemsMapRef.current.get(id);
+
+          if (prevItem) {
+            newSelectedItemsMap.set(id, prevItem);
+          }
+        }
+      }); // selectedIdsRef는 그대로 유지 (화면 밖 항목도 선택 상태 유지)
+
+      selectedItemsMapRef.current = newSelectedItemsMap; // 즉시 렌더링
+
+      renderAllImmediate();
+    }, [data]);
+    return reactDom.createPortal(React__default["default"].createElement("div", {
+      ref: containerRef,
+      style: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%'
+      }
+    }), divElement);
+  };
+
   /**
    * 폴리곤 렌더링 유틸리티
    *
@@ -5655,33 +6660,42 @@
   // 메인 컴포넌트
   // ============================================================================
 
-  var WoongCanvasLayer = function (props) {
+  var WoongCanvasPolygon = 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,
+        _b = props.enableViewportCulling,
+        enableViewportCulling = _b === void 0 ? true : _b,
+        _c = props.cullingMargin,
+        cullingMargin = _c === void 0 ? DEFAULT_CULLING_MARGIN : _c,
+        _d = props.maxCacheSize,
+        maxCacheSize = _d === void 0 ? DEFAULT_MAX_CACHE_SIZE : _d,
         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"]); // --------------------------------------------------------------------------
+        _e = props.disableInteraction,
+        disableInteraction = _e === void 0 ? false : _e,
+        baseFillColor = props.baseFillColor,
+        baseStrokeColor = props.baseStrokeColor,
+        baseLineWidth = props.baseLineWidth,
+        selectedFillColor = props.selectedFillColor,
+        selectedStrokeColor = props.selectedStrokeColor,
+        selectedLineWidth = props.selectedLineWidth,
+        activeFillColor = props.activeFillColor,
+        activeStrokeColor = props.activeStrokeColor,
+        activeLineWidth = props.activeLineWidth,
+        hoveredFillColor = props.hoveredFillColor,
+        hoveredStrokeColor = props.hoveredStrokeColor,
+        hoveredLineWidth = props.hoveredLineWidth,
+        options = tslib.__rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "baseFillColor", "baseStrokeColor", "baseLineWidth", "selectedFillColor", "selectedStrokeColor", "selectedLineWidth", "activeFillColor", "activeStrokeColor", "activeLineWidth", "hoveredFillColor", "hoveredStrokeColor", "hoveredLineWidth"]); // --------------------------------------------------------------------------
     // Hooks & Context
     // --------------------------------------------------------------------------
 
 
     var controller = useMintMapController();
-    var context = useKonvaMarkerContext();
+    var context = useWoongCanvasContext();
     var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // --------------------------------------------------------------------------
     // DOM Refs
     // --------------------------------------------------------------------------
@@ -5695,7 +6709,6 @@
 
     var stageRef = React.useRef(null);
     var baseLayerRef = React.useRef(null);
-    var animationLayerRef = React.useRef(null);
     var eventLayerRef = React.useRef(null); // --------------------------------------------------------------------------
     // Data Refs - 선택 및 Hover 상태 관리
     // --------------------------------------------------------------------------
@@ -5826,91 +6839,52 @@
         offsetCacheRef.current.set(polygonData.id, result);
       }
 
-      return result;
-    };
-    /**
-     * 마커 좌표 변환 결과를 캐시하고 반환
-     *
-     * @param markerData 마커 데이터
-     * @returns 변환된 좌표 또는 null
-     */
-
-
-    var getOrComputeMarkerOffset = function (markerData) {
-      var cached = offsetCacheRef.current.get(markerData.id);
-      if (cached && !Array.isArray(cached)) return cached;
-      var result = computeMarkerOffset(markerData, controller);
-
-      if (result) {
-        offsetCacheRef.current.set(markerData.id, result);
-      }
-
       return result;
     }; // --------------------------------------------------------------------------
     // 유틸리티 함수: 바운딩 박스 계산
     // --------------------------------------------------------------------------
 
     /**
-     * 아이템의 바운딩 박스 계산 (폴리곤/마커 공통)
-     *
-     * 🎯 마커의 경우:
-     * - boxHeight: 본체만 (Hit Test 영역)
-     * - tailHeight: 꼬리 높이 (Viewport Culling용, 화면에 보이는 전체 영역)
+     * 폴리곤의 바운딩 박스 계산
      *
-     * @param item 마커 또는 폴리곤 데이터
+     * @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;
-            }
+      // 폴리곤: 모든 좌표의 최소/최대값 계산
+      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
-        };
       }
+
+      return {
+        minX: minX,
+        minY: minY,
+        maxX: maxX,
+        maxY: maxY
+      };
     }; // --------------------------------------------------------------------------
     // 유틸리티 함수: 공간 인덱싱
     // --------------------------------------------------------------------------
@@ -5945,23 +6919,20 @@
 
     var renderUtils = {
       getOrComputePolygonOffsets: getOrComputePolygonOffsets,
-      getOrComputeMarkerOffset: getOrComputeMarkerOffset
-    };
-    /** Base Layer에서 사용할 빈 Set (재사용) */
+      getOrComputeMarkerOffset: function () {
+        return null;
+      } // 폴리곤에서는 사용하지 않음
 
-    React.useRef(new Set());
+    };
     /**
-     * 실제 사용할 렌더링 함수 결정
-     * - MARKER: 외부에서 전달받은 renderBase 사용 (필수)
-     * - POLYGON: renderer.ts의 팩토리 함수로 생성 (props 기반)
+     * 렌더링 함수 생성 (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);
-    }();
+    var renderBase = renderPolygonBase(baseFillColor, baseStrokeColor, baseLineWidth);
+    var renderEvent = renderPolygonEvent(baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth);
+    /** Base Layer에서 사용할 빈 Set (재사용) */
+
+    React.useRef(new Set());
     /**
      * Base 레이어 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
      *
@@ -5992,15 +6963,7 @@
 
             var visibleItems = enableViewportCulling ? dataRef.current.filter(function (item) {
               return isInViewport(item);
-            }) : dataRef.current; // topOnHover가 true이고 renderEvent가 없으면 Base Layer에서 hover 처리
-
-            if (topOnHover && !renderEvent && hovered) {
-              // hover된 항목 제외하고 렌더링
-              visibleItems = visibleItems.filter(function (item) {
-                return item.id !== hovered.id;
-              });
-            } // 일반 항목 렌더링
-
+            }) : dataRef.current; // 일반 항목 렌더링
 
             renderBase({
               ctx: ctx,
@@ -6008,21 +6971,7 @@
               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,
@@ -6034,26 +6983,6 @@
 
       layer.batchDraw();
     };
-    /**
-     * Animation 레이어 렌더링 (선택된 마커 애니메이션)
-     *
-     * 🔥 최적화: sceneFunc 내부에서 최신 items 참조
-     * - 선택 변경 시에만 재생성
-     * - 지도 이동 시에는 기존 Animation 계속 실행
-     */
-
-
-    var doRenderAnimation = function () {
-      if (!renderAnimation) return;
-      var layer = animationLayerRef.current;
-      if (!layer) return;
-      renderAnimation({
-        layer: layer,
-        selectedIds: selectedIdsRef.current,
-        items: dataRef.current,
-        utils: renderUtils
-      });
-    };
     /**
      * Event 레이어 렌더링 (hover + 선택 상태 표시)
      *
@@ -6066,8 +6995,7 @@
 
     var doRenderEvent = function () {
       var layer = eventLayerRef.current;
-      if (!layer) return;
-      if (!renderEvent) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
+      if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
 
       var shape = layer.findOne('.event-render-shape');
 
@@ -6080,47 +7008,15 @@
             var ctx = context; // 클로저로 최신 ref 값 참조
 
             var selectedItems = Array.from(selectedItemsMapRef.current.values());
-            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;
+            var hovered = hoveredItemRef.current; // 일반 렌더링
 
-              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
-              });
-            }
+            renderEvent({
+              ctx: ctx,
+              hoveredItem: hovered,
+              utils: renderUtils,
+              selectedItems: selectedItems,
+              selectedItem: selectedItemRef.current
+            });
           },
           perfectDrawEnabled: false,
           listening: false,
@@ -6141,7 +7037,6 @@
       updateViewport();
       buildSpatialIndex();
       doRenderBase();
-      doRenderAnimation();
       doRenderEvent();
     }; // --------------------------------------------------------------------------
     // 이벤트 핸들러: 지도 이벤트
@@ -6235,54 +7130,22 @@
     // --------------------------------------------------------------------------
 
     /**
-     * 특정 좌표의 마커/폴리곤 데이터 찾기 (Spatial Index 사용)
-     *
-     * topOnHover가 true일 때:
-     * - 현재 hover된 항목을 최우선으로 체크
-     * - 시각적으로 최상단에 있는 항목이 hit test에서도 우선됨
+     * 특정 좌표의 폴리곤 데이터 찾기 (Spatial Index 사용)
      *
      * @param offset 검사할 좌표
-     * @returns 찾은 마커/폴리곤 데이터 또는 null
+     * @returns 찾은 폴리곤 데이터 또는 null
      */
 
 
     var findData = function (offset) {
-      // topOnHover가 true이고 현재 hover된 항목이 있으면, 그것을 먼저 체크
-      if (topOnHover && hoveredItemRef.current) {
-        var hovered = hoveredItemRef.current; // 폴리곤인 경우
-
-        if (dataType === exports.CanvasDataType.POLYGON) {
-          if (isPointInPolygonData(offset, hovered, getOrComputePolygonOffsets)) {
-            return hovered; // 여전히 hover된 항목 위에 있음
-          }
-        } // 마커인 경우
-        else {
-          if (isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {
-            return hovered; // 여전히 hover된 항목 위에 있음
-          }
-        }
-      } // Spatial Index로 후보 항목만 빠르게 추출 (30,000개 → ~10개)
-
+      // Spatial Index로 후보 항목만 빠르게 추출 (30,000개 → ~10개)
+      var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 폴리곤 체크
 
-      var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 데이터 타입에 따라 적절한 히트 테스트 수행
+      for (var i = candidates.length - 1; i >= 0; i--) {
+        var item = candidates[i];
 
-      if (dataType === exports.CanvasDataType.MARKER) {
-        // 마커 체크
-        for (var i = candidates.length - 1; i >= 0; i--) {
-          var item = candidates[i];
-
-          if (isPointInMarkerData(offset, item, getOrComputeMarkerOffset)) {
-            return item;
-          }
-        }
-      } else {
-        // 폴리곤 체크
-        for (var i = candidates.length - 1; i >= 0; i--) {
-          var item = candidates[i];
-
-          if (isPointInPolygonData(offset, item, getOrComputePolygonOffsets)) {
-            return item;
-          }
+        if (isPointInPolygonData(offset, item, getOrComputePolygonOffsets)) {
+          return item;
         }
       }
 
@@ -6311,13 +7174,7 @@
       } // 즉시 렌더링 (RAF 없이)
 
 
-      if (renderEvent) {
-        // renderEvent가 있으면 Event Layer에서만 처리 (성능 최적화)
-        doRenderEvent();
-      } else if (topOnHover) {
-        // renderEvent가 없고 topOnHover가 true면 Base Layer에서 처리
-        doRenderBase();
-      }
+      doRenderEvent();
     };
     /**
      * 클릭 처리 (단일/다중 선택)
@@ -6358,15 +7215,10 @@
         }
 
         selectedIdsRef.current = newSelected;
-      }
-
-      if (!!renderAnimation) {
-        // 2. Base Layer 재렌더링 (단일 Shape로 최적화되어 빠름)
-        doRenderBase(); // 3. Animation Layer 렌더링 (선택된 마커 애니메이션)
+      } // 2. Base Layer 재렌더링 (단일 Shape로 최적화되어 빠름)
 
-        doRenderAnimation();
-      } // 4. Event Layer 렌더링 (hover 처리)
 
+      doRenderBase(); // 3. Event Layer 렌더링 (hover 처리)
 
       doRenderEvent();
     }; // --------------------------------------------------------------------------
@@ -6397,7 +7249,7 @@
           }
         }
       } catch (error) {
-        console.error('[WoongKonvaMarker] handleClick error:', error);
+        console.error('[WoongCanvasPolygon] handleClick error:', error);
       }
     };
     /**
@@ -6423,7 +7275,7 @@
           if (hoveredItem && onMouseOver) onMouseOver(hoveredItem);
         }
       } catch (error) {
-        console.error('[WoongKonvaMarker] handleMouseMove error:', error);
+        console.error('[WoongCanvasPolygon] handleMouseMove error:', error);
       }
     };
     /**
@@ -6521,21 +7373,12 @@
         listening: false // 이벤트 리스닝 비활성화로 성능 향상
 
       });
-      var animationLayer = new Konva__default["default"].Layer({
-        listening: false
-      });
       var eventLayer = new Konva__default["default"].Layer({
         listening: false
       });
       baseLayerRef.current = baseLayer;
-      animationLayerRef.current = animationLayer;
       eventLayerRef.current = eventLayer;
       stage.add(baseLayer);
-
-      if (renderAnimation) {
-        stage.add(animationLayer);
-      }
-
       stage.add(eventLayer); // 초기 뷰포트 설정
 
       updateViewport(); // ResizeObserver (맵 크기 변경 감지)
@@ -6621,7 +7464,6 @@
 
 
         baseLayer.destroyChildren();
-        animationLayer.destroyChildren();
         eventLayer.destroyChildren();
         stage.destroy(); // 캐시 정리
 
@@ -6655,7 +7497,6 @@
       selectedItemsMapRef.current = newSelectedItemsMap; // 렌더링
 
       doRenderBase();
-      doRenderAnimation();
       doRenderEvent();
     }, [externalSelectedItems]); // 배열 자체를 dependency로 사용
     // --------------------------------------------------------------------------
@@ -9579,7 +10420,6 @@
   exports.Drawable = Drawable;
   exports.GeoCalulator = GeoCalulator;
   exports.GoogleMintMapController = GoogleMintMapController;
-  exports.KonvaMarkerProvider = KonvaMarkerProvider;
   exports.LRUCache = LRUCache;
   exports.MapBuildingProjection = MapBuildingProjection;
   exports.MapCanvasMarkerWrapper = MapCanvasMarkerWrapper;
@@ -9612,7 +10452,9 @@
   exports.Spacing = Spacing;
   exports.SpatialHashGrid = SpatialHashGrid;
   exports.Status = Status;
-  exports.WoongCanvasLayer = WoongCanvasLayer;
+  exports.WoongCanvasMarker = WoongCanvasMarker;
+  exports.WoongCanvasPolygon = WoongCanvasPolygon;
+  exports.WoongCanvasProvider = WoongCanvasProvider;
   exports.calculateTextBoxWidth = calculateTextBoxWidth;
   exports.computeMarkerOffset = computeMarkerOffset;
   exports.computePolygonOffsets = computePolygonOffsets;
@@ -9623,9 +10465,9 @@
   exports.isPointInPolygon = isPointInPolygon;
   exports.isPointInPolygonData = isPointInPolygonData;
   exports.log = log;
-  exports.useKonvaMarkerContext = useKonvaMarkerContext;
   exports.useMarkerMoving = useMarkerMoving;
   exports.useMintMapController = useMintMapController;
+  exports.useWoongCanvasContext = useWoongCanvasContext;
   exports.waiting = waiting;
 
   Object.defineProperty(exports, '__esModule', { value: true });