카드 컴포넌트생성

frontend/components/screen/ScreenDesigner.tsx

@@ -1517,6 +1517,34 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
         defaultConfig: component.defaultConfig,
       });
 
+      // 카드 디스플레이 컴포넌트의 경우 gridColumns에 맞는 width 계산
+      let componentSize = component.defaultSize;
+      const isCardDisplay = component.id === "card-display";
+      const gridColumns = isCardDisplay ? 8 : 1;
+
+      if (isCardDisplay && layout.gridSettings?.snapToGrid && gridInfo) {
+        // gridColumns에 맞는 정확한 너비 계산
+        const calculatedWidth = calculateWidthFromColumns(
+          gridColumns,
+          gridInfo,
+          layout.gridSettings as GridUtilSettings,
+        );
+
+        componentSize = {
+          ...component.defaultSize,
+          width: calculatedWidth,
+        };
+
+        console.log("📐 카드 디스플레이 초기 크기 자동 조정:", {
+          componentId: component.id,
+          gridColumns,
+          defaultWidth: component.defaultSize.width,
+          calculatedWidth,
+          gridInfo,
+          gridSettings: layout.gridSettings,
+        });
+      }
+
       const newComponent: ComponentData = {
         id: generateComponentId(),
         type: "component", // ✅ 새 컴포넌트 시스템 사용
@@ -1524,7 +1552,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
         widgetType: component.webType,
         componentType: component.id, // 새 컴포넌트 시스템의 ID (DynamicComponentRenderer용)
         position: snappedPosition,
-        size: component.defaultSize,
+        size: componentSize,
+        gridColumns: gridColumns, // 카드 디스플레이 컴포넌트는 기본 8그리드
         componentConfig: {
           type: component.id, // 새 컴포넌트 시스템의 ID 사용
           webType: component.webType, // 웹타입 정보 추가

frontend/components/screen/panels/PropertiesPanel.tsx

@@ -195,7 +195,12 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
     height: selectedComponent?.size?.height?.toString() || "0",
     gridColumns:
       selectedComponent?.gridColumns?.toString() ||
-      (selectedComponent?.type === "layout" && (selectedComponent as any)?.layoutType === "card-layout" ? "8" : "1"),
+      (selectedComponent?.type === "layout" && (selectedComponent as any)?.layoutType === "card-layout"
+        ? "8"
+        : selectedComponent?.type === "component" &&
+            (selectedComponent as any)?.componentConfig?.type === "card-display"
+          ? "8"
+          : "1"),
     labelText: selectedComponent?.style?.labelText || selectedComponent?.label || "",
     labelFontSize: selectedComponent?.style?.labelFontSize || "12px",
     labelColor: selectedComponent?.style?.labelColor || "#374151",