@mint-ui/map 1.2.0-test.62 → 1.2.0-test.63

package/dist/index.umd.js

@@ -3939,28 +3939,48 @@
   });
 
   var CanvasMarkerLayer = function (props) {
+    // 타입 가드: renderEvent가 있는지 확인
+    var hasRenderEvent = 'renderEvent' in props && props.renderEvent !== undefined; // renderEvent가 있는 경우와 없는 경우를 구분하여 props 추출
+
     var data = props.data,
-        onClick = props.onClick,
-        onMouseOver = props.onMouseOver,
-        onMouseOut = props.onMouseOut,
-        _a = props.enableMultiSelect,
-        enableMultiSelect = _a === void 0 ? false : _a,
-        _b = props.topOnHover,
-        topOnHover = _b === void 0 ? false : _b,
-        _c = props.enableViewportCulling,
-        enableViewportCulling = _c === void 0 ? false : _c,
-        _d = props.cullingMargin,
-        cullingMargin = _d === void 0 ? DEFAULT_CULLING_MARGIN : _d,
-        _e = props.maxCacheSize,
-        maxCacheSize = _e === void 0 ? DEFAULT_MAX_CACHE_SIZE : _e,
-        externalSelectedItems = props.selectedItems,
-        externalSelectedItem = props.selectedItem,
-        _f = props.disableInteraction,
-        disableInteraction = _f === void 0 ? false : _f,
+        _a = props.enableViewportCulling,
+        enableViewportCulling = _a === void 0 ? false : _a,
+        _b = props.cullingMargin,
+        cullingMargin = _b === void 0 ? DEFAULT_CULLING_MARGIN : _b,
+        _c = props.maxCacheSize,
+        maxCacheSize = _c === void 0 ? DEFAULT_MAX_CACHE_SIZE : _c,
         renderBase = props.renderBase,
-        renderEvent = props.renderEvent,
-        options = tslib.__rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "renderBase", "renderEvent"]);
-
+        options = tslib.__rest(props, ["data", "enableViewportCulling", "cullingMargin", "maxCacheSize", "renderBase"]); // renderEvent가 있는 경우에만 인터랙션 관련 props 추출
+
+
+    var _d = hasRenderEvent && 'renderEvent' in props ? props : {
+      disableInteraction: false,
+      enableMultiSelect: false,
+      onClick: undefined,
+      onMouseOut: undefined,
+      onMouseOver: undefined,
+      renderEvent: undefined,
+      selectedItem: undefined,
+      selectedItems: undefined,
+      topOnHover: false,
+      topStageZIndex: undefined
+    },
+        _e = _d.disableInteraction,
+        disableInteraction = _e === void 0 ? false : _e,
+        _f = _d.enableMultiSelect,
+        enableMultiSelect = _f === void 0 ? false : _f,
+        onClick = _d.onClick,
+        onMouseOut = _d.onMouseOut,
+        onMouseOver = _d.onMouseOver,
+        renderEvent = _d.renderEvent,
+        externalSelectedItem = _d.selectedItem,
+        externalSelectedItems = _d.selectedItems,
+        rawTopStageZIndex = _d.topStageZIndex,
+        _g = _d.topOnHover,
+        topOnHover = _g === void 0 ? false : _g; // topOnHover가 false이거나 없으면 topStageZIndex를 사용하지 못하도록 제한
+
+
+    var topStageZIndex = topOnHover && rawTopStageZIndex !== undefined ? rawTopStageZIndex : undefined;
     var controller = useMintMapController();
     var context = useCanvasContext();
     var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // DOM Refs
@@ -3968,11 +3988,18 @@
     var divRef = React.useRef(document.createElement('div'));
     var divElement = divRef.current;
     var containerRef = React.useRef(null);
-    var markerRef = React.useRef(); // Konva Refs
+    var markerRef = React.useRef(); // Top Layer용 별도 DOM Refs (topStageZIndex가 설정된 경우에만 사용)
+
+    var topDivRef = React.useRef(document.createElement('div'));
+    var topDivElement = topDivRef.current;
+    var topContainerRef = React.useRef(null);
+    var topMarkerRef = React.useRef(); // Konva Refs
 
     var stageRef = React.useRef(null);
     var baseLayerRef = React.useRef(null);
-    var eventLayerRef = React.useRef(null); // 상태 관리 Refs (React 리렌더링 최소화)
+    var eventLayerRef = React.useRef(null);
+    var topStageRef = React.useRef(null);
+    var topLayerRef = React.useRef(null); // 상태 관리 Refs (React 리렌더링 최소화)
 
     var dataRef = React.useRef(data);
     var disableInteractionRef = React.useRef(disableInteraction);
@@ -4063,24 +4090,34 @@
 
             var visibleItems = enableViewportCullingRef.current ? dataRef.current.filter(function (item) {
               return isInViewport$1(item);
-            }) : dataRef.current; // topOnHover 옵션: hover된 항목을 나중에 그려서 최상위에 표시
+            }) : dataRef.current; // topStageZIndex가 설정되고 topOnHover가 true인 경우 hover된 항목은 Top Layer에서 처리
+            // topOnHover 옵션: hover된 항목을 나중에 그려서 최상위에 표시
 
-            if (topOnHover && !renderEvent && hovered) {
+            if (topStageZIndex !== undefined && topOnHover && hovered) {
+              visibleItems = visibleItems.filter(function (item) {
+                return item.id !== hovered.id;
+              });
+            } else if (topOnHover && !renderEvent && hovered) {
               visibleItems = visibleItems.filter(function (item) {
                 return item.id !== hovered.id;
               });
             } // 일반 항목들 먼저 렌더링
+            // topOnHover가 false이고 renderEvent가 있으면 선택된 항목도 Base Layer에서 렌더링
+            // (Event Layer에서 선택된 항목을 렌더링하지 않으므로)
+            // topOnHover가 true이거나 renderEvent가 없으면 선택된 항목은 Base Layer에서 스킵됨
 
 
+            var baseSelectedIds = !topOnHover && renderEvent ? selectedIdsRef.current : new Set();
             renderBase({
               ctx: ctx,
               hoveredItem: hovered,
               items: visibleItems,
-              selectedIds: selectedIdsRef.current,
+              selectedIds: baseSelectedIds,
               utils: renderUtils
-            }); // hover된 항목을 마지막에 렌더링하여 최상위에 표시
+            }); // topStageZIndex가 설정된 경우 hover된 항목은 Top Layer에서 처리하므로 여기서는 스킵
+            // hover된 항목을 마지막에 렌더링하여 최상위에 표시
 
-            if (topOnHover && !renderEvent && hovered) {
+            if (topStageZIndex === undefined && topOnHover && !renderEvent && hovered) {
               if (!enableViewportCullingRef.current || isInViewport$1(hovered)) {
                 renderBase({
                   ctx: ctx,
@@ -4114,9 +4151,24 @@
           sceneFunc: function (konvaContext) {
             var ctx = konvaContext;
             var selectedItems = mapValuesToArray(selectedItemsMapRef.current);
-            var hovered = hoveredItemRef.current;
+            var hovered = hoveredItemRef.current; // topStageZIndex가 설정되고 topOnHover가 true이면 hover된 항목은 Top Layer에서 처리
+            // event 레이어에서는 hover된 항목을 완전히 제외하고 선택된 항목만 렌더링
 
-            if (topOnHover && hovered) {
+            if (topStageZIndex !== undefined && topOnHover && hovered) {
+              // hover된 항목을 제외한 선택된 항목들
+              var selectedItemsWithoutHovered = selectedItems.filter(function (item) {
+                return item.id !== hovered.id;
+              }); // 선택된 항목만 그리기 (hover된 항목은 Top Layer에서 처리)
+
+              renderEvent({
+                ctx: ctx,
+                hoveredItem: null,
+                selectedItem: selectedItemRef.current,
+                selectedItems: selectedItemsWithoutHovered,
+                topOnHover: topOnHover,
+                utils: renderUtils
+              });
+            } else if (topOnHover && hovered) {
               renderEvent({
                 ctx: ctx,
                 hoveredItem: null,
@@ -4124,6 +4176,7 @@
                 selectedItems: selectedItems.filter(function (item) {
                   return item.id !== hovered.id;
                 }),
+                topOnHover: topOnHover,
                 utils: renderUtils
               });
 
@@ -4137,15 +4190,25 @@
                   hoveredItem: hovered,
                   selectedItem: selectedItemRef.current,
                   selectedItems: hoverSelectedItems,
+                  topOnHover: topOnHover,
                   utils: renderUtils
                 });
               }
             } else {
+              // topOnHover가 false일 때는 hover된 항목을 나중에 그리지 않음
+              // 하지만 hover 스타일은 적용해야 하므로, hover된 항목이 selectedItems에 포함되어 있지 않으면 추가
+              // renderEvent 함수에 topOnHover 정보를 전달하여,
+              // renderEvent 함수 내부에서 topOnHover가 false일 때는 hover된 항목을 마지막에 그리지 않도록 함
+              var hoveredIsSelected = hovered ? selectedItems.some(function (item) {
+                return item.id === hovered.id;
+              }) : false;
+              var finalSelectedItems = hovered && !hoveredIsSelected && !topOnHover ? tslib.__spreadArray(tslib.__spreadArray([], selectedItems, true), [hovered], false) : selectedItems;
               renderEvent({
                 ctx: ctx,
                 hoveredItem: hovered,
                 selectedItem: selectedItemRef.current,
-                selectedItems: selectedItems,
+                selectedItems: finalSelectedItems,
+                topOnHover: topOnHover,
                 utils: renderUtils
               });
             }
@@ -4154,6 +4217,79 @@
         layer.add(shape);
       }
 
+      layer.batchDraw();
+    }; // Top Layer 렌더링 (hover된 항목만, 별도 캔버스 DOM에 그리기)
+
+
+    var doRenderTop = function () {
+      var stage = topStageRef.current;
+      var layer = topLayerRef.current;
+      if (!stage || !layer || topStageZIndex === undefined || !topOnHover) return;
+      var hovered = hoveredItemRef.current;
+      var shape = layer.findOne('.top-render-shape'); // hover된 항목이 없으면 shape 제거
+
+      if (!hovered) {
+        if (shape) {
+          shape.destroy();
+        }
+
+        layer.batchDraw();
+        return;
+      } // shape가 없으면 생성
+
+
+      if (!shape) {
+        shape = new Konva__default["default"].Shape({
+          hitStrokeWidth: 0,
+          listening: false,
+          name: 'top-render-shape',
+          perfectDrawEnabled: false,
+          sceneFunc: function () {} // 초기화만
+
+        });
+        layer.add(shape);
+      } // sceneFunc를 매번 업데이트하여 최신 상태 반영
+
+
+      shape.sceneFunc(function (konvaContext) {
+        var ctx = konvaContext;
+        var currentHovered = hoveredItemRef.current; // hover된 항목이 없으면 아무것도 그리지 않음
+
+        if (!currentHovered) return; // 뷰포트 컬링 확인
+
+        if (enableViewportCullingRef.current && !isInViewport$1(currentHovered)) {
+          return;
+        }
+
+        var selectedItems = mapValuesToArray(selectedItemsMapRef.current);
+        var hoveredIsSelected = selectedItems.some(function (item) {
+          return item.id === currentHovered.id;
+        }); // Top Layer에서는 hover된 마커만 hover 스타일로 그리기
+        // renderEvent가 있으면: base는 그리지 않고 event만 그리기 (hover 스타일 적용)
+        // renderEvent가 없으면: base를 hover 스타일로 그리기
+
+        if (renderEvent) {
+          // renderEvent가 있으면 hover 스타일로만 그리기
+          var hoverSelectedItems = hoveredIsSelected ? [currentHovered] : [];
+          renderEvent({
+            ctx: ctx,
+            hoveredItem: currentHovered,
+            selectedItem: selectedItemRef.current,
+            selectedItems: hoverSelectedItems,
+            topOnHover: topOnHover,
+            utils: renderUtils
+          });
+        } else {
+          // renderEvent가 없으면 base를 hover 스타일로 그리기
+          renderBase({
+            ctx: ctx,
+            hoveredItem: currentHovered,
+            items: [currentHovered],
+            selectedIds: selectedIdsRef.current,
+            utils: renderUtils
+          });
+        }
+      });
       layer.batchDraw();
     }; // 전체 즉시 렌더링
 
@@ -4165,11 +4301,19 @@
 
       buildSpatialIndex$1();
       doRenderBase();
-      doRenderEvent();
+      doRenderEvent(); // 메인 stage의 transform을 topStage에도 동기화
+
+      if (topStageZIndex !== undefined && topContainerRef.current && containerRef.current) {
+        topContainerRef.current.style.transform = containerRef.current.style.transform || '';
+      }
+
+      if (topStageZIndex !== undefined && topOnHover) {
+        doRenderTop();
+      }
     }; // 지도 이벤트 핸들러 생성
 
 
-    var _g = createMapEventHandlers({
+    var _h = createMapEventHandlers({
       accumTranslateRef: accumTranslateRef,
       boundingBoxCacheRef: boundingBoxCacheRef,
       containerRef: containerRef,
@@ -4180,19 +4324,23 @@
       prevCenterOffsetRef: prevCenterOffsetRef,
       renderAllImmediate: renderAllImmediate
     }),
-        handleIdle = _g.handleIdle,
-        handleZoomStart = _g.handleZoomStart,
-        handleZoomEnd = _g.handleZoomEnd,
-        handleCenterChanged = _g.handleCenterChanged,
-        handleDragStartShared = _g.handleDragStart,
-        handleDragEndShared = _g.handleDragEnd;
+        handleIdle = _h.handleIdle,
+        handleZoomStart = _h.handleZoomStart,
+        handleZoomEnd = _h.handleZoomEnd,
+        handleCenterChanged = _h.handleCenterChanged,
+        handleDragStartShared = _h.handleDragStart,
+        handleDragEndShared = _h.handleDragEnd;
 
     var handleDragStart = function () {
       handleDragStartShared(); // 드래그 시작 시점의 hover 상태 저장
 
       dragStartHoveredItemRef.current = hoveredItemRef.current;
       draggingRef.current = true;
-      controller.setMapCursor('grabbing');
+      controller.setMapCursor('grabbing'); // 메인 stage의 transform을 topStage에도 동기화
+
+      if (topStageZIndex !== undefined && topContainerRef.current && containerRef.current) {
+        topContainerRef.current.style.transform = containerRef.current.style.transform || '';
+      }
     };
 
     var handleDragEnd = function () {
@@ -4200,7 +4348,11 @@
       draggingRef.current = false; // 드래그 종료 후 hover 상태 초기화 (다음 MOUSEMOVE에서 업데이트됨)
 
       dragStartHoveredItemRef.current = null;
-      controller.setMapCursor('grab');
+      controller.setMapCursor('grab'); // 메인 stage의 transform을 topStage에도 동기화
+
+      if (topStageZIndex !== undefined && topContainerRef.current && containerRef.current) {
+        topContainerRef.current.style.transform = containerRef.current.style.transform || '';
+      }
     }; // Hit Test: 특정 좌표의 마커 찾기
 
 
@@ -4243,7 +4395,19 @@
         controller.setMapCursor(hoveredData ? 'pointer' : 'grab');
       }
 
-      if (renderEvent) {
+      if (topStageZIndex !== undefined && topOnHover) {
+        // topStageZIndex가 설정되고 topOnHover가 true인 경우 Top Layer에서 hover된 항목 렌더링
+        // base 레이어와 event 레이어도 업데이트 (hover된 항목 제외)
+        doRenderBase();
+        doRenderEvent();
+        doRenderTop();
+      } else if (renderEvent) {
+        // renderEvent가 있을 때는 Event Layer 업데이트
+        // topOnHover가 false일 때는 Base Layer에서도 hover 스타일을 적용해야 하므로 Base Layer도 업데이트
+        if (!topOnHover) {
+          doRenderBase();
+        }
+
         doRenderEvent();
       } else if (topOnHover) {
         doRenderBase();
@@ -4280,6 +4444,10 @@
 
       doRenderBase();
       doRenderEvent();
+
+      if (topStageZIndex !== undefined && topOnHover) {
+        doRenderTop();
+      }
     }; // 클릭 이벤트 핸들러
 
 
@@ -4340,13 +4508,33 @@
       if (!prevHovered) return;
       hoveredItemRef.current = null;
       controller.setMapCursor('grab');
-      doRenderEvent();
+
+      if (topStageZIndex !== undefined && topOnHover) {
+        // base 레이어와 event 레이어도 업데이트 (hover된 항목 다시 표시)
+        doRenderBase();
+        doRenderEvent();
+        doRenderTop();
+      } else if (renderEvent) {
+        // renderEvent가 있을 때는 Event Layer 업데이트
+        // topOnHover가 false일 때는 Base Layer에서도 hover 스타일을 제거해야 하므로 Base Layer도 업데이트
+        if (!topOnHover) {
+          doRenderBase();
+        }
+
+        doRenderEvent();
+      }
+
       onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(prevHovered);
     }; // DOM 초기화
 
 
     React.useEffect(function () {
-      divElement.style.width = 'fit-content';
+      divElement.style.width = 'fit-content'; // Top Layer용 div도 초기화 (topStageZIndex가 설정되고 topOnHover가 true인 경우)
+
+      if (topStageZIndex !== undefined && topOnHover) {
+        topDivElement.style.width = 'fit-content';
+      }
+
       return function () {
         if (!markerRef.current) return;
         controller.clearDrawable(markerRef.current);
@@ -4364,19 +4552,18 @@
 
       if (markerRef.current) {
         controller.updateMarker(markerRef.current, markerOptions);
-        return;
-      }
-
-      markerRef.current = new Marker(markerOptions);
-      markerRef.current.element = divElement;
-      controller.createMarker(markerRef.current);
+      } else {
+        markerRef.current = new Marker(markerOptions);
+        markerRef.current.element = divElement;
+        controller.createMarker(markerRef.current);
 
-      if (divElement.parentElement) {
-        divElement.parentElement.style.pointerEvents = 'none';
-      }
+        if (divElement.parentElement) {
+          divElement.parentElement.style.pointerEvents = 'none';
+        }
 
-      if (options.zIndex !== undefined) {
-        controller.setMarkerZIndex(markerRef.current, options.zIndex);
+        if (options.zIndex !== undefined) {
+          controller.setMarkerZIndex(markerRef.current, options.zIndex);
+        }
       }
     }, [options]); // Konva 초기화 및 이벤트 리스너 등록
 
@@ -4530,19 +4717,179 @@
 
         renderAllImmediate();
       }
-    }, [enableViewportCulling]); // 외부 selectedItems 동기화
+    }, [enableViewportCulling]); // Top Layer용 별도 캔버스 DOM 생성 (topStageZIndex가 설정되고 topOnHover가 true인 경우)
+
+    React.useEffect(function () {
+      if (topStageZIndex === undefined || !topOnHover) return;
+      if (!topContainerRef.current) return;
+      var mapDiv = controller.mapDivElement; // Top Layer용 div 요소 설정
+
+      topDivElement.style.width = 'fit-content';
+      var bounds = controller.getCurrBounds();
+
+      var topMarkerOptions = tslib.__assign({
+        position: bounds.nw,
+        zIndex: topStageZIndex
+      }, options); // Top Layer용 Marker 생성 (zIndex: topStageZIndex로 DOM 마커보다 위에 위치)
+
+
+      var topMarker = new Marker(topMarkerOptions);
+      topMarker.element = topDivElement;
+      controller.createMarker(topMarker);
+      topMarkerRef.current = topMarker;
+
+      if (topDivElement.parentElement) {
+        topDivElement.parentElement.style.pointerEvents = 'none';
+      } // Top Layer Marker의 zIndex 명시적으로 설정
+
+
+      controller.setMarkerZIndex(topMarker, topStageZIndex); // Top Layer용 Konva Stage 생성
+
+      var topStage = new Konva__default["default"].Stage({
+        container: topContainerRef.current,
+        height: mapDiv.offsetHeight,
+        width: mapDiv.offsetWidth
+      });
+      topStageRef.current = topStage;
+      var topLayer = new Konva__default["default"].Layer({
+        listening: false
+      });
+      topLayerRef.current = topLayer;
+      topStage.add(topLayer); // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
+
+      var topResizeRafId = null;
+      var topResizeObserver = new ResizeObserver(function () {
+        if (topResizeRafId !== null) {
+          cancelAnimationFrame(topResizeRafId);
+        }
+
+        topResizeRafId = requestAnimationFrame(function () {
+          topStage.width(mapDiv.offsetWidth);
+          topStage.height(mapDiv.offsetHeight);
+          doRenderTop();
+          topResizeRafId = null;
+        });
+      });
+      topResizeObserver.observe(mapDiv); // topMarker position 업데이트 함수
+
+      var updateTopMarkerPosition = function () {
+        if (topMarkerRef.current && markerRef.current) {
+          var currentBounds = controller.getCurrBounds();
+
+          var updatedOptions = tslib.__assign(tslib.__assign({}, options), {
+            position: currentBounds.nw,
+            zIndex: topStageZIndex
+          });
+
+          controller.updateMarker(topMarkerRef.current, updatedOptions); // zIndex 명시적으로 설정
+
+          controller.setMarkerZIndex(topMarkerRef.current, topStageZIndex);
+        }
+      }; // 지도 이벤트 핸들러 등록 (topStage 업데이트용)
+
+
+      var handleTopIdle = function () {
+        // topMarker의 position을 메인 marker와 동일하게 업데이트
+        updateTopMarkerPosition(); // topStage 크기 업데이트
+
+        if (topStageRef.current) {
+          topStageRef.current.width(mapDiv.offsetWidth);
+          topStageRef.current.height(mapDiv.offsetHeight);
+        } // 메인 stage의 transform을 topStage에도 동기화
+
+
+        if (topContainerRef.current && containerRef.current) {
+          topContainerRef.current.style.transform = containerRef.current.style.transform || '';
+        }
+
+        doRenderTop();
+      };
+
+      var handleTopZoomStart = function () {
+        // 메인 stage의 transform을 topStage에도 동기화
+        if (topContainerRef.current && containerRef.current) {
+          topContainerRef.current.style.transform = containerRef.current.style.transform || '';
+        }
+
+        doRenderTop();
+      };
+
+      var handleTopZoomEnd = function () {
+        // 메인 stage의 transform을 topStage에도 동기화
+        if (topContainerRef.current && containerRef.current) {
+          topContainerRef.current.style.transform = containerRef.current.style.transform || '';
+        }
+
+        doRenderTop();
+      };
+
+      var handleTopCenterChanged = function () {
+        // topMarker의 position을 메인 marker와 동일하게 업데이트
+        updateTopMarkerPosition(); // topStage 크기 업데이트
+
+        if (topStageRef.current) {
+          topStageRef.current.width(mapDiv.offsetWidth);
+          topStageRef.current.height(mapDiv.offsetHeight);
+        } // 메인 stage의 transform을 topStage에도 동기화
+
+
+        if (topContainerRef.current && containerRef.current) {
+          topContainerRef.current.style.transform = containerRef.current.style.transform || '';
+        }
+
+        doRenderTop();
+      };
+
+      controller.addEventListener('IDLE', handleTopIdle);
+      controller.addEventListener('ZOOMSTART', handleTopZoomStart);
+      controller.addEventListener('ZOOM_CHANGED', handleTopZoomEnd);
+      controller.addEventListener('CENTER_CHANGED', handleTopCenterChanged);
+      doRenderTop();
+      return function () {
+        if (topResizeRafId !== null) {
+          cancelAnimationFrame(topResizeRafId);
+        }
+
+        topResizeObserver.disconnect();
+        controller.removeEventListener('IDLE', handleTopIdle);
+        controller.removeEventListener('ZOOMSTART', handleTopZoomStart);
+        controller.removeEventListener('ZOOM_CHANGED', handleTopZoomEnd);
+        controller.removeEventListener('CENTER_CHANGED', handleTopCenterChanged);
+
+        if (topLayerRef.current) {
+          topLayerRef.current.destroyChildren();
+        }
+
+        if (topStageRef.current) {
+          topStageRef.current.destroy();
+        }
+
+        if (topMarkerRef.current) {
+          controller.clearDrawable(topMarkerRef.current);
+          topMarkerRef.current = undefined;
+        }
+      };
+    }, [topStageZIndex, renderEvent, options]); // 외부 selectedItems 동기화
 
     React.useEffect(function () {
       if (!stageRef.current) return;
       syncExternalSelectedItems(externalSelectedItems, selectedIdsRef, selectedItemsMapRef);
       doRenderBase();
       doRenderEvent();
+
+      if (topStageZIndex !== undefined && topOnHover) {
+        doRenderTop();
+      }
     }, [externalSelectedItems]); // 외부 selectedItem 변경 시 Event Layer 리렌더링
 
     React.useEffect(function () {
       if (!stageRef.current) return;
       selectedItemRef.current = externalSelectedItem;
       doRenderEvent();
+
+      if (topStageZIndex !== undefined && topOnHover) {
+        doRenderTop();
+      }
     }, [externalSelectedItem]); // 데이터 변경 시 렌더링 (캐시 정리 및 선택 상태 동기화)
 
     React.useEffect(function () {
@@ -4563,14 +4910,21 @@
       selectedItemsMapRef.current = syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current);
       renderAllImmediate();
     }, [data]);
-    return reactDom.createPortal(React__default["default"].createElement("div", {
+    return React__default["default"].createElement(React__default["default"].Fragment, null, reactDom.createPortal(React__default["default"].createElement("div", {
       ref: containerRef,
       style: {
         height: '100%',
         position: 'absolute',
         width: '100%'
       }
-    }), divElement);
+    }), divElement), topStageZIndex !== undefined && reactDom.createPortal(React__default["default"].createElement("div", {
+      ref: topContainerRef,
+      style: {
+        height: '100%',
+        position: 'absolute',
+        width: '100%'
+      }
+    }), topDivElement));
   };
 
   /* eslint-disable no-restricted-syntax */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mint-ui/map",
-  "version": "1.2.0-test.62",
+  "version": "1.2.0-test.63",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "browser": "./dist/index.umd.js",