컴포넌트 스타일링 구현

This commit is contained in:
dohyeons
2025-10-01 14:14:06 +09:00
parent 7cefc39b74
commit de97c40517
4 changed files with 218 additions and 61 deletions

View File

@@ -104,6 +104,11 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
top: `${component.y}px`,
width: `${component.width}px`,
height: `${component.height}px`,
backgroundColor: component.backgroundColor,
border: component.borderWidth
? `${component.borderWidth}px solid ${component.borderColor}`
: "none",
padding: "8px",
}}
>
{component.type === "text" && (
@@ -111,7 +116,8 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
style={{
fontSize: `${component.fontSize}px`,
color: component.fontColor,
backgroundColor: component.backgroundColor,
fontWeight: component.fontWeight,
textAlign: component.textAlign as "left" | "center" | "right",
}}
>
{displayValue}
@@ -120,11 +126,11 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
{component.type === "label" && (
<div
className="font-semibold"
style={{
fontSize: `${component.fontSize}px`,
color: component.fontColor,
backgroundColor: component.backgroundColor,
fontWeight: component.fontWeight,
textAlign: component.textAlign as "left" | "center" | "right",
}}
>
{displayValue}