/** * ๐ŸŽจ ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ ํƒ€์ž… ์ •์˜ * * ํ–‰(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; // ์ปดํฌ๋„ŒํŠธ ์ €์žฅ์†Œ 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>; /** * ๋“œ๋ž˜๊ทธ์•ค๋“œ๋กญ ์ƒํƒœ */ 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; }