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

package/dist/index.es.js

@@ -3883,10 +3883,9 @@ var CanvasMarkerLayer = function (props) {
       externalSelectedItem = props.selectedItem,
       _f = props.disableInteraction,
       disableInteraction = _f === void 0 ? false : _f,
-      hoverZIndex = props.hoverZIndex,
       renderBase = props.renderBase,
       renderEvent = props.renderEvent,
-      options = __rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "hoverZIndex", "renderBase", "renderEvent"]);
+      options = __rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "renderBase", "renderEvent"]);
 
   var controller = useMintMapController();
   var context = useCanvasContext();
@@ -3916,9 +3915,7 @@ var CanvasMarkerLayer = function (props) {
     y: 0
   }); // 드래그 시작 시점의 hover 상태 저장 (드래그 중 hover 고정용)
 
-  var dragStartHoveredItemRef = useRef(null); // 원래 z-index 저장 (hoverZIndex 사용 시 복원용)
-
-  var originalZIndexRef = useRef(currentZIndex); // 성능 최적화 Refs
+  var dragStartHoveredItemRef = useRef(null); // 성능 최적화 Refs
 
   var offsetCacheRef = useRef(new LRUCache(maxCacheSize));
   var spatialIndexRef = useRef(new SpatialHashGrid(SPATIAL_GRID_CELL_SIZE));
@@ -4164,21 +4161,7 @@ var CanvasMarkerLayer = function (props) {
       return;
     }
 
-    var prevHovered = hoveredItemRef.current;
-    hoveredItemRef.current = hoveredData; // hoverZIndex가 설정되어 있고 마커가 존재할 때 z-index 변경
-
-    if (hoverZIndex !== undefined && markerRef.current) {
-      // hover 상태가 변경될 때만 z-index 업데이트
-      if (prevHovered !== hoveredData) {
-        // 이전 hover가 끝났을 때 원래 z-index로 복원
-        if (prevHovered && !hoveredData) {
-          controller.setMarkerZIndex(markerRef.current, originalZIndexRef.current);
-        } // 새로운 hover가 시작될 때 hoverZIndex로 변경
-        else if (hoveredData && !prevHovered) {
-          controller.setMarkerZIndex(markerRef.current, hoverZIndex);
-        }
-      }
-    }
+    hoveredItemRef.current = hoveredData;
 
     if (draggingRef.current) {
       controller.setMapCursor('grabbing');
@@ -4257,12 +4240,7 @@ var CanvasMarkerLayer = function (props) {
     if (disableInteractionRef.current) return;
     var prevHovered = hoveredItemRef.current;
     if (!prevHovered) return;
-    hoveredItemRef.current = null; // hoverZIndex가 설정되어 있으면 원래 z-index로 복원
-
-    if (hoverZIndex !== undefined && markerRef.current) {
-      controller.setMarkerZIndex(markerRef.current, originalZIndexRef.current);
-    }
-
+    hoveredItemRef.current = null;
     controller.setMapCursor('grab');
     doRenderEvent();
     onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(prevHovered);
@@ -4287,16 +4265,7 @@ var CanvasMarkerLayer = function (props) {
     }, options);
 
     if (markerRef.current) {
-      controller.updateMarker(markerRef.current, markerOptions); // z-index가 변경되었을 때 originalZIndexRef 업데이트
-
-      if (options.zIndex !== undefined) {
-        originalZIndexRef.current = options.zIndex; // hover 상태가 아닐 때만 z-index 업데이트 (hover 중이면 hoverZIndex 유지)
-
-        if (!hoveredItemRef.current || hoverZIndex === undefined) {
-          controller.setMarkerZIndex(markerRef.current, options.zIndex);
-        }
-      }
-
+      controller.updateMarker(markerRef.current, markerOptions);
       return;
     }
 
@@ -4309,7 +4278,6 @@ var CanvasMarkerLayer = function (props) {
     }
 
     if (options.zIndex !== undefined) {
-      originalZIndexRef.current = options.zIndex;
       controller.setMarkerZIndex(markerRef.current, options.zIndex);
     }
   }, [options]); // Konva 초기화 및 이벤트 리스너 등록
@@ -5143,6 +5111,435 @@ 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
+      });
+    }
+  };
+};
 
 var CanvasPolygonLayer = function (props) {
   var data = props.data,
@@ -5159,14 +5556,14 @@ var CanvasPolygonLayer = function (props) {
       externalSelectedItem = props.selectedItem,
       _e = props.disableInteraction,
       disableInteraction = _e === void 0 ? false : _e,
-      options = __rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // 세 가지 방식 중 하나만 선택: customStyle > renderStyle > 개별 props
+      options = __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
@@ -5276,17 +5673,32 @@ var CanvasPolygonLayer = function (props) {
   }; // 렌더링 함수 생성 (스타일 지정 방식에 따라 분기)
 
   var renderBase;
-  var renderEvent;
-
-  if (isCustomStyleMode && customStyleProps) {
-    renderBase = renderPolygonBaseWithCustomStyle(customStyleProps.customStyle);
-    renderEvent = renderPolygonEventWithCustomStyle(customStyleProps.customStyle);
-  } else if (isObjectMode && objectProps) {
-    renderBase = renderPolygonBaseWithObject(objectProps.renderStyle);
-    renderEvent = renderPolygonEventWithObject(objectProps.renderStyle);
+  var renderEvent; // customStyle이 있으면 하이브리드 방식 사용, 없으면 기존 방식 사용
+
+  if (isObjectMode && objectProps) {
+    if (hasCustomStyle) {
+      // customStyle + renderStyle 하이브리드
+      renderBase = renderPolygonBaseWithHybridObject(customStyle, objectProps.renderStyle);
+      renderEvent = renderPolygonEventWithHybridObject(customStyle, objectProps.renderStyle);
+    } else {
+      // renderStyle만 사용
+      renderBase = renderPolygonBaseWithObject(objectProps.renderStyle);
+      renderEvent = renderPolygonEventWithObject(objectProps.renderStyle);
+    }
   } else if (isIndividualMode && individualProps) {
-    renderBase = renderPolygonBase(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth);
-    renderEvent = 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 = renderPolygonBaseWithHybrid(customStyle, individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth);
+      renderEvent = 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 = renderPolygonBase(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth);
+      renderEvent = 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 = renderPolygonBaseWithCustomStyle(customStyle);
+    renderEvent = renderPolygonEventWithCustomStyle(customStyle);
   } else {
     throw new Error('Invalid props: one of customStyle, renderStyle, or individual style props must be provided');
   } // Base Layer 렌더링 (뷰포트 컬링 적용)