@mint-ui/map 1.2.0-test.71 → 1.2.0-test.72

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

@@ -30,13 +30,12 @@ var CanvasMarkerLayer = function (props) {
   var data = props.data,
       _a = props.cullingMargin,
       cullingMargin = _a === void 0 ? performance.DEFAULT_CULLING_MARGIN : _a,
-      _b = props.maxCacheSize,
-      maxCacheSize = _b === void 0 ? performance.DEFAULT_MAX_CACHE_SIZE : _b,
+      onOptimizationDataUpdate = props.onOptimizationDataUpdate,
       renderBase = props.renderBase,
-      options = tslib.__rest(props, ["data", "cullingMargin", "maxCacheSize", "renderBase"]); // renderEvent가 있는 경우에만 인터랙션 관련 props 추출
+      options = tslib.__rest(props, ["data", "cullingMargin", "onOptimizationDataUpdate", "renderBase"]); // renderEvent가 있는 경우에만 인터랙션 관련 props 추출
 
 
-  var _c = hasRenderEvent && 'renderEvent' in props ? props : {
+  var _b = hasRenderEvent && 'renderEvent' in props ? props : {
     disableInteraction: false,
     onClick: undefined,
     onMouseOut: undefined,
@@ -46,15 +45,15 @@ var CanvasMarkerLayer = function (props) {
     selectedItems: undefined,
     topStageZIndex: undefined
   },
-      _d = _c.disableInteraction,
-      disableInteraction = _d === void 0 ? false : _d,
-      onClick = _c.onClick,
-      onMouseOut = _c.onMouseOut,
-      onMouseOver = _c.onMouseOver,
-      renderEvent = _c.renderEvent,
-      externalSelectedItem = _c.selectedItem,
-      externalSelectedItems = _c.selectedItems,
-      rawTopStageZIndex = _c.topStageZIndex; // topStageZIndex가 있으면 hover 최상단 표시 활성화, 없으면 비활성화 (성능 우선)
+      _c = _b.disableInteraction,
+      disableInteraction = _c === void 0 ? false : _c,
+      onClick = _b.onClick,
+      onMouseOut = _b.onMouseOut,
+      onMouseOver = _b.onMouseOver,
+      renderEvent = _b.renderEvent,
+      externalSelectedItem = _b.selectedItem,
+      externalSelectedItems = _b.selectedItems,
+      rawTopStageZIndex = _b.topStageZIndex; // topStageZIndex가 있으면 hover 최상단 표시 활성화, 없으면 비활성화 (성능 우선)
 
 
   var topStageZIndex = rawTopStageZIndex;
@@ -92,24 +91,30 @@ var CanvasMarkerLayer = function (props) {
     y: 0
   }); // 드래그 시작 시점의 hover 상태 저장 (드래그 중 hover 고정용)
 
-  var dragStartHoveredItemRef = React.useRef(null); // 성능 최적화 Refs
+  var dragStartHoveredItemRef = React.useRef(null); // 공유 캐시 사용 (모든 마커 레이어가 공유)
+
+  var sharedMarkerCache = context$1 === null || context$1 === void 0 ? void 0 : context$1.sharedMarkerCache;
+
+  if (!sharedMarkerCache) {
+    throw new Error('CanvasMarkerLayer must be used within CanvasProvider');
+  } // 성능 최적화 Refs
+
 
-  var offsetCacheRef = React.useRef(new performance.QueueCache(maxCacheSize));
   var spatialIndexRef = React.useRef(new performance.SpatialHashGrid(performance.SPATIAL_GRID_CELL_SIZE));
   var boundingBoxCacheRef = React.useRef(new Map());
   var viewportRef = React.useRef(null); // 뷰포트 영역 계산 (Viewport Culling용)
 
   var updateViewport = function () {
     viewport.updateViewport(stageRef.current, cullingMargin, viewportRef);
-  }; // 마커 좌표 변환 (위경도 → 화면 좌표, Queue 캐시 사용)
+  }; // 마커 좌표 변환 (위경도 → 화면 좌표, 공유 캐시 사용)
 
 
   var getOrComputeMarkerOffset = function (markerData) {
-    var cached = offsetCacheRef.current.get(markerData.id);
-    if (cached && !Array.isArray(cached)) return cached;
+    var cached = sharedMarkerCache.get(markerData.id);
+    if (cached) return cached;
     var result = utils.computeMarkerOffset(markerData, controller);
     if (!result) return null;
-    offsetCacheRef.current.set(markerData.id, result);
+    sharedMarkerCache.set(markerData.id, result);
     return result;
   }; // 마커 바운딩 박스 계산 (Viewport Culling 및 Hit Test용, 오프셋 지원)
 
@@ -306,6 +311,24 @@ var CanvasMarkerLayer = function (props) {
       }
     });
     layer.batchDraw();
+  }; // 최적화 데이터 업데이트 콜백 호출
+
+
+  var notifyOptimizationData = function () {
+    if (!onOptimizationDataUpdate) return; // 공유 캐시에서 마커 타입 항목만 필터링 (Offset 타입만)
+
+    var allCacheEntries = sharedMarkerCache.getAllEntries();
+    var cacheEntries = allCacheEntries.map(function (_a) {
+      var key = _a[0],
+          value = _a[1];
+      return [key, value];
+    });
+    var spatialGridCells = spatialIndexRef.current.getAllCells();
+    onOptimizationDataUpdate({
+      cacheEntries: cacheEntries,
+      cacheSize: sharedMarkerCache.size(),
+      spatialGridCells: spatialGridCells
+    });
   }; // 전체 즉시 렌더링
 
 
@@ -321,27 +344,32 @@ var CanvasMarkerLayer = function (props) {
 
     if (topStageZIndex !== undefined) {
       doRenderTop();
-    }
+    } // 최적화 데이터 업데이트 콜백 호출
+
+
+    notifyOptimizationData();
   }; // 지도 이벤트 핸들러 생성
 
 
-  var _e = hooks.createMapEventHandlers({
+  var _d = hooks.createMapEventHandlers({
     accumTranslateRef: accumTranslateRef,
     boundingBoxCacheRef: boundingBoxCacheRef,
+    clearCache: function () {
+      return sharedMarkerCache.clear();
+    },
     containerRef: containerRef,
     controller: controller,
     markerRef: markerRef,
-    offsetCacheRef: offsetCacheRef,
     options: options,
     prevCenterOffsetRef: prevCenterOffsetRef,
     renderAllImmediate: renderAllImmediate
   }),
-      handleIdleShared = _e.handleIdle,
-      handleZoomStart = _e.handleZoomStart,
-      handleZoomEnd = _e.handleZoomEnd,
-      handleCenterChangedShared = _e.handleCenterChanged,
-      handleDragStartShared = _e.handleDragStart,
-      handleDragEndShared = _e.handleDragEnd; // handleIdle 래핑: topStage transform 제거 추가
+      handleIdleShared = _d.handleIdle,
+      handleZoomStart = _d.handleZoomStart,
+      handleZoomEnd = _d.handleZoomEnd,
+      handleCenterChangedShared = _d.handleCenterChanged,
+      handleDragStartShared = _d.handleDragStart,
+      handleDragEndShared = _d.handleDragEnd; // handleIdle 래핑: topStage transform 제거 추가
 
 
   var handleIdle = function () {
@@ -606,7 +634,7 @@ var CanvasMarkerLayer = function (props) {
       resizeRafId = requestAnimationFrame(function () {
         stage.width(mapDiv.offsetWidth);
         stage.height(mapDiv.offsetHeight);
-        offsetCacheRef.current.clear();
+        sharedMarkerCache.clear();
         boundingBoxCacheRef.current.clear();
         updateViewport();
         renderAllImmediate();
@@ -681,8 +709,8 @@ var CanvasMarkerLayer = function (props) {
 
       baseLayer.destroyChildren();
       eventLayer.destroyChildren();
-      stage.destroy();
-      offsetCacheRef.current.clear();
+      stage.destroy(); // 공유 캐시는 cleanup 시 clear하지 않음 (다른 레이어가 사용 중일 수 있음)
+
       boundingBoxCacheRef.current.clear();
       spatialIndexRef.current.clear();
     };
@@ -898,7 +926,7 @@ var CanvasMarkerLayer = function (props) {
       x: 0,
       y: 0
     };
-    offsetCacheRef.current.clear();
+    sharedMarkerCache.clear();
     boundingBoxCacheRef.current.clear();
     selectedItemsMapRef.current = hooks.syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current);
     renderAllImmediate();

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

@@ -1,4 +1,4 @@
-import type { MarkerOptions } from '../../../types';
+import type { MarkerOptions, Offset } from '../../../types';
 import type { CanvasData, CustomRenderBase, CustomRenderEvent } from '../shared';
 /**
  * CanvasMarkerLayer Props (renderEvent가 없는 경우 - 인터랙션 불가)
@@ -25,6 +25,12 @@ export interface CanvasMarkerLayerPropsWithoutEvent<T> extends Pick<MarkerOption
     selectedItem?: never;
     disableInteraction?: never;
     topStageZIndex?: never;
+    /** 최적화 데이터 콜백 (디버깅/모니터링용) */
+    onOptimizationDataUpdate?: (data: {
+        cacheSize: number;
+        cacheEntries: Array<[string, number[][][][] | Offset]>;
+        spatialGridCells: Map<string, CanvasData<T>[]>;
+    }) => void;
 }
 /**
  * CanvasMarkerLayer Props (renderEvent가 있는 경우 - 인터랙션 가능)
@@ -57,6 +63,12 @@ export interface CanvasMarkerLayerPropsWithEventWithSelectedItem<T> extends Pick
     renderEvent: CustomRenderEvent<T>;
     /** Top Layer의 zIndex (hover된 항목을 최상단에 렌더링하기 위한 레이어) */
     topStageZIndex?: never;
+    /** 최적화 데이터 콜백 (디버깅/모니터링용) */
+    onOptimizationDataUpdate?: (data: {
+        cacheSize: number;
+        cacheEntries: Array<[string, number[][][][] | Offset]>;
+        spatialGridCells: Map<string, CanvasData<T>[]>;
+    }) => void;
 }
 /**
  * CanvasMarkerLayer Props (renderEvent가 있는 경우 - 인터랙션 가능)
@@ -89,6 +101,12 @@ export interface CanvasMarkerLayerPropsWithEventWithSelectedItems<T> extends Pic
     renderEvent: CustomRenderEvent<T>;
     /** Top Layer의 zIndex (hover된 항목을 최상단에 렌더링하기 위한 레이어) */
     topStageZIndex?: never;
+    /** 최적화 데이터 콜백 (디버깅/모니터링용) */
+    onOptimizationDataUpdate?: (data: {
+        cacheSize: number;
+        cacheEntries: Array<[string, number[][][][] | Offset]>;
+        spatialGridCells: Map<string, CanvasData<T>[]>;
+    }) => void;
 }
 /**
  * CanvasMarkerLayer Props (renderEvent가 있는 경우 - 인터랙션 가능)
@@ -121,6 +139,12 @@ export interface CanvasMarkerLayerPropsWithEventWithoutSelection<T> extends Pick
     renderEvent: CustomRenderEvent<T>;
     /** Top Layer의 zIndex (hover된 항목을 최상단에 렌더링하기 위한 레이어) */
     topStageZIndex?: never;
+    /** 최적화 데이터 콜백 (디버깅/모니터링용) */
+    onOptimizationDataUpdate?: (data: {
+        cacheSize: number;
+        cacheEntries: Array<[string, number[][][][] | Offset]>;
+        spatialGridCells: Map<string, CanvasData<T>[]>;
+    }) => void;
 }
 /**
  * CanvasMarkerLayer Props (renderEvent가 있는 경우 - 인터랙션 가능)
@@ -154,6 +178,12 @@ export interface CanvasMarkerLayerPropsWithEventWithTopStageWithSelectedItem<T>
     renderEvent: CustomRenderEvent<T>;
     /** Top Layer의 zIndex (hover된 항목을 최상단에 렌더링하기 위한 레이어) */
     topStageZIndex: number;
+    /** 최적화 데이터 콜백 (디버깅/모니터링용) */
+    onOptimizationDataUpdate?: (data: {
+        cacheSize: number;
+        cacheEntries: Array<[string, number[][][][] | Offset]>;
+        spatialGridCells: Map<string, CanvasData<T>[]>;
+    }) => void;
 }
 /**
  * CanvasMarkerLayer Props (renderEvent가 있는 경우 - 인터랙션 가능)
@@ -187,6 +217,12 @@ export interface CanvasMarkerLayerPropsWithEventWithTopStageWithSelectedItems<T>
     renderEvent: CustomRenderEvent<T>;
     /** Top Layer의 zIndex (hover된 항목을 최상단에 렌더링하기 위한 레이어) */
     topStageZIndex: number;
+    /** 최적화 데이터 콜백 (디버깅/모니터링용) */
+    onOptimizationDataUpdate?: (data: {
+        cacheSize: number;
+        cacheEntries: Array<[string, number[][][][] | Offset]>;
+        spatialGridCells: Map<string, CanvasData<T>[]>;
+    }) => void;
 }
 /**
  * CanvasMarkerLayer Props (renderEvent가 있는 경우 - 인터랙션 가능)
@@ -220,6 +256,12 @@ export interface CanvasMarkerLayerPropsWithEventWithTopStageWithoutSelection<T>
     renderEvent: CustomRenderEvent<T>;
     /** Top Layer의 zIndex (hover된 항목을 최상단에 렌더링하기 위한 레이어) */
     topStageZIndex: number;
+    /** 최적화 데이터 콜백 (디버깅/모니터링용) */
+    onOptimizationDataUpdate?: (data: {
+        cacheSize: number;
+        cacheEntries: Array<[string, number[][][][] | Offset]>;
+        spatialGridCells: Map<string, CanvasData<T>[]>;
+    }) => void;
 }
 /**
  * CanvasMarkerLayer Props (renderEvent가 있는 경우 - 인터랙션 가능)

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

@@ -26,18 +26,17 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var CanvasPolygonLayer = function (props) {
   var data = props.data,
-      onClick = props.onClick,
       _a = props.enableMultiSelect,
       enableMultiSelect = _a === void 0 ? false : _a,
       _b = props.cullingMargin,
       cullingMargin = _b === void 0 ? performance.DEFAULT_CULLING_MARGIN : _b,
-      _c = props.maxCacheSize,
-      maxCacheSize = _c === void 0 ? performance.DEFAULT_MAX_CACHE_SIZE : _c,
+      onClick = props.onClick,
+      onOptimizationDataUpdate = props.onOptimizationDataUpdate,
       externalSelectedItems = props.selectedItems,
       externalSelectedItem = props.selectedItem,
-      _d = props.disableInteraction,
-      disableInteraction = _d === void 0 ? false : _d,
-      options = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // customStyle은 다른 방식과 함께 사용 가능
+      _c = props.disableInteraction,
+      disableInteraction = _c === void 0 ? false : _c,
+      options = tslib.__rest(props, ["data", "enableMultiSelect", "cullingMargin", "onClick", "onOptimizationDataUpdate", "selectedItems", "selectedItem", "disableInteraction"]); // customStyle은 다른 방식과 함께 사용 가능
 
 
   var hasCustomStyle = 'customStyle' in props && props.customStyle !== undefined;
@@ -80,19 +79,25 @@ var CanvasPolygonLayer = function (props) {
     y: 0
   }); // 드래그 시작 시점의 hover 상태 저장 (드래그 중 hover 고정용)
 
-  var dragStartHoveredItemRef = React.useRef(null); // 성능 최적화 Refs
+  var dragStartHoveredItemRef = React.useRef(null); // 공유 캐시 사용 (모든 폴리곤 레이어가 공유)
+
+  var sharedPolygonCache = context$1 === null || context$1 === void 0 ? void 0 : context$1.sharedPolygonCache;
+
+  if (!sharedPolygonCache) {
+    throw new Error('CanvasPolygonLayer must be used within CanvasProvider');
+  } // 성능 최적화 Refs
+
 
-  var offsetCacheRef = React.useRef(new performance.QueueCache(maxCacheSize));
   var spatialIndexRef = React.useRef(new performance.SpatialHashGrid(performance.SPATIAL_GRID_CELL_SIZE));
   var boundingBoxCacheRef = React.useRef(new Map());
-  var viewportRef = React.useRef(null); // 폴리곤 좌표 변환 (위경도 → 화면 좌표, Queue 캐시 사용)
+  var viewportRef = React.useRef(null); // 폴리곤 좌표 변환 (위경도 → 화면 좌표, 공유 캐시 사용)
 
   var getOrComputePolygonOffsets = function (polygonData) {
-    var cached = offsetCacheRef.current.get(polygonData.id);
-    if (cached && Array.isArray(cached)) return cached;
+    var cached = sharedPolygonCache.get(polygonData.id);
+    if (cached) return cached;
     var result = utils.computePolygonOffsets(polygonData, controller);
     if (!result) return null;
-    offsetCacheRef.current.set(polygonData.id, result);
+    sharedPolygonCache.set(polygonData.id, result);
     return result;
   }; // 폴리곤 바운딩 박스 계산 (Viewport Culling 및 Hit Test용)
 
@@ -251,6 +256,24 @@ var CanvasPolygonLayer = function (props) {
     }
 
     layer.batchDraw();
+  }; // 최적화 데이터 업데이트 콜백 호출
+
+
+  var notifyOptimizationData = function () {
+    if (!onOptimizationDataUpdate) return; // 공유 캐시에서 폴리곤 타입 항목만 필터링 (number[][][][] 타입만)
+
+    var allCacheEntries = sharedPolygonCache.getAllEntries();
+    var cacheEntries = allCacheEntries.map(function (_a) {
+      var key = _a[0],
+          value = _a[1];
+      return [key, value];
+    });
+    var spatialGridCells = spatialIndexRef.current.getAllCells();
+    onOptimizationDataUpdate({
+      cacheEntries: cacheEntries,
+      cacheSize: sharedPolygonCache.size(),
+      spatialGridCells: spatialGridCells
+    });
   }; // 전체 즉시 렌더링
 
 
@@ -258,27 +281,31 @@ var CanvasPolygonLayer = function (props) {
     updateViewport();
     buildSpatialIndex();
     doRenderBase();
-    doRenderEvent();
+    doRenderEvent(); // 최적화 데이터 업데이트 콜백 호출
+
+    notifyOptimizationData();
   }; // 지도 이벤트 핸들러 생성
 
 
-  var _e = hooks.createMapEventHandlers({
+  var _d = hooks.createMapEventHandlers({
     accumTranslateRef: accumTranslateRef,
     boundingBoxCacheRef: boundingBoxCacheRef,
+    clearCache: function () {
+      return sharedPolygonCache.clear();
+    },
     containerRef: containerRef,
     controller: controller,
     markerRef: markerRef,
-    offsetCacheRef: offsetCacheRef,
     options: options,
     prevCenterOffsetRef: prevCenterOffsetRef,
     renderAllImmediate: renderAllImmediate
   }),
-      handleIdle = _e.handleIdle,
-      handleZoomStart = _e.handleZoomStart,
-      handleZoomEnd = _e.handleZoomEnd,
-      handleCenterChanged = _e.handleCenterChanged,
-      handleDragStartShared = _e.handleDragStart,
-      handleDragEndShared = _e.handleDragEnd;
+      handleIdle = _d.handleIdle,
+      handleZoomStart = _d.handleZoomStart,
+      handleZoomEnd = _d.handleZoomEnd,
+      handleCenterChanged = _d.handleCenterChanged,
+      handleDragStartShared = _d.handleDragStart,
+      handleDragEndShared = _d.handleDragEnd;
 
   var handleDragStart = function () {
     handleDragStartShared(); // 드래그 시작 시점의 hover 상태 저장
@@ -462,7 +489,7 @@ var CanvasPolygonLayer = function (props) {
       resizeRafId = requestAnimationFrame(function () {
         stage.width(mapDiv.offsetWidth);
         stage.height(mapDiv.offsetHeight);
-        offsetCacheRef.current.clear();
+        sharedPolygonCache.clear();
         boundingBoxCacheRef.current.clear();
         updateViewport();
         renderAllImmediate();
@@ -525,8 +552,8 @@ var CanvasPolygonLayer = function (props) {
 
       baseLayer.destroyChildren();
       eventLayer.destroyChildren();
-      stage.destroy();
-      offsetCacheRef.current.clear();
+      stage.destroy(); // 공유 캐시는 cleanup 시 clear하지 않음 (다른 레이어가 사용 중일 수 있음)
+
       boundingBoxCacheRef.current.clear();
       spatialIndexRef.current.clear();
     };
@@ -562,7 +589,7 @@ var CanvasPolygonLayer = function (props) {
       x: 0,
       y: 0
     };
-    offsetCacheRef.current.clear();
+    sharedPolygonCache.clear();
     boundingBoxCacheRef.current.clear();
     selectedItemsMapRef.current = hooks.syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current);
     renderAllImmediate();

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

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { MarkerOptions } from '../../../types';
+import type { MarkerOptions, Offset } from '../../../types';
 import type { CanvasData } from '../shared';
 /**
  * 폴리곤 스타일 정의
@@ -123,6 +123,12 @@ export interface CanvasPolygonLayerBaseProps<T> extends Pick<MarkerOptions, 'zIn
     selectedItem?: CanvasData<T> | null;
     /** 상호작용 비활성화 여부 (기본값: false) */
     disableInteraction?: boolean;
+    /** 최적화 데이터 콜백 (디버깅/모니터링용) */
+    onOptimizationDataUpdate?: (data: {
+        cacheSize: number;
+        cacheEntries: Array<[string, number[][][][] | Offset]>;
+        spatialGridCells: Map<string, CanvasData<T>[]>;
+    }) => void;
 }
 /**
  * 개별 Props 방식 (기존 방식)

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { QueueCache } from './performance';
 import { CanvasData } from './types';
 import { Offset } from '../../../types';
 /**
@@ -21,6 +22,8 @@ export interface ComponentInstance<T> {
 interface CanvasContextValue {
     registerComponent: <T>(instance: ComponentInstance<T>) => void;
     unregisterComponent: <T>(instance: ComponentInstance<T>) => void;
+    sharedMarkerCache: QueueCache<string, Offset>;
+    sharedPolygonCache: QueueCache<string, number[][][][]>;
 }
 /**
  * CanvasProvider 컴포넌트
@@ -29,6 +32,8 @@ interface CanvasContextValue {
  */
 export declare const CanvasProvider: React.FC<{
     children: React.ReactNode;
+    markerMaxCacheSize?: number;
+    polygonMaxCacheSize?: number;
 }>;
 /**
  * Canvas Context Hook

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var performance = require('./performance.js');
 var MintMapProvider = require('../../provider/MintMapProvider.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -21,7 +22,11 @@ var CanvasContext = React.createContext(null);
 /* eslint-disable no-continue */
 
 var CanvasProvider = function (_a) {
-  var children = _a.children;
+  var children = _a.children,
+      _b = _a.markerMaxCacheSize,
+      markerMaxCacheSize = _b === void 0 ? 5000 : _b,
+      _c = _a.polygonMaxCacheSize,
+      polygonMaxCacheSize = _c === void 0 ? 30000 : _c;
   var controller = MintMapProvider.useMintMapController(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
   var componentsRef = React.useRef([]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -29,7 +34,10 @@ var CanvasProvider = function (_a) {
   var currentHoveredRef = React.useRef(null); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
   var currentHoveredDataRef = React.useRef(null);
-  var draggingRef = React.useRef(false); // 컴포넌트 등록 (zIndex 내림차순 정렬)
+  var draggingRef = React.useRef(false); // 공유 캐시 (모든 레이어가 공유)
+
+  var sharedMarkerCacheRef = React.useRef(new performance.QueueCache(markerMaxCacheSize));
+  var sharedPolygonCacheRef = React.useRef(new performance.QueueCache(polygonMaxCacheSize)); // 컴포넌트 등록 (zIndex 내림차순 정렬)
 
   var registerComponent = React.useCallback(function (instance) {
     componentsRef.current.push(instance);
@@ -199,6 +207,8 @@ var CanvasProvider = function (_a) {
   var contextValue = React.useMemo(function () {
     return {
       registerComponent: registerComponent,
+      sharedMarkerCache: sharedMarkerCacheRef.current,
+      sharedPolygonCache: sharedPolygonCacheRef.current,
       unregisterComponent: unregisterComponent
     };
   }, [registerComponent, unregisterComponent]);

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

@@ -21,7 +21,7 @@ export interface EventHandlerDeps<T> {
     containerRef: MutableRefObject<HTMLDivElement | null>;
     controller: MintMapController;
     markerRef: MutableRefObject<Marker | undefined>;
-    offsetCacheRef: MutableRefObject<any>;
+    clearCache: () => void;
     options: Pick<MarkerOptions, 'anchor' | 'visible' | 'zIndex'>;
     prevCenterOffsetRef: MutableRefObject<{
         x: number;

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

@@ -17,10 +17,10 @@ var tslib = require('tslib');
 var createMapEventHandlers = function (deps) {
   var accumTranslateRef = deps.accumTranslateRef,
       boundingBoxCacheRef = deps.boundingBoxCacheRef,
+      clearCache = deps.clearCache,
       containerRef = deps.containerRef,
       controller = deps.controller,
       markerRef = deps.markerRef,
-      offsetCacheRef = deps.offsetCacheRef,
       options = deps.options,
       prevCenterOffsetRef = deps.prevCenterOffsetRef,
       renderAllImmediate = deps.renderAllImmediate; // 지도 이동/줌 완료 시 처리 (캐시 초기화 및 렌더링)
@@ -32,7 +32,7 @@ var createMapEventHandlers = function (deps) {
       y: 0
     }; // 캐시 정리 (지도 이동/줌으로 좌표 변환 결과가 바뀜)
 
-    offsetCacheRef.current.clear();
+    clearCache();
     boundingBoxCacheRef.current.clear(); // 마커 위치 업데이트
 
     var bounds = controller.getCurrBounds();

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

@@ -1,13 +1,13 @@
 /**
  * 공간 인덱스 그리드 셀 크기 (픽셀 단위)
  *
- * @default 100
+ * @default 200
  *
  * @remarks
  * 셀 크기는 평균 마커 크기의 1.5~2배가 적절합니다.
  * - 마커가 50px 이하: 50px 권장
- * - 마커가 60-80px: 100px 권장 (현재 설정)
- * - 마커가 100px 이상: 150-200px 권장
+ * - 마커가 60-80px: 100px 권장
+ * - 마커가 100px 이상: 150-200px 권장 (현재 설정)
  *
  * 셀 크기가 너무 작으면:
  * - 한 마커가 여러 셀에 등록되어 메모리 사용량 증가
@@ -17,7 +17,7 @@
  * - 한 셀에 많은 마커가 들어가서 Hit Test 시 후보 항목이 많아짐
  * - Hit Test 성능 저하
  */
-export declare const SPATIAL_GRID_CELL_SIZE = 100;
+export declare const SPATIAL_GRID_CELL_SIZE = 200;
 /**
  * 뷰포트 컬링 여유 공간 (픽셀 단위)
  *
@@ -48,6 +48,8 @@ export declare class QueueCache<K, V> {
     clear(): void;
     size(): number;
     has(key: K): boolean;
+    getAllKeys(): K[];
+    getAllEntries(): Array<[K, V]>;
 }
 /**
  * Spatial Hash Grid (공간 해시 그리드)
@@ -75,4 +77,6 @@ export declare class SpatialHashGrid<T> {
         totalCells: number;
         totalItems: number;
     };
+    getAllCells(): Map<string, T[]>;
+    getCellItems(cellKey: string): T[];
 }

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

@@ -9,13 +9,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 /**
  * 공간 인덱스 그리드 셀 크기 (픽셀 단위)
  *
- * @default 100
+ * @default 200
  *
  * @remarks
  * 셀 크기는 평균 마커 크기의 1.5~2배가 적절합니다.
  * - 마커가 50px 이하: 50px 권장
- * - 마커가 60-80px: 100px 권장 (현재 설정)
- * - 마커가 100px 이상: 150-200px 권장
+ * - 마커가 60-80px: 100px 권장
+ * - 마커가 100px 이상: 150-200px 권장 (현재 설정)
  *
  * 셀 크기가 너무 작으면:
  * - 한 마커가 여러 셀에 등록되어 메모리 사용량 증가
@@ -25,7 +25,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * - 한 셀에 많은 마커가 들어가서 Hit Test 시 후보 항목이 많아짐
  * - Hit Test 성능 저하
  */
-var SPATIAL_GRID_CELL_SIZE = 100;
+var SPATIAL_GRID_CELL_SIZE = 200;
 /**
  * 뷰포트 컬링 여유 공간 (픽셀 단위)
  *
@@ -100,6 +100,16 @@ function () {
 
   QueueCache.prototype.has = function (key) {
     return this.cache.has(key);
+  }; // 모든 캐시 키 반환 (디버깅/모니터링용)
+
+
+  QueueCache.prototype.getAllKeys = function () {
+    return Array.from(this.cache.keys());
+  }; // 모든 캐시 항목 반환 (디버깅/모니터링용)
+
+
+  QueueCache.prototype.getAllEntries = function () {
+    return Array.from(this.cache.entries());
   };
 
   return QueueCache;
@@ -256,6 +266,16 @@ function () {
       totalCells: this.grid.size,
       totalItems: this.itemToCells.size
     };
+  }; // 모든 그리드 셀 데이터 반환 (디버깅/모니터링용)
+
+
+  SpatialHashGrid.prototype.getAllCells = function () {
+    return new Map(this.grid);
+  }; // 특정 셀의 항목 조회
+
+
+  SpatialHashGrid.prototype.getCellItems = function (cellKey) {
+    return this.grid.get(cellKey) || [];
   };
 
   return SpatialHashGrid;