@mint-ui/map 1.2.0-test.4 → 1.2.0-test.41

package/dist/index.umd.js

@@ -654,17 +654,6 @@
   var styles$1 = {"mint-map-root":"MintMapCore-module_mint-map-root__SMfwn","mint-map-container":"MintMapCore-module_mint-map-container__8MIIr"};
   styleInject__default["default"](css_248z$1);
 
-  /**
-   * 캔버스 데이터 타입 Enum
-   * 마커인지 폴리곤인지 구분하는 상수
-   */
-  exports.CanvasDataType = void 0;
-
-  (function (CanvasDataType) {
-    CanvasDataType["MARKER"] = "MARKER";
-    CanvasDataType["POLYGON"] = "POLYGON";
-  })(exports.CanvasDataType || (exports.CanvasDataType = {}));
-
   var Drawable =
   /** @class */
   function () {
@@ -799,7 +788,11 @@
   }();
 
   /**
-   * 폴리곤 offset 계산
+   * 폴리곤 좌표 변환 (위경도 → 화면 좌표)
+   *
+   * @param polygonData 폴리곤 데이터
+   * @param controller MintMapController 인스턴스
+   * @returns 변환된 화면 좌표 배열 (4차원 배열) 또는 null
    */
 
   var computePolygonOffsets = function (polygonData, controller) {
@@ -809,7 +802,7 @@
       return null;
     }
 
-    var result = [];
+    var result = []; // GeoJSON MultiPolygon 구조: [MultiPolygon][PolygonGroup][Coordinate][lng, lat]
 
     for (var _i = 0, _a = paths.coordinates; _i < _a.length; _i++) {
       var multiPolygon = _a[_i];
@@ -820,7 +813,8 @@
         var polygonOffsets = [];
 
         for (var _c = 0, polygonGroup_1 = polygonGroup; _c < polygonGroup_1.length; _c++) {
-          var coord = polygonGroup_1[_c];
+          var coord = polygonGroup_1[_c]; // GeoJSON은 [lng, lat] 순서이지만 Position은 [lat, lng] 순서
+
           var pos = new Position(coord[1], coord[0]);
           var offset = controller.positionToOffset(pos);
           polygonOffsets.push([offset.x, offset.y]);
@@ -835,47 +829,97 @@
     return result;
   };
   /**
-   * 마커 offset 계산
+   * 마커 좌표 변환 (위경도 → 화면 좌표)
+   *
+   * @param markerData 마커 데이터
+   * @param controller MintMapController 인스턴스
+   * @returns 변환된 화면 좌표 또는 null
    */
 
   var computeMarkerOffset = function (markerData, controller) {
-    if (!markerData.position) {
-      return null;
-    }
-
+    if (!markerData.position) return null;
     return controller.positionToOffset(markerData.position);
   };
   /**
-   * Point-in-Polygon 알고리즘
+   * Point-in-Polygon 알고리즘 (Ray Casting)
+   *
+   * @param point 확인할 점의 좌표
+   * @param polygon 폴리곤 좌표 배열
+   * @returns 점이 폴리곤 내부에 있으면 true
    */
 
   var isPointInPolygon = function (point, polygon) {
+    // Ray Casting 알고리즘: 점에서 오른쪽으로 무한히 뻗은 선과 폴리곤 변의 교차 횟수로 판단
     var inside = false;
 
     for (var i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
       var xi = polygon[i][0],
           yi = polygon[i][1];
       var xj = polygon[j][0],
-          yj = polygon[j][1];
+          yj = polygon[j][1]; // 점의 y 좌표가 변의 양 끝점 사이에 있고, 교차점의 x 좌표가 점의 x 좌표보다 큰지 확인
+
       var intersect = yi > point.y !== yj > point.y && point.x < (xj - xi) * (point.y - yi) / (yj - yi) + xi;
-      if (intersect) inside = !inside;
+      if (intersect) inside = !inside; // 교차할 때마다 inside 상태 토글
     }
 
     return inside;
   };
   /**
-   * 폴리곤 히트 테스트
+   * 폴리곤 히트 테스트 (도넛 폴리곤 지원)
+   *
+   * @param clickedOffset 클릭/마우스 위치 좌표
+   * @param polygonData 폴리곤 데이터
+   * @param getPolygonOffsets 폴리곤 좌표 변환 함수
+   * @returns 점이 폴리곤 내부에 있으면 true
    */
 
   var isPointInPolygonData = function (clickedOffset, polygonData, getPolygonOffsets) {
     var polygonOffsets = getPolygonOffsets(polygonData);
-    if (!polygonOffsets) return false;
+    if (!polygonOffsets) return false; // 도넛 폴리곤 처리: 외부 폴리곤 내부에 있으면서 구멍(hole) 내부에 있지 않아야 함
+
+    if (polygonData.isDonutPolygon) {
+      for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
+        var multiPolygon = polygonOffsets_1[_i];
+        if (multiPolygon.length === 0) continue; // 구멍이 없는 경우 일반 폴리곤과 동일
+
+        if (multiPolygon.length === 1) {
+          if (isPointInPolygon(clickedOffset, multiPolygon[0])) {
+            return true;
+          }
+
+          continue;
+        } // 외부 폴리곤 내부에 있는지 확인
+
+
+        var outerPolygon = multiPolygon[0];
+
+        if (!isPointInPolygon(clickedOffset, outerPolygon)) {
+          continue;
+        } // 구멍 내부에 있으면 false (도넛의 빈 공간)
+
+
+        for (var i = 1; i < multiPolygon.length; i++) {
+          var hole = multiPolygon[i];
+
+          if (isPointInPolygon(clickedOffset, hole)) {
+            return false;
+          }
+        } // 외부 폴리곤 내부에 있으면서 모든 구멍 밖에 있으면 true
 
-    for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
-      var multiPolygon = polygonOffsets_1[_i];
 
-      for (var _a = 0, multiPolygon_2 = multiPolygon; _a < multiPolygon_2.length; _a++) {
-        var polygonGroup = multiPolygon_2[_a];
+        return true;
+      }
+
+      return false;
+    } // 일반 폴리곤 처리
+
+
+    for (var _a = 0, polygonOffsets_2 = polygonOffsets; _a < polygonOffsets_2.length; _a++) {
+      var multiPolygon = polygonOffsets_2[_a];
+
+      for (var _b = 0, multiPolygon_2 = multiPolygon; _b < multiPolygon_2.length; _b++) {
+        var polygonGroup = multiPolygon_2[_b];
+        if (polygonGroup.length === 0) continue;
 
         if (isPointInPolygon(clickedOffset, polygonGroup)) {
           return true;
@@ -886,7 +930,12 @@
     return false;
   };
   /**
-   * 마커 히트 테스트
+   * 마커 히트 테스트 (꼬리 제외, 오프셋 지원)
+   *
+   * @param clickedOffset 클릭/마우스 위치 좌표
+   * @param markerData 마커 데이터
+   * @param getMarkerOffset 마커 좌표 변환 함수
+   * @returns 점이 마커 영역 내부에 있으면 true
    */
 
   var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset) {
@@ -894,38 +943,127 @@
     if (!markerOffset) return false;
     var boxWidth = markerData.boxWidth || 50;
     var boxHeight = markerData.boxHeight || 28;
-    var tailHeight = 6;
-    var x = markerOffset.x - boxWidth / 2;
-    var y = markerOffset.y - boxHeight - tailHeight;
+    var tailHeight = markerData.tailHeight || 0;
+    var offsetX = markerData.offsetX || 0;
+    var offsetY = markerData.offsetY || 0; // 오프셋을 적용한 마커 중심점 기준으로 박스 영역 계산 (꼬리는 제외)
+
+    var x = markerOffset.x + offsetX - boxWidth / 2;
+    var y = markerOffset.y + offsetY - boxHeight - tailHeight; // 클릭 위치가 박스 영역 내부에 있는지 확인
+
     return clickedOffset.x >= x && clickedOffset.x <= x + boxWidth && clickedOffset.y >= y && clickedOffset.y <= y + boxHeight;
+  }; // Hex 색상을 RGBA로 변환
+
+  var hexToRgba = function (hexColor, alpha) {
+    if (alpha === void 0) {
+      alpha = 1;
+    }
+
+    var hex = hexColor.replace('#', '');
+
+    if (hex.length !== 6) {
+      throw new Error('Invalid hex color format');
+    }
+
+    var r = parseInt(hex.substring(0, 2), 16);
+    var g = parseInt(hex.substring(2, 4), 16);
+    var b = parseInt(hex.substring(4, 6), 16);
+    return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
   };
+  var tempCanvas = document.createElement('canvas');
+  var tempCtx = tempCanvas.getContext('2d');
+  /**
+   * 텍스트 박스 너비 계산
+   *
+   * @param params 파라미터 객체
+   * @param params.text 측정할 텍스트
+   * @param params.fontConfig 폰트 설정
+   * @param params.padding 패딩 값 (px)
+   * @param params.minWidth 최소 너비 (px)
+   * @returns 계산된 텍스트 박스 너비 (px)
+   */
 
-  var KonvaMarkerContext = React.createContext(null);
-  var KonvaMarkerProvider = function (_a) {
-    var children = _a.children;
-    var controller = useMintMapController(); // Refs
+  var calculateTextBoxWidth = function (_a) {
+    var text = _a.text,
+        fontConfig = _a.fontConfig,
+        padding = _a.padding,
+        minWidth = _a.minWidth;
+    if (!tempCtx) return 0;
+    tempCtx.font = fontConfig;
+    var textWidth = tempCtx.measureText(text).width;
+    return Math.max(minWidth, textWidth + padding);
+  };
+  /**
+   * 서버 데이터를 CanvasData로 변환하는 헬퍼 함수
+   *
+   * 서버 데이터의 필드가 CanvasOption과 충돌하는 경우 (예: id, position 등),
+   * 이 함수를 사용하여 명시적으로 매핑할 수 있습니다.
+   *
+   * @template T 서버에서 받은 원본 데이터 타입
+   * @param serverData 서버에서 받은 원본 데이터
+   * @param canvasOptions CanvasOption 필드들 (충돌하는 필드는 여기서 명시적으로 지정)
+   * @returns CanvasData<T> 타입의 데이터
+   *
+   * @example
+   * ```typescript
+   * interface ServerData {
+   *   id: number;  // CanvasOption의 id와 충돌
+   *   name: string;
+   * }
+   *
+   * const serverData: ServerData = { id: 123, name: "Test" };
+   *
+   * // ✅ 올바른 사용
+   * const canvasData = createCanvasData(serverData, {
+   *   id: String(serverData.id),  // 명시적으로 변환
+   *   position: new Position(37.5, 127.0)
+   * });
+   *
+   * // canvasData는 CanvasData<ServerData> 타입이며:
+   * // - id: string (CanvasOption의 id)
+   * // - name: string (서버 데이터의 name)
+   * // - position: Position (CanvasOption의 position)
+   * ```
+   */
+
+  function createCanvasData(serverData, canvasOptions) {
+    // 서버 데이터와 CanvasOption을 결합
+    // CanvasOption의 필드가 우선되므로 충돌하는 필드는 canvasOptions의 값이 사용됨
+    return tslib.__assign(tslib.__assign({}, serverData), canvasOptions);
+  }
+
+  /**
+   * 캔버스 데이터 타입 Enum
+   */
+  exports.CanvasDataType = void 0;
+
+  (function (CanvasDataType) {
+    CanvasDataType["MARKER"] = "MARKER";
+    CanvasDataType["POLYGON"] = "POLYGON";
+  })(exports.CanvasDataType || (exports.CanvasDataType = {}));
+
+  var WoongCanvasContext = React.createContext(null);
+  /**
+   * WoongCanvasProvider 컴포넌트
+   *
+   * 다중 WoongCanvas 인스턴스를 관리하고 zIndex 기반 이벤트 우선순위를 처리합니다.
+   */
 
+  var WoongCanvasProvider = function (_a) {
+    var children = _a.children;
+    var controller = useMintMapController();
     var componentsRef = React.useRef([]);
     var currentHoveredRef = React.useRef(null);
     var currentHoveredDataRef = React.useRef(null);
-    var draggingRef = React.useRef(false);
-    /**
-     * 컴포넌트 등록 (zIndex 내림차순 정렬)
-     * 높은 zIndex가 먼저 처리됨
-     */
+    var draggingRef = React.useRef(false); // 컴포넌트 등록 (zIndex 내림차순 정렬)
 
     var registerComponent = React.useCallback(function (instance) {
       componentsRef.current.push(instance);
       componentsRef.current.sort(function (a, b) {
         return b.zIndex - a.zIndex;
       });
-    }, []);
-    /**
-     * 컴포넌트 등록 해제
-     */
+    }, []); // 컴포넌트 등록 해제
 
     var unregisterComponent = React.useCallback(function (instance) {
-      // Hover 중이던 컴포넌트면 초기화
       if (currentHoveredRef.current === instance) {
         currentHoveredRef.current = null;
         currentHoveredDataRef.current = null;
@@ -934,95 +1072,77 @@
       componentsRef.current = componentsRef.current.filter(function (c) {
         return c !== instance;
       });
-    }, []);
-    /**
-     * 전역 클릭 핸들러 (zIndex 우선순위)
-     */
+    }, []); // 전역 클릭 핸들러 (zIndex 우선순위)
 
     var handleGlobalClick = React.useCallback(function (event) {
-      var _a;
+      var _a, _b;
 
       if (!((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
-      var clickedOffset = controller.positionToOffset(event.param.position); // zIndex 순서대로 순회 (높은 것부터)
+      var clickedOffset = controller.positionToOffset(event.param.position); // zIndex 내림차순으로 정렬된 컴포넌트 순회 (높은 zIndex가 먼저 처리)
 
-      for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
-        var component = _b[_i];
+      for (var _i = 0, _c = componentsRef.current; _i < _c.length; _i++) {
+        var component = _c[_i];
+        if (component.isInteractionDisabled()) continue;
         var data = component.findData(clickedOffset);
+        if (!data) continue; // 첫 번째로 찾은 항목만 처리하고 종료 (zIndex 우선순위)
 
-        if (data) {
-          component.handleLocalClick(data);
-
-          if (component.onClick) {
-            component.onClick(data, component.getSelectedIds());
-          }
-
-          return; // 첫 번째 히트만 처리
-        }
+        component.handleLocalClick(data);
+        (_b = component.onClick) === null || _b === void 0 ? void 0 : _b.call(component, data, component.getSelectedIds());
+        return;
       }
-    }, [controller]);
-    /**
-     * 전역 마우스 이동 핸들러 (zIndex 우선순위)
-     */
+    }, [controller]); // 전역 마우스 이동 핸들러 (zIndex 우선순위)
 
     var handleGlobalMouseMove = React.useCallback(function (event) {
       var _a;
 
       if (draggingRef.current || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
-      var mouseOffset = controller.positionToOffset(event.param.position); // zIndex 순서대로 순회하여 Hover 대상 찾기
-
+      var mouseOffset = controller.positionToOffset(event.param.position);
       var newHoveredComponent = null;
-      var newHoveredData = null;
+      var newHoveredData = null; // zIndex 내림차순으로 정렬된 컴포넌트 순회 (높은 zIndex가 먼저 처리)
 
       for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
         var component = _b[_i];
+        if (component.isInteractionDisabled()) continue;
         var data = component.findData(mouseOffset);
+        if (!data) continue; // 첫 번째로 찾은 항목만 hover 처리 (zIndex 우선순위)
 
-        if (data) {
-          newHoveredComponent = component;
-          newHoveredData = data;
-          break; // 첫 번째 히트만 처리
-        }
-      } // Hover 상태 변경 감지 (최적화: 별도 ref로 직접 비교)
-
+        newHoveredComponent = component;
+        newHoveredData = data;
+        break;
+      } // hover 상태가 변경되지 않았으면 종료 (불필요한 렌더링 방지)
 
-      if (currentHoveredRef.current !== newHoveredComponent || currentHoveredDataRef.current !== newHoveredData) {
-        // 이전 hover 해제
-        if (currentHoveredRef.current) {
-          currentHoveredRef.current.setHovered(null);
 
-          if (currentHoveredRef.current.onMouseOut && currentHoveredDataRef.current) {
-            currentHoveredRef.current.onMouseOut(currentHoveredDataRef.current);
-          }
-        } // 새 hover 설정
+      if (currentHoveredRef.current === newHoveredComponent && currentHoveredDataRef.current === newHoveredData) {
+        return;
+      } // 기존 hover 항목에 mouseOut 이벤트 발생
 
 
-        if (newHoveredComponent && newHoveredData) {
-          newHoveredComponent.setHovered(newHoveredData);
+      if (currentHoveredRef.current) {
+        currentHoveredRef.current.setHovered(null);
 
-          if (newHoveredComponent.onMouseOver) {
-            newHoveredComponent.onMouseOver(newHoveredData);
-          }
+        if (currentHoveredRef.current.onMouseOut && currentHoveredDataRef.current) {
+          currentHoveredRef.current.onMouseOut(currentHoveredDataRef.current);
         }
+      } // 새 hover 항목에 mouseOver 이벤트 발생
+
+
+      if (newHoveredComponent && newHoveredData) {
+        newHoveredComponent.setHovered(newHoveredData);
 
-        currentHoveredRef.current = newHoveredComponent;
-        currentHoveredDataRef.current = newHoveredData;
+        if (newHoveredComponent.onMouseOver) {
+          newHoveredComponent.onMouseOver(newHoveredData);
+        }
       }
-    }, [controller]);
-    /**
-     * 줌/드래그 시작 (마우스 이동 이벤트 무시)
-     */
 
+      currentHoveredRef.current = newHoveredComponent;
+      currentHoveredDataRef.current = newHoveredData;
+    }, [controller]);
     var handleZoomStart = React.useCallback(function () {
       draggingRef.current = true;
     }, []);
-    /**
-     * 지도 idle (마우스 이동 이벤트 재개)
-     */
-
     var handleIdle = React.useCallback(function () {
       draggingRef.current = false;
-    }, []); // 이벤트 리스너 등록
-
+    }, []);
     React.useEffect(function () {
       controller.addEventListener('CLICK', handleGlobalClick);
       controller.addEventListener('MOUSEMOVE', handleGlobalMouseMove);
@@ -1034,77 +1154,68 @@
         controller.removeEventListener('ZOOMSTART', handleZoomStart);
         controller.removeEventListener('IDLE', handleIdle);
       };
-    }, [controller, handleGlobalClick, handleGlobalMouseMove, handleZoomStart, handleIdle]); // Context value 메모이제이션
-
+    }, [controller, handleGlobalClick, handleGlobalMouseMove, handleZoomStart, handleIdle]);
     var contextValue = React.useMemo(function () {
       return {
         registerComponent: registerComponent,
         unregisterComponent: unregisterComponent
       };
     }, [registerComponent, unregisterComponent]);
-    return React__default["default"].createElement(KonvaMarkerContext.Provider, {
+    return React__default["default"].createElement(WoongCanvasContext.Provider, {
       value: contextValue
     }, children);
   };
-  var useKonvaMarkerContext = function () {
-    var context = React.useContext(KonvaMarkerContext);
-    return context;
-  };
+  /**
+   * WoongCanvas Context Hook
+   *
+   * @returns WoongCanvasContextValue 또는 null (Provider 없으면)
+   */
 
-  // ============================================================================
-  // 성능 최적화 상수 (30,000개 마커/폴리곤 기준 최적화)
-  // ============================================================================
+  var useWoongCanvasContext = function () {
+    return React.useContext(WoongCanvasContext);
+  };
 
   /**
-   * 공간 인덱스 그리드 셀 크기 (px)
+   * 공간 인덱스 그리드 셀 크기 (픽셀 단위)
    *
-   * 최적값 계산:
-   * - 목표: 클릭 시 셀당 10~30개 항목만 체크 (빠른 Hit Test)
-   * - 화면 크기: 1920×1080 기준
-   * - 30,000개 항목 → 50px 셀 크기 = 약 800개 셀 = 셀당 ~37개
+   * @default 100
    *
-   * 성능 비교 (30,000개 기준):
-   * - 200px: 셀당 ~577개 → Hit Test O(577) ❌ 느림
-   * - 50px:  셀당 ~37개  → Hit Test O(37)  ✅ 15배 빠름!
+   * @remarks
+   * 셀 크기는 평균 마커 크기의 1.5~2배가 적절합니다.
+   * - 마커가 50px 이하: 50px 권장
+   * - 마커가 60-80px: 100px 권장 (현재 설정)
+   * - 마커가 100px 이상: 150-200px 권장
    *
-   * 트레이드오프:
-   * - 작을수록: Hit Test 빠름, 메모리 사용량 증가
-   * - 클수록: 메모리 효율적, Hit Test 느림
+   * 셀 크기가 너무 작으면:
+   * - 한 마커가 여러 셀에 등록되어 메모리 사용량 증가
+   * - 인덱스 빌드 비용 증가
+   *
+   * 셀 크기가 너무 크면:
+   * - 한 셀에 많은 마커가 들어가서 Hit Test 시 후보 항목이 많아짐
+   * - Hit Test 성능 저하
    */
-  var SPATIAL_GRID_CELL_SIZE = 50;
+  var SPATIAL_GRID_CELL_SIZE = 100;
   /**
-   * 뷰포트 컬링 여유 공간 (px)
+   * 뷰포트 컬링 여유 공간 (픽셀 단위)
    *
-   * 화면 밖 100px까지 렌더링하여 스크롤 시 부드러운 전환
-   * 30,000개 중 실제 렌더링: 화면에 보이는 1,000~3,000개만
+   * @default 100
    */
 
   var DEFAULT_CULLING_MARGIN = 100;
   /**
    * LRU 캐시 최대 항목 수
    *
-   * 좌표 변환 결과 캐싱 (positionToOffset 연산 비용 절약)
-   *
-   * 최적값 계산:
-   * - 전체 항목: 30,000개
-   * - 캐시 크기: 30,000개 → 100% 히트율 (메모리: ~2.4MB)
-   *
-   * 메모리 사용량 (항목당 ~80 bytes):
-   * - 10,000개: ~800KB  → 캐시 히트율 33% ❌
-   * - 30,000개: ~2.4MB  → 캐시 히트율 100% ✅
-   *
-   * zoom/pan 시 어차피 clear() 호출되므로 메모리 누적 없음
+   * @default 30000
    */
 
   var DEFAULT_MAX_CACHE_SIZE = 30000;
   /**
-   * LRU (Least Recently Used) Cache
-   * 메모리 제한을 위한 캐시 구현 (최적화 버전)
+   * LRU Cache (Least Recently Used)
    *
-   * 개선 사항:
-   * 1. get() 성능 향상: 접근 빈도 추적 없이 단순 조회만 수행 (delete+set 제거)
-   * 2. set() 버그 수정: 기존 키 업데이트 시 maxSize 체크 로직 개선
-   * 3. 메모리 효율: 단순 FIFO 캐시로 동작하여 오버헤드 최소화
+   * 좌표 변환 결과를 캐싱하기 위한 캐시 구현
+   *
+   * @template K 캐시 키 타입
+   * @template V 캐시 값 타입
    */
 
   var LRUCache =
@@ -1117,64 +1228,43 @@
 
       this.cache = new Map();
       this.maxSize = maxSize;
-    }
-    /**
-     * 캐시에서 값 조회
-     *
-     * 최적화: delete+set 제거
-     * - 이전: 매번 delete+set으로 LRU 갱신 (해시 재계산 비용)
-     * - 현재: 단순 조회만 수행 (O(1) 해시 조회)
-     *
-     * 트레이드오프:
-     * - 장점: 읽기 성능 대폭 향상 (10,000번 get → 이전보다 2배 빠름)
-     * - 단점: 접근 빈도가 아닌 삽입 순서 기반 eviction (FIFO)
-     *
-     * WoongKonvaMarker 사용 사례에 최적:
-     * - 좌표 변환 결과는 zoom/pan 시 어차피 전체 초기화
-     * - 접근 빈도 추적보다 빠른 조회가 더 중요
-     */
+    } // 캐시에서 값 조회
 
 
     LRUCache.prototype.get = function (key) {
       return this.cache.get(key);
-    };
-    /**
-     * 캐시에 값 저장 (버그 수정 + 최적화)
-     *
-     * 수정 사항:
-     * 1. 기존 키 업데이트 시 크기 체크 누락 버그 수정
-     * 2. 로직 명확화: 기존 항목/신규 항목 분리 처리
-     */
+    }; // 캐시에 값 저장 (FIFO eviction)
 
 
     LRUCache.prototype.set = function (key, value) {
       var exists = this.cache.has(key);
 
       if (exists) {
-        // 기존 항목 업데이트: 단순 덮어쓰기 (크기 변화 없음)
         this.cache.set(key, value);
-      } else {
-        // 신규 항목 추가: 크기 체크 필요
-        if (this.cache.size >= this.maxSize) {
-          // 가장 오래된 항목 제거 (Map의 첫 번째 항목)
-          var firstKey = this.cache.keys().next().value;
+        return;
+      }
 
-          if (firstKey !== undefined) {
-            this.cache.delete(firstKey);
-          }
-        }
+      if (this.cache.size >= this.maxSize) {
+        var firstKey = this.cache.keys().next().value;
 
-        this.cache.set(key, value);
+        if (firstKey !== undefined) {
+          this.cache.delete(firstKey);
+        }
       }
-    };
+
+      this.cache.set(key, value);
+    }; // 캐시 초기화
+
 
     LRUCache.prototype.clear = function () {
       this.cache.clear();
-    };
+    }; // 캐시 크기 반환
+
 
     LRUCache.prototype.size = function () {
       return this.cache.size;
-    };
+    }; // 키 존재 여부 확인
+
 
     LRUCache.prototype.has = function (key) {
       return this.cache.has(key);
@@ -1184,16 +1274,10 @@
   }();
   /**
    * Spatial Hash Grid (공간 해시 그리드)
-   * 공간 인덱싱을 위한 그리드 기반 자료구조 (개선 버전)
    *
-   * 개선 사항:
-   * 1. 중복 삽입 방지: 같은 항목을 여러 번 insert 해도 안전
-   * 2. 메모리 누수 방지: 기존 항목 자동 제거
-   * 3. 성능 최적화: 불필요한 배열 생성 최소화
+   * 빠른 Hit Test를 위한 그리드 기반 공간 인덱싱 자료구조
    *
-   * 사용 사례:
-   * - 빠른 Hit Test (마우스 클릭 시 어떤 마커/폴리곤인지 찾기)
-   * - 30,000개 항목 → 클릭 위치 주변 ~10개만 체크 (3,000배 빠름)
+   * @template T 인덱싱할 항목 타입
    */
 
   var SpatialHashGrid =
@@ -1201,34 +1285,30 @@
   function () {
     function SpatialHashGrid(cellSize) {
       if (cellSize === void 0) {
-        cellSize = 200;
+        cellSize = SPATIAL_GRID_CELL_SIZE;
       }
 
       this.cellSize = cellSize;
       this.grid = new Map();
       this.itemToCells = new Map();
-    }
-    /**
-     * 셀 키 생성 (x, y 좌표 → 그리드 셀 ID)
-     */
+    } // 셀 키 생성 (x, y 좌표 → 그리드 셀 ID)
 
 
     SpatialHashGrid.prototype.getCellKey = function (x, y) {
+      // 좌표를 셀 크기로 나눈 몫으로 셀 인덱스 계산
       var cellX = Math.floor(x / this.cellSize);
       var cellY = Math.floor(y / this.cellSize);
       return "".concat(cellX, ",").concat(cellY);
-    };
-    /**
-     * 바운딩 박스가 걸치는 모든 셀 키 배열 반환
-     */
+    }; // 바운딩 박스가 걸치는 모든 셀 키 배열 반환
 
 
     SpatialHashGrid.prototype.getCellsForBounds = function (minX, minY, maxX, maxY) {
-      var cells = [];
+      var cells = []; // 바운딩 박스가 걸치는 셀 범위 계산
+
       var startCellX = Math.floor(minX / this.cellSize);
       var startCellY = Math.floor(minY / this.cellSize);
       var endCellX = Math.floor(maxX / this.cellSize);
-      var endCellY = Math.floor(maxY / this.cellSize);
+      var endCellY = Math.floor(maxY / this.cellSize); // 바운딩 박스가 걸치는 모든 셀을 배열에 추가
 
       for (var x = startCellX; x <= endCellX; x++) {
         for (var y = startCellY; y <= endCellY; y++) {
@@ -1237,22 +1317,15 @@
       }
 
       return cells;
-    };
-    /**
-     * 항목 추가 (바운딩 박스 기반)
-     *
-     * 개선 사항:
-     * - 중복 삽입 방지: 기존 항목이 있으면 먼저 제거 후 재삽입
-     * - 메모리 누수 방지: 이전 셀 참조 완전 제거
-     */
+    }; // 항목 추가 (바운딩 박스 기반, 중복 삽입 방지)
 
 
     SpatialHashGrid.prototype.insert = function (item, minX, minY, maxX, maxY) {
-      // 1. 기존 항목 제거 (중복 방지)
-      this.remove(item); // 2. 새 위치에 삽입
+      // 기존 항목 제거 (중복 삽입 방지: 같은 항목을 여러 번 insert 해도 안전)
+      this.remove(item); // 바운딩 박스가 걸치는 모든 셀에 항목 등록
 
       var cells = this.getCellsForBounds(minX, minY, maxX, maxY);
-      this.itemToCells.set(item, cells);
+      this.itemToCells.set(item, cells); // 항목과 셀의 매핑 저장 (제거 시 필요)
 
       for (var _i = 0, cells_1 = cells; _i < cells_1.length; _i++) {
         var cell = cells_1[_i];
@@ -1263,17 +1336,12 @@
 
         this.grid.get(cell).push(item);
       }
-    };
-    /**
-     * 항목 제거
-     *
-     * 추가된 메서드: 메모리 누수 방지 및 업데이트 지원
-     */
+    }; // 항목 제거 (모든 셀에서 참조 제거)
 
 
     SpatialHashGrid.prototype.remove = function (item) {
       var prevCells = this.itemToCells.get(item);
-      if (!prevCells) return; // 각 셀에서 항목 제거
+      if (!prevCells) return; // 항목이 등록된 모든 셀에서 참조 제거 (메모리 누수 방지)
 
       for (var _i = 0, prevCells_1 = prevCells; _i < prevCells_1.length; _i++) {
         var cell = prevCells_1[_i];
@@ -1284,51 +1352,39 @@
 
           if (index !== -1) {
             cellItems.splice(index, 1);
-          } // 빈 셀 정리 (메모리 효율)
+          } // 빈 셀 정리 (메모리 효율: 사용하지 않는 셀 제거)
 
 
           if (cellItems.length === 0) {
             this.grid.delete(cell);
           }
         }
-      }
+      } // 항목과 셀의 매핑 제거
+
 
       this.itemToCells.delete(item);
-    };
-    /**
-     * 항목 위치 업데이트
-     *
-     * 추가된 메서드: remove + insert의 편의 함수
-     */
+    }; // 항목 위치 업데이트 (remove + insert)
 
 
     SpatialHashGrid.prototype.update = function (item, minX, minY, maxX, maxY) {
       this.insert(item, minX, minY, maxX, maxY);
-    };
-    /**
-     * 점 주변의 항목 조회 (1개 셀만)
-     *
-     * 성능: O(해당 셀의 항목 수) - 보통 ~10개
-     */
+    }; // 점 주변의 항목 조회 (Hit Test용)
 
 
     SpatialHashGrid.prototype.queryPoint = function (x, y) {
+      // 클릭 위치가 속한 셀의 모든 항목 조회 (O(1) 수준의 빠른 조회)
       var cellKey = this.getCellKey(x, y);
       var items = this.grid.get(cellKey); // 빈 배열 재사용 (메모리 할당 최소화)
 
       return items || [];
-    };
-    /**
-     * 영역 내 항목 조회
-     *
-     * 성능: O(셀 개수 × 셀당 평균 항목 수)
-     * Set으로 중복 제거 보장
-     */
+    }; // 영역 내 항목 조회 (Viewport Culling용)
 
 
     SpatialHashGrid.prototype.queryBounds = function (minX, minY, maxX, maxY) {
+      // 영역이 걸치는 모든 셀 찾기
       var cells = this.getCellsForBounds(minX, minY, maxX, maxY);
-      var results = new Set();
+      var results = new Set(); // 중복 제거를 위해 Set 사용
+      // 각 셀의 모든 항목을 결과에 추가
 
       for (var _i = 0, cells_2 = cells; _i < cells_2.length; _i++) {
         var cell = cells_2[_i];
@@ -1337,37 +1393,24 @@
         if (items) {
           for (var _a = 0, items_1 = items; _a < items_1.length; _a++) {
             var item = items_1[_a];
-            results.add(item);
+            results.add(item); // Set이므로 중복 자동 제거
           }
         }
       }
 
       return Array.from(results);
-    };
-    /**
-     * 항목 존재 여부 확인
-     *
-     * 추가된 메서드: 빠른 존재 여부 체크
-     */
+    }; // 항목 존재 여부 확인
 
 
     SpatialHashGrid.prototype.has = function (item) {
       return this.itemToCells.has(item);
-    };
-    /**
-     * 전체 초기화
-     */
+    }; // 전체 초기화
 
 
     SpatialHashGrid.prototype.clear = function () {
       this.grid.clear();
       this.itemToCells.clear();
-    };
-    /**
-     * 통계 정보
-     *
-     * 개선: totalItems는 실제 고유 항목 수를 정확히 반환
-     */
+    }; // 통계 정보 반환
 
 
     SpatialHashGrid.prototype.stats = function () {
@@ -1385,61 +1428,319 @@
     return SpatialHashGrid;
   }();
 
-  var cn$3 = classNames__default["default"].bind(styles$1);
-  function MintMapCore(_a) {
-    var _this = this;
+  /**
+   * 현재 뷰포트 영역 계산
+   *
+   * @param stage Konva Stage 인스턴스
+   * @param cullingMargin 컬링 여유 공간 (px)
+   * @param viewportRef 뷰포트 경계를 저장할 ref
+   */
+  var updateViewport = function (stage, cullingMargin, viewportRef) {
+    if (!stage) return;
+    viewportRef.current = {
+      minX: -cullingMargin,
+      maxX: stage.width() + cullingMargin,
+      minY: -cullingMargin,
+      maxY: stage.height() + cullingMargin
+    };
+  };
+  /**
+   * 아이템이 현재 뷰포트 안에 있는지 확인 (바운딩 박스 캐싱)
+   *
+   * @template T 마커/폴리곤 데이터의 추가 속성 타입
+   * @param item 확인할 아이템
+   * @param viewportRef 뷰포트 경계 ref
+   * @param boundingBoxCacheRef 바운딩 박스 캐시 ref
+   * @param computeBoundingBox 바운딩 박스 계산 함수
+   * @returns 뷰포트 안에 있으면 true
+   */
 
-    var onLoad = _a.onLoad,
-        _b = _a.visible,
-        visible = _b === void 0 ? true : _b,
-        zoomLevel = _a.zoomLevel,
-        center = _a.center,
-        _c = _a.centerMoveWithPanning,
-        centerMoveWithPanning = _c === void 0 ? false : _c,
-        children = _a.children; //controller
+  var isInViewport = function (item, viewportRef, boundingBoxCacheRef, computeBoundingBox) {
+    if (!viewportRef.current) return true;
+    var viewport = viewportRef.current; // 캐시된 바운딩 박스 확인
 
-    var controller = useMintMapController(); //맵 초기화
+    var bbox = boundingBoxCacheRef.current.get(item.id);
 
-    var elementRef = React.useRef(null);
+    if (!bbox) {
+      // 바운딩 박스 계산 (공통 함수 사용)
+      var computed = computeBoundingBox(item);
+      if (!computed) return false;
+      bbox = computed;
+      boundingBoxCacheRef.current.set(item.id, bbox);
+    } // 바운딩 박스와 viewport 교차 체크
 
-    var _d = React.useState(false),
-        mapInitialized = _d[0],
-        setMapInitialized = _d[1];
 
-    var currMapInitialized = React.useRef(false);
-    React.useEffect(function () {
-      (function () {
-        return tslib.__awaiter(_this, void 0, void 0, function () {
-          var map_1;
-          return tslib.__generator(this, function (_a) {
-            switch (_a.label) {
-              case 0:
-                if (!(elementRef && elementRef.current)) return [3
-                /*break*/
-                , 2];
-                return [4
-                /*yield*/
-                , controller.initializingMap(elementRef.current)];
+    return !(bbox.maxX < viewport.minX || bbox.minX > viewport.maxX || bbox.maxY < viewport.minY || bbox.minY > viewport.maxY);
+  };
 
-              case 1:
-                map_1 = _a.sent();
+  /**
+   * 지도 이벤트 핸들러 생성 함수
+   *
+   * @template T 마커/폴리곤 데이터의 추가 속성 타입
+   * @param deps 이벤트 핸들러 생성에 필요한 의존성
+   * @returns 지도 이벤트 핸들러 객체
+   */
 
-                if (!currMapInitialized.current) {
-                  currMapInitialized.current = true; //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
+  var createMapEventHandlers = function (deps) {
+    var controller = deps.controller,
+        containerRef = deps.containerRef,
+        markerRef = deps.markerRef,
+        options = deps.options,
+        prevCenterOffsetRef = deps.prevCenterOffsetRef,
+        accumTranslateRef = deps.accumTranslateRef,
+        offsetCacheRef = deps.offsetCacheRef,
+        boundingBoxCacheRef = deps.boundingBoxCacheRef,
+        renderAllImmediate = deps.renderAllImmediate; // 지도 이동/줌 완료 시 처리 (캐시 초기화 및 렌더링)
 
-                  setTimeout(function () {
-                    // console.log('setMapInitialized true');
-                    setMapInitialized(true);
-                    onLoad && onLoad(map_1, controller);
-                  }, 100);
-                }
+    var handleIdle = function () {
+      prevCenterOffsetRef.current = null;
+      accumTranslateRef.current = {
+        x: 0,
+        y: 0
+      }; // 캐시 정리 (지도 이동/줌으로 좌표 변환 결과가 바뀜)
 
-                _a.label = 2;
+      offsetCacheRef.current.clear();
+      boundingBoxCacheRef.current.clear(); // 마커 위치 업데이트
 
-              case 2:
-                return [2
-                /*return*/
-                ];
+      var bounds = controller.getCurrBounds();
+
+      var markerOptions = tslib.__assign({
+        position: bounds.nw
+      }, options);
+
+      markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // transform 제거 전에 새 데이터로 즉시 렌더링 (transform 제거 시 잠깐 빈 화면이 보이는 것 방지)
+
+      if (containerRef.current) {
+        containerRef.current.style.transform = '';
+        containerRef.current.style.visibility = '';
+      } // 새 위치에서 렌더링 (캐시는 이미 초기화됨)
+
+
+      renderAllImmediate();
+    }; // 줌 시작 시 처리 (일시적으로 숨김)
+
+
+    var handleZoomStart = function () {
+      if (!containerRef.current) return;
+      containerRef.current.style.visibility = 'hidden';
+    }; // 줌 종료 시 처리 (다시 표시)
+
+
+    var handleZoomEnd = function () {
+      if (!containerRef.current) return;
+      containerRef.current.style.visibility = '';
+    }; // 지도 중심 변경 시 처리 (transform으로 이동 추적, 캐시 유지)
+
+
+    var handleCenterChanged = function () {
+      var center = controller.getCurrBounds().getCenter();
+      var curr = controller.positionToOffset(center);
+      var prev = prevCenterOffsetRef.current; // 첫 번째 호출 시 이전 위치 저장만 하고 종료
+
+      if (!prev) {
+        prevCenterOffsetRef.current = {
+          x: curr.x,
+          y: curr.y
+        };
+        return;
+      } // 이전 위치와 현재 위치의 차이 계산 (이동 거리)
+
+
+      var dx = prev.x - curr.x;
+      var dy = prev.y - curr.y; // 누적 이동 거리 저장 (transform으로 화면만 이동, 캐시는 유지하여 성능 최적화)
+
+      accumTranslateRef.current = {
+        x: accumTranslateRef.current.x + dx,
+        y: accumTranslateRef.current.y + dy
+      };
+      prevCenterOffsetRef.current = {
+        x: curr.x,
+        y: curr.y
+      }; // CSS transform으로 컨테이너 이동 (캐시된 좌표는 그대로 유지)
+
+      if (containerRef.current) {
+        containerRef.current.style.transform = "translate(".concat(accumTranslateRef.current.x, "px, ").concat(accumTranslateRef.current.y, "px)");
+      }
+    };
+
+    var handleDragStart = function () {// 커서는 각 컴포넌트에서 처리
+    };
+
+    var handleDragEnd = function () {// 커서는 각 컴포넌트에서 처리
+    };
+
+    return {
+      handleIdle: handleIdle,
+      handleZoomStart: handleZoomStart,
+      handleZoomEnd: handleZoomEnd,
+      handleCenterChanged: handleCenterChanged,
+      handleDragStart: handleDragStart,
+      handleDragEnd: handleDragEnd
+    };
+  };
+  /**
+   * 공간 인덱스 빌드 (빠른 Hit Test를 위한 자료구조)
+   *
+   * @template T 마커/폴리곤 데이터의 추가 속성 타입
+   * @param data 공간 인덱스에 삽입할 데이터 배열
+   * @param spatialIndex Spatial Hash Grid 인스턴스
+   * @param computeBoundingBox 바운딩 박스 계산 함수
+   */
+
+  var buildSpatialIndex = function (data, spatialIndex, computeBoundingBox) {
+    spatialIndex.clear();
+
+    for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
+      var item = data_1[_i];
+      var bbox = computeBoundingBox(item);
+
+      if (bbox) {
+        spatialIndex.insert(item, bbox.minX, bbox.minY, bbox.maxX, bbox.maxY);
+      }
+    }
+  };
+  /**
+   * 선택 상태 동기화 (화면 밖 데이터도 선택 상태 유지)
+   *
+   * @template T 마커/폴리곤 데이터의 추가 속성 타입
+   * @param data 최신 데이터 배열
+   * @param selectedIds 선택된 항목 ID Set
+   * @param selectedItemsMap 현재 선택된 항목 Map
+   * @returns 업데이트된 선택된 항목 Map
+   */
+
+  var syncSelectedItems = function (data, selectedIds, selectedItemsMap) {
+    var dataMap = new Map(data.map(function (m) {
+      return [m.id, m];
+    }));
+    var newSelectedItemsMap = new Map();
+    selectedIds.forEach(function (id) {
+      // 현재 data에 있으면 최신 데이터 사용
+      var currentItem = dataMap.get(id);
+
+      if (currentItem) {
+        newSelectedItemsMap.set(id, currentItem);
+      } else {
+        // 화면 밖이면 기존 데이터 유지
+        var prevItem = selectedItemsMap.get(id);
+
+        if (prevItem) {
+          newSelectedItemsMap.set(id, prevItem);
+        }
+      }
+    });
+    return newSelectedItemsMap;
+  };
+  /**
+   * 외부 selectedItems를 내부 상태로 동기화
+   *
+   * @template T 마커/폴리곤 데이터의 추가 속성 타입
+   * @param externalSelectedItems 외부에서 전달된 선택된 항목 배열
+   * @param selectedIdsRef 선택된 ID Set ref
+   * @param selectedItemsMapRef 선택된 항목 Map ref
+   */
+
+  var syncExternalSelectedItems = function (externalSelectedItems, selectedIdsRef, selectedItemsMapRef) {
+    if (externalSelectedItems === undefined) return;
+    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;
+  };
+
+  /**
+   * 이벤트 유효성 검증 및 좌표 변환
+   *
+   * @param event 이벤트 파라미터
+   * @param context WoongCanvasContext 인스턴스
+   * @param controller MintMapController 인스턴스
+   * @returns 유효한 화면 좌표 또는 null
+   */
+  var validateEvent = function (event, context, controller) {
+    var _a;
+
+    if (context) return null;
+    if (!((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return null;
+
+    try {
+      return controller.positionToOffset(event.param.position);
+    } catch (error) {
+      console.error('[WoongCanvas] validateEvent error:', error);
+      return null;
+    }
+  };
+  /**
+   * Map의 values를 배열로 변환
+   *
+   * @template T Map 값의 타입
+   * @param map 변환할 Map
+   * @returns Map의 값 배열
+   */
+
+  var mapValuesToArray = function (map) {
+    if (map.size === 0) return [];
+    return Array.from(map.values());
+  };
+
+  var cn$3 = classNames__default["default"].bind(styles$1);
+  function MintMapCore(_a) {
+    var _this = this;
+
+    var onLoad = _a.onLoad,
+        _b = _a.visible,
+        visible = _b === void 0 ? true : _b,
+        zoomLevel = _a.zoomLevel,
+        center = _a.center,
+        _c = _a.centerMoveWithPanning,
+        centerMoveWithPanning = _c === void 0 ? false : _c,
+        children = _a.children; //controller
+
+    var controller = useMintMapController(); //맵 초기화
+
+    var elementRef = React.useRef(null);
+
+    var _d = React.useState(false),
+        mapInitialized = _d[0],
+        setMapInitialized = _d[1];
+
+    var currMapInitialized = React.useRef(false);
+    React.useEffect(function () {
+      (function () {
+        return tslib.__awaiter(_this, void 0, void 0, function () {
+          var map_1;
+          return tslib.__generator(this, function (_a) {
+            switch (_a.label) {
+              case 0:
+                if (!(elementRef && elementRef.current)) return [3
+                /*break*/
+                , 2];
+                return [4
+                /*yield*/
+                , controller.initializingMap(elementRef.current)];
+
+              case 1:
+                map_1 = _a.sent();
+
+                if (!currMapInitialized.current) {
+                  currMapInitialized.current = true; //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
+
+                  setTimeout(function () {
+                    // console.log('setMapInitialized true');
+                    setMapInitialized(true);
+                    onLoad && onLoad(map_1, controller);
+                  }, 100);
+                }
+
+                _a.label = 2;
+
+              case 2:
+                return [2
+                /*return*/
+                ];
             }
           });
         });
@@ -1467,7 +1768,7 @@
     }, [center]);
     return React__default["default"].createElement("div", {
       className: cn$3('mint-map-root')
-    }, mapInitialized && React__default["default"].createElement(KonvaMarkerProvider, null, children), React__default["default"].createElement("div", {
+    }, mapInitialized && React__default["default"].createElement(WoongCanvasProvider, null, children), React__default["default"].createElement("div", {
       className: cn$3('mint-map-container'),
       style: {
         visibility: visible ? 'inherit' : 'hidden'
@@ -5325,602 +5626,1138 @@
     }))));
   }
 
-  // 메인 컴포넌트
-  // ============================================================================
-
-  /**
-   * Konva 기반 고성능 마커/폴리곤 렌더링 컴포넌트
-   *
-   * 특징:
-   * - Base/Event 레이어 분리로 성능 최적화
-   * - LRU 캐시로 좌표 변환 결과 캐싱
-   * - Spatial Hash Grid로 빠른 Hit Test
-   * - Viewport Culling으로 보이는 영역만 렌더링
-   *
-   * @template T 마커 데이터의 추가 속성 타입
-   */
-
-  var WoongKonvaMarkerComponent = function (_a) {
-    var markers = _a.markers,
-        dataType = _a.dataType,
-        onClick = _a.onClick,
-        onMouseOver = _a.onMouseOver,
-        onMouseOut = _a.onMouseOut,
-        renderBase = _a.renderBase,
-        renderAnimation = _a.renderAnimation,
-        renderEvent = _a.renderEvent,
-        _b = _a.enableMultiSelect,
-        enableMultiSelect = _b === void 0 ? false : _b,
-        _c = _a.topOnHover,
-        topOnHover = _c === void 0 ? false : _c,
-        _d = _a.enableViewportCulling,
-        enableViewportCulling = _d === void 0 ? true : _d,
-        _e = _a.cullingMargin,
-        cullingMargin = _e === void 0 ? DEFAULT_CULLING_MARGIN : _e,
-        _f = _a.maxCacheSize,
-        maxCacheSize = _f === void 0 ? DEFAULT_MAX_CACHE_SIZE : _f,
-        externalSelectedItems = _a.selectedItems,
-        options = tslib.__rest(_a, ["markers", "dataType", "onClick", "onMouseOver", "onMouseOut", "renderBase", "renderAnimation", "renderEvent", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems"]); // --------------------------------------------------------------------------
-    // Hooks & Context
-    // --------------------------------------------------------------------------
-
+  var WoongCanvasMarker = function (props) {
+    var data = props.data,
+        onClick = props.onClick,
+        onMouseOver = props.onMouseOver,
+        onMouseOut = props.onMouseOut,
+        _a = props.enableMultiSelect,
+        enableMultiSelect = _a === void 0 ? false : _a,
+        _b = props.topOnHover,
+        topOnHover = _b === void 0 ? false : _b,
+        _c = props.enableViewportCulling,
+        enableViewportCulling = _c === void 0 ? false : _c,
+        _d = props.cullingMargin,
+        cullingMargin = _d === void 0 ? DEFAULT_CULLING_MARGIN : _d,
+        _e = props.maxCacheSize,
+        maxCacheSize = _e === void 0 ? DEFAULT_MAX_CACHE_SIZE : _e,
+        externalSelectedItems = props.selectedItems,
+        externalSelectedItem = props.selectedItem,
+        _f = props.disableInteraction,
+        disableInteraction = _f === void 0 ? false : _f,
+        renderBase = props.renderBase,
+        renderEvent = props.renderEvent,
+        options = tslib.__rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "renderBase", "renderEvent"]);
 
     var controller = useMintMapController();
-    var context = useKonvaMarkerContext();
-    var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // --------------------------------------------------------------------------
-    // DOM Refs
-    // --------------------------------------------------------------------------
+    var context = useWoongCanvasContext();
+    var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // DOM Refs
 
     var divRef = React.useRef(document.createElement('div'));
     var divElement = divRef.current;
     var containerRef = React.useRef(null);
-    var markerRef = React.useRef(); // --------------------------------------------------------------------------
-    // Konva Refs
-    // --------------------------------------------------------------------------
+    var 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 상태 관리
-    // --------------------------------------------------------------------------
-
-    /** markers prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
-
-    var markersRef = React.useRef(markers); // --------------------------------------------------------------------------
-    // State Refs - 선택 및 Hover 상태 관리
-    // --------------------------------------------------------------------------
-
-    /** 현재 Hover 중인 항목 */
+    var eventLayerRef = React.useRef(null); // 상태 관리 Refs (React 리렌더링 최소화)
 
+    var dataRef = React.useRef(data);
+    var disableInteractionRef = React.useRef(disableInteraction);
+    var enableViewportCullingRef = React.useRef(enableViewportCulling);
     var hoveredItemRef = React.useRef(null);
-    /** 마지막으로 클릭된 항목 */
-
-    var lastClickedItemRef = React.useRef(null);
-    /**
-     * 선택된 항목의 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 selectedItemRef = React.useRef(externalSelectedItem);
     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 LRUCache(maxCacheSize));
-    /** 공간 인덱스 (빠른 Hit Test) */
-
     var spatialIndexRef = React.useRef(new SpatialHashGrid(SPATIAL_GRID_CELL_SIZE));
-    /** 바운딩 박스 캐시 (Viewport Culling 최적화) */
-
     var boundingBoxCacheRef = React.useRef(new Map());
-    /** 뷰포트 경계 캐시 (Viewport Culling) */
+    var viewportRef = React.useRef(null); // 뷰포트 영역 계산 (Viewport Culling용)
 
-    var viewportRef = React.useRef(null); // --------------------------------------------------------------------------
-    // 유틸리티 함수: 뷰포트 관리
-    // --------------------------------------------------------------------------
+    var updateViewport$1 = function () {
+      updateViewport(stageRef.current, cullingMargin, viewportRef);
+    }; // 뷰포트 내부 여부 확인 (바운딩 박스 캐싱)
 
-    /**
-     * 현재 뷰포트 영역 계산
-     */
 
-    var updateViewport = function () {
-      if (!stageRef.current) return;
-      var stage = stageRef.current;
-      viewportRef.current = {
-        minX: -cullingMargin,
-        maxX: stage.width() + cullingMargin,
-        minY: -cullingMargin,
-        maxY: stage.height() + cullingMargin
-      };
-    };
-    /**
-     * 아이템이 현재 뷰포트 안에 있는지 확인 (바운딩 박스 캐싱)
-     */
+    var isInViewport$1 = function (item) {
+      return isInViewport(item, viewportRef, boundingBoxCacheRef, computeBoundingBox);
+    }; // 마커 좌표 변환 (위경도 → 화면 좌표, LRU 캐시 사용)
 
 
-    var isInViewport = function (item) {
-      if (!enableViewportCulling || !viewportRef.current) return true;
-      var viewport = viewportRef.current; // 캐시된 바운딩 박스 확인
+    var getOrComputeMarkerOffset = function (markerData) {
+      var cached = offsetCacheRef.current.get(markerData.id);
+      if (cached && !Array.isArray(cached)) return cached;
+      var result = computeMarkerOffset(markerData, controller);
+      if (!result) return null;
+      offsetCacheRef.current.set(markerData.id, result);
+      return result;
+    }; // 마커 바운딩 박스 계산 (Viewport Culling 및 Hit Test용, 오프셋 지원)
 
-      var bbox = boundingBoxCacheRef.current.get(item.id);
 
-      if (!bbox) {
-        // 폴리곤인 경우
-        if (dataType === exports.CanvasDataType.POLYGON) {
-          var offsets = getOrComputePolygonOffsets(item);
-          if (!offsets) return false; // 바운딩 박스 계산 (최적화: 직접 비교)
+    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;
+      var offsetX = item.offsetX || 0;
+      var offsetY = item.offsetY || 0; // 오프셋을 적용한 마커 중심점 기준으로 바운딩 박스 계산
 
-          var minX = Infinity,
-              minY = Infinity,
-              maxX = -Infinity,
-              maxY = -Infinity;
+      return {
+        minX: offset.x + offsetX - boxWidth / 2,
+        minY: offset.y + offsetY - boxHeight - tailHeight,
+        maxX: offset.x + offsetX + boxWidth / 2,
+        maxY: offset.y + offsetY
+      };
+    }; // 공간 인덱스 빌드 (빠른 Hit Test용)
 
-          for (var _i = 0, offsets_1 = offsets; _i < offsets_1.length; _i++) {
-            var multiPolygon = offsets_1[_i];
 
-            for (var _a = 0, multiPolygon_1 = multiPolygon; _a < multiPolygon_1.length; _a++) {
-              var polygonGroup = multiPolygon_1[_a];
+    var buildSpatialIndex$1 = function () {
+      buildSpatialIndex(dataRef.current, spatialIndexRef.current, computeBoundingBox);
+    }; // 렌더링 유틸리티 객체
 
-              for (var _b = 0, polygonGroup_1 = polygonGroup; _b < polygonGroup_1.length; _b++) {
-                var _c = polygonGroup_1[_b],
-                    x = _c[0],
-                    y = _c[1];
-                if (x < minX) minX = x;
-                if (y < minY) minY = y;
-                if (x > maxX) maxX = x;
-                if (y > maxY) maxY = y;
-              }
-            }
-          }
 
-          bbox = {
-            minX: minX,
-            minY: minY,
-            maxX: maxX,
-            maxY: maxY
-          };
-          boundingBoxCacheRef.current.set(item.id, bbox);
-        } // 마커인 경우
-        else {
-          var offset = getOrComputeMarkerOffset(item);
-          if (!offset) return false;
-          var boxWidth = item.boxWidth || 50;
-          var boxHeight = item.boxHeight || 28;
-          bbox = {
-            minX: offset.x - boxWidth / 2,
-            minY: offset.y - boxHeight - 6,
-            maxX: offset.x + boxWidth / 2,
-            maxY: offset.y
-          };
-          boundingBoxCacheRef.current.set(item.id, bbox);
-        }
-      } // 바운딩 박스와 viewport 교차 체크
+    var renderUtils = {
+      getOrComputePolygonOffsets: function () {
+        return null;
+      },
+      getOrComputeMarkerOffset: getOrComputeMarkerOffset
+    }; // Base Layer 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
 
+    var doRenderBase = function () {
+      var layer = baseLayerRef.current;
+      if (!layer) return;
+      var shape = layer.findOne('.base-render-shape');
 
-      return !(bbox.maxX < viewport.minX || bbox.minX > viewport.maxX || bbox.maxY < viewport.minY || bbox.minY > viewport.maxY);
-    }; // --------------------------------------------------------------------------
-    // 유틸리티 함수: 좌표 변환 캐싱
-    // --------------------------------------------------------------------------
+      if (!shape) {
+        shape = new Konva__default["default"].Shape({
+          name: 'base-render-shape',
+          sceneFunc: function (context, shape) {
+            var ctx = context;
+            var hovered = hoveredItemRef.current; // 뷰포트 컬링: 화면에 보이는 항목만 필터링
 
-    /**
-     * 폴리곤 좌표 변환 결과를 캐시하고 반환
-     * @param polygonData 폴리곤 데이터
-     * @returns 변환된 좌표 배열 또는 null
-     */
+            var visibleItems = enableViewportCullingRef.current ? dataRef.current.filter(function (item) {
+              return isInViewport$1(item);
+            }) : dataRef.current; // topOnHover 옵션: hover된 항목을 나중에 그려서 최상위에 표시
 
+            if (topOnHover && !renderEvent && hovered) {
+              visibleItems = visibleItems.filter(function (item) {
+                return item.id !== hovered.id;
+              });
+            } // 일반 항목들 먼저 렌더링
 
-    var getOrComputePolygonOffsets = function (polygonData) {
-      var cached = offsetCacheRef.current.get(polygonData.id);
-      if (cached && Array.isArray(cached)) return cached;
-      var result = computePolygonOffsets(polygonData, controller);
 
-      if (result) {
-        offsetCacheRef.current.set(polygonData.id, result);
+            renderBase({
+              ctx: ctx,
+              items: visibleItems,
+              selectedIds: selectedIdsRef.current,
+              hoveredItem: hovered,
+              utils: renderUtils
+            }); // hover된 항목을 마지막에 렌더링하여 최상위에 표시
+
+            if (topOnHover && !renderEvent && hovered) {
+              if (!enableViewportCullingRef.current || isInViewport$1(hovered)) {
+                renderBase({
+                  ctx: ctx,
+                  items: [hovered],
+                  selectedIds: selectedIdsRef.current,
+                  hoveredItem: hovered,
+                  utils: renderUtils
+                });
+              }
+            }
+          },
+          perfectDrawEnabled: false,
+          listening: false,
+          hitStrokeWidth: 0
+        });
+        layer.add(shape);
       }
 
-      return result;
-    };
-    /**
-     * 마커 좌표 변환 결과를 캐시하고 반환
-     * @param markerData 마커 데이터
-     * @returns 변환된 좌표 또는 null
-     */
-
+      layer.batchDraw();
+    }; // Event Layer 렌더링 (hover 효과 및 선택 상태 표시)
 
-    var getOrComputeMarkerOffset = function (markerData) {
-      var cached = offsetCacheRef.current.get(markerData.id);
-      if (cached && !Array.isArray(cached)) return cached;
-      var result = computeMarkerOffset(markerData, controller);
 
-      if (result) {
-        offsetCacheRef.current.set(markerData.id, result);
-      }
+    var doRenderEvent = function () {
+      var layer = eventLayerRef.current;
+      if (!layer || !renderEvent) return;
+      var shape = layer.findOne('.event-render-shape');
 
-      return result;
-    }; // --------------------------------------------------------------------------
-    // 유틸리티 함수: 공간 인덱싱
-    // --------------------------------------------------------------------------
+      if (!shape) {
+        shape = new Konva__default["default"].Shape({
+          name: 'event-render-shape',
+          sceneFunc: function (context, shape) {
+            var ctx = context;
+            var selectedItems = mapValuesToArray(selectedItemsMapRef.current);
+            var hovered = hoveredItemRef.current;
+
+            if (topOnHover && hovered) {
+              renderEvent({
+                ctx: ctx,
+                hoveredItem: null,
+                utils: renderUtils,
+                selectedItems: selectedItems.filter(function (item) {
+                  return item.id !== hovered.id;
+                }),
+                selectedItem: selectedItemRef.current
+              });
 
-    /**
-     * 공간 인덱스 빌드 (빠른 Hit Test를 위한 자료구조)
-     */
+              if (!enableViewportCullingRef.current || isInViewport$1(hovered)) {
+                var hoveredIsSelected = selectedItems.some(function (item) {
+                  return item.id === hovered.id;
+                });
+                var hoverSelectedItems = hoveredIsSelected ? [hovered] : [];
+                renderEvent({
+                  ctx: ctx,
+                  hoveredItem: hovered,
+                  utils: renderUtils,
+                  selectedItems: hoverSelectedItems,
+                  selectedItem: selectedItemRef.current
+                });
+              }
+            } else {
+              renderEvent({
+                ctx: ctx,
+                hoveredItem: hovered,
+                utils: renderUtils,
+                selectedItems: selectedItems,
+                selectedItem: selectedItemRef.current
+              });
+            }
+          },
+          perfectDrawEnabled: false,
+          listening: false,
+          hitStrokeWidth: 0
+        });
+        layer.add(shape);
+      }
 
+      layer.batchDraw();
+    }; // 전체 즉시 렌더링
 
-    var buildSpatialIndex = function () {
-      var spatial = spatialIndexRef.current;
-      spatial.clear();
-      var currentMarkers = markersRef.current;
 
-      for (var _i = 0, currentMarkers_1 = currentMarkers; _i < currentMarkers_1.length; _i++) {
-        var item = currentMarkers_1[_i];
+    var renderAllImmediate = function () {
+      if (enableViewportCullingRef.current) {
+        updateViewport$1();
+      }
 
-        if (dataType === exports.CanvasDataType.POLYGON) {
-          // 폴리곤: 바운딩 박스 계산 (최적화: 직접 비교)
-          var offsets = getOrComputePolygonOffsets(item);
+      buildSpatialIndex$1();
+      doRenderBase();
+      doRenderEvent();
+    }; // 지도 이벤트 핸들러 생성
+
+
+    var _g = createMapEventHandlers({
+      controller: controller,
+      containerRef: containerRef,
+      markerRef: markerRef,
+      options: options,
+      prevCenterOffsetRef: prevCenterOffsetRef,
+      accumTranslateRef: accumTranslateRef,
+      offsetCacheRef: offsetCacheRef,
+      boundingBoxCacheRef: boundingBoxCacheRef,
+      renderAllImmediate: renderAllImmediate
+    }),
+        handleIdle = _g.handleIdle,
+        handleZoomStart = _g.handleZoomStart,
+        handleZoomEnd = _g.handleZoomEnd,
+        handleCenterChanged = _g.handleCenterChanged,
+        handleDragStartShared = _g.handleDragStart,
+        handleDragEndShared = _g.handleDragEnd;
 
-          if (offsets) {
-            var minX = Infinity,
-                minY = Infinity,
-                maxX = -Infinity,
-                maxY = -Infinity;
+    var handleDragStart = function () {
+      handleDragStartShared();
+      draggingRef.current = true;
+      controller.setMapCursor('grabbing');
+    };
 
-            for (var _a = 0, offsets_2 = offsets; _a < offsets_2.length; _a++) {
-              var multiPolygon = offsets_2[_a];
+    var handleDragEnd = function () {
+      handleDragEndShared();
+      draggingRef.current = false;
+      controller.setMapCursor('grab');
+    }; // Hit Test: 특정 좌표의 마커 찾기
 
-              for (var _b = 0, multiPolygon_2 = multiPolygon; _b < multiPolygon_2.length; _b++) {
-                var polygonGroup = multiPolygon_2[_b];
 
-                for (var _c = 0, polygonGroup_2 = polygonGroup; _c < polygonGroup_2.length; _c++) {
-                  var _d = polygonGroup_2[_c],
-                      x = _d[0],
-                      y = _d[1];
-                  if (x < minX) minX = x;
-                  if (y < minY) minY = y;
-                  if (x > maxX) maxX = x;
-                  if (y > maxY) maxY = y;
-                }
-              }
-            }
+    var findData = function (offset) {
+      // topOnHover 옵션이 켜져 있으면 hover된 항목을 최우선으로 확인
+      if (topOnHover && hoveredItemRef.current) {
+        var hovered = hoveredItemRef.current;
 
-            spatial.insert(item, minX, minY, maxX, maxY);
-          }
+        if (isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {
+          return hovered;
+        }
+      } // 공간 인덱스에서 후보 항목 조회 (O(1) 수준의 빠른 조회)
+
+
+      var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 역순 순회: 나중에 추가된 항목(최상위)이 먼저 선택되도록
+
+      for (var i = candidates.length - 1; i >= 0; i--) {
+        var item = candidates[i];
+
+        if (isPointInMarkerData(offset, item, getOrComputeMarkerOffset)) {
+          return item;
+        }
+      }
+
+      return null;
+    }; // Hover 상태 설정 및 렌더링
+
+
+    var setHovered = function (data) {
+      hoveredItemRef.current = data;
+
+      if (draggingRef.current) {
+        controller.setMapCursor('grabbing');
+      } else {
+        controller.setMapCursor(data ? 'pointer' : 'grab');
+      }
+
+      if (renderEvent) {
+        doRenderEvent();
+      } else if (topOnHover) {
+        doRenderBase();
+      }
+    }; // 클릭 처리: 선택 상태 업데이트
+
+
+    var handleLocalClick = function (data) {
+      if (enableMultiSelect) {
+        var newSelected = new Set(selectedIdsRef.current);
+
+        if (newSelected.has(data.id)) {
+          newSelected.delete(data.id);
+          selectedItemsMapRef.current.delete(data.id);
         } else {
-          // 마커: 점 기반 바운딩 박스
-          var offset = getOrComputeMarkerOffset(item);
-
-          if (offset) {
-            var boxWidth = item.boxWidth || 50;
-            var boxHeight = item.boxHeight || 28;
-            var tailHeight = 6;
-            var minX = offset.x - boxWidth / 2;
-            var minY = offset.y - boxHeight - tailHeight;
-            var maxX = offset.x + boxWidth / 2;
-            var maxY = offset.y;
-            spatial.insert(item, minX, minY, maxX, maxY);
-          }
+          newSelected.add(data.id);
+          selectedItemsMapRef.current.set(data.id, data);
+        }
+
+        selectedIdsRef.current = newSelected;
+      } else {
+        var newSelected = new Set();
+
+        if (!selectedIdsRef.current.has(data.id)) {
+          newSelected.add(data.id);
+          selectedItemsMapRef.current.clear();
+          selectedItemsMapRef.current.set(data.id, data);
+        } else {
+          selectedItemsMapRef.current.clear();
         }
+
+        selectedIdsRef.current = newSelected;
       }
-    }; // --------------------------------------------------------------------------
-    // 렌더링 함수
-    // --------------------------------------------------------------------------
 
-    /**
-     * 외부 렌더링 함수에 전달할 유틸리티 객체
-     */
+      doRenderBase();
+      doRenderEvent();
+    }; // 클릭 이벤트 핸들러
 
 
-    var renderUtils = {
-      getOrComputePolygonOffsets: getOrComputePolygonOffsets,
-      getOrComputeMarkerOffset: getOrComputeMarkerOffset
-    };
-    /** Base Layer에서 사용할 빈 Set (재사용) */
+    var handleClick = function (event) {
+      if (disableInteractionRef.current) return;
+      var clickedOffset = validateEvent(event, context, 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 감지)
 
-    React.useRef(new Set());
-    /**
-     * Base 레이어 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
-     *
-     * 🔥 최적화:
-     * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
-     * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
-     * 3. 클로저로 최신 데이터 참조
-     */
 
-    var doRenderBase = function () {
-      var layer = baseLayerRef.current;
-      if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
+    var handleMouseMove = function (event) {
+      if (disableInteractionRef.current) return;
+      var mouseOffset = validateEvent(event, context, 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 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; // 클로저로 최신 ref 값 참조
+    var handleMouseLeave = function () {
+      if (disableInteractionRef.current) return;
+      var prevHovered = hoveredItemRef.current;
+      if (!prevHovered) return;
+      hoveredItemRef.current = null;
+      controller.setMapCursor('grab');
+      doRenderEvent();
+      onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(prevHovered);
+    }; // DOM 초기화
 
-            var visibleMarkers = enableViewportCulling ? markersRef.current.filter(function (item) {
-              return isInViewport(item);
-            }) : markersRef.current;
-            renderBase({
-              ctx: ctx,
-              items: visibleMarkers,
-              selectedIds: selectedIdsRef.current,
-              utils: renderUtils
-            });
-          },
-          perfectDrawEnabled: false,
-          listening: false,
-          hitStrokeWidth: 0
-        });
-        layer.add(shape);
-      } // sceneFunc는 이미 설정되어 있으므로 다시 그리기만
 
+    React.useEffect(function () {
+      divElement.style.width = 'fit-content';
+      return function () {
+        if (!markerRef.current) return;
+        controller.clearDrawable(markerRef.current);
+        markerRef.current = undefined;
+      };
+    }, []); // 마커 생성/업데이트
 
-      layer.batchDraw();
-    };
-    /**
-     * Animation 레이어 렌더링 (선택된 마커 애니메이션)
-     *
-     * 🔥 최적화: sceneFunc 내부에서 최신 items 참조
-     * - 선택 변경 시에만 재생성
-     * - 지도 이동 시에는 기존 Animation 계속 실행
-     */
+    React.useEffect(function () {
+      if (!options) return;
+      var bounds = controller.getCurrBounds();
 
+      var markerOptions = tslib.__assign({
+        position: bounds.nw
+      }, options);
 
-    var doRenderAnimation = function () {
-      if (!renderAnimation) return;
-      var layer = animationLayerRef.current;
-      if (!layer) return;
-      renderAnimation({
-        layer: layer,
-        selectedIds: selectedIdsRef.current,
-        items: markersRef.current,
-        utils: renderUtils
+      if (markerRef.current) {
+        controller.updateMarker(markerRef.current, markerOptions);
+        return;
+      }
+
+      markerRef.current = new Marker(markerOptions);
+      markerRef.current.element = divElement;
+      controller.createMarker(markerRef.current);
+
+      if (divElement.parentElement) {
+        divElement.parentElement.style.pointerEvents = 'none';
+      }
+
+      if (options.zIndex !== undefined) {
+        controller.setMarkerZIndex(markerRef.current, options.zIndex);
+      }
+    }, [options]); // Konva 초기화 및 이벤트 리스너 등록
+
+    React.useEffect(function () {
+      var mapDiv = controller.mapDivElement;
+      var stage = new Konva__default["default"].Stage({
+        container: containerRef.current,
+        width: mapDiv.offsetWidth,
+        height: mapDiv.offsetHeight
       });
-    };
-    /**
-     * Event 레이어 렌더링 (hover + 선택 상태 표시)
-     *
-     * 🔥 최적화:
-     * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
-     * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
-     * 3. 클로저로 최신 데이터 참조
-     */
+      stageRef.current = stage;
+      var baseLayer = new Konva__default["default"].Layer({
+        listening: false
+      });
+      var eventLayer = new Konva__default["default"].Layer({
+        listening: false
+      });
+      baseLayerRef.current = baseLayer;
+      eventLayerRef.current = eventLayer;
+      stage.add(baseLayer);
+      stage.add(eventLayer);
 
+      if (enableViewportCulling) {
+        updateViewport$1();
+      } // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
 
-    var doRenderEvent = function () {
-      if (!renderEvent) return;
-      var layer = eventLayerRef.current;
-      if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
 
-      var shape = layer.findOne('.event-render-shape');
+      var resizeRafId = null;
+      var resizeObserver = new ResizeObserver(function () {
+        if (resizeRafId !== null) {
+          cancelAnimationFrame(resizeRafId);
+        }
 
-      if (!shape) {
-        // 최초 생성 (한 번만 실행됨)
-        // sceneFunc도 여기서 한 번만 설정 (클로저로 최신 데이터 참조)
-        shape = new Konva__default["default"].Shape({
-          name: 'event-render-shape',
-          sceneFunc: function (context, shape) {
-            var ctx = context; // 클로저로 최신 ref 값 참조
+        resizeRafId = requestAnimationFrame(function () {
+          stage.width(mapDiv.offsetWidth);
+          stage.height(mapDiv.offsetHeight);
+          offsetCacheRef.current.clear();
+          boundingBoxCacheRef.current.clear();
 
-            var selectedItems = Array.from(selectedItemsMapRef.current.values());
-            renderEvent({
-              ctx: ctx,
-              hoveredItem: hoveredItemRef.current,
-              utils: renderUtils,
-              selectedItems: selectedItems,
-              lastClickedItem: lastClickedItemRef.current
-            });
-          },
-          perfectDrawEnabled: false,
-          listening: false,
-          hitStrokeWidth: 0
+          if (enableViewportCullingRef.current) {
+            updateViewport$1();
+          }
+
+          renderAllImmediate();
+          resizeRafId = null;
         });
-        layer.add(shape);
-      } // sceneFunc는 이미 설정되어 있으므로 다시 그리기만
+      });
+      resizeObserver.observe(mapDiv);
+      controller.addEventListener('IDLE', handleIdle);
+      controller.addEventListener('ZOOMSTART', handleZoomStart);
+      controller.addEventListener('ZOOM_CHANGED', handleZoomEnd);
+      controller.addEventListener('CENTER_CHANGED', handleCenterChanged);
+      controller.addEventListener('CLICK', handleClick);
+      controller.addEventListener('MOUSEMOVE', handleMouseMove);
+      controller.addEventListener('DRAGSTART', handleDragStart);
+      controller.addEventListener('DRAGEND', handleDragEnd);
+      mapDiv.addEventListener('mouseleave', handleMouseLeave);
+      renderAllImmediate(); // Context 사용 시 컴포넌트 등록
 
+      var componentInstance = null;
 
-      layer.batchDraw();
-    };
-    /**
-     * 전체 즉시 렌더링 (IDLE 시 호출)
-     */
+      if (context) {
+        componentInstance = {
+          zIndex: currentZIndex,
+          hitTest: function (offset) {
+            return findData(offset) !== null;
+          },
+          onClick: onClick,
+          onMouseOver: onMouseOver,
+          onMouseOut: onMouseOut,
+          findData: findData,
+          setHovered: setHovered,
+          handleLocalClick: handleLocalClick,
+          getSelectedIds: function () {
+            return selectedIdsRef.current;
+          },
+          isInteractionDisabled: function () {
+            return disableInteractionRef.current;
+          }
+        };
+        context.registerComponent(componentInstance);
+      }
 
+      return function () {
+        if (resizeRafId !== null) {
+          cancelAnimationFrame(resizeRafId);
+        }
 
-    var renderAllImmediate = function () {
-      updateViewport();
-      buildSpatialIndex();
+        resizeObserver.disconnect();
+        controller.removeEventListener('IDLE', handleIdle);
+        controller.removeEventListener('ZOOMSTART', handleZoomStart);
+        controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
+        controller.removeEventListener('CENTER_CHANGED', handleCenterChanged);
+        controller.removeEventListener('CLICK', handleClick);
+        controller.removeEventListener('MOUSEMOVE', handleMouseMove);
+        controller.removeEventListener('DRAGSTART', handleDragStart);
+        controller.removeEventListener('DRAGEND', handleDragEnd);
+        mapDiv.removeEventListener('mouseleave', handleMouseLeave);
+
+        if (context && componentInstance) {
+          context.unregisterComponent(componentInstance);
+        }
+
+        baseLayer.destroyChildren();
+        eventLayer.destroyChildren();
+        stage.destroy();
+        offsetCacheRef.current.clear();
+        boundingBoxCacheRef.current.clear();
+        spatialIndexRef.current.clear();
+      };
+    }, []); // disableInteraction 동기화
+
+    React.useEffect(function () {
+      disableInteractionRef.current = disableInteraction;
+    }, [disableInteraction]); // enableViewportCulling 동기화
+
+    React.useEffect(function () {
+      enableViewportCullingRef.current = enableViewportCulling;
+
+      if (stageRef.current) {
+        // 뷰포트 컬링 설정이 변경되면 shape 재생성 필요
+        var baseLayer = baseLayerRef.current;
+
+        if (baseLayer) {
+          var shape = baseLayer.findOne('.base-render-shape');
+
+          if (shape) {
+            shape.destroy();
+          }
+        }
+
+        var eventLayer = eventLayerRef.current;
+
+        if (eventLayer) {
+          var shape = eventLayer.findOne('.event-render-shape');
+
+          if (shape) {
+            shape.destroy();
+          }
+        }
+
+        renderAllImmediate();
+      }
+    }, [enableViewportCulling]); // 외부 selectedItems 동기화
+
+    React.useEffect(function () {
+      if (!stageRef.current) return;
+      syncExternalSelectedItems(externalSelectedItems, selectedIdsRef, selectedItemsMapRef);
       doRenderBase();
-      doRenderAnimation();
       doRenderEvent();
-    }; // --------------------------------------------------------------------------
-    // 이벤트 핸들러: 지도 이벤트
-    // --------------------------------------------------------------------------
+    }, [externalSelectedItems]); // 외부 selectedItem 변경 시 Event Layer 리렌더링
 
-    /**
-     * 지도 이동/줌 완료 시 처리
-     */
+    React.useEffect(function () {
+      if (!stageRef.current) return;
+      selectedItemRef.current = externalSelectedItem;
+      doRenderEvent();
+    }, [externalSelectedItem]); // 데이터 변경 시 렌더링 (캐시 정리 및 선택 상태 동기화)
 
+    React.useEffect(function () {
+      if (!stageRef.current) return;
+      dataRef.current = data;
+
+      if (containerRef.current) {
+        containerRef.current.style.transform = '';
+      }
 
-    var handleIdle = function () {
       prevCenterOffsetRef.current = null;
       accumTranslateRef.current = {
         x: 0,
         y: 0
-      }; // 2. 캐시 정리 (지도 이동/줌으로 좌표 변환 결과가 바뀜)
-
+      };
       offsetCacheRef.current.clear();
-      boundingBoxCacheRef.current.clear(); // 3. 마커 위치 업데이트
+      boundingBoxCacheRef.current.clear();
+      selectedItemsMapRef.current = syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current);
+      renderAllImmediate();
+    }, [data]);
+    return reactDom.createPortal(React__default["default"].createElement("div", {
+      ref: containerRef,
+      style: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%'
+      }
+    }), divElement);
+  };
 
-      var bounds = controller.getCurrBounds();
+  /**
+   * 폴리곤 렌더링 유틸리티
+   *
+   * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
+   * GeoJSON MultiPolygon 형식을 지원하며, 도넛 폴리곤(구멍이 있는 폴리곤)도 처리할 수 있습니다.
+   */
 
-      var markerOptions = tslib.__assign({
-        position: bounds.nw
-      }, options);
+  /**
+   * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
+   *
+   * Canvas 2D Context를 사용하여 폴리곤을 그립니다.
+   * 도넛 폴리곤의 경우 evenodd fill rule을 사용하여 구멍을 처리합니다.
+   *
+   * @param params 폴리곤 그리기 파라미터
+   *
+   * @remarks
+   * - **도넛 폴리곤 처리**:
+   *   - 외부 폴리곤과 내부 구멍들을 같은 path에 추가
+   *   - `fill('evenodd')`를 사용하여 구멍 뚫기
+   * - **일반 폴리곤 처리**: 각 폴리곤 그룹을 개별적으로 그리기
+   * - **성능**: O(n), n은 폴리곤의 총 좌표 수
+   *
+   * @example
+   * ```typescript
+   * drawPolygon({
+   *   ctx,
+   *   polygonOffsets: [[[[100, 200], [200, 200], [200, 100], [100, 100]]]],
+   *   isDonutPolygon: false,
+   *   fillColor: 'rgba(255, 0, 0, 0.5)',
+   *   strokeColor: 'rgba(255, 0, 0, 1)',
+   *   lineWidth: 2
+   * });
+   * ```
+   */
+  var drawPolygon = function (_a) {
+    var ctx = _a.ctx,
+        polygonOffsets = _a.polygonOffsets,
+        isDonutPolygon = _a.isDonutPolygon,
+        fillColor = _a.fillColor,
+        strokeColor = _a.strokeColor,
+        lineWidth = _a.lineWidth;
+
+    for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
+      var multiPolygon = polygonOffsets_1[_i];
 
-      markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // 4. transform 제거 전에 새 데이터로 즉시 렌더링 (겹침 방지)
+      if (isDonutPolygon) {
+        // 도넛 폴리곤 처리: 외부 폴리곤 + 내부 구멍들을 같은 path에 추가
+        ctx.beginPath(); // 1. 외부 폴리곤 그리기 (첫 번째 폴리곤)
 
-      if (containerRef.current) {
-        containerRef.current.style.transform = '';
-        containerRef.current.style.visibility = '';
-      } // 5. 새 위치에서 렌더링
+        var outerPolygon = multiPolygon[0];
 
+        if (outerPolygon && outerPolygon.length > 0) {
+          ctx.moveTo(outerPolygon[0][0], outerPolygon[0][1]);
 
-      renderAllImmediate();
+          for (var i = 1; i < outerPolygon.length; i++) {
+            ctx.lineTo(outerPolygon[i][0], outerPolygon[i][1]);
+          }
+
+          ctx.closePath();
+        } // 2. 내부 폴리곤 (구멍들) 그리기 - 같은 path에 추가
+
+
+        for (var j = 1; j < multiPolygon.length; j++) {
+          var innerPolygon = multiPolygon[j];
+          if (innerPolygon.length === 0) continue;
+          ctx.moveTo(innerPolygon[0][0], innerPolygon[0][1]);
+
+          for (var i = 1; i < innerPolygon.length; i++) {
+            ctx.lineTo(innerPolygon[i][0], innerPolygon[i][1]);
+          }
+
+          ctx.closePath();
+        } // 3. evenodd fill rule로 구멍 뚫기
+
+
+        ctx.fillStyle = fillColor;
+        ctx.fill('evenodd'); // 4. 외곽선 그리기
+
+        ctx.strokeStyle = strokeColor;
+        ctx.lineWidth = lineWidth;
+        ctx.stroke();
+      } else {
+        // 일반 폴리곤 처리: 각 폴리곤 그룹을 개별적으로 그리기
+        for (var _b = 0, multiPolygon_1 = multiPolygon; _b < multiPolygon_1.length; _b++) {
+          var polygonGroup = multiPolygon_1[_b];
+          if (!polygonGroup.length) continue;
+          ctx.beginPath();
+          var firstPoint = polygonGroup[0];
+          ctx.moveTo(firstPoint[0], firstPoint[1]);
+
+          for (var i = 1; i < polygonGroup.length; i++) {
+            var point = polygonGroup[i];
+            ctx.lineTo(point[0], point[1]);
+          }
+
+          ctx.closePath(); // 스타일 설정 및 렌더링
+
+          ctx.fillStyle = fillColor;
+          ctx.strokeStyle = strokeColor;
+          ctx.lineWidth = lineWidth;
+          ctx.fill();
+          ctx.stroke();
+        }
+      }
+    }
+  };
+  /**
+   * 폴리곤 Base 렌더링 함수 팩토리
+   *
+   * Base Layer에서 사용할 렌더링 함수를 생성합니다.
+   * 선택되지 않은 폴리곤만 렌더링하며, 선택된 항목은 Event Layer에서 처리됩니다.
+   *
+   * @template T 폴리곤 데이터의 추가 속성 타입
+   * @param baseFillColor 기본 폴리곤 채우기 색상
+   * @param baseStrokeColor 기본 폴리곤 테두리 색상
+   * @param baseLineWidth 기본 폴리곤 테두리 두께
+   * @returns Base Layer 렌더링 함수
+   *
+   * @remarks
+   * - 선택된 항목은 Event Layer에서 그려지므로 Base Layer에서는 스킵
+   * - 성능: O(n), n은 렌더링할 폴리곤 개수
+   * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+   *
+   * @example
+   * ```typescript
+   * const renderBase = renderPolygonBase(
+   *   'rgba(255, 100, 100, 0.5)',
+   *   'rgba(200, 50, 50, 0.8)',
+   *   2
+   * );
+   * ```
+   */
+
+  var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth) {
+    return function (_a) {
+      var ctx = _a.ctx,
+          items = _a.items,
+          selectedIds = _a.selectedIds,
+          utils = _a.utils;
+
+      for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+        var item = items_1[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
+
+        if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+
+        if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
+
+        var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+        if (!polygonOffsets) continue; // 폴리곤 그리기
+
+        drawPolygon({
+          ctx: ctx,
+          polygonOffsets: polygonOffsets,
+          isDonutPolygon: item.isDonutPolygon || false,
+          fillColor: baseFillColor,
+          strokeColor: baseStrokeColor,
+          lineWidth: baseLineWidth
+        });
+      }
     };
-    /**
-     * 줌 시작 시 처리 (일시적으로 숨김)
-     */
+  };
+  /**
+   * 폴리곤 Event 렌더링 함수 팩토리
+   *
+   * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+   * 선택된 항목, hover된 항목, 마지막 선택된 항목을 각각 다른 스타일로 렌더링합니다.
+   *
+   * @template T 폴리곤 데이터의 추가 속성 타입
+   * @param baseFillColor 기본 폴리곤 채우기 색상 (필수, fallback용)
+   * @param baseStrokeColor 기본 폴리곤 테두리 색상 (필수, fallback용)
+   * @param baseLineWidth 기본 폴리곤 테두리 두께 (필수, fallback용)
+   * @param selectedFillColor 선택된 폴리곤 채우기 색상 (선택, 기본값: baseFillColor)
+   * @param selectedStrokeColor 선택된 폴리곤 테두리 색상 (선택, 기본값: baseStrokeColor)
+   * @param selectedLineWidth 선택된 폴리곤 테두리 두께 (선택, 기본값: baseLineWidth)
+   * @param activeFillColor 마지막 선택된 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
+   * @param activeStrokeColor 마지막 선택된 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
+   * @param activeLineWidth 마지막 선택된 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
+   * @param hoveredFillColor Hover 시 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
+   * @param hoveredStrokeColor Hover 시 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
+   * @param hoveredLineWidth Hover 시 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
+   * @returns Event Layer 렌더링 함수
+   *
+   * @remarks
+   * - **렌더링 순서**: 선택된 항목 → 마지막 선택된 항목 → hover된 항목 (최상단)
+   * - **성능**: O(m), m은 선택된 항목 수 + hover된 항목 수
+   * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+   * - hover된 항목이 선택되어 있으면 active 스타일 적용
+   *
+   * @example
+   * ```typescript
+   * const renderEvent = renderPolygonEvent(
+   *   'rgba(255, 100, 100, 0.5)',  // baseFillColor
+   *   'rgba(200, 50, 50, 0.8)',    // baseStrokeColor
+   *   2,                            // baseLineWidth
+   *   'rgba(255, 193, 7, 0.7)',    // selectedFillColor
+   *   'rgba(255, 152, 0, 1)',      // selectedStrokeColor
+   *   4                             // selectedLineWidth
+   * );
+   * ```
+   */
+
+  var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth) {
+    // 기본값 설정 (base 기준)
+    var _selectedFillColor = selectedFillColor || baseFillColor;
+
+    var _selectedStrokeColor = selectedStrokeColor || baseStrokeColor;
+
+    var _selectedLineWidth = selectedLineWidth || baseLineWidth;
+
+    var _activeFillColor = activeFillColor || _selectedFillColor;
+
+    var _activeStrokeColor = activeStrokeColor || _selectedStrokeColor;
+
+    var _activeLineWidth = activeLineWidth || _selectedLineWidth;
+
+    var _hoveredFillColor = hoveredFillColor || _selectedFillColor;
+
+    var _hoveredStrokeColor = hoveredStrokeColor || _selectedStrokeColor;
+
+    var _hoveredLineWidth = hoveredLineWidth || _selectedLineWidth;
+
+    return function (_a) {
+      var ctx = _a.ctx,
+          hoveredItem = _a.hoveredItem,
+          utils = _a.utils,
+          selectedItems = _a.selectedItems,
+          selectedItem = _a.selectedItem; // 성능 최적화: selectedItems를 Set으로 변환하여 O(1) 조회 (매번 some() 체크 방지)
+
+      var selectedIdsSet = selectedItems ? new Set(selectedItems.map(function (item) {
+        return item.id;
+      })) : new Set();
+      var hoveredItemId = hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id;
+      var selectedItemId = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id; // 1. 선택된 항목들 그리기 (마지막 선택 항목과 호버된 항목 제외)
+
+      if (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) {
+        for (var _i = 0, selectedItems_1 = selectedItems; _i < selectedItems_1.length; _i++) {
+          var item = selectedItems_1[_i]; // 마지막 선택 항목과 호버된 항목은 나중에 따로 그림
+
+          if (item.id === selectedItemId || item.id === hoveredItemId) continue;
+          if (!item.paths) continue;
+          var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+          if (!polygonOffsets) continue;
+          drawPolygon({
+            ctx: ctx,
+            polygonOffsets: polygonOffsets,
+            isDonutPolygon: item.isDonutPolygon || false,
+            fillColor: _selectedFillColor,
+            strokeColor: _selectedStrokeColor,
+            lineWidth: _selectedLineWidth
+          });
+        }
+      } // 2. 마지막 선택된 항목 그리기 (호버되지 않은 경우)
+
+
+      if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.paths) && hoveredItemId !== selectedItemId) {
+        var polygonOffsets = utils.getOrComputePolygonOffsets(selectedItem);
+
+        if (polygonOffsets) {
+          drawPolygon({
+            ctx: ctx,
+            polygonOffsets: polygonOffsets,
+            isDonutPolygon: selectedItem.isDonutPolygon || false,
+            fillColor: _activeFillColor,
+            strokeColor: _activeStrokeColor,
+            lineWidth: _activeLineWidth
+          });
+        }
+      } // 3. 호버된 항목 그리기 (가장 위에 표시)
+
+
+      if (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.paths) {
+        var polygonOffsets = utils.getOrComputePolygonOffsets(hoveredItem);
+        if (!polygonOffsets) return; // 좌표 변환 실패 시 스킵 (return은 렌더링 함수 종료)
+        // 성능 최적화: Set을 사용하여 O(1) 조회 (이전: O(m) some() 체크)
+
+        var isSelected = selectedIdsSet.has(hoveredItem.id);
+        drawPolygon({
+          ctx: ctx,
+          polygonOffsets: polygonOffsets,
+          isDonutPolygon: hoveredItem.isDonutPolygon || false,
+          fillColor: isSelected ? _activeFillColor : _hoveredFillColor,
+          strokeColor: isSelected ? _activeStrokeColor : _hoveredStrokeColor,
+          lineWidth: isSelected ? _activeLineWidth : _hoveredLineWidth
+        });
+      }
+    };
+  };
+
+  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 ? false : _b,
+        _c = props.cullingMargin,
+        cullingMargin = _c === void 0 ? DEFAULT_CULLING_MARGIN : _c,
+        _d = props.maxCacheSize,
+        maxCacheSize = _d === void 0 ? DEFAULT_MAX_CACHE_SIZE : _d,
+        externalSelectedItems = props.selectedItems,
+        externalSelectedItem = props.selectedItem,
+        _e = props.disableInteraction,
+        disableInteraction = _e === void 0 ? false : _e,
+        baseFillColor = props.baseFillColor,
+        baseStrokeColor = props.baseStrokeColor,
+        baseLineWidth = props.baseLineWidth,
+        selectedFillColor = props.selectedFillColor,
+        selectedStrokeColor = props.selectedStrokeColor,
+        selectedLineWidth = props.selectedLineWidth,
+        activeFillColor = props.activeFillColor,
+        activeStrokeColor = props.activeStrokeColor,
+        activeLineWidth = props.activeLineWidth,
+        hoveredFillColor = props.hoveredFillColor,
+        hoveredStrokeColor = props.hoveredStrokeColor,
+        hoveredLineWidth = props.hoveredLineWidth,
+        options = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "baseFillColor", "baseStrokeColor", "baseLineWidth", "selectedFillColor", "selectedStrokeColor", "selectedLineWidth", "activeFillColor", "activeStrokeColor", "activeLineWidth", "hoveredFillColor", "hoveredStrokeColor", "hoveredLineWidth"]); // --------------------------------------------------------------------------
+    // Hooks & Context
+    // --------------------------------------------------------------------------
+
+
+    var controller = useMintMapController();
+    var context = useWoongCanvasContext();
+    var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // DOM Refs
+
+    var divRef = React.useRef(document.createElement('div'));
+    var divElement = divRef.current;
+    var containerRef = React.useRef(null);
+    var markerRef = React.useRef(); // Konva Refs
+
+    var stageRef = React.useRef(null);
+    var baseLayerRef = React.useRef(null);
+    var eventLayerRef = React.useRef(null); // 상태 관리 Refs (React 리렌더링 최소화)
+
+    var dataRef = React.useRef(data);
+    var disableInteractionRef = React.useRef(disableInteraction);
+    var enableViewportCullingRef = React.useRef(enableViewportCulling);
+    var hoveredItemRef = React.useRef(null);
+    var selectedItemRef = React.useRef(externalSelectedItem);
+    var selectedIdsRef = React.useRef(new Set());
+    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
+    }); // 성능 최적화 Refs
+
+    var offsetCacheRef = React.useRef(new LRUCache(maxCacheSize));
+    var spatialIndexRef = React.useRef(new SpatialHashGrid(SPATIAL_GRID_CELL_SIZE));
+    var boundingBoxCacheRef = React.useRef(new Map());
+    var viewportRef = React.useRef(null); // 뷰포트 영역 계산 (Viewport Culling용)
+
+    var updateViewport$1 = function () {
+      updateViewport(stageRef.current, cullingMargin, viewportRef);
+    }; // 뷰포트 내부 여부 확인 (바운딩 박스 캐싱)
+
+
+    var isInViewport$1 = function (item) {
+      return 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 = computePolygonOffsets(polygonData, controller);
+      if (!result) return null;
+      offsetCacheRef.current.set(polygonData.id, result);
+      return result;
+    }; // 폴리곤 바운딩 박스 계산 (Viewport Culling 및 Hit Test용)
+
+
+    var computeBoundingBox = function (item) {
+      var offsets = getOrComputePolygonOffsets(item);
+      if (!offsets) return null; // 모든 좌표를 순회하며 최소/최대값 찾기
+
+      var minX = Infinity,
+          minY = Infinity,
+          maxX = -Infinity,
+          maxY = -Infinity;
+
+      for (var _i = 0, offsets_1 = offsets; _i < offsets_1.length; _i++) {
+        var multiPolygon = offsets_1[_i];
+
+        for (var _a = 0, multiPolygon_1 = multiPolygon; _a < multiPolygon_1.length; _a++) {
+          var polygonGroup = multiPolygon_1[_a];
+
+          for (var _b = 0, polygonGroup_1 = polygonGroup; _b < polygonGroup_1.length; _b++) {
+            var _c = polygonGroup_1[_b],
+                x = _c[0],
+                y = _c[1];
+            if (x < minX) minX = x;
+            if (y < minY) minY = y;
+            if (x > maxX) maxX = x;
+            if (y > maxY) maxY = y;
+          }
+        }
+      }
+
+      return {
+        minX: minX,
+        minY: minY,
+        maxX: maxX,
+        maxY: maxY
+      };
+    }; // 공간 인덱스 빌드 (빠른 Hit Test용)
+
+
+    var buildSpatialIndex$1 = function () {
+      buildSpatialIndex(dataRef.current, spatialIndexRef.current, computeBoundingBox);
+    }; // 렌더링 유틸리티 객체
+
+
+    var renderUtils = {
+      getOrComputePolygonOffsets: getOrComputePolygonOffsets,
+      getOrComputeMarkerOffset: function () {
+        return null;
+      }
+    }; // 렌더링 함수 생성
+
+    var renderBase = renderPolygonBase(baseFillColor, baseStrokeColor, baseLineWidth);
+    var renderEvent = 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;
+      var shape = layer.findOne('.base-render-shape');
+
+      if (!shape) {
+        shape = new Konva__default["default"].Shape({
+          name: 'base-render-shape',
+          sceneFunc: function (context, shape) {
+            var ctx = context;
+            var hovered = hoveredItemRef.current; // 뷰포트 컬링: 화면에 보이는 항목만 필터링
+
+            var visibleItems = enableViewportCullingRef.current ? dataRef.current.filter(function (item) {
+              return isInViewport$1(item);
+            }) : dataRef.current;
+            renderBase({
+              ctx: ctx,
+              items: visibleItems,
+              selectedIds: selectedIdsRef.current,
+              hoveredItem: hovered,
+              utils: renderUtils
+            });
+          },
+          perfectDrawEnabled: false,
+          listening: false,
+          hitStrokeWidth: 0
+        });
+        layer.add(shape);
+      }
 
+      layer.batchDraw();
+    }; // Event Layer 렌더링 (hover 효과 및 선택 상태 표시)
 
-    var handleZoomStart = function () {
-      if (containerRef.current) {
-        containerRef.current.style.visibility = 'hidden';
-      }
-    };
-    /**
-     * 줌 종료 시 처리 (다시 표시)
-     */
 
+    var doRenderEvent = function () {
+      var layer = eventLayerRef.current;
+      if (!layer) return;
+      var shape = layer.findOne('.event-render-shape');
 
-    var handleZoomEnd = function () {
-      if (containerRef.current) {
-        containerRef.current.style.visibility = '';
+      if (!shape) {
+        shape = new Konva__default["default"].Shape({
+          name: 'event-render-shape',
+          sceneFunc: function (context, shape) {
+            var ctx = context;
+            var selectedItems = mapValuesToArray(selectedItemsMapRef.current);
+            var hovered = hoveredItemRef.current;
+            renderEvent({
+              ctx: ctx,
+              hoveredItem: hovered,
+              utils: renderUtils,
+              selectedItems: selectedItems,
+              selectedItem: selectedItemRef.current
+            });
+          },
+          perfectDrawEnabled: false,
+          listening: false,
+          hitStrokeWidth: 0
+        });
+        layer.add(shape);
       }
-    };
-    /**
-     * 지도 중심 변경 시 처리 (transform으로 이동 추적)
-     */
 
+      layer.batchDraw();
+    }; // 전체 즉시 렌더링
 
-    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 renderAllImmediate = function () {
+      if (enableViewportCullingRef.current) {
+        updateViewport$1();
       }
 
-      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
-      };
+      buildSpatialIndex$1();
+      doRenderBase();
+      doRenderEvent();
+    }; // 지도 이벤트 핸들러 생성
+
+
+    var _f = 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;
 
-      if (containerRef.current) {
-        containerRef.current.style.transform = "translate(".concat(accumTranslateRef.current.x, "px, ").concat(accumTranslateRef.current.y, "px)");
-      }
-    }; // --------------------------------------------------------------------------
-    // Hit Test & 상태 관리
-    // --------------------------------------------------------------------------
+    var handleDragStart = function () {
+      handleDragStartShared();
+      draggingRef.current = true;
+      controller.setMapCursor('grabbing');
+    };
 
-    /**
-     * 특정 좌표의 마커/폴리곤 데이터 찾기 (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된 항목이 있으면, 그것을 먼저 체크
-      if (topOnHover && hoveredItemRef.current) {
-        var hovered = hoveredItemRef.current; // 폴리곤인 경우
-
-        if (dataType === exports.CanvasDataType.POLYGON) {
-          if (isPointInPolygonData(offset, hovered, getOrComputePolygonOffsets)) {
-            return hovered; // 여전히 hover된 항목 위에 있음
-          }
-        } // 마커인 경우
-        else {
-          if (isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {
-            return hovered; // 여전히 hover된 항목 위에 있음
-          }
-        }
-      } // Spatial Index로 후보 항목만 빠르게 추출 (30,000개 → ~10개)
-
-
-      var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 데이터 타입에 따라 적절한 히트 테스트 수행
-
-      if (dataType === exports.CanvasDataType.MARKER) {
-        // 마커 체크
-        for (var i = candidates.length - 1; i >= 0; i--) {
-          var item = candidates[i];
+      // 공간 인덱스에서 후보 항목 조회 (O(1) 수준의 빠른 조회)
+      var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 역순 순회: 나중에 추가된 항목(최상위)이 먼저 선택되도록
 
-          if (isPointInMarkerData(offset, item, getOrComputeMarkerOffset)) {
-            return item;
-          }
-        }
-      } else {
-        // 폴리곤 체크
-        for (var i = candidates.length - 1; i >= 0; i--) {
-          var item = candidates[i];
+      for (var i = candidates.length - 1; i >= 0; i--) {
+        var item = candidates[i]; // 정확한 Hit Test: Ray Casting 알고리즘으로 폴리곤 내부 여부 확인
 
-          if (isPointInPolygonData(offset, item, getOrComputePolygonOffsets)) {
-            return item;
-          }
+        if (isPointInPolygonData(offset, item, getOrComputePolygonOffsets)) {
+          return item;
         }
       }
 
       return null;
-    };
-    /**
-     * Hover 상태 설정 및 Event 레이어 렌더링
-     *
-     * @param data hover된 마커/폴리곤 데이터 또는 null
-     *
-     * 최적화: RAF 제거하여 즉시 렌더링 (16ms 지연 제거)
-     * topOnHover가 true일 때는 Base 레이어도 다시 그려서 z-order 변경
-     */
+    }; // Hover 상태 설정 및 렌더링
 
 
     var setHovered = function (data) {
@@ -5930,29 +6767,14 @@
         controller.setMapCursor('grabbing');
       } else {
         controller.setMapCursor(data ? 'pointer' : 'grab');
-      } // 즉시 렌더링 (RAF 없이)
-      // topOnHover는 Event Layer에서만 처리 (Base Layer 재렌더링 제거로 성능 향상)
-
+      }
 
       doRenderEvent();
-    };
-    /**
-     * 클릭 처리 (단일/다중 선택)
-     *
-     * @param data 클릭된 마커/폴리곤 데이터
-     *
-     * 🔥 최적화: 단일 Shape 렌더링으로 Base Layer 재렌더링 속도 향상
-     * - sceneFunc에서 selectedIds를 체크하여 선택된 마커만 스킵
-     * - 객체 생성 오버헤드 제거로 1000개 이상도 부드럽게 처리
-     */
+    }; // 클릭 처리: 선택 상태 업데이트
 
 
     var handleLocalClick = function (data) {
-      // 0. 마지막 클릭 항목 저장
-      lastClickedItemRef.current = data; // 1. 선택 상태 업데이트
-
       if (enableMultiSelect) {
-        // 다중 선택: Set과 Map 동시 업데이트
         var newSelected = new Set(selectedIdsRef.current);
 
         if (newSelected.has(data.id)) {
@@ -5965,7 +6787,6 @@
 
         selectedIdsRef.current = newSelected;
       } else {
-        // 단일 선택: 토글
         var newSelected = new Set();
 
         if (!selectedIdsRef.current.has(data.id)) {
@@ -5979,144 +6800,77 @@
         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 (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
-
-      try {
-        var clickedOffset = controller.positionToOffset(event.param.position);
-        var data = findData(clickedOffset);
-
-        if (data) {
-          handleLocalClick(data);
-          if (onClick) onClick(data, selectedIdsRef.current);
-        }
-      } catch (error) {
-        console.error('[WoongKonvaMarker] handleClick error:', error);
-      }
-    };
-    /**
-     * 마우스 이동 이벤트 처리 (hover 감지)
-     */
+      if (disableInteractionRef.current) return;
+      var clickedOffset = validateEvent(event, context, 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 (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
-
-      try {
-        var mouseOffset = controller.positionToOffset(event.param.position);
-        var hoveredItem = findData(mouseOffset);
-        var prevHovered = hoveredItemRef.current;
-
-        if (prevHovered !== hoveredItem) {
-          setHovered(hoveredItem);
-          if (prevHovered && onMouseOut) onMouseOut(prevHovered);
-          if (hoveredItem && onMouseOver) onMouseOver(hoveredItem);
-        }
-      } catch (error) {
-        console.error('[WoongKonvaMarker] 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 = validateEvent(event, context, 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;
       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();
+    }; // 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 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 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;
@@ -6125,34 +6879,25 @@
         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);
+      stage.add(eventLayer);
 
-      if (renderAnimation) {
-        stage.add(animationLayer);
-      }
-
-      stage.add(eventLayer); // 초기 뷰포트 설정
+      if (enableViewportCulling) {
+        updateViewport$1();
+      } // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
 
-      updateViewport(); // ResizeObserver (맵 크기 변경 감지)
 
       var resizeRafId = null;
       var resizeObserver = new ResizeObserver(function () {
-        // RAF로 다음 프레임에 한 번만 실행 (debounce 효과)
         if (resizeRafId !== null) {
           cancelAnimationFrame(resizeRafId);
         }
@@ -6162,7 +6907,11 @@
           stage.height(mapDiv.offsetHeight);
           offsetCacheRef.current.clear();
           boundingBoxCacheRef.current.clear();
-          updateViewport();
+
+          if (enableViewportCullingRef.current) {
+            updateViewport$1();
+          }
+
           renderAllImmediate();
           resizeRafId = null;
         });
@@ -6175,10 +6924,9 @@
       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;
 
@@ -6189,28 +6937,25 @@
             return findData(offset) !== null;
           },
           onClick: onClick,
-          onMouseOver: onMouseOver,
-          onMouseOut: onMouseOut,
           findData: findData,
           setHovered: setHovered,
           handleLocalClick: handleLocalClick,
           getSelectedIds: function () {
             return selectedIdsRef.current;
+          },
+          isInteractionDisabled: function () {
+            return disableInteractionRef.current;
           }
         };
         context.registerComponent(componentInstance);
-      } // Cleanup 함수
-
+      }
 
       return function () {
-        // RAF 정리
         if (resizeRafId !== null) {
           cancelAnimationFrame(resizeRafId);
-        } // 옵저버 정리
-
-
-        resizeObserver.disconnect(); // 이벤트 리스너 정리
+        }
 
+        resizeObserver.disconnect();
         controller.removeEventListener('IDLE', handleIdle);
         controller.removeEventListener('ZOOMSTART', handleZoomStart);
         controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
@@ -6219,52 +6964,70 @@
         controller.removeEventListener('MOUSEMOVE', handleMouseMove);
         controller.removeEventListener('DRAGSTART', handleDragStart);
         controller.removeEventListener('DRAGEND', handleDragEnd);
-        mapDiv.removeEventListener('mouseleave', handleMouseLeave); // Context 정리
+        mapDiv.removeEventListener('mouseleave', handleMouseLeave);
 
         if (context && componentInstance) {
           context.unregisterComponent(componentInstance);
-        } // Konva 리소스 정리
-
+        }
 
         baseLayer.destroyChildren();
-        animationLayer.destroyChildren();
         eventLayer.destroyChildren();
-        stage.destroy(); // 캐시 정리
-
+        stage.destroy();
         offsetCacheRef.current.clear();
         boundingBoxCacheRef.current.clear();
         spatialIndexRef.current.clear();
       };
-    }, []); // --------------------------------------------------------------------------
-    // Lifecycle: 외부 selectedItems 동기화
-    // --------------------------------------------------------------------------
+    }, []); // disableInteraction 동기화
+
+    React.useEffect(function () {
+      disableInteractionRef.current = disableInteraction;
+    }, [disableInteraction]); // enableViewportCulling 동기화
 
     React.useEffect(function () {
-      if (!stageRef.current) return; // externalSelectedItems가 undefined면 외부 제어 안 함
+      enableViewportCullingRef.current = enableViewportCulling;
 
-      if (externalSelectedItems === undefined) return; // 외부에서 전달된 selectedItems로 동기화
+      if (stageRef.current) {
+        // 뷰포트 컬링 설정이 변경되면 shape 재생성 필요
+        var baseLayer = baseLayerRef.current;
 
-      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 (baseLayer) {
+          var shape = baseLayer.findOne('.base-render-shape');
+
+          if (shape) {
+            shape.destroy();
+          }
+        }
+
+        var eventLayer = eventLayerRef.current;
+
+        if (eventLayer) {
+          var shape = eventLayer.findOne('.event-render-shape');
+
+          if (shape) {
+            shape.destroy();
+          }
+        }
+
+        renderAllImmediate();
+      }
+    }, [enableViewportCulling]); // 외부 selectedItems 동기화
 
+    React.useEffect(function () {
+      if (!stageRef.current) return;
+      syncExternalSelectedItems(externalSelectedItems, selectedIdsRef, selectedItemsMapRef);
       doRenderBase();
-      doRenderAnimation();
       doRenderEvent();
-    }, [externalSelectedItems]); // 배열 자체를 dependency로 사용
-    // --------------------------------------------------------------------------
-    // Lifecycle: 마커 데이터 변경 시 렌더링
-    // --------------------------------------------------------------------------
+    }, [externalSelectedItems]); // 외부 selectedItem 변경 시 Event Layer 리렌더링
 
     React.useEffect(function () {
-      if (!stageRef.current) return; // markersRef 동기화
+      if (!stageRef.current) return;
+      selectedItemRef.current = externalSelectedItem;
+      doRenderEvent();
+    }, [externalSelectedItem]); // 데이터 변경 시 렌더링 (캐시 정리 및 선택 상태 동기화)
 
-      markersRef.current = markers; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
+    React.useEffect(function () {
+      if (!stageRef.current) return;
+      dataRef.current = data;
 
       if (containerRef.current) {
         containerRef.current.style.transform = '';
@@ -6274,48 +7037,12 @@
       accumTranslateRef.current = {
         x: 0,
         y: 0
-      }; // 캐시 정리 (새 데이터이므로 기존 캐시는 무효)
-
+      };
       offsetCacheRef.current.clear();
       boundingBoxCacheRef.current.clear();
-      /**
-       * 선택 상태 동기화 (최적화 버전)
-       *
-       * markers가 변경되면 selectedItemsMapRef도 업데이트 필요
-       * (참조가 바뀌므로 기존 Map의 데이터는 stale 상태)
-       *
-       * 🔥 중요: 화면 밖 마커도 선택 상태 유지!
-       * - 현재 markers에 있으면 최신 데이터로 업데이트
-       * - 없으면 기존 selectedItemsMapRef의 데이터 유지
-       *
-       * 최적화: markers를 Map으로 먼저 변환하여 find() 순회 제거
-       * - O(전체 마커 수 + 선택된 개수) - 매우 효율적
-       */
-
-      var markersMap = new Map(markers.map(function (m) {
-        return [m.id, m];
-      }));
-      var newSelectedItemsMap = new Map();
-      selectedIdsRef.current.forEach(function (id) {
-        // 현재 markers에 있으면 최신 데이터 사용
-        var currentItem = markersMap.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 = syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current);
       renderAllImmediate();
-    }, [markers]);
+    }, [data]);
     return reactDom.createPortal(React__default["default"].createElement("div", {
       ref: containerRef,
       style: {
@@ -6325,40 +7052,6 @@
       }
     }), divElement);
   };
-  /**
-   * 🔥 React.memo 최적화: 마커 배열과 selectedItems 변경 체크
-   *
-   * 비교 전략:
-   * 1. markers 배열 비교
-   * 2. selectedItems 배열 비교 (외부 제어)
-   *
-   * 주의: JSON.stringify() 사용 금지! (매우 느림)
-   */
-
-
-  var WoongKonvaMarker = React__default["default"].memo(WoongKonvaMarkerComponent, function (prevProps, nextProps) {
-    // 1. markers 비교
-    var prevMarkers = prevProps.markers;
-    var nextMarkers = nextProps.markers; // 참조가 같으면 스킵
-
-    if (prevMarkers !== nextMarkers) {
-      // 길이가 다르면 변경됨
-      if (prevMarkers.length !== nextMarkers.length) return false; // 각 마커의 ID 비교
-
-      for (var i = 0; i < prevMarkers.length; i++) {
-        if (prevMarkers[i].id !== nextMarkers[i].id) {
-          return false; // 변경됨 → 리렌더링
-        }
-      }
-    } // 2. selectedItems 비교 (참조만 비교)
-
-
-    if (prevProps.selectedItems !== nextProps.selectedItems) {
-      return false; // 변경됨 → 리렌더링
-    }
-
-    return true; // 같음 → 리렌더링 스킵
-  });
 
   var css_248z = ".MintMapWrapper-module_mint-map-control-wrapper-container__DONh7 {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  pointer-events: none;\n  z-index: 101;\n}\n\n.MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV {\n  position: absolute;\n  z-index: 1;\n}";
   var styles = {"mint-map-control-wrapper-container":"MintMapWrapper-module_mint-map-control-wrapper-container__DONh7","mint-map-overlay-wrapper":"MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV"};
@@ -9202,7 +9895,6 @@
   exports.Drawable = Drawable;
   exports.GeoCalulator = GeoCalulator;
   exports.GoogleMintMapController = GoogleMintMapController;
-  exports.KonvaMarkerProvider = KonvaMarkerProvider;
   exports.LRUCache = LRUCache;
   exports.MapBuildingProjection = MapBuildingProjection;
   exports.MapCanvasMarkerWrapper = MapCanvasMarkerWrapper;
@@ -9235,18 +9927,31 @@
   exports.Spacing = Spacing;
   exports.SpatialHashGrid = SpatialHashGrid;
   exports.Status = Status;
-  exports.WoongKonvaMarker = WoongKonvaMarker;
+  exports.WoongCanvasMarker = WoongCanvasMarker;
+  exports.WoongCanvasPolygon = WoongCanvasPolygon;
+  exports.WoongCanvasProvider = WoongCanvasProvider;
+  exports.buildSpatialIndex = buildSpatialIndex;
+  exports.calculateTextBoxWidth = calculateTextBoxWidth;
   exports.computeMarkerOffset = computeMarkerOffset;
   exports.computePolygonOffsets = computePolygonOffsets;
+  exports.createCanvasData = createCanvasData;
+  exports.createMapEventHandlers = createMapEventHandlers;
   exports.getClusterInfo = getClusterInfo;
   exports.getMapOfType = getMapOfType;
+  exports.hexToRgba = hexToRgba;
+  exports.isInViewport = isInViewport;
   exports.isPointInMarkerData = isPointInMarkerData;
   exports.isPointInPolygon = isPointInPolygon;
   exports.isPointInPolygonData = isPointInPolygonData;
   exports.log = log;
-  exports.useKonvaMarkerContext = useKonvaMarkerContext;
+  exports.mapValuesToArray = mapValuesToArray;
+  exports.syncExternalSelectedItems = syncExternalSelectedItems;
+  exports.syncSelectedItems = syncSelectedItems;
+  exports.updateViewport = updateViewport;
   exports.useMarkerMoving = useMarkerMoving;
   exports.useMintMapController = useMintMapController;
+  exports.useWoongCanvasContext = useWoongCanvasContext;
+  exports.validateEvent = validateEvent;
   exports.waiting = waiting;
 
   Object.defineProperty(exports, '__esModule', { value: true });