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 ( -