@mint-ui/map 1.2.0-test.35 → 1.2.0-test.36

package/dist/components/mint-map/core/advanced/woongCanvasMarker/WoongCanvasMarker.js

@@ -23,9 +23,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Konva__default = /*#__PURE__*/_interopDefaultLegacy(Konva);
 
-// 메인 컴포넌트
-// ============================================================================
-
 var WoongCanvasMarker = function (props) {
   var data = props.data,
       onClick = props.onClick,
@@ -35,225 +32,88 @@ var WoongCanvasMarker = function (props) {
       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,
+      _c = props.cullingMargin,
+      cullingMargin = _c === void 0 ? performance.DEFAULT_CULLING_MARGIN : _c,
+      _d = props.maxCacheSize,
+      maxCacheSize = _d === void 0 ? performance.DEFAULT_MAX_CACHE_SIZE : _d,
       externalSelectedItems = props.selectedItems,
       externalSelectedItem = props.selectedItem,
-      _f = props.disableInteraction,
-      disableInteraction = _f === void 0 ? false : _f,
+      _e = props.disableInteraction,
+      disableInteraction = _e === void 0 ? false : _e,
       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
-  // --------------------------------------------------------------------------
-
+      options = tslib.__rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "renderBase", "renderEvent"]);
 
   var controller = MintMapProvider.useMintMapController();
   var context$1 = context.useWoongCanvasContext();
-  var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // --------------------------------------------------------------------------
-  // DOM Refs
-  // --------------------------------------------------------------------------
+  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 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 eventLayerRef = React.useRef(null); // 상태 관리 Refs (React 리렌더링 최소화)
 
+  var dataRef = React.useRef(data);
   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 selectedItemsMapRef = React.useRef(new Map()); // 드래그 상태 Refs
 
   var draggingRef = React.useRef(false);
   var prevCenterOffsetRef = React.useRef(null);
   var accumTranslateRef = React.useRef({
     x: 0,
     y: 0
-  }); // --------------------------------------------------------------------------
-  // Performance Refs (캐싱 & 최적화)
-  // --------------------------------------------------------------------------
-
-  /** 좌표 변환 결과 LRU 캐시 */
+  }); // 성능 최적화 Refs
 
   var offsetCacheRef = React.useRef(new performance.LRUCache(maxCacheSize));
-  /** 공간 인덱스 (빠른 Hit Test) */
-
   var spatialIndexRef = React.useRef(new performance.SpatialHashGrid(performance.SPATIAL_GRID_CELL_SIZE));
-  /** 바운딩 박스 캐시 (Viewport Culling 최적화) */
-
   var boundingBoxCacheRef = React.useRef(new Map());
-  /** 뷰포트 경계 캐시 (Viewport Culling) */
-
-  var viewportRef = React.useRef(null); // --------------------------------------------------------------------------
-  // 유틸리티 함수: 뷰포트 관리
-  // --------------------------------------------------------------------------
-
-  /**
-   * 현재 뷰포트 영역 계산
-   */
+  var viewportRef = React.useRef(null); // 뷰포트 영역 계산 (Viewport Culling용)
 
   var updateViewport = function () {
     viewport.updateViewport(stageRef.current, cullingMargin, viewportRef);
-  };
-  /**
-   * 아이템이 현재 뷰포트 안에 있는지 확인 (바운딩 박스 캐싱)
-   */
+  }; // 뷰포트 내부 여부 확인 (바운딩 박스 캐싱)
 
 
   var isInViewport = function (item) {
-    return viewport.isInViewport(item, enableViewportCulling, viewportRef, boundingBoxCacheRef, computeBoundingBox);
-  }; // --------------------------------------------------------------------------
-  // 유틸리티 함수: 좌표 변환 캐싱
-  // --------------------------------------------------------------------------
-
-  /**
-   * 마커 좌표 변환 결과를 캐시하고 반환
-   *
-   * @param markerData 마커 데이터
-   * @returns 변환된 좌표 또는 null
-   */
+    return viewport.isInViewport(item, viewportRef, boundingBoxCacheRef, computeBoundingBox);
+  }; // 마커 좌표 변환 (위경도 → 화면 좌표, LRU 캐시 사용)
 
 
   var getOrComputeMarkerOffset = function (markerData) {
     var cached = offsetCacheRef.current.get(markerData.id);
     if (cached && !Array.isArray(cached)) return cached;
     var result = utils.computeMarkerOffset(markerData, controller);
-
-    if (result) {
-      offsetCacheRef.current.set(markerData.id, result);
-    }
-
+    if (!result) return null;
+    offsetCacheRef.current.set(markerData.id, result);
     return result;
-  }; // --------------------------------------------------------------------------
-  // 유틸리티 함수: 바운딩 박스 계산
-  // --------------------------------------------------------------------------
-
-  /**
-   * 마커의 바운딩 박스 계산
-   *
-   * 마커의 화면 상 위치와 크기를 기반으로 바운딩 박스를 계산합니다.
-   * Viewport Culling에 사용되며, tailHeight를 포함하여 전체 표시 영역을 계산합니다.
-   *
-   * @param item 마커 데이터
-   * @returns 바운딩 박스 (minX, minY, maxX, maxY) 또는 null (좌표 변환 실패 시)
-   *
-   * @remarks
-   * - **boxHeight**: 마커 본체만 포함 (Hit Test 영역)
-   * - **tailHeight**: 마커 꼬리 높이 (Viewport Culling용, 화면에 보이는 전체 영역 포함)
-   * - 바운딩 박스는 캐시되어 성능 최적화
-   *
-   * @example
-   * ```typescript
-   * const bbox = computeBoundingBox(item);
-   * if (!bbox) return; // 계산 실패
-   * // bbox.minX, bbox.minY, bbox.maxX, bbox.maxY 사용
-   * ```
-   */
+  }; // 마커 바운딩 박스 계산 (Viewport Culling 및 Hit Test용)
 
 
   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용)
-
+    var tailHeight = item.tailHeight || 0;
     return {
       minX: offset.x - boxWidth / 2,
       minY: offset.y - boxHeight - tailHeight,
       maxX: offset.x + boxWidth / 2,
       maxY: offset.y
     };
-  }; // --------------------------------------------------------------------------
-  // 유틸리티 함수: 공간 인덱싱
-  // --------------------------------------------------------------------------
-
-  /**
-   * 공간 인덱스 빌드 (빠른 Hit Test를 위한 자료구조)
-   *
-   * 모든 마커의 바운딩 박스를 Spatial Hash Grid에 삽입합니다.
-   * 이를 통해 클릭/호버 시 해당 위치 주변의 마커만 빠르게 조회할 수 있습니다.
-   *
-   * @remarks
-   * - 호출 시점: 데이터 변경 시 또는 지도 이동/줌 완료 시
-   * - 성능: O(n) 시간복잡도, n은 마커 개수
-   * - Hit Test 성능: O(1) 수준 (30,000개 → ~10개 후보만 체크)
-   */
+  }; // 공간 인덱스 빌드 (빠른 Hit Test용)
 
 
   var buildSpatialIndex = function () {
     hooks.buildSpatialIndex(dataRef.current, spatialIndexRef.current, computeBoundingBox);
-  }; // --------------------------------------------------------------------------
-  // 렌더링 함수 결정
-  // --------------------------------------------------------------------------
-
-  /**
-   * 외부 렌더링 함수에 전달할 유틸리티 객체
-   *
-   * 커스텀 렌더링 함수(renderBase, renderAnimation, renderEvent)에서 사용할
-   * 좌표 변환 등의 헬퍼 함수들을 제공합니다.
-   *
-   * @remarks
-   * - getOrComputeMarkerOffset: 마커 좌표 변환 (자동 캐싱)
-   * - getOrComputePolygonOffsets: 폴리곤 좌표 변환 (마커에서는 사용 안 함)
-   */
+  }; // 렌더링 유틸리티 객체
 
 
   var renderUtils = {
@@ -261,48 +121,29 @@ var WoongCanvasMarker = function (props) {
       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에서 처리 (성능 최적화)
-   */
+  }; // Base Layer 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
 
   var doRenderBase = function () {
     var layer = baseLayerRef.current;
-    if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
-
+    if (!layer) return;
     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 hovered = hoveredItemRef.current; // 뷰포트 컬링: 화면에 보이는 항목만 필터링
 
-          var visibleItems = enableViewportCulling ? dataRef.current.filter(function (item) {
+          var visibleItems = dataRef.current.filter(function (item) {
             return isInViewport(item);
-          }) : dataRef.current; // topOnHover가 true이고 renderEvent가 없으면 Base Layer에서 hover 처리
+          }); // topOnHover 옵션: hover된 항목을 나중에 그려서 최상위에 표시
 
           if (topOnHover && !renderEvent && hovered) {
-            // hover된 항목 제외하고 렌더링
             visibleItems = visibleItems.filter(function (item) {
               return item.id !== hovered.id;
             });
-          } // 일반 항목 렌더링
+          } // 일반 항목들 먼저 렌더링
 
 
           renderBase({
@@ -311,12 +152,10 @@ var WoongCanvasMarker = function (props) {
             selectedIds: selectedIdsRef.current,
             hoveredItem: hovered,
             utils: renderUtils
-          }); // hover된 항목을 최상단에 렌더링 (renderEvent가 없을 때만)
+          }); // hover된 항목을 마지막에 렌더링하여 최상위에 표시
 
           if (topOnHover && !renderEvent && hovered) {
-            var isHoveredInViewport = enableViewportCulling ? isInViewport(hovered) : true;
-
-            if (isHoveredInViewport) {
+            if (isInViewport(hovered)) {
               renderBase({
                 ctx: ctx,
                 items: [hovered],
@@ -332,72 +171,26 @@ var WoongCanvasMarker = function (props) {
         hitStrokeWidth: 0
       });
       layer.add(shape);
-    } // sceneFunc는 이미 설정되어 있으므로 다시 그리기만
-
+    }
 
     layer.batchDraw();
-  };
-  /**
-   * Animation 레이어 렌더링 (선택된 마커 애니메이션)
-   *
-   * 선택된 마커에 대한 애니메이션 효과를 렌더링합니다.
-   * renderAnimation prop이 제공된 경우에만 실행됩니다.
-   *
-   * @remarks
-   * - **성능 최적화**: 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 + 선택 상태 표시)
-   *
-   * 마커의 hover 효과 및 선택 상태를 표시합니다.
-   * renderEvent prop이 제공된 경우에만 실행됩니다.
-   *
-   * @remarks
-   * - **성능 최적화**:
-   *   1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
-   *   2. sceneFunc 한 번만 설정 (함수 재생성 제거)
-   *   3. 클로저로 최신 데이터 참조
-   * - **topOnHover 지원**: hover된 항목을 최상단에 렌더링
-   * - 선택된 항목은 Map에서 O(1)로 조회하여 성능 최적화
-   */
+  }; // Event Layer 렌더링 (hover 효과 및 선택 상태 표시)
 
 
   var doRenderEvent = function () {
     var layer = eventLayerRef.current;
-    if (!layer) return;
-    if (!renderEvent) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
-
+    if (!layer || !renderEvent) return;
     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 값 참조
-          // 성능 최적화: Array.from 대신 직접 변환 (메모리 할당 최소화)
-
+          var ctx = context;
           var selectedItems = helpers.mapValuesToArray(selectedItemsMapRef.current);
-          var hovered = hoveredItemRef.current; // topOnHover가 true이면 hover된 항목을 최상단에 렌더링
+          var hovered = hoveredItemRef.current;
 
           if (topOnHover && hovered) {
-            // 1. 먼저 일반 항목들 렌더링 (hover된 항목 제외)
             renderEvent({
               ctx: ctx,
               hoveredItem: null,
@@ -406,13 +199,9 @@ var WoongCanvasMarker = function (props) {
                 return item.id !== hovered.id;
               }),
               selectedItem: selectedItemRef.current
-            }); // 2. hover된 항목을 최상단에 렌더링
-
-            var isHoveredInViewport = enableViewportCulling ? isInViewport(hovered) : true;
+            });
 
-            if (isHoveredInViewport) {
-              // hover된 항목이 선택되어 있다면 hoverSelectedItems에 포함시켜서 
-              // renderEvent에서 hover 스타일만 적용되도록 함
+            if (isInViewport(hovered)) {
               var hoveredIsSelected = selectedItems.some(function (item) {
                 return item.id === hovered.id;
               });
@@ -426,7 +215,6 @@ var WoongCanvasMarker = function (props) {
               });
             }
           } else {
-            // topOnHover가 false이거나 hover된 항목이 없으면 일반 렌더링
             renderEvent({
               ctx: ctx,
               hoveredItem: hovered,
@@ -441,28 +229,21 @@ var WoongCanvasMarker = function (props) {
         hitStrokeWidth: 0
       });
       layer.add(shape);
-    } // sceneFunc는 이미 설정되어 있으므로 다시 그리기만
-
+    }
 
     layer.batchDraw();
-  };
-  /**
-   * 전체 즉시 렌더링 (IDLE 시 호출)
-   */
+  }; // 전체 즉시 렌더링
 
 
   var renderAllImmediate = function () {
     updateViewport();
     buildSpatialIndex();
     doRenderBase();
-    doRenderAnimation();
     doRenderEvent();
-  }; // --------------------------------------------------------------------------
-  // 이벤트 핸들러: 지도 이벤트
-  // --------------------------------------------------------------------------
+  }; // 지도 이벤트 핸들러 생성
 
 
-  var _g = hooks.createMapEventHandlers({
+  var _f = hooks.createMapEventHandlers({
     controller: controller,
     containerRef: containerRef,
     markerRef: markerRef,
@@ -473,73 +254,38 @@ var WoongCanvasMarker = function (props) {
     boundingBoxCacheRef: boundingBoxCacheRef,
     renderAllImmediate: renderAllImmediate
   }),
-      handleIdle = _g.handleIdle,
-      handleZoomStart = _g.handleZoomStart,
-      handleZoomEnd = _g.handleZoomEnd,
-      handleCenterChanged = _g.handleCenterChanged,
-      handleDragStartShared = _g.handleDragStart,
-      handleDragEndShared = _g.handleDragEnd;
-  /**
-   * 드래그 시작 처리 (커서를 grabbing으로 변경)
-   */
-
+      handleIdle = _f.handleIdle,
+      handleZoomStart = _f.handleZoomStart,
+      handleZoomEnd = _f.handleZoomEnd,
+      handleCenterChanged = _f.handleCenterChanged,
+      handleDragStartShared = _f.handleDragStart,
+      handleDragEndShared = _f.handleDragEnd;
 
   var handleDragStart = function () {
     handleDragStartShared();
     draggingRef.current = true;
     controller.setMapCursor('grabbing');
   };
-  /**
-   * 드래그 종료 처리 (커서를 기본으로 복원)
-   */
-
 
   var handleDragEnd = function () {
     handleDragEndShared();
     draggingRef.current = false;
     controller.setMapCursor('grab');
-  }; // --------------------------------------------------------------------------
-  // Hit Test & 상태 관리
-  // --------------------------------------------------------------------------
-
-  /**
-   * 특정 좌표의 마커 데이터 찾기 (Spatial Index 사용)
-   *
-   * 클릭/호버 이벤트 시 해당 위치에 있는 마커를 찾습니다.
-   * Spatial Hash Grid를 사용하여 O(1) 수준의 빠른 Hit Test를 수행합니다.
-   *
-   * @param offset 검사할 화면 좌표 (픽셀 단위)
-   * @returns 찾은 마커 데이터 또는 null (없으면)
-   *
-   * @remarks
-   * - **topOnHover 지원**: topOnHover가 true일 때 현재 hover된 항목을 최우선으로 체크
-   *   - 시각적으로 최상단에 있는 항목이 hit test에서도 우선됨
-   * - **성능**: O(후보 항목 수) - 보통 ~10개 (30,000개 전체를 체크하지 않음)
-   * - Spatial Index를 통해 해당 위치 주변의 후보만 추출 후 정확한 Hit Test 수행
-   *
-   * @example
-   * ```typescript
-   * const clickedOffset = controller.positionToOffset(event.param.position);
-   * const data = findData(clickedOffset);
-   * if (data) {
-   *   // 마커를 찾음
-   * }
-   * ```
-   */
+  }; // Hit Test: 특정 좌표의 마커 찾기
 
 
   var findData = function (offset) {
-    // topOnHover가 true이고 현재 hover된 항목이 있으면, 그것을 먼저 체크
+    // topOnHover 옵션이 켜져 있으면 hover된 항목을 최우선으로 확인
     if (topOnHover && hoveredItemRef.current) {
       var hovered = hoveredItemRef.current;
 
       if (utils.isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {
-        return hovered; // 여전히 hover된 항목 위에 있음
+        return hovered;
       }
-    } // Spatial Index로 후보 항목만 빠르게 추출 (30,000개 → ~10개)
+    } // 공간 인덱스에서 후보 항목 조회 (O(1) 수준의 빠른 조회)
 
 
-    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];
@@ -550,18 +296,7 @@ var WoongCanvasMarker = function (props) {
     }
 
     return null;
-  };
-  /**
-   * Hover 상태 설정 및 레이어 렌더링
-   *
-   * @param data hover된 마커/폴리곤 데이터 또는 null
-   *
-   * 최적화: RAF 제거하여 즉시 렌더링 (16ms 지연 제거)
-   *
-   * 🎯 topOnHover 지원:
-   * - renderEvent가 있으면: Event Layer에서만 처리 (성능 최적화)
-   * - renderEvent가 없고 topOnHover=true면: Base Layer에서 처리
-   */
+  }; // Hover 상태 설정 및 렌더링
 
 
   var setHovered = function (data) {
@@ -571,38 +306,18 @@ var WoongCanvasMarker = function (props) {
       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 클릭된 마커 데이터
-   *
-   * @remarks
-   * - **단일 선택**: 기존 선택 해제 후 새로 선택 (토글 가능)
-   * - **다중 선택**: enableMultiSelect가 true면 기존 선택 유지하며 추가/제거
-   * - **성능 최적화**:
-   *   - 단일 Shape 렌더링으로 Base Layer 재렌더링 속도 향상
-   *   - sceneFunc에서 selectedIds를 체크하여 선택된 마커만 스킵
-   *   - 객체 생성 오버헤드 제거로 1,000개 이상도 부드럽게 처리
-   */
+  }; // 클릭 처리: 선택 상태 업데이트
 
 
   var handleLocalClick = function (data) {
-    // 1. 선택 상태 업데이트
     if (enableMultiSelect) {
-      // 다중 선택: Set과 Map 동시 업데이트
       var newSelected = new Set(selectedIdsRef.current);
 
       if (newSelected.has(data.id)) {
@@ -615,7 +330,6 @@ var WoongCanvasMarker = function (props) {
 
       selectedIdsRef.current = newSelected;
     } else {
-      // 단일 선택: 토글
       var newSelected = new Set();
 
       if (!selectedIdsRef.current.has(data.id)) {
@@ -629,135 +343,80 @@ var WoongCanvasMarker = function (props) {
       selectedIdsRef.current = newSelected;
     }
 
-    if (!!renderAnimation) {
-      // 2. Base Layer 재렌더링 (단일 Shape로 최적화되어 빠름)
-      doRenderBase(); // 3. Animation Layer 렌더링 (선택된 마커 애니메이션)
-
-      doRenderAnimation();
-    } // 4. Event Layer 렌더링 (hover 처리)
-
-
+    doRenderBase();
     doRenderEvent();
-  }; // --------------------------------------------------------------------------
-  // 이벤트 핸들러: UI 이벤트
-  // --------------------------------------------------------------------------
-
-  /**
-   * 클릭 이벤트 처리
-   *
-   * @param event 클릭 이벤트 파라미터
-   *
-   * @remarks
-   * - Context가 있으면 전역 이벤트 핸들러가 처리하므로 스킵
-   * - 상호작용이 비활성화되어 있으면 스킵
-   * - Spatial Index를 사용하여 빠른 Hit Test 수행
-   */
+  }; // 클릭 이벤트 핸들러
 
 
   var handleClick = function (event) {
-    if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
-
+    if (disableInteractionRef.current) return;
     var clickedOffset = helpers.validateEvent(event, context$1, controller);
     if (!clickedOffset) return;
     var data = findData(clickedOffset);
-
-    if (data) {
-      handleLocalClick(data);
-
-      if (onClick) {
-        onClick(data, selectedIdsRef.current);
-      }
-    }
-  };
-  /**
-   * 마우스 이동 이벤트 처리 (hover 감지)
-   *
-   * @param event 마우스 이동 이벤트 파라미터
-   *
-   * @remarks
-   * - Context가 있으면 전역 이벤트 핸들러가 처리하므로 스킵
-   * - 상호작용이 비활성화되어 있으면 스킵
-   * - hover 상태 변경 시에만 렌더링 및 콜백 호출 (최적화)
-   */
+    if (!data) return;
+    handleLocalClick(data);
+    onClick === null || onClick === void 0 ? void 0 : onClick(data, selectedIdsRef.current);
+  }; // 마우스 이동 이벤트 핸들러 (hover 감지)
 
 
   var handleMouseMove = function (event) {
-    if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
-
+    if (disableInteractionRef.current) return;
     var mouseOffset = helpers.validateEvent(event, context$1, controller);
     if (!mouseOffset) return;
     var hoveredItem = findData(mouseOffset);
     var prevHovered = hoveredItemRef.current;
-
-    if (prevHovered !== hoveredItem) {
-      setHovered(hoveredItem);
-      if (prevHovered && onMouseOut) onMouseOut(prevHovered);
-      if (hoveredItem && onMouseOver) onMouseOver(hoveredItem);
-    }
-  };
-  /**
-   * 마우스가 canvas를 벗어날 때 hover cleanup
-   */
+    if (prevHovered === hoveredItem) return;
+    setHovered(hoveredItem);
+    if (prevHovered) onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(prevHovered);
+    if (hoveredItem) onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(hoveredItem);
+  }; // 마우스가 맵 영역을 벗어날 때 hover 상태 초기화
 
 
   var handleMouseLeave = function () {
-    if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
-
+    if (disableInteractionRef.current) return;
     var prevHovered = hoveredItemRef.current;
-
-    if (prevHovered) {
-      hoveredItemRef.current = null;
-      controller.setMapCursor('grab');
-      doRenderEvent();
-
-      if (onMouseOut) {
-        onMouseOut(prevHovered);
-      }
-    }
-  }; // --------------------------------------------------------------------------
-  // Lifecycle: DOM 초기화
-  // --------------------------------------------------------------------------
+    if (!prevHovered) return;
+    hoveredItemRef.current = null;
+    controller.setMapCursor('grab');
+    doRenderEvent();
+    onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(prevHovered);
+  }; // DOM 초기화
 
 
   React.useEffect(function () {
     divElement.style.width = 'fit-content';
     return function () {
-      if (markerRef.current) {
-        controller.clearDrawable(markerRef.current);
-        markerRef.current = undefined;
-      }
+      if (!markerRef.current) return;
+      controller.clearDrawable(markerRef.current);
+      markerRef.current = undefined;
     };
-  }, []); // --------------------------------------------------------------------------
-  // Lifecycle: 마커 생성/업데이트
-  // --------------------------------------------------------------------------
+  }, []); // 마커 생성/업데이트
 
   React.useEffect(function () {
-    if (options) {
-      var bounds = controller.getCurrBounds();
+    if (!options) return;
+    var bounds = controller.getCurrBounds();
 
-      var markerOptions = tslib.__assign({
-        position: bounds.nw
-      }, options);
+    var markerOptions = tslib.__assign({
+      position: bounds.nw
+    }, options);
 
-      if (markerRef.current) {
-        controller.updateMarker(markerRef.current, markerOptions);
-      } else {
-        markerRef.current = new MapDrawables.Marker(markerOptions);
-        markerRef.current.element = divElement;
-        controller.createMarker(markerRef.current);
+    if (markerRef.current) {
+      controller.updateMarker(markerRef.current, markerOptions);
+      return;
+    }
 
-        if (divElement.parentElement) {
-          divElement.parentElement.style.pointerEvents = 'none';
-        }
+    markerRef.current = new MapDrawables.Marker(markerOptions);
+    markerRef.current.element = divElement;
+    controller.createMarker(markerRef.current);
 
-        if (options.zIndex !== undefined) {
-          controller.setMarkerZIndex(markerRef.current, options.zIndex);
-        }
-      }
+    if (divElement.parentElement) {
+      divElement.parentElement.style.pointerEvents = 'none';
+    }
+
+    if (options.zIndex !== undefined) {
+      controller.setMarkerZIndex(markerRef.current, options.zIndex);
     }
-  }, [options]); // --------------------------------------------------------------------------
-  // Lifecycle: Konva 초기화 및 이벤트 리스너 등록
-  // --------------------------------------------------------------------------
+  }, [options]); // Konva 초기화 및 이벤트 리스너 등록
 
   React.useEffect(function () {
     var mapDiv = controller.mapDivElement;
@@ -766,34 +425,21 @@ var WoongCanvasMarker = function (props) {
       width: mapDiv.offsetWidth,
       height: mapDiv.offsetHeight
     });
-    stageRef.current = stage; // 레이어 최적화 설정
-
+    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 (맵 크기 변경 감지)
+    stage.add(eventLayer);
+    updateViewport(); // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
 
     var resizeRafId = null;
     var resizeObserver = new ResizeObserver(function () {
-      // RAF로 다음 프레임에 한 번만 실행 (debounce 효과)
       if (resizeRafId !== null) {
         cancelAnimationFrame(resizeRafId);
       }
@@ -816,10 +462,9 @@ var WoongCanvasMarker = function (props) {
     controller.addEventListener('CLICK', handleClick);
     controller.addEventListener('MOUSEMOVE', handleMouseMove);
     controller.addEventListener('DRAGSTART', handleDragStart);
-    controller.addEventListener('DRAGEND', handleDragEnd); // 맵 컨테이너에 mouseleave 이벤트 추가
-
+    controller.addEventListener('DRAGEND', handleDragEnd);
     mapDiv.addEventListener('mouseleave', handleMouseLeave);
-    renderAllImmediate(); // Context 사용 시 컴포넌트 등록 (다중 인스턴스 관리)
+    renderAllImmediate(); // Context 사용 시 컴포넌트 등록
 
     var componentInstance = null;
 
@@ -840,22 +485,17 @@ var WoongCanvasMarker = function (props) {
         },
         isInteractionDisabled: function () {
           return disableInteractionRef.current;
-        } // 🚫 상호작용 비활성화 여부 반환
-
+        }
       };
       context$1.registerComponent(componentInstance);
-    } // Cleanup 함수
-
+    }
 
     return function () {
-      // RAF 정리
       if (resizeRafId !== null) {
         cancelAnimationFrame(resizeRafId);
-      } // 옵저버 정리
-
-
-      resizeObserver.disconnect(); // 이벤트 리스너 정리
+      }
 
+      resizeObserver.disconnect();
       controller.removeEventListener('IDLE', handleIdle);
       controller.removeEventListener('ZOOMSTART', handleZoomStart);
       controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
@@ -864,59 +504,41 @@ var WoongCanvasMarker = function (props) {
       controller.removeEventListener('MOUSEMOVE', handleMouseMove);
       controller.removeEventListener('DRAGSTART', handleDragStart);
       controller.removeEventListener('DRAGEND', handleDragEnd);
-      mapDiv.removeEventListener('mouseleave', handleMouseLeave); // Context 정리
+      mapDiv.removeEventListener('mouseleave', handleMouseLeave);
 
       if (context$1 && componentInstance) {
         context$1.unregisterComponent(componentInstance);
-      } // Konva 리소스 정리
-
+      }
 
       baseLayer.destroyChildren();
-      animationLayer.destroyChildren();
       eventLayer.destroyChildren();
-      stage.destroy(); // 캐시 정리
-
+      stage.destroy();
       offsetCacheRef.current.clear();
       boundingBoxCacheRef.current.clear();
       spatialIndexRef.current.clear();
     };
-  }, []); // 초기화는 한 번만
-  // --------------------------------------------------------------------------
-  // Lifecycle: disableInteraction 동기화
-  // --------------------------------------------------------------------------
+  }, []); // disableInteraction 동기화
 
   React.useEffect(function () {
     disableInteractionRef.current = disableInteraction;
-  }, [disableInteraction]); // --------------------------------------------------------------------------
-  // Lifecycle: 외부 selectedItems 동기화
-  // --------------------------------------------------------------------------
+  }, [disableInteraction]); // 외부 selectedItems 동기화
 
   React.useEffect(function () {
     if (!stageRef.current) return;
-    hooks.syncExternalSelectedItems(externalSelectedItems, selectedIdsRef, selectedItemsMapRef); // 렌더링
-
+    hooks.syncExternalSelectedItems(externalSelectedItems, selectedIdsRef, selectedItemsMapRef);
     doRenderBase();
-    doRenderAnimation();
     doRenderEvent();
-  }, [externalSelectedItems]); // 배열 자체를 dependency로 사용
-  // --------------------------------------------------------------------------
-  // Lifecycle: 외부 selectedItem 변경 시 Event Layer 리렌더링
-  // --------------------------------------------------------------------------
+  }, [externalSelectedItems]); // 외부 selectedItem 변경 시 Event Layer 리렌더링
 
   React.useEffect(function () {
-    if (!stageRef.current) return; // Ref 동기화
-
-    selectedItemRef.current = externalSelectedItem; // selectedItem이 변경되면 Event Layer만 다시 그림
-
+    if (!stageRef.current) return;
+    selectedItemRef.current = externalSelectedItem;
     doRenderEvent();
-  }, [externalSelectedItem]); // --------------------------------------------------------------------------
-  // Lifecycle: 데이터 변경 시 렌더링
-  // --------------------------------------------------------------------------
+  }, [externalSelectedItem]); // 데이터 변경 시 렌더링 (캐시 정리 및 선택 상태 동기화)
 
   React.useEffect(function () {
-    if (!stageRef.current) return; // dataRef 동기화
-
-    dataRef.current = data; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
+    if (!stageRef.current) return;
+    dataRef.current = data;
 
     if (containerRef.current) {
       containerRef.current.style.transform = '';
@@ -926,26 +548,10 @@ var WoongCanvasMarker = function (props) {
     accumTranslateRef.current = {
       x: 0,
       y: 0
-    }; // 캐시 정리 (새 데이터이므로 기존 캐시는 무효)
-
+    };
     offsetCacheRef.current.clear();
     boundingBoxCacheRef.current.clear();
-    /**
-     * 선택 상태 동기화 (최적화 버전)
-     *
-     * data가 변경되면 selectedItemsMapRef도 업데이트 필요
-     * (참조가 바뀌므로 기존 Map의 데이터는 stale 상태)
-     *
-     * 🔥 중요: 화면 밖 데이터도 선택 상태 유지!
-     * - 현재 data에 있으면 최신 데이터로 업데이트
-     * - 없으면 기존 selectedItemsMapRef의 데이터 유지
-     *
-     * 최적화: data를 Map으로 먼저 변환하여 find() 순회 제거
-     * - O(전체 데이터 수 + 선택된 개수) - 매우 효율적
-     */
-
-    selectedItemsMapRef.current = hooks.syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current); // 즉시 렌더링
-
+    selectedItemsMapRef.current = hooks.syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current);
     renderAllImmediate();
   }, [data]);
   return reactDom.createPortal(React__default["default"].createElement("div", {