108 lines
2.3 KiB
TypeScript
108 lines
2.3 KiB
TypeScript
|
/**
|
||
|
|
* 🎨 그리드 시스템 타입 정의
|
||
|
|
*
|
||
|
|
* 행(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;
|
||
|
|
}
|