화면관리 12컬럼 중간 커밋

frontend/types/grid-system.ts

@@ -0,0 +1,107 @@
+/**
+ * 🎨 그리드 시스템 타입 정의
+ *
+ * 행(Row) 기반 12컬럼 그리드 레이아웃 시스템
+ */
+
+import { ColumnSpanPreset, GapPreset } from "@/lib/constants/columnSpans";
+import { ComponentData } from "./screen-management";
+
+/**
+ * 레이아웃 행 정의
+ */
+export interface LayoutRow {
+  id: string;
+  rowIndex: number;
+  height: "auto" | "fixed" | "min" | "max";
+  minHeight?: number;
+  maxHeight?: number;
+  fixedHeight?: number;
+  gap: GapPreset;
+  padding: GapPreset;
+  backgroundColor?: string;
+  alignment: "start" | "center" | "end" | "stretch" | "baseline";
+  verticalAlignment: "top" | "middle" | "bottom" | "stretch";
+  components: RowComponent[];
+}
+
+/**
+ * 행 내 컴포넌트
+ */
+export interface RowComponent {
+  id: string;
+  componentId: string; // 실제 ComponentData의 ID
+  columnSpan: ColumnSpanPreset;
+  columnStart?: number; // 명시적 시작 위치 (선택)
+  order?: number; // 정렬 순서
+  offset?: ColumnSpanPreset; // 왼쪽 여백
+}
+
+/**
+ * 전체 그리드 레이아웃 정의
+ */
+export interface GridLayout {
+  screenId: number;
+  rows: LayoutRow[];
+  components: Map<string, ComponentData>; // 컴포넌트 저장소
+  globalSettings: GridGlobalSettings;
+}
+
+/**
+ * 그리드 전역 설정
+ */
+export interface GridGlobalSettings {
+  containerMaxWidth?: "full" | "7xl" | "6xl" | "5xl" | "4xl";
+  containerPadding: GapPreset;
+}
+
+/**
+ * 행 생성 옵션
+ */
+export interface CreateRowOptions {
+  height?: "auto" | "fixed";
+  fixedHeight?: number;
+  gap?: GapPreset;
+  padding?: GapPreset;
+  alignment?: "start" | "center" | "end" | "stretch";
+}
+
+/**
+ * 컴포넌트 배치 옵션
+ */
+export interface PlaceComponentOptions {
+  columnSpan: ColumnSpanPreset;
+  columnStart?: number;
+  rowIndex: number;
+}
+
+/**
+ * 행 업데이트 옵션
+ */
+export type UpdateRowOptions = Partial<Omit<LayoutRow, "id" | "rowIndex" | "components">>;
+
+/**
+ * 드래그앤드롭 상태
+ */
+export interface GridDragState {
+  isDragging: boolean;
+  draggedComponentId?: string;
+  targetRowId?: string;
+  targetColumnIndex?: number;
+  previewPosition?: {
+    rowIndex: number;
+    columnStart: number;
+    columnSpan: ColumnSpanPreset;
+  };
+}
+
+/**
+ * 그리드 가이드라인 옵션
+ */
+export interface GridGuideOptions {
+  showGrid: boolean;
+  showColumnLines: boolean;
+  showRowBorders: boolean;
+  gridColor?: string;
+  gridOpacity?: number;
+}

frontend/types/screen-management.ts

@@ -17,6 +17,7 @@ import {
   ActiveStatus,
   isWebType,
 } from "./unified-core";
+import { ColumnSpanPreset } from "@/lib/constants/columnSpans";
 
 // ===== 기본 컴포넌트 인터페이스 =====
 
@@ -26,16 +27,25 @@ import {
 export interface BaseComponent {
   id: string;
   type: ComponentType;
-  position: Position;
-  size: Size;
+
+  // 🔄 레거시 위치/크기 (단계적 제거 예정)
+  position: Position; // y 좌표는 유지 (행 정렬용)
+  size: Size; // height만 사용
+
+  // 🆕 그리드 시스템 속성
+  gridColumnSpan?: ColumnSpanPreset; // 컬럼 너비
+  gridColumnStart?: number; // 시작 컬럼 (1-12)
+  gridRowIndex?: number; // 행 인덱스
+
   parentId?: string;
   label?: string;
   required?: boolean;
   readonly?: boolean;
   style?: ComponentStyle;
   className?: string;
+
   // 새 컴포넌트 시스템에서 필요한 속성들
-  gridColumns?: number; // 그리드에서 차지할 컬럼 수 (1-12)
+  gridColumns?: number; // 🔄 deprecated - gridColumnSpan 사용
   zoneId?: string; // 레이아웃 존 ID
   componentConfig?: any; // 컴포넌트별 설정
   componentType?: string; // 새 컴포넌트 시스템의 ID
@@ -132,7 +142,13 @@ export interface ComponentComponent extends BaseComponent {
 /**
  * 통합 컴포넌트 데이터 타입
  */
-export type ComponentData = WidgetComponent | ContainerComponent | GroupComponent | DataTableComponent | FileComponent | ComponentComponent;
+export type ComponentData =
+  | WidgetComponent
+  | ContainerComponent
+  | GroupComponent
+  | DataTableComponent
+  | FileComponent
+  | ComponentComponent;
 
 // ===== 웹타입별 설정 인터페이스 =====