@mint-ui/map 1.2.0-test.2 → 1.2.0-test.21

package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.d.ts

@@ -1,23 +1,175 @@
+/**
+ * @fileoverview WoongCanvasLayer를 위한 유틸리티 함수들
+ *
+ * 이 파일은 좌표 변환, 히트 테스트, 색상 변환 등 WoongCanvasLayer에서
+ * 사용하는 다양한 유틸리티 함수들을 제공합니다.
+ *
+ * ## 주요 기능
+ * - **좌표 변환**: 지도 좌표(위경도) ↔ 화면 좌표(픽셀) 변환
+ * - **히트 테스트**: 마우스 클릭/호버 시 어떤 마커/폴리곤인지 찾기
+ * - **색상 변환**: 다양한 색상 형식 간 변환
+ * - **바운딩 박스**: 폴리곤의 경계 영역 계산
+ *
+ * @version 2.2.1
+ * @since 2.0.0
+ * @author 박건웅
+ */
 import { Offset } from "../../../../types";
 import { MintMapController } from "../../../MintMapController";
-import { CanvasMarkerData } from "./types";
+import { KonvaCanvasData } from "./types";
 /**
- * 폴리곤 offset 계산
+ * 폴리곤 좌표를 화면 좌표로 변환
+ *
+ * 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의 첫 번째 점
+ * }
+ * ```
  */
-export declare const computePolygonOffsets: (polygonData: CanvasMarkerData<any>, controller: MintMapController) => number[][][][] | null;
+export declare const computePolygonOffsets: (polygonData: KonvaCanvasData<any>, controller: MintMapController) => number[][][][] | null;
 /**
- * 마커 offset 계산
+ * 마커 좌표를 화면 좌표로 변환
+ *
+ * 마커의 지도 좌표(위경도)를 Canvas에서 그릴 수 있는 화면 좌표로 변환합니다.
+ *
+ * @param markerData - 변환할 마커 데이터
+ * @param controller - 지도 컨트롤러 (좌표 변환용)
+ * @returns 변환된 화면 좌표 또는 null (변환 실패 시)
+ *
+ * @example
+ * ```typescript
+ * const offset = computeMarkerOffset(markerData, controller);
+ * if (offset) {
+ *   console.log(`마커 위치: (${offset.x}, ${offset.y})`);
+ * }
+ * ```
  */
-export declare const computeMarkerOffset: (markerData: CanvasMarkerData<any>, controller: MintMapController) => Offset | null;
+export declare const computeMarkerOffset: (markerData: KonvaCanvasData<any>, controller: MintMapController) => Offset | null;
 /**
- * Point-in-Polygon 알고리즘
+ * 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
+ * ```
  */
 export declare const isPointInPolygon: (point: Offset, polygon: number[][]) => boolean;
 /**
- * 폴리곤 히트 테스트
+ * 폴리곤 히트 테스트 (도넛 폴리곤 지원)
+ *
+ * 클릭된 좌표가 폴리곤 내부에 있는지 확인합니다.
+ * 도넛 폴리곤(구멍이 있는 폴리곤)도 지원합니다.
+ *
+ * ## 도넛 폴리곤 처리 로직
+ * 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)
+ * );
+ * ```
+ */
+export declare const isPointInPolygonData: (clickedOffset: Offset, polygonData: KonvaCanvasData<any>, getPolygonOffsets: (data: KonvaCanvasData<any>) => number[][][][] | null) => boolean;
+/**
+ * 마커 히트 테스트 (클릭/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)
+ * );
+ * ```
+ */
+export declare const isPointInMarkerData: (clickedOffset: Offset, markerData: KonvaCanvasData<any>, getMarkerOffset: (data: KonvaCanvasData<any>) => Offset | null) => boolean;
+/**
+ * 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)"
+ * ```
  */
-export declare const isPointInPolygonData: (clickedOffset: Offset, polygonData: CanvasMarkerData<any>, getPolygonOffsets: (data: CanvasMarkerData<any>) => number[][][][] | null) => boolean;
+export declare const hexToRgba: (hexColor: string, alpha?: number) => string;
 /**
- * 마커 히트 테스트
+ * 텍스트 박스의 너비를 계산
+ *
+ * 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
+ * });
+ * ```
  */
-export declare const isPointInMarkerData: (clickedOffset: Offset, markerData: CanvasMarkerData<any>, getMarkerOffset: (data: CanvasMarkerData<any>) => Offset | null) => boolean;
+export declare const calculateTextBoxWidth: ({ text, fontConfig, padding, minWidth, }: {
+    text: string;
+    fontConfig: string;
+    padding: number;
+    minWidth: number;
+}) => number;

package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.js

@@ -7,7 +7,38 @@ var MapTypes = require('../../../../types/MapTypes.js');
 require('../../../../types/MapEventTypes.js');
 
 /**
- * 폴리곤 offset 계산
+ * @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의 첫 번째 점
+ * }
+ * ```
  */
 
 var computePolygonOffsets = function (polygonData, controller) {
@@ -43,18 +74,46 @@ var computePolygonOffsets = function (polygonData, controller) {
   return result;
 };
 /**
- * 마커 offset 계산
+ * 마커 좌표를 화면 좌표로 변환
+ *
+ * 마커의 지도 좌표(위경도)를 Canvas에서 그릴 수 있는 화면 좌표로 변환합니다.
+ *
+ * @param markerData - 변환할 마커 데이터
+ * @param controller - 지도 컨트롤러 (좌표 변환용)
+ * @returns 변환된 화면 좌표 또는 null (변환 실패 시)
+ *
+ * @example
+ * ```typescript
+ * const offset = computeMarkerOffset(markerData, controller);
+ * if (offset) {
+ *   console.log(`마커 위치: (${offset.x}, ${offset.y})`);
+ * }
+ * ```
  */
 
 var computeMarkerOffset = function (markerData, controller) {
-  if (!markerData.position || markerData.position.length === 0) {
+  if (!markerData.position) {
     return null;
   }
 
-  return controller.positionToOffset(markerData.position[0]);
+  return controller.positionToOffset(markerData.position);
 };
 /**
- * Point-in-Polygon 알고리즘
+ * 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
+ * ```
  */
 
 var isPointInPolygon = function (point, polygon) {
@@ -72,18 +131,85 @@ var isPointInPolygon = function (point, polygon) {
   return inside;
 };
 /**
- * 폴리곤 히트 테스트
+ * 폴리곤 히트 테스트 (도넛 폴리곤 지원)
+ *
+ * 클릭된 좌표가 폴리곤 내부에 있는지 확인합니다.
+ * 도넛 폴리곤(구멍이 있는 폴리곤)도 지원합니다.
+ *
+ * ## 도넛 폴리곤 처리 로직
+ * 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)
+ * );
+ * ```
  */
 
 var isPointInPolygonData = function (clickedOffset, polygonData, getPolygonOffsets) {
   var polygonOffsets = getPolygonOffsets(polygonData);
-  if (!polygonOffsets) return false;
+  if (!polygonOffsets) return false; // 🍩 도넛 폴리곤 처리 (isDonutPolygon === true)
+
+  if (polygonData.isDonutPolygon) {
+    for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
+      var multiPolygon = polygonOffsets_1[_i];
+      if (multiPolygon.length === 0) continue; // 외부 폴리곤만 있는 경우 (구멍 없음) - 일반 폴리곤처럼 처리
+
+      if (multiPolygon.length === 1) {
+        if (isPointInPolygon(clickedOffset, multiPolygon[0])) {
+          return true;
+        }
+
+        continue;
+      } // 1. 외부 폴리곤(첫 번째)에 포함되는지 확인
+
+
+      var outerPolygon = multiPolygon[0];
+
+      if (!isPointInPolygon(clickedOffset, outerPolygon)) {
+        continue; // 외부 폴리곤 밖이면 다음 multiPolygon 확인
+      } // 2. 내부 구멍들(나머지)에 포함되는지 확인
+
+
+      for (var i = 1; i < multiPolygon.length; i++) {
+        var hole = multiPolygon[i];
+
+        if (isPointInPolygon(clickedOffset, hole)) {
+          // ❌ 구멍 안에 있음 → 이 도넛 폴리곤은 히트 안 됨
+          // 다른 multiPolygon 체크하지 않고 바로 false 반환
+          // (도넛 폴리곤의 구멍 안은 무조건 클릭 불가)
+          return false;
+        }
+      } // ✅ 외부 폴리곤 안 + 구멍 밖 = 히트!
+
+
+      return true;
+    }
+
+    return false;
+  } // 일반 폴리곤 처리 (isDonutPolygon === false 또는 undefined)
+
 
-  for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
-    var multiPolygon = polygonOffsets_1[_i];
+  for (var _a = 0, polygonOffsets_2 = polygonOffsets; _a < polygonOffsets_2.length; _a++) {
+    var multiPolygon = polygonOffsets_2[_a];
 
-    for (var _a = 0, multiPolygon_2 = multiPolygon; _a < multiPolygon_2.length; _a++) {
-      var polygonGroup = multiPolygon_2[_a];
+    for (var _b = 0, multiPolygon_2 = multiPolygon; _b < multiPolygon_2.length; _b++) {
+      var polygonGroup = multiPolygon_2[_b];
+      if (polygonGroup.length === 0) continue;
 
       if (isPointInPolygon(clickedOffset, polygonGroup)) {
         return true;
@@ -94,7 +220,29 @@ 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, 외부에 있으면 false
+ *
+ * @example
+ * ```typescript
+ * const isHit = isPointInMarkerData(
+ *   { x: 100, y: 100 },
+ *   markerData,
+ *   (data) => computeMarkerOffset(data, controller)
+ * );
+ * ```
  */
 
 var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset) {
@@ -102,14 +250,87 @@ var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset)
   if (!markerOffset) return false;
   var boxWidth = markerData.boxWidth || 50;
   var boxHeight = markerData.boxHeight || 28;
-  var tailHeight = 6;
+  var tailHeight = markerData.tailHeight || 0; // 🎯 tailHeight 사용!
+
   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 색상으로 변환
+ *
+ * 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에서 "#" 제거
+
+
+  var hex = hexColor.replace('#', ''); // 6자리일 경우 알파 값은 사용자가 제공한 alpha 값으로 설정
+
+  if (hex.length === 6) {
+    var r = parseInt(hex.substring(0, 2), 16);
+    var g = parseInt(hex.substring(2, 4), 16);
+    var b = parseInt(hex.substring(4, 6), 16);
+    return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
+  }
+
+  throw new Error('Invalid hex color format');
+};
+var 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
+ * });
+ * ```
+ */
+
+var calculateTextBoxWidth = function (_a) {
+  var text = _a.text,
+      fontConfig = _a.fontConfig,
+      padding = _a.padding,
+      minWidth = _a.minWidth;
+  if (!tempCtx) return 0;
+  tempCtx.font = fontConfig;
+  var textWidth = tempCtx.measureText(text).width;
+  return Math.max(minWidth, textWidth + padding);
+};
 
+exports.calculateTextBoxWidth = calculateTextBoxWidth;
 exports.computeMarkerOffset = computeMarkerOffset;
 exports.computePolygonOffsets = computePolygonOffsets;
+exports.hexToRgba = hexToRgba;
 exports.isPointInMarkerData = isPointInMarkerData;
 exports.isPointInPolygon = isPointInPolygon;
 exports.isPointInPolygonData = isPointInPolygonData;

package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js

@@ -172,7 +172,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');
@@ -185,6 +185,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
 
 
@@ -202,10 +221,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);

package/dist/components/mint-map/google/GoogleMintMapController.d.ts

@@ -28,6 +28,7 @@ export declare class GoogleMintMapController extends MintMapController {
     private getMaxZIndex;
     setMarkerZIndex(marker: Marker, zIndex: number): void;
     markerToTheTop(marker: Marker): void;
+    restoreMarkerZIndex(marker: Marker): void;
     clearDrawable(drawable: Drawable): boolean;
     private dragged;
     isMapDragged(): boolean;

package/dist/components/mint-map/google/GoogleMintMapController.js

@@ -20,7 +20,9 @@ var polygon = require('../core/util/polygon.js');
 require('../naver/NaverMintMapController.js');
 require('../core/advanced/canvas/CanvasMarkerClaude.js');
 require('../core/advanced/MapLoadingComponents.js');
-require('../core/advanced/woongCanvas/WoongKonvaMarker.js');
+require('konva');
+require('../core/advanced/woongCanvas/shared/types.js');
+require('../core/advanced/woongCanvas/shared/utils.js');
 require('../core/advanced/woongCanvas/shared/context.js');
 require('../core/advanced/woongCanvas/shared/performance.js');
 require('../core/wrapper/MapControlWrapper.js');
@@ -339,6 +341,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) {

package/dist/components/mint-map/kakao/KakaoMintMapController.d.ts

@@ -31,6 +31,7 @@ export declare class KakaoMintMapController extends MintMapController {
     private getMaxZIndex;
     setMarkerZIndex(marker: Marker, zIndex: number): void;
     markerToTheTop(marker: Marker): void;
+    restoreMarkerZIndex(marker: Marker): void;
     clearDrawable(drawable: Drawable): boolean;
     private dragged;
     isMapDragged(): boolean;

package/dist/components/mint-map/kakao/KakaoMintMapController.js

@@ -21,7 +21,9 @@ var polygon = require('../core/util/polygon.js');
 require('../naver/NaverMintMapController.js');
 require('../core/advanced/canvas/CanvasMarkerClaude.js');
 require('../core/advanced/MapLoadingComponents.js');
-require('../core/advanced/woongCanvas/WoongKonvaMarker.js');
+require('konva');
+require('../core/advanced/woongCanvas/shared/types.js');
+require('../core/advanced/woongCanvas/shared/utils.js');
 require('../core/advanced/woongCanvas/shared/context.js');
 require('../core/advanced/woongCanvas/shared/performance.js');
 require('../core/wrapper/MapControlWrapper.js');
@@ -347,6 +349,10 @@ function (_super) {
     }
   };
 
+  KakaoMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Kakao Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
+    // 이 기능은 Naver Maps에서만 사용 가능합니다.
+  };
+
   KakaoMintMapController.prototype.clearDrawable = function (drawable) {
     var _this = this;
 

package/dist/components/mint-map/naver/NaverMintMapController.d.ts

@@ -27,9 +27,12 @@ export declare class NaverMintMapController extends MintMapController {
     createMarker(marker: Marker): void;
     updateMarker(marker: Marker, options: MarkerOptions): void;
     private markerMaxZIndex;
+    private markerOriginalZIndex;
     private getMaxZIndex;
+    private getCurrentZIndex;
     setMarkerZIndex(marker: Marker, zIndex: number): void;
     markerToTheTop(marker: Marker): void;
+    restoreMarkerZIndex(marker: Marker): void;
     clearDrawable(drawable: Drawable): boolean;
     private dragged;
     isMapDragged(): boolean;

package/dist/components/mint-map/naver/NaverMintMapController.js

@@ -20,7 +20,9 @@ require('../core/util/geo.js');
 var polygon = require('../core/util/polygon.js');
 require('../core/advanced/canvas/CanvasMarkerClaude.js');
 require('../core/advanced/MapLoadingComponents.js');
-require('../core/advanced/woongCanvas/WoongKonvaMarker.js');
+require('konva');
+require('../core/advanced/woongCanvas/shared/types.js');
+require('../core/advanced/woongCanvas/shared/utils.js');
 require('../core/advanced/woongCanvas/shared/context.js');
 require('../core/advanced/woongCanvas/shared/performance.js');
 require('../core/wrapper/MapControlWrapper.js');
@@ -339,20 +341,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;