텍스트 컴포넌트를 textarea로 변경
This commit is contained in:
dohyeons
parent
b7b881ee86
commit
fb4b5b7e26
|
|
@ -623,18 +623,29 @@ export class ReportController {
|
|||
? AlignmentTypeRef.RIGHT
|
||||
: AlignmentTypeRef.LEFT;
|
||||
|
||||
// 줄바꿈 처리: \n으로 split하여 각 줄을 TextRun으로 생성
|
||||
const lines = displayValue.split("\n");
|
||||
const textChildren: TextRun[] = [];
|
||||
lines.forEach((line: string, index: number) => {
|
||||
if (index > 0) {
|
||||
// 줄바꿈 추가 (break: 1은 줄바꿈 1개)
|
||||
textChildren.push(new TextRunRef({ break: 1 }));
|
||||
}
|
||||
textChildren.push(
|
||||
new TextRunRef({
|
||||
text: line,
|
||||
size: fontSizeHalfPt,
|
||||
color: (component.fontColor || "#000000").replace("#", ""),
|
||||
bold: component.fontWeight === "bold" || component.fontWeight === "600",
|
||||
font: "맑은 고딕",
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
result.push(
|
||||
new ParagraphRef({
|
||||
alignment,
|
||||
children: [
|
||||
new TextRunRef({
|
||||
text: displayValue,
|
||||
size: fontSizeHalfPt,
|
||||
color: (component.fontColor || "#000000").replace("#", ""),
|
||||
bold: component.fontWeight === "bold" || component.fontWeight === "600",
|
||||
font: "맑은 고딕",
|
||||
}),
|
||||
],
|
||||
children: textChildren,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
|
@ -908,20 +919,30 @@ export class ReportController {
|
|||
? AlignmentType.RIGHT
|
||||
: AlignmentType.LEFT;
|
||||
|
||||
// 줄바꿈 처리: \n으로 split하여 각 줄을 TextRun으로 생성
|
||||
const lines = displayValue.split("\n");
|
||||
const textChildren: TextRun[] = [];
|
||||
lines.forEach((line: string, index: number) => {
|
||||
if (index > 0) {
|
||||
textChildren.push(new TextRun({ break: 1 }));
|
||||
}
|
||||
textChildren.push(
|
||||
new TextRun({
|
||||
text: line,
|
||||
size: fontSizeHalfPt,
|
||||
color: (component.fontColor || "#000000").replace("#", ""),
|
||||
bold: component.fontWeight === "bold" || component.fontWeight === "600",
|
||||
font: "맑은 고딕",
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
// 테이블 셀로 감싸서 width 제한 → 자동 줄바꿈
|
||||
const textCell = new TableCell({
|
||||
children: [
|
||||
new Paragraph({
|
||||
alignment,
|
||||
children: [
|
||||
new TextRun({
|
||||
text: displayValue,
|
||||
size: fontSizeHalfPt,
|
||||
color: (component.fontColor || "#000000").replace("#", ""),
|
||||
bold: component.fontWeight === "bold" || component.fontWeight === "600",
|
||||
font: "맑은 고딕",
|
||||
}),
|
||||
],
|
||||
children: textChildren,
|
||||
}),
|
||||
],
|
||||
width: { size: pxToTwip(component.width), type: WidthType.DXA },
|
||||
|
|
|
|||
|
|
@ -270,6 +270,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
color: component.fontColor,
|
||||
fontWeight: component.fontWeight,
|
||||
textAlign: component.textAlign as "left" | "center" | "right",
|
||||
whiteSpace: "pre-wrap",
|
||||
}}
|
||||
className="w-full"
|
||||
>
|
||||
|
|
@ -291,6 +292,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
|
|||
color: component.fontColor,
|
||||
fontWeight: component.fontWeight,
|
||||
textAlign: component.textAlign as "left" | "center" | "right",
|
||||
whiteSpace: "pre-wrap",
|
||||
}}
|
||||
>
|
||||
{displayValue}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
|
|
@ -1120,16 +1121,16 @@ export function ReportDesignerRightPanel() {
|
|||
{/* 기본값 (텍스트/라벨만) */}
|
||||
{(selectedComponent.type === "text" || selectedComponent.type === "label") && (
|
||||
<div>
|
||||
<Label className="text-xs">기본값</Label>
|
||||
<Input
|
||||
<Label className="text-xs">텍스트 내용</Label>
|
||||
<Textarea
|
||||
value={selectedComponent.defaultValue || ""}
|
||||
onChange={(e) =>
|
||||
updateComponent(selectedComponent.id, {
|
||||
defaultValue: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="데이터가 없을 때 표시할 값"
|
||||
className="h-8"
|
||||
placeholder="텍스트 내용 (엔터로 줄바꿈 가능)"
|
||||
className="min-h-[80px] resize-y"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
// Text/Label 컴포넌트
|
||||
if (component.type === "text" || component.type === "label") {
|
||||
const displayValue = getComponentValue(component);
|
||||
content = `<div style="font-size: ${component.fontSize || 13}px; color: ${component.fontColor || "#000000"}; font-weight: ${component.fontWeight || "normal"}; text-align: ${component.textAlign || "left"};">${displayValue}</div>`;
|
||||
content = `<div style="font-size: ${component.fontSize || 13}px; color: ${component.fontColor || "#000000"}; font-weight: ${component.fontWeight || "normal"}; text-align: ${component.textAlign || "left"}; white-space: pre-wrap;">${displayValue}</div>`;
|
||||
}
|
||||
|
||||
// Image 컴포넌트
|
||||
|
|
@ -431,6 +431,7 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
color: component.fontColor,
|
||||
fontWeight: component.fontWeight,
|
||||
textAlign: component.textAlign as "left" | "center" | "right",
|
||||
whiteSpace: "pre-wrap",
|
||||
}}
|
||||
>
|
||||
{displayValue}
|
||||
|
|
@ -444,6 +445,7 @@ export function ReportPreviewModal({ isOpen, onClose }: ReportPreviewModalProps)
|
|||
color: component.fontColor,
|
||||
fontWeight: component.fontWeight,
|
||||
textAlign: component.textAlign as "left" | "center" | "right",
|
||||
whiteSpace: "pre-wrap",
|
||||
}}
|
||||
>
|
||||
{displayValue}
|
||||
|
|
|
|||
Loading…
Reference in New Issue