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

package/dist/components/mint-map/core/advanced/woongCanvasPolygon/WoongCanvasPolygon.js

@@ -14,6 +14,9 @@ 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');
 var renderer = require('./renderer.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -21,24 +24,19 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Konva__default = /*#__PURE__*/_interopDefaultLegacy(Konva);
 
-// 메인 컴포넌트
-// ============================================================================
-
 var WoongCanvasPolygon = function (props) {
   var data = props.data,
       onClick = props.onClick,
       _a = props.enableMultiSelect,
       enableMultiSelect = _a === void 0 ? false : _a,
-      _b = props.enableViewportCulling,
-      enableViewportCulling = _b === void 0 ? true : _b,
-      _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,
+      _b = props.cullingMargin,
+      cullingMargin = _b === void 0 ? performance.DEFAULT_CULLING_MARGIN : _b,
+      _c = props.maxCacheSize,
+      maxCacheSize = _c === void 0 ? performance.DEFAULT_MAX_CACHE_SIZE : _c,
       externalSelectedItems = props.selectedItems,
       externalSelectedItem = props.selectedItem,
-      _e = props.disableInteraction,
-      disableInteraction = _e === void 0 ? false : _e,
+      _d = props.disableInteraction,
+      disableInteraction = _d === void 0 ? false : _d,
       baseFillColor = props.baseFillColor,
       baseStrokeColor = props.baseStrokeColor,
       baseLineWidth = props.baseLineWidth,
@@ -51,173 +49,67 @@ var WoongCanvasPolygon = function (props) {
       hoveredFillColor = props.hoveredFillColor,
       hoveredStrokeColor = props.hoveredStrokeColor,
       hoveredLineWidth = props.hoveredLineWidth,
-      options = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "baseFillColor", "baseStrokeColor", "baseLineWidth", "selectedFillColor", "selectedStrokeColor", "selectedLineWidth", "activeFillColor", "activeStrokeColor", "activeLineWidth", "hoveredFillColor", "hoveredStrokeColor", "hoveredLineWidth"]); // --------------------------------------------------------------------------
+      options = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "baseFillColor", "baseStrokeColor", "baseLineWidth", "selectedFillColor", "selectedStrokeColor", "selectedLineWidth", "activeFillColor", "activeStrokeColor", "activeLineWidth", "hoveredFillColor", "hoveredStrokeColor", "hoveredLineWidth"]); // --------------------------------------------------------------------------
   // Hooks & Context
   // --------------------------------------------------------------------------
 
 
   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 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 polygonData 폴리곤 데이터
-   * @returns 변환된 좌표 배열 또는 null
-   */
+    return viewport.isInViewport(item, viewportRef, boundingBoxCacheRef, computeBoundingBox);
+  }; // 폴리곤 좌표 변환 (위경도 → 화면 좌표, LRU 캐시 사용)
 
 
   var getOrComputePolygonOffsets = function (polygonData) {
     var cached = offsetCacheRef.current.get(polygonData.id);
     if (cached && Array.isArray(cached)) return cached;
     var result = utils.computePolygonOffsets(polygonData, controller);
-
-    if (result) {
-      offsetCacheRef.current.set(polygonData.id, result);
-    }
-
+    if (!result) return null;
+    offsetCacheRef.current.set(polygonData.id, result);
     return result;
-  }; // --------------------------------------------------------------------------
-  // 유틸리티 함수: 바운딩 박스 계산
-  // --------------------------------------------------------------------------
-
-  /**
-   * 폴리곤의 바운딩 박스 계산
-   *
-   * @param item 폴리곤 데이터
-   * @returns 바운딩 박스 또는 null
-   */
+  }; // 폴리곤 바운딩 박스 계산 (Viewport Culling 및 Hit Test용)
 
 
   var computeBoundingBox = function (item) {
-    // 폴리곤: 모든 좌표의 최소/최대값 계산
     var offsets = getOrComputePolygonOffsets(item);
-    if (!offsets) return null;
+    if (!offsets) return null; // 모든 좌표를 순회하며 최소/최대값 찾기
+
     var minX = Infinity,
         minY = Infinity,
         maxX = -Infinity,
@@ -247,86 +139,39 @@ var WoongCanvasPolygon = function (props) {
       maxX: maxX,
       maxY: maxY
     };
-  }; // --------------------------------------------------------------------------
-  // 유틸리티 함수: 공간 인덱싱
-  // --------------------------------------------------------------------------
-
-  /**
-   * 공간 인덱스 빌드 (빠른 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 = {
     getOrComputePolygonOffsets: getOrComputePolygonOffsets,
     getOrComputeMarkerOffset: function () {
       return null;
-    } // 폴리곤에서는 사용하지 않음
-
-  };
-  /**
-   * 렌더링 함수 생성 (props 기반)
-   */
+    }
+  }; // 렌더링 함수 생성
 
   var renderBase = renderer.renderPolygonBase(baseFillColor, baseStrokeColor, baseLineWidth);
-  var renderEvent = renderer.renderPolygonEvent(baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth);
-  /** Base Layer에서 사용할 빈 Set (재사용) */
-
-  React.useRef(new Set());
-  /**
-   * Base 레이어 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
-   *
-   * 🔥 최적화:
-   * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
-   * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
-   * 3. 클로저로 최신 데이터 참조
-   *
-   * 🎯 topOnHover 지원:
-   * - renderEvent가 없을 때 Base Layer에서 hover 처리 (fallback)
-   * - renderEvent가 있으면 Event Layer에서 처리 (성능 최적화)
-   */
+  var renderEvent = renderer.renderPolygonEvent(baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth); // 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; // 일반 항목 렌더링
-
+          });
           renderBase({
             ctx: ctx,
             items: visibleItems,
@@ -340,38 +185,24 @@ var WoongCanvasPolygon = function (props) {
         hitStrokeWidth: 0
       });
       layer.add(shape);
-    } // sceneFunc는 이미 설정되어 있으므로 다시 그리기만
-
+    }
 
     layer.batchDraw();
-  };
-  /**
-   * Event 레이어 렌더링 (hover + 선택 상태 표시)
-   *
-   * 🔥 최적화:
-   * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
-   * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
-   * 3. 클로저로 최신 데이터 참조
-   */
+  }; // Event Layer 렌더링 (hover 효과 및 선택 상태 표시)
 
 
   var doRenderEvent = function () {
     var layer = eventLayerRef.current;
-    if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
-
+    if (!layer) 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; // 일반 렌더링
-
+          var ctx = context;
+          var selectedItems = helpers.mapValuesToArray(selectedItemsMapRef.current);
+          var hovered = hoveredItemRef.current;
           renderEvent({
             ctx: ctx,
             hoveredItem: hovered,
@@ -385,14 +216,10 @@ var WoongCanvasPolygon = function (props) {
         hitStrokeWidth: 0
       });
       layer.add(shape);
-    } // sceneFunc는 이미 설정되어 있으므로 다시 그리기만
-
+    }
 
     layer.batchDraw();
-  };
-  /**
-   * 전체 즉시 렌더링 (IDLE 시 호출)
-   */
+  }; // 전체 즉시 렌더링
 
 
   var renderAllImmediate = function () {
@@ -400,111 +227,46 @@ var WoongCanvasPolygon = function (props) {
     buildSpatialIndex();
     doRenderBase();
     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. 새 위치에서 렌더링
+  }; // 지도 이벤트 핸들러 생성
+
+
+  var _e = hooks.createMapEventHandlers({
+    controller: controller,
+    containerRef: containerRef,
+    markerRef: markerRef,
+    options: options,
+    prevCenterOffsetRef: prevCenterOffsetRef,
+    accumTranslateRef: accumTranslateRef,
+    offsetCacheRef: offsetCacheRef,
+    boundingBoxCacheRef: boundingBoxCacheRef,
+    renderAllImmediate: renderAllImmediate
+  }),
+      handleIdle = _e.handleIdle,
+      handleZoomStart = _e.handleZoomStart,
+      handleZoomEnd = _e.handleZoomEnd,
+      handleCenterChanged = _e.handleCenterChanged,
+      handleDragStartShared = _e.handleDragStart,
+      handleDragEndShared = _e.handleDragEnd;
 
-
-    renderAllImmediate();
-  };
-  /**
-   * 줌 시작 시 처리 (일시적으로 숨김)
-   */
-
-
-  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 사용)
-   *
-   * @param offset 검사할 좌표
-   * @returns 찾은 폴리곤 데이터 또는 null
-   */
+  var handleDragEnd = function () {
+    handleDragEndShared();
+    draggingRef.current = false;
+    controller.setMapCursor('grab');
+  }; // Hit Test: 특정 좌표의 폴리곤 찾기
 
 
   var findData = function (offset) {
-    // Spatial Index로 후보 항목만 빠르게 추출 (30,000개 → ~10개)
-    var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 폴리곤 체크
+    // 공간 인덱스에서 후보 항목 조회 (O(1) 수준의 빠른 조회)
+    var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 역순 순회: 나중에 추가된 항목(최상위)이 먼저 선택되도록
 
     for (var i = candidates.length - 1; i >= 0; i--) {
-      var item = candidates[i];
+      var item = candidates[i]; // 정확한 Hit Test: Ray Casting 알고리즘으로 폴리곤 내부 여부 확인
 
       if (utils.isPointInPolygonData(offset, item, getOrComputePolygonOffsets)) {
         return item;
@@ -512,18 +274,7 @@ var WoongCanvasPolygon = 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) {
@@ -533,26 +284,14 @@ var WoongCanvasPolygon = function (props) {
       controller.setMapCursor('grabbing');
     } else {
       controller.setMapCursor(data ? 'pointer' : 'grab');
-    } // 즉시 렌더링 (RAF 없이)
-
+    }
 
     doRenderEvent();
-  };
-  /**
-   * 클릭 처리 (단일/다중 선택)
-   *
-   * @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)) {
@@ -565,7 +304,6 @@ var WoongCanvasPolygon = function (props) {
 
       selectedIdsRef.current = newSelected;
     } else {
-      // 단일 선택: 토글
       var newSelected = new Set();
 
       if (!selectedIdsRef.current.has(data.id)) {
@@ -577,144 +315,79 @@ var WoongCanvasPolygon = function (props) {
       }
 
       selectedIdsRef.current = newSelected;
-    } // 2. Base Layer 재렌더링 (단일 Shape로 최적화되어 빠름)
-
-
-    doRenderBase(); // 3. 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('[WoongCanvasPolygon] 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);
-      }
-    } catch (error) {
-      console.error('[WoongCanvasPolygon] 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);
+  }; // 마우스가 맵 영역을 벗어날 때 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();
-    }
-  }; // --------------------------------------------------------------------------
-  // Lifecycle: DOM 초기화
-  // --------------------------------------------------------------------------
+    if (!prevHovered) return;
+    hoveredItemRef.current = null;
+    controller.setMapCursor('grab');
+    doRenderEvent();
+  }; // 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';
     }
-  }, [options]); // --------------------------------------------------------------------------
-  // Lifecycle: Konva 초기화 및 이벤트 리스너 등록
-  // --------------------------------------------------------------------------
+
+    if (options.zIndex !== undefined) {
+      controller.setMarkerZIndex(markerRef.current, options.zIndex);
+    }
+  }, [options]); // Konva 초기화 및 이벤트 리스너 등록
 
   React.useEffect(function () {
     var mapDiv = controller.mapDivElement;
@@ -723,11 +396,9 @@ var WoongCanvasPolygon = function (props) {
       width: mapDiv.offsetWidth,
       height: mapDiv.offsetHeight
     });
-    stageRef.current = stage; // 레이어 최적화 설정
-
+    stageRef.current = stage;
     var baseLayer = new Konva__default["default"].Layer({
-      listening: false // 이벤트 리스닝 비활성화로 성능 향상
-
+      listening: false
     });
     var eventLayer = new Konva__default["default"].Layer({
       listening: false
@@ -735,13 +406,11 @@ var WoongCanvasPolygon = function (props) {
     baseLayerRef.current = baseLayer;
     eventLayerRef.current = eventLayer;
     stage.add(baseLayer);
-    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);
       }
@@ -764,10 +433,9 @@ var WoongCanvasPolygon = 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;
 
@@ -786,22 +454,17 @@ var WoongCanvasPolygon = 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);
@@ -810,67 +473,41 @@ var WoongCanvasPolygon = 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();
       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();
     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 = '';
@@ -880,46 +517,10 @@ var WoongCanvasPolygon = 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", {