79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import { ContainerComponent as ContainerComponentType } from "@/types/screen";
|
|
|
|
interface ContainerComponentProps {
|
|
component: ContainerComponentType;
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
onClick?: () => void;
|
|
isSelected?: boolean;
|
|
onMouseDown?: (e: React.MouseEvent) => void;
|
|
isMoving?: boolean;
|
|
}
|
|
|
|
export default function ContainerComponent({
|
|
component,
|
|
children,
|
|
className,
|
|
onClick,
|
|
isSelected,
|
|
onMouseDown,
|
|
isMoving,
|
|
}: ContainerComponentProps) {
|
|
// 스타일 객체 생성
|
|
const style: React.CSSProperties = {
|
|
gridColumn: `span ${component.size.width}`,
|
|
minHeight: `${component.size.height}px`,
|
|
...(component.style && {
|
|
width: component.style.width,
|
|
height: component.style.height,
|
|
margin: component.style.margin,
|
|
padding: component.style.padding,
|
|
backgroundColor: component.style.backgroundColor,
|
|
border: component.style.border,
|
|
borderRadius: component.style.borderRadius,
|
|
boxShadow: component.style.boxShadow,
|
|
display: component.style.display,
|
|
flexDirection: component.style.flexDirection,
|
|
justifyContent: component.style.justifyContent,
|
|
alignItems: component.style.alignItems,
|
|
gap: component.style.gap,
|
|
color: component.style.color,
|
|
fontSize: component.style.fontSize,
|
|
fontWeight: component.style.fontWeight,
|
|
textAlign: component.style.textAlign,
|
|
position: component.style.position,
|
|
zIndex: component.style.zIndex,
|
|
opacity: component.style.opacity,
|
|
overflow: component.style.overflow,
|
|
cursor: component.style.cursor,
|
|
transition: component.style.transition,
|
|
transform: component.style.transform,
|
|
}),
|
|
...(isMoving && {
|
|
zIndex: 50,
|
|
opacity: 0.8,
|
|
transform: "scale(1.02)",
|
|
}),
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-4",
|
|
isSelected && "border-blue-500 bg-blue-50",
|
|
isMoving && "cursor-move shadow-lg",
|
|
className,
|
|
)}
|
|
style={style}
|
|
onClick={onClick}
|
|
onMouseDown={onMouseDown}
|
|
>
|
|
<div className="mb-2 text-xs text-gray-500">{component.title || "컨테이너"}</div>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|