@mint-ui/map 1.2.0-test.1 → 1.2.0-test.11

package/dist/index.umd.js

@@ -1,14 +1,15 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('tslib'), require('react'), require('classnames/bind'), require('style-inject'), require('uuid'), require('@mint-ui/tools'), require('react-dom')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'tslib', 'react', 'classnames/bind', 'style-inject', 'uuid', '@mint-ui/tools', 'react-dom'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@mint-ui/map"] = {}, global.tslib, global.React, global.classNames, global.styleInject, global.uuid, global.tools, global.reactDom));
-})(this, (function (exports, tslib, React, classNames, styleInject, uuid, tools, reactDom) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('tslib'), require('react'), require('classnames/bind'), require('style-inject'), require('uuid'), require('@mint-ui/tools'), require('react-dom'), require('konva')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'tslib', 'react', 'classnames/bind', 'style-inject', 'uuid', '@mint-ui/tools', 'react-dom', 'konva'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@mint-ui/map"] = {}, global.tslib, global.React, global.classNames, global.styleInject, global.uuid, global.tools, global.reactDom, global.Konva));
+})(this, (function (exports, tslib, React, classNames, styleInject, uuid, tools, reactDom, Konva) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
   var styleInject__default = /*#__PURE__*/_interopDefaultLegacy(styleInject);
+  var Konva__default = /*#__PURE__*/_interopDefaultLegacy(Konva);
 
   var css_248z$2 = ".MintMap-module_loading-point-container__znk6l {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n\n.MintMap-module_ani-blink__K89JK {\n  animation: MintMap-module_blink__mqfeV infinite 0.6s;\n}\n\n@keyframes MintMap-module_blink__mqfeV {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.3;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n.MintMap-module_ani-fade-in__lpHuy {\n  animation: MintMap-module_fade-in__jHpv1 1s;\n}\n\n@keyframes MintMap-module_fade-in__jHpv1 {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n.MintMap-module_ani-fade-out__5-esw {\n  animation: MintMap-module_fade-out__CIjGe 1s;\n}\n\n@keyframes MintMap-module_fade-out__CIjGe {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n.MintMap-module_ani-expansion__S2vOZ {\n  animation: MintMap-module_expansion__WMo5- ease 0.6s;\n}\n\n@keyframes MintMap-module_expansion__WMo5- {\n  0% {\n    width: 0%;\n  }\n  100% {\n    width: 100%;\n  }\n}";
   var styles$2 = {"loading-point-container":"MintMap-module_loading-point-container__znk6l","ani-blink":"MintMap-module_ani-blink__K89JK","blink":"MintMap-module_blink__mqfeV","ani-fade-in":"MintMap-module_ani-fade-in__lpHuy","fade-in":"MintMap-module_fade-in__jHpv1","ani-fade-out":"MintMap-module_ani-fade-out__5-esw","fade-out":"MintMap-module_fade-out__CIjGe","ani-expansion":"MintMap-module_ani-expansion__S2vOZ","expansion":"MintMap-module_expansion__WMo5-"};
@@ -653,6 +654,17 @@
   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 () {
@@ -786,6 +798,174 @@
     return MapUIEvent;
   }();
 
+  /**
+   * 폴리곤 offset 계산
+   */
+
+  var computePolygonOffsets = function (polygonData, controller) {
+    var paths = polygonData.paths;
+
+    if (!paths || paths.type !== 'MultiPolygon' || !paths.coordinates) {
+      return null;
+    }
+
+    var result = [];
+
+    for (var _i = 0, _a = paths.coordinates; _i < _a.length; _i++) {
+      var multiPolygon = _a[_i];
+      var multiPolygonOffsets = [];
+
+      for (var _b = 0, multiPolygon_1 = multiPolygon; _b < multiPolygon_1.length; _b++) {
+        var polygonGroup = multiPolygon_1[_b];
+        var polygonOffsets = [];
+
+        for (var _c = 0, polygonGroup_1 = polygonGroup; _c < polygonGroup_1.length; _c++) {
+          var coord = polygonGroup_1[_c];
+          var pos = new Position(coord[1], coord[0]);
+          var offset = controller.positionToOffset(pos);
+          polygonOffsets.push([offset.x, offset.y]);
+        }
+
+        multiPolygonOffsets.push(polygonOffsets);
+      }
+
+      result.push(multiPolygonOffsets);
+    }
+
+    return result;
+  };
+  /**
+   * 마커 offset 계산
+   */
+
+  var computeMarkerOffset = function (markerData, controller) {
+    if (!markerData.position) {
+      return null;
+    }
+
+    return controller.positionToOffset(markerData.position);
+  };
+  /**
+   * Point-in-Polygon 알고리즘
+   */
+
+  var isPointInPolygon = function (point, polygon) {
+    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];
+      var intersect = yi > point.y !== yj > point.y && point.x < (xj - xi) * (point.y - yi) / (yj - yi) + xi;
+      if (intersect) inside = !inside;
+    }
+
+    return inside;
+  };
+  /**
+   * 폴리곤 히트 테스트 (도넛 폴리곤 지원)
+   *
+   * 로직:
+   * 1. 외부 폴리곤(첫 번째): 내부에 있어야 함
+   * 2. 내부 구멍들(나머지): 내부에 있으면 안 됨 (evenodd 규칙)
+   *
+   * 중요: 도넛 폴리곤과 내부 폴리곤은 별개의 polygonData로 처리됨
+   * - 도넛 폴리곤 A: isDonutPolygon=true
+   * - 내부 폴리곤 B: isDonutPolygon=false (별도 데이터)
+   */
+
+  var isPointInPolygonData = function (clickedOffset, polygonData, getPolygonOffsets) {
+    var polygonOffsets = getPolygonOffsets(polygonData);
+    if (!polygonOffsets) return false; // 🍩 도넛 폴리곤 처리 (isDonutPolygon === true)
+
+    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;
+        } // 1. 외부 폴리곤(첫 번째)에 포함되는지 확인
+
+
+        var outerPolygon = multiPolygon[0];
+
+        if (!isPointInPolygon(clickedOffset, outerPolygon)) {
+          continue; // 외부 폴리곤 밖이면 다음 multiPolygon 확인
+        } // 2. 내부 구멍들(나머지)에 포함되는지 확인
+
+
+        for (var i = 1; i < multiPolygon.length; i++) {
+          var hole = multiPolygon[i];
+
+          if (isPointInPolygon(clickedOffset, hole)) {
+            // ❌ 구멍 안에 있음 → 이 도넛 폴리곤은 히트 안 됨
+            // 다른 multiPolygon 체크하지 않고 바로 false 반환
+            // (도넛 폴리곤의 구멍 안은 무조건 클릭 불가)
+            return false;
+          }
+        } // ✅ 외부 폴리곤 안 + 구멍 밖 = 히트!
+
+
+        return true;
+      }
+
+      return false;
+    } // 일반 폴리곤 처리 (isDonutPolygon === false 또는 undefined)
+
+
+    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;
+        }
+      }
+    }
+
+    return false;
+  };
+  /**
+   * 마커 히트 테스트
+   */
+
+  var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset) {
+    var markerOffset = getMarkerOffset(markerData);
+    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;
+    return clickedOffset.x >= x && clickedOffset.x <= x + boxWidth && clickedOffset.y >= y && clickedOffset.y <= y + boxHeight;
+  };
+  var hexToRgba = function (hexColor, alpha) {
+    if (alpha === void 0) {
+      alpha = 1;
+    } // NOTE: 입력된 hexColor에서 "#" 제거
+
+
+    var hex = hexColor.replace('#', ''); // NOTE: 6자리일 경우 알파 값은 사용자가 제공한 alpha 값으로 설정
+
+    if (hex.length === 6) {
+      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, ")");
+    }
+
+    throw new Error('Invalid hex color format');
+  };
+
   var KonvaMarkerContext = React.createContext(null);
   var KonvaMarkerProvider = function (_a) {
     var children = _a.children;
@@ -832,7 +1012,9 @@
       var clickedOffset = controller.positionToOffset(event.param.position); // zIndex 순서대로 순회 (높은 것부터)
 
       for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
-        var component = _b[_i];
+        var component = _b[_i]; // 🚫 상호작용이 비활성화된 컴포넌트는 스킵
+
+        if (component.isInteractionDisabled()) continue;
         var data = component.findData(clickedOffset);
 
         if (data) {
@@ -860,7 +1042,9 @@
       var newHoveredData = null;
 
       for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
-        var component = _b[_i];
+        var component = _b[_i]; // 🚫 상호작용이 비활성화된 컴포넌트는 스킵
+
+        if (component.isInteractionDisabled()) continue;
         var data = component.findData(mouseOffset);
 
         if (data) {
@@ -932,6 +1116,344 @@
       value: contextValue
     }, children);
   };
+  var useKonvaMarkerContext = function () {
+    var context = React.useContext(KonvaMarkerContext);
+    return context;
+  };
+
+  // ============================================================================
+  // 성능 최적화 상수 (30,000개 마커/폴리곤 기준 최적화)
+  // ============================================================================
+
+  /**
+   * 공간 인덱스 그리드 셀 크기 (px)
+   *
+   * 최적값 계산:
+   * - 목표: 클릭 시 셀당 10~30개 항목만 체크 (빠른 Hit Test)
+   * - 화면 크기: 1920×1080 기준
+   * - 30,000개 항목 → 50px 셀 크기 = 약 800개 셀 = 셀당 ~37개
+   *
+   * 성능 비교 (30,000개 기준):
+   * - 200px: 셀당 ~577개 → Hit Test O(577) ❌ 느림
+   * - 50px:  셀당 ~37개  → Hit Test O(37)  ✅ 15배 빠름!
+   *
+   * 트레이드오프:
+   * - 작을수록: Hit Test 빠름, 메모리 사용량 증가
+   * - 클수록: 메모리 효율적, Hit Test 느림
+   */
+  var SPATIAL_GRID_CELL_SIZE = 50;
+  /**
+   * 뷰포트 컬링 여유 공간 (px)
+   *
+   * 화면 밖 100px까지 렌더링하여 스크롤 시 부드러운 전환
+   * 30,000개 중 실제 렌더링: 화면에 보이는 1,000~3,000개만
+   */
+
+  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() 호출되므로 메모리 누적 없음
+   */
+
+  var DEFAULT_MAX_CACHE_SIZE = 30000;
+  /**
+   * LRU (Least Recently Used) Cache
+   * 메모리 제한을 위한 캐시 구현 (최적화 버전)
+   *
+   * 개선 사항:
+   * 1. get() 성능 향상: 접근 빈도 추적 없이 단순 조회만 수행 (delete+set 제거)
+   * 2. set() 버그 수정: 기존 키 업데이트 시 maxSize 체크 로직 개선
+   * 3. 메모리 효율: 단순 FIFO 캐시로 동작하여 오버헤드 최소화
+   */
+
+  var LRUCache =
+  /** @class */
+  function () {
+    function LRUCache(maxSize) {
+      if (maxSize === void 0) {
+        maxSize = 10000;
+      }
+
+      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. 로직 명확화: 기존 항목/신규 항목 분리 처리
+     */
+
+
+    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;
+
+          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);
+    };
+
+    return LRUCache;
+  }();
+  /**
+   * Spatial Hash Grid (공간 해시 그리드)
+   * 공간 인덱싱을 위한 그리드 기반 자료구조 (개선 버전)
+   *
+   * 개선 사항:
+   * 1. 중복 삽입 방지: 같은 항목을 여러 번 insert 해도 안전
+   * 2. 메모리 누수 방지: 기존 항목 자동 제거
+   * 3. 성능 최적화: 불필요한 배열 생성 최소화
+   *
+   * 사용 사례:
+   * - 빠른 Hit Test (마우스 클릭 시 어떤 마커/폴리곤인지 찾기)
+   * - 30,000개 항목 → 클릭 위치 주변 ~10개만 체크 (3,000배 빠름)
+   */
+
+  var SpatialHashGrid =
+  /** @class */
+  function () {
+    function SpatialHashGrid(cellSize) {
+      if (cellSize === void 0) {
+        cellSize = 200;
+      }
+
+      this.cellSize = cellSize;
+      this.grid = new Map();
+      this.itemToCells = new Map();
+    }
+    /**
+     * 셀 키 생성 (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 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);
+
+      for (var x = startCellX; x <= endCellX; x++) {
+        for (var y = startCellY; y <= endCellY; y++) {
+          cells.push("".concat(x, ",").concat(y));
+        }
+      }
+
+      return cells;
+    };
+    /**
+     * 항목 추가 (바운딩 박스 기반)
+     *
+     * 개선 사항:
+     * - 중복 삽입 방지: 기존 항목이 있으면 먼저 제거 후 재삽입
+     * - 메모리 누수 방지: 이전 셀 참조 완전 제거
+     */
+
+
+    SpatialHashGrid.prototype.insert = function (item, minX, minY, maxX, maxY) {
+      // 1. 기존 항목 제거 (중복 방지)
+      this.remove(item); // 2. 새 위치에 삽입
+
+      var cells = this.getCellsForBounds(minX, minY, maxX, maxY);
+      this.itemToCells.set(item, cells);
+
+      for (var _i = 0, cells_1 = cells; _i < cells_1.length; _i++) {
+        var cell = cells_1[_i];
+
+        if (!this.grid.has(cell)) {
+          this.grid.set(cell, []);
+        }
+
+        this.grid.get(cell).push(item);
+      }
+    };
+    /**
+     * 항목 제거
+     *
+     * 추가된 메서드: 메모리 누수 방지 및 업데이트 지원
+     */
+
+
+    SpatialHashGrid.prototype.remove = function (item) {
+      var prevCells = this.itemToCells.get(item);
+      if (!prevCells) return; // 각 셀에서 항목 제거
+
+      for (var _i = 0, prevCells_1 = prevCells; _i < prevCells_1.length; _i++) {
+        var cell = prevCells_1[_i];
+        var cellItems = this.grid.get(cell);
+
+        if (cellItems) {
+          var index = cellItems.indexOf(item);
+
+          if (index !== -1) {
+            cellItems.splice(index, 1);
+          } // 빈 셀 정리 (메모리 효율)
+
+
+          if (cellItems.length === 0) {
+            this.grid.delete(cell);
+          }
+        }
+      }
+
+      this.itemToCells.delete(item);
+    };
+    /**
+     * 항목 위치 업데이트
+     *
+     * 추가된 메서드: remove + insert의 편의 함수
+     */
+
+
+    SpatialHashGrid.prototype.update = function (item, minX, minY, maxX, maxY) {
+      this.insert(item, minX, minY, maxX, maxY);
+    };
+    /**
+     * 점 주변의 항목 조회 (1개 셀만)
+     *
+     * 성능: O(해당 셀의 항목 수) - 보통 ~10개
+     */
+
+
+    SpatialHashGrid.prototype.queryPoint = function (x, y) {
+      var cellKey = this.getCellKey(x, y);
+      var items = this.grid.get(cellKey); // 빈 배열 재사용 (메모리 할당 최소화)
+
+      return items || [];
+    };
+    /**
+     * 영역 내 항목 조회
+     *
+     * 성능: O(셀 개수 × 셀당 평균 항목 수)
+     * Set으로 중복 제거 보장
+     */
+
+
+    SpatialHashGrid.prototype.queryBounds = function (minX, minY, maxX, maxY) {
+      var cells = this.getCellsForBounds(minX, minY, maxX, maxY);
+      var results = new Set();
+
+      for (var _i = 0, cells_2 = cells; _i < cells_2.length; _i++) {
+        var cell = cells_2[_i];
+        var items = this.grid.get(cell);
+
+        if (items) {
+          for (var _a = 0, items_1 = items; _a < items_1.length; _a++) {
+            var item = items_1[_a];
+            results.add(item);
+          }
+        }
+      }
+
+      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 () {
+      var totalCellItems = 0;
+      this.grid.forEach(function (items) {
+        totalCellItems += items.length;
+      });
+      return {
+        totalCells: this.grid.size,
+        totalItems: this.itemToCells.size,
+        avgItemsPerCell: this.grid.size > 0 ? totalCellItems / this.grid.size : 0
+      };
+    };
+
+    return SpatialHashGrid;
+  }();
 
   var cn$3 = classNames__default["default"].bind(styles$1);
   function MintMapCore(_a) {
@@ -2253,7 +2775,7 @@
     var onMouseOverHandler = function (e) {
       var _a;
 
-      var marker = markerRef.current; //console.log('onMouseOverHandler', marker);
+      var marker = markerRef.current;
 
       if (marker) {
         var mouseOverHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseover');
@@ -2266,6 +2788,25 @@
 
         next && topOnHover && controller.markerToTheTop(marker);
       }
+    }; // 20251014 | 장한별 | mouseleave 이벤트 추가, 마우스가 마커 위에서 떠날 때 원래 zindex 를 복구하기 위함
+
+
+    var onMouseLeaveHandler = function (e) {
+      var _a;
+
+      var marker = markerRef.current;
+
+      if (marker) {
+        var mouseOutHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseout');
+        var next = true;
+
+        if (mouseOutHandler) {
+          var hasNext = mouseOutHandler(e);
+          hasNext !== undefined && (next = hasNext);
+        }
+
+        next && topOnHover && controller.restoreMarkerZIndex(marker);
+      }
     }; //create object
 
 
@@ -2283,10 +2824,12 @@
       }); //드래그 여부 초기화를 먼저 수행하기 위해 capture : true 처리
 
       divElement.addEventListener('mouseover', onMouseOverHandler);
+      divElement.addEventListener('mouseleave', onMouseLeaveHandler);
       return function () {
         divElement.removeEventListener('click', onClickHandler);
         divElement.removeEventListener('mousedown', onMousedownHandler);
         divElement.removeEventListener('mouseover', onMouseOverHandler);
+        divElement.removeEventListener('mouseleave', onMouseLeaveHandler);
 
         if (markerRef.current) {
           controller.clearDrawable(markerRef.current);
@@ -4852,15 +5395,1341 @@
     }))));
   }
 
-  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"};
-  styleInject__default["default"](css_248z);
-
-  var cn$1 = classNames__default["default"].bind(styles);
   /**
-   * Mint Map 컴포넌트
+   * 폴리곤 렌더링 유틸리티
    *
-   * @param {MapControlWrapperProps} MapControlWrapperProps
+   * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
+   */
+
+  /**
+   * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
+   */
+  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];
+
+      if (isDonutPolygon) {
+        ctx.beginPath(); // 1. 외부 폴리곤 그리기
+
+        if (multiPolygon[0] && multiPolygon[0].length > 0) {
+          ctx.moveTo(multiPolygon[0][0][0], multiPolygon[0][0][1]);
+
+          for (var i = 1; i < multiPolygon[0].length; i++) {
+            ctx.lineTo(multiPolygon[0][i][0], multiPolygon[0][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 렌더링 함수
+   *
+   * @param baseFillColor 기본 폴리곤 채우기 색상
+   * @param baseStrokeColor 기본 폴리곤 테두리 색상
+   * @param baseLineWidth 기본 폴리곤 테두리 두께
+   * @returns Base Layer 렌더링 함수
+   *
+   * @example
+   * 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;
+        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 렌더링 함수
+   *
+   * @param selectedFillColor 선택된 폴리곤 채우기 색상
+   * @param selectedStrokeColor 선택된 폴리곤 테두리 색상
+   * @param selectedLineWidth 선택된 폴리곤 테두리 두께
+   * @param activeFillColor 마지막 선택된 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
+   * @param activeStrokeColor 마지막 선택된 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
+   * @param activeLineWidth 마지막 선택된 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
+   * @param hoveredFillColor Hover 시 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
+   * @param hoveredStrokeColor Hover 시 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
+   * @param hoveredLineWidth Hover 시 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
+   * @returns Event Layer 렌더링 함수
+   *
+   * @example
+   * const renderEvent = renderPolygonEvent(
+   *   'rgba(255, 193, 7, 0.7)',
+   *   'rgba(255, 152, 0, 1)',
+   *   4,
+   *   'rgba(255, 0, 0, 0.8)',
+   *   undefined,
+   *   undefined,
+   *   'rgba(100, 150, 255, 0.8)'
+   * );
+   */
+
+  var renderPolygonEvent = function (selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth) {
+    // 기본값 설정 (selected 기준)
+    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; // 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 === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) || (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) === item.id) 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) && (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) !== selectedItem.id) {
+        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;
+        var isSelected = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(function (item) {
+          return item.id === hoveredItem.id;
+        });
+        drawPolygon({
+          ctx: ctx,
+          polygonOffsets: polygonOffsets,
+          isDonutPolygon: hoveredItem.isDonutPolygon || false,
+          fillColor: isSelected ? _activeFillColor : _hoveredFillColor,
+          strokeColor: isSelected ? _activeStrokeColor : _hoveredStrokeColor,
+          lineWidth: isSelected ? _activeLineWidth : _hoveredLineWidth
+        });
+      }
+    };
+  };
+
+  // 메인 컴포넌트
+  // ============================================================================
+
+  /**
+   * Konva 기반 고성능 마커/폴리곤 렌더링 컴포넌트
+   *
+   * 특징:
+   * - Base/Event 레이어 분리로 성능 최적화
+   * - LRU 캐시로 좌표 변환 결과 캐싱
+   * - Spatial Hash Grid로 빠른 Hit Test
+   * - Viewport Culling으로 보이는 영역만 렌더링
+   *
+   * @template T 마커 데이터의 추가 속성 타입
+   */
+
+  var WoongCanvasLayerComponent = function (props) {
+    var markers = props.markers,
+        dataType = props.dataType,
+        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 ? true : _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,
+        options = tslib.__rest(props, ["markers", "dataType", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // --------------------------------------------------------------------------
+    // Hooks & Context
+    // --------------------------------------------------------------------------
+
+
+    var controller = useMintMapController();
+    var context = useKonvaMarkerContext();
+    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 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 상태 관리
+    // --------------------------------------------------------------------------
+
+    /** 상호작용 비활성화 상태 (Ref로 관리하여 클로저 문제 해결) */
+
+    var disableInteractionRef = React.useRef(disableInteraction);
+    /** 현재 Hover 중인 항목 */
+
+    var hoveredItemRef = React.useRef(null);
+    /** 외부에서 전달된 선택 항목 (Ref로 관리하여 클로저 문제 해결) */
+
+    var selectedItemRef = React.useRef(externalSelectedItem);
+    /**
+     * 선택된 항목의 ID Set
+     *
+     * 용도:
+     * 1. onClick 콜백에 전달 - onClick(data, selectedIdsRef.current)
+     * 2. 선택 여부 빠른 체크 - selectedIdsRef.current.has(id)
+     * 3. 메모리 효율 - ID만 저장 (작음)
+     *
+     * selectedItemsMapRef와 차이:
+     * - selectedIdsRef: ID만 저장 { "id1", "id2" }
+     * - selectedItemsMapRef: 전체 객체 저장 { id1: {...}, id2: {...} }
+     *
+     * 둘 다 필요: ID만 필요한 곳은 이것, 전체 데이터 필요한 곳은 Map
+     */
+
+    var selectedIdsRef = React.useRef(new Set());
+    /**
+     * 선택된 항목의 실제 데이터 Map (핵심 성능 최적화!)
+     *
+     * 목적: doRenderEvent에서 filter() 순회 제거
+     * - 이전: markersRef.current.filter() → O(전체 마커 수)
+     * - 현재: Map.values() → O(선택된 항목 수)
+     *
+     * 성능 개선: 10,000개 중 1개 선택 시
+     * - 이전: 10,000번 체크
+     * - 현재: 1번 접근 (10,000배 빠름!)
+     */
+
+    var selectedItemsMapRef = React.useRef(new Map()); // --------------------------------------------------------------------------
+    // Drag Refs
+    // --------------------------------------------------------------------------
+
+    var draggingRef = React.useRef(false);
+    var prevCenterOffsetRef = React.useRef(null);
+    var accumTranslateRef = React.useRef({
+      x: 0,
+      y: 0
+    }); // --------------------------------------------------------------------------
+    // Performance Refs (캐싱 & 최적화)
+    // --------------------------------------------------------------------------
+
+    /** 좌표 변환 결과 LRU 캐시 */
+
+    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); // --------------------------------------------------------------------------
+    // 유틸리티 함수: 뷰포트 관리
+    // --------------------------------------------------------------------------
+
+    /**
+     * 현재 뷰포트 영역 계산
+     */
+
+    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 = function (item) {
+      if (!enableViewportCulling || !viewportRef.current) return true;
+      var viewport = viewportRef.current; // 캐시된 바운딩 박스 확인
+
+      var bbox = boundingBoxCacheRef.current.get(item.id);
+
+      if (!bbox) {
+        // 폴리곤인 경우
+        if (dataType === exports.CanvasDataType.POLYGON) {
+          var offsets = getOrComputePolygonOffsets(item);
+          if (!offsets) return false; // 바운딩 박스 계산 (최적화: 직접 비교)
+
+          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;
+              }
+            }
+          }
+
+          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 교차 체크
+
+
+      return !(bbox.maxX < viewport.minX || bbox.minX > viewport.maxX || bbox.maxY < viewport.minY || bbox.minY > viewport.maxY);
+    }; // --------------------------------------------------------------------------
+    // 유틸리티 함수: 좌표 변환 캐싱
+    // --------------------------------------------------------------------------
+
+    /**
+     * 폴리곤 좌표 변환 결과를 캐시하고 반환
+     * @param polygonData 폴리곤 데이터
+     * @returns 변환된 좌표 배열 또는 null
+     */
+
+
+    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);
+      }
+
+      return result;
+    };
+    /**
+     * 마커 좌표 변환 결과를 캐시하고 반환
+     * @param markerData 마커 데이터
+     * @returns 변환된 좌표 또는 null
+     */
+
+
+    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);
+      }
+
+      return result;
+    }; // --------------------------------------------------------------------------
+    // 유틸리티 함수: 공간 인덱싱
+    // --------------------------------------------------------------------------
+
+    /**
+     * 공간 인덱스 빌드 (빠른 Hit Test를 위한 자료구조)
+     */
+
+
+    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];
+
+        if (dataType === exports.CanvasDataType.POLYGON) {
+          // 폴리곤: 바운딩 박스 계산 (최적화: 직접 비교)
+          var offsets = getOrComputePolygonOffsets(item);
+
+          if (offsets) {
+            var minX = Infinity,
+                minY = Infinity,
+                maxX = -Infinity,
+                maxY = -Infinity;
+
+            for (var _a = 0, offsets_2 = offsets; _a < offsets_2.length; _a++) {
+              var multiPolygon = offsets_2[_a];
+
+              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;
+                }
+              }
+            }
+
+            spatial.insert(item, minX, minY, maxX, maxY);
+          }
+        } 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);
+          }
+        }
+      }
+    }; // --------------------------------------------------------------------------
+    // 렌더링 함수 결정 (dataType에 따라)
+    // --------------------------------------------------------------------------
+
+    /**
+     * 외부 렌더링 함수에 전달할 유틸리티 객체
+     */
+
+
+    var renderUtils = {
+      getOrComputePolygonOffsets: getOrComputePolygonOffsets,
+      getOrComputeMarkerOffset: getOrComputeMarkerOffset
+    };
+    /** Base Layer에서 사용할 빈 Set (재사용) */
+
+    React.useRef(new Set());
+    /**
+     * 실제 사용할 렌더링 함수 결정
+     * - MARKER: 외부에서 전달받은 renderBase 사용 (필수)
+     * - POLYGON: renderer.ts의 팩토리 함수로 생성 (props 기반)
+     */
+
+    var renderBase = dataType === exports.CanvasDataType.MARKER ? props.renderBase : renderPolygonBase(props.baseFillColor, props.baseStrokeColor, props.baseLineWidth);
+    var renderAnimation = dataType === exports.CanvasDataType.MARKER ? props.renderAnimation : undefined;
+    var renderEvent = dataType === exports.CanvasDataType.MARKER ? props.renderEvent : function () {
+      var polygonProps = props;
+      return renderPolygonEvent(polygonProps.selectedFillColor, polygonProps.selectedStrokeColor, polygonProps.selectedLineWidth, polygonProps.activeFillColor, polygonProps.activeStrokeColor, polygonProps.activeLineWidth, polygonProps.hoveredFillColor, polygonProps.hoveredStrokeColor, polygonProps.hoveredLineWidth);
+    }();
+    /**
+     * Base 레이어 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
+     *
+     * 🔥 최적화:
+     * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
+     * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
+     * 3. 클로저로 최신 데이터 참조
+     */
+
+    var doRenderBase = function () {
+      var layer = baseLayerRef.current;
+      if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
+
+      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 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는 이미 설정되어 있으므로 다시 그리기만
+
+
+      layer.batchDraw();
+    };
+    /**
+     * Animation 레이어 렌더링 (선택된 마커 애니메이션)
+     *
+     * 🔥 최적화: sceneFunc 내부에서 최신 items 참조
+     * - 선택 변경 시에만 재생성
+     * - 지도 이동 시에는 기존 Animation 계속 실행
+     */
+
+
+    var doRenderAnimation = function () {
+      if (!renderAnimation) return;
+      var layer = animationLayerRef.current;
+      if (!layer) return;
+      renderAnimation({
+        layer: layer,
+        selectedIds: selectedIdsRef.current,
+        items: markersRef.current,
+        utils: renderUtils
+      });
+    };
+    /**
+     * Event 레이어 렌더링 (hover + 선택 상태 표시)
+     *
+     * 🔥 최적화:
+     * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
+     * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
+     * 3. 클로저로 최신 데이터 참조
+     */
+
+
+    var doRenderEvent = function () {
+      var layer = eventLayerRef.current;
+      if (!layer) return;
+
+      if (!onClick && !onMouseOver && !onMouseOut) {
+        layer.destroyChildren();
+        layer.batchDraw();
+        return;
+      }
+
+      if (!renderEvent) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
+
+      var shape = layer.findOne('.event-render-shape');
+
+      if (!shape) {
+        // 최초 생성 (한 번만 실행됨)
+        // sceneFunc도 여기서 한 번만 설정 (클로저로 최신 데이터 참조)
+        shape = new Konva__default["default"].Shape({
+          name: 'event-render-shape',
+          sceneFunc: function (context, shape) {
+            var ctx = context; // 클로저로 최신 ref 값 참조
+
+            var selectedItems = Array.from(selectedItemsMapRef.current.values());
+            renderEvent({
+              ctx: ctx,
+              hoveredItem: hoveredItemRef.current,
+              utils: renderUtils,
+              selectedItems: selectedItems,
+              selectedItem: selectedItemRef.current
+            });
+          },
+          perfectDrawEnabled: false,
+          listening: false,
+          hitStrokeWidth: 0
+        });
+        layer.add(shape);
+      } // sceneFunc는 이미 설정되어 있으므로 다시 그리기만
+
+
+      layer.batchDraw();
+    };
+    /**
+     * 전체 즉시 렌더링 (IDLE 시 호출)
+     */
+
+
+    var renderAllImmediate = function () {
+      updateViewport();
+      buildSpatialIndex();
+      doRenderBase();
+      doRenderAnimation();
+      doRenderEvent();
+    }; // --------------------------------------------------------------------------
+    // 이벤트 핸들러: 지도 이벤트
+    // --------------------------------------------------------------------------
+
+    /**
+     * 지도 이동/줌 완료 시 처리
+     */
+
+
+    var handleIdle = function () {
+      prevCenterOffsetRef.current = null;
+      accumTranslateRef.current = {
+        x: 0,
+        y: 0
+      }; // 2. 캐시 정리 (지도 이동/줌으로 좌표 변환 결과가 바뀜)
+
+      offsetCacheRef.current.clear();
+      boundingBoxCacheRef.current.clear(); // 3. 마커 위치 업데이트
+
+      var bounds = controller.getCurrBounds();
+
+      var markerOptions = tslib.__assign({
+        position: bounds.nw
+      }, options);
+
+      markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // 4. transform 제거 전에 새 데이터로 즉시 렌더링 (겹침 방지)
+
+      if (containerRef.current) {
+        containerRef.current.style.transform = '';
+        containerRef.current.style.visibility = '';
+      } // 5. 새 위치에서 렌더링
+
+
+      renderAllImmediate();
+    };
+    /**
+     * 줌 시작 시 처리 (일시적으로 숨김)
+     */
+
+
+    var handleZoomStart = function () {
+      if (containerRef.current) {
+        containerRef.current.style.visibility = 'hidden';
+      }
+    };
+    /**
+     * 줌 종료 시 처리 (다시 표시)
+     */
+
+
+    var handleZoomEnd = function () {
+      if (containerRef.current) {
+        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;
+      accumTranslateRef.current = {
+        x: accumTranslateRef.current.x + dx,
+        y: accumTranslateRef.current.y + dy
+      };
+      prevCenterOffsetRef.current = {
+        x: curr.x,
+        y: curr.y
+      };
+
+      if (containerRef.current) {
+        containerRef.current.style.transform = "translate(".concat(accumTranslateRef.current.x, "px, ").concat(accumTranslateRef.current.y, "px)");
+      }
+    }; // --------------------------------------------------------------------------
+    // Hit Test & 상태 관리
+    // --------------------------------------------------------------------------
+
+    /**
+     * 특정 좌표의 마커/폴리곤 데이터 찾기 (Spatial Index 사용)
+     *
+     * topOnHover가 true일 때:
+     * - 현재 hover된 항목을 최우선으로 체크
+     * - 시각적으로 최상단에 있는 항목이 hit test에서도 우선됨
+     *
+     * @param offset 검사할 좌표
+     * @returns 찾은 마커/폴리곤 데이터 또는 null
+     */
+
+
+    var 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];
+
+          if (isPointInMarkerData(offset, item, getOrComputeMarkerOffset)) {
+            return item;
+          }
+        }
+      } else {
+        // 폴리곤 체크
+        for (var i = candidates.length - 1; i >= 0; i--) {
+          var item = candidates[i];
+
+          if (isPointInPolygonData(offset, item, getOrComputePolygonOffsets)) {
+            return item;
+          }
+        }
+      }
+
+      return null;
+    };
+    /**
+     * Hover 상태 설정 및 Event 레이어 렌더링
+     *
+     * @param data hover된 마커/폴리곤 데이터 또는 null
+     *
+     * 최적화: RAF 제거하여 즉시 렌더링 (16ms 지연 제거)
+     * topOnHover가 true일 때는 Base 레이어도 다시 그려서 z-order 변경
+     */
+
+
+    var setHovered = function (data) {
+      if (!onMouseOver && !onMouseOut) return;
+      hoveredItemRef.current = data;
+
+      if (draggingRef.current) {
+        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) {
+      if (!onClick) return; // 1. 선택 상태 업데이트
+
+      if (enableMultiSelect) {
+        // 다중 선택: Set과 Map 동시 업데이트
+        var newSelected = new Set(selectedIdsRef.current);
+
+        if (newSelected.has(data.id)) {
+          newSelected.delete(data.id);
+          selectedItemsMapRef.current.delete(data.id);
+        } else {
+          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;
+      }
+
+      if (!!renderAnimation) {
+        // 2. Base Layer 재렌더링 (단일 Shape로 최적화되어 빠름)
+        doRenderBase(); // 3. Animation Layer 렌더링 (선택된 마커 애니메이션)
+
+        doRenderAnimation();
+      } // 4. Event Layer 렌더링 (hover 처리)
+
+
+      doRenderEvent();
+    }; // --------------------------------------------------------------------------
+    // 이벤트 핸들러: UI 이벤트
+    // --------------------------------------------------------------------------
+
+    /**
+     * 클릭 이벤트 처리
+     */
+
+
+    var handleClick = function (event) {
+      var _a;
+
+      if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
+
+      if (!onClick) return;
+      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);
+          onClick(data, selectedIdsRef.current);
+        }
+      } catch (error) {
+        console.error('[WoongKonvaMarker] handleClick error:', error);
+      }
+    };
+    /**
+     * 마우스 이동 이벤트 처리 (hover 감지)
+     */
+
+
+    var handleMouseMove = function (event) {
+      var _a;
+
+      if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
+
+      if (!onMouseOver && !onMouseOut) return;
+      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
+     */
+
+
+    var handleMouseLeave = function () {
+      if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
+
+      if (!onMouseOver && !onMouseOut) return;
+      var prevHovered = hoveredItemRef.current;
+
+      if (prevHovered) {
+        hoveredItemRef.current = null;
+        controller.setMapCursor('grab');
+        doRenderEvent();
+
+        if (onMouseOut) {
+          onMouseOut(prevHovered);
+        }
+      }
+    }; // --------------------------------------------------------------------------
+    // Lifecycle: DOM 초기화
+    // --------------------------------------------------------------------------
+
+
+    React.useEffect(function () {
+      divElement.style.width = 'fit-content';
+      return function () {
+        if (markerRef.current) {
+          controller.clearDrawable(markerRef.current);
+          markerRef.current = undefined;
+        }
+      };
+    }, []); // --------------------------------------------------------------------------
+    // Lifecycle: 마커 생성/업데이트
+    // --------------------------------------------------------------------------
+
+    React.useEffect(function () {
+      if (options) {
+        var bounds = controller.getCurrBounds();
+
+        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 (divElement.parentElement) {
+            divElement.parentElement.style.pointerEvents = 'none';
+          }
+
+          if (options.zIndex !== undefined) {
+            controller.setMarkerZIndex(markerRef.current, options.zIndex);
+          }
+        }
+      }
+    }, [options]); // --------------------------------------------------------------------------
+    // Lifecycle: Konva 초기화 및 이벤트 리스너 등록
+    // --------------------------------------------------------------------------
+
+    React.useEffect(function () {
+      var mapDiv = controller.mapDivElement;
+      var stage = new Konva__default["default"].Stage({
+        container: containerRef.current,
+        width: mapDiv.offsetWidth,
+        height: mapDiv.offsetHeight
+      });
+      stageRef.current = stage; // 레이어 최적화 설정
+
+      var baseLayer = new Konva__default["default"].Layer({
+        listening: false // 이벤트 리스닝 비활성화로 성능 향상
+
+      });
+      var animationLayer = new Konva__default["default"].Layer({
+        listening: false
+      });
+      var eventLayer = new Konva__default["default"].Layer({
+        listening: false
+      });
+      baseLayerRef.current = baseLayer;
+      animationLayerRef.current = animationLayer;
+      eventLayerRef.current = eventLayer;
+      stage.add(baseLayer);
+
+      if (renderAnimation) {
+        stage.add(animationLayer);
+      }
+
+      stage.add(eventLayer); // 초기 뷰포트 설정
+
+      updateViewport(); // ResizeObserver (맵 크기 변경 감지)
+
+      var resizeRafId = null;
+      var resizeObserver = new ResizeObserver(function () {
+        // RAF로 다음 프레임에 한 번만 실행 (debounce 효과)
+        if (resizeRafId !== null) {
+          cancelAnimationFrame(resizeRafId);
+        }
+
+        resizeRafId = requestAnimationFrame(function () {
+          stage.width(mapDiv.offsetWidth);
+          stage.height(mapDiv.offsetHeight);
+          offsetCacheRef.current.clear();
+          boundingBoxCacheRef.current.clear();
+          updateViewport();
+          renderAllImmediate();
+          resizeRafId = null;
+        });
+      });
+      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); // 맵 컨테이너에 mouseleave 이벤트 추가
+
+      mapDiv.addEventListener('mouseleave', handleMouseLeave);
+      renderAllImmediate(); // Context 사용 시 컴포넌트 등록 (다중 인스턴스 관리)
+
+      var componentInstance = null;
+
+      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);
+      } // Cleanup 함수
+
+
+      return function () {
+        // RAF 정리
+        if (resizeRafId !== null) {
+          cancelAnimationFrame(resizeRafId);
+        } // 옵저버 정리
+
+
+        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); // Context 정리
+
+        if (context && componentInstance) {
+          context.unregisterComponent(componentInstance);
+        } // Konva 리소스 정리
+
+
+        baseLayer.destroyChildren();
+        animationLayer.destroyChildren();
+        eventLayer.destroyChildren();
+        stage.destroy(); // 캐시 정리
+
+        offsetCacheRef.current.clear();
+        boundingBoxCacheRef.current.clear();
+        spatialIndexRef.current.clear();
+      };
+    }, []); // 초기화는 한 번만
+    // --------------------------------------------------------------------------
+    // Lifecycle: disableInteraction 동기화
+    // --------------------------------------------------------------------------
+
+    React.useEffect(function () {
+      disableInteractionRef.current = disableInteraction;
+    }, [disableInteraction]); // --------------------------------------------------------------------------
+    // Lifecycle: 외부 selectedItems 동기화
+    // --------------------------------------------------------------------------
+
+    React.useEffect(function () {
+      if (!stageRef.current) return; // externalSelectedItems가 undefined면 외부 제어 안 함
+
+      if (externalSelectedItems === undefined) return; // 외부에서 전달된 selectedItems로 동기화
+
+      var newSelectedIds = new Set();
+      var newSelectedItemsMap = new Map();
+      externalSelectedItems.forEach(function (item) {
+        newSelectedIds.add(item.id);
+        newSelectedItemsMap.set(item.id, item);
+      });
+      selectedIdsRef.current = newSelectedIds;
+      selectedItemsMapRef.current = newSelectedItemsMap; // 렌더링
+
+      doRenderBase();
+      doRenderAnimation();
+      doRenderEvent();
+    }, [externalSelectedItems]); // 배열 자체를 dependency로 사용
+    // --------------------------------------------------------------------------
+    // Lifecycle: 외부 selectedItem 변경 시 Event Layer 리렌더링
+    // --------------------------------------------------------------------------
+
+    React.useEffect(function () {
+      if (!stageRef.current) return; // Ref 동기화
+
+      selectedItemRef.current = externalSelectedItem; // selectedItem이 변경되면 Event Layer만 다시 그림
+
+      doRenderEvent();
+    }, [externalSelectedItem]); // --------------------------------------------------------------------------
+    // Lifecycle: 마커 데이터 변경 시 렌더링
+    // --------------------------------------------------------------------------
+
+    React.useEffect(function () {
+      if (!stageRef.current) return; // markersRef 동기화
+
+      markersRef.current = markers; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
+
+      if (containerRef.current) {
+        containerRef.current.style.transform = '';
+      }
+
+      prevCenterOffsetRef.current = null;
+      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; // 즉시 렌더링
+
+      renderAllImmediate();
+    }, [markers]);
+    return reactDom.createPortal(React__default["default"].createElement("div", {
+      ref: containerRef,
+      style: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%'
+      }
+    }), divElement);
+  };
+  /**
+   * 🔥 React.memo 최적화: 마커 배열과 selectedItems 변경 체크
+   *
+   * 비교 전략:
+   * 1. markers 배열 비교
+   * 2. selectedItems 배열 비교 (외부 제어)
+   *
+   * 주의: JSON.stringify() 사용 금지! (매우 느림)
+   */
+
+
+  var WoongCanvasLayer = React__default["default"].memo(WoongCanvasLayerComponent, 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; // 변경됨 → 리렌더링
+    }
+
+    if (prevProps.selectedItem !== nextProps.selectedItem) {
+      return false; // 변경됨 → 리렌더링
+    }
+
+    if (prevProps.onClick !== nextProps.onClick) {
+      return false; // 변경됨 → 리렌더링
+    }
+
+    if (prevProps.onMouseOver !== nextProps.onMouseOver) {
+      return false; // 변경됨 → 리렌더링
+    }
+
+    if (prevProps.onMouseOut !== nextProps.onMouseOut) {
+      return false; // 변경됨 → 리렌더링
+    }
+
+    if (prevProps.disableInteraction !== nextProps.disableInteraction) {
+      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"};
+  styleInject__default["default"](css_248z);
+
+  var cn$1 = classNames__default["default"].bind(styles);
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
    *
    * @returns {JSX.Element} JSX
    */
@@ -5592,20 +7461,54 @@
       }
     };
 
-    NaverMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
+    NaverMintMapController.prototype.getCurrentZIndex = function (marker) {
       if (this.map && marker.element && marker.element instanceof HTMLElement) {
         var parent_1 = marker.element.parentElement;
 
-        if (parent_1) {
-          parent_1.style.zIndex = String(zIndex);
+        if (parent_1 && parent_1.style.zIndex) {
+          var zIndex = Number(parent_1.style.zIndex);
+          return isNaN(zIndex) ? undefined : zIndex;
+        }
+      }
+
+      return undefined;
+    };
+
+    NaverMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
+      if (this.map && marker.element && marker.element instanceof HTMLElement) {
+        var parent_2 = marker.element.parentElement;
+
+        if (parent_2) {
+          parent_2.style.zIndex = String(zIndex);
         }
       }
     };
 
     NaverMintMapController.prototype.markerToTheTop = function (marker) {
+      // 이미 최상위로 올라간 상태면 (원래 zIndex가 이미 저장됨) 중복 실행 방지
+      if (this.markerOriginalZIndex !== undefined) {
+        return;
+      }
+
+      var currentZIndex = this.getCurrentZIndex(marker); // undefined면 null로 저장 (원래 zIndex가 없었음을 표시)
+
+      this.markerOriginalZIndex = currentZIndex !== undefined ? currentZIndex : null;
       this.setMarkerZIndex(marker, this.getMaxZIndex(1));
     };
 
+    NaverMintMapController.prototype.restoreMarkerZIndex = function (marker) {
+      if (this.markerOriginalZIndex !== undefined) {
+        if (this.markerOriginalZIndex === null) {
+          // 원래 zIndex가 없었으면 제거 (또는 초기값 0으로)
+          this.setMarkerZIndex(marker, 0);
+        } else {
+          this.setMarkerZIndex(marker, this.markerOriginalZIndex);
+        }
+
+        this.markerOriginalZIndex = undefined;
+      }
+    };
+
     NaverMintMapController.prototype.clearDrawable = function (drawable) {
       var _a;
 
@@ -6360,6 +8263,10 @@
       }
     };
 
+    GoogleMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Google Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
+      // 이 기능은 Naver Maps에서만 사용 가능합니다.
+    };
+
     GoogleMintMapController.prototype.clearDrawable = function (drawable) {
       if (drawable && drawable.native) {
         if (drawable.native instanceof google.maps.Marker || drawable.native instanceof google.maps.Polygon || drawable.native instanceof google.maps.Polyline) {
@@ -7082,6 +8989,10 @@
       }
     };
 
+    KakaoMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Kakao Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
+      // 이 기능은 Naver Maps에서만 사용 가능합니다.
+    };
+
     KakaoMintMapController.prototype.clearDrawable = function (drawable) {
       var _this = this;
 
@@ -7647,9 +9558,13 @@
   exports.CanvasMarkerClaude = CanvasMarkerClaude;
   exports.CanvasMarkerHanquf = CanvasMarkerHanquf;
   exports.CircleMarker = CircleMarker;
+  exports.DEFAULT_CULLING_MARGIN = DEFAULT_CULLING_MARGIN;
+  exports.DEFAULT_MAX_CACHE_SIZE = DEFAULT_MAX_CACHE_SIZE;
   exports.Drawable = Drawable;
   exports.GeoCalulator = GeoCalulator;
   exports.GoogleMintMapController = GoogleMintMapController;
+  exports.KonvaMarkerProvider = KonvaMarkerProvider;
+  exports.LRUCache = LRUCache;
   exports.MapBuildingProjection = MapBuildingProjection;
   exports.MapCanvasMarkerWrapper = MapCanvasMarkerWrapper;
   exports.MapCanvasWrapper = MapCanvasWrapper;
@@ -7674,14 +9589,24 @@
   exports.PolygonMarker = PolygonMarker;
   exports.Polyline = Polyline;
   exports.Position = Position;
+  exports.SPATIAL_GRID_CELL_SIZE = SPATIAL_GRID_CELL_SIZE;
   exports.SVGCircle = SVGCircle;
   exports.SVGPolygon = SVGPolygon;
   exports.SVGRect = SVGRect;
   exports.Spacing = Spacing;
+  exports.SpatialHashGrid = SpatialHashGrid;
   exports.Status = Status;
+  exports.WoongCanvasLayer = WoongCanvasLayer;
+  exports.computeMarkerOffset = computeMarkerOffset;
+  exports.computePolygonOffsets = computePolygonOffsets;
   exports.getClusterInfo = getClusterInfo;
   exports.getMapOfType = getMapOfType;
+  exports.hexToRgba = hexToRgba;
+  exports.isPointInMarkerData = isPointInMarkerData;
+  exports.isPointInPolygon = isPointInPolygon;
+  exports.isPointInPolygonData = isPointInPolygonData;
   exports.log = log;
+  exports.useKonvaMarkerContext = useKonvaMarkerContext;
   exports.useMarkerMoving = useMarkerMoving;
   exports.useMintMapController = useMintMapController;
   exports.waiting = waiting;