@mint-ui/map 1.2.0-test.23 → 1.2.0-test.25

package/dist/index.es.js

@@ -653,17 +653,11 @@ styleInject(css_248z$1);
 /**
  * 캔버스 데이터 타입 Enum
  * 마커인지 폴리곤인지 구분하는 상수
- *
- * @enum {string}
- * @memberof WoongCanvasLayer
  */
 var CanvasDataType;
 
 (function (CanvasDataType) {
-  /** 마커 타입 - 커스텀 렌더링 필요 */
   CanvasDataType["MARKER"] = "MARKER";
-  /** 폴리곤 타입 - 자동 렌더링 지원 */
-
   CanvasDataType["POLYGON"] = "POLYGON";
 })(CanvasDataType || (CanvasDataType = {}));
 
@@ -801,38 +795,7 @@ function () {
 }();
 
 /**
- * @fileoverview WoongCanvasLayer를 위한 유틸리티 함수들
- *
- * 이 파일은 좌표 변환, 히트 테스트, 색상 변환 등 WoongCanvasLayer에서
- * 사용하는 다양한 유틸리티 함수들을 제공합니다.
- *
- * ## 주요 기능
- * - **좌표 변환**: 지도 좌표(위경도) ↔ 화면 좌표(픽셀) 변환
- * - **히트 테스트**: 마우스 클릭/호버 시 어떤 마커/폴리곤인지 찾기
- * - **색상 변환**: 다양한 색상 형식 간 변환
- * - **바운딩 박스**: 폴리곤의 경계 영역 계산
- *
- * @version 2.2.1
- * @since 2.0.0
- * @author 박건웅
- */
-/**
- * 폴리곤 좌표를 화면 좌표로 변환
- *
- * GeoJSON MultiPolygon 형식의 폴리곤 데이터를 Canvas에서 그릴 수 있는
- * 화면 좌표 배열로 변환합니다.
- *
- * @param polygonData - 변환할 폴리곤 데이터
- * @param controller - 지도 컨트롤러 (좌표 변환용)
- * @returns 변환된 좌표 배열 또는 null (변환 실패 시)
- *
- * @example
- * ```typescript
- * const offsets = computePolygonOffsets(polygonData, controller);
- * if (offsets) {
- *   // offsets[0][0][0] = [x, y] - 첫 번째 MultiPolygon의 첫 번째 Polygon의 첫 번째 점
- * }
- * ```
+ * 폴리곤 offset 계산
  */
 
 var computePolygonOffsets = function (polygonData, controller) {
@@ -868,21 +831,7 @@ var computePolygonOffsets = function (polygonData, controller) {
   return result;
 };
 /**
- * 마커 좌표를 화면 좌표로 변환
- *
- * 마커의 지도 좌표(위경도)를 Canvas에서 그릴 수 있는 화면 좌표로 변환합니다.
- *
- * @param markerData - 변환할 마커 데이터
- * @param controller - 지도 컨트롤러 (좌표 변환용)
- * @returns 변환된 화면 좌표 또는 null (변환 실패 시)
- *
- * @example
- * ```typescript
- * const offset = computeMarkerOffset(markerData, controller);
- * if (offset) {
- *   console.log(`마커 위치: (${offset.x}, ${offset.y})`);
- * }
- * ```
+ * 마커 offset 계산
  */
 
 var computeMarkerOffset = function (markerData, controller) {
@@ -893,21 +842,7 @@ var computeMarkerOffset = function (markerData, controller) {
   return controller.positionToOffset(markerData.position);
 };
 /**
- * Point-in-Polygon 알고리즘 (Ray Casting)
- *
- * 주어진 점이 폴리곤 내부에 있는지 확인하는 알고리즘입니다.
- * Ray Casting 방식을 사용하여 홀수 번 교차하면 내부, 짝수 번 교차하면 외부로 판단합니다.
- *
- * @param point - 확인할 점의 좌표
- * @param polygon - 폴리곤의 좌표 배열 (순서대로 연결된 점들)
- * @returns 점이 폴리곤 내부에 있으면 true, 외부에 있으면 false
- *
- * @example
- * ```typescript
- * const point = { x: 100, y: 100 };
- * const polygon = [[0, 0], [200, 0], [200, 200], [0, 200]];
- * const isInside = isPointInPolygon(point, polygon); // true
- * ```
+ * Point-in-Polygon 알고리즘
  */
 
 var isPointInPolygon = function (point, polygon) {
@@ -927,31 +862,13 @@ var isPointInPolygon = function (point, polygon) {
 /**
  * 폴리곤 히트 테스트 (도넛 폴리곤 지원)
  *
- * 클릭된 좌표가 폴리곤 내부에 있는지 확인합니다.
- * 도넛 폴리곤(구멍이 있는 폴리곤)도 지원합니다.
- *
- * ## 도넛 폴리곤 처리 로직
- * 1. **외부 폴리곤(첫 번째)**: 내부에 있어야 함
- * 2. **내부 구멍들(나머지)**: 내부에 있으면 안 됨 (evenodd 규칙)
+ * 로직:
+ * 1. 외부 폴리곤(첫 번째): 내부에 있어야 함
+ * 2. 내부 구멍들(나머지): 내부에 있으면 안 됨 (evenodd 규칙)
  *
- * ## 중요 사항
- * 도넛 폴리곤과 내부 폴리곤은 별개의 polygonData로 처리됩니다:
- * - 도넛 폴리곤 A: `isDonutPolygon=true`
- * - 내부 폴리곤 B: `isDonutPolygon=false` (별도 데이터)
- *
- * @param clickedOffset - 클릭된 좌표
- * @param polygonData - 확인할 폴리곤 데이터
- * @param getPolygonOffsets - 폴리곤 좌표를 가져오는 함수
- * @returns 클릭된 좌표가 폴리곤 내부에 있으면 true, 외부에 있으면 false
- *
- * @example
- * ```typescript
- * const isHit = isPointInPolygonData(
- *   { x: 100, y: 100 },
- *   polygonData,
- *   (data) => computePolygonOffsets(data, controller)
- * );
- * ```
+ * 중요: 도넛 폴리곤과 내부 폴리곤은 별개의 polygonData로 처리됨
+ * - 도넛 폴리곤 A: isDonutPolygon=true
+ * - 내부 폴리곤 B: isDonutPolygon=false (별도 데이터)
  */
 
 var isPointInPolygonData = function (clickedOffset, polygonData, getPolygonOffsets) {
@@ -1016,27 +933,10 @@ var isPointInPolygonData = function (clickedOffset, polygonData, getPolygonOffse
 /**
  * 마커 히트 테스트 (클릭/hover 영역 체크)
  *
- * 클릭된 좌표가 마커의 클릭 가능한 영역 내부에 있는지 확인합니다.
- *
- * ## 중요 사항
- * **꼬리(tail)는 Hit Test 영역에서 제외됩니다!**
- * - `markerOffset.y`는 마커 최하단(꼬리 끝) 좌표
- * - `boxHeight`는 마커 본체만 포함 (꼬리 제외)
- * - `tailHeight`만큼 위로 올려서 본체만 Hit Test 영역으로 사용
- *
- * @param clickedOffset - 클릭된 좌표
- * @param markerData - 확인할 마커 데이터
- * @param getMarkerOffset - 마커 좌표를 가져오는 함수
- * @returns 클릭된 좌표가 마커 내부에 있으면 true, 외부에 있으면 false
- *
- * @example
- * ```typescript
- * const isHit = isPointInMarkerData(
- *   { x: 100, y: 100 },
- *   markerData,
- *   (data) => computeMarkerOffset(data, controller)
- * );
- * ```
+ * 🎯 중요: 꼬리(tail)는 Hit Test 영역에서 제외됩니다!
+ * - markerOffset.y는 마커 최하단(꼬리 끝) 좌표
+ * - boxHeight는 마커 본체만 포함 (꼬리 제외)
+ * - tailHeight만큼 위로 올려서 본체만 Hit Test 영역으로 사용
  */
 
 var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset) {
@@ -1051,29 +951,13 @@ var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset)
 
   return clickedOffset.x >= x && clickedOffset.x <= x + boxWidth && clickedOffset.y >= y && clickedOffset.y <= y + boxHeight;
 };
-/**
- * HEX 색상을 RGBA 색상으로 변환
- *
- * 16진수 색상 코드를 RGBA 형식으로 변환합니다.
- *
- * @param hexColor - 변환할 HEX 색상 (예: "#FF0000" 또는 "FF0000")
- * @param alpha - 알파 값 (0~1, 기본값: 1)
- * @returns RGBA 형식의 색상 문자열
- *
- * @example
- * ```typescript
- * const rgba = hexToRgba('#FF0000', 0.5); // "rgba(255, 0, 0, 0.5)"
- * const rgba2 = hexToRgba('FF0000', 1);   // "rgba(255, 0, 0, 1)"
- * ```
- */
-
 var hexToRgba = function (hexColor, alpha) {
   if (alpha === void 0) {
     alpha = 1;
-  } // 입력된 hexColor에서 "#" 제거
+  } // NOTE: 입력된 hexColor에서 "#" 제거
 
 
-  var hex = hexColor.replace('#', ''); // 6자리일 경우 알파 값은 사용자가 제공한 alpha 값으로 설정
+  var hex = hexColor.replace('#', ''); // NOTE: 6자리일 경우 알파 값은 사용자가 제공한 alpha 값으로 설정
 
   if (hex.length === 6) {
     var r = parseInt(hex.substring(0, 2), 16);
@@ -1087,27 +971,14 @@ var hexToRgba = function (hexColor, alpha) {
 var tempCanvas = document.createElement('canvas');
 var tempCtx = tempCanvas.getContext('2d');
 /**
- * 텍스트 박스의 너비를 계산
+ * 텍스트 박스의 너비를 계산합니다.
  *
- * Canvas 2D API의 measureText()를 사용하여 텍스트의 실제 너비를 측정하고,
- * 패딩과 최소 너비를 고려하여 최종 박스 너비를 계산합니다.
- *
- * @param params - 파라미터 객체
- * @param params.text - 측정할 텍스트
- * @param params.fontConfig - 폰트 설정 (예: 'bold 16px Arial')
- * @param params.padding - 텍스트 박스에 적용할 패딩 값
- * @param params.minWidth - 최소 너비
- * @returns 계산된 텍스트 박스의 너비
- *
- * @example
- * ```typescript
- * const width = calculateTextBoxWidth({
- *   text: 'Hello World',
- *   fontConfig: 'bold 16px Arial',
- *   padding: 10,
- *   minWidth: 50
- * });
- * ```
+ * @param {Object} params - 파라미터 객체
+ * @param {string} params.text - 측정할 텍스트
+ * @param {string} params.fontConfig - 폰트 설정 (예: 'bold 16px Arial')
+ * @param {number} params.padding - 텍스트 박스에 적용할 패딩 값
+ * @param {number} params.minWidth - 최소 너비
+ * @returns {number} 계산된 텍스트 박스의 너비
  */
 
 var calculateTextBoxWidth = function (_a) {
@@ -1121,50 +992,18 @@ var calculateTextBoxWidth = function (_a) {
   return Math.max(minWidth, textWidth + padding);
 };
 
-/** 다중 레이어 관리를 위한 React Context */
-
 var KonvaMarkerContext = createContext(null);
-/**
- * 다중 WoongCanvasLayer 관리를 위한 Context Provider
- *
- * 여러 개의 WoongCanvasLayer가 동시에 사용될 때 이벤트 우선순위를 관리하고
- * 전역 클릭/호버 이벤트를 조정합니다.
- *
- * @param children - Provider로 감쌀 React 컴포넌트들
- * @returns Context Provider 컴포넌트
- *
- * @example
- * ```tsx
- * <KonvaMarkerProvider>
- *   <WoongCanvasLayer zIndex={1} data={markers1} ... />
- *   <WoongCanvasLayer zIndex={2} data={markers2} ... />
- * </KonvaMarkerProvider>
- * ```
- */
-
 var KonvaMarkerProvider = function (_a) {
   var children = _a.children;
-  var controller = useMintMapController(); // === Refs ===
-
-  /** 등록된 모든 컴포넌트 인스턴스들 (zIndex 내림차순 정렬) */
+  var controller = useMintMapController(); // Refs
 
   var componentsRef = useRef([]);
-  /** 현재 호버된 컴포넌트 인스턴스 */
-
   var currentHoveredRef = useRef(null);
-  /** 현재 호버된 데이터 */
-
   var currentHoveredDataRef = useRef(null);
-  /** 드래그/줌 중 여부 (마우스 이동 이벤트 무시용) */
-
-  var draggingRef = useRef(false); // === 컴포넌트 관리 함수들 ===
-
+  var draggingRef = useRef(false);
   /**
-   * 컴포넌트 인스턴스 등록
-   *
-   * zIndex 내림차순으로 정렬하여 높은 우선순위의 컴포넌트가 먼저 이벤트를 처리하도록 합니다.
-   *
-   * @param instance - 등록할 컴포넌트 인스턴스
+   * 컴포넌트 등록 (zIndex 내림차순 정렬)
+   * 높은 zIndex가 먼저 처리됨
    */
 
   var registerComponent = useCallback(function (instance) {
@@ -1174,12 +1013,7 @@ var KonvaMarkerProvider = function (_a) {
     });
   }, []);
   /**
-   * 컴포넌트 인스턴스 등록 해제
-   *
-   * 컴포넌트가 언마운트될 때 호출되어 Context에서 제거합니다.
-   * 현재 호버 중인 컴포넌트라면 호버 상태도 초기화합니다.
-   *
-   * @param instance - 등록 해제할 컴포넌트 인스턴스
+   * 컴포넌트 등록 해제
    */
 
   var unregisterComponent = useCallback(function (instance) {
@@ -1192,15 +1026,9 @@ var KonvaMarkerProvider = function (_a) {
     componentsRef.current = componentsRef.current.filter(function (c) {
       return c !== instance;
     });
-  }, []); // === 전역 이벤트 핸들러들 ===
-
+  }, []);
   /**
-   * 전역 클릭 이벤트 핸들러
-   *
-   * zIndex 우선순위에 따라 등록된 컴포넌트들을 순회하며 클릭된 데이터를 찾습니다.
-   * 첫 번째로 히트된 컴포넌트의 이벤트만 처리합니다.
-   *
-   * @param event - 지도 클릭 이벤트 파라미터
+   * 전역 클릭 핸들러 (zIndex 우선순위)
    */
 
   var handleGlobalClick = useCallback(function (event) {
@@ -1210,7 +1038,7 @@ var KonvaMarkerProvider = function (_a) {
     var clickedOffset = controller.positionToOffset(event.param.position); // zIndex 순서대로 순회 (높은 것부터)
 
     for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
-      var component = _b[_i]; // 상호작용이 비활성화된 컴포넌트는 스킵
+      var component = _b[_i]; // 🚫 상호작용이 비활성화된 컴포넌트는 스킵
 
       if (component.isInteractionDisabled()) continue;
       var data = component.findData(clickedOffset);
@@ -1227,12 +1055,7 @@ var KonvaMarkerProvider = function (_a) {
     }
   }, [controller]);
   /**
-   * 전역 마우스 이동 이벤트 핸들러
-   *
-   * zIndex 우선순위에 따라 호버된 데이터를 찾고, 호버 상태가 변경되면
-   * 이전 호버를 해제하고 새로운 호버를 설정합니다.
-   *
-   * @param event - 지도 마우스 이동 이벤트 파라미터
+   * 전역 마우스 이동 핸들러 (zIndex 우선순위)
    */
 
   var handleGlobalMouseMove = useCallback(function (event) {
@@ -1245,7 +1068,7 @@ var KonvaMarkerProvider = function (_a) {
     var newHoveredData = null;
 
     for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
-      var component = _b[_i]; // 상호작용이 비활성화된 컴포넌트는 스킵
+      var component = _b[_i]; // 🚫 상호작용이 비활성화된 컴포넌트는 스킵
 
       if (component.isInteractionDisabled()) continue;
       var data = component.findData(mouseOffset);
@@ -1282,24 +1105,19 @@ var KonvaMarkerProvider = function (_a) {
     }
   }, [controller]);
   /**
-   * 줌/드래그 시작 이벤트 핸들러
-   *
-   * 지도가 줌이나 드래그를 시작할 때 마우스 이동 이벤트를 무시하도록 설정합니다.
-   * 이는 성능 최적화와 불필요한 호버 이벤트 방지를 위한 것입니다.
+   * 줌/드래그 시작 (마우스 이동 이벤트 무시)
    */
 
   var handleZoomStart = useCallback(function () {
     draggingRef.current = true;
   }, []);
   /**
-   * 지도 idle 이벤트 핸들러
-   *
-   * 지도가 idle 상태가 되면 마우스 이동 이벤트를 다시 활성화합니다.
+   * 지도 idle (마우스 이동 이벤트 재개)
    */
 
   var handleIdle = useCallback(function () {
     draggingRef.current = false;
-  }, []); // === 이벤트 리스너 등록 ===
+  }, []); // 이벤트 리스너 등록
 
   useEffect(function () {
     controller.addEventListener('CLICK', handleGlobalClick);
@@ -1312,7 +1130,7 @@ var KonvaMarkerProvider = function (_a) {
       controller.removeEventListener('ZOOMSTART', handleZoomStart);
       controller.removeEventListener('IDLE', handleIdle);
     };
-  }, [controller, handleGlobalClick, handleGlobalMouseMove, handleZoomStart, handleIdle]); // === Context value 메모이제이션 ===
+  }, [controller, handleGlobalClick, handleGlobalMouseMove, handleZoomStart, handleIdle]); // Context value 메모이제이션
 
   var contextValue = useMemo(function () {
     return {
@@ -1324,40 +1142,11 @@ var KonvaMarkerProvider = function (_a) {
     value: contextValue
   }, children);
 };
-/**
- * KonvaMarkerContext를 사용하기 위한 Hook
- *
- * @returns Context 값 또는 null (Provider 외부에서 사용 시)
- *
- * @example
- * ```tsx
- * const context = useKonvaMarkerContext();
- * if (context) {
- *   context.registerComponent(instance);
- * }
- * ```
- */
-
 var useKonvaMarkerContext = function () {
   var context = useContext(KonvaMarkerContext);
   return context;
 };
 
-/**
- * @fileoverview WoongCanvasLayer 성능 최적화를 위한 상수 및 클래스
- *
- * 이 파일은 30,000개 이상의 마커/폴리곤을 60fps로 렌더링하기 위한
- * 성능 최적화 상수와 최적화된 자료구조들을 제공합니다.
- *
- * ## 주요 구성 요소
- * - **성능 최적화 상수**: 그리드 셀 크기, 캐시 크기, 컬링 여유 공간
- * - **LRUCache**: 좌표 변환 결과 캐싱을 위한 LRU 캐시 구현
- * - **SpatialHashGrid**: O(1) 수준의 빠른 Hit Test를 위한 공간 해시 그리드
- *
- * @version 2.2.1
- * @since 2.0.0
- * @author 박건웅
- */
 // ============================================================================
 // 성능 최적화 상수 (30,000개 마커/폴리곤 기준 최적화)
 // ============================================================================
@@ -1406,29 +1195,12 @@ var DEFAULT_CULLING_MARGIN = 100;
 var DEFAULT_MAX_CACHE_SIZE = 30000;
 /**
  * LRU (Least Recently Used) Cache
+ * 메모리 제한을 위한 캐시 구현 (최적화 버전)
  *
- * 메모리 제한을 위한 캐시 구현으로, 좌표 변환 결과를 캐싱하여
- * 성능을 최적화합니다. WoongCanvasLayer의 특성에 맞게 최적화되었습니다.
- *
- * ## 주요 특징
- * - **빠른 조회**: O(1) 해시 조회로 성능 최적화
- * - **메모리 제한**: 최대 크기 초과 시 자동 eviction
- * - **FIFO 방식**: 삽입 순서 기반 eviction (접근 빈도 추적 없음)
- *
- * ## 개선 사항
- * 1. **get() 성능 향상**: 접근 빈도 추적 없이 단순 조회만 수행
- * 2. **set() 버그 수정**: 기존 키 업데이트 시 maxSize 체크 로직 개선
- * 3. **메모리 효율**: 단순 FIFO 캐시로 동작하여 오버헤드 최소화
- *
- * @template K 캐시 키 타입
- * @template V 캐시 값 타입
- *
- * @example
- * ```typescript
- * const cache = new LRUCache<string, Offset>(1000);
- * cache.set('marker-1', { x: 100, y: 200 });
- * const offset = cache.get('marker-1'); // { x: 100, y: 200 }
- * ```
+ * 개선 사항:
+ * 1. get() 성능 향상: 접근 빈도 추적 없이 단순 조회만 수행 (delete+set 제거)
+ * 2. set() 버그 수정: 기존 키 업데이트 시 maxSize 체크 로직 개선
+ * 3. 메모리 효율: 단순 FIFO 캐시로 동작하여 오버헤드 최소화
  */
 
 var LRUCache =
@@ -1508,33 +1280,16 @@ function () {
 }();
 /**
  * Spatial Hash Grid (공간 해시 그리드)
+ * 공간 인덱싱을 위한 그리드 기반 자료구조 (개선 버전)
  *
- * 공간 인덱싱을 위한 그리드 기반 자료구조로, 2D 공간을 격자로 나누어
- * 특정 영역에 있는 객체들을 빠르게 찾을 수 있게 해줍니다.
- *
- * ## 주요 특징
- * - **O(1) 조회**: 클릭 위치 주변의 객체들만 체크하여 성능 최적화
- * - **메모리 효율**: 격자 기반으로 필요한 영역만 인덱싱
- * - **중복 방지**: 같은 항목을 여러 번 삽입해도 안전
- *
- * ## 성능 비교
- * - **일반 검색**: 30,000개 항목 전체 체크 → O(n)
- * - **Spatial Hash**: 클릭 위치 주변 ~10개만 체크 → O(1) + O(10)
- * - **성능 향상**: 약 3,000배 빠름! 🚀
- *
- * ## 개선 사항
- * 1. **중복 삽입 방지**: 같은 항목을 여러 번 insert 해도 안전
- * 2. **메모리 누수 방지**: 기존 항목 자동 제거
- * 3. **성능 최적화**: 불필요한 배열 생성 최소화
+ * 개선 사항:
+ * 1. 중복 삽입 방지: 같은 항목을 여러 번 insert 해도 안전
+ * 2. 메모리 누수 방지: 기존 항목 자동 제거
+ * 3. 성능 최적화: 불필요한 배열 생성 최소화
  *
- * @template T 그리드에 저장할 객체 타입
- *
- * @example
- * ```typescript
- * const grid = new SpatialHashGrid<Marker>(50);
- * grid.insert(marker, { x: 100, y: 200, width: 30, height: 40 });
- * const nearby = grid.query(105, 205, 10); // (105, 205) 주변 10px 반경
- * ```
+ * 사용 사례:
+ * - 빠른 Hit Test (마우스 클릭 시 어떤 마커/폴리곤인지 찾기)
+ * - 30,000개 항목 → 클릭 위치 주변 ~10개만 체크 (3,000배 빠름)
  */
 
 var SpatialHashGrid =
@@ -1726,390 +1481,109 @@ function () {
   return SpatialHashGrid;
 }();
 
-/**
- * @fileoverview 폴리곤 렌더링을 위한 유틸리티 및 팩토리 함수
- *
- * 이 파일은 WoongCanvasLayer의 POLYGON 모드에서 사용하는 폴리곤 렌더링
- * 함수들을 제공합니다. 다양한 상태(기본, 선택, 호버)에 따른 렌더링과
- * 도넛 폴리곤(구멍이 있는 폴리곤) 지원을 포함합니다.
- *
- * ## 주요 기능
- * - **폴리곤 그리기**: Canvas 2D API를 사용한 폴리곤 렌더링
- * - **도넛 폴리곤 지원**: evenodd fill rule을 사용한 구멍 처리
- * - **상태별 렌더링**: 기본/선택/호버 상태에 따른 색상 및 스타일 적용
- * - **팩토리 함수**: 렌더링 함수를 쉽게 생성할 수 있는 헬퍼
- *
- * @version 2.2.1
- * @since 2.0.0
- * @author 박건웅
- */
-
-/**
- * 폴리곤 그리기 헬퍼 함수
- *
- * Canvas 2D API를 사용하여 폴리곤을 그리는 핵심 함수입니다.
- * 도넛 폴리곤(구멍이 있는 폴리곤)도 지원합니다.
- *
- * @param ctx - Canvas 2D 렌더링 컨텍스트
- * @param polygonOffsets - 변환된 폴리곤 좌표 배열
- * @param isDonutPolygon - 도넛 폴리곤 여부
- * @param fillColor - 채우기 색상
- * @param strokeColor - 테두리 색상
- * @param lineWidth - 테두리 두께
- *
- * @example
- * ```typescript
- * drawPolygon({
- *   ctx,
- *   polygonOffsets: [[[[100, 200], [200, 200], [200, 300], [100, 300]]]],
- *   isDonutPolygon: false,
- *   fillColor: 'rgba(255, 0, 0, 0.5)',
- *   strokeColor: 'rgba(255, 0, 0, 1)',
- *   lineWidth: 2
- * });
- * ```
- */
-var drawPolygon = function (_a) {
-  var ctx = _a.ctx,
-      polygonOffsets = _a.polygonOffsets,
-      isDonutPolygon = _a.isDonutPolygon,
-      fillColor = _a.fillColor,
-      strokeColor = _a.strokeColor,
-      lineWidth = _a.lineWidth;
+var cn$3 = classNames.bind(styles$1);
+function MintMapCore(_a) {
+  var _this = this;
 
-  for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
-    var multiPolygon = polygonOffsets_1[_i];
+  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
 
-    if (isDonutPolygon) {
-      ctx.beginPath(); // 1. 외부 폴리곤 그리기
+  var controller = useMintMapController(); //맵 초기화
 
-      if (multiPolygon[0] && multiPolygon[0].length > 0) {
-        ctx.moveTo(multiPolygon[0][0][0], multiPolygon[0][0][1]);
+  var elementRef = useRef(null);
 
-        for (var i = 1; i < multiPolygon[0].length; i++) {
-          ctx.lineTo(multiPolygon[0][i][0], multiPolygon[0][i][1]);
-        }
+  var _d = useState(false),
+      mapInitialized = _d[0],
+      setMapInitialized = _d[1];
 
-        ctx.closePath();
-      } // 2. 내부 폴리곤 (구멍들) 그리기 - 같은 path에 추가
+  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();
 
-      for (var j = 1; j < multiPolygon.length; j++) {
-        var innerPolygon = multiPolygon[j];
-        if (innerPolygon.length === 0) continue;
-        ctx.moveTo(innerPolygon[0][0], innerPolygon[0][1]);
+              if (!currMapInitialized.current) {
+                currMapInitialized.current = true; //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
 
-        for (var i = 1; i < innerPolygon.length; i++) {
-          ctx.lineTo(innerPolygon[i][0], innerPolygon[i][1]);
-        }
+                setTimeout(function () {
+                  // console.log('setMapInitialized true');
+                  setMapInitialized(true);
+                  onLoad && onLoad(map_1, controller);
+                }, 100);
+              }
 
-        ctx.closePath();
-      } // 3. evenodd fill rule로 구멍 뚫기
+              _a.label = 2;
 
+            case 2:
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    })();
+  }, [controller, elementRef]); //줌레벨
 
-      ctx.fillStyle = fillColor;
-      ctx.fill('evenodd'); // 4. 외곽선 그리기
+  useEffect(function () {
+    if (zoomLevel && controller && mapInitialized) {
+      var prevZoomLevel = controller === null || controller === void 0 ? void 0 : controller.getZoomLevel();
 
-      ctx.strokeStyle = strokeColor;
-      ctx.lineWidth = lineWidth;
-      ctx.stroke();
-    } else {
-      // 일반 폴리곤
-      for (var _b = 0, multiPolygon_1 = multiPolygon; _b < multiPolygon_1.length; _b++) {
-        var polygonGroup = multiPolygon_1[_b];
-        if (!polygonGroup.length) continue;
-        ctx.beginPath();
-        var firstPoint = polygonGroup[0];
-        ctx.moveTo(firstPoint[0], firstPoint[1]);
+      if (prevZoomLevel !== zoomLevel) {
+        controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(zoomLevel);
+      }
+    }
+  }, [zoomLevel]); //센터
 
-        for (var i = 1; i < polygonGroup.length; i++) {
-          var point = polygonGroup[i];
-          ctx.lineTo(point[0], point[1]);
-        }
+  useEffect(function () {
+    if (center && controller && mapInitialized) {
+      var prevCenter = controller.getCenter();
 
-        ctx.closePath();
-        ctx.fillStyle = fillColor;
-        ctx.strokeStyle = strokeColor;
-        ctx.lineWidth = lineWidth;
-        ctx.fill();
-        ctx.stroke();
+      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);
       }
     }
-  }
-};
-/**
- * 폴리곤 Base Layer 렌더링 함수 팩토리
- *
- * 기본 상태의 폴리곤들을 렌더링하는 함수를 생성합니다.
- * 선택된 폴리곤들은 Event Layer에서 렌더링되므로 제외됩니다.
- *
- * @param baseFillColor - 기본 폴리곤 채우기 색상
- * @param baseStrokeColor - 기본 폴리곤 테두리 색상
- * @param baseLineWidth - 기본 폴리곤 테두리 두께
- * @returns Base Layer 렌더링 함수
- *
- * @template T 마커/폴리곤 데이터의 추가 속성 타입
- *
- * @example
- * ```typescript
- * const renderBase = renderPolygonBase(
- *   'rgba(255, 100, 100, 0.5)',  // 기본 채우기 색상
- *   'rgba(200, 50, 50, 0.8)',    // 기본 테두리 색상
- *   2                             // 기본 테두리 두께
- * );
- * ```
- */
-
-var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth) {
-  return function (_a) {
-    var ctx = _a.ctx,
-        items = _a.items,
-        selectedIds = _a.selectedIds,
-        utils = _a.utils;
+  }, [center]);
+  return React.createElement("div", {
+    className: cn$3('mint-map-root')
+  }, mapInitialized && React.createElement(KonvaMarkerProvider, null, children), React.createElement("div", {
+    className: cn$3('mint-map-container'),
+    style: {
+      visibility: visible ? 'inherit' : 'hidden'
+    },
+    ref: elementRef
+  }));
+}
 
-    for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
-      var item = items_1[_i]; // 선택된 항목은 Event Layer에서 그림
-
-      if (selectedIds.has(item.id)) continue;
-      if (!item.paths) continue;
-      var polygonOffsets = utils.getOrComputePolygonOffsets(item);
-      if (!polygonOffsets) continue;
-      drawPolygon({
-        ctx: ctx,
-        polygonOffsets: polygonOffsets,
-        isDonutPolygon: item.isDonutPolygon || false,
-        fillColor: baseFillColor,
-        strokeColor: baseStrokeColor,
-        lineWidth: baseLineWidth
-      });
-    }
-  };
-};
-/**
- * 폴리곤 Event Layer 렌더링 함수 팩토리
- *
- * 선택, 호버, 활성 상태의 폴리곤들을 렌더링하는 함수를 생성합니다.
- * 다양한 상태에 따른 색상과 스타일을 지원하며, fallback 메커니즘을 제공합니다.
- *
- * ## 상태별 렌더링 우선순위
- * 1. **Hovered**: 마우스가 올라간 폴리곤 (최우선)
- * 2. **Active**: 마지막으로 선택된 폴리곤
- * 3. **Selected**: 선택된 폴리곤들
- * 4. **Base**: 기본 상태 (fallback)
- *
- * @param baseFillColor - 기본 폴리곤 채우기 색상 (필수, fallback용)
- * @param baseStrokeColor - 기본 폴리곤 테두리 색상 (필수, fallback용)
- * @param baseLineWidth - 기본 폴리곤 테두리 두께 (필수, fallback용)
- * @param selectedFillColor - 선택된 폴리곤 채우기 색상 (선택, 기본값: baseFillColor)
- * @param selectedStrokeColor - 선택된 폴리곤 테두리 색상 (선택, 기본값: baseStrokeColor)
- * @param selectedLineWidth - 선택된 폴리곤 테두리 두께 (선택, 기본값: baseLineWidth)
- * @param activeFillColor - 마지막 선택된 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
- * @param activeStrokeColor - 마지막 선택된 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
- * @param activeLineWidth - 마지막 선택된 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
- * @param hoveredFillColor - Hover 시 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
- * @param hoveredStrokeColor - Hover 시 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
- * @param hoveredLineWidth - Hover 시 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
- * @returns Event Layer 렌더링 함수
- *
- * @template T 마커/폴리곤 데이터의 추가 속성 타입
- *
- * @example
- * ```typescript
- * const renderEvent = renderPolygonEvent(
- *   'rgba(255, 100, 100, 0.5)',  // baseFillColor
- *   'rgba(200, 50, 50, 0.8)',    // baseStrokeColor
- *   2,                            // baseLineWidth
- *   'rgba(255, 193, 7, 0.7)',    // selectedFillColor
- *   'rgba(255, 152, 0, 1)',      // selectedStrokeColor
- *   4                             // selectedLineWidth
- * );
- * ```
- */
-
-var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth) {
-  // 기본값 설정 (base 기준)
-  var _selectedFillColor = selectedFillColor || baseFillColor;
-
-  var _selectedStrokeColor = selectedStrokeColor || baseStrokeColor;
-
-  var _selectedLineWidth = selectedLineWidth || baseLineWidth;
-
-  var _activeFillColor = activeFillColor || _selectedFillColor;
-
-  var _activeStrokeColor = activeStrokeColor || _selectedStrokeColor;
-
-  var _activeLineWidth = activeLineWidth || _selectedLineWidth;
-
-  var _hoveredFillColor = hoveredFillColor || _selectedFillColor;
-
-  var _hoveredStrokeColor = hoveredStrokeColor || _selectedStrokeColor;
-
-  var _hoveredLineWidth = hoveredLineWidth || _selectedLineWidth;
-
-  return function (_a) {
-    var ctx = _a.ctx,
-        hoveredItem = _a.hoveredItem,
-        utils = _a.utils,
-        selectedItems = _a.selectedItems,
-        selectedItem = _a.selectedItem; // 1. 선택된 항목들 그리기 (마지막 선택 항목과 호버된 항목 제외)
-
-    if (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) {
-      for (var _i = 0, selectedItems_1 = selectedItems; _i < selectedItems_1.length; _i++) {
-        var item = selectedItems_1[_i]; // 마지막 선택 항목과 호버된 항목은 나중에 따로 그림
-
-        if (item.id === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) || (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) === item.id) continue;
-        if (!item.paths) continue;
-        var polygonOffsets = utils.getOrComputePolygonOffsets(item);
-        if (!polygonOffsets) continue;
-        drawPolygon({
-          ctx: ctx,
-          polygonOffsets: polygonOffsets,
-          isDonutPolygon: item.isDonutPolygon || false,
-          fillColor: _selectedFillColor,
-          strokeColor: _selectedStrokeColor,
-          lineWidth: _selectedLineWidth
-        });
-      }
-    } // 2. 마지막 선택된 항목 그리기 (호버되지 않은 경우)
-
-
-    if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.paths) && (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) !== selectedItem.id) {
-      var polygonOffsets = utils.getOrComputePolygonOffsets(selectedItem);
-
-      if (polygonOffsets) {
-        drawPolygon({
-          ctx: ctx,
-          polygonOffsets: polygonOffsets,
-          isDonutPolygon: selectedItem.isDonutPolygon || false,
-          fillColor: _activeFillColor,
-          strokeColor: _activeStrokeColor,
-          lineWidth: _activeLineWidth
-        });
-      }
-    } // 3. 호버된 항목 그리기 (가장 위에 표시)
-
-
-    if (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.paths) {
-      var polygonOffsets = utils.getOrComputePolygonOffsets(hoveredItem);
-      if (!polygonOffsets) return;
-      var isSelected = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(function (item) {
-        return item.id === hoveredItem.id;
-      });
-      drawPolygon({
-        ctx: ctx,
-        polygonOffsets: polygonOffsets,
-        isDonutPolygon: hoveredItem.isDonutPolygon || false,
-        fillColor: isSelected ? _activeFillColor : _hoveredFillColor,
-        strokeColor: isSelected ? _activeStrokeColor : _hoveredStrokeColor,
-        lineWidth: isSelected ? _activeLineWidth : _hoveredLineWidth
-      });
-    }
-  };
-};
-
-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(KonvaMarkerProvider, 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;
+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;
@@ -3327,7 +2801,7 @@ function MapMarkerWrapper(_a) {
   var onMouseOverHandler = function (e) {
     var _a;
 
-    var marker = markerRef.current; //console.log('onMouseOverHandler', marker);
+    var marker = markerRef.current;
 
     if (marker) {
       var mouseOverHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseover');
@@ -3340,6 +2814,25 @@ function MapMarkerWrapper(_a) {
 
       next && topOnHover && controller.markerToTheTop(marker);
     }
+  }; // 20251014 | 장한별 | mouseleave 이벤트 추가, 마우스가 마커 위에서 떠날 때 원래 zindex 를 복구하기 위함
+
+
+  var onMouseLeaveHandler = function (e) {
+    var _a;
+
+    var marker = markerRef.current;
+
+    if (marker) {
+      var mouseOutHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseout');
+      var next = true;
+
+      if (mouseOutHandler) {
+        var hasNext = mouseOutHandler(e);
+        hasNext !== undefined && (next = hasNext);
+      }
+
+      next && topOnHover && controller.restoreMarkerZIndex(marker);
+    }
   }; //create object
 
 
@@ -3357,10 +2850,12 @@ function MapMarkerWrapper(_a) {
     }); //드래그 여부 초기화를 먼저 수행하기 위해 capture : true 처리
 
     divElement.addEventListener('mouseover', onMouseOverHandler);
+    divElement.addEventListener('mouseleave', onMouseLeaveHandler);
     return function () {
       divElement.removeEventListener('click', onClickHandler);
       divElement.removeEventListener('mousedown', onMousedownHandler);
       divElement.removeEventListener('mouseover', onMouseOverHandler);
+      divElement.removeEventListener('mouseleave', onMouseLeaveHandler);
 
       if (markerRef.current) {
         controller.clearDrawable(markerRef.current);
@@ -5762,169 +5257,396 @@ function MapLoadingWithImage(_a) {
           duration: duration,
           delay: delay
         });
-      }));
-    });
-  }, [width, height]);
-  return React.createElement("div", {
-    ref: function (refs) {
-      setWidth(refs === null || refs === void 0 ? void 0 : refs.offsetWidth);
-      setHeight(refs === null || refs === void 0 ? void 0 : refs.offsetHeight);
-    },
-    style: {
-      width: '100%',
-      height: '100%',
-      overflow: 'hidden'
-    }
-  }, render);
-}
+      }));
+    });
+  }, [width, height]);
+  return React.createElement("div", {
+    ref: function (refs) {
+      setWidth(refs === null || refs === void 0 ? void 0 : refs.offsetWidth);
+      setHeight(refs === null || refs === void 0 ? void 0 : refs.offsetHeight);
+    },
+    style: {
+      width: '100%',
+      height: '100%',
+      overflow: 'hidden'
+    }
+  }, render);
+}
+
+function LoadingImage(_a) {
+  var _b = _a.size,
+      size = _b === void 0 ? 256 : _b,
+      _c = _a.duration,
+      duration = _c === void 0 ? 1 : _c,
+      _d = _a.delay,
+      delay = _d === void 0 ? 1 : _d;
+  var scale = 256 / 4000;
+  return React.createElement("svg", {
+    className: cn$2("ani-fade-in"),
+    style: {
+      flex: "0 0 ".concat(size, "px"),
+      opacity: 0,
+      animationDelay: "".concat(delay, "s"),
+      animationDuration: "".concat(duration, "s"),
+      animationFillMode: 'forwards'
+    },
+    width: size,
+    height: size,
+    viewBox: "0 0 ".concat(size, " ").concat(size),
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React.createElement("g", {
+    transform: "scale(".concat(scale, ")"),
+    "clip-path": "url(#clip0_5_701)"
+  }, React.createElement("rect", {
+    width: "4000",
+    height: "4000",
+    transform: "translate(0 4000) rotate(-90)",
+    fill: "#F8F8F8"
+  }), React.createElement("path", {
+    d: "M2996.5 780L3624 309L3928.5 789.5L3422 1080.5L2996.5 780Z",
+    fill: "#E6E6E6"
+  }), React.createElement("path", {
+    d: "M522.5 449.5L1156.5 48.4999L1197.5 64.4999L1502.5 485.5L822.5 918L522.5 449.5Z",
+    fill: "#F6E4DD"
+  }), React.createElement("path", {
+    d: "M1149.5 1386.5L2468 516L2931.5 1286.5L2966 1415L1650.5 2248L1149.5 1386.5Z",
+    fill: "#DCEACA"
+  }), React.createElement("path", {
+    d: "M1840.5 2838.5L2609 2313L3047.5 2599.5L3073.5 2745.5L2176.5 3311L1840.5 2838.5Z",
+    fill: "#E6E6E6"
+  }), React.createElement("path", {
+    d: "M594 3013.5L1080.5 2681.5L1744 3615L1162.5 4002.5L594 3013.5Z",
+    fill: "#DCEACA"
+  }), React.createElement("path", {
+    d: "M2094.05 1450.88C2127.97 1531.67 2192.23 1496.11 2250.02 1514.4C2567.73 1559.37 2608.68 1362.05 2668.2 1302.01C2736.79 1232.83 2612.15 1065.8 2523.28 1090.46C2434.42 1115.13 2432.96 1150.53 2415.25 1229.76C2397.53 1308.98 2233.45 1247.46 2177.4 1257.03C2121.35 1266.61 2051.65 1349.89 2094.05 1450.88Z",
+    fill: "#A2CAEE"
+  }), React.createElement("circle", {
+    cx: "958",
+    cy: "3092",
+    r: "95",
+    fill: "#A2CAEE"
+  }), React.createElement("circle", {
+    cx: "1127",
+    cy: "3176",
+    r: "56",
+    fill: "#A2CAEE"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M3459.68 1085.96L4058.54 2069.19L4001.32 2104.04L3402.46 1120.82L3459.68 1085.96Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M-317.721 1447.99L595.333 2953.94L1201.76 4004.26L1143.74 4037.76L537.668 2988.06L-375.013 1482.72L-317.721 1447.99ZM1058.06 1406.15L1789.22 920.04L1109.17 -5.66436L1163.17 -45.3311L1844.92 882.695L2486.62 448.527L3047.72 1427.91L2989.59 1461.22L2464.38 544.474L1855.66 956.322L1855.55 956.398L1095.15 1461.94L1058.06 1406.15ZM1384.39 3114.5L2197.8 2552.05L1838.4 2105.93L1890.57 2063.9L2253.06 2513.84L2642 2244.89L2680.11 2300L1883.89 2850.56L2238.69 3352.52L2183.98 3391.19L1828.78 2888.67L1422.5 3169.61L1384.39 3114.5Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M-100.246 749.04L1266.96 -152.746L1346.25 -32.5396L-20.9597 869.247L-100.246 749.04Z",
+    fill: "#FBEDB1"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M5229.83 1392.22L2830.78 2477.33L2803.17 2416.28L5202.22 1331.17L5229.83 1392.22Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2486.94 449.315L3519.19 1097.44L3483.56 1154.18L2451.32 506.057L2486.94 449.315Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2352.16 -273.141L2533.64 518.164L2468.34 533.141L2286.86 -258.164L2352.16 -273.141Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2237.62 3336.43L2440.07 4086.61L2375.39 4104.07L2172.93 3353.89L2237.62 3336.43Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M1204.91 1396.51L-54.5055 1973.41L-82.4082 1912.49L1177.01 1335.59L1204.91 1396.51Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2694.5 2950.14L4158.86 4928.5L4105.01 4968.36L2640.64 2990L2694.5 2950.14Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M3441.72 -42.6462L3995.65 846.725L3938.77 882.146L3384.85 -7.2254L3441.72 -42.6462Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2282.81 3631.14L2925.81 3304.14L2956.19 3363.86L2313.19 3690.86L2282.81 3631.14Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M466.178 1695.89L522.822 1660.11L813.709 2120.58L1365.65 1773.15L1401.35 1829.85L849.492 2177.23L1140.32 2637.61L1083.68 2673.39L466.178 1695.89Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M790.24 914.745L1475.24 451.745L1512.76 507.255L827.76 970.255L790.24 914.745Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M3410.6 2192.45L2986.6 1469.45L3044.4 1435.55L3468.4 2158.55L3410.6 2192.45Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M3637.26 329.182L3012.26 803.682L2971.74 750.318L3596.74 275.818L3637.26 329.182Z",
+    fill: "white"
+  }), React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M-102.531 3333.52L1563.16 2259.21L418.867 413.751L541.25 337.866L1684.19 2181.14L4025.32 666.934L4103.57 787.82L2336.63 1931.51L3187.41 2659.17L4104.73 3340.1L4018.9 3455.73L3139.75 2803.13L956.929 4221.62L878.381 4100.93L1666.1 3588.26L1086.77 2737.81L-24.4816 3454.53L-102.531 3333.52ZM1207.82 2659.74L1786.86 3509.76L3022.47 2707.58L2210.46 2013.07L1207.82 2659.74Z",
+    fill: "#FBEDB1"
+  })), React.createElement("defs", null, React.createElement("clipPath", {
+    id: "clip0_5_701"
+  }, React.createElement("rect", {
+    width: "4000",
+    height: "4000",
+    fill: "white",
+    transform: "translate(0 4000) rotate(-90)"
+  }))));
+}
+
+/**
+ * 폴리곤 렌더링 유틸리티
+ *
+ * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
+ */
+
+/**
+ * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
+ */
+var drawPolygon = function (_a) {
+  var ctx = _a.ctx,
+      polygonOffsets = _a.polygonOffsets,
+      isDonutPolygon = _a.isDonutPolygon,
+      fillColor = _a.fillColor,
+      strokeColor = _a.strokeColor,
+      lineWidth = _a.lineWidth;
+
+  for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
+    var multiPolygon = polygonOffsets_1[_i];
+
+    if (isDonutPolygon) {
+      ctx.beginPath(); // 1. 외부 폴리곤 그리기
+
+      if (multiPolygon[0] && multiPolygon[0].length > 0) {
+        ctx.moveTo(multiPolygon[0][0][0], multiPolygon[0][0][1]);
+
+        for (var i = 1; i < multiPolygon[0].length; i++) {
+          ctx.lineTo(multiPolygon[0][i][0], multiPolygon[0][i][1]);
+        }
+
+        ctx.closePath();
+      } // 2. 내부 폴리곤 (구멍들) 그리기 - 같은 path에 추가
+
+
+      for (var j = 1; j < multiPolygon.length; j++) {
+        var innerPolygon = multiPolygon[j];
+        if (innerPolygon.length === 0) continue;
+        ctx.moveTo(innerPolygon[0][0], innerPolygon[0][1]);
+
+        for (var i = 1; i < innerPolygon.length; i++) {
+          ctx.lineTo(innerPolygon[i][0], innerPolygon[i][1]);
+        }
+
+        ctx.closePath();
+      } // 3. evenodd fill rule로 구멍 뚫기
+
+
+      ctx.fillStyle = fillColor;
+      ctx.fill('evenodd'); // 4. 외곽선 그리기
+
+      ctx.strokeStyle = strokeColor;
+      ctx.lineWidth = lineWidth;
+      ctx.stroke();
+    } else {
+      // 일반 폴리곤
+      for (var _b = 0, multiPolygon_1 = multiPolygon; _b < multiPolygon_1.length; _b++) {
+        var polygonGroup = multiPolygon_1[_b];
+        if (!polygonGroup.length) continue;
+        ctx.beginPath();
+        var firstPoint = polygonGroup[0];
+        ctx.moveTo(firstPoint[0], firstPoint[1]);
+
+        for (var i = 1; i < polygonGroup.length; i++) {
+          var point = polygonGroup[i];
+          ctx.lineTo(point[0], point[1]);
+        }
+
+        ctx.closePath();
+        ctx.fillStyle = fillColor;
+        ctx.strokeStyle = strokeColor;
+        ctx.lineWidth = lineWidth;
+        ctx.fill();
+        ctx.stroke();
+      }
+    }
+  }
+};
+/**
+ * 폴리곤 Base 렌더링 함수
+ *
+ * @param baseFillColor 기본 폴리곤 채우기 색상
+ * @param baseStrokeColor 기본 폴리곤 테두리 색상
+ * @param baseLineWidth 기본 폴리곤 테두리 두께
+ * @returns Base Layer 렌더링 함수
+ *
+ * @example
+ * const renderBase = renderPolygonBase(
+ *   'rgba(255, 100, 100, 0.5)',
+ *   'rgba(200, 50, 50, 0.8)',
+ *   2
+ * );
+ */
+
+var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth) {
+  return function (_a) {
+    var ctx = _a.ctx,
+        items = _a.items,
+        selectedIds = _a.selectedIds,
+        utils = _a.utils;
+
+    for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+      var item = items_1[_i]; // 선택된 항목은 Event Layer에서 그림
+
+      if (selectedIds.has(item.id)) continue;
+      if (!item.paths) continue;
+      var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+      if (!polygonOffsets) continue;
+      drawPolygon({
+        ctx: ctx,
+        polygonOffsets: polygonOffsets,
+        isDonutPolygon: item.isDonutPolygon || false,
+        fillColor: baseFillColor,
+        strokeColor: baseStrokeColor,
+        lineWidth: baseLineWidth
+      });
+    }
+  };
+};
+/**
+ * 폴리곤 Event 렌더링 함수
+ *
+ * @param baseFillColor 기본 폴리곤 채우기 색상 (필수, fallback용)
+ * @param baseStrokeColor 기본 폴리곤 테두리 색상 (필수, fallback용)
+ * @param baseLineWidth 기본 폴리곤 테두리 두께 (필수, fallback용)
+ * @param selectedFillColor 선택된 폴리곤 채우기 색상 (선택, 기본값: baseFillColor)
+ * @param selectedStrokeColor 선택된 폴리곤 테두리 색상 (선택, 기본값: baseStrokeColor)
+ * @param selectedLineWidth 선택된 폴리곤 테두리 두께 (선택, 기본값: baseLineWidth)
+ * @param activeFillColor 마지막 선택된 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
+ * @param activeStrokeColor 마지막 선택된 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
+ * @param activeLineWidth 마지막 선택된 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
+ * @param hoveredFillColor Hover 시 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
+ * @param hoveredStrokeColor Hover 시 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
+ * @param hoveredLineWidth Hover 시 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
+ * @returns Event Layer 렌더링 함수
+ *
+ * @example
+ * const renderEvent = renderPolygonEvent(
+ *   'rgba(255, 100, 100, 0.5)',  // baseFillColor
+ *   'rgba(200, 50, 50, 0.8)',    // baseStrokeColor
+ *   2,                            // baseLineWidth
+ *   'rgba(255, 193, 7, 0.7)',    // selectedFillColor
+ *   'rgba(255, 152, 0, 1)',      // selectedStrokeColor
+ *   4                             // selectedLineWidth
+ * );
+ */
+
+var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth) {
+  // 기본값 설정 (base 기준)
+  var _selectedFillColor = selectedFillColor || baseFillColor;
+
+  var _selectedStrokeColor = selectedStrokeColor || baseStrokeColor;
+
+  var _selectedLineWidth = selectedLineWidth || baseLineWidth;
+
+  var _activeFillColor = activeFillColor || _selectedFillColor;
+
+  var _activeStrokeColor = activeStrokeColor || _selectedStrokeColor;
+
+  var _activeLineWidth = activeLineWidth || _selectedLineWidth;
+
+  var _hoveredFillColor = hoveredFillColor || _selectedFillColor;
+
+  var _hoveredStrokeColor = hoveredStrokeColor || _selectedStrokeColor;
+
+  var _hoveredLineWidth = hoveredLineWidth || _selectedLineWidth;
+
+  return function (_a) {
+    var ctx = _a.ctx,
+        hoveredItem = _a.hoveredItem,
+        utils = _a.utils,
+        selectedItems = _a.selectedItems,
+        selectedItem = _a.selectedItem; // 1. 선택된 항목들 그리기 (마지막 선택 항목과 호버된 항목 제외)
+
+    if (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) {
+      for (var _i = 0, selectedItems_1 = selectedItems; _i < selectedItems_1.length; _i++) {
+        var item = selectedItems_1[_i]; // 마지막 선택 항목과 호버된 항목은 나중에 따로 그림
+
+        if (item.id === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) || (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) === item.id) continue;
+        if (!item.paths) continue;
+        var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+        if (!polygonOffsets) continue;
+        drawPolygon({
+          ctx: ctx,
+          polygonOffsets: polygonOffsets,
+          isDonutPolygon: item.isDonutPolygon || false,
+          fillColor: _selectedFillColor,
+          strokeColor: _selectedStrokeColor,
+          lineWidth: _selectedLineWidth
+        });
+      }
+    } // 2. 마지막 선택된 항목 그리기 (호버되지 않은 경우)
+
+
+    if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.paths) && (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) !== selectedItem.id) {
+      var polygonOffsets = utils.getOrComputePolygonOffsets(selectedItem);
+
+      if (polygonOffsets) {
+        drawPolygon({
+          ctx: ctx,
+          polygonOffsets: polygonOffsets,
+          isDonutPolygon: selectedItem.isDonutPolygon || false,
+          fillColor: _activeFillColor,
+          strokeColor: _activeStrokeColor,
+          lineWidth: _activeLineWidth
+        });
+      }
+    } // 3. 호버된 항목 그리기 (가장 위에 표시)
 
-function LoadingImage(_a) {
-  var _b = _a.size,
-      size = _b === void 0 ? 256 : _b,
-      _c = _a.duration,
-      duration = _c === void 0 ? 1 : _c,
-      _d = _a.delay,
-      delay = _d === void 0 ? 1 : _d;
-  var scale = 256 / 4000;
-  return React.createElement("svg", {
-    className: cn$2("ani-fade-in"),
-    style: {
-      flex: "0 0 ".concat(size, "px"),
-      opacity: 0,
-      animationDelay: "".concat(delay, "s"),
-      animationDuration: "".concat(duration, "s"),
-      animationFillMode: 'forwards'
-    },
-    width: size,
-    height: size,
-    viewBox: "0 0 ".concat(size, " ").concat(size),
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React.createElement("g", {
-    transform: "scale(".concat(scale, ")"),
-    "clip-path": "url(#clip0_5_701)"
-  }, React.createElement("rect", {
-    width: "4000",
-    height: "4000",
-    transform: "translate(0 4000) rotate(-90)",
-    fill: "#F8F8F8"
-  }), React.createElement("path", {
-    d: "M2996.5 780L3624 309L3928.5 789.5L3422 1080.5L2996.5 780Z",
-    fill: "#E6E6E6"
-  }), React.createElement("path", {
-    d: "M522.5 449.5L1156.5 48.4999L1197.5 64.4999L1502.5 485.5L822.5 918L522.5 449.5Z",
-    fill: "#F6E4DD"
-  }), React.createElement("path", {
-    d: "M1149.5 1386.5L2468 516L2931.5 1286.5L2966 1415L1650.5 2248L1149.5 1386.5Z",
-    fill: "#DCEACA"
-  }), React.createElement("path", {
-    d: "M1840.5 2838.5L2609 2313L3047.5 2599.5L3073.5 2745.5L2176.5 3311L1840.5 2838.5Z",
-    fill: "#E6E6E6"
-  }), React.createElement("path", {
-    d: "M594 3013.5L1080.5 2681.5L1744 3615L1162.5 4002.5L594 3013.5Z",
-    fill: "#DCEACA"
-  }), React.createElement("path", {
-    d: "M2094.05 1450.88C2127.97 1531.67 2192.23 1496.11 2250.02 1514.4C2567.73 1559.37 2608.68 1362.05 2668.2 1302.01C2736.79 1232.83 2612.15 1065.8 2523.28 1090.46C2434.42 1115.13 2432.96 1150.53 2415.25 1229.76C2397.53 1308.98 2233.45 1247.46 2177.4 1257.03C2121.35 1266.61 2051.65 1349.89 2094.05 1450.88Z",
-    fill: "#A2CAEE"
-  }), React.createElement("circle", {
-    cx: "958",
-    cy: "3092",
-    r: "95",
-    fill: "#A2CAEE"
-  }), React.createElement("circle", {
-    cx: "1127",
-    cy: "3176",
-    r: "56",
-    fill: "#A2CAEE"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M3459.68 1085.96L4058.54 2069.19L4001.32 2104.04L3402.46 1120.82L3459.68 1085.96Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M-317.721 1447.99L595.333 2953.94L1201.76 4004.26L1143.74 4037.76L537.668 2988.06L-375.013 1482.72L-317.721 1447.99ZM1058.06 1406.15L1789.22 920.04L1109.17 -5.66436L1163.17 -45.3311L1844.92 882.695L2486.62 448.527L3047.72 1427.91L2989.59 1461.22L2464.38 544.474L1855.66 956.322L1855.55 956.398L1095.15 1461.94L1058.06 1406.15ZM1384.39 3114.5L2197.8 2552.05L1838.4 2105.93L1890.57 2063.9L2253.06 2513.84L2642 2244.89L2680.11 2300L1883.89 2850.56L2238.69 3352.52L2183.98 3391.19L1828.78 2888.67L1422.5 3169.61L1384.39 3114.5Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M-100.246 749.04L1266.96 -152.746L1346.25 -32.5396L-20.9597 869.247L-100.246 749.04Z",
-    fill: "#FBEDB1"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M5229.83 1392.22L2830.78 2477.33L2803.17 2416.28L5202.22 1331.17L5229.83 1392.22Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M2486.94 449.315L3519.19 1097.44L3483.56 1154.18L2451.32 506.057L2486.94 449.315Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M2352.16 -273.141L2533.64 518.164L2468.34 533.141L2286.86 -258.164L2352.16 -273.141Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M2237.62 3336.43L2440.07 4086.61L2375.39 4104.07L2172.93 3353.89L2237.62 3336.43Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M1204.91 1396.51L-54.5055 1973.41L-82.4082 1912.49L1177.01 1335.59L1204.91 1396.51Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M2694.5 2950.14L4158.86 4928.5L4105.01 4968.36L2640.64 2990L2694.5 2950.14Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M3441.72 -42.6462L3995.65 846.725L3938.77 882.146L3384.85 -7.2254L3441.72 -42.6462Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M2282.81 3631.14L2925.81 3304.14L2956.19 3363.86L2313.19 3690.86L2282.81 3631.14Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M466.178 1695.89L522.822 1660.11L813.709 2120.58L1365.65 1773.15L1401.35 1829.85L849.492 2177.23L1140.32 2637.61L1083.68 2673.39L466.178 1695.89Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M790.24 914.745L1475.24 451.745L1512.76 507.255L827.76 970.255L790.24 914.745Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M3410.6 2192.45L2986.6 1469.45L3044.4 1435.55L3468.4 2158.55L3410.6 2192.45Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M3637.26 329.182L3012.26 803.682L2971.74 750.318L3596.74 275.818L3637.26 329.182Z",
-    fill: "white"
-  }), React.createElement("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M-102.531 3333.52L1563.16 2259.21L418.867 413.751L541.25 337.866L1684.19 2181.14L4025.32 666.934L4103.57 787.82L2336.63 1931.51L3187.41 2659.17L4104.73 3340.1L4018.9 3455.73L3139.75 2803.13L956.929 4221.62L878.381 4100.93L1666.1 3588.26L1086.77 2737.81L-24.4816 3454.53L-102.531 3333.52ZM1207.82 2659.74L1786.86 3509.76L3022.47 2707.58L2210.46 2013.07L1207.82 2659.74Z",
-    fill: "#FBEDB1"
-  })), React.createElement("defs", null, React.createElement("clipPath", {
-    id: "clip0_5_701"
-  }, React.createElement("rect", {
-    width: "4000",
-    height: "4000",
-    fill: "white",
-    transform: "translate(0 4000) rotate(-90)"
-  }))));
-}
+
+    if (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.paths) {
+      var polygonOffsets = utils.getOrComputePolygonOffsets(hoveredItem);
+      if (!polygonOffsets) return;
+      var isSelected = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(function (item) {
+        return item.id === hoveredItem.id;
+      });
+      drawPolygon({
+        ctx: ctx,
+        polygonOffsets: polygonOffsets,
+        isDonutPolygon: hoveredItem.isDonutPolygon || false,
+        fillColor: isSelected ? _activeFillColor : _hoveredFillColor,
+        strokeColor: isSelected ? _activeStrokeColor : _hoveredStrokeColor,
+        lineWidth: isSelected ? _activeLineWidth : _hoveredLineWidth
+      });
+    }
+  };
+};
 
 // 메인 컴포넌트
 // ============================================================================
@@ -5964,20 +5686,20 @@ var WoongCanvasLayer = function (props) {
   var divElement = divRef.current;
   var containerRef = useRef(null);
   var markerRef = useRef(); // --------------------------------------------------------------------------
-  // Konva Refs - Multi-Layer 아키텍처
+  // Konva Refs
   // --------------------------------------------------------------------------
 
   var stageRef = useRef(null);
   var baseLayerRef = useRef(null);
   var animationLayerRef = useRef(null);
   var eventLayerRef = useRef(null); // --------------------------------------------------------------------------
-  // Data Refs - 데이터 동기화 및 상태 관리
+  // Data Refs - 선택 및 Hover 상태 관리
   // --------------------------------------------------------------------------
 
   /** data prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
 
   var dataRef = useRef(data); // --------------------------------------------------------------------------
-  // State Refs - 선택 및 Hover 상태 관리 (성능 최적화)
+  // State Refs - 선택 및 Hover 상태 관리
   // --------------------------------------------------------------------------
 
   /** 상호작용 비활성화 상태 (Ref로 관리하여 클로저 문제 해결) */
@@ -6018,7 +5740,7 @@ var WoongCanvasLayer = function (props) {
    */
 
   var selectedItemsMapRef = useRef(new Map()); // --------------------------------------------------------------------------
-  // Drag Refs - 지도 드래그 상태 관리
+  // Drag Refs
   // --------------------------------------------------------------------------
 
   var draggingRef = useRef(false);
@@ -6027,7 +5749,7 @@ var WoongCanvasLayer = function (props) {
     x: 0,
     y: 0
   }); // --------------------------------------------------------------------------
-  // Performance Refs - 성능 최적화 (캐싱 & 인덱싱)
+  // Performance Refs (캐싱 & 최적화)
   // --------------------------------------------------------------------------
 
   /** 좌표 변환 결과 LRU 캐시 */
@@ -6042,7 +5764,7 @@ var WoongCanvasLayer = function (props) {
   /** 뷰포트 경계 캐시 (Viewport Culling) */
 
   var viewportRef = useRef(null); // --------------------------------------------------------------------------
-  // 유틸리티 함수: 뷰포트 관리 (Viewport Culling)
+  // 유틸리티 함수: 뷰포트 관리
   // --------------------------------------------------------------------------
 
   /**
@@ -6121,7 +5843,7 @@ var WoongCanvasLayer = function (props) {
 
     return result;
   }; // --------------------------------------------------------------------------
-  // 유틸리티 함수: 바운딩 박스 계산 (Viewport Culling 최적화)
+  // 유틸리티 함수: 바운딩 박스 계산
   // --------------------------------------------------------------------------
 
   /**
@@ -6235,14 +5957,11 @@ var WoongCanvasLayer = function (props) {
   var renderEvent = dataType === CanvasDataType.MARKER ? props.renderEvent : function () {
     var polygonProps = props;
     return renderPolygonEvent(polygonProps.baseFillColor, polygonProps.baseStrokeColor, polygonProps.baseLineWidth, polygonProps.selectedFillColor, polygonProps.selectedStrokeColor, polygonProps.selectedLineWidth, polygonProps.activeFillColor, polygonProps.activeStrokeColor, polygonProps.activeLineWidth, polygonProps.hoveredFillColor, polygonProps.hoveredStrokeColor, polygonProps.hoveredLineWidth);
-  }(); // --------------------------------------------------------------------------
-  // 렌더링 함수: Base Layer (기본 상태 렌더링)
-  // --------------------------------------------------------------------------
-
+  }();
   /**
    * Base 레이어 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
    *
-   * 🔥 성능 최적화:
+   * 🔥 최적화:
    * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
    * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
    * 3. 클로저로 최신 데이터 참조
@@ -6308,14 +6027,11 @@ var WoongCanvasLayer = function (props) {
 
 
     layer.batchDraw();
-  }; // --------------------------------------------------------------------------
-  // 렌더링 함수: Animation Layer (선택된 항목 애니메이션)
-  // --------------------------------------------------------------------------
-
+  };
   /**
    * Animation 레이어 렌더링 (선택된 마커 애니메이션)
    *
-   * 🔥 성능 최적화: sceneFunc 내부에서 최신 items 참조
+   * 🔥 최적화: sceneFunc 내부에서 최신 items 참조
    * - 선택 변경 시에만 재생성
    * - 지도 이동 시에는 기존 Animation 계속 실행
    */
@@ -6331,23 +6047,14 @@ var WoongCanvasLayer = function (props) {
       items: dataRef.current,
       utils: renderUtils
     });
-  }; // --------------------------------------------------------------------------
-  // 렌더링 함수: Event Layer (상호작용 상태 렌더링)
-  // --------------------------------------------------------------------------
-
+  };
   /**
    * Event 레이어 렌더링 (hover + 선택 상태 표시)
    *
-   * 🔥 성능 최적화:
+   * 🔥 최적화:
    * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
    * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
    * 3. 클로저로 최신 데이터 참조
-   *
-   * 🎯 topOnHover + renderEvent 조합 지원:
-   * - topOnHover가 true이고 renderEvent가 있으면:
-   *   1. 먼저 hover된 항목을 제외한 나머지 항목들 렌더링
-   *   2. 그 다음 hover된 항목을 최상단에 렌더링 (시각적 우선순위)
-   * - topOnHover가 false이거나 renderEvent가 없으면 일반 렌더링
    */
 
 
@@ -6364,42 +6071,16 @@ var WoongCanvasLayer = function (props) {
       shape = new Konva.Shape({
         name: 'event-render-shape',
         sceneFunc: function (context, shape) {
-          var ctx = context; // 클로저로 최신 ref 값 참조 (안전한 처리)
+          var ctx = context; // 클로저로 최신 ref 값 참조
 
           var selectedItems = Array.from(selectedItemsMapRef.current.values());
-          var hovered = hoveredItemRef.current;
-          var selectedItem = selectedItemRef.current; // topOnHover가 true이면 hover된 항목을 최상단에 렌더링
-
-          if (topOnHover && hovered) {
-            // hover된 항목만 최상단에 렌더링 (renderEvent 없이 직접 렌더링)
-            var isHoveredInViewport = enableViewportCulling ? isInViewport(hovered) : true;
-
-            if (isHoveredInViewport) {
-              // hover된 항목을 빨간색으로 직접 렌더링
-              var position = renderUtils.getOrComputeMarkerOffset(hovered);
-
-              if (position) {
-                ctx.save();
-                ctx.fillStyle = '#E53935';
-                ctx.strokeStyle = '#C62828';
-                ctx.lineWidth = 2;
-                ctx.beginPath();
-                ctx.arc(position.x, position.y, 10, 0, 2 * Math.PI);
-                ctx.fill();
-                ctx.stroke();
-                ctx.restore();
-              }
-            }
-          } else {
-            // topOnHover가 false이거나 hover된 항목이 없으면 일반 렌더링
-            renderEvent({
-              ctx: ctx,
-              hoveredItem: hovered,
-              utils: renderUtils,
-              selectedItems: selectedItems,
-              selectedItem: selectedItem
-            });
-          }
+          renderEvent({
+            ctx: ctx,
+            hoveredItem: hoveredItemRef.current,
+            utils: renderUtils,
+            selectedItems: selectedItems,
+            selectedItem: selectedItemRef.current
+          });
         },
         perfectDrawEnabled: false,
         listening: false,
@@ -6510,7 +6191,7 @@ var WoongCanvasLayer = function (props) {
       containerRef.current.style.transform = "translate(".concat(accumTranslateRef.current.x, "px, ").concat(accumTranslateRef.current.y, "px)");
     }
   }; // --------------------------------------------------------------------------
-  // Hit Test & 상태 관리 (이벤트 처리)
+  // Hit Test & 상태 관리
   // --------------------------------------------------------------------------
 
   /**
@@ -6680,7 +6361,7 @@ var WoongCanvasLayer = function (props) {
     }
   };
   /**
-   * 마우스 이동 이벤트 처리 (hover 감지 및 상태 업데이트)
+   * 마우스 이동 이벤트 처리 (hover 감지)
    */
 
 
@@ -6724,7 +6405,7 @@ var WoongCanvasLayer = function (props) {
     controller.setMapCursor('grab');
   };
   /**
-   * 마우스가 canvas를 벗어날 때 hover 상태 정리
+   * 마우스가 canvas를 벗어날 때 hover cleanup
    */
 
 
@@ -6784,7 +6465,7 @@ var WoongCanvasLayer = function (props) {
       }
     }
   }, [options]); // --------------------------------------------------------------------------
-  // Lifecycle: Konva 초기화 및 이벤트 리스너 등록 (컴포넌트 마운트)
+  // Lifecycle: Konva 초기화 및 이벤트 리스너 등록
   // --------------------------------------------------------------------------
 
   useEffect(function () {
@@ -6910,32 +6591,26 @@ var WoongCanvasLayer = function (props) {
     };
   }, []); // 초기화는 한 번만
   // --------------------------------------------------------------------------
-  // Lifecycle: disableInteraction 동기화 (상호작용 상태 관리)
+  // Lifecycle: disableInteraction 동기화
   // --------------------------------------------------------------------------
 
   useEffect(function () {
     disableInteractionRef.current = disableInteraction;
   }, [disableInteraction]); // --------------------------------------------------------------------------
-  // Lifecycle: 외부 selectedItems 동기화 (선택 상태 관리)
+  // Lifecycle: 외부 selectedItems 동기화
   // --------------------------------------------------------------------------
 
   useEffect(function () {
     if (!stageRef.current) return; // externalSelectedItems가 undefined면 외부 제어 안 함
 
-    if (externalSelectedItems === undefined) return; // 외부에서 전달된 selectedItems로 동기화 (안전한 처리)
+    if (externalSelectedItems === undefined) return; // 외부에서 전달된 selectedItems로 동기화
 
     var newSelectedIds = new Set();
-    var newSelectedItemsMap = new Map(); // selectedItems가 배열인지 확인하고 안전하게 처리
-
-    if (Array.isArray(externalSelectedItems)) {
-      externalSelectedItems.forEach(function (item) {
-        if (item && item.id) {
-          newSelectedIds.add(item.id);
-          newSelectedItemsMap.set(item.id, item);
-        }
-      });
-    }
-
+    var newSelectedItemsMap = new Map();
+    externalSelectedItems.forEach(function (item) {
+      newSelectedIds.add(item.id);
+      newSelectedItemsMap.set(item.id, item);
+    });
     selectedIdsRef.current = newSelectedIds;
     selectedItemsMapRef.current = newSelectedItemsMap; // 렌더링
 
@@ -6944,17 +6619,17 @@ var WoongCanvasLayer = function (props) {
     doRenderEvent();
   }, [externalSelectedItems]); // 배열 자체를 dependency로 사용
   // --------------------------------------------------------------------------
-  // Lifecycle: 외부 selectedItem 변경 시 Event Layer 리렌더링 (단일 선택 관리)
+  // Lifecycle: 외부 selectedItem 변경 시 Event Layer 리렌더링
   // --------------------------------------------------------------------------
 
   useEffect(function () {
-    if (!stageRef.current) return; // Ref 동기화 (안전한 처리)
+    if (!stageRef.current) return; // Ref 동기화
 
-    selectedItemRef.current = externalSelectedItem || null; // selectedItem이 변경되면 Event Layer만 다시 그림
+    selectedItemRef.current = externalSelectedItem; // selectedItem이 변경되면 Event Layer만 다시 그림
 
     doRenderEvent();
   }, [externalSelectedItem]); // --------------------------------------------------------------------------
-  // Lifecycle: 데이터 변경 시 렌더링 (데이터 동기화 및 최적화)
+  // Lifecycle: 데이터 변경 시 렌더링
   // --------------------------------------------------------------------------
 
   useEffect(function () {
@@ -7011,10 +6686,7 @@ var WoongCanvasLayer = function (props) {
     selectedItemsMapRef.current = newSelectedItemsMap; // 즉시 렌더링
 
     renderAllImmediate();
-  }, [data]); // --------------------------------------------------------------------------
-  // Render - React Portal을 통한 DOM 렌더링
-  // --------------------------------------------------------------------------
-
+  }, [data]);
   return createPortal(React.createElement("div", {
     ref: containerRef,
     style: {
@@ -7765,20 +7437,54 @@ function (_super) {
     }
   };
 
-  NaverMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
+  NaverMintMapController.prototype.getCurrentZIndex = function (marker) {
     if (this.map && marker.element && marker.element instanceof HTMLElement) {
       var parent_1 = marker.element.parentElement;
 
-      if (parent_1) {
-        parent_1.style.zIndex = String(zIndex);
+      if (parent_1 && parent_1.style.zIndex) {
+        var zIndex = Number(parent_1.style.zIndex);
+        return isNaN(zIndex) ? undefined : zIndex;
+      }
+    }
+
+    return undefined;
+  };
+
+  NaverMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
+    if (this.map && marker.element && marker.element instanceof HTMLElement) {
+      var parent_2 = marker.element.parentElement;
+
+      if (parent_2) {
+        parent_2.style.zIndex = String(zIndex);
       }
     }
   };
 
   NaverMintMapController.prototype.markerToTheTop = function (marker) {
+    // 이미 최상위로 올라간 상태면 (원래 zIndex가 이미 저장됨) 중복 실행 방지
+    if (this.markerOriginalZIndex !== undefined) {
+      return;
+    }
+
+    var currentZIndex = this.getCurrentZIndex(marker); // undefined면 null로 저장 (원래 zIndex가 없었음을 표시)
+
+    this.markerOriginalZIndex = currentZIndex !== undefined ? currentZIndex : null;
     this.setMarkerZIndex(marker, this.getMaxZIndex(1));
   };
 
+  NaverMintMapController.prototype.restoreMarkerZIndex = function (marker) {
+    if (this.markerOriginalZIndex !== undefined) {
+      if (this.markerOriginalZIndex === null) {
+        // 원래 zIndex가 없었으면 제거 (또는 초기값 0으로)
+        this.setMarkerZIndex(marker, 0);
+      } else {
+        this.setMarkerZIndex(marker, this.markerOriginalZIndex);
+      }
+
+      this.markerOriginalZIndex = undefined;
+    }
+  };
+
   NaverMintMapController.prototype.clearDrawable = function (drawable) {
     var _a;
 
@@ -8533,6 +8239,10 @@ function (_super) {
     }
   };
 
+  GoogleMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Google Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
+    // 이 기능은 Naver Maps에서만 사용 가능합니다.
+  };
+
   GoogleMintMapController.prototype.clearDrawable = function (drawable) {
     if (drawable && drawable.native) {
       if (drawable.native instanceof google.maps.Marker || drawable.native instanceof google.maps.Polygon || drawable.native instanceof google.maps.Polyline) {
@@ -9255,6 +8965,10 @@ function (_super) {
     }
   };
 
+  KakaoMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Kakao Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
+    // 이 기능은 Naver Maps에서만 사용 가능합니다.
+  };
+
   KakaoMintMapController.prototype.clearDrawable = function (drawable) {
     var _this = this;
 
@@ -9814,4 +9528,4 @@ function MintMap(_a) {
   }), loading));
 }
 
-export { AnimationPlayer, Bounds, CanvasDataType, CanvasMarker, CanvasMarkerClaude, CanvasMarkerHanquf, CircleMarker, DEFAULT_CULLING_MARGIN, DEFAULT_MAX_CACHE_SIZE, Drawable, GeoCalulator, GoogleMintMapController, KonvaMarkerProvider, 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, WoongCanvasLayer, calculateTextBoxWidth, computeMarkerOffset, computePolygonOffsets, drawPolygon, getClusterInfo, getMapOfType, hexToRgba, isPointInMarkerData, isPointInPolygon, isPointInPolygonData, log, renderPolygonBase, renderPolygonEvent, useKonvaMarkerContext, useMarkerMoving, useMintMapController, waiting };
+export { AnimationPlayer, Bounds, CanvasDataType, CanvasMarker, CanvasMarkerClaude, CanvasMarkerHanquf, CircleMarker, DEFAULT_CULLING_MARGIN, DEFAULT_MAX_CACHE_SIZE, Drawable, GeoCalulator, GoogleMintMapController, KonvaMarkerProvider, 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, WoongCanvasLayer, calculateTextBoxWidth, computeMarkerOffset, computePolygonOffsets, getClusterInfo, getMapOfType, hexToRgba, isPointInMarkerData, isPointInPolygon, isPointInPolygonData, log, useKonvaMarkerContext, useMarkerMoving, useMintMapController, waiting };