@zurigo/maps 1.0.1 → 1.0.3

package/dist/components/google-maps.d.ts

@@ -1,3 +1,4 @@
+import { RegionType } from "../lib/google-maps/config";
 export interface GoogleMapsProps {
     onPolygonComplete?: (polygon: google.maps.Polygon) => void;
     onPolygonEdit?: (polygon: google.maps.Polygon) => void;
@@ -25,7 +26,8 @@ export interface GoogleMapsProps {
         };
     }>;
     readOnly?: boolean;
+    region?: RegionType;
 }
-declare const GoogleMaps: ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center, zoom, onMapLoad, className, animateToLocation, showMeasurements, clearTrigger, existingPolygons, readOnly, }: GoogleMapsProps) => import("react/jsx-runtime").JSX.Element;
+declare const GoogleMaps: ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center, zoom, onMapLoad, className, animateToLocation, showMeasurements, clearTrigger, existingPolygons, readOnly, region, }: GoogleMapsProps) => import("react/jsx-runtime").JSX.Element;
 export default GoogleMaps;
 //# sourceMappingURL=google-maps.d.ts.map

package/dist/components/google-maps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"google-maps.d.ts","sourceRoot":"","sources":["../../src/components/google-maps.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,eAAe;IAC9B,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC;IACvD,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC;IACzD,MAAM,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,KAAK,CAAC;QACvB,QAAQ,EAAE;YAAE,GAAG,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QACzC,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE;YAAE,GAAG,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC;KACzC,CAAC,CAAC;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,GAAI,2KAajB,eAAe,4CA+xEjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"google-maps.d.ts","sourceRoot":"","sources":["../../src/components/google-maps.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAiB,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAyCtE,MAAM,WAAW,eAAe;IAC9B,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC;IACvD,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC;IACzD,MAAM,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,KAAK,CAAC;QACvB,QAAQ,EAAE;YAAE,GAAG,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QACzC,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE;YAAE,GAAG,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC;KACzC,CAAC,CAAC;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,QAAA,MAAM,UAAU,GAAI,mLAcjB,eAAe,4CA+vEjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/google-maps.js

@@ -9,7 +9,36 @@ const solar_panel_calculator_1 = require("../lib/solar-panel-calculator");
 // Drawing constraints
 const MIN_ZOOM_FOR_DRAWING = 18; // Minimum zoom level to allow drawing
 const MAX_AREA_LIMIT = 10000; // Maximum area in m² for drawn shapes
-const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center, zoom, onMapLoad, className = "w-full h-full", animateToLocation = true, showMeasurements = false, clearTrigger, existingPolygons, readOnly = false, }) => {
+// Shape styles
+const RECTANGLE_STYLES = {
+    default: {
+        fillColor: "#1e40af",
+        fillOpacity: 0.3,
+        strokeColor: "#1e40af",
+        strokeWeight: 3,
+    },
+    selected: {
+        fillColor: "#dc2626",
+        fillOpacity: 0.6,
+        strokeColor: "#dc2626",
+        strokeWeight: 5,
+    },
+};
+const POLYGON_STYLES = {
+    default: {
+        fillColor: "#059669",
+        fillOpacity: 0.3,
+        strokeColor: "#059669",
+        strokeWeight: 2,
+    },
+    selected: {
+        fillColor: "#dc2626",
+        fillOpacity: 0.5,
+        strokeColor: "#dc2626",
+        strokeWeight: 3,
+    },
+};
+const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center, zoom, onMapLoad, className = "w-full h-full", animateToLocation = true, showMeasurements = false, clearTrigger, existingPolygons, readOnly = false, region = 'korea', }) => {
     const mapRef = (0, react_1.useRef)(null);
     const drawingManagerRef = (0, react_1.useRef)(null);
     const polygonsRef = (0, react_1.useRef)([]);
@@ -19,6 +48,8 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
     const capacityLabelsRef = (0, react_1.useRef)([]);
     const panelLayoutOverlaysRef = (0, react_1.useRef)([]); // 패널 레이아웃 오버레이용
     const rotationHandleRef = (0, react_1.useRef)(null);
+    const selectedRectangleRef = (0, react_1.useRef)(null);
+    const selectedPolygonRef = (0, react_1.useRef)(null);
     const rotationListenerRef = (0, react_1.useRef)(null);
     const currentShapeRef = (0, react_1.useRef)(null);
     const [isAnimating, setIsAnimating] = (0, react_1.useState)(false);
@@ -30,7 +61,7 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
     const [isRotating, setIsRotating] = (0, react_1.useState)(false);
     // Suppress unused variable warning - redoStack is for future undo/redo implementation
     void redoStack;
-    const mapOptions = (0, config_1.getMapOptions)(Object.assign({ center,
+    const mapOptions = (0, config_1.getMapOptions)(region, Object.assign({ center,
         zoom, mapTypeId: "satellite", mapTypeControl: false }, (readOnly && {
         disableDefaultUI: true, // 모든 기본 UI 숨기기
         zoomControl: false, // 줌 컨트롤 숨기기
@@ -45,15 +76,11 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
             if (!readOnly) {
                 initializeDrawingManager(mapInstance);
                 // Add map click listener to deselect shapes
-                mapInstance.addListener("click", (event) => {
-                    // Only deselect if not clicking on shapes or rotation handle
-                    if (!isRotating) {
-                        // Add a small delay to allow shape click events to fire first
-                        setTimeout(() => {
-                            deselectPolygon();
-                            deselectRectangle();
-                        }, 10);
-                    }
+                mapInstance.addListener("click", () => {
+                    // Add a small delay to allow shape click events to fire first
+                    setTimeout(() => {
+                        removeRotationHandle();
+                    }, 50);
                 });
             }
             onMapLoad === null || onMapLoad === void 0 ? void 0 : onMapLoad(mapInstance);
@@ -104,18 +131,7 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
                     map.setZoom(18);
                 }
                 // Create polygon from saved geometry
-                const polygon = new google.maps.Polygon({
-                    paths: polygonData.geometry,
-                    fillColor: "#10b981",
-                    fillOpacity: 0.4,
-                    strokeWeight: 3,
-                    strokeColor: "#059669",
-                    clickable: false,
-                    editable: false,
-                    draggable: false,
-                    map: map,
-                    zIndex: 1000,
-                });
+                const polygon = new google.maps.Polygon(Object.assign(Object.assign({ paths: polygonData.geometry }, POLYGON_STYLES.default), { clickable: false, editable: false, draggable: false, map: map, zIndex: 1000 }));
                 // Store polygon reference
                 polygonsRef.current.push(polygon);
                 // Add capacity label if capacity data exists
@@ -151,7 +167,7 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
                 zIndex: 1,
                 clickable: true,
                 draggable: true,
-                editable: true,
+                editable: false,
             },
             rectangleOptions: {
                 fillColor: "#3b82f6",
@@ -161,7 +177,7 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
                 zIndex: 1,
                 clickable: true,
                 draggable: true,
-                editable: true,
+                editable: false,
             },
         });
         drawingManager.setMap(mapInstance);
@@ -251,8 +267,8 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
                 addPolygonMeasurementsWithLayoutInfo(polygon, layoutInfo, layoutInfo.capacity, mapInstance);
             }
             onPolygonComplete === null || onPolygonComplete === void 0 ? void 0 : onPolygonComplete(polygon);
-            // Auto-select the newly created polygon
-            setTimeout(() => selectPolygonWithMap(polygon, mapInstance), 200);
+            // Auto-select the newly created polygon immediately
+            selectPolygonWithMap(polygon, mapInstance);
         });
         drawingManager.addListener("rectanglecomplete", (rectangle) => {
             drawingManager.setDrawingMode(null);
@@ -343,8 +359,8 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
                     paths: [sw, nw, ne, se],
                 });
                 onPolygonComplete === null || onPolygonComplete === void 0 ? void 0 : onPolygonComplete(polygonFromRect);
-                // Auto-select the newly created rectangle
-                setTimeout(() => selectRectangleWithMap(rectangle, mapInstance), 200);
+                // Auto-select the newly created rectangle immediately
+                selectRectangleWithMap(rectangle, mapInstance);
             }
         });
     };
@@ -450,48 +466,56 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
         capacityLabelsRef.current.push(capacityMarker);
     };
     // Polygon selection and editing functions
-    const selectPolygonWithMap = (polygon, mapInstance) => {
-        selectPolygon(polygon);
-        // Add rotation handle with map instance
-        setTimeout(() => {
-            addRotationHandle(polygon, mapInstance);
-        }, 100);
+    // Helper functions for shape styling
+    const setShapeStyle = (shape, styleType, shapeType) => {
+        const styles = shapeType === "polygon" ? POLYGON_STYLES : RECTANGLE_STYLES;
+        const isSelected = styleType === "selected";
+        shape.setOptions(Object.assign(Object.assign({}, styles[styleType]), { editable: isSelected }));
     };
-    const selectPolygon = (polygon) => {
-        // Deselect previous polygon
-        if (selectedPolygon) {
-            selectedPolygon.setOptions({
-                strokeColor: "#059669",
-                strokeWeight: 2,
-                fillOpacity: 0.3,
-            });
+    const deselectShape = (shape, shapeType, setterFn, refSetter) => {
+        if (shape) {
+            setShapeStyle(shape, "default", shapeType);
+            setterFn(null);
+            refSetter.current = null;
         }
-        // Deselect rectangle if selected
-        if (selectedRectangle) {
-            selectedRectangle.setOptions({
-                strokeColor: "#1e40af",
-                strokeWeight: 3,
-                fillOpacity: 0.3,
-            });
-            setSelectedRectangle(null);
+    };
+    // Shape selection functions
+    const selectPolygonShape = (shape) => {
+        // Deselect current polygon if different
+        if (selectedPolygonRef.current && selectedPolygonRef.current !== shape) {
+            setShapeStyle(selectedPolygonRef.current, "default", "polygon");
         }
+        // Deselect rectangle
+        deselectShape(selectedRectangleRef.current, "rectangle", setSelectedRectangle, selectedRectangleRef);
         // Select new polygon
-        setSelectedPolygon(polygon);
-        polygon.setOptions({
-            strokeColor: "#dc2626",
-            strokeWeight: 3,
-            fillOpacity: 0.5,
-        });
+        setSelectedPolygon(shape);
+        selectedPolygonRef.current = shape;
+        setShapeStyle(shape, "selected", "polygon");
     };
-    const deselectPolygon = () => {
-        if (selectedPolygon) {
-            selectedPolygon.setOptions({
-                strokeColor: "#059669",
-                strokeWeight: 2,
-                fillOpacity: 0.3,
-            });
-            setSelectedPolygon(null);
+    const selectRectangleShape = (shape) => {
+        // Deselect current rectangle if different
+        if (selectedRectangleRef.current && selectedRectangleRef.current !== shape) {
+            setShapeStyle(selectedRectangleRef.current, "default", "rectangle");
         }
+        // Deselect polygon
+        deselectShape(selectedPolygonRef.current, "polygon", setSelectedPolygon, selectedPolygonRef);
+        // Select new rectangle
+        setSelectedRectangle(shape);
+        selectedRectangleRef.current = shape;
+        setShapeStyle(shape, "selected", "rectangle");
+    };
+    const selectPolygonWithMap = (polygon, mapInstance) => {
+        selectPolygonShape(polygon);
+        setTimeout(() => addRotationHandle(polygon, mapInstance), 100);
+    };
+    const selectRectangleWithMap = (rectangle, mapInstance) => {
+        selectRectangleShape(rectangle);
+        setTimeout(() => addRotationHandle(rectangle, mapInstance), 100);
+    };
+    const selectPolygon = (polygon) => {
+        selectPolygonShape(polygon);
+    };
+    const deselectPolygon = () => {
         removeRotationHandle();
     };
     const savePolygonState = (polygon) => {
@@ -547,19 +571,10 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
                     lng: point.lng() + 0.0001,
                 });
             }
-            const newPolygon = new google.maps.Polygon({
-                paths: coordinates,
-                fillColor: "#10b981",
-                fillOpacity: 0.3,
-                strokeWeight: 2,
-                strokeColor: "#059669",
-                clickable: true,
-                editable: true,
-                draggable: true,
-                map: map,
-            });
+            const newPolygon = new google.maps.Polygon(Object.assign(Object.assign({ paths: coordinates }, POLYGON_STYLES.default), { clickable: true, editable: false, draggable: true, map: map }));
             polygonsRef.current.push(newPolygon);
-            newPolygon.addListener("click", () => {
+            newPolygon.addListener("click", (event) => {
+                event.stop(); // Prevent map click event
                 selectPolygon(newPolygon);
             });
             // Add drag listeners
@@ -604,48 +619,10 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
         }
     };
     // Rectangle selection and editing functions
-    const selectRectangleWithMap = (rectangle, mapInstance) => {
-        selectRectangle(rectangle);
-        // Add rotation handle with map instance
-        setTimeout(() => {
-            addRotationHandle(rectangle, mapInstance);
-        }, 100);
-    };
     const selectRectangle = (rectangle) => {
-        // Deselect previous polygon
-        if (selectedPolygon) {
-            selectedPolygon.setOptions({
-                strokeColor: "#059669",
-                strokeWeight: 2,
-                fillOpacity: 0.3,
-            });
-            setSelectedPolygon(null);
-        }
-        // Deselect previous rectangle
-        if (selectedRectangle) {
-            selectedRectangle.setOptions({
-                strokeColor: "#1e40af",
-                strokeWeight: 3,
-                fillOpacity: 0.3,
-            });
-        }
-        // Select new rectangle
-        setSelectedRectangle(rectangle);
-        rectangle.setOptions({
-            strokeColor: "#dc2626",
-            strokeWeight: 4,
-            fillOpacity: 0.5,
-        });
+        selectRectangleShape(rectangle);
     };
     const deselectRectangle = () => {
-        if (selectedRectangle) {
-            selectedRectangle.setOptions({
-                strokeColor: "#1e40af",
-                strokeWeight: 3,
-                fillOpacity: 0.3,
-            });
-            setSelectedRectangle(null);
-        }
         removeRotationHandle();
     };
     const saveRectangleState = (rectangle) => {
@@ -714,17 +691,7 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
                 const sw = bounds.getSouthWest();
                 // Create new bounds with slight offset
                 const newBounds = new google.maps.LatLngBounds(new google.maps.LatLng(sw.lat() + 0.0001, sw.lng() + 0.0001), new google.maps.LatLng(ne.lat() + 0.0001, ne.lng() + 0.0001));
-                const newRectangle = new google.maps.Rectangle({
-                    bounds: newBounds,
-                    fillColor: "#3b82f6",
-                    fillOpacity: 0.3,
-                    strokeWeight: 3,
-                    strokeColor: "#1e40af",
-                    clickable: true,
-                    editable: true,
-                    draggable: true,
-                    map: map,
-                });
+                const newRectangle = new google.maps.Rectangle(Object.assign(Object.assign({ bounds: newBounds }, RECTANGLE_STYLES.default), { clickable: true, editable: false, draggable: true, map: map }));
                 rectanglesRef.current.push(newRectangle);
                 newRectangle.addListener("click", () => {
                     selectRectangle(newRectangle);
@@ -774,7 +741,7 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
         if (!targetMap) {
             return;
         }
-        removeRotationHandle(); // Remove existing handle
+        removeRotationHandleOnly(); // Remove existing handle only
         // Update current shape reference
         currentShapeRef.current = shape;
         const center = getShapeCenter(shape);
@@ -844,7 +811,6 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
             handleClick = rotationHandle.addListener("click", () => {
                 isDragging = true;
                 setIsRotating(true);
-                console.log("Rotation started - not clearing all panels");
                 // Use center position as initial reference for AdvancedMarkerElement
                 startAngle = 0; // Start from center
                 startRotationListeners();
@@ -857,7 +823,6 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
                     return;
                 isDragging = true;
                 setIsRotating(true);
-                console.log("Rotation started - not clearing all panels");
                 // Calculate initial angle from center to click position
                 startAngle = calculateAngle(center, event.latLng);
                 startRotationListeners();
@@ -895,10 +860,6 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
                     google.maps.event.removeListener(mapMouseUpListener);
                     mapMouseUpListener = null;
                 }
-                console.log("Rotation completed - redrawing all panels");
-                console.log("Selected polygon:", selectedPolygon);
-                console.log("Selected rectangle:", selectedRectangle);
-                console.log("Current shape ref:", currentShapeRef.current);
                 // Trigger edit callback for the rotated shape
                 const currentShape = currentShapeRef.current;
                 if (currentShape && currentShape instanceof google.maps.Polygon) {
@@ -927,14 +888,14 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
                     clearMeasurements();
                 }
                 // Redraw all shapes using the refresh function
-                console.log("Refreshing all labels and visualizations after rotation");
                 refreshAllLabelsAndVisualizationsWithCalculation(targetMap);
             });
         };
         // Store listener reference for cleanup
         rotationListenerRef.current = handleClick;
     };
-    const removeRotationHandle = () => {
+    const removeRotationHandleOnly = () => {
+        // Remove rotation handle only, without deselecting shapes
         if (rotationHandleRef.current) {
             if (rotationHandleRef.current instanceof
                 google.maps.marker.AdvancedMarkerElement) {
@@ -949,9 +910,17 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
             google.maps.event.removeListener(rotationListenerRef.current);
             rotationListenerRef.current = null;
         }
-        currentShapeRef.current = null;
         setIsRotating(false);
     };
+    const removeRotationHandle = () => {
+        removeRotationHandleOnly();
+        // Reset all selected shapes to default style using both state and ref
+        const currentPolygon = selectedPolygon || selectedPolygonRef.current;
+        const currentRectangle = selectedRectangle || selectedRectangleRef.current;
+        deselectShape(currentPolygon, "polygon", setSelectedPolygon, selectedPolygonRef);
+        deselectShape(currentRectangle, "rectangle", setSelectedRectangle, selectedRectangleRef);
+        currentShapeRef.current = null;
+    };
     const getShapeCenter = (shape) => {
         if (shape instanceof google.maps.Polygon) {
             const path = shape.getPath();
@@ -1060,17 +1029,7 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
             rectanglesRef.current.splice(rectIndex, 1);
         }
         // Create a new polygon with the rotated corners
-        const rotatedPolygon = new google.maps.Polygon({
-            paths: [rotatedSw, rotatedNw, rotatedNe, rotatedSe],
-            fillColor: "#3b82f6",
-            fillOpacity: 0.3,
-            strokeWeight: 3,
-            strokeColor: "#1e40af",
-            clickable: true,
-            editable: true,
-            draggable: true,
-            map: targetMap,
-        });
+        const rotatedPolygon = new google.maps.Polygon(Object.assign(Object.assign({ paths: [rotatedSw, rotatedNw, rotatedNe, rotatedSe] }, POLYGON_STYLES.default), { clickable: true, editable: true, draggable: true, map: targetMap }));
         // Add to polygons array and set up listeners
         polygonsRef.current.push(rotatedPolygon);
         rotatedPolygon.addListener("click", (event) => {
@@ -1134,7 +1093,6 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
         // Update current shape reference immediately
         currentShapeRef.current = rotatedPolygon;
         // Don't clear or draw panels during rotation - wait for rotation to complete
-        console.log("Rectangle converted to polygon during rotation - not touching any panels");
         // Trigger callback
         onPolygonEdit === null || onPolygonEdit === void 0 ? void 0 : onPolygonEdit(rotatedPolygon);
     };
@@ -1387,17 +1345,7 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
             // 새로운 그리드 기반 패널 위치 정보 사용
             if (layoutInfo.validPanelPositions &&
                 layoutInfo.validPanelPositions.length > 0) {
-                const { rotationAngle, edges, validPanelPositions } = layoutInfo;
-                console.log("Polygon-aware panel layout:");
-                console.log(`Total valid panels: ${validPanelPositions.length}`);
-                console.log(`Rotation angle: ${(rotationAngle * 180) / Math.PI}°`);
-                // 디버깅용 - 변 길이 출력
-                if (edges && edges.length > 0) {
-                    console.log("Edge lengths (meters):");
-                    edges.forEach((edge, index) => {
-                        console.log(`  Edge ${index}: ${edge.distance.toFixed(2)}m`);
-                    });
-                }
+                const { rotationAngle, validPanelPositions } = layoutInfo;
                 // 패널 크기 계산 (미터 단위)
                 const panelWidthM = solar_panel_calculator_1.SOLAR_PANEL_SPECS.WIDTH_MM / 1000;
                 const panelHeightM = solar_panel_calculator_1.SOLAR_PANEL_SPECS.HEIGHT_MM / 1000;
@@ -1450,8 +1398,6 @@ const GoogleMaps = ({ onPolygonComplete, onPolygonEdit, onPolygonDelete, center,
                     });
                     panelLayoutOverlaysRef.current.push(panelPolygon);
                 });
-                console.log(`Drew ${validPanelPositions.length} panels inside polygon at ${((rotationAngle * 180) /
-                    Math.PI).toFixed(1)}° rotation (${layoutInfo.orientation} orientation)`);
             }
             else {
                 // 기존 fallback 방식 사용