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

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { __extends, __awaiter, __generator, __spreadArray, __assign, __rest } from 'tslib';
+import { __extends, __assign, __awaiter, __generator, __spreadArray, __rest } from 'tslib';
 import React, { createContext, useContext, useRef, useCallback, useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames/bind';
 import styleInject from 'style-inject';
@@ -652,7 +652,6 @@ styleInject(css_248z$1);
 
 /**
  * 캔버스 데이터 타입 Enum
- * 마커인지 폴리곤인지 구분하는 상수
  */
 var CanvasDataType;
 
@@ -795,7 +794,11 @@ function () {
 }();
 
 /**
- * 폴리곤 offset 계산
+ * 폴리곤 좌표 변환 (위경도 → 화면 좌표)
+ *
+ * @param polygonData 폴리곤 데이터
+ * @param controller MintMapController 인스턴스
+ * @returns 변환된 화면 좌표 배열 (4차원 배열) 또는 null
  */
 
 var computePolygonOffsets = function (polygonData, controller) {
@@ -805,7 +808,7 @@ var computePolygonOffsets = function (polygonData, controller) {
     return null;
   }
 
-  var result = [];
+  var result = []; // GeoJSON MultiPolygon 구조: [MultiPolygon][PolygonGroup][Coordinate][lng, lat]
 
   for (var _i = 0, _a = paths.coordinates; _i < _a.length; _i++) {
     var multiPolygon = _a[_i];
@@ -816,7 +819,8 @@ var computePolygonOffsets = function (polygonData, controller) {
       var polygonOffsets = [];
 
       for (var _c = 0, polygonGroup_1 = polygonGroup; _c < polygonGroup_1.length; _c++) {
-        var coord = polygonGroup_1[_c];
+        var coord = polygonGroup_1[_c]; // GeoJSON은 [lng, lat] 순서이지만 Position은 [lat, lng] 순서
+
         var pos = new Position(coord[1], coord[0]);
         var offset = controller.positionToOffset(pos);
         polygonOffsets.push([offset.x, offset.y]);
@@ -831,30 +835,37 @@ var computePolygonOffsets = function (polygonData, controller) {
   return result;
 };
 /**
- * 마커 offset 계산
+ * 마커 좌표 변환 (위경도 → 화면 좌표)
+ *
+ * @param markerData 마커 데이터
+ * @param controller MintMapController 인스턴스
+ * @returns 변환된 화면 좌표 또는 null
  */
 
 var computeMarkerOffset = function (markerData, controller) {
-  if (!markerData.position) {
-    return null;
-  }
-
+  if (!markerData.position) return null;
   return controller.positionToOffset(markerData.position);
 };
 /**
- * Point-in-Polygon 알고리즘
+ * Point-in-Polygon 알고리즘 (Ray Casting)
+ *
+ * @param point 확인할 점의 좌표
+ * @param polygon 폴리곤 좌표 배열
+ * @returns 점이 폴리곤 내부에 있으면 true
  */
 
 var isPointInPolygon = function (point, polygon) {
+  // Ray Casting 알고리즘: 점에서 오른쪽으로 무한히 뻗은 선과 폴리곤 변의 교차 횟수로 판단
   var inside = false;
 
   for (var i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
     var xi = polygon[i][0],
         yi = polygon[i][1];
     var xj = polygon[j][0],
-        yj = polygon[j][1];
+        yj = polygon[j][1]; // 점의 y 좌표가 변의 양 끝점 사이에 있고, 교차점의 x 좌표가 점의 x 좌표보다 큰지 확인
+
     var intersect = yi > point.y !== yj > point.y && point.x < (xj - xi) * (point.y - yi) / (yj - yi) + xi;
-    if (intersect) inside = !inside;
+    if (intersect) inside = !inside; // 교차할 때마다 inside 상태 토글
   }
 
   return inside;
@@ -862,23 +873,20 @@ var isPointInPolygon = function (point, polygon) {
 /**
  * 폴리곤 히트 테스트 (도넛 폴리곤 지원)
  *
- * 로직:
- * 1. 외부 폴리곤(첫 번째): 내부에 있어야 함
- * 2. 내부 구멍들(나머지): 내부에 있으면 안 됨 (evenodd 규칙)
- *
- * 중요: 도넛 폴리곤과 내부 폴리곤은 별개의 polygonData로 처리됨
- * - 도넛 폴리곤 A: isDonutPolygon=true
- * - 내부 폴리곤 B: isDonutPolygon=false (별도 데이터)
+ * @param clickedOffset 클릭/마우스 위치 좌표
+ * @param polygonData 폴리곤 데이터
+ * @param getPolygonOffsets 폴리곤 좌표 변환 함수
+ * @returns 점이 폴리곤 내부에 있으면 true
  */
 
 var isPointInPolygonData = function (clickedOffset, polygonData, getPolygonOffsets) {
   var polygonOffsets = getPolygonOffsets(polygonData);
-  if (!polygonOffsets) return false; // 🍩 도넛 폴리곤 처리 (isDonutPolygon === true)
+  if (!polygonOffsets) return false; // 도넛 폴리곤 처리: 외부 폴리곤 내부에 있으면서 구멍(hole) 내부에 있지 않아야 함
 
   if (polygonData.isDonutPolygon) {
     for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
       var multiPolygon = polygonOffsets_1[_i];
-      if (multiPolygon.length === 0) continue; // 외부 폴리곤만 있는 경우 (구멍 없음) - 일반 폴리곤처럼 처리
+      if (multiPolygon.length === 0) continue; // 구멍이 없는 경우 일반 폴리곤과 동일
 
       if (multiPolygon.length === 1) {
         if (isPointInPolygon(clickedOffset, multiPolygon[0])) {
@@ -886,33 +894,30 @@ var isPointInPolygonData = function (clickedOffset, polygonData, getPolygonOffse
         }
 
         continue;
-      } // 1. 외부 폴리곤(첫 번째)에 포함되는지 확인
+      } // 외부 폴리곤 내부에 있는지 확인
 
 
       var outerPolygon = multiPolygon[0];
 
       if (!isPointInPolygon(clickedOffset, outerPolygon)) {
-        continue; // 외부 폴리곤 밖이면 다음 multiPolygon 확인
-      } // 2. 내부 구멍들(나머지)에 포함되는지 확인
+        continue;
+      } // 구멍 내부에 있으면 false (도넛의 빈 공간)
 
 
       for (var i = 1; i < multiPolygon.length; i++) {
         var hole = multiPolygon[i];
 
         if (isPointInPolygon(clickedOffset, hole)) {
-          // ❌ 구멍 안에 있음 → 이 도넛 폴리곤은 히트 안 됨
-          // 다른 multiPolygon 체크하지 않고 바로 false 반환
-          // (도넛 폴리곤의 구멍 안은 무조건 클릭 불가)
           return false;
         }
-      } // ✅ 외부 폴리곤 안 + 구멍 밖 = 히트!
+      } // 외부 폴리곤 내부에 있으면서 모든 구멍 밖에 있으면 true
 
 
       return true;
     }
 
     return false;
-  } // 일반 폴리곤 처리 (isDonutPolygon === false 또는 undefined)
+  } // 일반 폴리곤 처리
 
 
   for (var _a = 0, polygonOffsets_2 = polygonOffsets; _a < polygonOffsets_2.length; _a++) {
@@ -931,12 +936,12 @@ var isPointInPolygonData = function (clickedOffset, polygonData, getPolygonOffse
   return false;
 };
 /**
- * 마커 히트 테스트 (클릭/hover 영역 체크)
+ * 마커 히트 테스트 (꼬리 제외)
  *
- * 🎯 중요: 꼬리(tail)는 Hit Test 영역에서 제외됩니다!
- * - markerOffset.y는 마커 최하단(꼬리 끝) 좌표
- * - boxHeight는 마커 본체만 포함 (꼬리 제외)
- * - tailHeight만큼 위로 올려서 본체만 Hit Test 영역으로 사용
+ * @param clickedOffset 클릭/마우스 위치 좌표
+ * @param markerData 마커 데이터
+ * @param getMarkerOffset 마커 좌표 변환 함수
+ * @returns 점이 마커 영역 내부에 있으면 true
  */
 
 var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset) {
@@ -944,41 +949,41 @@ var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset)
   if (!markerOffset) return false;
   var boxWidth = markerData.boxWidth || 50;
   var boxHeight = markerData.boxHeight || 28;
-  var tailHeight = markerData.tailHeight || 0; // 🎯 tailHeight 사용!
+  var tailHeight = markerData.tailHeight || 0; // 마커 중심점 기준으로 박스 영역 계산 (꼬리는 제외)
 
   var x = markerOffset.x - boxWidth / 2;
-  var y = markerOffset.y - boxHeight - tailHeight; // 🔥 꼬리만큼 위로!
+  var y = markerOffset.y - boxHeight - tailHeight; // 클릭 위치가 박스 영역 내부에 있는지 확인
 
   return clickedOffset.x >= x && clickedOffset.x <= x + boxWidth && clickedOffset.y >= y && clickedOffset.y <= y + boxHeight;
-};
+}; // Hex 색상을 RGBA로 변환
+
 var hexToRgba = function (hexColor, alpha) {
   if (alpha === void 0) {
     alpha = 1;
-  } // NOTE: 입력된 hexColor에서 "#" 제거
-
+  }
 
-  var hex = hexColor.replace('#', ''); // NOTE: 6자리일 경우 알파 값은 사용자가 제공한 alpha 값으로 설정
+  var hex = hexColor.replace('#', '');
 
-  if (hex.length === 6) {
-    var r = parseInt(hex.substring(0, 2), 16);
-    var g = parseInt(hex.substring(2, 4), 16);
-    var b = parseInt(hex.substring(4, 6), 16);
-    return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
+  if (hex.length !== 6) {
+    throw new Error('Invalid hex color format');
   }
 
-  throw new Error('Invalid hex color format');
+  var r = parseInt(hex.substring(0, 2), 16);
+  var g = parseInt(hex.substring(2, 4), 16);
+  var b = parseInt(hex.substring(4, 6), 16);
+  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
 };
 var tempCanvas = document.createElement('canvas');
 var tempCtx = tempCanvas.getContext('2d');
 /**
- * 텍스트 박스의 너비를 계산합니다.
+ * 텍스트 박스 너비 계산
  *
- * @param {Object} params - 파라미터 객체
- * @param {string} params.text - 측정할 텍스트
- * @param {string} params.fontConfig - 폰트 설정 (예: 'bold 16px Arial')
- * @param {number} params.padding - 텍스트 박스에 적용할 패딩 값
- * @param {number} params.minWidth - 최소 너비
- * @returns {number} 계산된 텍스트 박스의 너비
+ * @param params 파라미터 객체
+ * @param params.text 측정할 텍스트
+ * @param params.fontConfig 폰트 설정
+ * @param params.padding 패딩 값 (px)
+ * @param params.minWidth 최소 너비 (px)
+ * @returns 계산된 텍스트 박스 너비 (px)
  */
 
 var calculateTextBoxWidth = function (_a) {
@@ -993,31 +998,28 @@ var calculateTextBoxWidth = function (_a) {
 };
 
 var WoongCanvasContext = createContext(null);
+/**
+ * WoongCanvasProvider 컴포넌트
+ *
+ * 다중 WoongCanvas 인스턴스를 관리하고 zIndex 기반 이벤트 우선순위를 처리합니다.
+ */
+
 var WoongCanvasProvider = function (_a) {
   var children = _a.children;
-  var controller = useMintMapController(); // Refs
-
+  var controller = useMintMapController();
   var componentsRef = useRef([]);
   var currentHoveredRef = useRef(null);
   var currentHoveredDataRef = useRef(null);
-  var draggingRef = useRef(false);
-  /**
-   * 컴포넌트 등록 (zIndex 내림차순 정렬)
-   * 높은 zIndex가 먼저 처리됨
-   */
+  var draggingRef = useRef(false); // 컴포넌트 등록 (zIndex 내림차순 정렬)
 
   var registerComponent = useCallback(function (instance) {
     componentsRef.current.push(instance);
     componentsRef.current.sort(function (a, b) {
       return b.zIndex - a.zIndex;
     });
-  }, []);
-  /**
-   * 컴포넌트 등록 해제
-   */
+  }, []); // 컴포넌트 등록 해제
 
   var unregisterComponent = useCallback(function (instance) {
-    // Hover 중이던 컴포넌트면 초기화
     if (currentHoveredRef.current === instance) {
       currentHoveredRef.current = null;
       currentHoveredDataRef.current = null;
@@ -1026,99 +1028,77 @@ var WoongCanvasProvider = function (_a) {
     componentsRef.current = componentsRef.current.filter(function (c) {
       return c !== instance;
     });
-  }, []);
-  /**
-   * 전역 클릭 핸들러 (zIndex 우선순위)
-   */
+  }, []); // 전역 클릭 핸들러 (zIndex 우선순위)
 
   var handleGlobalClick = useCallback(function (event) {
-    var _a;
+    var _a, _b;
 
     if (!((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
-    var clickedOffset = controller.positionToOffset(event.param.position); // zIndex 순서대로 순회 (높은 것부터)
-
-    for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
-      var component = _b[_i]; // 🚫 상호작용이 비활성화된 컴포넌트는 스킵
+    var clickedOffset = controller.positionToOffset(event.param.position); // zIndex 내림차순으로 정렬된 컴포넌트 순회 (높은 zIndex가 먼저 처리)
 
+    for (var _i = 0, _c = componentsRef.current; _i < _c.length; _i++) {
+      var component = _c[_i];
       if (component.isInteractionDisabled()) continue;
       var data = component.findData(clickedOffset);
+      if (!data) continue; // 첫 번째로 찾은 항목만 처리하고 종료 (zIndex 우선순위)
 
-      if (data) {
-        component.handleLocalClick(data);
-
-        if (component.onClick) {
-          component.onClick(data, component.getSelectedIds());
-        }
-
-        return; // 첫 번째 히트만 처리
-      }
+      component.handleLocalClick(data);
+      (_b = component.onClick) === null || _b === void 0 ? void 0 : _b.call(component, data, component.getSelectedIds());
+      return;
     }
-  }, [controller]);
-  /**
-   * 전역 마우스 이동 핸들러 (zIndex 우선순위)
-   */
+  }, [controller]); // 전역 마우스 이동 핸들러 (zIndex 우선순위)
 
   var handleGlobalMouseMove = useCallback(function (event) {
     var _a;
 
     if (draggingRef.current || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
-    var mouseOffset = controller.positionToOffset(event.param.position); // zIndex 순서대로 순회하여 Hover 대상 찾기
-
+    var mouseOffset = controller.positionToOffset(event.param.position);
     var newHoveredComponent = null;
-    var newHoveredData = null;
+    var newHoveredData = null; // zIndex 내림차순으로 정렬된 컴포넌트 순회 (높은 zIndex가 먼저 처리)
 
     for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
-      var component = _b[_i]; // 🚫 상호작용이 비활성화된 컴포넌트는 스킵
-
+      var component = _b[_i];
       if (component.isInteractionDisabled()) continue;
       var data = component.findData(mouseOffset);
+      if (!data) continue; // 첫 번째로 찾은 항목만 hover 처리 (zIndex 우선순위)
 
-      if (data) {
-        newHoveredComponent = component;
-        newHoveredData = data;
-        break; // 첫 번째 히트만 처리
-      }
-    } // Hover 상태 변경 감지 (최적화: 별도 ref로 직접 비교)
-
+      newHoveredComponent = component;
+      newHoveredData = data;
+      break;
+    } // hover 상태가 변경되지 않았으면 종료 (불필요한 렌더링 방지)
 
-    if (currentHoveredRef.current !== newHoveredComponent || currentHoveredDataRef.current !== newHoveredData) {
-      // 이전 hover 해제
-      if (currentHoveredRef.current) {
-        currentHoveredRef.current.setHovered(null);
 
-        if (currentHoveredRef.current.onMouseOut && currentHoveredDataRef.current) {
-          currentHoveredRef.current.onMouseOut(currentHoveredDataRef.current);
-        }
-      } // 새 hover 설정
+    if (currentHoveredRef.current === newHoveredComponent && currentHoveredDataRef.current === newHoveredData) {
+      return;
+    } // 기존 hover 항목에 mouseOut 이벤트 발생
 
 
-      if (newHoveredComponent && newHoveredData) {
-        newHoveredComponent.setHovered(newHoveredData);
+    if (currentHoveredRef.current) {
+      currentHoveredRef.current.setHovered(null);
 
-        if (newHoveredComponent.onMouseOver) {
-          newHoveredComponent.onMouseOver(newHoveredData);
-        }
+      if (currentHoveredRef.current.onMouseOut && currentHoveredDataRef.current) {
+        currentHoveredRef.current.onMouseOut(currentHoveredDataRef.current);
       }
+    } // 새 hover 항목에 mouseOver 이벤트 발생
 
-      currentHoveredRef.current = newHoveredComponent;
-      currentHoveredDataRef.current = newHoveredData;
+
+    if (newHoveredComponent && newHoveredData) {
+      newHoveredComponent.setHovered(newHoveredData);
+
+      if (newHoveredComponent.onMouseOver) {
+        newHoveredComponent.onMouseOver(newHoveredData);
+      }
     }
-  }, [controller]);
-  /**
-   * 줌/드래그 시작 (마우스 이동 이벤트 무시)
-   */
 
+    currentHoveredRef.current = newHoveredComponent;
+    currentHoveredDataRef.current = newHoveredData;
+  }, [controller]);
   var handleZoomStart = useCallback(function () {
     draggingRef.current = true;
   }, []);
-  /**
-   * 지도 idle (마우스 이동 이벤트 재개)
-   */
-
   var handleIdle = useCallback(function () {
     draggingRef.current = false;
-  }, []); // 이벤트 리스너 등록
-
+  }, []);
   useEffect(function () {
     controller.addEventListener('CLICK', handleGlobalClick);
     controller.addEventListener('MOUSEMOVE', handleGlobalMouseMove);
@@ -1130,8 +1110,7 @@ var WoongCanvasProvider = function (_a) {
       controller.removeEventListener('ZOOMSTART', handleZoomStart);
       controller.removeEventListener('IDLE', handleIdle);
     };
-  }, [controller, handleGlobalClick, handleGlobalMouseMove, handleZoomStart, handleIdle]); // Context value 메모이제이션
-
+  }, [controller, handleGlobalClick, handleGlobalMouseMove, handleZoomStart, handleIdle]);
   var contextValue = useMemo(function () {
     return {
       registerComponent: registerComponent,
@@ -1142,65 +1121,43 @@ var WoongCanvasProvider = function (_a) {
     value: contextValue
   }, children);
 };
+/**
+ * WoongCanvas Context Hook
+ *
+ * @returns WoongCanvasContextValue 또는 null (Provider 없으면)
+ */
+
 var useWoongCanvasContext = function () {
-  var context = useContext(WoongCanvasContext);
-  return context;
+  return useContext(WoongCanvasContext);
 };
 
-// ============================================================================
-// 성능 최적화 상수 (30,000개 마커/폴리곤 기준 최적화)
-// ============================================================================
-
 /**
- * 공간 인덱스 그리드 셀 크기 (px)
- *
- * 최적값 계산:
- * - 목표: 클릭 시 셀당 10~30개 항목만 체크 (빠른 Hit Test)
- * - 화면 크기: 1920×1080 기준
- * - 30,000개 항목 → 50px 셀 크기 = 약 800개 셀 = 셀당 ~37개
- *
- * 성능 비교 (30,000개 기준):
- * - 200px: 셀당 ~577개 → Hit Test O(577) ❌ 느림
- * - 50px:  셀당 ~37개  → Hit Test O(37)  ✅ 15배 빠름!
+ * 공간 인덱스 그리드 셀 크기 (픽셀 단위)
  *
- * 트레이드오프:
- * - 작을수록: Hit Test 빠름, 메모리 사용량 증가
- * - 클수록: 메모리 효율적, Hit Test 느림
+ * @default 50
  */
 var SPATIAL_GRID_CELL_SIZE = 50;
 /**
- * 뷰포트 컬링 여유 공간 (px)
+ * 뷰포트 컬링 여유 공간 (픽셀 단위)
  *
- * 화면 밖 100px까지 렌더링하여 스크롤 시 부드러운 전환
- * 30,000개 중 실제 렌더링: 화면에 보이는 1,000~3,000개만
+ * @default 100
  */
 
 var DEFAULT_CULLING_MARGIN = 100;
 /**
  * LRU 캐시 최대 항목 수
  *
- * 좌표 변환 결과 캐싱 (positionToOffset 연산 비용 절약)
- *
- * 최적값 계산:
- * - 전체 항목: 30,000개
- * - 캐시 크기: 30,000개 → 100% 히트율 (메모리: ~2.4MB)
- *
- * 메모리 사용량 (항목당 ~80 bytes):
- * - 10,000개: ~800KB  → 캐시 히트율 33% ❌
- * - 30,000개: ~2.4MB  → 캐시 히트율 100% ✅
- *
- * zoom/pan 시 어차피 clear() 호출되므로 메모리 누적 없음
+ * @default 30000
  */
 
 var DEFAULT_MAX_CACHE_SIZE = 30000;
 /**
- * LRU (Least Recently Used) Cache
- * 메모리 제한을 위한 캐시 구현 (최적화 버전)
+ * LRU Cache (Least Recently Used)
+ *
+ * 좌표 변환 결과를 캐싱하기 위한 캐시 구현
  *
- * 개선 사항:
- * 1. get() 성능 향상: 접근 빈도 추적 없이 단순 조회만 수행 (delete+set 제거)
- * 2. set() 버그 수정: 기존 키 업데이트 시 maxSize 체크 로직 개선
- * 3. 메모리 효율: 단순 FIFO 캐시로 동작하여 오버헤드 최소화
+ * @template K 캐시 키 타입
+ * @template V 캐시 값 타입
  */
 
 var LRUCache =
@@ -1213,64 +1170,43 @@ function () {
 
     this.cache = new Map();
     this.maxSize = maxSize;
-  }
-  /**
-   * 캐시에서 값 조회
-   *
-   * 최적화: delete+set 제거
-   * - 이전: 매번 delete+set으로 LRU 갱신 (해시 재계산 비용)
-   * - 현재: 단순 조회만 수행 (O(1) 해시 조회)
-   *
-   * 트레이드오프:
-   * - 장점: 읽기 성능 대폭 향상 (10,000번 get → 이전보다 2배 빠름)
-   * - 단점: 접근 빈도가 아닌 삽입 순서 기반 eviction (FIFO)
-   *
-   * WoongCanvasMarker 사용 사례에 최적:
-   * - 좌표 변환 결과는 zoom/pan 시 어차피 전체 초기화
-   * - 접근 빈도 추적보다 빠른 조회가 더 중요
-   */
+  } // 캐시에서 값 조회
 
 
   LRUCache.prototype.get = function (key) {
     return this.cache.get(key);
-  };
-  /**
-   * 캐시에 값 저장 (버그 수정 + 최적화)
-   *
-   * 수정 사항:
-   * 1. 기존 키 업데이트 시 크기 체크 누락 버그 수정
-   * 2. 로직 명확화: 기존 항목/신규 항목 분리 처리
-   */
+  }; // 캐시에 값 저장 (FIFO eviction)
 
 
   LRUCache.prototype.set = function (key, value) {
     var exists = this.cache.has(key);
 
     if (exists) {
-      // 기존 항목 업데이트: 단순 덮어쓰기 (크기 변화 없음)
       this.cache.set(key, value);
-    } else {
-      // 신규 항목 추가: 크기 체크 필요
-      if (this.cache.size >= this.maxSize) {
-        // 가장 오래된 항목 제거 (Map의 첫 번째 항목)
-        var firstKey = this.cache.keys().next().value;
+      return;
+    }
 
-        if (firstKey !== undefined) {
-          this.cache.delete(firstKey);
-        }
-      }
+    if (this.cache.size >= this.maxSize) {
+      var firstKey = this.cache.keys().next().value;
 
-      this.cache.set(key, value);
+      if (firstKey !== undefined) {
+        this.cache.delete(firstKey);
+      }
     }
-  };
+
+    this.cache.set(key, value);
+  }; // 캐시 초기화
+
 
   LRUCache.prototype.clear = function () {
     this.cache.clear();
-  };
+  }; // 캐시 크기 반환
+
 
   LRUCache.prototype.size = function () {
     return this.cache.size;
-  };
+  }; // 키 존재 여부 확인
+
 
   LRUCache.prototype.has = function (key) {
     return this.cache.has(key);
@@ -1280,16 +1216,10 @@ function () {
 }();
 /**
  * Spatial Hash Grid (공간 해시 그리드)
- * 공간 인덱싱을 위한 그리드 기반 자료구조 (개선 버전)
  *
- * 개선 사항:
- * 1. 중복 삽입 방지: 같은 항목을 여러 번 insert 해도 안전
- * 2. 메모리 누수 방지: 기존 항목 자동 제거
- * 3. 성능 최적화: 불필요한 배열 생성 최소화
+ * 빠른 Hit Test를 위한 그리드 기반 공간 인덱싱 자료구조
  *
- * 사용 사례:
- * - 빠른 Hit Test (마우스 클릭 시 어떤 마커/폴리곤인지 찾기)
- * - 30,000개 항목 → 클릭 위치 주변 ~10개만 체크 (3,000배 빠름)
+ * @template T 인덱싱할 항목 타입
  */
 
 var SpatialHashGrid =
@@ -1303,28 +1233,24 @@ function () {
     this.cellSize = cellSize;
     this.grid = new Map();
     this.itemToCells = new Map();
-  }
-  /**
-   * 셀 키 생성 (x, y 좌표 → 그리드 셀 ID)
-   */
+  } // 셀 키 생성 (x, y 좌표 → 그리드 셀 ID)
 
 
   SpatialHashGrid.prototype.getCellKey = function (x, y) {
+    // 좌표를 셀 크기로 나눈 몫으로 셀 인덱스 계산
     var cellX = Math.floor(x / this.cellSize);
     var cellY = Math.floor(y / this.cellSize);
     return "".concat(cellX, ",").concat(cellY);
-  };
-  /**
-   * 바운딩 박스가 걸치는 모든 셀 키 배열 반환
-   */
+  }; // 바운딩 박스가 걸치는 모든 셀 키 배열 반환
 
 
   SpatialHashGrid.prototype.getCellsForBounds = function (minX, minY, maxX, maxY) {
-    var cells = [];
+    var cells = []; // 바운딩 박스가 걸치는 셀 범위 계산
+
     var startCellX = Math.floor(minX / this.cellSize);
     var startCellY = Math.floor(minY / this.cellSize);
     var endCellX = Math.floor(maxX / this.cellSize);
-    var endCellY = Math.floor(maxY / this.cellSize);
+    var endCellY = Math.floor(maxY / this.cellSize); // 바운딩 박스가 걸치는 모든 셀을 배열에 추가
 
     for (var x = startCellX; x <= endCellX; x++) {
       for (var y = startCellY; y <= endCellY; y++) {
@@ -1333,22 +1259,15 @@ function () {
     }
 
     return cells;
-  };
-  /**
-   * 항목 추가 (바운딩 박스 기반)
-   *
-   * 개선 사항:
-   * - 중복 삽입 방지: 기존 항목이 있으면 먼저 제거 후 재삽입
-   * - 메모리 누수 방지: 이전 셀 참조 완전 제거
-   */
+  }; // 항목 추가 (바운딩 박스 기반, 중복 삽입 방지)
 
 
   SpatialHashGrid.prototype.insert = function (item, minX, minY, maxX, maxY) {
-    // 1. 기존 항목 제거 (중복 방지)
-    this.remove(item); // 2. 새 위치에 삽입
+    // 기존 항목 제거 (중복 삽입 방지: 같은 항목을 여러 번 insert 해도 안전)
+    this.remove(item); // 바운딩 박스가 걸치는 모든 셀에 항목 등록
 
     var cells = this.getCellsForBounds(minX, minY, maxX, maxY);
-    this.itemToCells.set(item, cells);
+    this.itemToCells.set(item, cells); // 항목과 셀의 매핑 저장 (제거 시 필요)
 
     for (var _i = 0, cells_1 = cells; _i < cells_1.length; _i++) {
       var cell = cells_1[_i];
@@ -1359,17 +1278,12 @@ function () {
 
       this.grid.get(cell).push(item);
     }
-  };
-  /**
-   * 항목 제거
-   *
-   * 추가된 메서드: 메모리 누수 방지 및 업데이트 지원
-   */
+  }; // 항목 제거 (모든 셀에서 참조 제거)
 
 
   SpatialHashGrid.prototype.remove = function (item) {
     var prevCells = this.itemToCells.get(item);
-    if (!prevCells) return; // 각 셀에서 항목 제거
+    if (!prevCells) return; // 항목이 등록된 모든 셀에서 참조 제거 (메모리 누수 방지)
 
     for (var _i = 0, prevCells_1 = prevCells; _i < prevCells_1.length; _i++) {
       var cell = prevCells_1[_i];
@@ -1380,51 +1294,39 @@ function () {
 
         if (index !== -1) {
           cellItems.splice(index, 1);
-        } // 빈 셀 정리 (메모리 효율)
+        } // 빈 셀 정리 (메모리 효율: 사용하지 않는 셀 제거)
 
 
         if (cellItems.length === 0) {
           this.grid.delete(cell);
         }
       }
-    }
+    } // 항목과 셀의 매핑 제거
+
 
     this.itemToCells.delete(item);
-  };
-  /**
-   * 항목 위치 업데이트
-   *
-   * 추가된 메서드: remove + insert의 편의 함수
-   */
+  }; // 항목 위치 업데이트 (remove + insert)
 
 
   SpatialHashGrid.prototype.update = function (item, minX, minY, maxX, maxY) {
     this.insert(item, minX, minY, maxX, maxY);
-  };
-  /**
-   * 점 주변의 항목 조회 (1개 셀만)
-   *
-   * 성능: O(해당 셀의 항목 수) - 보통 ~10개
-   */
+  }; // 점 주변의 항목 조회 (Hit Test용)
 
 
   SpatialHashGrid.prototype.queryPoint = function (x, y) {
+    // 클릭 위치가 속한 셀의 모든 항목 조회 (O(1) 수준의 빠른 조회)
     var cellKey = this.getCellKey(x, y);
     var items = this.grid.get(cellKey); // 빈 배열 재사용 (메모리 할당 최소화)
 
     return items || [];
-  };
-  /**
-   * 영역 내 항목 조회
-   *
-   * 성능: O(셀 개수 × 셀당 평균 항목 수)
-   * Set으로 중복 제거 보장
-   */
+  }; // 영역 내 항목 조회 (Viewport Culling용)
 
 
   SpatialHashGrid.prototype.queryBounds = function (minX, minY, maxX, maxY) {
+    // 영역이 걸치는 모든 셀 찾기
     var cells = this.getCellsForBounds(minX, minY, maxX, maxY);
-    var results = new Set();
+    var results = new Set(); // 중복 제거를 위해 Set 사용
+    // 각 셀의 모든 항목을 결과에 추가
 
     for (var _i = 0, cells_2 = cells; _i < cells_2.length; _i++) {
       var cell = cells_2[_i];
@@ -1433,37 +1335,24 @@ function () {
       if (items) {
         for (var _a = 0, items_1 = items; _a < items_1.length; _a++) {
           var item = items_1[_a];
-          results.add(item);
+          results.add(item); // Set이므로 중복 자동 제거
         }
       }
     }
 
     return Array.from(results);
-  };
-  /**
-   * 항목 존재 여부 확인
-   *
-   * 추가된 메서드: 빠른 존재 여부 체크
-   */
+  }; // 항목 존재 여부 확인
 
 
   SpatialHashGrid.prototype.has = function (item) {
     return this.itemToCells.has(item);
-  };
-  /**
-   * 전체 초기화
-   */
+  }; // 전체 초기화
 
 
   SpatialHashGrid.prototype.clear = function () {
     this.grid.clear();
     this.itemToCells.clear();
-  };
-  /**
-   * 통계 정보
-   *
-   * 개선: totalItems는 실제 고유 항목 수를 정확히 반환
-   */
+  }; // 통계 정보 반환
 
 
   SpatialHashGrid.prototype.stats = function () {
@@ -1481,116 +1370,374 @@ function () {
   return SpatialHashGrid;
 }();
 
-var cn$3 = classNames.bind(styles$1);
-function MintMapCore(_a) {
-  var _this = this;
+/**
+ * 현재 뷰포트 영역 계산
+ *
+ * @param stage Konva Stage 인스턴스
+ * @param cullingMargin 컬링 여유 공간 (px)
+ * @param viewportRef 뷰포트 경계를 저장할 ref
+ */
+var updateViewport = function (stage, cullingMargin, viewportRef) {
+  if (!stage) return;
+  viewportRef.current = {
+    minX: -cullingMargin,
+    maxX: stage.width() + cullingMargin,
+    minY: -cullingMargin,
+    maxY: stage.height() + cullingMargin
+  };
+};
+/**
+ * 아이템이 현재 뷰포트 안에 있는지 확인 (바운딩 박스 캐싱)
+ *
+ * @template T 마커/폴리곤 데이터의 추가 속성 타입
+ * @param item 확인할 아이템
+ * @param viewportRef 뷰포트 경계 ref
+ * @param boundingBoxCacheRef 바운딩 박스 캐시 ref
+ * @param computeBoundingBox 바운딩 박스 계산 함수
+ * @returns 뷰포트 안에 있으면 true
+ */
 
-  var onLoad = _a.onLoad,
-      _b = _a.visible,
-      visible = _b === void 0 ? true : _b,
-      zoomLevel = _a.zoomLevel,
-      center = _a.center,
-      _c = _a.centerMoveWithPanning,
-      centerMoveWithPanning = _c === void 0 ? false : _c,
-      children = _a.children; //controller
+var isInViewport = function (item, viewportRef, boundingBoxCacheRef, computeBoundingBox) {
+  if (!viewportRef.current) return true;
+  var viewport = viewportRef.current; // 캐시된 바운딩 박스 확인
 
-  var controller = useMintMapController(); //맵 초기화
+  var bbox = boundingBoxCacheRef.current.get(item.id);
 
-  var elementRef = useRef(null);
+  if (!bbox) {
+    // 바운딩 박스 계산 (공통 함수 사용)
+    var computed = computeBoundingBox(item);
+    if (!computed) return false;
+    bbox = computed;
+    boundingBoxCacheRef.current.set(item.id, bbox);
+  } // 바운딩 박스와 viewport 교차 체크
 
-  var _d = useState(false),
-      mapInitialized = _d[0],
-      setMapInitialized = _d[1];
 
-  var currMapInitialized = useRef(false);
-  useEffect(function () {
-    (function () {
-      return __awaiter(_this, void 0, void 0, function () {
-        var map_1;
-        return __generator(this, function (_a) {
-          switch (_a.label) {
-            case 0:
-              if (!(elementRef && elementRef.current)) return [3
-              /*break*/
-              , 2];
-              return [4
-              /*yield*/
-              , controller.initializingMap(elementRef.current)];
+  return !(bbox.maxX < viewport.minX || bbox.minX > viewport.maxX || bbox.maxY < viewport.minY || bbox.minY > viewport.maxY);
+};
 
-            case 1:
-              map_1 = _a.sent();
+/**
+ * 지도 이벤트 핸들러 생성 함수
+ *
+ * @template T 마커/폴리곤 데이터의 추가 속성 타입
+ * @param deps 이벤트 핸들러 생성에 필요한 의존성
+ * @returns 지도 이벤트 핸들러 객체
+ */
 
-              if (!currMapInitialized.current) {
-                currMapInitialized.current = true; //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
+var createMapEventHandlers = function (deps) {
+  var controller = deps.controller,
+      containerRef = deps.containerRef,
+      markerRef = deps.markerRef,
+      options = deps.options,
+      prevCenterOffsetRef = deps.prevCenterOffsetRef,
+      accumTranslateRef = deps.accumTranslateRef,
+      offsetCacheRef = deps.offsetCacheRef,
+      boundingBoxCacheRef = deps.boundingBoxCacheRef,
+      renderAllImmediate = deps.renderAllImmediate; // 지도 이동/줌 완료 시 처리 (캐시 초기화 및 렌더링)
 
-                setTimeout(function () {
-                  // console.log('setMapInitialized true');
-                  setMapInitialized(true);
-                  onLoad && onLoad(map_1, controller);
-                }, 100);
-              }
+  var handleIdle = function () {
+    prevCenterOffsetRef.current = null;
+    accumTranslateRef.current = {
+      x: 0,
+      y: 0
+    }; // 캐시 정리 (지도 이동/줌으로 좌표 변환 결과가 바뀜)
 
-              _a.label = 2;
+    offsetCacheRef.current.clear();
+    boundingBoxCacheRef.current.clear(); // 마커 위치 업데이트
 
-            case 2:
-              return [2
-              /*return*/
-              ];
-          }
-        });
-      });
-    })();
-  }, [controller, elementRef]); //줌레벨
+    var bounds = controller.getCurrBounds();
 
-  useEffect(function () {
-    if (zoomLevel && controller && mapInitialized) {
-      var prevZoomLevel = controller === null || controller === void 0 ? void 0 : controller.getZoomLevel();
+    var markerOptions = __assign({
+      position: bounds.nw
+    }, options);
 
-      if (prevZoomLevel !== zoomLevel) {
-        controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(zoomLevel);
-      }
-    }
-  }, [zoomLevel]); //센터
+    markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // transform 제거 전에 새 데이터로 즉시 렌더링 (transform 제거 시 잠깐 빈 화면이 보이는 것 방지)
 
-  useEffect(function () {
-    if (center && controller && mapInitialized) {
-      var prevCenter = controller.getCenter();
+    if (containerRef.current) {
+      containerRef.current.style.transform = '';
+      containerRef.current.style.visibility = '';
+    } // 새 위치에서 렌더링 (캐시는 이미 초기화됨)
 
-      if (!Position.equals(prevCenter, center)) {
-        centerMoveWithPanning ? controller === null || controller === void 0 ? void 0 : controller.panningTo(center) : controller === null || controller === void 0 ? void 0 : controller.setCenter(center);
-      }
-    }
-  }, [center]);
-  return React.createElement("div", {
-    className: cn$3('mint-map-root')
-  }, mapInitialized && React.createElement(WoongCanvasProvider, null, children), React.createElement("div", {
-    className: cn$3('mint-map-container'),
-    style: {
-      visibility: visible ? 'inherit' : 'hidden'
-    },
-    ref: elementRef
-  }));
-}
 
-var AnimationPlayer =
-/** @class */
-function () {
-  function AnimationPlayer(drawFunction, fps) {
-    this.prevtime = 0;
-    this.elapsedTime = 0;
-    this.fps = null;
-    this.baseDrawGapTime = null;
-    this.deltaTime = 0;
-    this.playing = false;
-    this.draw = drawFunction;
-    this.fps = fps || null;
+    renderAllImmediate();
+  }; // 줌 시작 시 처리 (일시적으로 숨김)
 
-    if (fps !== undefined) {
-      this.baseDrawGapTime = 1000 / fps;
-    }
 
-    this.init();
-  }
+  var handleZoomStart = function () {
+    if (!containerRef.current) return;
+    containerRef.current.style.visibility = 'hidden';
+  }; // 줌 종료 시 처리 (다시 표시)
+
+
+  var handleZoomEnd = function () {
+    if (!containerRef.current) return;
+    containerRef.current.style.visibility = '';
+  }; // 지도 중심 변경 시 처리 (transform으로 이동 추적, 캐시 유지)
+
+
+  var handleCenterChanged = function () {
+    var center = controller.getCurrBounds().getCenter();
+    var curr = controller.positionToOffset(center);
+    var prev = prevCenterOffsetRef.current; // 첫 번째 호출 시 이전 위치 저장만 하고 종료
+
+    if (!prev) {
+      prevCenterOffsetRef.current = {
+        x: curr.x,
+        y: curr.y
+      };
+      return;
+    } // 이전 위치와 현재 위치의 차이 계산 (이동 거리)
+
+
+    var dx = prev.x - curr.x;
+    var dy = prev.y - curr.y; // 누적 이동 거리 저장 (transform으로 화면만 이동, 캐시는 유지하여 성능 최적화)
+
+    accumTranslateRef.current = {
+      x: accumTranslateRef.current.x + dx,
+      y: accumTranslateRef.current.y + dy
+    };
+    prevCenterOffsetRef.current = {
+      x: curr.x,
+      y: curr.y
+    }; // CSS transform으로 컨테이너 이동 (캐시된 좌표는 그대로 유지)
+
+    if (containerRef.current) {
+      containerRef.current.style.transform = "translate(".concat(accumTranslateRef.current.x, "px, ").concat(accumTranslateRef.current.y, "px)");
+    }
+  };
+
+  var handleDragStart = function () {// 커서는 각 컴포넌트에서 처리
+  };
+
+  var handleDragEnd = function () {// 커서는 각 컴포넌트에서 처리
+  };
+
+  return {
+    handleIdle: handleIdle,
+    handleZoomStart: handleZoomStart,
+    handleZoomEnd: handleZoomEnd,
+    handleCenterChanged: handleCenterChanged,
+    handleDragStart: handleDragStart,
+    handleDragEnd: handleDragEnd
+  };
+};
+/**
+ * 공간 인덱스 빌드 (빠른 Hit Test를 위한 자료구조)
+ *
+ * @template T 마커/폴리곤 데이터의 추가 속성 타입
+ * @param data 공간 인덱스에 삽입할 데이터 배열
+ * @param spatialIndex Spatial Hash Grid 인스턴스
+ * @param computeBoundingBox 바운딩 박스 계산 함수
+ */
+
+var buildSpatialIndex = function (data, spatialIndex, computeBoundingBox) {
+  spatialIndex.clear();
+
+  for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
+    var item = data_1[_i];
+    var bbox = computeBoundingBox(item);
+
+    if (bbox) {
+      spatialIndex.insert(item, bbox.minX, bbox.minY, bbox.maxX, bbox.maxY);
+    }
+  }
+};
+/**
+ * 선택 상태 동기화 (화면 밖 데이터도 선택 상태 유지)
+ *
+ * @template T 마커/폴리곤 데이터의 추가 속성 타입
+ * @param data 최신 데이터 배열
+ * @param selectedIds 선택된 항목 ID Set
+ * @param selectedItemsMap 현재 선택된 항목 Map
+ * @returns 업데이트된 선택된 항목 Map
+ */
+
+var syncSelectedItems = function (data, selectedIds, selectedItemsMap) {
+  var dataMap = new Map(data.map(function (m) {
+    return [m.id, m];
+  }));
+  var newSelectedItemsMap = new Map();
+  selectedIds.forEach(function (id) {
+    // 현재 data에 있으면 최신 데이터 사용
+    var currentItem = dataMap.get(id);
+
+    if (currentItem) {
+      newSelectedItemsMap.set(id, currentItem);
+    } else {
+      // 화면 밖이면 기존 데이터 유지
+      var prevItem = selectedItemsMap.get(id);
+
+      if (prevItem) {
+        newSelectedItemsMap.set(id, prevItem);
+      }
+    }
+  });
+  return newSelectedItemsMap;
+};
+/**
+ * 외부 selectedItems를 내부 상태로 동기화
+ *
+ * @template T 마커/폴리곤 데이터의 추가 속성 타입
+ * @param externalSelectedItems 외부에서 전달된 선택된 항목 배열
+ * @param selectedIdsRef 선택된 ID Set ref
+ * @param selectedItemsMapRef 선택된 항목 Map ref
+ */
+
+var syncExternalSelectedItems = function (externalSelectedItems, selectedIdsRef, selectedItemsMapRef) {
+  if (externalSelectedItems === undefined) return;
+  var newSelectedIds = new Set();
+  var newSelectedItemsMap = new Map();
+  externalSelectedItems.forEach(function (item) {
+    newSelectedIds.add(item.id);
+    newSelectedItemsMap.set(item.id, item);
+  });
+  selectedIdsRef.current = newSelectedIds;
+  selectedItemsMapRef.current = newSelectedItemsMap;
+};
+
+/**
+ * 이벤트 유효성 검증 및 좌표 변환
+ *
+ * @param event 이벤트 파라미터
+ * @param context WoongCanvasContext 인스턴스
+ * @param controller MintMapController 인스턴스
+ * @returns 유효한 화면 좌표 또는 null
+ */
+var validateEvent = function (event, context, controller) {
+  var _a;
+
+  if (context) return null;
+  if (!((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return null;
+
+  try {
+    return controller.positionToOffset(event.param.position);
+  } catch (error) {
+    console.error('[WoongCanvas] validateEvent error:', error);
+    return null;
+  }
+};
+/**
+ * Map의 values를 배열로 변환
+ *
+ * @template T Map 값의 타입
+ * @param map 변환할 Map
+ * @returns Map의 값 배열
+ */
+
+var mapValuesToArray = function (map) {
+  if (map.size === 0) return [];
+  return Array.from(map.values());
+};
+
+var cn$3 = classNames.bind(styles$1);
+function MintMapCore(_a) {
+  var _this = this;
+
+  var onLoad = _a.onLoad,
+      _b = _a.visible,
+      visible = _b === void 0 ? true : _b,
+      zoomLevel = _a.zoomLevel,
+      center = _a.center,
+      _c = _a.centerMoveWithPanning,
+      centerMoveWithPanning = _c === void 0 ? false : _c,
+      children = _a.children; //controller
+
+  var controller = useMintMapController(); //맵 초기화
+
+  var elementRef = useRef(null);
+
+  var _d = useState(false),
+      mapInitialized = _d[0],
+      setMapInitialized = _d[1];
+
+  var currMapInitialized = useRef(false);
+  useEffect(function () {
+    (function () {
+      return __awaiter(_this, void 0, void 0, function () {
+        var map_1;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              if (!(elementRef && elementRef.current)) return [3
+              /*break*/
+              , 2];
+              return [4
+              /*yield*/
+              , controller.initializingMap(elementRef.current)];
+
+            case 1:
+              map_1 = _a.sent();
+
+              if (!currMapInitialized.current) {
+                currMapInitialized.current = true; //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
+
+                setTimeout(function () {
+                  // console.log('setMapInitialized true');
+                  setMapInitialized(true);
+                  onLoad && onLoad(map_1, controller);
+                }, 100);
+              }
+
+              _a.label = 2;
+
+            case 2:
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    })();
+  }, [controller, elementRef]); //줌레벨
+
+  useEffect(function () {
+    if (zoomLevel && controller && mapInitialized) {
+      var prevZoomLevel = controller === null || controller === void 0 ? void 0 : controller.getZoomLevel();
+
+      if (prevZoomLevel !== zoomLevel) {
+        controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(zoomLevel);
+      }
+    }
+  }, [zoomLevel]); //센터
+
+  useEffect(function () {
+    if (center && controller && mapInitialized) {
+      var prevCenter = controller.getCenter();
+
+      if (!Position.equals(prevCenter, center)) {
+        centerMoveWithPanning ? controller === null || controller === void 0 ? void 0 : controller.panningTo(center) : controller === null || controller === void 0 ? void 0 : controller.setCenter(center);
+      }
+    }
+  }, [center]);
+  return React.createElement("div", {
+    className: cn$3('mint-map-root')
+  }, mapInitialized && React.createElement(WoongCanvasProvider, null, children), React.createElement("div", {
+    className: cn$3('mint-map-container'),
+    style: {
+      visibility: visible ? 'inherit' : 'hidden'
+    },
+    ref: elementRef
+  }));
+}
+
+var AnimationPlayer =
+/** @class */
+function () {
+  function AnimationPlayer(drawFunction, fps) {
+    this.prevtime = 0;
+    this.elapsedTime = 0;
+    this.fps = null;
+    this.baseDrawGapTime = null;
+    this.deltaTime = 0;
+    this.playing = false;
+    this.draw = drawFunction;
+    this.fps = fps || null;
+
+    if (fps !== undefined) {
+      this.baseDrawGapTime = 1000 / fps;
+    }
+
+    this.init();
+  }
 
   AnimationPlayer.prototype.init = function () {
     this.deltaTime = 0;
@@ -5421,9 +5568,6 @@ function LoadingImage(_a) {
   }))));
 }
 
-// 메인 컴포넌트
-// ============================================================================
-
 var WoongCanvasMarker = function (props) {
   var data = props.data,
       onClick = props.onClick,
@@ -5433,232 +5577,88 @@ var WoongCanvasMarker = function (props) {
       enableMultiSelect = _a === void 0 ? false : _a,
       _b = props.topOnHover,
       topOnHover = _b === void 0 ? false : _b,
-      _c = props.enableViewportCulling,
-      enableViewportCulling = _c === void 0 ? true : _c,
-      _d = props.cullingMargin,
-      cullingMargin = _d === void 0 ? DEFAULT_CULLING_MARGIN : _d,
-      _e = props.maxCacheSize,
-      maxCacheSize = _e === void 0 ? DEFAULT_MAX_CACHE_SIZE : _e,
+      _c = props.cullingMargin,
+      cullingMargin = _c === void 0 ? DEFAULT_CULLING_MARGIN : _c,
+      _d = props.maxCacheSize,
+      maxCacheSize = _d === void 0 ? DEFAULT_MAX_CACHE_SIZE : _d,
       externalSelectedItems = props.selectedItems,
       externalSelectedItem = props.selectedItem,
-      _f = props.disableInteraction,
-      disableInteraction = _f === void 0 ? false : _f,
+      _e = props.disableInteraction,
+      disableInteraction = _e === void 0 ? false : _e,
       renderBase = props.renderBase,
-      renderAnimation = props.renderAnimation,
       renderEvent = props.renderEvent,
-      options = __rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "renderBase", "renderAnimation", "renderEvent"]); // --------------------------------------------------------------------------
-  // Hooks & Context
-  // --------------------------------------------------------------------------
-
+      options = __rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "renderBase", "renderEvent"]);
 
   var controller = useMintMapController();
   var context = useWoongCanvasContext();
-  var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // --------------------------------------------------------------------------
-  // DOM Refs
-  // --------------------------------------------------------------------------
+  var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // DOM Refs
 
   var divRef = useRef(document.createElement('div'));
   var divElement = divRef.current;
   var containerRef = useRef(null);
-  var markerRef = useRef(); // --------------------------------------------------------------------------
-  // Konva Refs
-  // --------------------------------------------------------------------------
+  var markerRef = useRef(); // Konva Refs
 
   var stageRef = useRef(null);
   var baseLayerRef = useRef(null);
-  var animationLayerRef = useRef(null);
-  var eventLayerRef = useRef(null); // --------------------------------------------------------------------------
-  // Data Refs - 선택 및 Hover 상태 관리
-  // --------------------------------------------------------------------------
-
-  /** data prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
-
-  var dataRef = useRef(data); // --------------------------------------------------------------------------
-  // State Refs - 선택 및 Hover 상태 관리
-  // --------------------------------------------------------------------------
-
-  /** 상호작용 비활성화 상태 (Ref로 관리하여 클로저 문제 해결) */
+  var eventLayerRef = useRef(null); // 상태 관리 Refs (React 리렌더링 최소화)
 
+  var dataRef = useRef(data);
   var disableInteractionRef = useRef(disableInteraction);
-  /** 현재 Hover 중인 항목 */
-
   var hoveredItemRef = useRef(null);
-  /** 외부에서 전달된 선택 항목 (Ref로 관리하여 클로저 문제 해결) */
-
   var selectedItemRef = useRef(externalSelectedItem);
-  /**
-   * 선택된 항목의 ID Set
-   *
-   * 용도:
-   * 1. onClick 콜백에 전달 - onClick(data, selectedIdsRef.current)
-   * 2. 선택 여부 빠른 체크 - selectedIdsRef.current.has(id)
-   * 3. 메모리 효율 - ID만 저장 (작음)
-   *
-   * selectedItemsMapRef와 차이:
-   * - selectedIdsRef: ID만 저장 { "id1", "id2" }
-   * - selectedItemsMapRef: 전체 객체 저장 { id1: {...}, id2: {...} }
-   *
-   * 둘 다 필요: ID만 필요한 곳은 이것, 전체 데이터 필요한 곳은 Map
-   */
-
   var selectedIdsRef = useRef(new Set());
-  /**
-   * 선택된 항목의 실제 데이터 Map (핵심 성능 최적화!)
-   *
-   * 목적: doRenderEvent에서 filter() 순회 제거
-   * - 이전: markersRef.current.filter() → O(전체 마커 수)
-   * - 현재: Map.values() → O(선택된 항목 수)
-   *
-   * 성능 개선: 10,000개 중 1개 선택 시
-   * - 이전: 10,000번 체크
-   * - 현재: 1번 접근 (10,000배 빠름!)
-   */
-
-  var selectedItemsMapRef = useRef(new Map()); // --------------------------------------------------------------------------
-  // Drag Refs
-  // --------------------------------------------------------------------------
+  var selectedItemsMapRef = useRef(new Map()); // 드래그 상태 Refs
 
   var draggingRef = useRef(false);
   var prevCenterOffsetRef = useRef(null);
   var accumTranslateRef = useRef({
     x: 0,
     y: 0
-  }); // --------------------------------------------------------------------------
-  // Performance Refs (캐싱 & 최적화)
-  // --------------------------------------------------------------------------
-
-  /** 좌표 변환 결과 LRU 캐시 */
+  }); // 성능 최적화 Refs
 
   var offsetCacheRef = useRef(new LRUCache(maxCacheSize));
-  /** 공간 인덱스 (빠른 Hit Test) */
-
   var spatialIndexRef = useRef(new SpatialHashGrid(SPATIAL_GRID_CELL_SIZE));
-  /** 바운딩 박스 캐시 (Viewport Culling 최적화) */
-
   var boundingBoxCacheRef = useRef(new Map());
-  /** 뷰포트 경계 캐시 (Viewport Culling) */
-
-  var viewportRef = useRef(null); // --------------------------------------------------------------------------
-  // 유틸리티 함수: 뷰포트 관리
-  // --------------------------------------------------------------------------
-
-  /**
-   * 현재 뷰포트 영역 계산
-   */
-
-  var updateViewport = function () {
-    if (!stageRef.current) return;
-    var stage = stageRef.current;
-    viewportRef.current = {
-      minX: -cullingMargin,
-      maxX: stage.width() + cullingMargin,
-      minY: -cullingMargin,
-      maxY: stage.height() + cullingMargin
-    };
-  };
-  /**
-   * 아이템이 현재 뷰포트 안에 있는지 확인 (바운딩 박스 캐싱)
-   */
-
-
-  var isInViewport = function (item) {
-    if (!enableViewportCulling || !viewportRef.current) return true;
-    var viewport = viewportRef.current; // 캐시된 바운딩 박스 확인
-
-    var bbox = boundingBoxCacheRef.current.get(item.id);
+  var viewportRef = useRef(null); // 뷰포트 영역 계산 (Viewport Culling용)
 
-    if (!bbox) {
-      // 바운딩 박스 계산 (공통 함수 사용)
-      var computed = computeBoundingBox(item);
-      if (!computed) return false;
-      bbox = computed;
-      boundingBoxCacheRef.current.set(item.id, bbox);
-    } // 바운딩 박스와 viewport 교차 체크
+  var updateViewport$1 = function () {
+    updateViewport(stageRef.current, cullingMargin, viewportRef);
+  }; // 뷰포트 내부 여부 확인 (바운딩 박스 캐싱)
 
 
-    return !(bbox.maxX < viewport.minX || bbox.minX > viewport.maxX || bbox.maxY < viewport.minY || bbox.minY > viewport.maxY);
-  }; // --------------------------------------------------------------------------
-  // 유틸리티 함수: 좌표 변환 캐싱
-  // --------------------------------------------------------------------------
-
-  /**
-   * 마커 좌표 변환 결과를 캐시하고 반환
-   *
-   * @param markerData 마커 데이터
-   * @returns 변환된 좌표 또는 null
-   */
+  var isInViewport$1 = function (item) {
+    return isInViewport(item, viewportRef, boundingBoxCacheRef, computeBoundingBox);
+  }; // 마커 좌표 변환 (위경도 → 화면 좌표, LRU 캐시 사용)
 
 
   var getOrComputeMarkerOffset = function (markerData) {
     var cached = offsetCacheRef.current.get(markerData.id);
     if (cached && !Array.isArray(cached)) return cached;
     var result = computeMarkerOffset(markerData, controller);
-
-    if (result) {
-      offsetCacheRef.current.set(markerData.id, result);
-    }
-
+    if (!result) return null;
+    offsetCacheRef.current.set(markerData.id, result);
     return result;
-  }; // --------------------------------------------------------------------------
-  // 유틸리티 함수: 바운딩 박스 계산
-  // --------------------------------------------------------------------------
-
-  /**
-   * 마커의 바운딩 박스 계산
-   *
-   * 🎯 마커의 경우:
-   * - boxHeight: 본체만 (Hit Test 영역)
-   * - tailHeight: 꼬리 높이 (Viewport Culling용, 화면에 보이는 전체 영역)
-   *
-   * @param item 마커 데이터
-   * @returns 바운딩 박스 또는 null
-   */
+  }; // 마커 바운딩 박스 계산 (Viewport Culling 및 Hit Test용)
 
 
   var computeBoundingBox = function (item) {
-    // 마커: 중심점 기준 박스 크기 계산 (꼬리 포함)
     var offset = getOrComputeMarkerOffset(item);
     if (!offset) return null;
     var boxWidth = item.boxWidth || 50;
     var boxHeight = item.boxHeight || 28;
-    var tailHeight = item.tailHeight || 0; // 🎯 tailHeight 사용 (Viewport Culling용)
-
+    var tailHeight = item.tailHeight || 0;
     return {
       minX: offset.x - boxWidth / 2,
       minY: offset.y - boxHeight - tailHeight,
       maxX: offset.x + boxWidth / 2,
       maxY: offset.y
     };
-  }; // --------------------------------------------------------------------------
-  // 유틸리티 함수: 공간 인덱싱
-  // --------------------------------------------------------------------------
+  }; // 공간 인덱스 빌드 (빠른 Hit Test용)
 
-  /**
-   * 공간 인덱스 빌드 (빠른 Hit Test를 위한 자료구조)
-   */
-
-
-  var buildSpatialIndex = function () {
-    var spatial = spatialIndexRef.current;
-    spatial.clear();
-    var currentData = dataRef.current;
-
-    for (var _i = 0, currentData_1 = currentData; _i < currentData_1.length; _i++) {
-      var item = currentData_1[_i]; // 바운딩 박스 계산 (공통 함수 사용)
-
-      var bbox = computeBoundingBox(item);
-
-      if (bbox) {
-        spatial.insert(item, bbox.minX, bbox.minY, bbox.maxX, bbox.maxY);
-      }
-    }
-  }; // --------------------------------------------------------------------------
-  // 렌더링 함수 결정 (dataType에 따라)
-  // --------------------------------------------------------------------------
 
-  /**
-   * 외부 렌더링 함수에 전달할 유틸리티 객체
-   */
+  var buildSpatialIndex$1 = function () {
+    buildSpatialIndex(dataRef.current, spatialIndexRef.current, computeBoundingBox);
+  }; // 렌더링 유틸리티 객체
 
 
   var renderUtils = {
@@ -5666,48 +5666,29 @@ var WoongCanvasMarker = function (props) {
       return null;
     },
     getOrComputeMarkerOffset: getOrComputeMarkerOffset
-  };
-  /** Base Layer에서 사용할 빈 Set (재사용) */
-
-  useRef(new Set());
-  /**
-   * Base 레이어 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
-   *
-   * 🔥 최적화:
-   * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
-   * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
-   * 3. 클로저로 최신 데이터 참조
-   *
-   * 🎯 topOnHover 지원:
-   * - renderEvent가 없을 때 Base Layer에서 hover 처리 (fallback)
-   * - renderEvent가 있으면 Event Layer에서 처리 (성능 최적화)
-   */
+  }; // Base Layer 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
 
   var doRenderBase = function () {
     var layer = baseLayerRef.current;
-    if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
-
+    if (!layer) return;
     var shape = layer.findOne('.base-render-shape');
 
     if (!shape) {
-      // 최초 생성 (한 번만 실행됨)
-      // sceneFunc도 여기서 한 번만 설정 (클로저로 최신 데이터 참조)
       shape = new Konva.Shape({
         name: 'base-render-shape',
         sceneFunc: function (context, shape) {
           var ctx = context;
-          var hovered = hoveredItemRef.current; // 클로저로 최신 ref 값 참조
+          var hovered = hoveredItemRef.current; // 뷰포트 컬링: 화면에 보이는 항목만 필터링
 
-          var visibleItems = enableViewportCulling ? dataRef.current.filter(function (item) {
-            return isInViewport(item);
-          }) : dataRef.current; // topOnHover가 true이고 renderEvent가 없으면 Base Layer에서 hover 처리
+          var visibleItems = dataRef.current.filter(function (item) {
+            return isInViewport$1(item);
+          }); // topOnHover 옵션: hover된 항목을 나중에 그려서 최상위에 표시
 
           if (topOnHover && !renderEvent && hovered) {
-            // hover된 항목 제외하고 렌더링
             visibleItems = visibleItems.filter(function (item) {
               return item.id !== hovered.id;
             });
-          } // 일반 항목 렌더링
+          } // 일반 항목들 먼저 렌더링
 
 
           renderBase({
@@ -5716,12 +5697,10 @@ var WoongCanvasMarker = function (props) {
             selectedIds: selectedIdsRef.current,
             hoveredItem: hovered,
             utils: renderUtils
-          }); // hover된 항목을 최상단에 렌더링 (renderEvent가 없을 때만)
+          }); // hover된 항목을 마지막에 렌더링하여 최상위에 표시
 
           if (topOnHover && !renderEvent && hovered) {
-            var isHoveredInViewport = enableViewportCulling ? isInViewport(hovered) : true;
-
-            if (isHoveredInViewport) {
+            if (isInViewport$1(hovered)) {
               renderBase({
                 ctx: ctx,
                 items: [hovered],
@@ -5737,61 +5716,26 @@ var WoongCanvasMarker = function (props) {
         hitStrokeWidth: 0
       });
       layer.add(shape);
-    } // sceneFunc는 이미 설정되어 있으므로 다시 그리기만
-
+    }
 
     layer.batchDraw();
-  };
-  /**
-   * Animation 레이어 렌더링 (선택된 마커 애니메이션)
-   *
-   * 🔥 최적화: sceneFunc 내부에서 최신 items 참조
-   * - 선택 변경 시에만 재생성
-   * - 지도 이동 시에는 기존 Animation 계속 실행
-   */
-
-
-  var doRenderAnimation = function () {
-    if (!renderAnimation) return;
-    var layer = animationLayerRef.current;
-    if (!layer) return;
-    renderAnimation({
-      layer: layer,
-      selectedIds: selectedIdsRef.current,
-      items: dataRef.current,
-      utils: renderUtils
-    });
-  };
-  /**
-   * Event 레이어 렌더링 (hover + 선택 상태 표시)
-   *
-   * 🔥 최적화:
-   * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
-   * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
-   * 3. 클로저로 최신 데이터 참조
-   */
+  }; // Event Layer 렌더링 (hover 효과 및 선택 상태 표시)
 
 
   var doRenderEvent = function () {
     var layer = eventLayerRef.current;
-    if (!layer) return;
-    if (!renderEvent) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
-
+    if (!layer || !renderEvent) return;
     var shape = layer.findOne('.event-render-shape');
 
     if (!shape) {
-      // 최초 생성 (한 번만 실행됨)
-      // sceneFunc도 여기서 한 번만 설정 (클로저로 최신 데이터 참조)
       shape = new Konva.Shape({
         name: 'event-render-shape',
         sceneFunc: function (context, shape) {
-          var ctx = context; // 클로저로 최신 ref 값 참조
-
-          var selectedItems = Array.from(selectedItemsMapRef.current.values());
-          var hovered = hoveredItemRef.current; // topOnHover가 true이면 hover된 항목을 최상단에 렌더링
+          var ctx = context;
+          var selectedItems = mapValuesToArray(selectedItemsMapRef.current);
+          var hovered = hoveredItemRef.current;
 
           if (topOnHover && hovered) {
-            // 1. 먼저 일반 항목들 렌더링 (hover된 항목 제외)
             renderEvent({
               ctx: ctx,
               hoveredItem: null,
@@ -5800,13 +5744,9 @@ var WoongCanvasMarker = function (props) {
                 return item.id !== hovered.id;
               }),
               selectedItem: selectedItemRef.current
-            }); // 2. hover된 항목을 최상단에 렌더링
-
-            var isHoveredInViewport = enableViewportCulling ? isInViewport(hovered) : true;
+            });
 
-            if (isHoveredInViewport) {
-              // hover된 항목이 선택되어 있다면 hoverSelectedItems에 포함시켜서 
-              // renderEvent에서 hover 스타일만 적용되도록 함
+            if (isInViewport$1(hovered)) {
               var hoveredIsSelected = selectedItems.some(function (item) {
                 return item.id === hovered.id;
               });
@@ -5820,7 +5760,6 @@ var WoongCanvasMarker = function (props) {
               });
             }
           } else {
-            // topOnHover가 false이거나 hover된 항목이 없으면 일반 렌더링
             renderEvent({
               ctx: ctx,
               hoveredItem: hovered,
@@ -5835,137 +5774,63 @@ var WoongCanvasMarker = function (props) {
         hitStrokeWidth: 0
       });
       layer.add(shape);
-    } // sceneFunc는 이미 설정되어 있으므로 다시 그리기만
-
+    }
 
     layer.batchDraw();
-  };
-  /**
-   * 전체 즉시 렌더링 (IDLE 시 호출)
-   */
+  }; // 전체 즉시 렌더링
 
 
   var renderAllImmediate = function () {
-    updateViewport();
-    buildSpatialIndex();
+    updateViewport$1();
+    buildSpatialIndex$1();
     doRenderBase();
-    doRenderAnimation();
     doRenderEvent();
-  }; // --------------------------------------------------------------------------
-  // 이벤트 핸들러: 지도 이벤트
-  // --------------------------------------------------------------------------
-
-  /**
-   * 지도 이동/줌 완료 시 처리
-   */
-
-
-  var handleIdle = function () {
-    prevCenterOffsetRef.current = null;
-    accumTranslateRef.current = {
-      x: 0,
-      y: 0
-    }; // 2. 캐시 정리 (지도 이동/줌으로 좌표 변환 결과가 바뀜)
-
-    offsetCacheRef.current.clear();
-    boundingBoxCacheRef.current.clear(); // 3. 마커 위치 업데이트
-
-    var bounds = controller.getCurrBounds();
-
-    var markerOptions = __assign({
-      position: bounds.nw
-    }, options);
-
-    markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // 4. transform 제거 전에 새 데이터로 즉시 렌더링 (겹침 방지)
-
-    if (containerRef.current) {
-      containerRef.current.style.transform = '';
-      containerRef.current.style.visibility = '';
-    } // 5. 새 위치에서 렌더링
-
-
-    renderAllImmediate();
-  };
-  /**
-   * 줌 시작 시 처리 (일시적으로 숨김)
-   */
-
-
-  var handleZoomStart = function () {
-    if (containerRef.current) {
-      containerRef.current.style.visibility = 'hidden';
-    }
-  };
-  /**
-   * 줌 종료 시 처리 (다시 표시)
-   */
+  }; // 지도 이벤트 핸들러 생성
+
+
+  var _f = createMapEventHandlers({
+    controller: controller,
+    containerRef: containerRef,
+    markerRef: markerRef,
+    options: options,
+    prevCenterOffsetRef: prevCenterOffsetRef,
+    accumTranslateRef: accumTranslateRef,
+    offsetCacheRef: offsetCacheRef,
+    boundingBoxCacheRef: boundingBoxCacheRef,
+    renderAllImmediate: renderAllImmediate
+  }),
+      handleIdle = _f.handleIdle,
+      handleZoomStart = _f.handleZoomStart,
+      handleZoomEnd = _f.handleZoomEnd,
+      handleCenterChanged = _f.handleCenterChanged,
+      handleDragStartShared = _f.handleDragStart,
+      handleDragEndShared = _f.handleDragEnd;
 
-
-  var handleZoomEnd = function () {
-    if (containerRef.current) {
-      containerRef.current.style.visibility = '';
-    }
+  var handleDragStart = function () {
+    handleDragStartShared();
+    draggingRef.current = true;
+    controller.setMapCursor('grabbing');
   };
-  /**
-   * 지도 중심 변경 시 처리 (transform으로 이동 추적)
-   */
-
-
-  var handleCenterChanged = function () {
-    var center = controller.getCurrBounds().getCenter();
-    var curr = controller.positionToOffset(center);
-    var prev = prevCenterOffsetRef.current;
-
-    if (!prev) {
-      prevCenterOffsetRef.current = {
-        x: curr.x,
-        y: curr.y
-      };
-      return;
-    }
-
-    var dx = prev.x - curr.x;
-    var dy = prev.y - curr.y;
-    accumTranslateRef.current = {
-      x: accumTranslateRef.current.x + dx,
-      y: accumTranslateRef.current.y + dy
-    };
-    prevCenterOffsetRef.current = {
-      x: curr.x,
-      y: curr.y
-    };
-
-    if (containerRef.current) {
-      containerRef.current.style.transform = "translate(".concat(accumTranslateRef.current.x, "px, ").concat(accumTranslateRef.current.y, "px)");
-    }
-  }; // --------------------------------------------------------------------------
-  // Hit Test & 상태 관리
-  // --------------------------------------------------------------------------
 
-  /**
-   * 특정 좌표의 마커 데이터 찾기 (Spatial Index 사용)
-   *
-   * topOnHover가 true일 때:
-   * - 현재 hover된 항목을 최우선으로 체크
-   * - 시각적으로 최상단에 있는 항목이 hit test에서도 우선됨
-   *
-   * @param offset 검사할 좌표
-   * @returns 찾은 마커 데이터 또는 null
-   */
+  var handleDragEnd = function () {
+    handleDragEndShared();
+    draggingRef.current = false;
+    controller.setMapCursor('grab');
+  }; // Hit Test: 특정 좌표의 마커 찾기
 
 
   var findData = function (offset) {
-    // topOnHover가 true이고 현재 hover된 항목이 있으면, 그것을 먼저 체크
+    // topOnHover 옵션이 켜져 있으면 hover된 항목을 최우선으로 확인
     if (topOnHover && hoveredItemRef.current) {
       var hovered = hoveredItemRef.current;
 
       if (isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {
-        return hovered; // 여전히 hover된 항목 위에 있음
+        return hovered;
       }
-    } // Spatial Index로 후보 항목만 빠르게 추출 (30,000개 → ~10개)
+    } // 공간 인덱스에서 후보 항목 조회 (O(1) 수준의 빠른 조회)
 
 
-    var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 마커 체크
+    var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 역순 순회: 나중에 추가된 항목(최상위)이 먼저 선택되도록
 
     for (var i = candidates.length - 1; i >= 0; i--) {
       var item = candidates[i];
@@ -5976,18 +5841,7 @@ var WoongCanvasMarker = function (props) {
     }
 
     return null;
-  };
-  /**
-   * Hover 상태 설정 및 레이어 렌더링
-   *
-   * @param data hover된 마커/폴리곤 데이터 또는 null
-   *
-   * 최적화: RAF 제거하여 즉시 렌더링 (16ms 지연 제거)
-   *
-   * 🎯 topOnHover 지원:
-   * - renderEvent가 있으면: Event Layer에서만 처리 (성능 최적화)
-   * - renderEvent가 없고 topOnHover=true면: Base Layer에서 처리
-   */
+  }; // Hover 상태 설정 및 렌더링
 
 
   var setHovered = function (data) {
@@ -5997,32 +5851,18 @@ var WoongCanvasMarker = function (props) {
       controller.setMapCursor('grabbing');
     } else {
       controller.setMapCursor(data ? 'pointer' : 'grab');
-    } // 즉시 렌더링 (RAF 없이)
-
+    }
 
     if (renderEvent) {
-      // renderEvent가 있으면 Event Layer에서만 처리 (성능 최적화)
       doRenderEvent();
     } else if (topOnHover) {
-      // renderEvent가 없고 topOnHover가 true면 Base Layer에서 처리
       doRenderBase();
     }
-  };
-  /**
-   * 클릭 처리 (단일/다중 선택)
-   *
-   * @param data 클릭된 마커/폴리곤 데이터
-   *
-   * 🔥 최적화: 단일 Shape 렌더링으로 Base Layer 재렌더링 속도 향상
-   * - sceneFunc에서 selectedIds를 체크하여 선택된 마커만 스킵
-   * - 객체 생성 오버헤드 제거로 1000개 이상도 부드럽게 처리
-   */
+  }; // 클릭 처리: 선택 상태 업데이트
 
 
   var handleLocalClick = function (data) {
-    // 1. 선택 상태 업데이트
     if (enableMultiSelect) {
-      // 다중 선택: Set과 Map 동시 업데이트
       var newSelected = new Set(selectedIdsRef.current);
 
       if (newSelected.has(data.id)) {
@@ -6035,7 +5875,6 @@ var WoongCanvasMarker = function (props) {
 
       selectedIdsRef.current = newSelected;
     } else {
-      // 단일 선택: 토글
       var newSelected = new Set();
 
       if (!selectedIdsRef.current.has(data.id)) {
@@ -6049,153 +5888,80 @@ var WoongCanvasMarker = function (props) {
       selectedIdsRef.current = newSelected;
     }
 
-    if (!!renderAnimation) {
-      // 2. Base Layer 재렌더링 (단일 Shape로 최적화되어 빠름)
-      doRenderBase(); // 3. Animation Layer 렌더링 (선택된 마커 애니메이션)
-
-      doRenderAnimation();
-    } // 4. Event Layer 렌더링 (hover 처리)
-
-
+    doRenderBase();
     doRenderEvent();
-  }; // --------------------------------------------------------------------------
-  // 이벤트 핸들러: UI 이벤트
-  // --------------------------------------------------------------------------
-
-  /**
-   * 클릭 이벤트 처리
-   */
+  }; // 클릭 이벤트 핸들러
 
 
   var handleClick = function (event) {
-    var _a;
-
-    if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
-
-    if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
-
-    try {
-      var clickedOffset = controller.positionToOffset(event.param.position);
-      var data_1 = findData(clickedOffset);
-
-      if (data_1) {
-        handleLocalClick(data_1);
-
-        if (onClick) {
-          onClick(data_1, selectedIdsRef.current);
-        }
-      }
-    } catch (error) {
-      console.error('[WoongCanvasMarker] handleClick error:', error);
-    }
-  };
-  /**
-   * 마우스 이동 이벤트 처리 (hover 감지)
-   */
+    if (disableInteractionRef.current) return;
+    var clickedOffset = validateEvent(event, context, controller);
+    if (!clickedOffset) return;
+    var data = findData(clickedOffset);
+    if (!data) return;
+    handleLocalClick(data);
+    onClick === null || onClick === void 0 ? void 0 : onClick(data, selectedIdsRef.current);
+  }; // 마우스 이동 이벤트 핸들러 (hover 감지)
 
 
   var handleMouseMove = function (event) {
-    var _a;
-
-    if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
-
-    if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
-
-    try {
-      var mouseOffset = controller.positionToOffset(event.param.position);
-      var hoveredItem = findData(mouseOffset);
-      var prevHovered = hoveredItemRef.current;
-
-      if (prevHovered !== hoveredItem) {
-        setHovered(hoveredItem);
-        if (prevHovered && onMouseOut) onMouseOut(prevHovered);
-        if (hoveredItem && onMouseOver) onMouseOver(hoveredItem);
-      }
-    } catch (error) {
-      console.error('[WoongCanvasMarker] handleMouseMove error:', error);
-    }
-  };
-  /**
-   * 드래그 시작 처리 (커서를 grabbing으로 변경)
-   */
-
-
-  var handleDragStart = function () {
-    draggingRef.current = true;
-    controller.setMapCursor('grabbing');
-  };
-  /**
-   * 드래그 종료 처리 (커서를 기본으로 복원)
-   */
-
-
-  var handleDragEnd = function () {
-    draggingRef.current = false;
-    controller.setMapCursor('grab');
-  };
-  /**
-   * 마우스가 canvas를 벗어날 때 hover cleanup
-   */
+    if (disableInteractionRef.current) return;
+    var mouseOffset = validateEvent(event, context, controller);
+    if (!mouseOffset) return;
+    var hoveredItem = findData(mouseOffset);
+    var prevHovered = hoveredItemRef.current;
+    if (prevHovered === hoveredItem) return;
+    setHovered(hoveredItem);
+    if (prevHovered) onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(prevHovered);
+    if (hoveredItem) onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(hoveredItem);
+  }; // 마우스가 맵 영역을 벗어날 때 hover 상태 초기화
 
 
   var handleMouseLeave = function () {
-    if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
-
+    if (disableInteractionRef.current) return;
     var prevHovered = hoveredItemRef.current;
-
-    if (prevHovered) {
-      hoveredItemRef.current = null;
-      controller.setMapCursor('grab');
-      doRenderEvent();
-
-      if (onMouseOut) {
-        onMouseOut(prevHovered);
-      }
-    }
-  }; // --------------------------------------------------------------------------
-  // Lifecycle: DOM 초기화
-  // --------------------------------------------------------------------------
+    if (!prevHovered) return;
+    hoveredItemRef.current = null;
+    controller.setMapCursor('grab');
+    doRenderEvent();
+    onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(prevHovered);
+  }; // DOM 초기화
 
 
   useEffect(function () {
     divElement.style.width = 'fit-content';
     return function () {
-      if (markerRef.current) {
-        controller.clearDrawable(markerRef.current);
-        markerRef.current = undefined;
-      }
+      if (!markerRef.current) return;
+      controller.clearDrawable(markerRef.current);
+      markerRef.current = undefined;
     };
-  }, []); // --------------------------------------------------------------------------
-  // Lifecycle: 마커 생성/업데이트
-  // --------------------------------------------------------------------------
+  }, []); // 마커 생성/업데이트
 
   useEffect(function () {
-    if (options) {
-      var bounds = controller.getCurrBounds();
+    if (!options) return;
+    var bounds = controller.getCurrBounds();
 
-      var markerOptions = __assign({
-        position: bounds.nw
-      }, options);
+    var markerOptions = __assign({
+      position: bounds.nw
+    }, options);
 
-      if (markerRef.current) {
-        controller.updateMarker(markerRef.current, markerOptions);
-      } else {
-        markerRef.current = new Marker(markerOptions);
-        markerRef.current.element = divElement;
-        controller.createMarker(markerRef.current);
+    if (markerRef.current) {
+      controller.updateMarker(markerRef.current, markerOptions);
+      return;
+    }
 
-        if (divElement.parentElement) {
-          divElement.parentElement.style.pointerEvents = 'none';
-        }
+    markerRef.current = new Marker(markerOptions);
+    markerRef.current.element = divElement;
+    controller.createMarker(markerRef.current);
 
-        if (options.zIndex !== undefined) {
-          controller.setMarkerZIndex(markerRef.current, options.zIndex);
-        }
-      }
+    if (divElement.parentElement) {
+      divElement.parentElement.style.pointerEvents = 'none';
     }
-  }, [options]); // --------------------------------------------------------------------------
-  // Lifecycle: Konva 초기화 및 이벤트 리스너 등록
-  // --------------------------------------------------------------------------
+
+    if (options.zIndex !== undefined) {
+      controller.setMarkerZIndex(markerRef.current, options.zIndex);
+    }
+  }, [options]); // Konva 초기화 및 이벤트 리스너 등록
 
   useEffect(function () {
     var mapDiv = controller.mapDivElement;
@@ -6204,34 +5970,21 @@ var WoongCanvasMarker = function (props) {
       width: mapDiv.offsetWidth,
       height: mapDiv.offsetHeight
     });
-    stageRef.current = stage; // 레이어 최적화 설정
-
+    stageRef.current = stage;
     var baseLayer = new Konva.Layer({
-      listening: false // 이벤트 리스닝 비활성화로 성능 향상
-
-    });
-    var animationLayer = new Konva.Layer({
       listening: false
     });
     var eventLayer = new Konva.Layer({
       listening: false
     });
     baseLayerRef.current = baseLayer;
-    animationLayerRef.current = animationLayer;
     eventLayerRef.current = eventLayer;
     stage.add(baseLayer);
-
-    if (renderAnimation) {
-      stage.add(animationLayer);
-    }
-
-    stage.add(eventLayer); // 초기 뷰포트 설정
-
-    updateViewport(); // ResizeObserver (맵 크기 변경 감지)
+    stage.add(eventLayer);
+    updateViewport$1(); // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
 
     var resizeRafId = null;
     var resizeObserver = new ResizeObserver(function () {
-      // RAF로 다음 프레임에 한 번만 실행 (debounce 효과)
       if (resizeRafId !== null) {
         cancelAnimationFrame(resizeRafId);
       }
@@ -6241,7 +5994,7 @@ var WoongCanvasMarker = function (props) {
         stage.height(mapDiv.offsetHeight);
         offsetCacheRef.current.clear();
         boundingBoxCacheRef.current.clear();
-        updateViewport();
+        updateViewport$1();
         renderAllImmediate();
         resizeRafId = null;
       });
@@ -6254,10 +6007,9 @@ var WoongCanvasMarker = function (props) {
     controller.addEventListener('CLICK', handleClick);
     controller.addEventListener('MOUSEMOVE', handleMouseMove);
     controller.addEventListener('DRAGSTART', handleDragStart);
-    controller.addEventListener('DRAGEND', handleDragEnd); // 맵 컨테이너에 mouseleave 이벤트 추가
-
+    controller.addEventListener('DRAGEND', handleDragEnd);
     mapDiv.addEventListener('mouseleave', handleMouseLeave);
-    renderAllImmediate(); // Context 사용 시 컴포넌트 등록 (다중 인스턴스 관리)
+    renderAllImmediate(); // Context 사용 시 컴포넌트 등록
 
     var componentInstance = null;
 
@@ -6278,22 +6030,17 @@ var WoongCanvasMarker = function (props) {
         },
         isInteractionDisabled: function () {
           return disableInteractionRef.current;
-        } // 🚫 상호작용 비활성화 여부 반환
-
+        }
       };
       context.registerComponent(componentInstance);
-    } // Cleanup 함수
-
+    }
 
     return function () {
-      // RAF 정리
       if (resizeRafId !== null) {
         cancelAnimationFrame(resizeRafId);
-      } // 옵저버 정리
-
-
-      resizeObserver.disconnect(); // 이벤트 리스너 정리
+      }
 
+      resizeObserver.disconnect();
       controller.removeEventListener('IDLE', handleIdle);
       controller.removeEventListener('ZOOMSTART', handleZoomStart);
       controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
@@ -6302,69 +6049,41 @@ var WoongCanvasMarker = function (props) {
       controller.removeEventListener('MOUSEMOVE', handleMouseMove);
       controller.removeEventListener('DRAGSTART', handleDragStart);
       controller.removeEventListener('DRAGEND', handleDragEnd);
-      mapDiv.removeEventListener('mouseleave', handleMouseLeave); // Context 정리
+      mapDiv.removeEventListener('mouseleave', handleMouseLeave);
 
       if (context && componentInstance) {
         context.unregisterComponent(componentInstance);
-      } // Konva 리소스 정리
-
+      }
 
       baseLayer.destroyChildren();
-      animationLayer.destroyChildren();
       eventLayer.destroyChildren();
-      stage.destroy(); // 캐시 정리
-
+      stage.destroy();
       offsetCacheRef.current.clear();
       boundingBoxCacheRef.current.clear();
       spatialIndexRef.current.clear();
     };
-  }, []); // 초기화는 한 번만
-  // --------------------------------------------------------------------------
-  // Lifecycle: disableInteraction 동기화
-  // --------------------------------------------------------------------------
+  }, []); // disableInteraction 동기화
 
   useEffect(function () {
     disableInteractionRef.current = disableInteraction;
-  }, [disableInteraction]); // --------------------------------------------------------------------------
-  // Lifecycle: 외부 selectedItems 동기화
-  // --------------------------------------------------------------------------
+  }, [disableInteraction]); // 외부 selectedItems 동기화
 
   useEffect(function () {
-    if (!stageRef.current) return; // externalSelectedItems가 undefined면 외부 제어 안 함
-
-    if (externalSelectedItems === undefined) return; // 외부에서 전달된 selectedItems로 동기화
-
-    var newSelectedIds = new Set();
-    var newSelectedItemsMap = new Map();
-    externalSelectedItems.forEach(function (item) {
-      newSelectedIds.add(item.id);
-      newSelectedItemsMap.set(item.id, item);
-    });
-    selectedIdsRef.current = newSelectedIds;
-    selectedItemsMapRef.current = newSelectedItemsMap; // 렌더링
-
+    if (!stageRef.current) return;
+    syncExternalSelectedItems(externalSelectedItems, selectedIdsRef, selectedItemsMapRef);
     doRenderBase();
-    doRenderAnimation();
     doRenderEvent();
-  }, [externalSelectedItems]); // 배열 자체를 dependency로 사용
-  // --------------------------------------------------------------------------
-  // Lifecycle: 외부 selectedItem 변경 시 Event Layer 리렌더링
-  // --------------------------------------------------------------------------
+  }, [externalSelectedItems]); // 외부 selectedItem 변경 시 Event Layer 리렌더링
 
   useEffect(function () {
-    if (!stageRef.current) return; // Ref 동기화
-
-    selectedItemRef.current = externalSelectedItem; // selectedItem이 변경되면 Event Layer만 다시 그림
-
+    if (!stageRef.current) return;
+    selectedItemRef.current = externalSelectedItem;
     doRenderEvent();
-  }, [externalSelectedItem]); // --------------------------------------------------------------------------
-  // Lifecycle: 데이터 변경 시 렌더링
-  // --------------------------------------------------------------------------
+  }, [externalSelectedItem]); // 데이터 변경 시 렌더링 (캐시 정리 및 선택 상태 동기화)
 
   useEffect(function () {
-    if (!stageRef.current) return; // dataRef 동기화
-
-    dataRef.current = data; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
+    if (!stageRef.current) return;
+    dataRef.current = data;
 
     if (containerRef.current) {
       containerRef.current.style.transform = '';
@@ -6374,46 +6093,10 @@ var WoongCanvasMarker = function (props) {
     accumTranslateRef.current = {
       x: 0,
       y: 0
-    }; // 캐시 정리 (새 데이터이므로 기존 캐시는 무효)
-
+    };
     offsetCacheRef.current.clear();
     boundingBoxCacheRef.current.clear();
-    /**
-     * 선택 상태 동기화 (최적화 버전)
-     *
-     * data가 변경되면 selectedItemsMapRef도 업데이트 필요
-     * (참조가 바뀌므로 기존 Map의 데이터는 stale 상태)
-     *
-     * 🔥 중요: 화면 밖 데이터도 선택 상태 유지!
-     * - 현재 data에 있으면 최신 데이터로 업데이트
-     * - 없으면 기존 selectedItemsMapRef의 데이터 유지
-     *
-     * 최적화: data를 Map으로 먼저 변환하여 find() 순회 제거
-     * - O(전체 데이터 수 + 선택된 개수) - 매우 효율적
-     */
-
-    var dataMap = new Map(data.map(function (m) {
-      return [m.id, m];
-    }));
-    var newSelectedItemsMap = new Map();
-    selectedIdsRef.current.forEach(function (id) {
-      // 현재 data에 있으면 최신 데이터 사용
-      var currentItem = dataMap.get(id);
-
-      if (currentItem) {
-        newSelectedItemsMap.set(id, currentItem);
-      } else {
-        // 화면 밖이면 기존 데이터 유지
-        var prevItem = selectedItemsMapRef.current.get(id);
-
-        if (prevItem) {
-          newSelectedItemsMap.set(id, prevItem);
-        }
-      }
-    }); // selectedIdsRef는 그대로 유지 (화면 밖 항목도 선택 상태 유지)
-
-    selectedItemsMapRef.current = newSelectedItemsMap; // 즉시 렌더링
-
+    selectedItemsMapRef.current = syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current);
     renderAllImmediate();
   }, [data]);
   return createPortal(React.createElement("div", {
@@ -6430,10 +6113,35 @@ var WoongCanvasMarker = function (props) {
  * 폴리곤 렌더링 유틸리티
  *
  * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
+ * GeoJSON MultiPolygon 형식을 지원하며, 도넛 폴리곤(구멍이 있는 폴리곤)도 처리할 수 있습니다.
  */
 
 /**
  * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
+ *
+ * Canvas 2D Context를 사용하여 폴리곤을 그립니다.
+ * 도넛 폴리곤의 경우 evenodd fill rule을 사용하여 구멍을 처리합니다.
+ *
+ * @param params 폴리곤 그리기 파라미터
+ *
+ * @remarks
+ * - **도넛 폴리곤 처리**:
+ *   - 외부 폴리곤과 내부 구멍들을 같은 path에 추가
+ *   - `fill('evenodd')`를 사용하여 구멍 뚫기
+ * - **일반 폴리곤 처리**: 각 폴리곤 그룹을 개별적으로 그리기
+ * - **성능**: O(n), n은 폴리곤의 총 좌표 수
+ *
+ * @example
+ * ```typescript
+ * drawPolygon({
+ *   ctx,
+ *   polygonOffsets: [[[[100, 200], [200, 200], [200, 100], [100, 100]]]],
+ *   isDonutPolygon: false,
+ *   fillColor: 'rgba(255, 0, 0, 0.5)',
+ *   strokeColor: 'rgba(255, 0, 0, 1)',
+ *   lineWidth: 2
+ * });
+ * ```
  */
 var drawPolygon = function (_a) {
   var ctx = _a.ctx,
@@ -6447,13 +6155,16 @@ var drawPolygon = function (_a) {
     var multiPolygon = polygonOffsets_1[_i];
 
     if (isDonutPolygon) {
-      ctx.beginPath(); // 1. 외부 폴리곤 그리기
+      // 도넛 폴리곤 처리: 외부 폴리곤 + 내부 구멍들을 같은 path에 추가
+      ctx.beginPath(); // 1. 외부 폴리곤 그리기 (첫 번째 폴리곤)
 
-      if (multiPolygon[0] && multiPolygon[0].length > 0) {
-        ctx.moveTo(multiPolygon[0][0][0], multiPolygon[0][0][1]);
+      var outerPolygon = multiPolygon[0];
+
+      if (outerPolygon && outerPolygon.length > 0) {
+        ctx.moveTo(outerPolygon[0][0], outerPolygon[0][1]);
 
-        for (var i = 1; i < multiPolygon[0].length; i++) {
-          ctx.lineTo(multiPolygon[0][i][0], multiPolygon[0][i][1]);
+        for (var i = 1; i < outerPolygon.length; i++) {
+          ctx.lineTo(outerPolygon[i][0], outerPolygon[i][1]);
         }
 
         ctx.closePath();
@@ -6480,7 +6191,7 @@ var drawPolygon = function (_a) {
       ctx.lineWidth = lineWidth;
       ctx.stroke();
     } else {
-      // 일반 폴리곤
+      // 일반 폴리곤 처리: 각 폴리곤 그룹을 개별적으로 그리기
       for (var _b = 0, multiPolygon_1 = multiPolygon; _b < multiPolygon_1.length; _b++) {
         var polygonGroup = multiPolygon_1[_b];
         if (!polygonGroup.length) continue;
@@ -6493,7 +6204,8 @@ var drawPolygon = function (_a) {
           ctx.lineTo(point[0], point[1]);
         }
 
-        ctx.closePath();
+        ctx.closePath(); // 스타일 설정 및 렌더링
+
         ctx.fillStyle = fillColor;
         ctx.strokeStyle = strokeColor;
         ctx.lineWidth = lineWidth;
@@ -6504,19 +6216,30 @@ var drawPolygon = function (_a) {
   }
 };
 /**
- * 폴리곤 Base 렌더링 함수
+ * 폴리곤 Base 렌더링 함수 팩토리
+ *
+ * Base Layer에서 사용할 렌더링 함수를 생성합니다.
+ * 선택되지 않은 폴리곤만 렌더링하며, 선택된 항목은 Event Layer에서 처리됩니다.
  *
+ * @template T 폴리곤 데이터의 추가 속성 타입
  * @param baseFillColor 기본 폴리곤 채우기 색상
  * @param baseStrokeColor 기본 폴리곤 테두리 색상
  * @param baseLineWidth 기본 폴리곤 테두리 두께
  * @returns Base Layer 렌더링 함수
  *
+ * @remarks
+ * - 선택된 항목은 Event Layer에서 그려지므로 Base Layer에서는 스킵
+ * - 성능: O(n), n은 렌더링할 폴리곤 개수
+ * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+ *
  * @example
+ * ```typescript
  * const renderBase = renderPolygonBase(
  *   'rgba(255, 100, 100, 0.5)',
  *   'rgba(200, 50, 50, 0.8)',
  *   2
  * );
+ * ```
  */
 
 var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth) {
@@ -6527,12 +6250,15 @@ var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth)
         utils = _a.utils;
 
     for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
-      var item = items_1[_i]; // 선택된 항목은 Event Layer에서 그림
+      var item = items_1[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
+
+      if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+
+      if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
 
-      if (selectedIds.has(item.id)) continue;
-      if (!item.paths) continue;
       var polygonOffsets = utils.getOrComputePolygonOffsets(item);
-      if (!polygonOffsets) continue;
+      if (!polygonOffsets) continue; // 폴리곤 그리기
+
       drawPolygon({
         ctx: ctx,
         polygonOffsets: polygonOffsets,
@@ -6545,8 +6271,12 @@ var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth)
   };
 };
 /**
- * 폴리곤 Event 렌더링 함수
+ * 폴리곤 Event 렌더링 함수 팩토리
  *
+ * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+ * 선택된 항목, hover된 항목, 마지막 선택된 항목을 각각 다른 스타일로 렌더링합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
  * @param baseFillColor 기본 폴리곤 채우기 색상 (필수, fallback용)
  * @param baseStrokeColor 기본 폴리곤 테두리 색상 (필수, fallback용)
  * @param baseLineWidth 기본 폴리곤 테두리 두께 (필수, fallback용)
@@ -6561,7 +6291,14 @@ var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth)
  * @param hoveredLineWidth Hover 시 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
  * @returns Event Layer 렌더링 함수
  *
+ * @remarks
+ * - **렌더링 순서**: 선택된 항목 → 마지막 선택된 항목 → hover된 항목 (최상단)
+ * - **성능**: O(m), m은 선택된 항목 수 + hover된 항목 수
+ * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+ * - hover된 항목이 선택되어 있으면 active 스타일 적용
+ *
  * @example
+ * ```typescript
  * const renderEvent = renderPolygonEvent(
  *   'rgba(255, 100, 100, 0.5)',  // baseFillColor
  *   'rgba(200, 50, 50, 0.8)',    // baseStrokeColor
@@ -6570,6 +6307,7 @@ var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth)
  *   'rgba(255, 152, 0, 1)',      // selectedStrokeColor
  *   4                             // selectedLineWidth
  * );
+ * ```
  */
 
 var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth) {
@@ -6597,13 +6335,19 @@ var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth
         hoveredItem = _a.hoveredItem,
         utils = _a.utils,
         selectedItems = _a.selectedItems,
-        selectedItem = _a.selectedItem; // 1. 선택된 항목들 그리기 (마지막 선택 항목과 호버된 항목 제외)
+        selectedItem = _a.selectedItem; // 성능 최적화: selectedItems를 Set으로 변환하여 O(1) 조회 (매번 some() 체크 방지)
+
+    var selectedIdsSet = selectedItems ? new Set(selectedItems.map(function (item) {
+      return item.id;
+    })) : new Set();
+    var hoveredItemId = hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id;
+    var selectedItemId = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id; // 1. 선택된 항목들 그리기 (마지막 선택 항목과 호버된 항목 제외)
 
     if (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) {
       for (var _i = 0, selectedItems_1 = selectedItems; _i < selectedItems_1.length; _i++) {
         var item = selectedItems_1[_i]; // 마지막 선택 항목과 호버된 항목은 나중에 따로 그림
 
-        if (item.id === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) || (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) === item.id) continue;
+        if (item.id === selectedItemId || item.id === hoveredItemId) continue;
         if (!item.paths) continue;
         var polygonOffsets = utils.getOrComputePolygonOffsets(item);
         if (!polygonOffsets) continue;
@@ -6619,7 +6363,7 @@ var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth
     } // 2. 마지막 선택된 항목 그리기 (호버되지 않은 경우)
 
 
-    if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.paths) && (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) !== selectedItem.id) {
+    if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.paths) && hoveredItemId !== selectedItemId) {
       var polygonOffsets = utils.getOrComputePolygonOffsets(selectedItem);
 
       if (polygonOffsets) {
@@ -6637,10 +6381,10 @@ var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth
 
     if (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.paths) {
       var polygonOffsets = utils.getOrComputePolygonOffsets(hoveredItem);
-      if (!polygonOffsets) return;
-      var isSelected = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(function (item) {
-        return item.id === hoveredItem.id;
-      });
+      if (!polygonOffsets) return; // 좌표 변환 실패 시 스킵 (return은 렌더링 함수 종료)
+      // 성능 최적화: Set을 사용하여 O(1) 조회 (이전: O(m) some() 체크)
+
+      var isSelected = selectedIdsSet.has(hoveredItem.id);
       drawPolygon({
         ctx: ctx,
         polygonOffsets: polygonOffsets,
@@ -6653,24 +6397,19 @@ var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth
   };
 };
 
-// 메인 컴포넌트
-// ============================================================================
-
 var WoongCanvasPolygon = function (props) {
   var data = props.data,
       onClick = props.onClick,
       _a = props.enableMultiSelect,
       enableMultiSelect = _a === void 0 ? false : _a,
-      _b = props.enableViewportCulling,
-      enableViewportCulling = _b === void 0 ? true : _b,
-      _c = props.cullingMargin,
-      cullingMargin = _c === void 0 ? DEFAULT_CULLING_MARGIN : _c,
-      _d = props.maxCacheSize,
-      maxCacheSize = _d === void 0 ? DEFAULT_MAX_CACHE_SIZE : _d,
+      _b = props.cullingMargin,
+      cullingMargin = _b === void 0 ? DEFAULT_CULLING_MARGIN : _b,
+      _c = props.maxCacheSize,
+      maxCacheSize = _c === void 0 ? DEFAULT_MAX_CACHE_SIZE : _c,
       externalSelectedItems = props.selectedItems,
       externalSelectedItem = props.selectedItem,
-      _e = props.disableInteraction,
-      disableInteraction = _e === void 0 ? false : _e,
+      _d = props.disableInteraction,
+      disableInteraction = _d === void 0 ? false : _d,
       baseFillColor = props.baseFillColor,
       baseStrokeColor = props.baseStrokeColor,
       baseLineWidth = props.baseLineWidth,
@@ -6683,173 +6422,67 @@ var WoongCanvasPolygon = function (props) {
       hoveredFillColor = props.hoveredFillColor,
       hoveredStrokeColor = props.hoveredStrokeColor,
       hoveredLineWidth = props.hoveredLineWidth,
-      options = __rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "baseFillColor", "baseStrokeColor", "baseLineWidth", "selectedFillColor", "selectedStrokeColor", "selectedLineWidth", "activeFillColor", "activeStrokeColor", "activeLineWidth", "hoveredFillColor", "hoveredStrokeColor", "hoveredLineWidth"]); // --------------------------------------------------------------------------
+      options = __rest(props, ["data", "onClick", "enableMultiSelect", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "baseFillColor", "baseStrokeColor", "baseLineWidth", "selectedFillColor", "selectedStrokeColor", "selectedLineWidth", "activeFillColor", "activeStrokeColor", "activeLineWidth", "hoveredFillColor", "hoveredStrokeColor", "hoveredLineWidth"]); // --------------------------------------------------------------------------
   // Hooks & Context
   // --------------------------------------------------------------------------
 
 
   var controller = useMintMapController();
   var context = useWoongCanvasContext();
-  var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // --------------------------------------------------------------------------
-  // DOM Refs
-  // --------------------------------------------------------------------------
+  var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // DOM Refs
 
   var divRef = useRef(document.createElement('div'));
   var divElement = divRef.current;
   var containerRef = useRef(null);
-  var markerRef = useRef(); // --------------------------------------------------------------------------
-  // Konva Refs
-  // --------------------------------------------------------------------------
+  var markerRef = useRef(); // Konva Refs
 
   var stageRef = useRef(null);
   var baseLayerRef = useRef(null);
-  var eventLayerRef = useRef(null); // --------------------------------------------------------------------------
-  // Data Refs - 선택 및 Hover 상태 관리
-  // --------------------------------------------------------------------------
-
-  /** data prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
-
-  var dataRef = useRef(data); // --------------------------------------------------------------------------
-  // State Refs - 선택 및 Hover 상태 관리
-  // --------------------------------------------------------------------------
-
-  /** 상호작용 비활성화 상태 (Ref로 관리하여 클로저 문제 해결) */
+  var eventLayerRef = useRef(null); // 상태 관리 Refs (React 리렌더링 최소화)
 
+  var dataRef = useRef(data);
   var disableInteractionRef = useRef(disableInteraction);
-  /** 현재 Hover 중인 항목 */
-
   var hoveredItemRef = useRef(null);
-  /** 외부에서 전달된 선택 항목 (Ref로 관리하여 클로저 문제 해결) */
-
   var selectedItemRef = useRef(externalSelectedItem);
-  /**
-   * 선택된 항목의 ID Set
-   *
-   * 용도:
-   * 1. onClick 콜백에 전달 - onClick(data, selectedIdsRef.current)
-   * 2. 선택 여부 빠른 체크 - selectedIdsRef.current.has(id)
-   * 3. 메모리 효율 - ID만 저장 (작음)
-   *
-   * selectedItemsMapRef와 차이:
-   * - selectedIdsRef: ID만 저장 { "id1", "id2" }
-   * - selectedItemsMapRef: 전체 객체 저장 { id1: {...}, id2: {...} }
-   *
-   * 둘 다 필요: ID만 필요한 곳은 이것, 전체 데이터 필요한 곳은 Map
-   */
-
   var selectedIdsRef = useRef(new Set());
-  /**
-   * 선택된 항목의 실제 데이터 Map (핵심 성능 최적화!)
-   *
-   * 목적: doRenderEvent에서 filter() 순회 제거
-   * - 이전: markersRef.current.filter() → O(전체 마커 수)
-   * - 현재: Map.values() → O(선택된 항목 수)
-   *
-   * 성능 개선: 10,000개 중 1개 선택 시
-   * - 이전: 10,000번 체크
-   * - 현재: 1번 접근 (10,000배 빠름!)
-   */
-
-  var selectedItemsMapRef = useRef(new Map()); // --------------------------------------------------------------------------
-  // Drag Refs
-  // --------------------------------------------------------------------------
+  var selectedItemsMapRef = useRef(new Map()); // 드래그 상태 Refs
 
   var draggingRef = useRef(false);
   var prevCenterOffsetRef = useRef(null);
   var accumTranslateRef = useRef({
     x: 0,
     y: 0
-  }); // --------------------------------------------------------------------------
-  // Performance Refs (캐싱 & 최적화)
-  // --------------------------------------------------------------------------
-
-  /** 좌표 변환 결과 LRU 캐시 */
+  }); // 성능 최적화 Refs
 
   var offsetCacheRef = useRef(new LRUCache(maxCacheSize));
-  /** 공간 인덱스 (빠른 Hit Test) */
-
   var spatialIndexRef = useRef(new SpatialHashGrid(SPATIAL_GRID_CELL_SIZE));
-  /** 바운딩 박스 캐시 (Viewport Culling 최적화) */
-
   var boundingBoxCacheRef = useRef(new Map());
-  /** 뷰포트 경계 캐시 (Viewport Culling) */
-
-  var viewportRef = useRef(null); // --------------------------------------------------------------------------
-  // 유틸리티 함수: 뷰포트 관리
-  // --------------------------------------------------------------------------
-
-  /**
-   * 현재 뷰포트 영역 계산
-   */
-
-  var updateViewport = function () {
-    if (!stageRef.current) return;
-    var stage = stageRef.current;
-    viewportRef.current = {
-      minX: -cullingMargin,
-      maxX: stage.width() + cullingMargin,
-      minY: -cullingMargin,
-      maxY: stage.height() + cullingMargin
-    };
-  };
-  /**
-   * 아이템이 현재 뷰포트 안에 있는지 확인 (바운딩 박스 캐싱)
-   */
-
-
-  var isInViewport = function (item) {
-    if (!enableViewportCulling || !viewportRef.current) return true;
-    var viewport = viewportRef.current; // 캐시된 바운딩 박스 확인
+  var viewportRef = useRef(null); // 뷰포트 영역 계산 (Viewport Culling용)
 
-    var bbox = boundingBoxCacheRef.current.get(item.id);
+  var updateViewport$1 = function () {
+    updateViewport(stageRef.current, cullingMargin, viewportRef);
+  }; // 뷰포트 내부 여부 확인 (바운딩 박스 캐싱)
 
-    if (!bbox) {
-      // 바운딩 박스 계산 (공통 함수 사용)
-      var computed = computeBoundingBox(item);
-      if (!computed) return false;
-      bbox = computed;
-      boundingBoxCacheRef.current.set(item.id, bbox);
-    } // 바운딩 박스와 viewport 교차 체크
 
-
-    return !(bbox.maxX < viewport.minX || bbox.minX > viewport.maxX || bbox.maxY < viewport.minY || bbox.minY > viewport.maxY);
-  }; // --------------------------------------------------------------------------
-  // 유틸리티 함수: 좌표 변환 캐싱
-  // --------------------------------------------------------------------------
-
-  /**
-   * 폴리곤 좌표 변환 결과를 캐시하고 반환
-   * @param polygonData 폴리곤 데이터
-   * @returns 변환된 좌표 배열 또는 null
-   */
+  var isInViewport$1 = function (item) {
+    return isInViewport(item, viewportRef, boundingBoxCacheRef, computeBoundingBox);
+  }; // 폴리곤 좌표 변환 (위경도 → 화면 좌표, LRU 캐시 사용)
 
 
   var getOrComputePolygonOffsets = function (polygonData) {
     var cached = offsetCacheRef.current.get(polygonData.id);
     if (cached && Array.isArray(cached)) return cached;
     var result = computePolygonOffsets(polygonData, controller);
-
-    if (result) {
-      offsetCacheRef.current.set(polygonData.id, result);
-    }
-
+    if (!result) return null;
+    offsetCacheRef.current.set(polygonData.id, result);
     return result;
-  }; // --------------------------------------------------------------------------
-  // 유틸리티 함수: 바운딩 박스 계산
-  // --------------------------------------------------------------------------
-
-  /**
-   * 폴리곤의 바운딩 박스 계산
-   *
-   * @param item 폴리곤 데이터
-   * @returns 바운딩 박스 또는 null
-   */
+  }; // 폴리곤 바운딩 박스 계산 (Viewport Culling 및 Hit Test용)
 
 
   var computeBoundingBox = function (item) {
-    // 폴리곤: 모든 좌표의 최소/최대값 계산
     var offsets = getOrComputePolygonOffsets(item);
-    if (!offsets) return null;
+    if (!offsets) return null; // 모든 좌표를 순회하며 최소/최대값 찾기
+
     var minX = Infinity,
         minY = Infinity,
         maxX = -Infinity,
@@ -6879,86 +6512,39 @@ var WoongCanvasPolygon = function (props) {
       maxX: maxX,
       maxY: maxY
     };
-  }; // --------------------------------------------------------------------------
-  // 유틸리티 함수: 공간 인덱싱
-  // --------------------------------------------------------------------------
+  }; // 공간 인덱스 빌드 (빠른 Hit Test용)
 
-  /**
-   * 공간 인덱스 빌드 (빠른 Hit Test를 위한 자료구조)
-   */
-
-
-  var buildSpatialIndex = function () {
-    var spatial = spatialIndexRef.current;
-    spatial.clear();
-    var currentData = dataRef.current;
-
-    for (var _i = 0, currentData_1 = currentData; _i < currentData_1.length; _i++) {
-      var item = currentData_1[_i]; // 바운딩 박스 계산 (공통 함수 사용)
-
-      var bbox = computeBoundingBox(item);
 
-      if (bbox) {
-        spatial.insert(item, bbox.minX, bbox.minY, bbox.maxX, bbox.maxY);
-      }
-    }
-  }; // --------------------------------------------------------------------------
-  // 렌더링 함수 결정 (dataType에 따라)
-  // --------------------------------------------------------------------------
-
-  /**
-   * 외부 렌더링 함수에 전달할 유틸리티 객체
-   */
+  var buildSpatialIndex$1 = function () {
+    buildSpatialIndex(dataRef.current, spatialIndexRef.current, computeBoundingBox);
+  }; // 렌더링 유틸리티 객체
 
 
   var renderUtils = {
     getOrComputePolygonOffsets: getOrComputePolygonOffsets,
     getOrComputeMarkerOffset: function () {
       return null;
-    } // 폴리곤에서는 사용하지 않음
-
-  };
-  /**
-   * 렌더링 함수 생성 (props 기반)
-   */
+    }
+  }; // 렌더링 함수 생성
 
   var renderBase = renderPolygonBase(baseFillColor, baseStrokeColor, baseLineWidth);
-  var renderEvent = renderPolygonEvent(baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth);
-  /** Base Layer에서 사용할 빈 Set (재사용) */
-
-  useRef(new Set());
-  /**
-   * Base 레이어 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
-   *
-   * 🔥 최적화:
-   * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
-   * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
-   * 3. 클로저로 최신 데이터 참조
-   *
-   * 🎯 topOnHover 지원:
-   * - renderEvent가 없을 때 Base Layer에서 hover 처리 (fallback)
-   * - renderEvent가 있으면 Event Layer에서 처리 (성능 최적화)
-   */
+  var renderEvent = renderPolygonEvent(baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth); // Base Layer 렌더링 (뷰포트 컬링 적용)
 
   var doRenderBase = function () {
     var layer = baseLayerRef.current;
-    if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
-
+    if (!layer) return;
     var shape = layer.findOne('.base-render-shape');
 
     if (!shape) {
-      // 최초 생성 (한 번만 실행됨)
-      // sceneFunc도 여기서 한 번만 설정 (클로저로 최신 데이터 참조)
       shape = new Konva.Shape({
         name: 'base-render-shape',
         sceneFunc: function (context, shape) {
           var ctx = context;
-          var hovered = hoveredItemRef.current; // 클로저로 최신 ref 값 참조
-
-          var visibleItems = enableViewportCulling ? dataRef.current.filter(function (item) {
-            return isInViewport(item);
-          }) : dataRef.current; // 일반 항목 렌더링
+          var hovered = hoveredItemRef.current; // 뷰포트 컬링: 화면에 보이는 항목만 필터링
 
+          var visibleItems = dataRef.current.filter(function (item) {
+            return isInViewport$1(item);
+          });
           renderBase({
             ctx: ctx,
             items: visibleItems,
@@ -6972,38 +6558,24 @@ var WoongCanvasPolygon = function (props) {
         hitStrokeWidth: 0
       });
       layer.add(shape);
-    } // sceneFunc는 이미 설정되어 있으므로 다시 그리기만
-
+    }
 
     layer.batchDraw();
-  };
-  /**
-   * Event 레이어 렌더링 (hover + 선택 상태 표시)
-   *
-   * 🔥 최적화:
-   * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
-   * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
-   * 3. 클로저로 최신 데이터 참조
-   */
+  }; // Event Layer 렌더링 (hover 효과 및 선택 상태 표시)
 
 
   var doRenderEvent = function () {
     var layer = eventLayerRef.current;
-    if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
-
+    if (!layer) return;
     var shape = layer.findOne('.event-render-shape');
 
     if (!shape) {
-      // 최초 생성 (한 번만 실행됨)
-      // sceneFunc도 여기서 한 번만 설정 (클로저로 최신 데이터 참조)
       shape = new Konva.Shape({
         name: 'event-render-shape',
         sceneFunc: function (context, shape) {
-          var ctx = context; // 클로저로 최신 ref 값 참조
-
-          var selectedItems = Array.from(selectedItemsMapRef.current.values());
-          var hovered = hoveredItemRef.current; // 일반 렌더링
-
+          var ctx = context;
+          var selectedItems = mapValuesToArray(selectedItemsMapRef.current);
+          var hovered = hoveredItemRef.current;
           renderEvent({
             ctx: ctx,
             hoveredItem: hovered,
@@ -7017,126 +6589,57 @@ var WoongCanvasPolygon = function (props) {
         hitStrokeWidth: 0
       });
       layer.add(shape);
-    } // sceneFunc는 이미 설정되어 있으므로 다시 그리기만
-
+    }
 
     layer.batchDraw();
-  };
-  /**
-   * 전체 즉시 렌더링 (IDLE 시 호출)
-   */
+  }; // 전체 즉시 렌더링
 
 
   var renderAllImmediate = function () {
-    updateViewport();
-    buildSpatialIndex();
+    updateViewport$1();
+    buildSpatialIndex$1();
     doRenderBase();
     doRenderEvent();
-  }; // --------------------------------------------------------------------------
-  // 이벤트 핸들러: 지도 이벤트
-  // --------------------------------------------------------------------------
-
-  /**
-   * 지도 이동/줌 완료 시 처리
-   */
-
-
-  var handleIdle = function () {
-    prevCenterOffsetRef.current = null;
-    accumTranslateRef.current = {
-      x: 0,
-      y: 0
-    }; // 2. 캐시 정리 (지도 이동/줌으로 좌표 변환 결과가 바뀜)
-
-    offsetCacheRef.current.clear();
-    boundingBoxCacheRef.current.clear(); // 3. 마커 위치 업데이트
-
-    var bounds = controller.getCurrBounds();
-
-    var markerOptions = __assign({
-      position: bounds.nw
-    }, options);
-
-    markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // 4. transform 제거 전에 새 데이터로 즉시 렌더링 (겹침 방지)
-
-    if (containerRef.current) {
-      containerRef.current.style.transform = '';
-      containerRef.current.style.visibility = '';
-    } // 5. 새 위치에서 렌더링
-
-
-    renderAllImmediate();
-  };
-  /**
-   * 줌 시작 시 처리 (일시적으로 숨김)
-   */
+  }; // 지도 이벤트 핸들러 생성
+
+
+  var _e = createMapEventHandlers({
+    controller: controller,
+    containerRef: containerRef,
+    markerRef: markerRef,
+    options: options,
+    prevCenterOffsetRef: prevCenterOffsetRef,
+    accumTranslateRef: accumTranslateRef,
+    offsetCacheRef: offsetCacheRef,
+    boundingBoxCacheRef: boundingBoxCacheRef,
+    renderAllImmediate: renderAllImmediate
+  }),
+      handleIdle = _e.handleIdle,
+      handleZoomStart = _e.handleZoomStart,
+      handleZoomEnd = _e.handleZoomEnd,
+      handleCenterChanged = _e.handleCenterChanged,
+      handleDragStartShared = _e.handleDragStart,
+      handleDragEndShared = _e.handleDragEnd;
 
-
-  var handleZoomStart = function () {
-    if (containerRef.current) {
-      containerRef.current.style.visibility = 'hidden';
-    }
-  };
-  /**
-   * 줌 종료 시 처리 (다시 표시)
-   */
-
-
-  var handleZoomEnd = function () {
-    if (containerRef.current) {
-      containerRef.current.style.visibility = '';
-    }
+  var handleDragStart = function () {
+    handleDragStartShared();
+    draggingRef.current = true;
+    controller.setMapCursor('grabbing');
   };
-  /**
-   * 지도 중심 변경 시 처리 (transform으로 이동 추적)
-   */
-
-
-  var handleCenterChanged = function () {
-    var center = controller.getCurrBounds().getCenter();
-    var curr = controller.positionToOffset(center);
-    var prev = prevCenterOffsetRef.current;
-
-    if (!prev) {
-      prevCenterOffsetRef.current = {
-        x: curr.x,
-        y: curr.y
-      };
-      return;
-    }
-
-    var dx = prev.x - curr.x;
-    var dy = prev.y - curr.y;
-    accumTranslateRef.current = {
-      x: accumTranslateRef.current.x + dx,
-      y: accumTranslateRef.current.y + dy
-    };
-    prevCenterOffsetRef.current = {
-      x: curr.x,
-      y: curr.y
-    };
-
-    if (containerRef.current) {
-      containerRef.current.style.transform = "translate(".concat(accumTranslateRef.current.x, "px, ").concat(accumTranslateRef.current.y, "px)");
-    }
-  }; // --------------------------------------------------------------------------
-  // Hit Test & 상태 관리
-  // --------------------------------------------------------------------------
 
-  /**
-   * 특정 좌표의 폴리곤 데이터 찾기 (Spatial Index 사용)
-   *
-   * @param offset 검사할 좌표
-   * @returns 찾은 폴리곤 데이터 또는 null
-   */
+  var handleDragEnd = function () {
+    handleDragEndShared();
+    draggingRef.current = false;
+    controller.setMapCursor('grab');
+  }; // Hit Test: 특정 좌표의 폴리곤 찾기
 
 
   var findData = function (offset) {
-    // Spatial Index로 후보 항목만 빠르게 추출 (30,000개 → ~10개)
-    var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 폴리곤 체크
+    // 공간 인덱스에서 후보 항목 조회 (O(1) 수준의 빠른 조회)
+    var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 역순 순회: 나중에 추가된 항목(최상위)이 먼저 선택되도록
 
     for (var i = candidates.length - 1; i >= 0; i--) {
-      var item = candidates[i];
+      var item = candidates[i]; // 정확한 Hit Test: Ray Casting 알고리즘으로 폴리곤 내부 여부 확인
 
       if (isPointInPolygonData(offset, item, getOrComputePolygonOffsets)) {
         return item;
@@ -7144,18 +6647,7 @@ var WoongCanvasPolygon = function (props) {
     }
 
     return null;
-  };
-  /**
-   * Hover 상태 설정 및 레이어 렌더링
-   *
-   * @param data hover된 마커/폴리곤 데이터 또는 null
-   *
-   * 최적화: RAF 제거하여 즉시 렌더링 (16ms 지연 제거)
-   *
-   * 🎯 topOnHover 지원:
-   * - renderEvent가 있으면: Event Layer에서만 처리 (성능 최적화)
-   * - renderEvent가 없고 topOnHover=true면: Base Layer에서 처리
-   */
+  }; // Hover 상태 설정 및 렌더링
 
 
   var setHovered = function (data) {
@@ -7165,26 +6657,14 @@ var WoongCanvasPolygon = function (props) {
       controller.setMapCursor('grabbing');
     } else {
       controller.setMapCursor(data ? 'pointer' : 'grab');
-    } // 즉시 렌더링 (RAF 없이)
-
+    }
 
     doRenderEvent();
-  };
-  /**
-   * 클릭 처리 (단일/다중 선택)
-   *
-   * @param data 클릭된 마커/폴리곤 데이터
-   *
-   * 🔥 최적화: 단일 Shape 렌더링으로 Base Layer 재렌더링 속도 향상
-   * - sceneFunc에서 selectedIds를 체크하여 선택된 마커만 스킵
-   * - 객체 생성 오버헤드 제거로 1000개 이상도 부드럽게 처리
-   */
+  }; // 클릭 처리: 선택 상태 업데이트
 
 
   var handleLocalClick = function (data) {
-    // 1. 선택 상태 업데이트
     if (enableMultiSelect) {
-      // 다중 선택: Set과 Map 동시 업데이트
       var newSelected = new Set(selectedIdsRef.current);
 
       if (newSelected.has(data.id)) {
@@ -7197,7 +6677,6 @@ var WoongCanvasPolygon = function (props) {
 
       selectedIdsRef.current = newSelected;
     } else {
-      // 단일 선택: 토글
       var newSelected = new Set();
 
       if (!selectedIdsRef.current.has(data.id)) {
@@ -7209,144 +6688,79 @@ var WoongCanvasPolygon = function (props) {
       }
 
       selectedIdsRef.current = newSelected;
-    } // 2. Base Layer 재렌더링 (단일 Shape로 최적화되어 빠름)
-
-
-    doRenderBase(); // 3. Event Layer 렌더링 (hover 처리)
+    }
 
+    doRenderBase();
     doRenderEvent();
-  }; // --------------------------------------------------------------------------
-  // 이벤트 핸들러: UI 이벤트
-  // --------------------------------------------------------------------------
-
-  /**
-   * 클릭 이벤트 처리
-   */
+  }; // 클릭 이벤트 핸들러
 
 
   var handleClick = function (event) {
-    var _a;
-
-    if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
-
-    if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
-
-    try {
-      var clickedOffset = controller.positionToOffset(event.param.position);
-      var data_1 = findData(clickedOffset);
-
-      if (data_1) {
-        handleLocalClick(data_1);
-
-        if (onClick) {
-          onClick(data_1, selectedIdsRef.current);
-        }
-      }
-    } catch (error) {
-      console.error('[WoongCanvasPolygon] handleClick error:', error);
-    }
-  };
-  /**
-   * 마우스 이동 이벤트 처리 (hover 감지)
-   */
+    if (disableInteractionRef.current) return;
+    var clickedOffset = validateEvent(event, context, controller);
+    if (!clickedOffset) return;
+    var data = findData(clickedOffset);
+    if (!data) return;
+    handleLocalClick(data);
+    onClick === null || onClick === void 0 ? void 0 : onClick(data, selectedIdsRef.current);
+  }; // 마우스 이동 이벤트 핸들러 (hover 감지)
 
 
   var handleMouseMove = function (event) {
-    var _a;
-
-    if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
-
-    if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
-
-    try {
-      var mouseOffset = controller.positionToOffset(event.param.position);
-      var hoveredItem = findData(mouseOffset);
-      var prevHovered = hoveredItemRef.current;
-
-      if (prevHovered !== hoveredItem) {
-        setHovered(hoveredItem);
-      }
-    } catch (error) {
-      console.error('[WoongCanvasPolygon] handleMouseMove error:', error);
-    }
-  };
-  /**
-   * 드래그 시작 처리 (커서를 grabbing으로 변경)
-   */
-
-
-  var handleDragStart = function () {
-    draggingRef.current = true;
-    controller.setMapCursor('grabbing');
-  };
-  /**
-   * 드래그 종료 처리 (커서를 기본으로 복원)
-   */
-
-
-  var handleDragEnd = function () {
-    draggingRef.current = false;
-    controller.setMapCursor('grab');
-  };
-  /**
-   * 마우스가 canvas를 벗어날 때 hover cleanup
-   */
+    if (disableInteractionRef.current) return;
+    var mouseOffset = validateEvent(event, context, controller);
+    if (!mouseOffset) return;
+    var hoveredItem = findData(mouseOffset);
+    var prevHovered = hoveredItemRef.current;
+    if (prevHovered === hoveredItem) return;
+    setHovered(hoveredItem);
+  }; // 마우스가 맵 영역을 벗어날 때 hover 상태 초기화
 
 
   var handleMouseLeave = function () {
-    if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
-
+    if (disableInteractionRef.current) return;
     var prevHovered = hoveredItemRef.current;
-
-    if (prevHovered) {
-      hoveredItemRef.current = null;
-      controller.setMapCursor('grab');
-      doRenderEvent();
-    }
-  }; // --------------------------------------------------------------------------
-  // Lifecycle: DOM 초기화
-  // --------------------------------------------------------------------------
+    if (!prevHovered) return;
+    hoveredItemRef.current = null;
+    controller.setMapCursor('grab');
+    doRenderEvent();
+  }; // DOM 초기화
 
 
   useEffect(function () {
     divElement.style.width = 'fit-content';
     return function () {
-      if (markerRef.current) {
-        controller.clearDrawable(markerRef.current);
-        markerRef.current = undefined;
-      }
+      if (!markerRef.current) return;
+      controller.clearDrawable(markerRef.current);
+      markerRef.current = undefined;
     };
-  }, []); // --------------------------------------------------------------------------
-  // Lifecycle: 마커 생성/업데이트
-  // --------------------------------------------------------------------------
+  }, []); // 마커 생성/업데이트
 
   useEffect(function () {
-    if (options) {
-      var bounds = controller.getCurrBounds();
+    if (!options) return;
+    var bounds = controller.getCurrBounds();
 
-      var markerOptions = __assign({
-        position: bounds.nw
-      }, options);
+    var markerOptions = __assign({
+      position: bounds.nw
+    }, options);
 
-      if (markerRef.current) {
-        controller.updateMarker(markerRef.current, markerOptions);
-      } else {
-        markerRef.current = new Marker(markerOptions);
-        markerRef.current.element = divElement;
-        controller.createMarker(markerRef.current);
+    if (markerRef.current) {
+      controller.updateMarker(markerRef.current, markerOptions);
+      return;
+    }
 
-        if (divElement.parentElement) {
-          divElement.parentElement.style.pointerEvents = 'none';
-        }
+    markerRef.current = new Marker(markerOptions);
+    markerRef.current.element = divElement;
+    controller.createMarker(markerRef.current);
 
-        if (options.zIndex !== undefined) {
-          controller.setMarkerZIndex(markerRef.current, options.zIndex);
-        }
-      }
+    if (divElement.parentElement) {
+      divElement.parentElement.style.pointerEvents = 'none';
     }
-  }, [options]); // --------------------------------------------------------------------------
-  // Lifecycle: Konva 초기화 및 이벤트 리스너 등록
-  // --------------------------------------------------------------------------
+
+    if (options.zIndex !== undefined) {
+      controller.setMarkerZIndex(markerRef.current, options.zIndex);
+    }
+  }, [options]); // Konva 초기화 및 이벤트 리스너 등록
 
   useEffect(function () {
     var mapDiv = controller.mapDivElement;
@@ -7355,11 +6769,9 @@ var WoongCanvasPolygon = function (props) {
       width: mapDiv.offsetWidth,
       height: mapDiv.offsetHeight
     });
-    stageRef.current = stage; // 레이어 최적화 설정
-
+    stageRef.current = stage;
     var baseLayer = new Konva.Layer({
-      listening: false // 이벤트 리스닝 비활성화로 성능 향상
-
+      listening: false
     });
     var eventLayer = new Konva.Layer({
       listening: false
@@ -7367,13 +6779,11 @@ var WoongCanvasPolygon = function (props) {
     baseLayerRef.current = baseLayer;
     eventLayerRef.current = eventLayer;
     stage.add(baseLayer);
-    stage.add(eventLayer); // 초기 뷰포트 설정
-
-    updateViewport(); // ResizeObserver (맵 크기 변경 감지)
+    stage.add(eventLayer);
+    updateViewport$1(); // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
 
     var resizeRafId = null;
     var resizeObserver = new ResizeObserver(function () {
-      // RAF로 다음 프레임에 한 번만 실행 (debounce 효과)
       if (resizeRafId !== null) {
         cancelAnimationFrame(resizeRafId);
       }
@@ -7383,7 +6793,7 @@ var WoongCanvasPolygon = function (props) {
         stage.height(mapDiv.offsetHeight);
         offsetCacheRef.current.clear();
         boundingBoxCacheRef.current.clear();
-        updateViewport();
+        updateViewport$1();
         renderAllImmediate();
         resizeRafId = null;
       });
@@ -7396,10 +6806,9 @@ var WoongCanvasPolygon = function (props) {
     controller.addEventListener('CLICK', handleClick);
     controller.addEventListener('MOUSEMOVE', handleMouseMove);
     controller.addEventListener('DRAGSTART', handleDragStart);
-    controller.addEventListener('DRAGEND', handleDragEnd); // 맵 컨테이너에 mouseleave 이벤트 추가
-
+    controller.addEventListener('DRAGEND', handleDragEnd);
     mapDiv.addEventListener('mouseleave', handleMouseLeave);
-    renderAllImmediate(); // Context 사용 시 컴포넌트 등록 (다중 인스턴스 관리)
+    renderAllImmediate(); // Context 사용 시 컴포넌트 등록
 
     var componentInstance = null;
 
@@ -7418,22 +6827,17 @@ var WoongCanvasPolygon = function (props) {
         },
         isInteractionDisabled: function () {
           return disableInteractionRef.current;
-        } // 🚫 상호작용 비활성화 여부 반환
-
+        }
       };
       context.registerComponent(componentInstance);
-    } // Cleanup 함수
-
+    }
 
     return function () {
-      // RAF 정리
       if (resizeRafId !== null) {
         cancelAnimationFrame(resizeRafId);
-      } // 옵저버 정리
-
-
-      resizeObserver.disconnect(); // 이벤트 리스너 정리
+      }
 
+      resizeObserver.disconnect();
       controller.removeEventListener('IDLE', handleIdle);
       controller.removeEventListener('ZOOMSTART', handleZoomStart);
       controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
@@ -7442,67 +6846,41 @@ var WoongCanvasPolygon = function (props) {
       controller.removeEventListener('MOUSEMOVE', handleMouseMove);
       controller.removeEventListener('DRAGSTART', handleDragStart);
       controller.removeEventListener('DRAGEND', handleDragEnd);
-      mapDiv.removeEventListener('mouseleave', handleMouseLeave); // Context 정리
+      mapDiv.removeEventListener('mouseleave', handleMouseLeave);
 
       if (context && componentInstance) {
         context.unregisterComponent(componentInstance);
-      } // Konva 리소스 정리
-
+      }
 
       baseLayer.destroyChildren();
       eventLayer.destroyChildren();
-      stage.destroy(); // 캐시 정리
-
+      stage.destroy();
       offsetCacheRef.current.clear();
       boundingBoxCacheRef.current.clear();
       spatialIndexRef.current.clear();
     };
-  }, []); // 초기화는 한 번만
-  // --------------------------------------------------------------------------
-  // Lifecycle: disableInteraction 동기화
-  // --------------------------------------------------------------------------
+  }, []); // disableInteraction 동기화
 
   useEffect(function () {
     disableInteractionRef.current = disableInteraction;
-  }, [disableInteraction]); // --------------------------------------------------------------------------
-  // Lifecycle: 외부 selectedItems 동기화
-  // --------------------------------------------------------------------------
+  }, [disableInteraction]); // 외부 selectedItems 동기화
 
   useEffect(function () {
-    if (!stageRef.current) return; // externalSelectedItems가 undefined면 외부 제어 안 함
-
-    if (externalSelectedItems === undefined) return; // 외부에서 전달된 selectedItems로 동기화
-
-    var newSelectedIds = new Set();
-    var newSelectedItemsMap = new Map();
-    externalSelectedItems.forEach(function (item) {
-      newSelectedIds.add(item.id);
-      newSelectedItemsMap.set(item.id, item);
-    });
-    selectedIdsRef.current = newSelectedIds;
-    selectedItemsMapRef.current = newSelectedItemsMap; // 렌더링
-
+    if (!stageRef.current) return;
+    syncExternalSelectedItems(externalSelectedItems, selectedIdsRef, selectedItemsMapRef);
     doRenderBase();
     doRenderEvent();
-  }, [externalSelectedItems]); // 배열 자체를 dependency로 사용
-  // --------------------------------------------------------------------------
-  // Lifecycle: 외부 selectedItem 변경 시 Event Layer 리렌더링
-  // --------------------------------------------------------------------------
+  }, [externalSelectedItems]); // 외부 selectedItem 변경 시 Event Layer 리렌더링
 
   useEffect(function () {
-    if (!stageRef.current) return; // Ref 동기화
-
-    selectedItemRef.current = externalSelectedItem; // selectedItem이 변경되면 Event Layer만 다시 그림
-
+    if (!stageRef.current) return;
+    selectedItemRef.current = externalSelectedItem;
     doRenderEvent();
-  }, [externalSelectedItem]); // --------------------------------------------------------------------------
-  // Lifecycle: 데이터 변경 시 렌더링
-  // --------------------------------------------------------------------------
+  }, [externalSelectedItem]); // 데이터 변경 시 렌더링 (캐시 정리 및 선택 상태 동기화)
 
   useEffect(function () {
-    if (!stageRef.current) return; // dataRef 동기화
-
-    dataRef.current = data; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
+    if (!stageRef.current) return;
+    dataRef.current = data;
 
     if (containerRef.current) {
       containerRef.current.style.transform = '';
@@ -7512,46 +6890,10 @@ var WoongCanvasPolygon = function (props) {
     accumTranslateRef.current = {
       x: 0,
       y: 0
-    }; // 캐시 정리 (새 데이터이므로 기존 캐시는 무효)
-
+    };
     offsetCacheRef.current.clear();
     boundingBoxCacheRef.current.clear();
-    /**
-     * 선택 상태 동기화 (최적화 버전)
-     *
-     * data가 변경되면 selectedItemsMapRef도 업데이트 필요
-     * (참조가 바뀌므로 기존 Map의 데이터는 stale 상태)
-     *
-     * 🔥 중요: 화면 밖 데이터도 선택 상태 유지!
-     * - 현재 data에 있으면 최신 데이터로 업데이트
-     * - 없으면 기존 selectedItemsMapRef의 데이터 유지
-     *
-     * 최적화: data를 Map으로 먼저 변환하여 find() 순회 제거
-     * - O(전체 데이터 수 + 선택된 개수) - 매우 효율적
-     */
-
-    var dataMap = new Map(data.map(function (m) {
-      return [m.id, m];
-    }));
-    var newSelectedItemsMap = new Map();
-    selectedIdsRef.current.forEach(function (id) {
-      // 현재 data에 있으면 최신 데이터 사용
-      var currentItem = dataMap.get(id);
-
-      if (currentItem) {
-        newSelectedItemsMap.set(id, currentItem);
-      } else {
-        // 화면 밖이면 기존 데이터 유지
-        var prevItem = selectedItemsMapRef.current.get(id);
-
-        if (prevItem) {
-          newSelectedItemsMap.set(id, prevItem);
-        }
-      }
-    }); // selectedIdsRef는 그대로 유지 (화면 밖 항목도 선택 상태 유지)
-
-    selectedItemsMapRef.current = newSelectedItemsMap; // 즉시 렌더링
-
+    selectedItemsMapRef.current = syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current);
     renderAllImmediate();
   }, [data]);
   return createPortal(React.createElement("div", {
@@ -10395,4 +9737,4 @@ function MintMap(_a) {
   }), loading));
 }
 
-export { AnimationPlayer, Bounds, CanvasDataType, CanvasMarker, CanvasMarkerClaude, CanvasMarkerHanquf, CircleMarker, DEFAULT_CULLING_MARGIN, DEFAULT_MAX_CACHE_SIZE, Drawable, GeoCalulator, GoogleMintMapController, LRUCache, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SPATIAL_GRID_CELL_SIZE, SVGCircle, SVGPolygon, SVGRect, Spacing, SpatialHashGrid, Status, WoongCanvasMarker, WoongCanvasPolygon, WoongCanvasProvider, calculateTextBoxWidth, computeMarkerOffset, computePolygonOffsets, getClusterInfo, getMapOfType, hexToRgba, isPointInMarkerData, isPointInPolygon, isPointInPolygonData, log, useMarkerMoving, useMintMapController, useWoongCanvasContext, waiting };
+export { AnimationPlayer, Bounds, CanvasDataType, CanvasMarker, CanvasMarkerClaude, CanvasMarkerHanquf, CircleMarker, DEFAULT_CULLING_MARGIN, DEFAULT_MAX_CACHE_SIZE, Drawable, GeoCalulator, GoogleMintMapController, LRUCache, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SPATIAL_GRID_CELL_SIZE, SVGCircle, SVGPolygon, SVGRect, Spacing, SpatialHashGrid, Status, WoongCanvasMarker, WoongCanvasPolygon, WoongCanvasProvider, buildSpatialIndex, calculateTextBoxWidth, computeMarkerOffset, computePolygonOffsets, createMapEventHandlers, getClusterInfo, getMapOfType, hexToRgba, isInViewport, isPointInMarkerData, isPointInPolygon, isPointInPolygonData, log, mapValuesToArray, syncExternalSelectedItems, syncSelectedItems, updateViewport, useMarkerMoving, useMintMapController, useWoongCanvasContext, validateEvent, waiting };