diff --git a/frontend/components/report/designer/CanvasComponent.tsx b/frontend/components/report/designer/CanvasComponent.tsx index 12011813..85eed9f0 100644 --- a/frontend/components/report/designer/CanvasComponent.tsx +++ b/frontend/components/report/designer/CanvasComponent.tsx @@ -310,11 +310,26 @@ export function CanvasComponent({ component }: CanvasComponentProps) { const boundedWidth = Math.min(newWidth, maxWidth); const boundedHeight = Math.min(newHeight, maxHeight); - // Grid Snap 적용 - updateComponent(component.id, { - width: snapValueToGrid(boundedWidth), - height: snapValueToGrid(boundedHeight), - }); + // 구분선은 방향에 따라 한 축만 조절 가능 + if (component.type === "divider") { + if (component.orientation === "vertical") { + // 세로 구분선: 높이만 조절 + updateComponent(component.id, { + height: snapValueToGrid(boundedHeight), + }); + } else { + // 가로 구분선: 너비만 조절 + updateComponent(component.id, { + width: snapValueToGrid(boundedWidth), + }); + } + } else { + // Grid Snap 적용 + updateComponent(component.id, { + width: snapValueToGrid(boundedWidth), + height: snapValueToGrid(boundedHeight), + }); + } } }; @@ -546,21 +561,23 @@ export function CanvasComponent({ component }: CanvasComponentProps) { ); case "divider": - const lineWidth = component.lineWidth || 1; - const lineColor = component.lineColor || "#000000"; + // 구분선 (가로: 너비만 조절, 세로: 높이만 조절) + const dividerLineWidth = component.lineWidth || 1; + const dividerLineColor = component.lineColor || "#000000"; + const isHorizontal = component.orientation !== "vertical"; return ( -
+
@@ -1093,7 +1109,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) { return (
)} diff --git a/frontend/components/report/designer/ReportDesignerCanvas.tsx b/frontend/components/report/designer/ReportDesignerCanvas.tsx index e63d1a9d..47bfa7b5 100644 --- a/frontend/components/report/designer/ReportDesignerCanvas.tsx +++ b/frontend/components/report/designer/ReportDesignerCanvas.tsx @@ -58,7 +58,7 @@ export function ReportDesignerCanvas() { height = 150; } else if (item.componentType === "divider") { width = 300; - height = 2; + height = 10; // 선 두께 + 여백 (선택/드래그를 위한 최소 높이) } else if (item.componentType === "signature") { width = 120; height = 70; diff --git a/frontend/components/report/designer/ReportDesignerRightPanel.tsx b/frontend/components/report/designer/ReportDesignerRightPanel.tsx index aef6d1f2..e648ca8b 100644 --- a/frontend/components/report/designer/ReportDesignerRightPanel.tsx +++ b/frontend/components/report/designer/ReportDesignerRightPanel.tsx @@ -562,11 +562,17 @@ export function ReportDesignerRightPanel() {