619 lines
21 KiB
TypeScript
619 lines
21 KiB
TypeScript
"use client";
|
|
|
|
import { useRef, useState, useEffect } from "react";
|
|
import { ComponentConfig } from "@/types/report";
|
|
import { useReportDesigner } from "@/contexts/ReportDesignerContext";
|
|
import { getFullImageUrl } from "@/lib/api/client";
|
|
|
|
interface CanvasComponentProps {
|
|
component: ComponentConfig;
|
|
}
|
|
|
|
export function CanvasComponent({ component }: CanvasComponentProps) {
|
|
const {
|
|
components,
|
|
selectedComponentId,
|
|
selectedComponentIds,
|
|
selectComponent,
|
|
updateComponent,
|
|
getQueryResult,
|
|
snapValueToGrid,
|
|
calculateAlignmentGuides,
|
|
clearAlignmentGuides,
|
|
canvasWidth,
|
|
canvasHeight,
|
|
margins,
|
|
} = useReportDesigner();
|
|
const [isDragging, setIsDragging] = useState(false);
|
|
const [isResizing, setIsResizing] = useState(false);
|
|
const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
|
|
const [resizeStart, setResizeStart] = useState({ x: 0, y: 0, width: 0, height: 0 });
|
|
const componentRef = useRef<HTMLDivElement>(null);
|
|
|
|
const isSelected = selectedComponentId === component.id;
|
|
const isMultiSelected = selectedComponentIds.includes(component.id);
|
|
const isLocked = component.locked === true;
|
|
const isGrouped = !!component.groupId;
|
|
|
|
// 드래그 시작
|
|
const handleMouseDown = (e: React.MouseEvent) => {
|
|
if ((e.target as HTMLElement).classList.contains("resize-handle")) {
|
|
return;
|
|
}
|
|
|
|
// 잠긴 컴포넌트는 드래그 불가
|
|
if (isLocked) {
|
|
e.stopPropagation();
|
|
// Ctrl/Cmd 키 감지 (다중 선택)
|
|
const isMultiSelect = e.ctrlKey || e.metaKey;
|
|
selectComponent(component.id, isMultiSelect);
|
|
return;
|
|
}
|
|
|
|
e.stopPropagation();
|
|
|
|
// Ctrl/Cmd 키 감지 (다중 선택)
|
|
const isMultiSelect = e.ctrlKey || e.metaKey;
|
|
|
|
// 그룹화된 컴포넌트 클릭 시: 같은 그룹의 모든 컴포넌트 선택
|
|
if (isGrouped && !isMultiSelect) {
|
|
const groupMembers = components.filter((c) => c.groupId === component.groupId);
|
|
const groupMemberIds = groupMembers.map((c) => c.id);
|
|
// 첫 번째 컴포넌트를 선택하고, 나머지를 다중 선택에 추가
|
|
selectComponent(groupMemberIds[0], false);
|
|
groupMemberIds.slice(1).forEach((id) => selectComponent(id, true));
|
|
} else {
|
|
selectComponent(component.id, isMultiSelect);
|
|
}
|
|
|
|
setIsDragging(true);
|
|
setDragStart({
|
|
x: e.clientX - component.x,
|
|
y: e.clientY - component.y,
|
|
});
|
|
};
|
|
|
|
// 리사이즈 시작
|
|
const handleResizeStart = (e: React.MouseEvent) => {
|
|
// 잠긴 컴포넌트는 리사이즈 불가
|
|
if (isLocked) {
|
|
e.stopPropagation();
|
|
return;
|
|
}
|
|
|
|
e.stopPropagation();
|
|
setIsResizing(true);
|
|
setResizeStart({
|
|
x: e.clientX,
|
|
y: e.clientY,
|
|
width: component.width,
|
|
height: component.height,
|
|
});
|
|
};
|
|
|
|
// 마우스 이동 핸들러 (전역)
|
|
useEffect(() => {
|
|
if (!isDragging && !isResizing) return;
|
|
|
|
const handleMouseMove = (e: MouseEvent) => {
|
|
if (isDragging) {
|
|
const newX = Math.max(0, e.clientX - dragStart.x);
|
|
const newY = Math.max(0, e.clientY - dragStart.y);
|
|
|
|
// 여백을 px로 변환 (1mm ≈ 3.7795px)
|
|
const marginTopPx = margins.top * 3.7795;
|
|
const marginBottomPx = margins.bottom * 3.7795;
|
|
const marginLeftPx = margins.left * 3.7795;
|
|
const marginRightPx = margins.right * 3.7795;
|
|
|
|
// 캔버스 경계 체크 (mm를 px로 변환)
|
|
const canvasWidthPx = canvasWidth * 3.7795;
|
|
const canvasHeightPx = canvasHeight * 3.7795;
|
|
|
|
// 컴포넌트가 여백 안에 있도록 제한
|
|
const minX = marginLeftPx;
|
|
const minY = marginTopPx;
|
|
const maxX = canvasWidthPx - marginRightPx - component.width;
|
|
const maxY = canvasHeightPx - marginBottomPx - component.height;
|
|
|
|
const boundedX = Math.min(Math.max(minX, newX), maxX);
|
|
const boundedY = Math.min(Math.max(minY, newY), maxY);
|
|
|
|
const snappedX = snapValueToGrid(boundedX);
|
|
const snappedY = snapValueToGrid(boundedY);
|
|
|
|
// 정렬 가이드라인 계산
|
|
calculateAlignmentGuides(component.id, snappedX, snappedY, component.width, component.height);
|
|
|
|
// 이동 거리 계산
|
|
const deltaX = snappedX - component.x;
|
|
const deltaY = snappedY - component.y;
|
|
|
|
// 현재 컴포넌트 이동
|
|
updateComponent(component.id, {
|
|
x: snappedX,
|
|
y: snappedY,
|
|
});
|
|
|
|
// 그룹화된 경우: 같은 그룹의 다른 컴포넌트도 함께 이동
|
|
if (isGrouped) {
|
|
components.forEach((c) => {
|
|
if (c.groupId === component.groupId && c.id !== component.id) {
|
|
const newGroupX = c.x + deltaX;
|
|
const newGroupY = c.y + deltaY;
|
|
|
|
// 그룹 컴포넌트도 경계 체크
|
|
const groupMaxX = canvasWidthPx - c.width;
|
|
const groupMaxY = canvasHeightPx - c.height;
|
|
|
|
updateComponent(c.id, {
|
|
x: Math.min(Math.max(0, newGroupX), groupMaxX),
|
|
y: Math.min(Math.max(0, newGroupY), groupMaxY),
|
|
});
|
|
}
|
|
});
|
|
}
|
|
} else if (isResizing) {
|
|
const deltaX = e.clientX - resizeStart.x;
|
|
const deltaY = e.clientY - resizeStart.y;
|
|
const newWidth = Math.max(50, resizeStart.width + deltaX);
|
|
const newHeight = Math.max(30, resizeStart.height + deltaY);
|
|
|
|
// 여백을 px로 변환
|
|
const marginRightPx = margins.right * 3.7795;
|
|
const marginBottomPx = margins.bottom * 3.7795;
|
|
|
|
// 캔버스 경계 체크
|
|
const canvasWidthPx = canvasWidth * 3.7795;
|
|
const canvasHeightPx = canvasHeight * 3.7795;
|
|
|
|
// 컴포넌트가 여백을 벗어나지 않도록 최대 크기 제한
|
|
const maxWidth = canvasWidthPx - marginRightPx - component.x;
|
|
const maxHeight = canvasHeightPx - marginBottomPx - component.y;
|
|
|
|
const boundedWidth = Math.min(newWidth, maxWidth);
|
|
const boundedHeight = Math.min(newHeight, maxHeight);
|
|
|
|
// Grid Snap 적용
|
|
updateComponent(component.id, {
|
|
width: snapValueToGrid(boundedWidth),
|
|
height: snapValueToGrid(boundedHeight),
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleMouseUp = () => {
|
|
setIsDragging(false);
|
|
setIsResizing(false);
|
|
// 가이드라인 초기화
|
|
clearAlignmentGuides();
|
|
};
|
|
|
|
document.addEventListener("mousemove", handleMouseMove);
|
|
document.addEventListener("mouseup", handleMouseUp);
|
|
|
|
return () => {
|
|
document.removeEventListener("mousemove", handleMouseMove);
|
|
document.removeEventListener("mouseup", handleMouseUp);
|
|
};
|
|
}, [
|
|
isDragging,
|
|
isResizing,
|
|
dragStart.x,
|
|
dragStart.y,
|
|
resizeStart.x,
|
|
resizeStart.y,
|
|
resizeStart.width,
|
|
resizeStart.height,
|
|
component.id,
|
|
component.x,
|
|
component.y,
|
|
component.width,
|
|
component.height,
|
|
component.groupId,
|
|
isGrouped,
|
|
components,
|
|
updateComponent,
|
|
snapValueToGrid,
|
|
calculateAlignmentGuides,
|
|
clearAlignmentGuides,
|
|
canvasWidth,
|
|
canvasHeight,
|
|
]);
|
|
|
|
// 표시할 값 결정
|
|
const getDisplayValue = (): string => {
|
|
// 쿼리와 필드가 연결되어 있으면 실제 데이터 조회
|
|
if (component.queryId && component.fieldName) {
|
|
const queryResult = getQueryResult(component.queryId);
|
|
|
|
// 실행 결과가 있으면 첫 번째 행의 해당 필드 값 표시
|
|
if (queryResult && queryResult.rows.length > 0) {
|
|
const firstRow = queryResult.rows[0];
|
|
const value = firstRow[component.fieldName];
|
|
|
|
// 값이 있으면 문자열로 변환하여 반환
|
|
if (value !== null && value !== undefined) {
|
|
return String(value);
|
|
}
|
|
}
|
|
|
|
// 실행 결과가 없거나 값이 없으면 필드명 표시
|
|
return `{${component.fieldName}}`;
|
|
}
|
|
|
|
// 기본값이 있으면 기본값 표시
|
|
if (component.defaultValue) {
|
|
return component.defaultValue;
|
|
}
|
|
|
|
// 둘 다 없으면 타입에 따라 기본 텍스트
|
|
return component.type === "text" ? "텍스트 입력" : "레이블 텍스트";
|
|
};
|
|
|
|
// 컴포넌트 타입별 렌더링
|
|
const renderContent = () => {
|
|
const displayValue = getDisplayValue();
|
|
const hasBinding = component.queryId && component.fieldName;
|
|
|
|
switch (component.type) {
|
|
case "text":
|
|
return (
|
|
<div className="h-full w-full">
|
|
<div className="mb-1 flex items-center justify-between text-xs text-gray-500">
|
|
<span>텍스트 필드</span>
|
|
{hasBinding && <span className="text-blue-600">● 연결됨</span>}
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: `${component.fontSize}px`,
|
|
color: component.fontColor,
|
|
fontWeight: component.fontWeight,
|
|
textAlign: component.textAlign as "left" | "center" | "right",
|
|
}}
|
|
className="w-full"
|
|
>
|
|
{displayValue}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
case "label":
|
|
return (
|
|
<div className="h-full w-full">
|
|
<div className="mb-1 flex items-center justify-between text-xs text-gray-500">
|
|
<span>레이블</span>
|
|
{hasBinding && <span className="text-blue-600">● 연결됨</span>}
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: `${component.fontSize}px`,
|
|
color: component.fontColor,
|
|
fontWeight: component.fontWeight,
|
|
textAlign: component.textAlign as "left" | "center" | "right",
|
|
}}
|
|
>
|
|
{displayValue}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
case "table":
|
|
// 테이블은 쿼리 결과의 모든 행과 필드를 표시
|
|
if (component.queryId) {
|
|
const queryResult = getQueryResult(component.queryId);
|
|
|
|
if (queryResult && queryResult.rows.length > 0) {
|
|
// tableColumns가 없으면 자동 생성
|
|
const columns =
|
|
component.tableColumns && component.tableColumns.length > 0
|
|
? component.tableColumns
|
|
: queryResult.fields.map((field) => ({
|
|
field,
|
|
header: field,
|
|
width: undefined,
|
|
align: "left" as const,
|
|
}));
|
|
|
|
return (
|
|
<div className="h-full w-full overflow-auto">
|
|
<div className="mb-1 flex items-center justify-between text-xs text-gray-500">
|
|
<span>테이블</span>
|
|
<span className="text-blue-600">● 연결됨 ({queryResult.rows.length}행)</span>
|
|
</div>
|
|
<table
|
|
className="w-full border-collapse text-xs"
|
|
style={{
|
|
borderCollapse: component.showBorder !== false ? "collapse" : "separate",
|
|
}}
|
|
>
|
|
<thead>
|
|
<tr
|
|
style={{
|
|
backgroundColor: component.headerBackgroundColor || "#f3f4f6",
|
|
color: component.headerTextColor || "#111827",
|
|
}}
|
|
>
|
|
{columns.map((col) => (
|
|
<th
|
|
key={col.field}
|
|
className={component.showBorder !== false ? "border border-gray-300" : ""}
|
|
style={{
|
|
padding: "6px 8px",
|
|
textAlign: col.align || "left",
|
|
width: col.width ? `${col.width}px` : "auto",
|
|
fontWeight: "600",
|
|
}}
|
|
>
|
|
{col.header}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{queryResult.rows.map((row, idx) => (
|
|
<tr key={idx}>
|
|
{columns.map((col) => (
|
|
<td
|
|
key={col.field}
|
|
className={component.showBorder !== false ? "border border-gray-300" : ""}
|
|
style={{
|
|
padding: "6px 8px",
|
|
textAlign: col.align || "left",
|
|
height: component.rowHeight ? `${component.rowHeight}px` : "auto",
|
|
}}
|
|
>
|
|
{String(row[col.field] ?? "")}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
// 기본 테이블 (데이터 없을 때)
|
|
return (
|
|
<div className="h-full w-full">
|
|
<div className="mb-1 text-xs text-gray-500">테이블</div>
|
|
<div className="flex h-[calc(100%-20px)] items-center justify-center border-2 border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400">
|
|
쿼리를 연결하세요
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
case "image":
|
|
return (
|
|
<div className="h-full w-full overflow-hidden">
|
|
<div className="mb-1 text-xs text-gray-500">이미지</div>
|
|
{component.imageUrl ? (
|
|
<img
|
|
src={getFullImageUrl(component.imageUrl)}
|
|
alt="이미지"
|
|
style={{
|
|
width: "100%",
|
|
height: "calc(100% - 20px)",
|
|
objectFit: component.objectFit || "contain",
|
|
}}
|
|
/>
|
|
) : (
|
|
<div className="flex h-[calc(100%-20px)] w-full items-center justify-center border border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400">
|
|
이미지를 업로드하세요
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
case "divider":
|
|
const lineWidth = component.lineWidth || 1;
|
|
const lineColor = component.lineColor || "#000000";
|
|
|
|
return (
|
|
<div className="flex h-full w-full items-center justify-center">
|
|
<div
|
|
style={{
|
|
width: component.orientation === "horizontal" ? "100%" : `${lineWidth}px`,
|
|
height: component.orientation === "vertical" ? "100%" : `${lineWidth}px`,
|
|
backgroundColor: lineColor,
|
|
...(component.lineStyle === "dashed" && {
|
|
backgroundImage: `repeating-linear-gradient(
|
|
${component.orientation === "horizontal" ? "90deg" : "0deg"},
|
|
${lineColor} 0px,
|
|
${lineColor} 10px,
|
|
transparent 10px,
|
|
transparent 20px
|
|
)`,
|
|
backgroundColor: "transparent",
|
|
}),
|
|
...(component.lineStyle === "dotted" && {
|
|
backgroundImage: `repeating-linear-gradient(
|
|
${component.orientation === "horizontal" ? "90deg" : "0deg"},
|
|
${lineColor} 0px,
|
|
${lineColor} 3px,
|
|
transparent 3px,
|
|
transparent 10px
|
|
)`,
|
|
backgroundColor: "transparent",
|
|
}),
|
|
...(component.lineStyle === "double" && {
|
|
boxShadow:
|
|
component.orientation === "horizontal"
|
|
? `0 ${lineWidth * 2}px 0 0 ${lineColor}`
|
|
: `${lineWidth * 2}px 0 0 0 ${lineColor}`,
|
|
}),
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
case "signature":
|
|
const sigLabelPos = component.labelPosition || "left";
|
|
const sigShowLabel = component.showLabel !== false;
|
|
const sigLabelText = component.labelText || "서명:";
|
|
const sigShowUnderline = component.showUnderline !== false;
|
|
|
|
return (
|
|
<div className="h-full w-full">
|
|
<div className="mb-1 text-xs text-gray-500">서명란</div>
|
|
<div
|
|
className={`flex h-[calc(100%-20px)] gap-2 ${
|
|
sigLabelPos === "top"
|
|
? "flex-col"
|
|
: sigLabelPos === "bottom"
|
|
? "flex-col-reverse"
|
|
: sigLabelPos === "right"
|
|
? "flex-row-reverse"
|
|
: "flex-row"
|
|
}`}
|
|
>
|
|
{sigShowLabel && (
|
|
<div
|
|
className="flex items-center justify-center text-xs font-medium"
|
|
style={{
|
|
width: sigLabelPos === "left" || sigLabelPos === "right" ? "auto" : "100%",
|
|
minWidth: sigLabelPos === "left" || sigLabelPos === "right" ? "40px" : "auto",
|
|
}}
|
|
>
|
|
{sigLabelText}
|
|
</div>
|
|
)}
|
|
<div className="relative flex-1">
|
|
{component.imageUrl ? (
|
|
<img
|
|
src={getFullImageUrl(component.imageUrl)}
|
|
alt="서명"
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: component.objectFit || "contain",
|
|
}}
|
|
/>
|
|
) : (
|
|
<div
|
|
className="flex h-full w-full items-center justify-center border-2 border-dashed bg-gray-50 text-xs text-gray-400"
|
|
style={{
|
|
borderColor: component.borderColor || "#cccccc",
|
|
}}
|
|
>
|
|
서명 이미지
|
|
</div>
|
|
)}
|
|
{sigShowUnderline && (
|
|
<div
|
|
className="absolute right-0 bottom-0 left-0"
|
|
style={{
|
|
borderBottom: "2px solid #000000",
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
case "stamp":
|
|
const stampShowLabel = component.showLabel !== false;
|
|
const stampLabelText = component.labelText || "(인)";
|
|
const stampPersonName = component.personName || "";
|
|
|
|
return (
|
|
<div className="h-full w-full">
|
|
<div className="mb-1 text-xs text-gray-500">도장란</div>
|
|
<div className="flex h-[calc(100%-20px)] gap-2">
|
|
{stampPersonName && <div className="flex items-center text-xs font-medium">{stampPersonName}</div>}
|
|
<div className="relative flex-1">
|
|
{component.imageUrl ? (
|
|
<img
|
|
src={getFullImageUrl(component.imageUrl)}
|
|
alt="도장"
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: component.objectFit || "contain",
|
|
}}
|
|
/>
|
|
) : (
|
|
<div
|
|
className="flex h-full w-full items-center justify-center border-2 border-dashed bg-gray-50 text-xs text-gray-400"
|
|
style={{
|
|
borderColor: component.borderColor || "#cccccc",
|
|
borderRadius: "50%",
|
|
}}
|
|
>
|
|
도장 이미지
|
|
</div>
|
|
)}
|
|
{stampShowLabel && (
|
|
<div
|
|
className="absolute inset-0 flex items-center justify-center text-xs font-medium"
|
|
style={{
|
|
pointerEvents: "none",
|
|
}}
|
|
>
|
|
{stampLabelText}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
default:
|
|
return <div>알 수 없는 컴포넌트</div>;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
ref={componentRef}
|
|
className={`absolute p-2 shadow-sm ${isLocked ? "cursor-not-allowed opacity-80" : "cursor-move"} ${
|
|
isSelected
|
|
? isLocked
|
|
? "ring-2 ring-red-500"
|
|
: "ring-2 ring-blue-500"
|
|
: isMultiSelected
|
|
? isLocked
|
|
? "ring-2 ring-red-300"
|
|
: "ring-2 ring-blue-300"
|
|
: ""
|
|
}`}
|
|
style={{
|
|
left: `${component.x}px`,
|
|
top: `${component.y}px`,
|
|
width: `${component.width}px`,
|
|
height: `${component.height}px`,
|
|
zIndex: component.zIndex,
|
|
backgroundColor: component.backgroundColor,
|
|
border: component.borderWidth
|
|
? `${component.borderWidth}px solid ${component.borderColor}`
|
|
: "1px solid #e5e7eb",
|
|
}}
|
|
onMouseDown={handleMouseDown}
|
|
>
|
|
{renderContent()}
|
|
|
|
{/* 잠금 표시 */}
|
|
{isLocked && (
|
|
<div className="absolute top-1 right-1 rounded bg-red-500 px-1 py-0.5 text-[10px] text-white">🔒</div>
|
|
)}
|
|
|
|
{/* 그룹화 표시 */}
|
|
{isGrouped && !isLocked && (
|
|
<div className="absolute top-1 left-1 rounded bg-purple-500 px-1 py-0.5 text-[10px] text-white">👥</div>
|
|
)}
|
|
|
|
{/* 리사이즈 핸들 (선택된 경우만, 잠금 안 된 경우만) */}
|
|
{isSelected && !isLocked && (
|
|
<div
|
|
className="resize-handle absolute right-0 bottom-0 h-3 w-3 cursor-se-resize rounded-full bg-blue-500"
|
|
style={{ transform: "translate(50%, 50%)" }}
|
|
onMouseDown={handleResizeStart}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|