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

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

@@ -24,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,
@@ -54,167 +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 () {
     viewport.updateViewport(stageRef.current, cullingMargin, viewportRef);
-  };
-  /**
-   * 아이템이 현재 뷰포트 안에 있는지 확인 (바운딩 박스 캐싱)
-   */
+  }; // 뷰포트 내부 여부 확인 (바운딩 박스 캐싱)
 
 
   var isInViewport = function (item) {
-    return viewport.isInViewport(item, enableViewportCulling, viewportRef, boundingBoxCacheRef, computeBoundingBox);
-  }; // --------------------------------------------------------------------------
-  // 유틸리티 함수: 좌표 변환 캐싱
-  // --------------------------------------------------------------------------
-
-  /**
-   * 폴리곤 좌표 변환 결과를 캐시하고 반환
-   * @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;
-  }; // --------------------------------------------------------------------------
-  // 유틸리티 함수: 바운딩 박스 계산
-  // --------------------------------------------------------------------------
-
-  /**
-   * 폴리곤의 바운딩 박스 계산
-   *
-   * 폴리곤의 모든 좌표를 순회하여 최소/최대 X, Y 값을 계산합니다.
-   * Viewport Culling에 사용되며, MultiPolygon 형식을 지원합니다.
-   *
-   * @param item 폴리곤 데이터
-   * @returns 바운딩 박스 (minX, minY, maxX, maxY) 또는 null (좌표 변환 실패 시)
-   *
-   * @remarks
-   * - 성능: O(n), n은 폴리곤의 총 좌표 수
-   * - 바운딩 박스는 캐시되어 성능 최적화
-   * - MultiPolygon의 모든 좌표를 고려하여 계산
-   *
-   * @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 offsets = getOrComputePolygonOffsets(item);
-    if (!offsets) return null;
+    if (!offsets) return null; // 모든 좌표를 순회하며 최소/최대값 찾기
+
     var minX = Infinity,
         minY = Infinity,
         maxX = -Infinity,
@@ -244,71 +139,39 @@ var WoongCanvasPolygon = function (props) {
       maxX: maxX,
       maxY: maxY
     };
-  }; // --------------------------------------------------------------------------
-  // 유틸리티 함수: 공간 인덱싱
-  // --------------------------------------------------------------------------
-
-  /**
-   * 공간 인덱스 빌드 (빠른 Hit Test를 위한 자료구조)
-   */
+  }; // 공간 인덱스 빌드 (빠른 Hit Test용)
 
 
   var buildSpatialIndex = function () {
     hooks.buildSpatialIndex(dataRef.current, spatialIndexRef.current, computeBoundingBox);
-  }; // --------------------------------------------------------------------------
-  // 렌더링 함수 결정 (dataType에 따라)
-  // --------------------------------------------------------------------------
-
-  /**
-   * 외부 렌더링 함수에 전달할 유틸리티 객체
-   */
+  }; // 렌더링 유틸리티 객체
 
 
   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 레이어 렌더링 (뷰포트 컬링 적용)
-   *
-   * 🔥 최적화:
-   * 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,
@@ -322,45 +185,24 @@ var WoongCanvasPolygon = function (props) {
         hitStrokeWidth: 0
       });
       layer.add(shape);
-    } // sceneFunc는 이미 설정되어 있으므로 다시 그리기만
-
+    }
 
     layer.batchDraw();
-  };
-  /**
-   * Event 레이어 렌더링 (hover + 선택 상태 표시)
-   *
-   * 폴리곤의 hover 효과 및 선택 상태를 표시합니다.
-   * 자동 렌더링 방식으로 renderPolygonEvent를 사용합니다.
-   *
-   * @remarks
-   * - **성능 최적화**:
-   *   1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
-   *   2. sceneFunc 한 번만 설정 (함수 재생성 제거)
-   *   3. 클로저로 최신 데이터 참조
-   * - 선택된 항목은 Map에서 O(1)로 조회하여 성능 최적화
-   * - 자동 렌더링: 스타일 props(selectedFillColor, hoveredFillColor 등) 기반으로 자동 렌더링
-   */
+  }; // 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 값 참조
-          // 성능 최적화: Array.from 대신 직접 변환 (메모리 할당 최소화)
-
+          var ctx = context;
           var selectedItems = helpers.mapValuesToArray(selectedItemsMapRef.current);
-          var hovered = hoveredItemRef.current; // 일반 렌더링
-
+          var hovered = hoveredItemRef.current;
           renderEvent({
             ctx: ctx,
             hoveredItem: hovered,
@@ -374,21 +216,10 @@ var WoongCanvasPolygon = function (props) {
         hitStrokeWidth: 0
       });
       layer.add(shape);
-    } // sceneFunc는 이미 설정되어 있으므로 다시 그리기만
-
+    }
 
     layer.batchDraw();
-  };
-  /**
-   * 전체 즉시 렌더링 (IDLE 시 호출)
-   *
-   * 뷰포트 업데이트, 공간 인덱스 빌드, 모든 레이어 렌더링을 순차적으로 수행합니다.
-   *
-   * @remarks
-   * - 호출 시점: 지도 이동/줌 완료 시, 데이터 변경 시, 리사이즈 시
-   * - 순서: 뷰포트 업데이트 → 공간 인덱스 빌드 → Base → Event 렌더링
-   * - Animation Layer는 사용하지 않음 (폴리곤 특성)
-   */
+  }; // 전체 즉시 렌더링
 
 
   var renderAllImmediate = function () {
@@ -396,12 +227,10 @@ var WoongCanvasPolygon = function (props) {
     buildSpatialIndex();
     doRenderBase();
     doRenderEvent();
-  }; // --------------------------------------------------------------------------
-  // 이벤트 핸들러: 지도 이벤트
-  // --------------------------------------------------------------------------
+  }; // 지도 이벤트 핸들러 생성
 
 
-  var _f = hooks.createMapEventHandlers({
+  var _e = hooks.createMapEventHandlers({
     controller: controller,
     containerRef: containerRef,
     markerRef: markerRef,
@@ -412,49 +241,32 @@ var WoongCanvasPolygon = function (props) {
     boundingBoxCacheRef: boundingBoxCacheRef,
     renderAllImmediate: renderAllImmediate
   }),
-      handleIdle = _f.handleIdle,
-      handleZoomStart = _f.handleZoomStart,
-      handleZoomEnd = _f.handleZoomEnd,
-      handleCenterChanged = _f.handleCenterChanged,
-      handleDragStartShared = _f.handleDragStart,
-      handleDragEndShared = _f.handleDragEnd;
-  /**
-   * 드래그 시작 처리 (커서를 grabbing으로 변경)
-   */
-
+      handleIdle = _e.handleIdle,
+      handleZoomStart = _e.handleZoomStart,
+      handleZoomEnd = _e.handleZoomEnd,
+      handleCenterChanged = _e.handleCenterChanged,
+      handleDragStartShared = _e.handleDragStart,
+      handleDragEndShared = _e.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 사용)
-   *
-   * @param offset 검사할 좌표
-   * @returns 찾은 폴리곤 데이터 또는 null
-   */
+  }; // 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;
@@ -462,19 +274,7 @@ var WoongCanvasPolygon = function (props) {
     }
 
     return null;
-  };
-  /**
-   * Hover 상태 설정 및 레이어 렌더링
-   *
-   * 마우스가 폴리곤 위에 올라갔을 때 hover 상태를 설정하고 즉시 렌더링합니다.
-   *
-   * @param data hover된 폴리곤 데이터 또는 null (hover 해제 시)
-   *
-   * @remarks
-   * - **성능 최적화**: RAF 없이 즉시 렌더링 (16ms 지연 제거)
-   * - Event Layer에서 hover 효과 표시
-   * - 커서 상태도 자동으로 업데이트됨 (pointer/grab)
-   */
+  }; // Hover 상태 설정 및 렌더링
 
 
   var setHovered = function (data) {
@@ -484,32 +284,14 @@ var WoongCanvasPolygon = function (props) {
       controller.setMapCursor('grabbing');
     } else {
       controller.setMapCursor(data ? 'pointer' : 'grab');
-    } // 즉시 렌더링 (RAF 없이)
-
+    }
 
     doRenderEvent();
-  };
-  /**
-   * 클릭 처리 (단일/다중 선택)
-   *
-   * 폴리곤 클릭 시 선택 상태를 업데이트하고 렌더링을 수행합니다.
-   *
-   * @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)) {
@@ -522,7 +304,6 @@ var WoongCanvasPolygon = function (props) {
 
       selectedIdsRef.current = newSelected;
     } else {
-      // 단일 선택: 토글
       var newSelected = new Set();
 
       if (!selectedIdsRef.current.has(data.id)) {
@@ -534,132 +315,79 @@ var WoongCanvasPolygon = function (props) {
       }
 
       selectedIdsRef.current = newSelected;
-    } // 2. Base Layer 재렌더링 (단일 Shape로 최적화되어 빠름)
-
-
-    doRenderBase(); // 3. 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);
-    }
-  };
-  /**
-   * 마우스가 canvas를 벗어날 때 hover cleanup
-   *
-   * 맵 영역 밖으로 마우스가 나갔을 때 hover 상태를 초기화합니다.
-   *
-   * @remarks
-   * - 상호작용이 비활성화되어 있으면 스킵
-   * - hover 상태 초기화 및 커서 복원
-   */
+    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;
@@ -668,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
@@ -680,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);
       }
@@ -709,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;
 
@@ -731,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);
@@ -755,57 +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;
-    hooks.syncExternalSelectedItems(externalSelectedItems, selectedIdsRef, selectedItemsMapRef); // 렌더링
-
+    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 = '';
@@ -815,26 +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(전체 데이터 수 + 선택된 개수) - 매우 효율적
-     */
-
-    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", {