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

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

@@ -14,15 +14,15 @@ 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 viewport = require('../shared/viewport.js');
+var hooks = require('../shared/hooks.js');
+var helpers = require('../shared/helpers.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Konva__default = /*#__PURE__*/_interopDefaultLegacy(Konva);
 
-// 메인 컴포넌트
-// ============================================================================
-
 var WoongCanvasMarker = function (props) {
   var data = props.data,
       onClick = props.onClick,
@@ -32,232 +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 () {
-    if (!stageRef.current) return;
-    var stage = stageRef.current;
-    viewportRef.current = {
-      minX: -cullingMargin,
-      maxX: stage.width() + cullingMargin,
-      minY: -cullingMargin,
-      maxY: stage.height() + cullingMargin
-    };
-  };
-  /**
-   * 아이템이 현재 뷰포트 안에 있는지 확인 (바운딩 박스 캐싱)
-   */
+    viewport.updateViewport(stageRef.current, cullingMargin, viewportRef);
+  }; // 뷰포트 내부 여부 확인 (바운딩 박스 캐싱)
 
 
   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
-   */
+    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;
-  }; // --------------------------------------------------------------------------
-  // 유틸리티 함수: 바운딩 박스 계산
-  // --------------------------------------------------------------------------
-
-  /**
-   * 마커의 바운딩 박스 계산
-   *
-   * 🎯 마커의 경우:
-   * - boxHeight: 본체만 (Hit Test 영역)
-   * - tailHeight: 꼬리 높이 (Viewport Culling용, 화면에 보이는 전체 영역)
-   *
-   * @param item 마커 데이터
-   * @returns 바운딩 박스 또는 null
-   */
+  }; // 마커 바운딩 박스 계산 (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를 위한 자료구조)
-   */
+  }; // 공간 인덱스 빌드 (빠른 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에 따라)
-  // --------------------------------------------------------------------------
-
-  /**
-   * 외부 렌더링 함수에 전달할 유틸리티 객체
-   */
+    hooks.buildSpatialIndex(dataRef.current, spatialIndexRef.current, computeBoundingBox);
+  }; // 렌더링 유틸리티 객체
 
 
   var renderUtils = {
@@ -265,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({
@@ -315,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],
@@ -336,61 +171,26 @@ var WoongCanvasMarker = function (props) {
         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. 클로저로 최신 데이터 참조
-   */
+  }; // 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 값 참조
-
-          var selectedItems = Array.from(selectedItemsMapRef.current.values());
-          var hovered = hoveredItemRef.current; // topOnHover가 true이면 hover된 항목을 최상단에 렌더링
+          var ctx = context;
+          var selectedItems = helpers.mapValuesToArray(selectedItemsMapRef.current);
+          var hovered = hoveredItemRef.current;
 
           if (topOnHover && hovered) {
-            // 1. 먼저 일반 항목들 렌더링 (hover된 항목 제외)
             renderEvent({
               ctx: ctx,
               hoveredItem: null,
@@ -399,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;
               });
@@ -419,7 +215,6 @@ var WoongCanvasMarker = function (props) {
               });
             }
           } else {
-            // topOnHover가 false이거나 hover된 항목이 없으면 일반 렌더링
             renderEvent({
               ctx: ctx,
               hoveredItem: hovered,
@@ -434,137 +229,63 @@ var WoongCanvasMarker = function (props) {
         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 _f = hooks.createMapEventHandlers({
+    controller: controller,
+    containerRef: containerRef,
+    markerRef: markerRef,
+    options: options,
+    prevCenterOffsetRef: prevCenterOffsetRef,
+    accumTranslateRef: accumTranslateRef,
+    offsetCacheRef: offsetCacheRef,
+    boundingBoxCacheRef: boundingBoxCacheRef,
+    renderAllImmediate: renderAllImmediate
+  }),
+      handleIdle = _f.handleIdle,
+      handleZoomStart = _f.handleZoomStart,
+      handleZoomEnd = _f.handleZoomEnd,
+      handleCenterChanged = _f.handleCenterChanged,
+      handleDragStartShared = _f.handleDragStart,
+      handleDragEndShared = _f.handleDragEnd;
 
-
-  var handleZoomStart = function () {
-    if (containerRef.current) {
-      containerRef.current.style.visibility = 'hidden';
-    }
-  };
-  /**
-   * 줌 종료 시 처리 (다시 표시)
-   */
-
-
-  var handleZoomEnd = function () {
-    if (containerRef.current) {
-      containerRef.current.style.visibility = '';
-    }
+  var handleDragStart = function () {
+    handleDragStartShared();
+    draggingRef.current = true;
+    controller.setMapCursor('grabbing');
   };
-  /**
-   * 지도 중심 변경 시 처리 (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 handleDragEnd = function () {
+    handleDragEndShared();
+    draggingRef.current = false;
+    controller.setMapCursor('grab');
+  }; // 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];
@@ -575,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) {
@@ -596,32 +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 클릭된 마커/폴리곤 데이터
-   *
-   * 🔥 최적화: 단일 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)) {
@@ -634,7 +330,6 @@ var WoongCanvasMarker = function (props) {
 
       selectedIdsRef.current = newSelected;
     } else {
-      // 단일 선택: 토글
       var newSelected = new Set();
 
       if (!selectedIdsRef.current.has(data.id)) {
@@ -648,153 +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 이벤트
-  // --------------------------------------------------------------------------
-
-  /**
-   * 클릭 이벤트 처리
-   */
+  }; // 클릭 이벤트 핸들러
 
 
   var handleClick = function (event) {
-    var _a;
-
-    if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
-
-    if (context$1 || !((_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 감지)
-   */
+    if (disableInteractionRef.current) return;
+    var clickedOffset = helpers.validateEvent(event, context$1, controller);
+    if (!clickedOffset) return;
+    var data = findData(clickedOffset);
+    if (!data) return;
+    handleLocalClick(data);
+    onClick === null || onClick === void 0 ? void 0 : onClick(data, selectedIdsRef.current);
+  }; // 마우스 이동 이벤트 핸들러 (hover 감지)
 
 
   var handleMouseMove = function (event) {
-    var _a;
-
-    if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
-
-    if (context$1 || !((_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
-   */
+    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) 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;
@@ -803,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);
       }
@@ -853,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;
 
@@ -877,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);
@@ -901,69 +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; // 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; // 렌더링
-
+    if (!stageRef.current) return;
+    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 = '';
@@ -973,46 +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(전체 데이터 수 + 선택된 개수) - 매우 효율적
-     */
-
-    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; // 즉시 렌더링
-
+    selectedItemsMapRef.current = hooks.syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current);
     renderAllImmediate();
   }, [data]);
   return reactDom.createPortal(React__default["default"].createElement("div", {