70 lines
1.4 KiB
TypeScript
70 lines
1.4 KiB
TypeScript
/**
|
|
* 반응형 레이아웃 시스템 타입 정의
|
|
*/
|
|
|
|
/**
|
|
* 브레이크포인트 타입 정의
|
|
*/
|
|
export type Breakpoint = "desktop" | "tablet" | "mobile";
|
|
|
|
/**
|
|
* 브레이크포인트별 설정
|
|
*/
|
|
export interface BreakpointConfig {
|
|
minWidth: number; // 최소 너비 (px)
|
|
maxWidth?: number; // 최대 너비 (px)
|
|
columns: number; // 그리드 컬럼 수
|
|
}
|
|
|
|
/**
|
|
* 기본 브레이크포인트 설정
|
|
*/
|
|
export const BREAKPOINTS: Record<Breakpoint, BreakpointConfig> = {
|
|
desktop: {
|
|
minWidth: 1200,
|
|
columns: 12,
|
|
},
|
|
tablet: {
|
|
minWidth: 768,
|
|
maxWidth: 1199,
|
|
columns: 8,
|
|
},
|
|
mobile: {
|
|
minWidth: 0,
|
|
maxWidth: 767,
|
|
columns: 4,
|
|
},
|
|
};
|
|
|
|
/**
|
|
* 브레이크포인트별 반응형 설정
|
|
*/
|
|
export interface ResponsiveBreakpointConfig {
|
|
gridColumns?: number; // 차지할 컬럼 수 (1-12)
|
|
order?: number; // 정렬 순서
|
|
hide?: boolean; // 숨김 여부
|
|
}
|
|
|
|
/**
|
|
* 컴포넌트별 반응형 설정
|
|
*/
|
|
export interface ResponsiveComponentConfig {
|
|
// 기본값 (디자이너에서 설정한 절대 위치)
|
|
designerPosition: {
|
|
x: number;
|
|
y: number;
|
|
width: number;
|
|
height: number;
|
|
};
|
|
|
|
// 반응형 설정 (선택적)
|
|
responsive?: {
|
|
desktop?: ResponsiveBreakpointConfig;
|
|
tablet?: ResponsiveBreakpointConfig;
|
|
mobile?: ResponsiveBreakpointConfig;
|
|
};
|
|
|
|
// 스마트 기본값 사용 여부
|
|
useSmartDefaults?: boolean;
|
|
}
|