DDD1542
108 lines
2.4 KiB
TypeScript
108 lines
2.4 KiB
TypeScript
/**
|
|
* 🎨 그리드 시스템 타입 정의
|
|
*
|
|
* 행(Row) 기반 12컬럼 그리드 레이아웃 시스템
|
|
*/
|
|
|
|
import { ColumnSpanPreset, GapPreset } from "@/lib/constants/columnSpans";
|
|
import { ComponentData } from "./screen-management";
|
|
|
|
/**
|
|
* 레이아웃 행 정의
|
|
*/
|
|
export interface LayoutRow {
|
|
id: string;
|
|
row_index: number;
|
|
height: "auto" | "fixed" | "min" | "max";
|
|
min_height?: number;
|
|
max_height?: number;
|
|
fixed_height?: number;
|
|
gap: GapPreset;
|
|
padding: GapPreset;
|
|
background_color?: string;
|
|
alignment: "start" | "center" | "end" | "stretch" | "baseline";
|
|
vertical_alignment: "top" | "middle" | "bottom" | "stretch";
|
|
components: RowComponent[];
|
|
}
|
|
|
|
/**
|
|
* 행 내 컴포넌트
|
|
*/
|
|
export interface RowComponent {
|
|
id: string;
|
|
component_id: string; // 실제 ComponentData의 ID
|
|
column_span: ColumnSpanPreset;
|
|
column_start?: number; // 명시적 시작 위치 (선택)
|
|
order?: number; // 정렬 순서
|
|
offset?: ColumnSpanPreset; // 왼쪽 여백
|
|
}
|
|
|
|
/**
|
|
* 전체 그리드 레이아웃 정의
|
|
*/
|
|
export interface GridLayout {
|
|
screen_id: number;
|
|
rows: LayoutRow[];
|
|
components: Map<string, ComponentData>; // 컴포넌트 저장소
|
|
global_settings: GridGlobalSettings;
|
|
}
|
|
|
|
/**
|
|
* 그리드 전역 설정
|
|
*/
|
|
export interface GridGlobalSettings {
|
|
container_max_width?: "full" | "7xl" | "6xl" | "5xl" | "4xl";
|
|
container_padding: GapPreset;
|
|
}
|
|
|
|
/**
|
|
* 행 생성 옵션
|
|
*/
|
|
export interface CreateRowOptions {
|
|
height?: "auto" | "fixed";
|
|
fixed_height?: number;
|
|
gap?: GapPreset;
|
|
padding?: GapPreset;
|
|
alignment?: "start" | "center" | "end" | "stretch";
|
|
}
|
|
|
|
/**
|
|
* 컴포넌트 배치 옵션
|
|
*/
|
|
export interface PlaceComponentOptions {
|
|
column_span: ColumnSpanPreset;
|
|
column_start?: number;
|
|
row_index: number;
|
|
}
|
|
|
|
/**
|
|
* 행 업데이트 옵션
|
|
*/
|
|
export type UpdateRowOptions = Partial<Omit<LayoutRow, "id" | "row_index" | "components">>;
|
|
|
|
/**
|
|
* 드래그앤드롭 상태
|
|
*/
|
|
export interface GridDragState {
|
|
is_dragging: boolean;
|
|
dragged_component_id?: string;
|
|
target_row_id?: string;
|
|
target_column_index?: number;
|
|
preview_position?: {
|
|
row_index: number;
|
|
column_start: number;
|
|
column_span: ColumnSpanPreset;
|
|
};
|
|
}
|
|
|
|
/**
|
|
* 그리드 가이드라인 옵션
|
|
*/
|
|
export interface GridGuideOptions {
|
|
show_grid: boolean;
|
|
show_column_lines: boolean;
|
|
show_row_borders: boolean;
|
|
grid_color?: string;
|
|
grid_opacity?: number;
|
|
}
|