화면관리 12컬럼 중간 커밋

frontend/components/screen/layout/ContainerComponent.tsx

@@ -2,6 +2,7 @@
 
 import { cn } from "@/lib/utils";
 import { ContainerComponent as ContainerComponentType } from "@/types/screen";
+import { buildGridClasses, COLUMN_SPAN_VALUES } from "@/lib/constants/columnSpans";
 
 interface ContainerComponentProps {
   component: ContainerComponentType;
@@ -22,12 +23,20 @@ export default function ContainerComponent({
   onMouseDown,
   isMoving,
 }: ContainerComponentProps) {
+  // 그리드 클래스 생성
+  const gridClasses = component.gridColumnSpan
+    ? buildGridClasses(component.gridColumnSpan, component.gridColumnStart)
+    : "";
+
   // 스타일 객체 생성
   const style: React.CSSProperties = {
-    gridColumn: `span ${component.size.width}`,
+    // 🔄 레거시 호환: gridColumnSpan이 없으면 기존 width 사용
+    ...(!component.gridColumnSpan && {
+      gridColumn: `span ${component.size.width}`,
+    }),
     minHeight: `${component.size.height}px`,
     ...(component.style && {
-      width: component.style.width,
+      // ❌ width는 제거 (그리드 클래스로 제어)
       height: component.style.height,
       margin: component.style.margin,
       padding: component.style.padding,
@@ -63,6 +72,7 @@ export default function ContainerComponent({
     <div
       className={cn(
         "rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-4",
+        gridClasses, // 🆕 그리드 클래스 추가
         isSelected && "border-primary bg-accent",
         isMoving && "cursor-move",
         className,