@mint-ui/map 1.2.0-test.55 → 1.2.0-test.57

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

@@ -139,7 +139,13 @@ interface CanvasPolygonLayerPropsWithIndividualStyles<T> extends CanvasPolygonLa
     hoveredLineWidth?: number;
     /** 다른 방식 props는 사용 불가 */
     renderStyle?: never;
-    customStyle?: never;
+    /**
+     * 폴리곤 스타일 커스터마이징 함수 (선택)
+     *
+     * customStyle이 제공되면 우선적으로 사용되며, null/undefined를 반환하면 개별 props로 정의된 기본 스타일을 사용합니다.
+     * item 데이터와 상태 정보를 기반으로 자유롭게 스타일을 커스터마이징할 수 있습니다.
+     */
+    customStyle?: PolygonStyleCustomizer<T>;
 }
 /**
  * 객체 Props 방식
@@ -171,13 +177,19 @@ interface CanvasPolygonLayerPropsWithObjectStyle<T> extends CanvasPolygonLayerBa
     baseFillColor?: never;
     baseLineWidth?: never;
     baseStrokeColor?: never;
-    customStyle?: never;
     hoveredFillColor?: never;
     hoveredLineWidth?: never;
     hoveredStrokeColor?: never;
     selectedFillColor?: never;
     selectedLineWidth?: never;
     selectedStrokeColor?: never;
+    /**
+     * 폴리곤 스타일 커스터마이징 함수 (선택)
+     *
+     * customStyle이 제공되면 우선적으로 사용되며, null/undefined를 반환하면 renderStyle로 정의된 기본 스타일을 사용합니다.
+     * item 데이터와 상태 정보를 기반으로 자유롭게 스타일을 커스터마이징할 수 있습니다.
+     */
+    customStyle?: PolygonStyleCustomizer<T>;
 }
 /**
  * 함수 Props 방식 (커스터마이징 방식)
@@ -240,7 +252,8 @@ interface CanvasPolygonLayerPropsWithCustomStyle<T> extends CanvasPolygonLayerBa
  * 2. 객체 방식: renderStyle 객체가 있으면 자동으로 객체 방식
  * 3. 함수 방식: customStyle 함수가 있으면 자동으로 함수 방식
  *
- * 세 방식은 동시에 사용할 수 없습니다 (mutually exclusive).
+ * customStyle은 개별 props 방식 또는 renderStyle 객체 방식과 함께 사용할 수 있습니다.
+ * customStyle이 제공되면 우선적으로 사용되며, null/undefined를 반환하면 기본 스타일을 사용합니다.
  * styleMode prop은 필요 없으며, 각 prop의 존재 여부로 자동 판단됩니다.
  *
  * @template T 폴리곤 데이터의 추가 속성 타입

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

@@ -39,14 +39,14 @@ var CanvasPolygonLayer = function (props) {
       externalSelectedItem = props.selectedItem,
       _e = props.disableInteraction,
       disableInteraction = _e === void 0 ? false : _e,
-      options = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // 세 가지 방식 중 하나만 선택: customStyle > renderStyle > 개별 props
+      options = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // customStyle은 다른 방식과 함께 사용 가능
 
 
-  var isCustomStyleMode = 'customStyle' in props && props.customStyle !== undefined;
-  var isObjectMode = !isCustomStyleMode && 'renderStyle' in props && props.renderStyle !== undefined;
-  var isIndividualMode = !isCustomStyleMode && !isObjectMode; // 각 방식별 props 추출
+  var hasCustomStyle = 'customStyle' in props && props.customStyle !== undefined;
+  var isObjectMode = 'renderStyle' in props && props.renderStyle !== undefined;
+  var isIndividualMode = 'baseFillColor' in props && props.baseFillColor !== undefined; // 각 방식별 props 추출
 
-  var customStyleProps = isCustomStyleMode ? props : undefined;
+  var customStyle = hasCustomStyle ? props.customStyle : undefined;
   var individualProps = isIndividualMode ? props : undefined;
   var objectProps = isObjectMode ? props : undefined; // --------------------------------------------------------------------------
   // Hooks & Context
@@ -156,17 +156,32 @@ var CanvasPolygonLayer = function (props) {
   }; // 렌더링 함수 생성 (스타일 지정 방식에 따라 분기)
 
   var renderBase;
-  var renderEvent;
-
-  if (isCustomStyleMode && customStyleProps) {
-    renderBase = renderer.renderPolygonBaseWithCustomStyle(customStyleProps.customStyle);
-    renderEvent = renderer.renderPolygonEventWithCustomStyle(customStyleProps.customStyle);
-  } else if (isObjectMode && objectProps) {
-    renderBase = renderer.renderPolygonBaseWithObject(objectProps.renderStyle);
-    renderEvent = renderer.renderPolygonEventWithObject(objectProps.renderStyle);
+  var renderEvent; // customStyle이 있으면 하이브리드 방식 사용, 없으면 기존 방식 사용
+
+  if (isObjectMode && objectProps) {
+    if (hasCustomStyle) {
+      // customStyle + renderStyle 하이브리드
+      renderBase = renderer.renderPolygonBaseWithHybridObject(customStyle, objectProps.renderStyle);
+      renderEvent = renderer.renderPolygonEventWithHybridObject(customStyle, objectProps.renderStyle);
+    } else {
+      // renderStyle만 사용
+      renderBase = renderer.renderPolygonBaseWithObject(objectProps.renderStyle);
+      renderEvent = renderer.renderPolygonEventWithObject(objectProps.renderStyle);
+    }
   } else if (isIndividualMode && individualProps) {
-    renderBase = renderer.renderPolygonBase(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth);
-    renderEvent = 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);
+    if (hasCustomStyle) {
+      // customStyle + 개별 props 하이브리드
+      renderBase = renderer.renderPolygonBaseWithHybrid(customStyle, individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth);
+      renderEvent = renderer.renderPolygonEventWithHybrid(customStyle, individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth, individualProps.selectedFillColor, individualProps.selectedStrokeColor, individualProps.selectedLineWidth, individualProps.activeFillColor, individualProps.activeStrokeColor, individualProps.activeLineWidth, individualProps.hoveredFillColor, individualProps.hoveredStrokeColor, individualProps.hoveredLineWidth);
+    } else {
+      // 개별 props만 사용
+      renderBase = renderer.renderPolygonBase(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth);
+      renderEvent = 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);
+    }
+  } else if (hasCustomStyle && customStyle) {
+    // customStyle만 사용 (기존 방식)
+    renderBase = renderer.renderPolygonBaseWithCustomStyle(customStyle);
+    renderEvent = renderer.renderPolygonEventWithCustomStyle(customStyle);
   } else {
     throw new Error('Invalid props: one of customStyle, renderStyle, or individual style props must be provided');
   } // Base Layer 렌더링 (뷰포트 컬링 적용)

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

@@ -239,4 +239,65 @@ export declare const renderPolygonBaseWithCustomStyle: <T = unknown>(customStyle
  * ```
  */
 export declare const renderPolygonEventWithCustomStyle: <T = unknown>(customStyle: PolygonStyleCustomizer<T>) => CustomRenderEvent<T>;
+/**
+ * 폴리곤 Base 렌더링 함수 팩토리 (하이브리드 방식: customStyle + 개별 props)
+ *
+ * Base Layer에서 사용할 렌더링 함수를 생성합니다.
+ * customStyle이 제공되면 우선적으로 사용하며, null/undefined를 반환하면 개별 props로 정의된 기본 스타일을 사용합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param customStyle 폴리곤 스타일 커스터마이징 함수 (선택)
+ * @param baseFillColor 기본 폴리곤 채우기 색상 (fallback용)
+ * @param baseStrokeColor 기본 폴리곤 테두리 색상 (fallback용)
+ * @param baseLineWidth 기본 폴리곤 테두리 두께 (fallback용)
+ * @returns Base Layer 렌더링 함수
+ */
+export declare const renderPolygonBaseWithHybrid: <T = unknown>(customStyle: PolygonStyleCustomizer<T> | undefined, baseFillColor: string, baseStrokeColor: string, baseLineWidth: number) => CustomRenderBase<T>;
+/**
+ * 폴리곤 Event 렌더링 함수 팩토리 (하이브리드 방식: customStyle + 개별 props)
+ *
+ * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+ * customStyle이 제공되면 우선적으로 사용하며, null/undefined를 반환하면 개별 props로 정의된 기본 스타일을 사용합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param customStyle 폴리곤 스타일 커스터마이징 함수 (선택)
+ * @param baseFillColor 기본 폴리곤 채우기 색상 (fallback용)
+ * @param baseStrokeColor 기본 폴리곤 테두리 색상 (fallback용)
+ * @param baseLineWidth 기본 폴리곤 테두리 두께 (fallback용)
+ * @param selectedFillColor 선택된 폴리곤 채우기 색상 (fallback용)
+ * @param selectedStrokeColor 선택된 폴리곤 테두리 색상 (fallback용)
+ * @param selectedLineWidth 선택된 폴리곤 테두리 두께 (fallback용)
+ * @param activeFillColor 마지막 선택된 폴리곤 채우기 색상 (fallback용)
+ * @param activeStrokeColor 마지막 선택된 폴리곤 테두리 색상 (fallback용)
+ * @param activeLineWidth 마지막 선택된 폴리곤 테두리 두께 (fallback용)
+ * @param hoveredFillColor Hover 시 폴리곤 채우기 색상 (fallback용)
+ * @param hoveredStrokeColor Hover 시 폴리곤 테두리 색상 (fallback용)
+ * @param hoveredLineWidth Hover 시 폴리곤 테두리 두께 (fallback용)
+ * @returns Event Layer 렌더링 함수
+ */
+export declare const renderPolygonEventWithHybrid: <T = unknown>(customStyle: PolygonStyleCustomizer<T> | undefined, baseFillColor: string, baseStrokeColor: string, baseLineWidth: number, selectedFillColor: string | undefined, selectedStrokeColor: string | undefined, selectedLineWidth: number | undefined, activeFillColor: string | undefined, activeStrokeColor: string | undefined, activeLineWidth: number | undefined, hoveredFillColor: string | undefined, hoveredStrokeColor: string | undefined, hoveredLineWidth: number | undefined) => CustomRenderEvent<T>;
+/**
+ * 폴리곤 Base 렌더링 함수 팩토리 (하이브리드 방식: customStyle + renderStyle)
+ *
+ * Base Layer에서 사용할 렌더링 함수를 생성합니다.
+ * customStyle이 제공되면 우선적으로 사용하며, null/undefined를 반환하면 renderStyle로 정의된 기본 스타일을 사용합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param customStyle 폴리곤 스타일 커스터마이징 함수 (선택)
+ * @param renderStyle 폴리곤 스타일 객체 (fallback용)
+ * @returns Base Layer 렌더링 함수
+ */
+export declare const renderPolygonBaseWithHybridObject: <T = unknown>(customStyle: PolygonStyleCustomizer<T> | undefined, renderStyle: PolygonStyleObject) => CustomRenderBase<T>;
+/**
+ * 폴리곤 Event 렌더링 함수 팩토리 (하이브리드 방식: customStyle + renderStyle)
+ *
+ * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+ * customStyle이 제공되면 우선적으로 사용하며, null/undefined를 반환하면 renderStyle로 정의된 기본 스타일을 사용합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param customStyle 폴리곤 스타일 커스터마이징 함수 (선택)
+ * @param renderStyle 폴리곤 스타일 객체 (fallback용)
+ * @returns Event Layer 렌더링 함수
+ */
+export declare const renderPolygonEventWithHybridObject: <T = unknown>(customStyle: PolygonStyleCustomizer<T> | undefined, renderStyle: PolygonStyleObject) => CustomRenderEvent<T>;
 export {};

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

@@ -648,11 +648,444 @@ var renderPolygonEventWithCustomStyle = function (customStyle) {
     }
   };
 };
+/**
+ * 폴리곤 Base 렌더링 함수 팩토리 (하이브리드 방식: customStyle + 개별 props)
+ *
+ * Base Layer에서 사용할 렌더링 함수를 생성합니다.
+ * customStyle이 제공되면 우선적으로 사용하며, null/undefined를 반환하면 개별 props로 정의된 기본 스타일을 사용합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param customStyle 폴리곤 스타일 커스터마이징 함수 (선택)
+ * @param baseFillColor 기본 폴리곤 채우기 색상 (fallback용)
+ * @param baseStrokeColor 기본 폴리곤 테두리 색상 (fallback용)
+ * @param baseLineWidth 기본 폴리곤 테두리 두께 (fallback용)
+ * @returns Base Layer 렌더링 함수
+ */
+
+var renderPolygonBaseWithHybrid = function (customStyle, baseFillColor, baseStrokeColor, baseLineWidth) {
+  return function (_a) {
+    var ctx = _a.ctx,
+        items = _a.items,
+        selectedIds = _a.selectedIds,
+        utils = _a.utils;
+
+    for (var _i = 0, items_4 = items; _i < items_4.length; _i++) {
+      var item = items_4[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
+
+      if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+
+      if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
+
+      var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+      if (!polygonOffsets) continue; // customStyle이 있으면 우선 사용, 없거나 null/undefined 반환 시 기본 스타일 사용
+
+      var style = void 0;
+
+      if (customStyle) {
+        var context = {
+          isActive: false,
+          isHovered: false,
+          isSelected: false
+        };
+        style = customStyle(item, context);
+      } // customStyle이 없거나 null/undefined를 반환하면 기본 스타일 사용
+
+
+      if (!style) {
+        style = {
+          fillColor: baseFillColor,
+          lineWidth: baseLineWidth,
+          strokeColor: baseStrokeColor
+        };
+      } // 폴리곤 그리기
+
+
+      drawPolygon({
+        ctx: ctx,
+        fillColor: style.fillColor,
+        isDonutPolygon: item.isDonutPolygon || false,
+        lineWidth: style.lineWidth,
+        polygonOffsets: polygonOffsets,
+        strokeColor: style.strokeColor
+      });
+    }
+  };
+};
+/**
+ * 폴리곤 Event 렌더링 함수 팩토리 (하이브리드 방식: customStyle + 개별 props)
+ *
+ * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+ * customStyle이 제공되면 우선적으로 사용하며, null/undefined를 반환하면 개별 props로 정의된 기본 스타일을 사용합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param customStyle 폴리곤 스타일 커스터마이징 함수 (선택)
+ * @param baseFillColor 기본 폴리곤 채우기 색상 (fallback용)
+ * @param baseStrokeColor 기본 폴리곤 테두리 색상 (fallback용)
+ * @param baseLineWidth 기본 폴리곤 테두리 두께 (fallback용)
+ * @param selectedFillColor 선택된 폴리곤 채우기 색상 (fallback용)
+ * @param selectedStrokeColor 선택된 폴리곤 테두리 색상 (fallback용)
+ * @param selectedLineWidth 선택된 폴리곤 테두리 두께 (fallback용)
+ * @param activeFillColor 마지막 선택된 폴리곤 채우기 색상 (fallback용)
+ * @param activeStrokeColor 마지막 선택된 폴리곤 테두리 색상 (fallback용)
+ * @param activeLineWidth 마지막 선택된 폴리곤 테두리 두께 (fallback용)
+ * @param hoveredFillColor Hover 시 폴리곤 채우기 색상 (fallback용)
+ * @param hoveredStrokeColor Hover 시 폴리곤 테두리 색상 (fallback용)
+ * @param hoveredLineWidth Hover 시 폴리곤 테두리 두께 (fallback용)
+ * @returns Event Layer 렌더링 함수
+ */
+
+var renderPolygonEventWithHybrid = function (customStyle, baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth) {
+  // 기본값 설정 (base 기준)
+  var _selectedFillColor = selectedFillColor || baseFillColor;
+
+  var _selectedStrokeColor = selectedStrokeColor || baseStrokeColor;
+
+  var _selectedLineWidth = selectedLineWidth || baseLineWidth;
+
+  var _activeFillColor = activeFillColor || _selectedFillColor;
+
+  var _activeStrokeColor = activeStrokeColor || _selectedStrokeColor;
+
+  var _activeLineWidth = activeLineWidth || _selectedLineWidth;
+
+  var _hoveredFillColor = hoveredFillColor || _selectedFillColor;
+
+  var _hoveredStrokeColor = hoveredStrokeColor || _selectedStrokeColor;
+
+  var _hoveredLineWidth = hoveredLineWidth || _selectedLineWidth;
+
+  return function (_a) {
+    var ctx = _a.ctx,
+        hoveredItem = _a.hoveredItem,
+        selectedItem = _a.selectedItem,
+        selectedItems = _a.selectedItems,
+        utils = _a.utils; // 성능 최적화: selectedItems를 Set으로 변환하여 O(1) 조회 (매번 some() 체크 방지)
+
+    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_4 = selectedItems; _i < selectedItems_4.length; _i++) {
+        var item = selectedItems_4[_i]; // 마지막 선택 항목과 호버된 항목은 나중에 따로 그림
+
+        if (item.id === selectedItemId || item.id === hoveredItemId) continue;
+        if (!item.paths) continue;
+        var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+        if (!polygonOffsets) continue; // customStyle이 있으면 우선 사용, 없거나 null/undefined 반환 시 기본 스타일 사용
+
+        var style = void 0;
+
+        if (customStyle) {
+          var context = {
+            isActive: false,
+            isHovered: false,
+            isSelected: true
+          };
+          style = customStyle(item, context);
+        } // customStyle이 없거나 null/undefined를 반환하면 기본 스타일 사용
+
+
+        if (!style) {
+          style = {
+            fillColor: _selectedFillColor,
+            lineWidth: _selectedLineWidth,
+            strokeColor: _selectedStrokeColor
+          };
+        }
+
+        drawPolygon({
+          ctx: ctx,
+          fillColor: style.fillColor,
+          isDonutPolygon: item.isDonutPolygon || false,
+          lineWidth: style.lineWidth,
+          polygonOffsets: polygonOffsets,
+          strokeColor: style.strokeColor
+        });
+      }
+    } // 2. 마지막 선택된 항목 그리기 (호버되지 않은 경우)
+
+
+    if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.paths) && hoveredItemId !== selectedItemId) {
+      var polygonOffsets = utils.getOrComputePolygonOffsets(selectedItem);
+
+      if (polygonOffsets) {
+        // customStyle이 있으면 우선 사용, 없거나 null/undefined 반환 시 기본 스타일 사용
+        var style = void 0;
+
+        if (customStyle) {
+          var context = {
+            isActive: true,
+            isHovered: false,
+            isSelected: true
+          };
+          style = customStyle(selectedItem, context);
+        } // customStyle이 없거나 null/undefined를 반환하면 기본 스타일 사용
+
+
+        if (!style) {
+          style = {
+            fillColor: _activeFillColor,
+            lineWidth: _activeLineWidth,
+            strokeColor: _activeStrokeColor
+          };
+        }
+
+        drawPolygon({
+          ctx: ctx,
+          fillColor: style.fillColor,
+          isDonutPolygon: selectedItem.isDonutPolygon || false,
+          lineWidth: style.lineWidth,
+          polygonOffsets: polygonOffsets,
+          strokeColor: style.strokeColor
+        });
+      }
+    } // 3. 호버된 항목 그리기 (가장 위에 표시)
+
+
+    if (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.paths) {
+      var polygonOffsets = utils.getOrComputePolygonOffsets(hoveredItem); // 좌표 변환 실패 시 스킵 (return은 렌더링 함수 종료)
+
+      if (!polygonOffsets) return; // 성능 최적화: Set을 사용하여 O(1) 조회 (이전: O(m) some() 체크)
+
+      var isSelected = selectedIdsSet.has(hoveredItem.id); // customStyle이 있으면 우선 사용, 없거나 null/undefined 반환 시 기본 스타일 사용
+
+      var style = void 0;
+
+      if (customStyle) {
+        var context = {
+          isActive: isSelected && hoveredItem.id === selectedItemId,
+          isHovered: !isSelected,
+          isSelected: isSelected
+        };
+        style = customStyle(hoveredItem, context);
+      } // customStyle이 없거나 null/undefined를 반환하면 기본 스타일 사용
+
+
+      if (!style) {
+        style = {
+          fillColor: isSelected ? _activeFillColor : _hoveredFillColor,
+          lineWidth: isSelected ? _activeLineWidth : _hoveredLineWidth,
+          strokeColor: isSelected ? _activeStrokeColor : _hoveredStrokeColor
+        };
+      }
+
+      drawPolygon({
+        ctx: ctx,
+        fillColor: style.fillColor,
+        isDonutPolygon: hoveredItem.isDonutPolygon || false,
+        lineWidth: style.lineWidth,
+        polygonOffsets: polygonOffsets,
+        strokeColor: style.strokeColor
+      });
+    }
+  };
+};
+/**
+ * 폴리곤 Base 렌더링 함수 팩토리 (하이브리드 방식: customStyle + renderStyle)
+ *
+ * Base Layer에서 사용할 렌더링 함수를 생성합니다.
+ * customStyle이 제공되면 우선적으로 사용하며, null/undefined를 반환하면 renderStyle로 정의된 기본 스타일을 사용합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param customStyle 폴리곤 스타일 커스터마이징 함수 (선택)
+ * @param renderStyle 폴리곤 스타일 객체 (fallback용)
+ * @returns Base Layer 렌더링 함수
+ */
+
+var renderPolygonBaseWithHybridObject = function (customStyle, renderStyle) {
+  return function (_a) {
+    var ctx = _a.ctx,
+        items = _a.items,
+        selectedIds = _a.selectedIds,
+        utils = _a.utils;
+
+    for (var _i = 0, items_5 = items; _i < items_5.length; _i++) {
+      var item = items_5[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
+
+      if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+
+      if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
+
+      var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+      if (!polygonOffsets) continue; // customStyle이 있으면 우선 사용, 없거나 null/undefined 반환 시 기본 스타일 사용
+
+      var style = void 0;
+
+      if (customStyle) {
+        var context = {
+          isActive: false,
+          isHovered: false,
+          isSelected: false
+        };
+        style = customStyle(item, context);
+      } // customStyle이 없거나 null/undefined를 반환하면 기본 스타일 사용
+
+
+      if (!style) {
+        style = renderStyle.base;
+      } // 폴리곤 그리기
+
+
+      drawPolygon({
+        ctx: ctx,
+        fillColor: style.fillColor,
+        isDonutPolygon: item.isDonutPolygon || false,
+        lineWidth: style.lineWidth,
+        polygonOffsets: polygonOffsets,
+        strokeColor: style.strokeColor
+      });
+    }
+  };
+};
+/**
+ * 폴리곤 Event 렌더링 함수 팩토리 (하이브리드 방식: customStyle + renderStyle)
+ *
+ * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+ * customStyle이 제공되면 우선적으로 사용하며, null/undefined를 반환하면 renderStyle로 정의된 기본 스타일을 사용합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param customStyle 폴리곤 스타일 커스터마이징 함수 (선택)
+ * @param renderStyle 폴리곤 스타일 객체 (fallback용)
+ * @returns Event Layer 렌더링 함수
+ */
+
+var renderPolygonEventWithHybridObject = function (customStyle, renderStyle) {
+  // 기본값 설정 (개별 props 방식과 동일한 로직)
+  var _selectedStyle = renderStyle.selected || renderStyle.base;
+
+  var _activeStyle = renderStyle.active || _selectedStyle;
+
+  var _hoveredStyle = renderStyle.hovered || _selectedStyle;
+
+  return function (_a) {
+    var ctx = _a.ctx,
+        hoveredItem = _a.hoveredItem,
+        selectedItem = _a.selectedItem,
+        selectedItems = _a.selectedItems,
+        utils = _a.utils; // 성능 최적화: selectedItems를 Set으로 변환하여 O(1) 조회 (매번 some() 체크 방지)
+
+    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_5 = selectedItems; _i < selectedItems_5.length; _i++) {
+        var item = selectedItems_5[_i]; // 마지막 선택 항목과 호버된 항목은 나중에 따로 그림
+
+        if (item.id === selectedItemId || item.id === hoveredItemId) continue;
+        if (!item.paths) continue;
+        var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+        if (!polygonOffsets) continue; // customStyle이 있으면 우선 사용, 없거나 null/undefined 반환 시 기본 스타일 사용
+
+        var style = void 0;
+
+        if (customStyle) {
+          var context = {
+            isActive: false,
+            isHovered: false,
+            isSelected: true
+          };
+          style = customStyle(item, context);
+        } // customStyle이 없거나 null/undefined를 반환하면 기본 스타일 사용
+
+
+        if (!style) {
+          style = _selectedStyle;
+        }
+
+        drawPolygon({
+          ctx: ctx,
+          fillColor: style.fillColor,
+          isDonutPolygon: item.isDonutPolygon || false,
+          lineWidth: style.lineWidth,
+          polygonOffsets: polygonOffsets,
+          strokeColor: style.strokeColor
+        });
+      }
+    } // 2. 마지막 선택된 항목 그리기 (호버되지 않은 경우)
+
+
+    if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.paths) && hoveredItemId !== selectedItemId) {
+      var polygonOffsets = utils.getOrComputePolygonOffsets(selectedItem);
+
+      if (polygonOffsets) {
+        // customStyle이 있으면 우선 사용, 없거나 null/undefined 반환 시 기본 스타일 사용
+        var style = void 0;
+
+        if (customStyle) {
+          var context = {
+            isActive: true,
+            isHovered: false,
+            isSelected: true
+          };
+          style = customStyle(selectedItem, context);
+        } // customStyle이 없거나 null/undefined를 반환하면 기본 스타일 사용
+
+
+        if (!style) {
+          style = _activeStyle;
+        }
+
+        drawPolygon({
+          ctx: ctx,
+          fillColor: style.fillColor,
+          isDonutPolygon: selectedItem.isDonutPolygon || false,
+          lineWidth: style.lineWidth,
+          polygonOffsets: polygonOffsets,
+          strokeColor: style.strokeColor
+        });
+      }
+    } // 3. 호버된 항목 그리기 (가장 위에 표시)
+
+
+    if (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.paths) {
+      var polygonOffsets = utils.getOrComputePolygonOffsets(hoveredItem); // 좌표 변환 실패 시 스킵 (return은 렌더링 함수 종료)
+
+      if (!polygonOffsets) return; // 성능 최적화: Set을 사용하여 O(1) 조회 (이전: O(m) some() 체크)
+
+      var isSelected = selectedIdsSet.has(hoveredItem.id); // customStyle이 있으면 우선 사용, 없거나 null/undefined 반환 시 기본 스타일 사용
+
+      var style = void 0;
+
+      if (customStyle) {
+        var context = {
+          isActive: isSelected && hoveredItem.id === selectedItemId,
+          isHovered: !isSelected,
+          isSelected: isSelected
+        };
+        style = customStyle(hoveredItem, context);
+      } // customStyle이 없거나 null/undefined를 반환하면 기본 스타일 사용
+
+
+      if (!style) {
+        style = isSelected ? _activeStyle : _hoveredStyle;
+      }
+
+      drawPolygon({
+        ctx: ctx,
+        fillColor: style.fillColor,
+        isDonutPolygon: hoveredItem.isDonutPolygon || false,
+        lineWidth: style.lineWidth,
+        polygonOffsets: polygonOffsets,
+        strokeColor: style.strokeColor
+      });
+    }
+  };
+};
 
 exports.drawPolygon = drawPolygon;
 exports.renderPolygonBase = renderPolygonBase;
 exports.renderPolygonBaseWithCustomStyle = renderPolygonBaseWithCustomStyle;
+exports.renderPolygonBaseWithHybrid = renderPolygonBaseWithHybrid;
+exports.renderPolygonBaseWithHybridObject = renderPolygonBaseWithHybridObject;
 exports.renderPolygonBaseWithObject = renderPolygonBaseWithObject;
 exports.renderPolygonEvent = renderPolygonEvent;
 exports.renderPolygonEventWithCustomStyle = renderPolygonEventWithCustomStyle;
+exports.renderPolygonEventWithHybrid = renderPolygonEventWithHybrid;
+exports.renderPolygonEventWithHybridObject = renderPolygonEventWithHybridObject;
 exports.renderPolygonEventWithObject = renderPolygonEventWithObject;