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

package/dist/components/mint-map/core/advanced/canvas/CanvasMarkerClaude.js

@@ -0,0 +1,1084 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var MintMapProvider = require('../../provider/MintMapProvider.js');
+var MapDrawables = require('../../../types/MapDrawables.js');
+var MapTypes = require('../../../types/MapTypes.js');
+require('../../../types/MapEventTypes.js');
+var reactDom = require('react-dom');
+var canvasUtil = require('./draw/canvas-util.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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 = MintMapProvider.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 MapDrawables.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;
+    canvasUtil.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;
+    canvasUtil.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 MapTypes.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;
+    canvasUtil.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 MapTypes.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 MapTypes.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; // 인터랙션 캔버스 클리어
+
+    canvasUtil.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;
+    canvasUtil.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) {
+        canvasUtil.scaleCanvas(controller, baseCanvasRef.current, baseContextRef.current);
+      }
+
+      if (hoverContextRef.current) {
+        canvasUtil.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) {
+        canvasUtil.scaleCanvas(controller, baseMarkerCanvasRef.current, baseMarkerContextRef.current);
+      }
+
+      if (interactiveMarkerContextRef.current) {
+        canvasUtil.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) {
+          canvasUtil.clearRect(baseCanvasRef.current, baseContextRef.current);
+          canvasUtil.scaleCanvas(controller, baseCanvasRef.current, baseContextRef.current);
+        }
+
+        if (hoverCanvasRef.current && hoverContextRef.current) {
+          canvasUtil.clearRect(hoverCanvasRef.current, hoverContextRef.current);
+          canvasUtil.scaleCanvas(controller, hoverCanvasRef.current, hoverContextRef.current);
+        } // 마커 캔버스 리사이즈
+
+
+        if (baseMarkerCanvasRef.current && baseMarkerContextRef.current) {
+          canvasUtil.clearRect(baseMarkerCanvasRef.current, baseMarkerContextRef.current);
+          canvasUtil.scaleCanvas(controller, baseMarkerCanvasRef.current, baseMarkerContextRef.current);
+        }
+
+        if (interactiveMarkerCanvasRef.current && interactiveMarkerContextRef.current) {
+          canvasUtil.clearRect(interactiveMarkerCanvasRef.current, interactiveMarkerContextRef.current);
+          canvasUtil.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);
+});
+
+exports.CanvasMarkerClaude = CanvasMarkerClaude;