카드 레이아웃 구현

frontend/types/layout.ts

@@ -135,6 +135,33 @@ export interface LayoutConfig {
     className: string;
     template: string; // HTML 템플릿
   };
+
+  // 카드 레이아웃 설정
+  card?: {
+    // 테이블 컬럼 매핑 설정
+    columnMapping?: {
+      titleColumn?: string; // 카드 타이틀로 사용할 컬럼
+      subtitleColumn?: string; // 카드 서브타이틀로 사용할 컬럼
+      imageColumn?: string; // 카드 이미지로 사용할 컬럼
+      descriptionColumn?: string; // 카드 설명으로 사용할 컬럼
+      displayColumns?: string[]; // 카드에 표시할 추가 컬럼들
+      actionColumns?: string[]; // 액션 버튼으로 표시할 컬럼들
+    };
+    // 카드 스타일 설정
+    cardStyle?: {
+      showImage?: boolean;
+      showTitle?: boolean;
+      showSubtitle?: boolean;
+      showDescription?: boolean;
+      maxDescriptionLength?: number;
+      imagePosition?: "top" | "left" | "right";
+      imageSize?: "small" | "medium" | "large";
+    };
+    // 그리드 설정
+    cardsPerRow?: number; // 한 행에 표시할 카드 수
+    cardSpacing?: number; // 카드 간격
+    autoHeight?: boolean; // 자동 높이 조정
+  };
 }
 
 // 드롭존 설정

frontend/types/screen.ts

@@ -160,6 +160,7 @@ export interface BaseComponent {
   position: Position;
   size: { width: number; height: number };
   parentId?: string;
+  zoneId?: string; // 레이아웃 존 ID (레이아웃 내 배치용)
   style?: ComponentStyle; // 스타일 속성 추가
   tableName?: string; // 테이블명 추가
   label?: string; // 라벨 추가