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

package/dist/index.umd.js

@@ -653,6 +653,286 @@
   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);
 
+  var Drawable =
+  /** @class */
+  function () {
+    function Drawable() {}
+
+    return Drawable;
+  }();
+
+  var Marker =
+  /** @class */
+  function (_super) {
+    tslib.__extends(Marker, _super);
+    /**
+     * 지도에 표시할 마커정보
+     */
+
+
+    function Marker(options) {
+      var _this = _super.call(this) || this;
+
+      _this.options = options;
+      return _this;
+    }
+
+    return Marker;
+  }(Drawable);
+
+  var Polyline =
+  /** @class */
+  function (_super) {
+    tslib.__extends(Polyline, _super);
+    /**
+     * 지도에 표시할 폴리곤정보
+     */
+
+
+    function Polyline(options) {
+      var _this = _super.call(this) || this;
+
+      _this.options = options;
+      return _this;
+    }
+
+    return Polyline;
+  }(Drawable);
+
+  var Polygon =
+  /** @class */
+  function (_super) {
+    tslib.__extends(Polygon, _super);
+    /**
+     * 지도에 표시할 폴리곤정보
+     */
+
+
+    function Polygon(options) {
+      var _this = _super.call(this) || this;
+
+      _this.options = options;
+      return _this;
+    }
+    /**
+     * 폴리곤의 중점을 구한다.
+     */
+
+
+    Polygon.prototype.getCenter = function () {
+      if (Array.isArray(this.options.position) && this.options.position.length > 0) {
+        var paths = this.options.position.map(function (elem) {
+          return elem instanceof Position ? elem : new Position(elem[0], elem[1]);
+        });
+        return PolygonCalculator.getCenter(paths);
+      }
+
+      throw new Error('center 를 찾을 수 없습니다.');
+    };
+
+    return Polygon;
+  }(Drawable);
+
+  // export type MapEvent = 'bounds_changed'|'center_changed'|'idle'|'zoom_changed'|'zoomstart'
+  // export type MapUIEvent = 'click'|'dblclick'|''
+  var MapEvent =
+  /** @class */
+  function () {
+    function MapEvent() {
+      this.BOUNDS_CHANGED = 'bounds_changed';
+      this.CENTER_CHANGED = 'center_changed';
+      this.IDLE = 'idle';
+      this.ZOOM_CHANGED = 'zoom_changed';
+      this.ZOOMSTART = 'zoomstart';
+    }
+
+    MapEvent.prototype.get = function (eventName) {
+      var value = this[eventName];
+
+      if (typeof value === 'string') {
+        return value;
+      }
+    };
+
+    return MapEvent;
+  }();
+
+  var MapUIEvent =
+  /** @class */
+  function () {
+    function MapUIEvent() {
+      this.CLICK = 'click';
+      this.DBLCLICK = 'dblclick';
+      this.MOUSEDOWN = 'mousedown';
+      this.MOUSEUP = 'mouseup';
+      this.MOUSEOUT = 'mouseout';
+      this.MOUSEMOVE = 'mousemove';
+      this.MOUSEOVER = 'mouseover';
+      this.DRAG = 'drag';
+      this.DRAGSTART = 'dragstart';
+      this.DRAGEND = 'dragend';
+      this.RIGHTCLICK = 'rightclick';
+      this.CONTEXTMENU = 'contextmenu';
+    }
+
+    MapUIEvent.prototype.get = function (eventName) {
+      var value = this[eventName];
+
+      if (typeof value === 'string') {
+        return value;
+      }
+    };
+
+    return MapUIEvent;
+  }();
+
+  var KonvaMarkerContext = React.createContext(null);
+  var KonvaMarkerProvider = function (_a) {
+    var children = _a.children;
+    var controller = useMintMapController(); // Refs
+
+    var componentsRef = React.useRef([]);
+    var currentHoveredRef = React.useRef(null);
+    var currentHoveredDataRef = React.useRef(null);
+    var draggingRef = React.useRef(false);
+    /**
+     * 컴포넌트 등록 (zIndex 내림차순 정렬)
+     * 높은 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;
+      }
+
+      componentsRef.current = componentsRef.current.filter(function (c) {
+        return c !== instance;
+      });
+    }, []);
+    /**
+     * 전역 클릭 핸들러 (zIndex 우선순위)
+     */
+
+    var handleGlobalClick = React.useCallback(function (event) {
+      var _a;
+
+      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 순서대로 순회 (높은 것부터)
+
+      for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
+        var component = _b[_i];
+        var data = component.findData(clickedOffset);
+
+        if (data) {
+          component.handleLocalClick(data);
+
+          if (component.onClick) {
+            component.onClick(data, component.getSelectedIds());
+          }
+
+          return; // 첫 번째 히트만 처리
+        }
+      }
+    }, [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 newHoveredComponent = null;
+      var newHoveredData = null;
+
+      for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
+        var component = _b[_i];
+        var data = component.findData(mouseOffset);
+
+        if (data) {
+          newHoveredComponent = component;
+          newHoveredData = data;
+          break; // 첫 번째 히트만 처리
+        }
+      } // Hover 상태 변경 감지 (최적화: 별도 ref로 직접 비교)
+
+
+      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 (newHoveredComponent && newHoveredData) {
+          newHoveredComponent.setHovered(newHoveredData);
+
+          if (newHoveredComponent.onMouseOver) {
+            newHoveredComponent.onMouseOver(newHoveredData);
+          }
+        }
+
+        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);
+      controller.addEventListener('ZOOMSTART', handleZoomStart);
+      controller.addEventListener('IDLE', handleIdle);
+      return function () {
+        controller.removeEventListener('CLICK', handleGlobalClick);
+        controller.removeEventListener('MOUSEMOVE', handleGlobalMouseMove);
+        controller.removeEventListener('ZOOMSTART', handleZoomStart);
+        controller.removeEventListener('IDLE', handleIdle);
+      };
+    }, [controller, handleGlobalClick, handleGlobalMouseMove, handleZoomStart, handleIdle]); // Context value 메모이제이션
+
+    var contextValue = React.useMemo(function () {
+      return {
+        registerComponent: registerComponent,
+        unregisterComponent: unregisterComponent
+      };
+    }, [registerComponent, unregisterComponent]);
+    return React__default["default"].createElement(KonvaMarkerContext.Provider, {
+      value: contextValue
+    }, children);
+  };
+
   var cn$3 = classNames__default["default"].bind(styles$1);
   function MintMapCore(_a) {
     var _this = this;
@@ -735,7 +1015,7 @@
     }, [center]);
     return React__default["default"].createElement("div", {
       className: cn$3('mint-map-root')
-    }, mapInitialized && children, React__default["default"].createElement("div", {
+    }, mapInitialized && React__default["default"].createElement(KonvaMarkerProvider, null, children), React__default["default"].createElement("div", {
       className: cn$3('mint-map-container'),
       style: {
         visibility: visible ? 'inherit' : 'hidden'
@@ -1432,59 +1712,6 @@
     return MapZoomInfo;
   }();
 
-  // export type MapEvent = 'bounds_changed'|'center_changed'|'idle'|'zoom_changed'|'zoomstart'
-  // export type MapUIEvent = 'click'|'dblclick'|''
-  var MapEvent =
-  /** @class */
-  function () {
-    function MapEvent() {
-      this.BOUNDS_CHANGED = 'bounds_changed';
-      this.CENTER_CHANGED = 'center_changed';
-      this.IDLE = 'idle';
-      this.ZOOM_CHANGED = 'zoom_changed';
-      this.ZOOMSTART = 'zoomstart';
-    }
-
-    MapEvent.prototype.get = function (eventName) {
-      var value = this[eventName];
-
-      if (typeof value === 'string') {
-        return value;
-      }
-    };
-
-    return MapEvent;
-  }();
-
-  var MapUIEvent =
-  /** @class */
-  function () {
-    function MapUIEvent() {
-      this.CLICK = 'click';
-      this.DBLCLICK = 'dblclick';
-      this.MOUSEDOWN = 'mousedown';
-      this.MOUSEUP = 'mouseup';
-      this.MOUSEOUT = 'mouseout';
-      this.MOUSEMOVE = 'mousemove';
-      this.MOUSEOVER = 'mouseover';
-      this.DRAG = 'drag';
-      this.DRAGSTART = 'dragstart';
-      this.DRAGEND = 'dragend';
-      this.RIGHTCLICK = 'rightclick';
-      this.CONTEXTMENU = 'contextmenu';
-    }
-
-    MapUIEvent.prototype.get = function (eventName) {
-      var value = this[eventName];
-
-      if (typeof value === 'string') {
-        return value;
-      }
-    };
-
-    return MapUIEvent;
-  }();
-
   var MintMapCanvasRenderer =
   /** @class */
   function () {
@@ -1538,86 +1765,6 @@
     }, children));
   }
 
-  var Drawable =
-  /** @class */
-  function () {
-    function Drawable() {}
-
-    return Drawable;
-  }();
-
-  var Marker =
-  /** @class */
-  function (_super) {
-    tslib.__extends(Marker, _super);
-    /**
-     * 지도에 표시할 마커정보
-     */
-
-
-    function Marker(options) {
-      var _this = _super.call(this) || this;
-
-      _this.options = options;
-      return _this;
-    }
-
-    return Marker;
-  }(Drawable);
-
-  var Polyline =
-  /** @class */
-  function (_super) {
-    tslib.__extends(Polyline, _super);
-    /**
-     * 지도에 표시할 폴리곤정보
-     */
-
-
-    function Polyline(options) {
-      var _this = _super.call(this) || this;
-
-      _this.options = options;
-      return _this;
-    }
-
-    return Polyline;
-  }(Drawable);
-
-  var Polygon =
-  /** @class */
-  function (_super) {
-    tslib.__extends(Polygon, _super);
-    /**
-     * 지도에 표시할 폴리곤정보
-     */
-
-
-    function Polygon(options) {
-      var _this = _super.call(this) || this;
-
-      _this.options = options;
-      return _this;
-    }
-    /**
-     * 폴리곤의 중점을 구한다.
-     */
-
-
-    Polygon.prototype.getCenter = function () {
-      if (Array.isArray(this.options.position) && this.options.position.length > 0) {
-        var paths = this.options.position.map(function (elem) {
-          return elem instanceof Position ? elem : new Position(elem[0], elem[1]);
-        });
-        return PolygonCalculator.getCenter(paths);
-      }
-
-      throw new Error('center 를 찾을 수 없습니다.');
-    };
-
-    return Polygon;
-  }(Drawable);
-
   function SVGPolygon(_a) {
     var path = _a.path,
         _b = _a.innerPath,
@@ -2680,6 +2827,1585 @@
     })), divElement);
   }
 
+  // Lightweight Geohash encoder and neighbor utilities
+  var BASE32 = '0123456789bcdefghjkmnpqrstuvwxyz';
+  var NEIGHBORS = {
+    n: {
+      even: {
+        border: 'prxz',
+        neighbor: 'bc01fg45238967deuvhjyznpkmstqrwx'
+      },
+      odd: {
+        border: 'bcfguvyz',
+        neighbor: 'p0r21436x8zb9dcf5h7kjnmqesgutwvy'
+      }
+    },
+    s: {
+      even: {
+        border: '028b',
+        neighbor: '238967debc01fg45kmstqrwxuvhjyznp'
+      },
+      odd: {
+        border: '0145hjnp',
+        neighbor: '14365h7k9dcfesgujnmqp0r2twvyx8zb'
+      }
+    },
+    e: {
+      even: {
+        border: 'bcfguvyz',
+        neighbor: '14365h7k9dcfesgujnmqp0r2twvyx8zb'
+      },
+      odd: {
+        border: 'prxz',
+        neighbor: 'bc01fg45238967deuvhjyznpkmstqrwx'
+      }
+    },
+    w: {
+      even: {
+        border: '0145hjnp',
+        neighbor: '238967debc01fg45kmstqrwxuvhjyznp'
+      },
+      odd: {
+        border: '028b',
+        neighbor: 'p0r21436x8zb9dcf5h7kjnmqesgutwvy'
+      }
+    }
+  };
+  function geohashEncode(lat, lon, precision) {
+    if (precision === void 0) {
+      precision = 6;
+    }
+
+    var idx = 0;
+    var bit = 0;
+    var evenBit = true;
+    var geohash = '';
+    var latMin = -90,
+        latMax = 90;
+    var lonMin = -180,
+        lonMax = 180;
+
+    while (geohash.length < precision) {
+      if (evenBit) {
+        var lonMid = (lonMin + lonMax) / 2;
+
+        if (lon >= lonMid) {
+          idx = idx * 2 + 1;
+          lonMin = lonMid;
+        } else {
+          idx = idx * 2;
+          lonMax = lonMid;
+        }
+      } else {
+        var latMid = (latMin + latMax) / 2;
+
+        if (lat >= latMid) {
+          idx = idx * 2 + 1;
+          latMin = latMid;
+        } else {
+          idx = idx * 2;
+          latMax = latMid;
+        }
+      }
+
+      evenBit = !evenBit;
+
+      if (++bit == 5) {
+        geohash += BASE32.charAt(idx);
+        bit = 0;
+        idx = 0;
+      }
+    }
+
+    return geohash;
+  }
+
+  function adjacent(hash, dir) {
+    var lastChr = hash[hash.length - 1];
+    var type = hash.length % 2 ? 'odd' : 'even'; // @ts-ignore
+
+    var border = NEIGHBORS[dir][type].border; // @ts-ignore
+
+    var neighbor = NEIGHBORS[dir][type].neighbor;
+    var base = hash.substring(0, hash.length - 1);
+
+    if (border.indexOf(lastChr) !== -1) {
+      base = adjacent(base, dir);
+    }
+
+    var pos = neighbor.indexOf(lastChr);
+    var nextChr = BASE32.charAt(pos);
+    return base + nextChr;
+  }
+
+  function geohashNeighbors(hash) {
+    var n = adjacent(hash, 'n');
+    var s = adjacent(hash, 's');
+    var e = adjacent(hash, 'e');
+    var w = adjacent(hash, 'w');
+    return [hash, n, s, e, w, adjacent(n, 'e'), adjacent(n, 'w'), adjacent(s, 'e'), adjacent(s, 'w')];
+  }
+
+  function CanvasMarkerHanquf(_a) {
+    var renderer = _a.renderer,
+        data = _a.data,
+        onMouseOver = _a.onMouseOver,
+        onMouseOut = _a.onMouseOut,
+        onClick = _a.onClick,
+        options = tslib.__rest(_a, ["renderer", "data", "onMouseOver", "onMouseOut", "onClick"]); //controller
+
+
+    var controller = useMintMapController(); //element
+
+    var divRef = React.useRef(document.createElement('div'));
+    var divElement = divRef.current; //canvas container ref
+
+    var containerRef = React.useRef(null); //canvas ref
+
+    var canvasRef = React.useRef(null); //canvas context
+
+    var contextRef = React.useRef(); //marker
+
+    var markerRef = React.useRef(); // interaction states
+
+    var hoveredRef = React.useRef(null);
+    var clickedRef = React.useRef(null); // geohash index: hash -> items
+
+    var geoIndexRef = React.useRef(new Map());
+    var geoPrecisionRef = React.useRef(6); // drag translate state
+
+    var prevCenterOffsetRef = React.useRef(null);
+    var accumTranslateRef = React.useRef({
+      x: 0,
+      y: 0
+    });
+    var draggingRef = React.useRef(false); //create object
+
+    React.useEffect(function () {
+      divElement.style.width = 'fit-content';
+      divElement.style.pointerEvents = 'none';
+      return function () {
+        if (markerRef.current) {
+          controller.clearDrawable(markerRef.current);
+          markerRef.current = undefined;
+        }
+      };
+    }, []); //create / update object
+
+    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); //disablePointerEvent 처리
+
+          if (divElement.parentElement) {
+            divElement.style.pointerEvents = 'none';
+            divElement.parentElement.style.pointerEvents = 'none';
+          } //z-index 처리
+
+
+          if (options.zIndex !== undefined) {
+            controller.setMarkerZIndex(markerRef.current, options.zIndex);
+          }
+        }
+      }
+    }, [options]);
+
+    var handleIdle = function () {
+      // 클리어
+      clearRect(canvasRef.current, contextRef.current); // 표시 복구 (드래그/줌 중 숨김 처리 복원)
+
+      containerRef.current && (containerRef.current.style.visibility = ''); // 드래그 종료 처리: 변환 초기화 및 기준 위치 갱신
+
+      draggingRef.current = false;
+      prevCenterOffsetRef.current = null;
+      accumTranslateRef.current = {
+        x: 0,
+        y: 0
+      };
+
+      if (containerRef.current) {
+        containerRef.current.style.transform = '';
+      } // 마커 이동
+
+
+      var bounds = controller.getCurrBounds();
+
+      var markerOptions = tslib.__assign({
+        position: bounds.nw
+      }, options);
+
+      markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // 렌더링 (hover/click item last)
+
+      renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
+    };
+
+    var handleZoomStart = function () {
+      containerRef.current && (containerRef.current.style.visibility = 'hidden');
+    };
+
+    var handleZoomEnd = function () {
+      containerRef.current && (containerRef.current.style.visibility = '');
+    }; //initialize
+
+
+    React.useEffect(function () {
+      var resizeObserver; // hover/out 공통 처리기 (mouse 좌표 기반)
+
+      var updateHoverByMouseXY = function (mouseX, mouseY) {
+        var hit = hitTest(mouseX, mouseY);
+
+        if ((hit === null || hit === void 0 ? void 0 : hit.item) !== hoveredRef.current) {
+          if (hoveredRef.current && onMouseOut) {
+            onMouseOut(hoveredRef.current);
+          }
+
+          hoveredRef.current = (hit === null || hit === void 0 ? void 0 : hit.item) || null;
+
+          if ((hit === null || hit === void 0 ? void 0 : hit.item) && onMouseOver) {
+            onMouseOver(hit.item);
+          }
+
+          clearRect(canvasRef.current, contextRef.current);
+          renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
+        }
+      };
+
+      var handleMouseLeave = function () {
+        console.log('handleMouseLeave');
+
+        if (hoveredRef.current && onMouseOut) {
+          onMouseOut(hoveredRef.current);
+        }
+
+        hoveredRef.current = null;
+        clearRect(canvasRef.current, contextRef.current);
+        renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
+      }; // 지도 이벤트 → 화면 좌표 변환
+
+
+      var parseEventToOffset = function (e) {
+        var mapType = controller.getMapType();
+        var latlng = (e === null || e === void 0 ? void 0 : e.latlng) || (e === null || e === void 0 ? void 0 : e.latLng);
+
+        if (!latlng) {
+          return null;
+        }
+
+        var pos = {
+          lat: 0,
+          lng: 0
+        }; //@ts-ignore
+
+        if (mapType === 'naver') {
+          pos.lat = latlng._lat;
+          pos.lng = latlng._lng; //@ts-ignore
+        } else if (mapType === 'google') {
+          pos.lat = latlng.lat();
+          pos.lng = latlng.lng(); //@ts-ignore
+        } else if (mapType === 'kakao') {
+          pos.lat = latlng.Ma;
+          pos.lng = latlng.La;
+        } else {
+          return null;
+        }
+
+        var offset = controller.positionToOffset(pos);
+        return offset;
+      };
+
+      var handleMapMouseMove = function (e) {
+        if (draggingRef.current) {
+          return;
+        }
+
+        var offset = parseEventToOffset(e);
+        if (!offset) return;
+        updateHoverByMouseXY(offset.x, offset.y);
+      };
+
+      var handleMapClick = function (e) {
+        console.log('handleClick');
+        var offset = parseEventToOffset(e);
+        if (!offset) return;
+        var hit = hitTest(offset.x, offset.y);
+
+        if (hit === null || hit === void 0 ? void 0 : hit.item) {
+          clickedRef.current = hit.item;
+          onClick && onClick(hit.item);
+          clearRect(canvasRef.current, contextRef.current);
+          renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
+        }
+      };
+
+      if (canvasRef.current && containerRef.current) {
+        // 리사이즈 처리
+        resizeObserver = new ResizeObserver(function () {
+          // 클리어
+          clearRect(canvasRef.current, contextRef.current); // 스케일링
+
+          canvasRef.current && contextRef.current && scaleCanvas(controller, canvasRef.current, contextRef.current); // 렌더링 (respect hover/click ordering)
+
+          renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
+        });
+        resizeObserver.observe(controller.mapDivElement); // IDLE 이벤트 등록
+
+        controller.addEventListener('IDLE', handleIdle); // 줌 처리
+
+        controller.addEventListener('ZOOMSTART', handleZoomStart);
+        controller.addEventListener('ZOOM_CHANGED', handleZoomEnd); // 2d 컨텍스트
+
+        contextRef.current = canvasRef.current.getContext('2d'); // 스케일링
+
+        if (contextRef.current) {
+          scaleCanvas(controller, canvasRef.current, contextRef.current);
+        } // 지도 이벤트 구독 (부모 pointer-events:none 이어도 동작)
+
+
+        var map = controller.getMap();
+
+        if (map) {
+          //@ts-ignore
+          map.addListener('mousemove', handleMapMouseMove); //@ts-ignore
+
+          map.addListener('click', handleMapClick); //@ts-ignore
+
+          map.addListener('center_changed', function () {
+            // 드래그 중에는 리렌더 대신 transform 으로만 추종
+            var center = controller.getCurrBounds().getCenter();
+            var curr = controller.positionToOffset(center);
+            var prev = prevCenterOffsetRef.current;
+
+            if (!prev) {
+              prevCenterOffsetRef.current = {
+                x: curr.x,
+                y: curr.y
+              };
+              draggingRef.current = true;
+              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
+            };
+            draggingRef.current = true;
+
+            if (containerRef.current) {
+              containerRef.current.style.transform = "translate(".concat(accumTranslateRef.current.x, "px, ").concat(accumTranslateRef.current.y, "px)");
+            }
+          }); //@ts-ignore
+
+          map.addListener('idle', handleIdle);
+        } // 마우스가 지도 영역을 벗어나는 경우 처리
+
+
+        controller.mapDivElement.addEventListener('mouseleave', handleMouseLeave);
+      }
+
+      return function () {
+        resizeObserver && resizeObserver.disconnect();
+        controller.mapDivElement && controller.mapDivElement.removeEventListener('mouseleave', handleMouseLeave);
+        controller.removeEventListener('IDLE', handleIdle);
+        controller.removeEventListener('ZOOMSTART', handleZoomStart);
+        controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
+      };
+    }, []); // data ref
+
+    var dataRef = React.useRef(data);
+    React.useEffect(function () {
+      dataRef.current = data; // rebuild geohash index
+
+      var map = new Map();
+      var precision = geoPrecisionRef.current;
+
+      for (var _i = 0, _a = data || []; _i < _a.length; _i++) {
+        var item = _a[_i];
+        var pos = item.position && item.position[0];
+        if (!pos) continue;
+        var hash = geohashEncode(pos.lat, pos.lng, precision);
+        var list = map.get(hash) || [];
+        list.push(item);
+        map.set(hash, list);
+      }
+
+      geoIndexRef.current = map;
+    }, [data]); // renderer ref
+
+    var rendererRef = React.useRef(renderer);
+    React.useEffect(function () {
+      rendererRef.current = renderer;
+    }, [renderer]); // Build ordered list so hovered/clicked items render last (on top) within this canvas layer
+
+    var buildOrderedData = function () {
+      var base = dataRef.current || [];
+      var result = [];
+      var hoverItem;
+      var clickItem;
+
+      for (var _i = 0, base_1 = base; _i < base_1.length; _i++) {
+        var item = base_1[_i];
+
+        if (clickedRef.current && item === clickedRef.current) {
+          clickItem = item;
+        } else if (hoveredRef.current && item === hoveredRef.current) {
+          hoverItem = item;
+        } else {
+          result.push(item);
+        }
+      }
+
+      if (hoverItem) result.push(hoverItem);
+      if (clickItem) result.push(clickItem);
+      return result;
+    }; // Geohash-accelerated hit-test
+
+
+    var hitTest = function (mouseX, mouseY) {
+      // convert mouse offset -> lat/lng then geohash it
+      var pos = controller.offsetToPosition({
+        x: mouseX,
+        y: mouseY
+      });
+      var precision = geoPrecisionRef.current;
+      var baseHash = geohashEncode(pos.lat, pos.lng, precision);
+      var buckets = geohashNeighbors(baseHash); // collect candidates from buckets (preserve ordering for top-most first)
+
+      var set = new Set();
+      var ordered = buildOrderedData();
+
+      for (var _i = 0, buckets_1 = buckets; _i < buckets_1.length; _i++) {
+        var b = buckets_1[_i];
+        var list = geoIndexRef.current.get(b);
+        if (!list) continue;
+
+        for (var _a = 0, list_1 = list; _a < list_1.length; _a++) {
+          var it = list_1[_a];
+          set.add(it);
+        }
+      } // iterate from top-most
+
+
+      for (var i = ordered.length - 1; i >= 0; i--) {
+        var item = ordered[i];
+        if (!set.has(item)) continue;
+        if (item.visible === false) continue;
+        var p = item.position && item.position[0];
+        if (!p) continue;
+        var off = controller.positionToOffset(p);
+        var r = Math.max(2, item.hitRadius || 20);
+        var dx = mouseX - off.x;
+        var dy = mouseY - off.y;
+
+        if (dx * dx + dy * dy <= r * r) {
+          return {
+            item: item
+          };
+        }
+      }
+
+      return null;
+    }; // Initial render
+
+
+    renderMain(controller, renderer, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
+    return reactDom.createPortal(React__default["default"].createElement("div", {
+      ref: containerRef,
+      style: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none'
+      }
+    }, React__default["default"].createElement("canvas", {
+      ref: canvasRef,
+      style: {
+        pointerEvents: 'revert-layer'
+      }
+    })), divElement);
+  }
+
+  var defaultPolygonRenderer = function (_a) {
+    var context = _a.context,
+        offsets = _a.offsets,
+        innerOffsets = _a.innerOffsets,
+        polygon = _a.polygon,
+        isHovered = _a.isHovered,
+        defaultBackground = _a.defaultBackground,
+        defaultStrokeColor = _a.defaultStrokeColor,
+        defaultStrokeWidth = _a.defaultStrokeWidth,
+        hoverBackground = _a.hoverBackground,
+        hoverStrokeColor = _a.hoverStrokeColor;
+    if (offsets.length < 3) return; // 외부 폴리곤 그리기
+
+    context.beginPath();
+    context.moveTo(offsets[0].x, offsets[0].y);
+
+    for (var i = 1; i < offsets.length; i++) {
+      context.lineTo(offsets[i].x, offsets[i].y);
+    }
+
+    context.closePath(); // 내부 폴리곤 (구멍) 그리기
+
+    if (innerOffsets) {
+      innerOffsets.forEach(function (innerOffset) {
+        if (innerOffset.length < 3) return;
+        context.moveTo(innerOffset[0].x, innerOffset[0].y);
+
+        for (var i = 1; i < innerOffset.length; i++) {
+          context.lineTo(innerOffset[i].x, innerOffset[i].y);
+        }
+
+        context.closePath();
+      });
+    } // 스타일 설정
+
+
+    var fillColor = isHovered ? hoverBackground : polygon.background || defaultBackground;
+    var lineColor = isHovered ? hoverStrokeColor : polygon.strokeColor || defaultStrokeColor;
+    var lineWidth = polygon.strokeWidth || defaultStrokeWidth;
+    context.fillStyle = fillColor;
+    context.strokeStyle = lineColor;
+    context.lineWidth = lineWidth;
+    context.fill('evenodd');
+    context.stroke();
+  };
+
+  var CanvasMarkerClaude = React__default["default"].memo(function CanvasMarkerClaude(_a) {
+    var _b = _a.polygons,
+        polygons = _b === void 0 ? [] : _b,
+        _c = _a.markers,
+        markers = _c === void 0 ? [] : _c,
+        _d = _a.background,
+        background = _d === void 0 ? 'rgba(0, 100, 255, 0.3)' : _d,
+        _e = _a.strokeColor,
+        strokeColor = _e === void 0 ? 'blue' : _e,
+        _f = _a.strokeWidth,
+        strokeWidth = _f === void 0 ? 1 : _f,
+        onPolygonClick = _a.onPolygonClick,
+        onPolygonHover = _a.onPolygonHover,
+        onPolygonLeave = _a.onPolygonLeave;
+        _a.onMarkerClick;
+        var onMarkerHover = _a.onMarkerHover,
+        onMarkerLeave = _a.onMarkerLeave,
+        onRenderComplete = _a.onRenderComplete,
+        markerRenderer = _a.markerRenderer,
+        options = tslib.__rest(_a, ["polygons", "markers", "background", "strokeColor", "strokeWidth", "onPolygonClick", "onPolygonHover", "onPolygonLeave", "onMarkerClick", "onMarkerHover", "onMarkerLeave", "onRenderComplete", "markerRenderer"]); // controller
+
+
+    var controller = useMintMapController(); // element (CanvasMarker 스타일)
+
+    var divRef = React.useRef(document.createElement('div'));
+    var divElement = divRef.current; // canvas container ref
+
+    var containerRef = React.useRef(null); // base canvas (모든 폴리곤 - IDLE 시에만 업데이트)
+
+    var baseCanvasRef = React.useRef(null);
+    var baseContextRef = React.useRef(); // hover canvas (호버된 폴리곤만 - 마우스 이동 시 업데이트)
+
+    var hoverCanvasRef = React.useRef(null);
+    var hoverContextRef = React.useRef(); // base marker canvas (기본 상태 마커 - IDLE 시 업데이트)
+
+    var baseMarkerCanvasRef = React.useRef(null);
+    var baseMarkerContextRef = React.useRef(); // interactive marker canvas (호버/클릭 마커 - 마우스 이동 시 업데이트)
+
+    var interactiveMarkerCanvasRef = React.useRef(null);
+    var interactiveMarkerContextRef = React.useRef(); // marker
+
+    var markerRef = React.useRef(); // interaction states
+
+    var hoveredPolygonRef = React.useRef(null);
+    var clickedPolygonRef = React.useRef(null);
+    var hoveredMarkerRef = React.useRef(null);
+    var clickedMarkerRef = React.useRef(null); // 🚀 WoongCanvasMarker 방식: 단순한 data ref (geohash 제거)
+
+    var polygonsRef = React.useRef([]);
+    var markersRef = React.useRef([]); // 마커 경계 정보 저장 (hit-test용)
+
+    var markerBoundsRef = React.useRef(new Map()); // 🚀 드래그 추적용 (WoongCanvasMarker 방식)
+
+    var draggingRef = React.useRef(false);
+    var prevCenterOffsetRef = React.useRef(null);
+    var accumTranslateRef = React.useRef({
+      x: 0,
+      y: 0
+    }); // 🚀 Offset 캐싱 (ID 문자열 기반으로 변경하여 메모리 누수 방지)
+
+    var MAX_CACHE_SIZE = 50000; // 최대 캐시 크기 제한 (3만개 + 여유분)
+
+    var polygonOffsetCacheRef = React.useRef(new Map());
+    var polygonInnerOffsetCacheRef = React.useRef(new Map()); // innerOffsets 캐시 추가
+
+    var markerOffsetCacheRef = React.useRef(new Map()); // create object (CanvasMarker 스타일)
+
+    React.useEffect(function () {
+      divElement.style.width = 'fit-content';
+      divElement.style.pointerEvents = 'none'; // CanvasMarkerHanquf 방식
+
+      return function () {
+        if (markerRef.current) {
+          controller.clearDrawable(markerRef.current);
+          markerRef.current = undefined;
+        }
+      };
+    }, []); // create / update object (CanvasMarker 스타일)
+
+    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); // CanvasMarkerHanquf 방식: pointer events 비활성화
+
+          if (divElement.parentElement) {
+            divElement.style.pointerEvents = 'none';
+            divElement.parentElement.style.pointerEvents = 'none';
+          } // z-index 처리
+
+
+          if (options.zIndex !== undefined) {
+            controller.setMarkerZIndex(markerRef.current, options.zIndex);
+          }
+        }
+      }
+    }, [options]); // 베이스 폴리곤 렌더링 (모든 폴리곤, 호버 효과 없음)
+
+    var renderBasePolygons = function () {
+      if (!baseContextRef.current || !polygonsRef.current || polygonsRef.current.length === 0) return;
+      clearRect(baseCanvasRef.current, baseContextRef.current);
+      var cacheMissCount = 0; // 캐시 미스 카운트
+      // 🚀 WoongCanvasMarker 방식: 전체 데이터 순회 (필터링 제거)
+
+      polygonsRef.current.forEach(function (polygon) {
+        if (polygon.visible === false) return; // 🚀 캐시 확인 (ID 기반으로 변경)
+
+        var offsets = polygonOffsetCacheRef.current.get(polygon.id);
+
+        if (!offsets) {
+          cacheMissCount++;
+          offsets = polygon.positions.map(function (pos) {
+            return controller.positionToOffset(pos);
+          }); // LRU: 캐시 크기 제한
+
+          if (polygonOffsetCacheRef.current.size >= MAX_CACHE_SIZE) {
+            var firstKey = polygonOffsetCacheRef.current.keys().next().value;
+
+            if (firstKey) {
+              polygonOffsetCacheRef.current.delete(firstKey);
+            }
+          }
+
+          polygonOffsetCacheRef.current.set(polygon.id, offsets);
+        }
+
+        var innerOffsets;
+
+        if (polygon.innerPositions) {
+          // innerOffsets도 캐시 사용
+          innerOffsets = polygonInnerOffsetCacheRef.current.get(polygon.id);
+
+          if (!innerOffsets) {
+            innerOffsets = polygon.innerPositions.map(function (innerPositions) {
+              return innerPositions.map(function (pos) {
+                return controller.positionToOffset(pos);
+              });
+            });
+            polygonInnerOffsetCacheRef.current.set(polygon.id, innerOffsets);
+          }
+        } // 렌더러 호출 (항상 기본 스타일)
+
+
+        defaultPolygonRenderer({
+          context: baseContextRef.current,
+          offsets: offsets,
+          innerOffsets: innerOffsets,
+          polygon: polygon,
+          isHovered: false,
+          defaultBackground: background,
+          defaultStrokeColor: strokeColor,
+          defaultStrokeWidth: strokeWidth,
+          hoverBackground: background,
+          hoverStrokeColor: strokeColor
+        });
+      }); // 요약 로그만 출력 (캐시 미스가 있을 때만)
+
+      if (cacheMissCount > 0) {
+        console.log("\uD83C\uDFA8 [renderBasePolygons] \uCE90\uC2DC \uBBF8\uC2A4: ".concat(cacheMissCount, "\uAC1C, \uD604\uC7AC \uCE90\uC2DC \uD06C\uAE30: ").concat(polygonOffsetCacheRef.current.size));
+      } // 렌더링 완료 콜백 호출
+
+
+      if (onRenderComplete) {
+        onRenderComplete();
+      }
+    }; // 베이스 마커 렌더링 (기본 상태 마커만, IDLE 시 업데이트)
+
+
+    var renderBaseMarkers = function () {
+      if (!baseMarkerContextRef.current || !markerRenderer) return;
+      if (!markersRef.current || markersRef.current.length === 0) return;
+      clearRect(baseMarkerCanvasRef.current, baseMarkerContextRef.current); // 마커 경계 정보 초기화
+
+      markerBoundsRef.current.clear(); // 🚀 WoongCanvasMarker 방식: 전체 데이터 순회 (필터링 제거)
+
+      markersRef.current.forEach(function (marker) {
+        var _a, _b;
+
+        if (marker.visible === false) return; // 호버/클릭 상태인 마커는 스킵 (인터랙션 레이어에서 렌더링)
+
+        if (marker.id === ((_a = hoveredMarkerRef.current) === null || _a === void 0 ? void 0 : _a.id)) return;
+        if (marker.id === ((_b = clickedMarkerRef.current) === null || _b === void 0 ? void 0 : _b.id)) return; // 🚀 캐시 확인 (ID 기반으로 변경)
+
+        var offset = markerOffsetCacheRef.current.get(marker.id);
+
+        if (!offset) {
+          offset = controller.positionToOffset(new Position(marker.lat, marker.lng));
+          markerOffsetCacheRef.current.set(marker.id, offset);
+        } // 커스텀 마커 렌더러 호출 (기본 상태)
+
+
+        var markerBounds = markerRenderer({
+          context: baseMarkerContextRef.current,
+          x: offset.x,
+          y: offset.y,
+          marker: marker,
+          isHovered: false,
+          isClicked: false
+        }); // 마커 경계 정보 저장 (hit-test용)
+
+        markerBoundsRef.current.set(marker.id, {
+          marker: marker,
+          bounds: markerBounds
+        });
+      });
+    }; // 인터랙션 마커 렌더링 (호버/클릭 마커만, 마우스 이동 시 업데이트)
+
+
+    var renderInteractionMarkers = function () {
+      if (!interactiveMarkerContextRef.current || !markerRenderer) return;
+      clearRect(interactiveMarkerCanvasRef.current, interactiveMarkerContextRef.current); // 클릭된 마커 먼저 그리기 (하단 레이어)
+
+      if (clickedMarkerRef.current) {
+        var marker = clickedMarkerRef.current;
+
+        if (marker.visible !== false) {
+          // 🚀 캐시 확인 (ID 기반으로 변경)
+          var offset = markerOffsetCacheRef.current.get(marker.id);
+
+          if (!offset) {
+            offset = controller.positionToOffset(new Position(marker.lat, marker.lng));
+            markerOffsetCacheRef.current.set(marker.id, offset);
+          }
+
+          var markerBounds = markerRenderer({
+            context: interactiveMarkerContextRef.current,
+            x: offset.x,
+            y: offset.y,
+            marker: marker,
+            isHovered: false,
+            isClicked: true
+          }); // 마커 경계 정보 업데이트
+
+          markerBoundsRef.current.set(marker.id, {
+            marker: marker,
+            bounds: markerBounds
+          });
+        }
+      } // 호버된 마커 나중에 그리기 (최상단 레이어)
+
+
+      if (hoveredMarkerRef.current) {
+        var marker = hoveredMarkerRef.current;
+
+        if (marker.visible !== false) {
+          // 🚀 캐시 확인 (ID 기반으로 변경)
+          var offset = markerOffsetCacheRef.current.get(marker.id);
+
+          if (!offset) {
+            offset = controller.positionToOffset(new Position(marker.lat, marker.lng));
+            markerOffsetCacheRef.current.set(marker.id, offset);
+          }
+
+          var markerBounds = markerRenderer({
+            context: interactiveMarkerContextRef.current,
+            x: offset.x,
+            y: offset.y,
+            marker: marker,
+            isHovered: true,
+            isClicked: false
+          }); // 마커 경계 정보 업데이트
+
+          markerBoundsRef.current.set(marker.id, {
+            marker: marker,
+            bounds: markerBounds
+          });
+        }
+      }
+    }; // 인터랙션 폴리곤 렌더링 (호버 + 클릭)
+
+
+    var renderInteractionPolygons = function () {
+      if (!hoverContextRef.current) return; // 인터랙션 캔버스 클리어
+
+      clearRect(hoverCanvasRef.current, hoverContextRef.current); // 1. 클릭된 폴리곤 먼저 그리기 (하단 레이어)
+
+      if (clickedPolygonRef.current) {
+        var polygon = clickedPolygonRef.current;
+
+        if (polygon.visible !== false) {
+          // 🚀 캐시 확인 (ID 기반으로 변경)
+          var offsets = polygonOffsetCacheRef.current.get(polygon.id);
+
+          if (!offsets) {
+            offsets = polygon.positions.map(function (pos) {
+              return controller.positionToOffset(pos);
+            });
+            polygonOffsetCacheRef.current.set(polygon.id, offsets);
+          }
+
+          var innerOffsets = void 0;
+
+          if (polygon.innerPositions) {
+            // innerOffsets도 캐시 사용
+            innerOffsets = polygonInnerOffsetCacheRef.current.get(polygon.id);
+
+            if (!innerOffsets) {
+              innerOffsets = polygon.innerPositions.map(function (innerPositions) {
+                return innerPositions.map(function (pos) {
+                  return controller.positionToOffset(pos);
+                });
+              });
+              polygonInnerOffsetCacheRef.current.set(polygon.id, innerOffsets);
+            }
+          } // 클릭 스타일 (노란색)
+
+
+          defaultPolygonRenderer({
+            context: hoverContextRef.current,
+            offsets: offsets,
+            innerOffsets: innerOffsets,
+            polygon: polygon,
+            isHovered: true,
+            defaultBackground: background,
+            defaultStrokeColor: strokeColor,
+            defaultStrokeWidth: strokeWidth,
+            hoverBackground: 'rgba(255, 200, 0, 0.6)',
+            hoverStrokeColor: 'orange' // 주황색 테두리
+
+          });
+        }
+      } // 2. 호버된 폴리곤 나중에 그리기 (최상단 레이어)
+
+
+      if (hoveredPolygonRef.current) {
+        var polygon = hoveredPolygonRef.current;
+
+        if (polygon.visible !== false) {
+          // 🚀 캐시 확인 (ID 기반으로 변경)
+          var offsets = polygonOffsetCacheRef.current.get(polygon.id);
+
+          if (!offsets) {
+            offsets = polygon.positions.map(function (pos) {
+              return controller.positionToOffset(pos);
+            });
+            polygonOffsetCacheRef.current.set(polygon.id, offsets);
+          }
+
+          var innerOffsets = void 0;
+
+          if (polygon.innerPositions) {
+            // innerOffsets도 캐시 사용
+            innerOffsets = polygonInnerOffsetCacheRef.current.get(polygon.id);
+
+            if (!innerOffsets) {
+              innerOffsets = polygon.innerPositions.map(function (innerPositions) {
+                return innerPositions.map(function (pos) {
+                  return controller.positionToOffset(pos);
+                });
+              });
+              polygonInnerOffsetCacheRef.current.set(polygon.id, innerOffsets);
+            }
+          } // 호버 스타일 (빨간색)
+
+
+          defaultPolygonRenderer({
+            context: hoverContextRef.current,
+            offsets: offsets,
+            innerOffsets: innerOffsets,
+            polygon: polygon,
+            isHovered: true,
+            defaultBackground: background,
+            defaultStrokeColor: strokeColor,
+            defaultStrokeWidth: strokeWidth,
+            hoverBackground: 'rgba(255, 0, 0, 0.5)',
+            hoverStrokeColor: 'red' // 빨간색 테두리
+
+          });
+        }
+      }
+    }; // point-in-polygon 테스트 (ray casting algorithm)
+
+
+    var pointInPolygon = function (x, y, polygon) {
+      if (polygon.length < 3) return false;
+      var inside = false;
+
+      for (var i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+        var xi = polygon[i].x,
+            yi = polygon[i].y;
+        var xj = polygon[j].x,
+            yj = polygon[j].y;
+
+        if (yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi) {
+          inside = !inside;
+        }
+      }
+
+      return inside;
+    }; // 히트 테스트 함수 (마커 우선)
+
+
+    var findPolygonAt = function (x, y) {
+      var _a, _b;
+
+      if (!polygonsRef.current || polygonsRef.current.length === 0) return null; // 1. 마커 먼저 체크 (우선순위: hover 중 → clicked 중 → 배열 역순)
+
+      if (markersRef.current) {
+        // 🎯 최우선: 현재 hover 중인 마커가 있으면 그것부터 체크
+        if (hoveredMarkerRef.current && hoveredMarkerRef.current.visible !== false) {
+          var markerData = markerBoundsRef.current.get(hoveredMarkerRef.current.id);
+
+          if (markerData) {
+            var bounds = markerData.bounds;
+
+            if (x >= bounds.x && x <= bounds.x + bounds.width && y >= bounds.y && y <= bounds.y + bounds.height) {
+              return null; // 마커 히트 시 null 반환 (폴리곤이 아니므로)
+            }
+          }
+        } // 🎯 두 번째: hover 중인 마커에 히트 안 되고, clicked 마커가 있으면 체크
+
+
+        if (clickedMarkerRef.current && clickedMarkerRef.current.visible !== false) {
+          var markerData = markerBoundsRef.current.get(clickedMarkerRef.current.id);
+
+          if (markerData) {
+            var bounds = markerData.bounds;
+
+            if (x >= bounds.x && x <= bounds.x + bounds.width && y >= bounds.y && y <= bounds.y + bounds.height) {
+              return null; // 마커 히트 시 null 반환 (폴리곤이 아니므로)
+            }
+          }
+        } // 🎯 세 번째: 나머지 마커들을 역순으로 체크 (위에 그려진 것부터)
+
+
+        for (var i = markersRef.current.length - 1; i >= 0; i--) {
+          var marker = markersRef.current[i];
+          if (marker.visible === false) continue; // 이미 체크한 hover/clicked 마커는 스킵
+
+          if (marker.id === ((_a = hoveredMarkerRef.current) === null || _a === void 0 ? void 0 : _a.id)) continue;
+          if (marker.id === ((_b = clickedMarkerRef.current) === null || _b === void 0 ? void 0 : _b.id)) continue;
+          var markerData = markerBoundsRef.current.get(marker.id);
+          if (!markerData) continue;
+          var bounds = markerData.bounds; // 사각형 경계 체크
+
+          if (x >= bounds.x && x <= bounds.x + bounds.width && y >= bounds.y && y <= bounds.y + bounds.height) {
+            // 마커 히트 시 null 반환 (폴리곤이 아니므로)
+            return null;
+          }
+        }
+      } // 2. 마커에 히트 안 되면 폴리곤 체크 - 🚀 전체 폴리곤 순회
+      // 역순으로 체크 (위에 그려진 것부터)
+
+
+      for (var i = polygonsRef.current.length - 1; i >= 0; i--) {
+        var polygon = polygonsRef.current[i];
+        if (polygon.visible === false) continue; // 🚀 캐시 확인 (ID 기반으로 변경)
+
+        var offsets = polygonOffsetCacheRef.current.get(polygon.id);
+
+        if (!offsets) {
+          offsets = polygon.positions.map(function (pos) {
+            return controller.positionToOffset(pos);
+          });
+          polygonOffsetCacheRef.current.set(polygon.id, offsets);
+        } // 외부 폴리곤 체크
+
+
+        if (pointInPolygon(x, y, offsets)) {
+          // 도넛 폴리곤인 경우 내부 구멍도 체크
+          if (polygon.innerPositions && polygon.innerPositions.length > 0) {
+            var innerOffsets = polygonInnerOffsetCacheRef.current.get(polygon.id);
+
+            if (!innerOffsets) {
+              innerOffsets = polygon.innerPositions.map(function (innerPositions) {
+                return innerPositions.map(function (pos) {
+                  return controller.positionToOffset(pos);
+                });
+              });
+              polygonInnerOffsetCacheRef.current.set(polygon.id, innerOffsets);
+            } // 내부 구멍 중 하나라도 포함되면 이 폴리곤은 스킵하고 다음 폴리곤 체크
+
+
+            var isInHole = false;
+
+            for (var _i = 0, innerOffsets_1 = innerOffsets; _i < innerOffsets_1.length; _i++) {
+              var innerOffset = innerOffsets_1[_i];
+
+              if (pointInPolygon(x, y, innerOffset)) {
+                isInHole = true;
+                break;
+              }
+            } // 구멍 안에 있으면 이 폴리곤은 스킵하고 다음 폴리곤 계속 검색
+
+
+            if (isInHole) {
+              continue;
+            }
+          } // 외부 폴리곤 안에 있고, 구멍 안에는 없으면 히트
+
+
+          return polygon;
+        }
+      }
+
+      return null;
+    }; // IDLE 이벤트 핸들러 (WoongCanvasMarker 최적화 적용)
+
+
+    var handleIdle = function () {
+      var beforeCacheSize = polygonOffsetCacheRef.current.size;
+      clearRect(baseCanvasRef.current, baseContextRef.current); // 표시 복구 (드래그/줌 중 숨김 처리 복원)
+
+      containerRef.current && (containerRef.current.style.visibility = '');
+      draggingRef.current = false;
+      prevCenterOffsetRef.current = null;
+      accumTranslateRef.current = {
+        x: 0,
+        y: 0
+      };
+
+      if (containerRef.current) {
+        containerRef.current.style.transform = '';
+      } // 🚀 캐시 무효화 (지도 이동/줌으로 좌표가 바뀌므로 전체 clear 필요)
+
+
+      polygonOffsetCacheRef.current.clear();
+      polygonInnerOffsetCacheRef.current.clear();
+      markerOffsetCacheRef.current.clear();
+      markerBoundsRef.current.clear(); // 캐시 clear 로그
+
+      if (beforeCacheSize > 0) {
+        console.log("\uD83E\uDDF9 [IDLE] \uCE90\uC2DC \uCD08\uAE30\uD654: ".concat(beforeCacheSize, "\uAC1C \uC81C\uAC70 (\uC88C\uD45C \uAC31\uC2E0 \uD544\uC694)"));
+      } // 마커 이동
+
+
+      var bounds = controller.getCurrBounds();
+
+      var markerOptions = tslib.__assign({
+        position: bounds.nw
+      }, options);
+
+      markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // 🚀 폴리곤 렌더링 (독립)
+
+      if (polygonsRef.current.length > 0) {
+        renderBasePolygons();
+        renderInteractionPolygons();
+      } // 🚀 마커 렌더링 (독립)
+
+
+      if (markersRef.current.length > 0 && markerRenderer) {
+        renderBaseMarkers();
+        renderInteractionMarkers();
+      }
+    };
+
+    var handleZoomStart = function () {
+      containerRef.current && (containerRef.current.style.visibility = 'hidden');
+    };
+
+    var handleZoomEnd = function () {
+      containerRef.current && (containerRef.current.style.visibility = '');
+    }; // 지도 이벤트를 화면 좌표로 변환 (CanvasMarkerHanquf 방식)
+
+
+    var parseEventToOffset = function (event) {
+      var mapDiv = controller.mapDivElement;
+      var rect = mapDiv.getBoundingClientRect();
+      return {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top
+      };
+    }; // 🚀 지도 클릭 이벤트 핸들러 (WoongCanvasMarker 방식 - controller.addEventListener)
+
+
+    var handleMapClick = function (event) {
+      var _a, _b, _c;
+
+      var clickedOffset = controller.positionToOffset(event.param.position); // 1. 마커 먼저 체크 (우선순위: hover 중 → clicked 중 → 배열 역순)
+
+      var hitMarker = null;
+
+      if (markersRef.current) {
+        // 🎯 최우선: 현재 hover 중인 마커가 있으면 그것부터 체크
+        if (hoveredMarkerRef.current && hoveredMarkerRef.current.visible !== false) {
+          var markerData = markerBoundsRef.current.get(hoveredMarkerRef.current.id);
+
+          if (markerData) {
+            var bounds = markerData.bounds;
+
+            if (clickedOffset.x >= bounds.x && clickedOffset.x <= bounds.x + bounds.width && clickedOffset.y >= bounds.y && clickedOffset.y <= bounds.y + bounds.height) {
+              hitMarker = hoveredMarkerRef.current;
+            }
+          }
+        } // 🎯 두 번째: hover 중인 마커에 히트 안 되고, clicked 마커가 있으면 체크
+
+
+        if (!hitMarker && clickedMarkerRef.current && clickedMarkerRef.current.visible !== false) {
+          var markerData = markerBoundsRef.current.get(clickedMarkerRef.current.id);
+
+          if (markerData) {
+            var bounds = markerData.bounds;
+
+            if (clickedOffset.x >= bounds.x && clickedOffset.x <= bounds.x + bounds.width && clickedOffset.y >= bounds.y && clickedOffset.y <= bounds.y + bounds.height) {
+              hitMarker = clickedMarkerRef.current;
+            }
+          }
+        } // 🎯 세 번째: 나머지 마커들을 역순으로 체크 (위에 그려진 것부터)
+
+
+        if (!hitMarker) {
+          for (var i = markersRef.current.length - 1; i >= 0; i--) {
+            var marker = markersRef.current[i];
+            if (marker.visible === false) continue; // 이미 체크한 hover/clicked 마커는 스킵
+
+            if (marker.id === ((_a = hoveredMarkerRef.current) === null || _a === void 0 ? void 0 : _a.id)) continue;
+            if (marker.id === ((_b = clickedMarkerRef.current) === null || _b === void 0 ? void 0 : _b.id)) continue;
+            var markerData = markerBoundsRef.current.get(marker.id);
+            if (!markerData) continue;
+            var bounds = markerData.bounds;
+
+            if (clickedOffset.x >= bounds.x && clickedOffset.x <= bounds.x + bounds.width && clickedOffset.y >= bounds.y && clickedOffset.y <= bounds.y + bounds.height) {
+              hitMarker = marker;
+              break;
+            }
+          }
+        }
+      } // 2. 마커에 히트 안 되면 폴리곤 체크
+
+
+      var hitPolygon = findPolygonAt(clickedOffset.x, clickedOffset.y); // 마커 클릭 해제
+
+      if (clickedMarkerRef.current) {
+        clickedMarkerRef.current = null;
+        renderInteractionMarkers();
+      }
+
+      if (hitPolygon) {
+        // 같은 폴리곤 다시 클릭하면 선택 해제 (토글)
+        if (((_c = clickedPolygonRef.current) === null || _c === void 0 ? void 0 : _c.id) === hitPolygon.id) {
+          console.log('🖱️ Polygon deselected:', hitPolygon.id);
+          clickedPolygonRef.current = null; // 선택 해제 시에도 콜백 호출 (null 전달)
+
+          if (onPolygonClick) {
+            onPolygonClick(null);
+          }
+        } else {
+          console.log('🖱️ Polygon selected:', hitPolygon.id);
+          clickedPolygonRef.current = hitPolygon; // 선택 시 콜백 호출
+
+          if (onPolygonClick) {
+            onPolygonClick(hitPolygon);
+          }
+        } // 인터랙션 레이어 재렌더링
+
+
+        renderInteractionPolygons();
+      }
+    }; // 마우스 이벤트 RAF 스로틀링용
+
+
+    var rafIdRef = React.useRef(); // 마우스 이벤트 핸들러 (requestAnimationFrame으로 최적화)
+
+    var handleMouseMove = function (e) {
+      // 🚀 드래그 중이면 호버 처리 스킵 (WoongCanvasMarker 방식)
+      if (draggingRef.current) return; // 이미 RAF가 대기 중이면 스킵
+
+      if (rafIdRef.current) return;
+      rafIdRef.current = requestAnimationFrame(function () {
+        var _a, _b, _c;
+
+        rafIdRef.current = undefined;
+
+        var _d = parseEventToOffset(e),
+            x = _d.x,
+            y = _d.y; // 1. 마커 먼저 체크 (우선순위: hover 중 → clicked 중 → 배열 역순)
+
+
+        var hitMarker = null;
+
+        if (markersRef.current) {
+          // 🎯 최우선: 현재 hover 중인 마커가 있으면 그것부터 체크
+          if (hoveredMarkerRef.current && hoveredMarkerRef.current.visible !== false) {
+            var markerData = markerBoundsRef.current.get(hoveredMarkerRef.current.id);
+
+            if (markerData) {
+              var bounds = markerData.bounds;
+
+              if (x >= bounds.x && x <= bounds.x + bounds.width && y >= bounds.y && y <= bounds.y + bounds.height) {
+                hitMarker = hoveredMarkerRef.current;
+              }
+            }
+          } // 🎯 두 번째: hover 중인 마커에 히트 안 되고, clicked 마커가 있으면 체크
+
+
+          if (!hitMarker && clickedMarkerRef.current && clickedMarkerRef.current.visible !== false) {
+            var markerData = markerBoundsRef.current.get(clickedMarkerRef.current.id);
+
+            if (markerData) {
+              var bounds = markerData.bounds;
+
+              if (x >= bounds.x && x <= bounds.x + bounds.width && y >= bounds.y && y <= bounds.y + bounds.height) {
+                hitMarker = clickedMarkerRef.current;
+              }
+            }
+          } // 🎯 세 번째: 나머지 마커들을 역순으로 체크 (위에 그려진 것부터)
+
+
+          if (!hitMarker) {
+            for (var i = markersRef.current.length - 1; i >= 0; i--) {
+              var marker = markersRef.current[i];
+              if (marker.visible === false) continue; // 이미 체크한 hover/clicked 마커는 스킵
+
+              if (marker.id === ((_a = hoveredMarkerRef.current) === null || _a === void 0 ? void 0 : _a.id)) continue;
+              if (marker.id === ((_b = clickedMarkerRef.current) === null || _b === void 0 ? void 0 : _b.id)) continue;
+              var markerData = markerBoundsRef.current.get(marker.id);
+              if (!markerData) continue;
+              var bounds = markerData.bounds;
+
+              if (x >= bounds.x && x <= bounds.x + bounds.width && y >= bounds.y && y <= bounds.y + bounds.height) {
+                hitMarker = marker;
+                break;
+              }
+            }
+          }
+        } // 마커가 호버되었을 때
+
+
+        if (hitMarker) {
+          // 폴리곤 호버 해제
+          if (hoveredPolygonRef.current) {
+            hoveredPolygonRef.current = null;
+
+            if (onPolygonLeave) {
+              onPolygonLeave();
+            }
+          } // 마커 호버 상태 업데이트
+
+
+          if (hitMarker.id !== ((_c = hoveredMarkerRef.current) === null || _c === void 0 ? void 0 : _c.id)) {
+            hoveredMarkerRef.current = hitMarker;
+            console.log('🎯 Marker hovered:', hitMarker.id);
+
+            if (onMarkerHover) {
+              onMarkerHover(hitMarker);
+            }
+
+            renderInteractionMarkers();
+            renderInteractionPolygons();
+          }
+
+          return;
+        } // 2. 마커에 히트 안 되면 폴리곤 체크
+
+
+        var hitPolygon = findPolygonAt(x, y); // 마커 호버 해제
+
+        if (hoveredMarkerRef.current) {
+          if (onMarkerLeave) {
+            onMarkerLeave();
+          }
+
+          hoveredMarkerRef.current = null;
+          renderInteractionMarkers();
+        }
+
+        if (hitPolygon !== hoveredPolygonRef.current) {
+          // leave 이벤트
+          if (hoveredPolygonRef.current && onPolygonLeave) {
+            onPolygonLeave();
+          } // hover 이벤트
+
+
+          hoveredPolygonRef.current = hitPolygon;
+
+          if (hitPolygon && onPolygonHover) {
+            onPolygonHover(hitPolygon);
+          } // 인터랙션 레이어 재렌더링 (호버 + 클릭)
+
+
+          renderInteractionPolygons();
+        }
+      });
+    };
+
+    var handleCenterChanged = function () {
+      // 드래그 중에는 리렌더 대신 transform 으로만 추종
+      var center = controller.getCurrBounds().getCenter();
+      var curr = controller.positionToOffset(center);
+      var prev = prevCenterOffsetRef.current;
+
+      if (!prev) {
+        prevCenterOffsetRef.current = {
+          x: curr.x,
+          y: curr.y
+        };
+        draggingRef.current = true;
+        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
+      };
+      draggingRef.current = true;
+
+      if (containerRef.current) {
+        containerRef.current.style.transform = "translate(".concat(accumTranslateRef.current.x, "px, ").concat(accumTranslateRef.current.y, "px)");
+      }
+    };
+
+    var handleMouseLeave = function () {
+      // RAF 취소
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = undefined;
+      }
+
+      if (hoveredPolygonRef.current && onPolygonLeave) {
+        onPolygonLeave();
+      }
+
+      hoveredPolygonRef.current = null;
+      hoveredMarkerRef.current = null;
+      renderInteractionMarkers();
+      renderInteractionPolygons();
+    }; // 🚀 initialize - 폴리곤 캔버스 초기화 (독립)
+
+
+    React.useEffect(function () {
+      if (baseCanvasRef.current && hoverCanvasRef.current && containerRef.current) {
+        // 2d 컨텍스트 설정 (폴리곤 캔버스만)
+        baseContextRef.current = baseCanvasRef.current.getContext('2d');
+        hoverContextRef.current = hoverCanvasRef.current.getContext('2d'); // 스케일링 (폴리곤 캔버스만)
+
+        if (baseContextRef.current) {
+          scaleCanvas(controller, baseCanvasRef.current, baseContextRef.current);
+        }
+
+        if (hoverContextRef.current) {
+          scaleCanvas(controller, hoverCanvasRef.current, hoverContextRef.current);
+        } // 폴리곤 데이터가 있으면 렌더링
+
+
+        if (polygonsRef.current.length > 0) {
+          renderBasePolygons();
+          renderInteractionPolygons();
+        }
+      }
+    }, []); // 🚀 initialize - 마커 캔버스 초기화 (독립)
+
+    React.useEffect(function () {
+      if (baseMarkerCanvasRef.current && interactiveMarkerCanvasRef.current) {
+        // 2d 컨텍스트 설정 (마커 캔버스만)
+        baseMarkerContextRef.current = baseMarkerCanvasRef.current.getContext('2d');
+        interactiveMarkerContextRef.current = interactiveMarkerCanvasRef.current.getContext('2d'); // 스케일링 (마커 캔버스만)
+
+        if (baseMarkerContextRef.current) {
+          scaleCanvas(controller, baseMarkerCanvasRef.current, baseMarkerContextRef.current);
+        }
+
+        if (interactiveMarkerContextRef.current) {
+          scaleCanvas(controller, interactiveMarkerCanvasRef.current, interactiveMarkerContextRef.current);
+        } // 마커 데이터가 있으면 렌더링
+
+
+        if (markersRef.current.length > 0 && markerRenderer) {
+          renderBaseMarkers();
+          renderInteractionMarkers();
+        }
+      }
+    }, [markerRenderer]); // 🚀 공통 초기화 - 이벤트 등록 및 리사이즈
+
+    React.useEffect(function () {
+      var resizeObserver;
+
+      if (containerRef.current) {
+        // 리사이즈 처리
+        resizeObserver = new ResizeObserver(function () {
+          // 폴리곤 캔버스 리사이즈
+          if (baseCanvasRef.current && baseContextRef.current) {
+            clearRect(baseCanvasRef.current, baseContextRef.current);
+            scaleCanvas(controller, baseCanvasRef.current, baseContextRef.current);
+          }
+
+          if (hoverCanvasRef.current && hoverContextRef.current) {
+            clearRect(hoverCanvasRef.current, hoverContextRef.current);
+            scaleCanvas(controller, hoverCanvasRef.current, hoverContextRef.current);
+          } // 마커 캔버스 리사이즈
+
+
+          if (baseMarkerCanvasRef.current && baseMarkerContextRef.current) {
+            clearRect(baseMarkerCanvasRef.current, baseMarkerContextRef.current);
+            scaleCanvas(controller, baseMarkerCanvasRef.current, baseMarkerContextRef.current);
+          }
+
+          if (interactiveMarkerCanvasRef.current && interactiveMarkerContextRef.current) {
+            clearRect(interactiveMarkerCanvasRef.current, interactiveMarkerContextRef.current);
+            scaleCanvas(controller, interactiveMarkerCanvasRef.current, interactiveMarkerContextRef.current);
+          } // 폴리곤 렌더링
+
+
+          if (polygonsRef.current.length > 0) {
+            renderBasePolygons();
+            renderInteractionPolygons();
+          } // 마커 렌더링
+
+
+          if (markersRef.current.length > 0 && markerRenderer) {
+            renderBaseMarkers();
+            renderInteractionMarkers();
+          }
+        });
+        resizeObserver.observe(controller.mapDivElement); // 🚀 이벤트 등록 (한 번만)
+
+        controller.addEventListener('IDLE', handleIdle);
+        controller.addEventListener('ZOOMSTART', handleZoomStart);
+        controller.addEventListener('ZOOM_CHANGED', handleZoomEnd);
+        controller.addEventListener('CLICK', handleMapClick);
+        controller.addEventListener('CENTER_CHANGED', handleCenterChanged); // 지도 div에 마우스 이벤트 등록
+
+        controller.mapDivElement.addEventListener('mousemove', handleMouseMove);
+        controller.mapDivElement.addEventListener('mouseleave', handleMouseLeave);
+      }
+
+      return function () {
+        // RAF 정리
+        if (rafIdRef.current) {
+          cancelAnimationFrame(rafIdRef.current);
+        }
+
+        resizeObserver && resizeObserver.disconnect();
+        controller.removeEventListener('IDLE', handleIdle);
+        controller.removeEventListener('ZOOMSTART', handleZoomStart);
+        controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
+        controller.removeEventListener('CLICK', handleMapClick);
+        controller.removeEventListener('CENTER_CHANGED', handleCenterChanged);
+        controller.mapDivElement.removeEventListener('mousemove', handleMouseMove);
+        controller.mapDivElement.removeEventListener('mouseleave', handleMouseLeave);
+      };
+    }, []); // 🚀 polygons 데이터 업데이트 (독립)
+
+    React.useEffect(function () {
+      console.log('📦 [useEffect] polygons 변경:', polygons === null || polygons === void 0 ? void 0 : polygons.length, '개'); // refs 업데이트
+
+      polygonsRef.current = polygons || []; // 🚀 폴리곤만 렌더링 (마커와 독립)
+
+      if (baseContextRef.current) {
+        renderBasePolygons();
+        renderInteractionPolygons();
+      }
+    }, [polygons]); // 🚀 markers 데이터 업데이트 (독립)
+
+    React.useEffect(function () {
+      console.log('📦 [useEffect] markers 변경:', markers === null || markers === void 0 ? void 0 : markers.length, '개'); // refs 업데이트
+
+      markersRef.current = markers || []; // 🚀 마커만 렌더링 (폴리곤과 독립)
+
+      if (baseMarkerContextRef.current && markerRenderer) {
+        renderBaseMarkers();
+        renderInteractionMarkers();
+      }
+    }, [markers, markerRenderer]); // CanvasMarker 스타일의 createPortal return
+
+    return reactDom.createPortal(React__default["default"].createElement("div", {
+      ref: containerRef,
+      style: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none'
+      }
+    }, React__default["default"].createElement("canvas", {
+      ref: baseCanvasRef,
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        pointerEvents: 'revert-layer',
+        width: '100%',
+        height: '100%'
+      }
+    }), React__default["default"].createElement("canvas", {
+      ref: hoverCanvasRef,
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        pointerEvents: 'none',
+        width: '100%',
+        height: '100%'
+      }
+    }), React__default["default"].createElement("canvas", {
+      ref: baseMarkerCanvasRef,
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        pointerEvents: 'none',
+        width: '100%',
+        height: '100%'
+      }
+    }), React__default["default"].createElement("canvas", {
+      ref: interactiveMarkerCanvasRef,
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        pointerEvents: 'none',
+        width: '100%',
+        height: '100%'
+      }
+    })), divElement);
+  });
+
   /**
    * Mint Map 컴포넌트
    *
@@ -5918,6 +7644,8 @@
   exports.AnimationPlayer = AnimationPlayer;
   exports.Bounds = Bounds;
   exports.CanvasMarker = CanvasMarker;
+  exports.CanvasMarkerClaude = CanvasMarkerClaude;
+  exports.CanvasMarkerHanquf = CanvasMarkerHanquf;
   exports.CircleMarker = CircleMarker;
   exports.Drawable = Drawable;
   exports.GeoCalulator = GeoCalulator;