화면관리 중간 커밋

frontend/components/screen/layout/ContainerComponent.tsx

@@ -0,0 +1,78 @@
+"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>
+  );
+}