@mint-ui/map 1.2.0-test.65 → 1.2.0-test.67

package/dist/components/mint-map/core/advanced/CanvasMarkerLayer/CanvasMarkerLayer.d.ts

@@ -1,128 +1,8 @@
 /// <reference types="react" />
-import { MarkerOptions } from '../../../types';
-import { CanvasData, CustomRenderBase, CustomRenderEvent } from '../shared';
+import type { CanvasMarkerLayerProps } from './types';
 export { CanvasDataType, CanvasProvider, LRUCache, SpatialHashGrid } from '../shared';
 export type { CanvasData, CanvasOption, CustomRenderBase, CustomRenderEvent, MarkerBoundingBox, RenderBaseParams, RenderEventParams, RenderUtils } from '../shared';
-/**
- * CanvasMarkerLayer Props (renderEvent가 없는 경우 - 인터랙션 불가)
- *
- * @template T 마커 데이터의 추가 속성 타입
- */
-interface CanvasMarkerLayerPropsWithoutEvent<T> extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
-    /** 렌더링할 마커 데이터 배열 */
-    data: CanvasData<T>[];
-    /** 뷰포트 컬링 활성화 여부 (기본값: false) */
-    enableViewportCulling?: boolean;
-    /** 뷰포트 컬링 여유 공간 (픽셀 단위, 기본값: 100) */
-    cullingMargin?: number;
-    /** LRU 캐시 최대 크기 (기본값: 10000) */
-    maxCacheSize?: number;
-    /** Base Layer 렌더링 함수 (필수) */
-    renderBase: CustomRenderBase<T>;
-    /** Event Layer 렌더링 함수가 없으면 인터랙션 관련 props 사용 불가 */
-    renderEvent?: never;
-    /** 인터랙션 관련 props는 renderEvent가 있을 때만 사용 가능 */
-    onClick?: never;
-    onMouseOver?: never;
-    onMouseOut?: never;
-    enableMultiSelect?: never;
-    topOnHover?: never;
-    selectedItems?: never;
-    selectedItem?: never;
-    disableInteraction?: never;
-    topStageZIndex?: never;
-}
-/**
- * CanvasMarkerLayer Props (renderEvent가 있는 경우 - 인터랙션 가능)
- * topStageZIndex가 없을 때
- *
- * @template T 마커 데이터의 추가 속성 타입
- */
-interface CanvasMarkerLayerPropsWithEventBase<T> extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
-    /** 렌더링할 마커 데이터 배열 */
-    data: CanvasData<T>[];
-    /** 마커 클릭 시 호출되는 콜백 함수 */
-    onClick?: (payload: CanvasData<T>, selectedIds: Set<string>) => void;
-    /** 마커에 마우스 오버 시 호출되는 콜백 함수 */
-    onMouseOver?: (payload: CanvasData<T>) => void;
-    /** 마커에서 마우스 아웃 시 호출되는 콜백 함수 */
-    onMouseOut?: (payload: CanvasData<T>) => void;
-    /** 다중 선택 활성화 여부 (기본값: false) */
-    enableMultiSelect?: boolean;
-    /** hover 시 마커를 최상단으로 표시할지 여부 (기본값: false) */
-    topOnHover?: boolean;
-    /** 뷰포트 컬링 활성화 여부 (기본값: false) */
-    enableViewportCulling?: boolean;
-    /** 뷰포트 컬링 여유 공간 (픽셀 단위, 기본값: 100) */
-    cullingMargin?: number;
-    /** LRU 캐시 최대 크기 (기본값: 10000) */
-    maxCacheSize?: number;
-    /** 외부에서 제어하는 선택된 항목 배열 */
-    selectedItems?: CanvasData<T>[];
-    /** 외부에서 전달된 단일 선택 아이템 */
-    selectedItem?: CanvasData<T> | null;
-    /** 상호작용 비활성화 여부 (기본값: false) */
-    disableInteraction?: boolean;
-    /** Base Layer 렌더링 함수 (필수) */
-    renderBase: CustomRenderBase<T>;
-    /** Event Layer 렌더링 함수 (필수 - 인터랙션 사용 시) */
-    renderEvent: CustomRenderEvent<T>;
-    /** Top Layer의 zIndex (hover된 항목을 최상단에 렌더링하기 위한 레이어, topOnHover가 true일 때만 사용 가능) */
-    topStageZIndex?: never;
-}
-/**
- * CanvasMarkerLayer Props (renderEvent가 있는 경우 - 인터랙션 가능)
- * topStageZIndex가 있을 때 (topOnHover가 반드시 true여야 함)
- *
- * @template T 마커 데이터의 추가 속성 타입
- */
-interface CanvasMarkerLayerPropsWithEventWithTopStage<T> extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
-    /** 렌더링할 마커 데이터 배열 */
-    data: CanvasData<T>[];
-    /** 마커 클릭 시 호출되는 콜백 함수 */
-    onClick?: (payload: CanvasData<T>, selectedIds: Set<string>) => void;
-    /** 마커에 마우스 오버 시 호출되는 콜백 함수 */
-    onMouseOver?: (payload: CanvasData<T>) => void;
-    /** 마커에서 마우스 아웃 시 호출되는 콜백 함수 */
-    onMouseOut?: (payload: CanvasData<T>) => void;
-    /** 다중 선택 활성화 여부 (기본값: false) */
-    enableMultiSelect?: boolean;
-    /** hover 시 마커를 최상단으로 표시할지 여부 (topStageZIndex 사용 시 반드시 true) */
-    topOnHover: true;
-    /** 뷰포트 컬링 활성화 여부 (기본값: false) */
-    enableViewportCulling?: boolean;
-    /** 뷰포트 컬링 여유 공간 (픽셀 단위, 기본값: 100) */
-    cullingMargin?: number;
-    /** LRU 캐시 최대 크기 (기본값: 10000) */
-    maxCacheSize?: number;
-    /** 외부에서 제어하는 선택된 항목 배열 */
-    selectedItems?: CanvasData<T>[];
-    /** 외부에서 전달된 단일 선택 아이템 */
-    selectedItem?: CanvasData<T> | null;
-    /** 상호작용 비활성화 여부 (기본값: false) */
-    disableInteraction?: boolean;
-    /** Base Layer 렌더링 함수 (필수) */
-    renderBase: CustomRenderBase<T>;
-    /** Event Layer 렌더링 함수 (필수 - 인터랙션 사용 시) */
-    renderEvent: CustomRenderEvent<T>;
-    /** Top Layer의 zIndex (hover된 항목을 최상단에 렌더링하기 위한 레이어, topOnHover가 true일 때만 사용 가능) */
-    topStageZIndex: number;
-}
-/**
- * CanvasMarkerLayer Props (renderEvent가 있는 경우 - 인터랙션 가능)
- *
- * @template T 마커 데이터의 추가 속성 타입
- */
-declare type CanvasMarkerLayerPropsWithEvent<T> = CanvasMarkerLayerPropsWithEventBase<T> | CanvasMarkerLayerPropsWithEventWithTopStage<T>;
-/**
- * CanvasMarkerLayer Props
- *
- * renderEvent가 없으면 인터랙션 관련 props를 사용할 수 없습니다.
- * renderEvent가 있으면 모든 인터랙션 관련 props를 사용할 수 있습니다.
- *
- * @template T 마커 데이터의 추가 속성 타입
- */
-export declare type CanvasMarkerLayerProps<T> = CanvasMarkerLayerPropsWithoutEvent<T> | CanvasMarkerLayerPropsWithEvent<T>;
+export type { CanvasMarkerLayerProps, CanvasMarkerLayerPropsWithEvent, CanvasMarkerLayerPropsWithEventWithoutSelection, CanvasMarkerLayerPropsWithEventWithSelectedItem, CanvasMarkerLayerPropsWithEventWithSelectedItems, CanvasMarkerLayerPropsWithEventWithTopStageWithoutSelection, CanvasMarkerLayerPropsWithEventWithTopStageWithSelectedItem, CanvasMarkerLayerPropsWithEventWithTopStageWithSelectedItems, CanvasMarkerLayerPropsWithoutEvent } from './types';
 declare const CanvasMarkerLayer: <T>(props: CanvasMarkerLayerProps<T>) => JSX.Element;
 /**
  * CanvasMarkerLayer - Konva 기반 고성능 마커 렌더링 컴포넌트

package/dist/components/mint-map/core/advanced/CanvasMarkerLayer/CanvasMarkerLayer.js

@@ -40,32 +40,26 @@ var CanvasMarkerLayer = function (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를 사용하지 못하도록 제한
+      rawTopStageZIndex = _d.topStageZIndex; // topStageZIndex가 있으면 hover 최상단 표시 활성화, 없으면 비활성화 (성능 우선)
 
 
-  var topStageZIndex = topOnHover && rawTopStageZIndex !== undefined ? rawTopStageZIndex : undefined;
+  var topStageZIndex = rawTopStageZIndex;
   var controller = MintMapProvider.useMintMapController();
   var context$1 = context.useCanvasContext();
   var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // DOM Refs
@@ -170,49 +164,20 @@ var CanvasMarkerLayer = function (props) {
         name: 'base-render-shape',
         perfectDrawEnabled: false,
         sceneFunc: function (konvaContext) {
-          var ctx = konvaContext;
-          var hovered = hoveredItemRef.current; // 뷰포트 컬링: 화면에 보이는 항목만 필터링
+          var ctx = konvaContext; // 뷰포트 컬링: 화면에 보이는 항목만 필터링
 
           var visibleItems = enableViewportCullingRef.current ? dataRef.current.filter(function (item) {
             return isInViewport(item);
-          }) : dataRef.current; // topStageZIndex가 설정되고 topOnHover가 true인 경우 hover된 항목은 Top Layer에서 처리
-          // topOnHover 옵션: hover된 항목을 나중에 그려서 최상위에 표시
-
-          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();
+          }) : dataRef.current; // Base Layer는 기본 마커만 렌더링 (hover된 항목도 포함)
+          // hover 스타일은 Event Layer와 Top Layer에서 덧그려짐
+
           renderBase({
             ctx: ctx,
-            hoveredItem: hovered,
+            hoveredItem: null,
             items: visibleItems,
-            selectedIds: baseSelectedIds,
+            selectedIds: new Set(),
             utils: renderUtils
-          }); // topStageZIndex가 설정된 경우 hover된 항목은 Top Layer에서 처리하므로 여기서는 스킵
-          // hover된 항목을 마지막에 렌더링하여 최상위에 표시
-
-          if (topStageZIndex === undefined && topOnHover && !renderEvent && hovered) {
-            if (!enableViewportCullingRef.current || isInViewport(hovered)) {
-              renderBase({
-                ctx: ctx,
-                hoveredItem: hovered,
-                items: [hovered],
-                selectedIds: selectedIdsRef.current,
-                utils: renderUtils
-              });
-            }
-          }
+          });
         }
       });
       layer.add(shape);
@@ -236,67 +201,30 @@ var CanvasMarkerLayer = function (props) {
         sceneFunc: function (konvaContext) {
           var ctx = konvaContext;
           var selectedItems = helpers.mapValuesToArray(selectedItemsMapRef.current);
-          var hovered = hoveredItemRef.current; // topStageZIndex가 설정되고 topOnHover가 true이면 hover된 항목은 Top Layer에서 처리
-          // event 레이어에서는 hover된 항목을 완전히 제외하고 선택된 항목만 렌더링
-
-          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,
-              selectedItem: selectedItemRef.current,
-              selectedItems: selectedItems.filter(function (item) {
-                return item.id !== hovered.id;
-              }),
-              topOnHover: topOnHover,
-              utils: renderUtils
-            });
-
-            if (!enableViewportCullingRef.current || isInViewport(hovered)) {
-              var hoveredIsSelected = selectedItems.some(function (item) {
-                return item.id === hovered.id;
-              });
-              var hoverSelectedItems = hoveredIsSelected ? [hovered] : [];
-              renderEvent({
-                ctx: ctx,
-                hoveredItem: hovered,
-                selectedItem: selectedItemRef.current,
-                selectedItems: hoverSelectedItems,
-                topOnHover: topOnHover,
-                utils: renderUtils
-              });
+          var hovered = hoveredItemRef.current; // selectedItem이 있으면 selectedItems 배열에 포함 (renderMarkerEvent가 selectedItems만 사용하므로)
+
+          if (selectedItemRef.current) {
+            // selectedItem이 이미 selectedItems에 포함되어 있지 않으면 추가
+            var selectedItemId_1 = selectedItemRef.current.id;
+
+            if (!selectedItems.some(function (item) {
+              return item.id === selectedItemId_1;
+            })) {
+              selectedItems = tslib.__spreadArray(tslib.__spreadArray([], selectedItems, true), [selectedItemRef.current], false);
             }
-          } 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: finalSelectedItems,
-              topOnHover: topOnHover,
-              utils: renderUtils
-            });
-          }
+          } // Event Layer는 hover 효과 및 선택 상태를 덧그림
+          // topStageZIndex가 있으면 hover된 항목은 Top Stage에서도 처리되지만,
+          // Event Layer에서도 hover 스타일을 덧그려서 Base Layer 위에 표시됨
+
+
+          renderEvent({
+            ctx: ctx,
+            hasTopStage: topStageZIndex !== undefined,
+            hoveredItem: hovered,
+            selectedItem: selectedItemRef.current,
+            selectedItems: selectedItems,
+            utils: renderUtils
+          });
         }
       });
       layer.add(shape);
@@ -309,7 +237,7 @@ var CanvasMarkerLayer = function (props) {
   var doRenderTop = function () {
     var stage = topStageRef.current;
     var layer = topLayerRef.current;
-    if (!stage || !layer || topStageZIndex === undefined || !topOnHover) return;
+    if (!stage || !layer || topStageZIndex === undefined) return;
     var hovered = hoveredItemRef.current;
     var shape = layer.findOne('.top-render-shape'); // hover된 항목이 없으면 shape 제거
 
@@ -337,6 +265,8 @@ var CanvasMarkerLayer = function (props) {
 
 
     shape.sceneFunc(function (konvaContext) {
+      var _a;
+
       var ctx = konvaContext;
       var currentHovered = hoveredItemRef.current; // hover된 항목이 없으면 아무것도 그리지 않음
 
@@ -346,10 +276,11 @@ var CanvasMarkerLayer = function (props) {
         return;
       }
 
-      var selectedItems = helpers.mapValuesToArray(selectedItemsMapRef.current);
+      var selectedItems = helpers.mapValuesToArray(selectedItemsMapRef.current); // selectedItem이 있으면 hover된 항목이 선택되었는지 확인
+
       var hoveredIsSelected = selectedItems.some(function (item) {
         return item.id === currentHovered.id;
-      }); // Top Layer에서는 hover된 마커만 hover 스타일로 그리기
+      }) || ((_a = selectedItemRef.current) === null || _a === void 0 ? void 0 : _a.id) === currentHovered.id; // Top Layer에서는 hover된 마커만 hover 스타일로 그리기
       // renderEvent가 있으면: base는 그리지 않고 event만 그리기 (hover 스타일 적용)
       // renderEvent가 없으면: base를 hover 스타일로 그리기
 
@@ -358,10 +289,10 @@ var CanvasMarkerLayer = function (props) {
         var hoverSelectedItems = hoveredIsSelected ? [currentHovered] : [];
         renderEvent({
           ctx: ctx,
+          hasTopStage: true,
           hoveredItem: currentHovered,
           selectedItem: selectedItemRef.current,
           selectedItems: hoverSelectedItems,
-          topOnHover: topOnHover,
           utils: renderUtils
         });
       } else {
@@ -392,13 +323,13 @@ var CanvasMarkerLayer = function (props) {
       topContainerRef.current.style.transform = containerRef.current.style.transform || '';
     }
 
-    if (topStageZIndex !== undefined && topOnHover) {
+    if (topStageZIndex !== undefined) {
       doRenderTop();
     }
   }; // 지도 이벤트 핸들러 생성
 
 
-  var _h = hooks.createMapEventHandlers({
+  var _f = hooks.createMapEventHandlers({
     accumTranslateRef: accumTranslateRef,
     boundingBoxCacheRef: boundingBoxCacheRef,
     containerRef: containerRef,
@@ -409,12 +340,30 @@ var CanvasMarkerLayer = function (props) {
     prevCenterOffsetRef: prevCenterOffsetRef,
     renderAllImmediate: renderAllImmediate
   }),
-      handleIdle = _h.handleIdle,
-      handleZoomStart = _h.handleZoomStart,
-      handleZoomEnd = _h.handleZoomEnd,
-      handleCenterChanged = _h.handleCenterChanged,
-      handleDragStartShared = _h.handleDragStart,
-      handleDragEndShared = _h.handleDragEnd;
+      handleIdleShared = _f.handleIdle,
+      handleZoomStart = _f.handleZoomStart,
+      handleZoomEnd = _f.handleZoomEnd,
+      handleCenterChangedShared = _f.handleCenterChanged,
+      handleDragStartShared = _f.handleDragStart,
+      handleDragEndShared = _f.handleDragEnd; // handleIdle 래핑: topStage transform 제거 추가
+
+
+  var handleIdle = function () {
+    handleIdleShared(); // 드래그 완료 시 topStage의 transform도 제거 (메인 stage와 동기화)
+
+    if (topStageZIndex !== undefined && topContainerRef.current) {
+      topContainerRef.current.style.transform = '';
+    }
+  }; // handleCenterChanged 래핑: topStage transform 동기화 추가
+
+
+  var handleCenterChanged = function () {
+    handleCenterChangedShared(); // 드래그 중 메인 stage의 transform을 topStage에도 동기화 (반대 방향 이동 방지)
+
+    if (topStageZIndex !== undefined && topContainerRef.current && containerRef.current) {
+      topContainerRef.current.style.transform = containerRef.current.style.transform || '';
+    }
+  };
 
   var handleDragStart = function () {
     handleDragStartShared(); // 드래그 시작 시점의 hover 상태 저장
@@ -442,8 +391,8 @@ var CanvasMarkerLayer = function (props) {
 
 
   var findData = function (offset) {
-    // topOnHover 옵션이 켜져 있으면 hover된 항목을 최우선으로 확인
-    if (topOnHover && hoveredItemRef.current) {
+    // topStageZIndex가 설정되어 있으면 hover된 항목을 최우선으로 확인
+    if (topStageZIndex !== undefined && hoveredItemRef.current) {
       var hovered = hoveredItemRef.current;
 
       if (utils.isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {
@@ -480,57 +429,40 @@ var CanvasMarkerLayer = function (props) {
       controller.setMapCursor(hoveredData ? 'pointer' : 'grab');
     }
 
-    if (topStageZIndex !== undefined && topOnHover) {
-      // topStageZIndex가 설정되고 topOnHover가 true인 경우 Top Layer에서 hover된 항목 렌더링
-      // base 레이어와 event 레이어도 업데이트 (hover된 항목 제외)
-      doRenderBase();
+    if (topStageZIndex !== undefined) {
+      // topStageZIndex가 설정된 경우 Top Layer에서 hover된 항목 렌더링
+      // Base Layer는 모든 마커를 포함하므로 hover 상태 변경 시 재렌더링 불필요
+      // Event Layer는 hover 스타일과 선택된 항목을 렌더링하므로 업데이트 필요
       doRenderEvent();
       doRenderTop();
     } else if (renderEvent) {
-      // renderEvent가 있을 때는 Event Layer 업데이트
-      // topOnHover가 false일 때는 Base Layer에서도 hover 스타일을 적용해야 하므로 Base Layer도 업데이트
-      if (!topOnHover) {
-        doRenderBase();
-      }
-
+      // renderEvent가 있을 때는 Event Layer만 업데이트
+      // topStageZIndex가 없으면 Base Layer는 정적이므로 재렌더링 불필요 (성능 우선)
+      // hover 효과는 Event Layer에서만 처리하면 됨
       doRenderEvent();
-    } else if (topOnHover) {
-      doRenderBase();
     }
-  }; // 클릭 처리: 선택 상태 업데이트
+  }; // 클릭 처리: 선택 상태 업데이트 (단일 선택만 지원)
 
 
   var handleLocalClick = function (clickedData) {
-    if (enableMultiSelect) {
-      var newSelected = new Set(selectedIdsRef.current);
+    var newSelected = new Set();
 
-      if (newSelected.has(clickedData.id)) {
-        newSelected.delete(clickedData.id);
-        selectedItemsMapRef.current.delete(clickedData.id);
-      } else {
-        newSelected.add(clickedData.id);
-        selectedItemsMapRef.current.set(clickedData.id, clickedData);
-      }
+    if (!selectedIdsRef.current.has(clickedData.id)) {
+      newSelected.add(clickedData.id);
+      selectedItemsMapRef.current.clear();
+      selectedItemsMapRef.current.set(clickedData.id, clickedData); // externalSelectedItem이 있을 때를 대비해 selectedItemRef도 업데이트
 
-      selectedIdsRef.current = newSelected;
+      selectedItemRef.current = clickedData;
     } else {
-      var newSelected = new Set();
-
-      if (!selectedIdsRef.current.has(clickedData.id)) {
-        newSelected.add(clickedData.id);
-        selectedItemsMapRef.current.clear();
-        selectedItemsMapRef.current.set(clickedData.id, clickedData);
-      } else {
-        selectedItemsMapRef.current.clear();
-      }
-
-      selectedIdsRef.current = newSelected;
+      selectedItemsMapRef.current.clear();
+      selectedItemRef.current = null;
     }
 
-    doRenderBase();
+    selectedIdsRef.current = newSelected; // 선택 상태 변경은 Event Layer에서만 처리 (Base Layer는 정적이므로 재렌더링 불필요)
+
     doRenderEvent();
 
-    if (topStageZIndex !== undefined && topOnHover) {
+    if (topStageZIndex !== undefined) {
       doRenderTop();
     }
   }; // 클릭 이벤트 핸들러
@@ -594,18 +526,15 @@ var CanvasMarkerLayer = function (props) {
     hoveredItemRef.current = null;
     controller.setMapCursor('grab');
 
-    if (topStageZIndex !== undefined && topOnHover) {
-      // base 레이어와 event 레이어도 업데이트 (hover된 항목 다시 표시)
-      doRenderBase();
+    if (topStageZIndex !== undefined) {
+      // Base Layer는 모든 마커를 포함하므로 hover 상태 변경 시 재렌더링 불필요
+      // Event Layer는 hover 스타일과 선택된 항목을 렌더링하므로 업데이트 필요
       doRenderEvent();
       doRenderTop();
     } else if (renderEvent) {
-      // renderEvent가 있을 때는 Event Layer 업데이트
-      // topOnHover가 false일 때는 Base Layer에서도 hover 스타일을 제거해야 하므로 Base Layer도 업데이트
-      if (!topOnHover) {
-        doRenderBase();
-      }
-
+      // renderEvent가 있을 때는 Event Layer만 업데이트
+      // topStageZIndex가 없으면 Base Layer는 정적이므로 재렌더링 불필요 (성능 우선)
+      // hover 효과 제거는 Event Layer에서만 처리하면 됨
       doRenderEvent();
     }
 
@@ -614,9 +543,9 @@ var CanvasMarkerLayer = function (props) {
 
 
   React.useEffect(function () {
-    divElement.style.width = 'fit-content'; // Top Layer용 div도 초기화 (topStageZIndex가 설정되고 topOnHover가 true인 경우)
+    divElement.style.width = 'fit-content'; // Top Layer용 div도 초기화 (topStageZIndex가 설정된 경우)
 
-    if (topStageZIndex !== undefined && topOnHover) {
+    if (topStageZIndex !== undefined) {
       topDivElement.style.width = 'fit-content';
     }
 
@@ -802,10 +731,10 @@ var CanvasMarkerLayer = function (props) {
 
       renderAllImmediate();
     }
-  }, [enableViewportCulling]); // Top Layer용 별도 캔버스 DOM 생성 (topStageZIndex가 설정되고 topOnHover가 true인 경우)
+  }, [enableViewportCulling]); // Top Layer용 별도 캔버스 DOM 생성 (topStageZIndex가 설정된 경우)
 
   React.useEffect(function () {
-    if (topStageZIndex === undefined || !topOnHover) return;
+    if (topStageZIndex === undefined) return;
     if (!topContainerRef.current) return;
     var mapDiv = controller.mapDivElement; // Top Layer용 div 요소 설정
 
@@ -874,13 +803,14 @@ var CanvasMarkerLayer = function (props) {
 
 
     var handleTopIdle = function () {
-      // topMarker의 position을 메인 marker와 동일하게 업데이트
+      // 드래그 완료 후 topMarker의 position을 메인 marker와 동일하게 업데이트
       updateTopMarkerPosition(); // topStage 크기 업데이트
 
       if (topStageRef.current) {
         topStageRef.current.width(mapDiv.offsetWidth);
         topStageRef.current.height(mapDiv.offsetHeight);
-      } // 메인 stage의 transform을 topStage에도 동기화
+      } // 드래그 완료 후 transform은 handleIdle에서 제거되므로 여기서는 동기화만
+      // (handleIdle이 먼저 실행되어 transform을 제거한 후, 여기서 position 업데이트)
 
 
       if (topContainerRef.current && containerRef.current) {
@@ -909,13 +839,18 @@ var CanvasMarkerLayer = function (props) {
     };
 
     var handleTopCenterChanged = function () {
-      // topMarker의 position을 메인 marker와 동일하게 업데이트
-      updateTopMarkerPosition(); // topStage 크기 업데이트
+      // 드래그 중에는 transform만 동기화 (position 업데이트는 드래그 완료 후에만)
+      // 드래그 중에 position을 업데이트하면 transform과 충돌하여 반대 방향으로 이동하는 버그 발생
+      if (!draggingRef.current) {
+        // 드래그가 아닐 때만 topMarker의 position을 업데이트
+        updateTopMarkerPosition();
+      } // topStage 크기 업데이트
+
 
       if (topStageRef.current) {
         topStageRef.current.width(mapDiv.offsetWidth);
         topStageRef.current.height(mapDiv.offsetHeight);
-      } // 메인 stage의 transform을 topStage에도 동기화
+      } // 메인 stage의 transform을 topStage에도 동기화 (드래그 중 필수)
 
 
       if (topContainerRef.current && containerRef.current) {
@@ -957,25 +892,39 @@ var CanvasMarkerLayer = function (props) {
   }, [topStageZIndex, renderEvent, options]); // 외부 selectedItems 동기화
 
   React.useEffect(function () {
-    if (!stageRef.current) return;
-    hooks.syncExternalSelectedItems(externalSelectedItems, selectedIdsRef, selectedItemsMapRef);
-    doRenderBase();
+    if (!stageRef.current) return; // externalSelectedItems가 있으면 selectedItem은 무시 (공존 불가)
+
+    if (externalSelectedItems !== undefined) {
+      selectedItemRef.current = undefined;
+      hooks.syncExternalSelectedItems(externalSelectedItems, selectedIdsRef, selectedItemsMapRef);
+    } // 선택 상태 변경은 Event Layer에서만 처리 (Base Layer는 정적이므로 재렌더링 불필요)
+
+
     doRenderEvent();
 
-    if (topStageZIndex !== undefined && topOnHover) {
+    if (topStageZIndex !== undefined) {
       doRenderTop();
     }
   }, [externalSelectedItems]); // 외부 selectedItem 변경 시 Event Layer 리렌더링
 
   React.useEffect(function () {
-    if (!stageRef.current) return;
-    selectedItemRef.current = externalSelectedItem;
+    if (!stageRef.current) return; // externalSelectedItem이 있으면 selectedItems는 무시 (공존 불가)
+
+    if (externalSelectedItem !== undefined) {
+      selectedIdsRef.current.clear();
+      selectedItemsMapRef.current.clear();
+      selectedItemRef.current = externalSelectedItem;
+    } else if (externalSelectedItems === undefined) {
+      // 둘 다 없으면 selectedItemRef만 업데이트 (내부 클릭으로 선택한 항목은 유지)
+      selectedItemRef.current = externalSelectedItem;
+    }
+
     doRenderEvent();
 
-    if (topStageZIndex !== undefined && topOnHover) {
+    if (topStageZIndex !== undefined) {
       doRenderTop();
     }
-  }, [externalSelectedItem]); // 데이터 변경 시 렌더링 (캐시 정리 및 선택 상태 동기화)
+  }, [externalSelectedItem, externalSelectedItems]); // 데이터 변경 시 렌더링 (캐시 정리 및 선택 상태 동기화)
 
   React.useEffect(function () {
     if (!stageRef.current) return;

package/dist/components/mint-map/core/advanced/CanvasMarkerLayer/index.d.ts

@@ -1,3 +1,4 @@
 export * from '../shared';
+export * from './types';
 export * from './CanvasMarkerLayer';
 export { default as CanvasMarkerLayer } from './CanvasMarkerLayer';