@mint-ui/map 1.2.0-test.45 → 1.2.0-test.47

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

@@ -85,6 +85,7 @@ export interface RenderBaseParams<T> {
     items: CanvasData<T>[];
     selectedIds: Set<string>;
     hoveredItem?: CanvasData<T> | null;
+    selectedItem?: CanvasData<T> | null;
     utils: RenderUtils<T>;
 }
 /**

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

@@ -4,11 +4,65 @@ import { CanvasData } from "../shared";
 export { WoongCanvasProvider, LRUCache, SpatialHashGrid } from "../shared";
 export type { CanvasOption, CanvasData, RenderUtils } from "../shared";
 /**
- * WoongCanvasPolygon Props
+ * 폴리곤 스타일 정의
+ */
+export interface PolygonStyle {
+    /** 채우기 색상 */
+    fillColor: string;
+    /** 테두리 색상 */
+    strokeColor: string;
+    /** 테두리 두께 */
+    lineWidth: number;
+}
+/**
+ * 폴리곤 스타일 컨텍스트 (선택/호버/활성 상태 정보)
+ */
+export interface PolygonStyleContext {
+    /** 선택 여부 */
+    isSelected: boolean;
+    /** 호버 여부 */
+    isHovered: boolean;
+    /** 활성 여부 (마지막 선택된 항목) */
+    isActive: boolean;
+}
+/**
+ * 폴리곤 스타일 함수 타입
  *
- * @template T 폴리곤 데이터의 추가 속성 타입
+ * item 데이터와 상태 정보를 기반으로 자유롭게 스타일을 결정할 수 있습니다.
+ *
+ * @param item 폴리곤 데이터
+ * @param context 선택/호버/활성 상태 정보
+ * @returns 폴리곤 스타일
+ *
+ * @example
+ * ```typescript
+ * getStyle={(item, context) => {
+ *   // item의 속성에 따라 동적으로 스타일 결정
+ *   if (item.someProperty > 100) {
+ *     return { fillColor: 'red', strokeColor: 'darkred', lineWidth: 3 };
+ *   }
+ *
+ *   // 상태 정보를 기반으로 스타일 결정
+ *   if (context.isActive) {
+ *     return { fillColor: 'yellow', strokeColor: 'orange', lineWidth: 5 };
+ *   }
+ *   if (context.isHovered) {
+ *     return { fillColor: 'blue', strokeColor: 'darkblue', lineWidth: 3 };
+ *   }
+ *   if (context.isSelected) {
+ *     return { fillColor: 'green', strokeColor: 'darkgreen', lineWidth: 4 };
+ *   }
+ *
+ *   // 기본 스타일
+ *   return { fillColor: 'gray', strokeColor: 'black', lineWidth: 2 };
+ * }}
+ * ```
  */
-export interface WoongCanvasPolygonProps<T> extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
+export declare type PolygonStyleFunction<T> = (item: CanvasData<T>, context: PolygonStyleContext) => PolygonStyle;
+/**
+ * 공통 Props (두 방식 모두 공통)
+ */
+interface WoongCanvasPolygonBaseProps<T> extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
     /** 렌더링할 폴리곤 데이터 배열 */
     data: CanvasData<T>[];
     /** 폴리곤 클릭 시 호출되는 콜백 함수 */
@@ -27,6 +81,13 @@ export interface WoongCanvasPolygonProps<T> extends Pick<MarkerOptions, 'zIndex'
     selectedItem?: CanvasData<T> | null;
     /** 상호작용 비활성화 여부 (기본값: false) */
     disableInteraction?: boolean;
+}
+/**
+ * 개별 Props 방식 (기존 방식)
+ *
+ * baseFillColor, baseStrokeColor, baseLineWidth가 있으면 자동으로 개별 props 방식으로 인식됩니다.
+ */
+interface WoongCanvasPolygonPropsWithIndividualStyles<T> extends WoongCanvasPolygonBaseProps<T> {
     /** 기본 폴리곤 채우기 색상 (필수) */
     baseFillColor: string;
     /** 기본 폴리곤 테두리 색상 (필수) */
@@ -51,7 +112,68 @@ export interface WoongCanvasPolygonProps<T> extends Pick<MarkerOptions, 'zIndex'
     hoveredStrokeColor?: string;
     /** Hover 시 폴리곤 테두리 두께 */
     hoveredLineWidth?: number;
+    /** 함수 방식 props는 사용 불가 */
+    renderStyle?: never;
+}
+/**
+ * 함수 Props 방식 (새로운 방식)
+ *
+ * renderStyle 함수가 있으면 자동으로 함수 방식으로 인식됩니다.
+ * item 데이터와 상태 정보를 기반으로 자유롭게 스타일을 커스터마이징할 수 있습니다.
+ *
+ * @example
+ * ```typescript
+ * renderStyle={(item, context) => {
+ *   // item의 속성에 따라 동적으로 스타일 결정
+ *   if (item.someProperty > 100) {
+ *     return { fillColor: 'red', strokeColor: 'darkred', lineWidth: 3 };
+ *   }
+ *   // 상태 정보를 기반으로 스타일 결정
+ *   if (context.isActive) {
+ *     return { fillColor: 'yellow', strokeColor: 'orange', lineWidth: 5 };
+ *   }
+ *   // ...
+ * }}
+ * ```
+ */
+interface WoongCanvasPolygonPropsWithFunctionStyle<T> extends WoongCanvasPolygonBaseProps<T> {
+    /**
+     * 폴리곤 스타일 함수 (item 데이터와 상태 정보를 기반으로 스타일 반환)
+     *
+     * @param item 폴리곤 데이터 (item의 속성을 기반으로 자유롭게 스타일 커스터마이징 가능)
+     * @param context 선택/호버/활성 상태 정보
+     * @returns 폴리곤 스타일
+     */
+    renderStyle: PolygonStyleFunction<T>;
+    /** 개별 props는 사용 불가 */
+    baseFillColor?: never;
+    baseStrokeColor?: never;
+    baseLineWidth?: never;
+    selectedFillColor?: never;
+    selectedStrokeColor?: never;
+    selectedLineWidth?: never;
+    activeFillColor?: never;
+    activeStrokeColor?: never;
+    activeLineWidth?: never;
+    hoveredFillColor?: never;
+    hoveredStrokeColor?: never;
+    hoveredLineWidth?: never;
 }
+/**
+ * WoongCanvasPolygon Props (Discriminated Union)
+ *
+ * 두 가지 스타일 지정 방식을 지원:
+ * 1. 개별 props 방식: baseFillColor, baseStrokeColor, baseLineWidth가 있으면 자동으로 개별 props 방식
+ * 2. 함수 방식: renderStyle 함수가 있으면 자동으로 함수 방식
+ *
+ * 두 방식은 동시에 사용할 수 없습니다 (mutually exclusive).
+ * styleMode prop은 필요 없으며, renderStyle 또는 baseFillColor의 존재 여부로 자동 판단됩니다.
+ *
+ * 함수 방식에서는 item 데이터를 기반으로 자유롭게 스타일을 커스터마이징할 수 있습니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ */
+export declare type WoongCanvasPolygonProps<T> = WoongCanvasPolygonPropsWithIndividualStyles<T> | WoongCanvasPolygonPropsWithFunctionStyle<T>;
 declare const WoongCanvasPolygon: <T>(props: WoongCanvasPolygonProps<T>) => React.ReactPortal;
 /**
  * WoongCanvasPolygon - Konva 기반 고성능 폴리곤 렌더링 컴포넌트

package/dist/components/mint-map/core/advanced/woongCanvasPolygon/WoongCanvasPolygon.js

@@ -39,23 +39,16 @@ var WoongCanvasPolygon = function (props) {
       externalSelectedItem = props.selectedItem,
       _e = props.disableInteraction,
       disableInteraction = _e === void 0 ? false : _e,
-      baseFillColor = props.baseFillColor,
-      baseStrokeColor = props.baseStrokeColor,
-      baseLineWidth = props.baseLineWidth,
-      selectedFillColor = props.selectedFillColor,
-      selectedStrokeColor = props.selectedStrokeColor,
-      selectedLineWidth = props.selectedLineWidth,
-      activeFillColor = props.activeFillColor,
-      activeStrokeColor = props.activeStrokeColor,
-      activeLineWidth = props.activeLineWidth,
-      hoveredFillColor = props.hoveredFillColor,
-      hoveredStrokeColor = props.hoveredStrokeColor,
-      hoveredLineWidth = props.hoveredLineWidth,
-      options = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "baseFillColor", "baseStrokeColor", "baseLineWidth", "selectedFillColor", "selectedStrokeColor", "selectedLineWidth", "activeFillColor", "activeStrokeColor", "activeLineWidth", "hoveredFillColor", "hoveredStrokeColor", "hoveredLineWidth"]); // --------------------------------------------------------------------------
+      options = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // renderStyle이 있으면 함수 방식, baseFillColor가 있으면 개별 props 방식
+
+
+  var isFunctionMode = 'renderStyle' in props && props.renderStyle !== undefined; // 개별 props 방식일 때만 추출
+
+  var individualProps = isFunctionMode ? undefined : props;
+  var functionProps = isFunctionMode ? props : undefined; // --------------------------------------------------------------------------
   // Hooks & Context
   // --------------------------------------------------------------------------
 
-
   var controller = MintMapProvider.useMintMapController();
   var context$1 = context.useWoongCanvasContext();
   var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // DOM Refs
@@ -157,10 +150,14 @@ var WoongCanvasPolygon = function (props) {
     getOrComputeMarkerOffset: function () {
       return null;
     }
-  }; // 렌더링 함수 생성
+  }; // 렌더링 함수 생성 (스타일 지정 방식에 따라 분기)
 
-  var renderBase = renderer.renderPolygonBase(baseFillColor, baseStrokeColor, baseLineWidth);
-  var renderEvent = renderer.renderPolygonEvent(baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth); // Base Layer 렌더링 (뷰포트 컬링 적용)
+  var renderBase = isFunctionMode && functionProps ? renderer.renderPolygonBaseWithFunction(functionProps.renderStyle) : individualProps ? renderer.renderPolygonBase(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth) : function () {
+    throw new Error('Invalid props: either renderStyle or individual style props must be provided');
+  }();
+  var renderEvent = isFunctionMode && functionProps ? renderer.renderPolygonEventWithFunction(functionProps.renderStyle) : individualProps ? renderer.renderPolygonEvent(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth, individualProps.selectedFillColor, individualProps.selectedStrokeColor, individualProps.selectedLineWidth, individualProps.activeFillColor, individualProps.activeStrokeColor, individualProps.activeLineWidth, individualProps.hoveredFillColor, individualProps.hoveredStrokeColor, individualProps.hoveredLineWidth) : function () {
+    throw new Error('Invalid props: either renderStyle or individual style props must be provided');
+  }(); // Base Layer 렌더링 (뷰포트 컬링 적용)
 
   var doRenderBase = function () {
     var layer = baseLayerRef.current;
@@ -332,9 +329,9 @@ var WoongCanvasPolygon = function (props) {
       }
 
       selectedIdsRef.current = newSelected;
-    }
+    } // Event Layer 업데이트 (선택된 항목 표시)
+
 
-    doRenderBase();
     doRenderEvent();
   }; // 클릭 이벤트 핸들러
 

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

@@ -5,6 +5,7 @@
  * GeoJSON MultiPolygon 형식을 지원하며, 도넛 폴리곤(구멍이 있는 폴리곤)도 처리할 수 있습니다.
  */
 import { CustomRenderBase, CustomRenderEvent } from "../shared/types";
+import type { PolygonStyleFunction } from "./WoongCanvasPolygon";
 /**
  * 폴리곤 그리기 파라미터 인터페이스
  */
@@ -117,4 +118,66 @@ export declare const renderPolygonBase: <T = any>(baseFillColor: string, baseStr
  * ```
  */
 export declare const renderPolygonEvent: <T = any>(baseFillColor: string, baseStrokeColor: string, baseLineWidth: number, selectedFillColor?: string, selectedStrokeColor?: string, selectedLineWidth?: number, activeFillColor?: string, activeStrokeColor?: string, activeLineWidth?: number, hoveredFillColor?: string, hoveredStrokeColor?: string, hoveredLineWidth?: number) => CustomRenderEvent<T>;
+/**
+ * 폴리곤 Base 렌더링 함수 팩토리 (함수 방식)
+ *
+ * Base Layer에서 사용할 렌더링 함수를 생성합니다.
+ * renderStyle 함수를 사용하여 각 폴리곤의 상태에 따라 스타일을 동적으로 결정합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param renderStyle 폴리곤 스타일 함수
+ * @returns Base Layer 렌더링 함수
+ *
+ * @remarks
+ * - 선택된 항목은 Event Layer에서 그려지므로 Base Layer에서는 스킵
+ * - 성능: O(n), n은 렌더링할 폴리곤 개수
+ * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+ *
+ * @example
+ * ```typescript
+ * const renderBase = renderPolygonBaseWithFunction<MyDataType>(
+ *   (item, context) => ({
+ *     fillColor: 'rgba(255, 100, 100, 0.5)',
+ *     strokeColor: 'rgba(200, 50, 50, 0.8)',
+ *     lineWidth: 2
+ *   })
+ * );
+ * ```
+ */
+export declare const renderPolygonBaseWithFunction: <T = any>(renderStyle: PolygonStyleFunction<T>) => CustomRenderBase<T>;
+/**
+ * 폴리곤 Event 렌더링 함수 팩토리 (함수 방식)
+ *
+ * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+ * renderStyle 함수를 사용하여 각 폴리곤의 상태에 따라 스타일을 동적으로 결정합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param renderStyle 폴리곤 스타일 함수
+ * @returns Event Layer 렌더링 함수
+ *
+ * @remarks
+ * - **렌더링 순서**: 선택된 항목 → 마지막 선택된 항목 → hover된 항목 (최상단)
+ * - **성능**: O(m), m은 선택된 항목 수 + hover된 항목 수
+ * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+ * - hover된 항목이 선택되어 있으면 active 스타일 적용
+ *
+ * @example
+ * ```typescript
+ * const renderEvent = renderPolygonEventWithFunction<MyDataType>(
+ *   (item, context) => {
+ *     if (context.isActive) {
+ *       return { fillColor: 'rgba(255, 152, 0, 0.8)', strokeColor: 'rgba(255, 87, 34, 1)', lineWidth: 5 };
+ *     }
+ *     if (context.isHovered) {
+ *       return { fillColor: 'rgba(100, 150, 255, 0.8)', strokeColor: 'rgba(0, 100, 200, 1)', lineWidth: 3 };
+ *     }
+ *     if (context.isSelected) {
+ *       return { fillColor: 'rgba(255, 193, 7, 0.7)', strokeColor: 'rgba(255, 152, 0, 1)', lineWidth: 4 };
+ *     }
+ *     return { fillColor: 'rgba(255, 100, 100, 0.5)', strokeColor: 'rgba(200, 50, 50, 0.8)', lineWidth: 2 };
+ *   }
+ * );
+ * ```
+ */
+export declare const renderPolygonEventWithFunction: <T = any>(renderStyle: PolygonStyleFunction<T>) => CustomRenderEvent<T>;
 export {};

package/dist/components/mint-map/core/advanced/woongCanvasPolygon/renderer.js

@@ -289,7 +289,190 @@ var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth
     }
   };
 };
+/**
+ * 폴리곤 Base 렌더링 함수 팩토리 (함수 방식)
+ *
+ * Base Layer에서 사용할 렌더링 함수를 생성합니다.
+ * renderStyle 함수를 사용하여 각 폴리곤의 상태에 따라 스타일을 동적으로 결정합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param renderStyle 폴리곤 스타일 함수
+ * @returns Base Layer 렌더링 함수
+ *
+ * @remarks
+ * - 선택된 항목은 Event Layer에서 그려지므로 Base Layer에서는 스킵
+ * - 성능: O(n), n은 렌더링할 폴리곤 개수
+ * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+ *
+ * @example
+ * ```typescript
+ * const renderBase = renderPolygonBaseWithFunction<MyDataType>(
+ *   (item, context) => ({
+ *     fillColor: 'rgba(255, 100, 100, 0.5)',
+ *     strokeColor: 'rgba(200, 50, 50, 0.8)',
+ *     lineWidth: 2
+ *   })
+ * );
+ * ```
+ */
+
+var renderPolygonBaseWithFunction = function (renderStyle) {
+  return function (_a) {
+    var ctx = _a.ctx,
+        items = _a.items,
+        selectedIds = _a.selectedIds,
+        utils = _a.utils;
+
+    for (var _i = 0, items_2 = items; _i < items_2.length; _i++) {
+      var item = items_2[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
+
+      if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+
+      if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
+
+      var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+      if (!polygonOffsets) continue; // 스타일 함수로 스타일 가져오기 (Base Layer는 선택되지 않은 항목만)
+
+      var context = {
+        isSelected: false,
+        isHovered: false,
+        isActive: false
+      };
+      var style = renderStyle(item, context); // 폴리곤 그리기
+
+      drawPolygon({
+        ctx: ctx,
+        polygonOffsets: polygonOffsets,
+        isDonutPolygon: item.isDonutPolygon || false,
+        fillColor: style.fillColor,
+        strokeColor: style.strokeColor,
+        lineWidth: style.lineWidth
+      });
+    }
+  };
+};
+/**
+ * 폴리곤 Event 렌더링 함수 팩토리 (함수 방식)
+ *
+ * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+ * renderStyle 함수를 사용하여 각 폴리곤의 상태에 따라 스타일을 동적으로 결정합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param renderStyle 폴리곤 스타일 함수
+ * @returns Event Layer 렌더링 함수
+ *
+ * @remarks
+ * - **렌더링 순서**: 선택된 항목 → 마지막 선택된 항목 → hover된 항목 (최상단)
+ * - **성능**: O(m), m은 선택된 항목 수 + hover된 항목 수
+ * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+ * - hover된 항목이 선택되어 있으면 active 스타일 적용
+ *
+ * @example
+ * ```typescript
+ * const renderEvent = renderPolygonEventWithFunction<MyDataType>(
+ *   (item, context) => {
+ *     if (context.isActive) {
+ *       return { fillColor: 'rgba(255, 152, 0, 0.8)', strokeColor: 'rgba(255, 87, 34, 1)', lineWidth: 5 };
+ *     }
+ *     if (context.isHovered) {
+ *       return { fillColor: 'rgba(100, 150, 255, 0.8)', strokeColor: 'rgba(0, 100, 200, 1)', lineWidth: 3 };
+ *     }
+ *     if (context.isSelected) {
+ *       return { fillColor: 'rgba(255, 193, 7, 0.7)', strokeColor: 'rgba(255, 152, 0, 1)', lineWidth: 4 };
+ *     }
+ *     return { fillColor: 'rgba(255, 100, 100, 0.5)', strokeColor: 'rgba(200, 50, 50, 0.8)', lineWidth: 2 };
+ *   }
+ * );
+ * ```
+ */
+
+var renderPolygonEventWithFunction = function (renderStyle) {
+  return function (_a) {
+    var ctx = _a.ctx,
+        hoveredItem = _a.hoveredItem,
+        utils = _a.utils,
+        selectedItems = _a.selectedItems,
+        selectedItem = _a.selectedItem;
+    var selectedIdsSet = selectedItems ? new Set(selectedItems.map(function (item) {
+      return item.id;
+    })) : new Set();
+    var hoveredItemId = hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id;
+    var selectedItemId = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id; // 1. 선택된 항목들 그리기 (마지막 선택 항목과 호버된 항목 제외)
+
+    if (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) {
+      for (var _i = 0, selectedItems_2 = selectedItems; _i < selectedItems_2.length; _i++) {
+        var item = selectedItems_2[_i]; // 마지막 선택 항목과 호버된 항목은 나중에 따로 그림
+
+        if (item.id === selectedItemId || item.id === hoveredItemId) continue;
+        if (!item.paths) continue;
+        var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+        if (!polygonOffsets) continue;
+        var context = {
+          isSelected: true,
+          isHovered: false,
+          isActive: false
+        };
+        var style = renderStyle(item, context);
+        drawPolygon({
+          ctx: ctx,
+          polygonOffsets: polygonOffsets,
+          isDonutPolygon: item.isDonutPolygon || false,
+          fillColor: style.fillColor,
+          strokeColor: style.strokeColor,
+          lineWidth: style.lineWidth
+        });
+      }
+    } // 2. 마지막 선택된 항목 그리기 (호버되지 않은 경우)
+
+
+    if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.paths) && hoveredItemId !== selectedItemId) {
+      var polygonOffsets = utils.getOrComputePolygonOffsets(selectedItem);
+
+      if (polygonOffsets) {
+        var context = {
+          isSelected: true,
+          isHovered: false,
+          isActive: true
+        };
+        var style = renderStyle(selectedItem, context);
+        drawPolygon({
+          ctx: ctx,
+          polygonOffsets: polygonOffsets,
+          isDonutPolygon: selectedItem.isDonutPolygon || false,
+          fillColor: style.fillColor,
+          strokeColor: style.strokeColor,
+          lineWidth: style.lineWidth
+        });
+      }
+    } // 3. 호버된 항목 그리기 (가장 위에 표시)
+
+
+    if (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.paths) {
+      var polygonOffsets = utils.getOrComputePolygonOffsets(hoveredItem);
+      if (!polygonOffsets) return; // 좌표 변환 실패 시 스킵 (return은 렌더링 함수 종료)
+      // hover된 항목이 선택되어 있는지 확인
+
+      var isSelected = selectedIdsSet.has(hoveredItem.id);
+      var context = {
+        isSelected: isSelected,
+        isHovered: true,
+        isActive: isSelected && hoveredItem.id === selectedItemId
+      };
+      var style = renderStyle(hoveredItem, context);
+      drawPolygon({
+        ctx: ctx,
+        polygonOffsets: polygonOffsets,
+        isDonutPolygon: hoveredItem.isDonutPolygon || false,
+        fillColor: style.fillColor,
+        strokeColor: style.strokeColor,
+        lineWidth: style.lineWidth
+      });
+    }
+  };
+};
 
 exports.drawPolygon = drawPolygon;
 exports.renderPolygonBase = renderPolygonBase;
+exports.renderPolygonBaseWithFunction = renderPolygonBaseWithFunction;
 exports.renderPolygonEvent = renderPolygonEvent;
+exports.renderPolygonEventWithFunction = renderPolygonEventWithFunction;

package/dist/index.es.js

@@ -6551,6 +6551,187 @@ var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth
     }
   };
 };
+/**
+ * 폴리곤 Base 렌더링 함수 팩토리 (함수 방식)
+ *
+ * Base Layer에서 사용할 렌더링 함수를 생성합니다.
+ * renderStyle 함수를 사용하여 각 폴리곤의 상태에 따라 스타일을 동적으로 결정합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param renderStyle 폴리곤 스타일 함수
+ * @returns Base Layer 렌더링 함수
+ *
+ * @remarks
+ * - 선택된 항목은 Event Layer에서 그려지므로 Base Layer에서는 스킵
+ * - 성능: O(n), n은 렌더링할 폴리곤 개수
+ * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+ *
+ * @example
+ * ```typescript
+ * const renderBase = renderPolygonBaseWithFunction<MyDataType>(
+ *   (item, context) => ({
+ *     fillColor: 'rgba(255, 100, 100, 0.5)',
+ *     strokeColor: 'rgba(200, 50, 50, 0.8)',
+ *     lineWidth: 2
+ *   })
+ * );
+ * ```
+ */
+
+var renderPolygonBaseWithFunction = function (renderStyle) {
+  return function (_a) {
+    var ctx = _a.ctx,
+        items = _a.items,
+        selectedIds = _a.selectedIds,
+        utils = _a.utils;
+
+    for (var _i = 0, items_2 = items; _i < items_2.length; _i++) {
+      var item = items_2[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
+
+      if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+
+      if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
+
+      var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+      if (!polygonOffsets) continue; // 스타일 함수로 스타일 가져오기 (Base Layer는 선택되지 않은 항목만)
+
+      var context = {
+        isSelected: false,
+        isHovered: false,
+        isActive: false
+      };
+      var style = renderStyle(item, context); // 폴리곤 그리기
+
+      drawPolygon({
+        ctx: ctx,
+        polygonOffsets: polygonOffsets,
+        isDonutPolygon: item.isDonutPolygon || false,
+        fillColor: style.fillColor,
+        strokeColor: style.strokeColor,
+        lineWidth: style.lineWidth
+      });
+    }
+  };
+};
+/**
+ * 폴리곤 Event 렌더링 함수 팩토리 (함수 방식)
+ *
+ * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+ * renderStyle 함수를 사용하여 각 폴리곤의 상태에 따라 스타일을 동적으로 결정합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param renderStyle 폴리곤 스타일 함수
+ * @returns Event Layer 렌더링 함수
+ *
+ * @remarks
+ * - **렌더링 순서**: 선택된 항목 → 마지막 선택된 항목 → hover된 항목 (최상단)
+ * - **성능**: O(m), m은 선택된 항목 수 + hover된 항목 수
+ * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+ * - hover된 항목이 선택되어 있으면 active 스타일 적용
+ *
+ * @example
+ * ```typescript
+ * const renderEvent = renderPolygonEventWithFunction<MyDataType>(
+ *   (item, context) => {
+ *     if (context.isActive) {
+ *       return { fillColor: 'rgba(255, 152, 0, 0.8)', strokeColor: 'rgba(255, 87, 34, 1)', lineWidth: 5 };
+ *     }
+ *     if (context.isHovered) {
+ *       return { fillColor: 'rgba(100, 150, 255, 0.8)', strokeColor: 'rgba(0, 100, 200, 1)', lineWidth: 3 };
+ *     }
+ *     if (context.isSelected) {
+ *       return { fillColor: 'rgba(255, 193, 7, 0.7)', strokeColor: 'rgba(255, 152, 0, 1)', lineWidth: 4 };
+ *     }
+ *     return { fillColor: 'rgba(255, 100, 100, 0.5)', strokeColor: 'rgba(200, 50, 50, 0.8)', lineWidth: 2 };
+ *   }
+ * );
+ * ```
+ */
+
+var renderPolygonEventWithFunction = function (renderStyle) {
+  return function (_a) {
+    var ctx = _a.ctx,
+        hoveredItem = _a.hoveredItem,
+        utils = _a.utils,
+        selectedItems = _a.selectedItems,
+        selectedItem = _a.selectedItem;
+    var selectedIdsSet = selectedItems ? new Set(selectedItems.map(function (item) {
+      return item.id;
+    })) : new Set();
+    var hoveredItemId = hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id;
+    var selectedItemId = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id; // 1. 선택된 항목들 그리기 (마지막 선택 항목과 호버된 항목 제외)
+
+    if (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) {
+      for (var _i = 0, selectedItems_2 = selectedItems; _i < selectedItems_2.length; _i++) {
+        var item = selectedItems_2[_i]; // 마지막 선택 항목과 호버된 항목은 나중에 따로 그림
+
+        if (item.id === selectedItemId || item.id === hoveredItemId) continue;
+        if (!item.paths) continue;
+        var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+        if (!polygonOffsets) continue;
+        var context = {
+          isSelected: true,
+          isHovered: false,
+          isActive: false
+        };
+        var style = renderStyle(item, context);
+        drawPolygon({
+          ctx: ctx,
+          polygonOffsets: polygonOffsets,
+          isDonutPolygon: item.isDonutPolygon || false,
+          fillColor: style.fillColor,
+          strokeColor: style.strokeColor,
+          lineWidth: style.lineWidth
+        });
+      }
+    } // 2. 마지막 선택된 항목 그리기 (호버되지 않은 경우)
+
+
+    if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.paths) && hoveredItemId !== selectedItemId) {
+      var polygonOffsets = utils.getOrComputePolygonOffsets(selectedItem);
+
+      if (polygonOffsets) {
+        var context = {
+          isSelected: true,
+          isHovered: false,
+          isActive: true
+        };
+        var style = renderStyle(selectedItem, context);
+        drawPolygon({
+          ctx: ctx,
+          polygonOffsets: polygonOffsets,
+          isDonutPolygon: selectedItem.isDonutPolygon || false,
+          fillColor: style.fillColor,
+          strokeColor: style.strokeColor,
+          lineWidth: style.lineWidth
+        });
+      }
+    } // 3. 호버된 항목 그리기 (가장 위에 표시)
+
+
+    if (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.paths) {
+      var polygonOffsets = utils.getOrComputePolygonOffsets(hoveredItem);
+      if (!polygonOffsets) return; // 좌표 변환 실패 시 스킵 (return은 렌더링 함수 종료)
+      // hover된 항목이 선택되어 있는지 확인
+
+      var isSelected = selectedIdsSet.has(hoveredItem.id);
+      var context = {
+        isSelected: isSelected,
+        isHovered: true,
+        isActive: isSelected && hoveredItem.id === selectedItemId
+      };
+      var style = renderStyle(hoveredItem, context);
+      drawPolygon({
+        ctx: ctx,
+        polygonOffsets: polygonOffsets,
+        isDonutPolygon: hoveredItem.isDonutPolygon || false,
+        fillColor: style.fillColor,
+        strokeColor: style.strokeColor,
+        lineWidth: style.lineWidth
+      });
+    }
+  };
+};
 
 var WoongCanvasPolygon = function (props) {
   var data = props.data,
@@ -6567,23 +6748,16 @@ var WoongCanvasPolygon = function (props) {
       externalSelectedItem = props.selectedItem,
       _e = props.disableInteraction,
       disableInteraction = _e === void 0 ? false : _e,
-      baseFillColor = props.baseFillColor,
-      baseStrokeColor = props.baseStrokeColor,
-      baseLineWidth = props.baseLineWidth,
-      selectedFillColor = props.selectedFillColor,
-      selectedStrokeColor = props.selectedStrokeColor,
-      selectedLineWidth = props.selectedLineWidth,
-      activeFillColor = props.activeFillColor,
-      activeStrokeColor = props.activeStrokeColor,
-      activeLineWidth = props.activeLineWidth,
-      hoveredFillColor = props.hoveredFillColor,
-      hoveredStrokeColor = props.hoveredStrokeColor,
-      hoveredLineWidth = props.hoveredLineWidth,
-      options = __rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "baseFillColor", "baseStrokeColor", "baseLineWidth", "selectedFillColor", "selectedStrokeColor", "selectedLineWidth", "activeFillColor", "activeStrokeColor", "activeLineWidth", "hoveredFillColor", "hoveredStrokeColor", "hoveredLineWidth"]); // --------------------------------------------------------------------------
+      options = __rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // renderStyle이 있으면 함수 방식, baseFillColor가 있으면 개별 props 방식
+
+
+  var isFunctionMode = 'renderStyle' in props && props.renderStyle !== undefined; // 개별 props 방식일 때만 추출
+
+  var individualProps = isFunctionMode ? undefined : props;
+  var functionProps = isFunctionMode ? props : undefined; // --------------------------------------------------------------------------
   // Hooks & Context
   // --------------------------------------------------------------------------
 
-
   var controller = useMintMapController();
   var context = useWoongCanvasContext();
   var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // DOM Refs
@@ -6685,10 +6859,14 @@ var WoongCanvasPolygon = function (props) {
     getOrComputeMarkerOffset: function () {
       return null;
     }
-  }; // 렌더링 함수 생성
+  }; // 렌더링 함수 생성 (스타일 지정 방식에 따라 분기)
 
-  var renderBase = renderPolygonBase(baseFillColor, baseStrokeColor, baseLineWidth);
-  var renderEvent = renderPolygonEvent(baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth); // Base Layer 렌더링 (뷰포트 컬링 적용)
+  var renderBase = isFunctionMode && functionProps ? renderPolygonBaseWithFunction(functionProps.renderStyle) : individualProps ? renderPolygonBase(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth) : function () {
+    throw new Error('Invalid props: either renderStyle or individual style props must be provided');
+  }();
+  var renderEvent = isFunctionMode && functionProps ? renderPolygonEventWithFunction(functionProps.renderStyle) : individualProps ? renderPolygonEvent(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth, individualProps.selectedFillColor, individualProps.selectedStrokeColor, individualProps.selectedLineWidth, individualProps.activeFillColor, individualProps.activeStrokeColor, individualProps.activeLineWidth, individualProps.hoveredFillColor, individualProps.hoveredStrokeColor, individualProps.hoveredLineWidth) : function () {
+    throw new Error('Invalid props: either renderStyle or individual style props must be provided');
+  }(); // Base Layer 렌더링 (뷰포트 컬링 적용)
 
   var doRenderBase = function () {
     var layer = baseLayerRef.current;
@@ -6860,9 +7038,9 @@ var WoongCanvasPolygon = function (props) {
       }
 
       selectedIdsRef.current = newSelected;
-    }
+    } // Event Layer 업데이트 (선택된 항목 표시)
+
 
-    doRenderBase();
     doRenderEvent();
   }; // 클릭 이벤트 핸들러
 

package/dist/index.umd.js

@@ -6555,6 +6555,187 @@
       }
     };
   };
+  /**
+   * 폴리곤 Base 렌더링 함수 팩토리 (함수 방식)
+   *
+   * Base Layer에서 사용할 렌더링 함수를 생성합니다.
+   * renderStyle 함수를 사용하여 각 폴리곤의 상태에 따라 스타일을 동적으로 결정합니다.
+   *
+   * @template T 폴리곤 데이터의 추가 속성 타입
+   * @param renderStyle 폴리곤 스타일 함수
+   * @returns Base Layer 렌더링 함수
+   *
+   * @remarks
+   * - 선택된 항목은 Event Layer에서 그려지므로 Base Layer에서는 스킵
+   * - 성능: O(n), n은 렌더링할 폴리곤 개수
+   * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+   *
+   * @example
+   * ```typescript
+   * const renderBase = renderPolygonBaseWithFunction<MyDataType>(
+   *   (item, context) => ({
+   *     fillColor: 'rgba(255, 100, 100, 0.5)',
+   *     strokeColor: 'rgba(200, 50, 50, 0.8)',
+   *     lineWidth: 2
+   *   })
+   * );
+   * ```
+   */
+
+  var renderPolygonBaseWithFunction = function (renderStyle) {
+    return function (_a) {
+      var ctx = _a.ctx,
+          items = _a.items,
+          selectedIds = _a.selectedIds,
+          utils = _a.utils;
+
+      for (var _i = 0, items_2 = items; _i < items_2.length; _i++) {
+        var item = items_2[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
+
+        if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+
+        if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
+
+        var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+        if (!polygonOffsets) continue; // 스타일 함수로 스타일 가져오기 (Base Layer는 선택되지 않은 항목만)
+
+        var context = {
+          isSelected: false,
+          isHovered: false,
+          isActive: false
+        };
+        var style = renderStyle(item, context); // 폴리곤 그리기
+
+        drawPolygon({
+          ctx: ctx,
+          polygonOffsets: polygonOffsets,
+          isDonutPolygon: item.isDonutPolygon || false,
+          fillColor: style.fillColor,
+          strokeColor: style.strokeColor,
+          lineWidth: style.lineWidth
+        });
+      }
+    };
+  };
+  /**
+   * 폴리곤 Event 렌더링 함수 팩토리 (함수 방식)
+   *
+   * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+   * renderStyle 함수를 사용하여 각 폴리곤의 상태에 따라 스타일을 동적으로 결정합니다.
+   *
+   * @template T 폴리곤 데이터의 추가 속성 타입
+   * @param renderStyle 폴리곤 스타일 함수
+   * @returns Event Layer 렌더링 함수
+   *
+   * @remarks
+   * - **렌더링 순서**: 선택된 항목 → 마지막 선택된 항목 → hover된 항목 (최상단)
+   * - **성능**: O(m), m은 선택된 항목 수 + hover된 항목 수
+   * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+   * - hover된 항목이 선택되어 있으면 active 스타일 적용
+   *
+   * @example
+   * ```typescript
+   * const renderEvent = renderPolygonEventWithFunction<MyDataType>(
+   *   (item, context) => {
+   *     if (context.isActive) {
+   *       return { fillColor: 'rgba(255, 152, 0, 0.8)', strokeColor: 'rgba(255, 87, 34, 1)', lineWidth: 5 };
+   *     }
+   *     if (context.isHovered) {
+   *       return { fillColor: 'rgba(100, 150, 255, 0.8)', strokeColor: 'rgba(0, 100, 200, 1)', lineWidth: 3 };
+   *     }
+   *     if (context.isSelected) {
+   *       return { fillColor: 'rgba(255, 193, 7, 0.7)', strokeColor: 'rgba(255, 152, 0, 1)', lineWidth: 4 };
+   *     }
+   *     return { fillColor: 'rgba(255, 100, 100, 0.5)', strokeColor: 'rgba(200, 50, 50, 0.8)', lineWidth: 2 };
+   *   }
+   * );
+   * ```
+   */
+
+  var renderPolygonEventWithFunction = function (renderStyle) {
+    return function (_a) {
+      var ctx = _a.ctx,
+          hoveredItem = _a.hoveredItem,
+          utils = _a.utils,
+          selectedItems = _a.selectedItems,
+          selectedItem = _a.selectedItem;
+      var selectedIdsSet = selectedItems ? new Set(selectedItems.map(function (item) {
+        return item.id;
+      })) : new Set();
+      var hoveredItemId = hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id;
+      var selectedItemId = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id; // 1. 선택된 항목들 그리기 (마지막 선택 항목과 호버된 항목 제외)
+
+      if (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) {
+        for (var _i = 0, selectedItems_2 = selectedItems; _i < selectedItems_2.length; _i++) {
+          var item = selectedItems_2[_i]; // 마지막 선택 항목과 호버된 항목은 나중에 따로 그림
+
+          if (item.id === selectedItemId || item.id === hoveredItemId) continue;
+          if (!item.paths) continue;
+          var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+          if (!polygonOffsets) continue;
+          var context = {
+            isSelected: true,
+            isHovered: false,
+            isActive: false
+          };
+          var style = renderStyle(item, context);
+          drawPolygon({
+            ctx: ctx,
+            polygonOffsets: polygonOffsets,
+            isDonutPolygon: item.isDonutPolygon || false,
+            fillColor: style.fillColor,
+            strokeColor: style.strokeColor,
+            lineWidth: style.lineWidth
+          });
+        }
+      } // 2. 마지막 선택된 항목 그리기 (호버되지 않은 경우)
+
+
+      if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.paths) && hoveredItemId !== selectedItemId) {
+        var polygonOffsets = utils.getOrComputePolygonOffsets(selectedItem);
+
+        if (polygonOffsets) {
+          var context = {
+            isSelected: true,
+            isHovered: false,
+            isActive: true
+          };
+          var style = renderStyle(selectedItem, context);
+          drawPolygon({
+            ctx: ctx,
+            polygonOffsets: polygonOffsets,
+            isDonutPolygon: selectedItem.isDonutPolygon || false,
+            fillColor: style.fillColor,
+            strokeColor: style.strokeColor,
+            lineWidth: style.lineWidth
+          });
+        }
+      } // 3. 호버된 항목 그리기 (가장 위에 표시)
+
+
+      if (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.paths) {
+        var polygonOffsets = utils.getOrComputePolygonOffsets(hoveredItem);
+        if (!polygonOffsets) return; // 좌표 변환 실패 시 스킵 (return은 렌더링 함수 종료)
+        // hover된 항목이 선택되어 있는지 확인
+
+        var isSelected = selectedIdsSet.has(hoveredItem.id);
+        var context = {
+          isSelected: isSelected,
+          isHovered: true,
+          isActive: isSelected && hoveredItem.id === selectedItemId
+        };
+        var style = renderStyle(hoveredItem, context);
+        drawPolygon({
+          ctx: ctx,
+          polygonOffsets: polygonOffsets,
+          isDonutPolygon: hoveredItem.isDonutPolygon || false,
+          fillColor: style.fillColor,
+          strokeColor: style.strokeColor,
+          lineWidth: style.lineWidth
+        });
+      }
+    };
+  };
 
   var WoongCanvasPolygon = function (props) {
     var data = props.data,
@@ -6571,23 +6752,16 @@
         externalSelectedItem = props.selectedItem,
         _e = props.disableInteraction,
         disableInteraction = _e === void 0 ? false : _e,
-        baseFillColor = props.baseFillColor,
-        baseStrokeColor = props.baseStrokeColor,
-        baseLineWidth = props.baseLineWidth,
-        selectedFillColor = props.selectedFillColor,
-        selectedStrokeColor = props.selectedStrokeColor,
-        selectedLineWidth = props.selectedLineWidth,
-        activeFillColor = props.activeFillColor,
-        activeStrokeColor = props.activeStrokeColor,
-        activeLineWidth = props.activeLineWidth,
-        hoveredFillColor = props.hoveredFillColor,
-        hoveredStrokeColor = props.hoveredStrokeColor,
-        hoveredLineWidth = props.hoveredLineWidth,
-        options = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "baseFillColor", "baseStrokeColor", "baseLineWidth", "selectedFillColor", "selectedStrokeColor", "selectedLineWidth", "activeFillColor", "activeStrokeColor", "activeLineWidth", "hoveredFillColor", "hoveredStrokeColor", "hoveredLineWidth"]); // --------------------------------------------------------------------------
+        options = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // renderStyle이 있으면 함수 방식, baseFillColor가 있으면 개별 props 방식
+
+
+    var isFunctionMode = 'renderStyle' in props && props.renderStyle !== undefined; // 개별 props 방식일 때만 추출
+
+    var individualProps = isFunctionMode ? undefined : props;
+    var functionProps = isFunctionMode ? props : undefined; // --------------------------------------------------------------------------
     // Hooks & Context
     // --------------------------------------------------------------------------
 
-
     var controller = useMintMapController();
     var context = useWoongCanvasContext();
     var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // DOM Refs
@@ -6689,10 +6863,14 @@
       getOrComputeMarkerOffset: function () {
         return null;
       }
-    }; // 렌더링 함수 생성
+    }; // 렌더링 함수 생성 (스타일 지정 방식에 따라 분기)
 
-    var renderBase = renderPolygonBase(baseFillColor, baseStrokeColor, baseLineWidth);
-    var renderEvent = renderPolygonEvent(baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth); // Base Layer 렌더링 (뷰포트 컬링 적용)
+    var renderBase = isFunctionMode && functionProps ? renderPolygonBaseWithFunction(functionProps.renderStyle) : individualProps ? renderPolygonBase(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth) : function () {
+      throw new Error('Invalid props: either renderStyle or individual style props must be provided');
+    }();
+    var renderEvent = isFunctionMode && functionProps ? renderPolygonEventWithFunction(functionProps.renderStyle) : individualProps ? renderPolygonEvent(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth, individualProps.selectedFillColor, individualProps.selectedStrokeColor, individualProps.selectedLineWidth, individualProps.activeFillColor, individualProps.activeStrokeColor, individualProps.activeLineWidth, individualProps.hoveredFillColor, individualProps.hoveredStrokeColor, individualProps.hoveredLineWidth) : function () {
+      throw new Error('Invalid props: either renderStyle or individual style props must be provided');
+    }(); // Base Layer 렌더링 (뷰포트 컬링 적용)
 
     var doRenderBase = function () {
       var layer = baseLayerRef.current;
@@ -6864,9 +7042,9 @@
         }
 
         selectedIdsRef.current = newSelected;
-      }
+      } // Event Layer 업데이트 (선택된 항목 표시)
+
 
-      doRenderBase();
       doRenderEvent();
     }; // 클릭 이벤트 핸들러
 

package/package.json

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