@mint-ui/map 1.2.0-test.12 → 1.2.0-test.14

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

@@ -1,20 +1,20 @@
 import React from "react";
 import { MarkerOptions } from "../../../types";
-import { KonvaCanvasMarkerData, CanvasDataType, CustomRenderBase, CustomRenderAnimation, CustomRenderEvent } from "./shared";
+import { KonvaCanvasData, CanvasDataType, CustomRenderBase, CustomRenderAnimation, CustomRenderEvent } from "./shared";
 export { KonvaMarkerProvider, LRUCache, SpatialHashGrid, CanvasDataType } from "./shared";
-export type { KonvaCanvasMarkerOption, Paths, KonvaCanvasMarkerData, CustomRenderBase, CustomRenderAnimation, CustomRenderEvent, RenderUtils, RenderBaseParams, RenderAnimationParams, RenderEventParams } from "./shared";
+export type { KonvaCanvasOption, Paths, KonvaCanvasData, CustomRenderBase, CustomRenderAnimation, CustomRenderEvent, RenderUtils, RenderBaseParams, RenderAnimationParams, RenderEventParams } from "./shared";
 /**
  * 공통 Props (MARKER와 POLYGON 모두 사용)
  */
 interface WoongCanvasLayerBaseProps<T> extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
     /** 렌더링할 데이터 배열 (마커 또는 폴리곤) */
-    data: KonvaCanvasMarkerData<T>[];
+    data: KonvaCanvasData<T>[];
     /** 마커 클릭 시 호출되는 콜백 (선택) */
-    onClick?: (payload: KonvaCanvasMarkerData<T>, selectedIds: Set<string>) => void;
+    onClick?: (payload: KonvaCanvasData<T>, selectedIds: Set<string>) => void;
     /** 마커에 마우스 오버 시 호출되는 콜백 (선택) */
-    onMouseOver?: (payload: KonvaCanvasMarkerData<T>) => void;
+    onMouseOver?: (payload: KonvaCanvasData<T>) => void;
     /** 마커에서 마우스 아웃 시 호출되는 콜백 (선택) */
-    onMouseOut?: (payload: KonvaCanvasMarkerData<T>) => void;
+    onMouseOut?: (payload: KonvaCanvasData<T>) => void;
     /** 다중 선택 활성화 여부 (기본: false) */
     enableMultiSelect?: boolean;
     /** hover 시 마커를 최상단으로 표시 (기본: false) */
@@ -26,24 +26,26 @@ interface WoongCanvasLayerBaseProps<T> extends Pick<MarkerOptions, 'zIndex' | 'a
     /** LRU 캐시 최대 크기 (기본: 10000) */
     maxCacheSize?: number;
     /** 외부에서 제어하는 선택된 항목 배열 (선택) */
-    selectedItems?: KonvaCanvasMarkerData<T>[];
+    selectedItems?: KonvaCanvasData<T>[];
     /** 외부에서 전달된 단일 선택 아이템 (특별한 효과용) */
-    selectedItem?: KonvaCanvasMarkerData<T> | null;
+    selectedItem?: KonvaCanvasData<T> | null;
     /** 상호작용 비활성화 (hover, click 등 모든 이벤트 차단) */
     disableInteraction?: boolean;
 }
 /**
  * MARKER 타입 Props - 커스텀 렌더링 필수
  */
-interface WoongCanvasLayerPropsForMarker<T> extends WoongCanvasLayerBaseProps<T> {
+interface WoongCanvasLayerPropsForMarker<T, C = any> extends WoongCanvasLayerBaseProps<T> {
     /** 데이터 타입 */
     dataType: CanvasDataType.MARKER;
     /** Base Layer 렌더링 함수 (필수) */
-    renderBase: CustomRenderBase<T>;
+    renderBase: CustomRenderBase<T, C>;
     /** Animation Layer 렌더링 함수 (선택, 애니메이션용) */
-    renderAnimation?: CustomRenderAnimation<T>;
+    renderAnimation?: CustomRenderAnimation<T, C>;
     /** Event Layer 렌더링 함수 (선택) */
-    renderEvent?: CustomRenderEvent<T>;
+    renderEvent?: CustomRenderEvent<T, C>;
+    /** 렌더링 설정 (색상, 표시 여부, 모양 등) */
+    renderConfig?: C;
 }
 /**
  * POLYGON 타입 Props - 스타일 속성으로 내부 처리
@@ -78,8 +80,11 @@ interface WoongCanvasLayerPropsForPolygon<T> extends WoongCanvasLayerBaseProps<T
 }
 /**
  * 최종 Props 타입 - Discriminated Union
+ *
+ * @template T 데이터 타입
+ * @template C 렌더링 설정 타입 (MARKER 모드에서만 사용)
  */
-export declare type WoongCanvasLayerProps<T> = WoongCanvasLayerPropsForMarker<T> | WoongCanvasLayerPropsForPolygon<T>;
+export declare type WoongCanvasLayerProps<T, C = any> = WoongCanvasLayerPropsForMarker<T, C> | WoongCanvasLayerPropsForPolygon<T>;
 /**
  * 🚀 WoongCanvasLayer - Konva 기반 초고성능 마커/폴리곤 렌더링 컴포넌트
  *
@@ -127,7 +132,7 @@ export declare type WoongCanvasLayerProps<T> = WoongCanvasLayerPropsForMarker<T>
  *
  * ## 📊 데이터 형식
  * ```typescript
- * const data: KonvaCanvasMarkerData<T>[] = [
+ * const data: KonvaCanvasData<T>[] = [
  *   {
  *     id: 'unique-id',
  *     position: new Position(lat, lng),
@@ -158,5 +163,5 @@ export declare type WoongCanvasLayerProps<T> = WoongCanvasLayerPropsForMarker<T>
  *
  * @see {@link https://github.com/your-repo/docs/WoongCanvasLayer.md} 전체 문서
  */
-declare const WoongCanvasLayer: <T>(props: WoongCanvasLayerProps<T>) => React.ReactPortal;
+declare const WoongCanvasLayer: <T, C = any>(props: WoongCanvasLayerProps<T, C>) => React.ReactPortal;
 export default WoongCanvasLayer;

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

@@ -78,6 +78,9 @@ var WoongCanvasLayerComponent = function (props) {
   /** 상호작용 비활성화 상태 (Ref로 관리하여 클로저 문제 해결) */
 
   var disableInteractionRef = React.useRef(disableInteraction);
+  /** 렌더링 설정 (Ref로 관리하여 클로저 문제 해결) */
+
+  var renderConfigRef = React.useRef(dataType === types.CanvasDataType.MARKER ? props.renderConfig : undefined);
   /** 현재 Hover 중인 항목 */
 
   var hoveredItemRef = React.useRef(null);
@@ -380,7 +383,8 @@ var WoongCanvasLayerComponent = function (props) {
             ctx: ctx,
             items: visibleMarkers,
             selectedIds: selectedIdsRef.current,
-            utils: renderUtils
+            utils: renderUtils,
+            config: renderConfigRef.current
           });
         },
         perfectDrawEnabled: false,
@@ -410,7 +414,8 @@ var WoongCanvasLayerComponent = function (props) {
       layer: layer,
       selectedIds: selectedIdsRef.current,
       items: markersRef.current,
-      utils: renderUtils
+      utils: renderUtils,
+      config: renderConfigRef.current
     });
   };
   /**
@@ -451,7 +456,8 @@ var WoongCanvasLayerComponent = function (props) {
             hoveredItem: hoveredItemRef.current,
             utils: renderUtils,
             selectedItems: selectedItems,
-            selectedItem: selectedItemRef.current
+            selectedItem: selectedItemRef.current,
+            config: renderConfigRef.current
           });
         },
         perfectDrawEnabled: false,
@@ -963,6 +969,18 @@ var WoongCanvasLayerComponent = function (props) {
   React.useEffect(function () {
     disableInteractionRef.current = disableInteraction;
   }, [disableInteraction]); // --------------------------------------------------------------------------
+  // Lifecycle: renderConfig 동기화
+  // --------------------------------------------------------------------------
+
+  React.useEffect(function () {
+    if (dataType === types.CanvasDataType.MARKER) {
+      renderConfigRef.current = props.renderConfig; // config 변경 시 렌더링 업데이트
+
+      doRenderBase();
+      doRenderAnimation();
+      doRenderEvent();
+    }
+  }, [dataType === types.CanvasDataType.MARKER ? props.renderConfig : undefined]); // --------------------------------------------------------------------------
   // Lifecycle: 외부 selectedItems 동기화
   // --------------------------------------------------------------------------
 
@@ -1109,7 +1127,7 @@ var WoongCanvasLayerComponent = function (props) {
  *
  * ## 📊 데이터 형식
  * ```typescript
- * const data: KonvaCanvasMarkerData<T>[] = [
+ * const data: KonvaCanvasData<T>[] = [
  *   {
  *     id: 'unique-id',
  *     position: new Position(lat, lng),

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { Offset } from "../../../../types";
-import { KonvaCanvasMarkerData } from "./types";
+import { KonvaCanvasData } from "./types";
 /**
  * 다중 WoongKonvaMarker 인스턴스를 관리하기 위한 Context
  *
@@ -12,12 +12,12 @@ import { KonvaCanvasMarkerData } from "./types";
 export interface ComponentInstance<T> {
     zIndex: number;
     hitTest: (offset: Offset) => boolean;
-    onClick?: (payload: KonvaCanvasMarkerData<T>, selectedIds: Set<string>) => void;
-    onMouseOver?: (payload: KonvaCanvasMarkerData<T>) => void;
-    onMouseOut?: (payload: KonvaCanvasMarkerData<T>) => void;
-    findData: (offset: Offset) => KonvaCanvasMarkerData<T> | null;
-    setHovered: (data: KonvaCanvasMarkerData<T> | null) => void;
-    handleLocalClick: (data: KonvaCanvasMarkerData<T>) => void;
+    onClick?: (payload: KonvaCanvasData<T>, selectedIds: Set<string>) => void;
+    onMouseOver?: (payload: KonvaCanvasData<T>) => void;
+    onMouseOut?: (payload: KonvaCanvasData<T>) => void;
+    findData: (offset: Offset) => KonvaCanvasData<T> | null;
+    setHovered: (data: KonvaCanvasData<T> | null) => void;
+    handleLocalClick: (data: KonvaCanvasData<T>) => void;
     getSelectedIds: () => Set<string>;
     isInteractionDisabled: () => boolean;
 }

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

@@ -3,7 +3,7 @@
  *
  * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
  */
-import { CustomRenderBase, CustomRenderEvent, KonvaCanvasMarkerData } from "./types";
+import { CustomRenderBase, CustomRenderEvent, KonvaCanvasData } from "./types";
 /**
  * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
  */
@@ -30,7 +30,7 @@ export declare const drawPolygon: ({ ctx, polygonOffsets, isDonutPolygon, fillCo
  *   2
  * );
  */
-export declare const renderPolygonBase: <T = any>(baseFillColor: string, baseStrokeColor: string, baseLineWidth: number) => CustomRenderBase<KonvaCanvasMarkerData<T>>;
+export declare const renderPolygonBase: <T = any>(baseFillColor: string, baseStrokeColor: string, baseLineWidth: number) => CustomRenderBase<KonvaCanvasData<T>, any>;
 /**
  * 폴리곤 Event 렌더링 함수
  *
@@ -56,4 +56,4 @@ export declare const renderPolygonBase: <T = any>(baseFillColor: string, baseStr
  *   'rgba(100, 150, 255, 0.8)'
  * );
  */
-export declare const renderPolygonEvent: <T = any>(selectedFillColor: string, selectedStrokeColor: string, selectedLineWidth: number, activeFillColor?: string, activeStrokeColor?: string, activeLineWidth?: number, hoveredFillColor?: string, hoveredStrokeColor?: string, hoveredLineWidth?: number) => CustomRenderEvent<KonvaCanvasMarkerData<T>>;
+export declare const renderPolygonEvent: <T = any>(selectedFillColor: string, selectedStrokeColor: string, selectedLineWidth: number, activeFillColor?: string, activeStrokeColor?: string, activeLineWidth?: number, hoveredFillColor?: string, hoveredStrokeColor?: string, hoveredLineWidth?: number) => CustomRenderEvent<KonvaCanvasData<T>, any>;

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

@@ -22,7 +22,7 @@ export interface Paths {
  * Konva 캔버스 마커/폴리곤의 기본 필수 속성
  * (렌더링에 필요한 최소 정보)
  */
-export interface KonvaCanvasMarkerOption {
+export interface KonvaCanvasOption {
     id: string;
     position: Position;
     boxWidth?: number;
@@ -35,10 +35,10 @@ export interface KonvaCanvasMarkerOption {
  * @template T 서버에서 받은 원본 데이터 타입 (예: Marker, Polygon)
  * @example
  * // API에서 받은 Marker 타입을 그대로 유지하면서 캔버스 렌더링 정보 추가
- * type MarkerWithCanvas = KonvaCanvasMarkerData<Marker>
+ * type MarkerWithCanvas = KonvaCanvasData<Marker>
  * // { raId, lat, lng, buildingName, totalArea } + { id, position, boxWidth, ... }
  */
-export declare type KonvaCanvasMarkerData<T = {}> = T & KonvaCanvasMarkerOption;
+export declare type KonvaCanvasData<T = {}> = T & KonvaCanvasOption;
 /**
  * 🛠️ 렌더링 유틸리티 함수들
  *
@@ -112,7 +112,7 @@ export interface RenderUtils<T> {
      *   }
      * }
      */
-    getOrComputePolygonOffsets: (polygonData: KonvaCanvasMarkerData<T>) => number[][][][] | null;
+    getOrComputePolygonOffsets: (polygonData: KonvaCanvasData<T>) => number[][][][] | null;
     /**
      * 마커의 위경도 좌표를 화면 픽셀 좌표로 변환합니다.
      *
@@ -138,88 +138,144 @@ export interface RenderUtils<T> {
      *   boxHeight
      * );
      */
-    getOrComputeMarkerOffset: (markerData: KonvaCanvasMarkerData<T>) => Offset | null;
+    getOrComputeMarkerOffset: (markerData: KonvaCanvasData<T>) => Offset | null;
 }
 /**
  * 커스텀 렌더링 함수 파라미터 - Base Layer
+ *
+ * @template T 데이터 타입
+ * @template C 설정(Config) 타입 (선택)
  */
-export interface RenderBaseParams<T> {
+export interface RenderBaseParams<T, C = any> {
     /** Canvas 2D 렌더링 컨텍스트 (순수 Canvas API) */
     ctx: CanvasRenderingContext2D;
     /** 렌더링할 마커 데이터 배열 */
-    items: KonvaCanvasMarkerData<T>[];
+    items: KonvaCanvasData<T>[];
     /** 현재 선택된 마커 ID Set */
     selectedIds: Set<string>;
     /** 렌더링 유틸리티 함수들 */
     utils: RenderUtils<T>;
+    /** 렌더링 설정 (색상, 표시 여부, 모양 등) */
+    config?: C;
 }
 /**
  * 커스텀 렌더링 함수 타입 - Base Layer
  *
  * 🔥 순수 Canvas API 사용 (Konva 지식 불필요!)
  *
+ * @template T 데이터 타입
+ * @template C 설정(Config) 타입 - 렌더링 옵션 (색상, 표시 여부, 모양 등)
+ *
  * @example
- * const renderBase = ({ ctx, items, selectedIds, utils }) => {
+ * // 기본 사용 (config 없이)
+ * const renderBase: CustomRenderBase<Marker> = ({ ctx, items, selectedIds, utils }) => {
  *   for (const item of items) {
  *     if (selectedIds.has(item.id)) continue;
  *     const pos = utils.getOrComputeMarkerOffset(item);
- *     ctx.fillRect(pos.x, pos.y, 50, 50); // 순수 Canvas API!
+ *     ctx.fillRect(pos.x, pos.y, 50, 50);
+ *   }
+ * };
+ *
+ * @example
+ * // config 사용
+ * interface MarkerRenderConfig {
+ *   showLabel: boolean;
+ *   color: string;
+ *   shape: 'circle' | 'square';
+ * }
+ *
+ * const renderBase: CustomRenderBase<Marker, MarkerRenderConfig> = ({ ctx, items, config, utils }) => {
+ *   for (const item of items) {
+ *     const pos = utils.getOrComputeMarkerOffset(item);
+ *     ctx.fillStyle = config?.color || 'blue';
+ *     if (config?.shape === 'circle') {
+ *       ctx.arc(pos.x, pos.y, 10, 0, Math.PI * 2);
+ *     } else {
+ *       ctx.fillRect(pos.x, pos.y, 20, 20);
+ *     }
+ *     ctx.fill();
  *   }
  * };
  */
-export declare type CustomRenderBase<T> = (params: RenderBaseParams<T>) => void;
+export declare type CustomRenderBase<T, C = any> = (params: RenderBaseParams<T, C>) => void;
 /**
  * 커스텀 렌더링 함수 파라미터 - Animation Layer
+ *
+ * @template T 데이터 타입
+ * @template C 설정(Config) 타입 (선택)
  */
-export interface RenderAnimationParams<T> {
+export interface RenderAnimationParams<T, C = any> {
     /** Konva Layer 인스턴스 */
     layer: Konva.Layer;
     /** 현재 선택된 마커 ID Set */
     selectedIds: Set<string>;
     /** 전체 마커 데이터 배열 */
-    items: KonvaCanvasMarkerData<T>[];
+    items: KonvaCanvasData<T>[];
     /** 렌더링 유틸리티 함수들 */
     utils: RenderUtils<T>;
+    /** 렌더링 설정 (애니메이션 속도, 효과 등) */
+    config?: C;
 }
 /**
  * 커스텀 렌더링 함수 타입 - Animation Layer (선택)
  *
+ * @template T 데이터 타입
+ * @template C 설정(Config) 타입 - 애니메이션 옵션
+ *
  * @example
- * const renderAnimation = ({ layer, selectedIds, items, utils }) => {
- *   for (const id of selectedIds) {
- *     const item = items.find(i => i.id === id);
- *     // Konva 애니메이션 구현
- *   }
+ * // config 사용
+ * interface AnimationConfig {
+ *   speed: number;
+ *   bounceHeight: number;
+ * }
+ *
+ * const renderAnimation: CustomRenderAnimation<Marker, AnimationConfig> = ({ layer, selectedIds, items, config, utils }) => {
+ *   const bounceHeight = config?.bounceHeight || 15;
+ *   // Konva 애니메이션 구현
  * };
  */
-export declare type CustomRenderAnimation<T> = (params: RenderAnimationParams<T>) => void;
+export declare type CustomRenderAnimation<T, C = any> = (params: RenderAnimationParams<T, C>) => void;
 /**
  * 커스텀 렌더링 함수 파라미터 - Event Layer
+ *
+ * @template T 데이터 타입
+ * @template C 설정(Config) 타입 (선택)
  */
-export interface RenderEventParams<T> {
+export interface RenderEventParams<T, C = any> {
     /** Canvas 2D 렌더링 컨텍스트 (순수 Canvas API) */
     ctx: CanvasRenderingContext2D;
     /** 현재 hover된 마커 데이터 */
-    hoveredItem: KonvaCanvasMarkerData<T> | null;
+    hoveredItem: KonvaCanvasData<T> | null;
     /** 렌더링 유틸리티 함수들 */
     utils: RenderUtils<T>;
     /** 현재 선택된 마커 데이터 배열 (선택 강조용) */
-    selectedItems?: KonvaCanvasMarkerData<T>[];
+    selectedItems?: KonvaCanvasData<T>[];
     /** 외부에서 전달된 단일 선택 아이템 (특별한 효과용) */
-    selectedItem?: KonvaCanvasMarkerData<T> | null;
+    selectedItem?: KonvaCanvasData<T> | null;
+    /** 렌더링 설정 (hover 색상, 선택 효과 등) */
+    config?: C;
 }
 /**
  * 커스텀 렌더링 함수 타입 - Event Layer
  *
  * 🔥 순수 Canvas API 사용 (Konva 지식 불필요!)
  *
+ * @template T 데이터 타입
+ * @template C 설정(Config) 타입 - 이벤트 렌더링 옵션
+ *
  * @example
- * const renderEvent = ({ ctx, hoveredItem, utils, selectedItems }) => {
+ * // config 사용
+ * interface EventRenderConfig {
+ *   hoverColor: string;
+ *   selectedColor: string;
+ * }
+ *
+ * const renderEvent: CustomRenderEvent<Marker, EventRenderConfig> = ({ ctx, hoveredItem, config, utils }) => {
  *   if (hoveredItem) {
  *     const pos = utils.getOrComputeMarkerOffset(hoveredItem);
- *     ctx.fillStyle = 'red';
- *     ctx.fillRect(pos.x, pos.y, 50, 50); // 순수 Canvas API!
+ *     ctx.fillStyle = config?.hoverColor || 'red';
+ *     ctx.fillRect(pos.x, pos.y, 50, 50);
  *   }
  * };
  */
-export declare type CustomRenderEvent<T> = (params: RenderEventParams<T>) => void;
+export declare type CustomRenderEvent<T, C = any> = (params: RenderEventParams<T, C>) => void;

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

@@ -1,14 +1,14 @@
 import { Offset } from "../../../../types";
 import { MintMapController } from "../../../MintMapController";
-import { KonvaCanvasMarkerData } from "./types";
+import { KonvaCanvasData } from "./types";
 /**
  * 폴리곤 offset 계산
  */
-export declare const computePolygonOffsets: (polygonData: KonvaCanvasMarkerData<any>, controller: MintMapController) => number[][][][] | null;
+export declare const computePolygonOffsets: (polygonData: KonvaCanvasData<any>, controller: MintMapController) => number[][][][] | null;
 /**
  * 마커 offset 계산
  */
-export declare const computeMarkerOffset: (markerData: KonvaCanvasMarkerData<any>, controller: MintMapController) => Offset | null;
+export declare const computeMarkerOffset: (markerData: KonvaCanvasData<any>, controller: MintMapController) => Offset | null;
 /**
  * Point-in-Polygon 알고리즘
  */
@@ -24,11 +24,11 @@ export declare const isPointInPolygon: (point: Offset, polygon: number[][]) => b
  * - 도넛 폴리곤 A: isDonutPolygon=true
  * - 내부 폴리곤 B: isDonutPolygon=false (별도 데이터)
  */
-export declare const isPointInPolygonData: (clickedOffset: Offset, polygonData: KonvaCanvasMarkerData<any>, getPolygonOffsets: (data: KonvaCanvasMarkerData<any>) => number[][][][] | null) => boolean;
+export declare const isPointInPolygonData: (clickedOffset: Offset, polygonData: KonvaCanvasData<any>, getPolygonOffsets: (data: KonvaCanvasData<any>) => number[][][][] | null) => boolean;
 /**
  * 마커 히트 테스트
  */
-export declare const isPointInMarkerData: (clickedOffset: Offset, markerData: KonvaCanvasMarkerData<any>, getMarkerOffset: (data: KonvaCanvasMarkerData<any>) => Offset | null) => boolean;
+export declare const isPointInMarkerData: (clickedOffset: Offset, markerData: KonvaCanvasData<any>, getMarkerOffset: (data: KonvaCanvasData<any>) => Offset | null) => boolean;
 export declare const hexToRgba: (hexColor: string, alpha?: number) => string;
 /**
  * 텍스트 박스의 너비를 계산합니다.

package/dist/index.es.js

@@ -5690,6 +5690,9 @@ var WoongCanvasLayerComponent = function (props) {
   /** 상호작용 비활성화 상태 (Ref로 관리하여 클로저 문제 해결) */
 
   var disableInteractionRef = useRef(disableInteraction);
+  /** 렌더링 설정 (Ref로 관리하여 클로저 문제 해결) */
+
+  var renderConfigRef = useRef(dataType === CanvasDataType.MARKER ? props.renderConfig : undefined);
   /** 현재 Hover 중인 항목 */
 
   var hoveredItemRef = useRef(null);
@@ -5992,7 +5995,8 @@ var WoongCanvasLayerComponent = function (props) {
             ctx: ctx,
             items: visibleMarkers,
             selectedIds: selectedIdsRef.current,
-            utils: renderUtils
+            utils: renderUtils,
+            config: renderConfigRef.current
           });
         },
         perfectDrawEnabled: false,
@@ -6022,7 +6026,8 @@ var WoongCanvasLayerComponent = function (props) {
       layer: layer,
       selectedIds: selectedIdsRef.current,
       items: markersRef.current,
-      utils: renderUtils
+      utils: renderUtils,
+      config: renderConfigRef.current
     });
   };
   /**
@@ -6063,7 +6068,8 @@ var WoongCanvasLayerComponent = function (props) {
             hoveredItem: hoveredItemRef.current,
             utils: renderUtils,
             selectedItems: selectedItems,
-            selectedItem: selectedItemRef.current
+            selectedItem: selectedItemRef.current,
+            config: renderConfigRef.current
           });
         },
         perfectDrawEnabled: false,
@@ -6575,6 +6581,18 @@ var WoongCanvasLayerComponent = function (props) {
   useEffect(function () {
     disableInteractionRef.current = disableInteraction;
   }, [disableInteraction]); // --------------------------------------------------------------------------
+  // Lifecycle: renderConfig 동기화
+  // --------------------------------------------------------------------------
+
+  useEffect(function () {
+    if (dataType === CanvasDataType.MARKER) {
+      renderConfigRef.current = props.renderConfig; // config 변경 시 렌더링 업데이트
+
+      doRenderBase();
+      doRenderAnimation();
+      doRenderEvent();
+    }
+  }, [dataType === CanvasDataType.MARKER ? props.renderConfig : undefined]); // --------------------------------------------------------------------------
   // Lifecycle: 외부 selectedItems 동기화
   // --------------------------------------------------------------------------
 
@@ -6721,7 +6739,7 @@ var WoongCanvasLayerComponent = function (props) {
  *
  * ## 📊 데이터 형식
  * ```typescript
- * const data: KonvaCanvasMarkerData<T>[] = [
+ * const data: KonvaCanvasData<T>[] = [
  *   {
  *     id: 'unique-id',
  *     position: new Position(lat, lng),

package/dist/index.umd.js

@@ -5694,6 +5694,9 @@
     /** 상호작용 비활성화 상태 (Ref로 관리하여 클로저 문제 해결) */
 
     var disableInteractionRef = React.useRef(disableInteraction);
+    /** 렌더링 설정 (Ref로 관리하여 클로저 문제 해결) */
+
+    var renderConfigRef = React.useRef(dataType === exports.CanvasDataType.MARKER ? props.renderConfig : undefined);
     /** 현재 Hover 중인 항목 */
 
     var hoveredItemRef = React.useRef(null);
@@ -5996,7 +5999,8 @@
               ctx: ctx,
               items: visibleMarkers,
               selectedIds: selectedIdsRef.current,
-              utils: renderUtils
+              utils: renderUtils,
+              config: renderConfigRef.current
             });
           },
           perfectDrawEnabled: false,
@@ -6026,7 +6030,8 @@
         layer: layer,
         selectedIds: selectedIdsRef.current,
         items: markersRef.current,
-        utils: renderUtils
+        utils: renderUtils,
+        config: renderConfigRef.current
       });
     };
     /**
@@ -6067,7 +6072,8 @@
               hoveredItem: hoveredItemRef.current,
               utils: renderUtils,
               selectedItems: selectedItems,
-              selectedItem: selectedItemRef.current
+              selectedItem: selectedItemRef.current,
+              config: renderConfigRef.current
             });
           },
           perfectDrawEnabled: false,
@@ -6579,6 +6585,18 @@
     React.useEffect(function () {
       disableInteractionRef.current = disableInteraction;
     }, [disableInteraction]); // --------------------------------------------------------------------------
+    // Lifecycle: renderConfig 동기화
+    // --------------------------------------------------------------------------
+
+    React.useEffect(function () {
+      if (dataType === exports.CanvasDataType.MARKER) {
+        renderConfigRef.current = props.renderConfig; // config 변경 시 렌더링 업데이트
+
+        doRenderBase();
+        doRenderAnimation();
+        doRenderEvent();
+      }
+    }, [dataType === exports.CanvasDataType.MARKER ? props.renderConfig : undefined]); // --------------------------------------------------------------------------
     // Lifecycle: 외부 selectedItems 동기화
     // --------------------------------------------------------------------------
 
@@ -6725,7 +6743,7 @@
    *
    * ## 📊 데이터 형식
    * ```typescript
-   * const data: KonvaCanvasMarkerData<T>[] = [
+   * const data: KonvaCanvasData<T>[] = [
    *   {
    *     id: 'unique-id',
    *     position: new Position(lat, lng),

package/package.json

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