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

package/dist/index.umd.js

@@ -3887,10 +3887,9 @@
         externalSelectedItem = props.selectedItem,
         _f = props.disableInteraction,
         disableInteraction = _f === void 0 ? false : _f,
-        hoverZIndex = props.hoverZIndex,
         renderBase = props.renderBase,
         renderEvent = props.renderEvent,
-        options = tslib.__rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "hoverZIndex", "renderBase", "renderEvent"]);
+        options = tslib.__rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "renderBase", "renderEvent"]);
 
     var controller = useMintMapController();
     var context = useCanvasContext();
@@ -3920,9 +3919,7 @@
       y: 0
     }); // 드래그 시작 시점의 hover 상태 저장 (드래그 중 hover 고정용)
 
-    var dragStartHoveredItemRef = React.useRef(null); // 원래 z-index 저장 (hoverZIndex 사용 시 복원용)
-
-    var originalZIndexRef = React.useRef(currentZIndex); // 성능 최적화 Refs
+    var dragStartHoveredItemRef = React.useRef(null); // 성능 최적화 Refs
 
     var offsetCacheRef = React.useRef(new LRUCache(maxCacheSize));
     var spatialIndexRef = React.useRef(new SpatialHashGrid(SPATIAL_GRID_CELL_SIZE));
@@ -4168,21 +4165,7 @@
         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');
@@ -4261,12 +4244,7 @@
       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);
@@ -4291,16 +4269,7 @@
       }, 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;
       }
 
@@ -4313,7 +4282,6 @@
       }
 
       if (options.zIndex !== undefined) {
-        originalZIndexRef.current = options.zIndex;
         controller.setMarkerZIndex(markerRef.current, options.zIndex);
       }
     }, [options]); // Konva 초기화 및 이벤트 리스너 등록
@@ -5147,6 +5115,435 @@
       }
     };
   };
+  /**
+   * 폴리곤 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,
@@ -5163,14 +5560,14 @@
         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
@@ -5280,17 +5677,32 @@
     }; // 렌더링 함수 생성 (스타일 지정 방식에 따라 분기)
 
     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 렌더링 (뷰포트 컬링 적용)

package/package.json

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