310 lines
6.2 KiB
TypeScript
310 lines
6.2 KiB
TypeScript
/**
|
|
* 🎨 그리드 시스템 - 컬럼 스팬 상수 정의
|
|
*
|
|
* Tailwind CSS 12컬럼 그리드 시스템을 위한 프리셋 정의
|
|
*/
|
|
|
|
/**
|
|
* 컬럼 스팬 프리셋 타입
|
|
*/
|
|
export type ColumnSpanPreset =
|
|
| "full" // 12 컬럼 (100%)
|
|
| "eleven-twelfths" // 11 컬럼 (92%)
|
|
| "five-sixths" // 10 컬럼 (83%)
|
|
| "threeQuarters" // 9 컬럼 (75%)
|
|
| "twoThirds" // 8 컬럼 (67%)
|
|
| "seven-twelfths" // 7 컬럼 (58%)
|
|
| "half" // 6 컬럼 (50%)
|
|
| "five-twelfths" // 5 컬럼 (42%)
|
|
| "third" // 4 컬럼 (33%)
|
|
| "quarter" // 3 컬럼 (25%)
|
|
| "small" // 2 컬럼 (17%)
|
|
| "twelfth" // 1 컬럼 (8%)
|
|
| "label" // 3 컬럼 (25%) - 폼 라벨 전용
|
|
| "input" // 9 컬럼 (75%) - 폼 입력 전용
|
|
| "medium" // 4 컬럼 (33%)
|
|
| "large" // 8 컬럼 (67%)
|
|
| "auto"; // 자동 계산
|
|
|
|
/**
|
|
* 컬럼 스팬 값 매핑
|
|
*/
|
|
export const COLUMN_SPAN_VALUES: Record<ColumnSpanPreset, number> = {
|
|
full: 12,
|
|
"eleven-twelfths": 11,
|
|
"five-sixths": 10,
|
|
threeQuarters: 9,
|
|
twoThirds: 8,
|
|
"seven-twelfths": 7,
|
|
half: 6,
|
|
"five-twelfths": 5,
|
|
third: 4,
|
|
quarter: 3,
|
|
small: 2,
|
|
twelfth: 1,
|
|
label: 3,
|
|
input: 9,
|
|
medium: 4,
|
|
large: 8,
|
|
auto: 0, // 자동 계산 시 0
|
|
};
|
|
|
|
/**
|
|
* 컬럼 스팬 프리셋 정보
|
|
*/
|
|
export interface ColumnSpanPresetInfo {
|
|
value: number;
|
|
label: string;
|
|
percentage: string;
|
|
class: string;
|
|
description?: string;
|
|
}
|
|
|
|
/**
|
|
* 컬럼 스팬 프리셋 상세 정보
|
|
*/
|
|
export const COLUMN_SPAN_PRESETS: Record<ColumnSpanPreset, ColumnSpanPresetInfo> = {
|
|
twelfth: {
|
|
value: 1,
|
|
label: "1/12",
|
|
percentage: "8.33%",
|
|
class: "col-span-1",
|
|
description: "최소 너비",
|
|
},
|
|
small: {
|
|
value: 2,
|
|
label: "1/6",
|
|
percentage: "16.67%",
|
|
class: "col-span-2",
|
|
description: "아이콘, 체크박스",
|
|
},
|
|
quarter: {
|
|
value: 3,
|
|
label: "1/4",
|
|
percentage: "25%",
|
|
class: "col-span-3",
|
|
description: "4분할 레이아웃",
|
|
},
|
|
third: {
|
|
value: 4,
|
|
label: "1/3",
|
|
percentage: "33.33%",
|
|
class: "col-span-4",
|
|
description: "3분할 레이아웃",
|
|
},
|
|
"five-twelfths": {
|
|
value: 5,
|
|
label: "5/12",
|
|
percentage: "41.67%",
|
|
class: "col-span-5",
|
|
description: "중간 크기",
|
|
},
|
|
half: {
|
|
value: 6,
|
|
label: "절반",
|
|
percentage: "50%",
|
|
class: "col-span-6",
|
|
description: "2분할 레이아웃",
|
|
},
|
|
"seven-twelfths": {
|
|
value: 7,
|
|
label: "7/12",
|
|
percentage: "58.33%",
|
|
class: "col-span-7",
|
|
description: "큰 크기",
|
|
},
|
|
twoThirds: {
|
|
value: 8,
|
|
label: "2/3",
|
|
percentage: "66.67%",
|
|
class: "col-span-8",
|
|
description: "큰 컴포넌트",
|
|
},
|
|
threeQuarters: {
|
|
value: 9,
|
|
label: "3/4",
|
|
percentage: "75%",
|
|
class: "col-span-9",
|
|
description: "입력 필드",
|
|
},
|
|
"five-sixths": {
|
|
value: 10,
|
|
label: "5/6",
|
|
percentage: "83.33%",
|
|
class: "col-span-10",
|
|
description: "매우 큰 컴포넌트",
|
|
},
|
|
"eleven-twelfths": {
|
|
value: 11,
|
|
label: "11/12",
|
|
percentage: "91.67%",
|
|
class: "col-span-11",
|
|
description: "거의 전체",
|
|
},
|
|
full: {
|
|
value: 12,
|
|
label: "전체",
|
|
percentage: "100%",
|
|
class: "col-span-12",
|
|
description: "전체 너비 (테이블, 제목 등)",
|
|
},
|
|
label: {
|
|
value: 3,
|
|
label: "라벨용",
|
|
percentage: "25%",
|
|
class: "col-span-3",
|
|
description: "폼 라벨 전용",
|
|
},
|
|
input: {
|
|
value: 9,
|
|
label: "입력용",
|
|
percentage: "75%",
|
|
class: "col-span-9",
|
|
description: "폼 입력 전용",
|
|
},
|
|
medium: {
|
|
value: 4,
|
|
label: "보통",
|
|
percentage: "33.33%",
|
|
class: "col-span-4",
|
|
description: "보통 크기 컴포넌트",
|
|
},
|
|
large: {
|
|
value: 8,
|
|
label: "크게",
|
|
percentage: "66.67%",
|
|
class: "col-span-8",
|
|
description: "큰 컴포넌트",
|
|
},
|
|
auto: {
|
|
value: 0,
|
|
label: "자동",
|
|
percentage: "auto",
|
|
class: "",
|
|
description: "자동 계산",
|
|
},
|
|
};
|
|
|
|
/**
|
|
* Gap/Spacing 프리셋 타입
|
|
*/
|
|
export type GapPreset = "none" | "xs" | "sm" | "md" | "lg" | "xl";
|
|
|
|
/**
|
|
* Gap 프리셋 정보
|
|
*/
|
|
export interface GapPresetInfo {
|
|
value: number;
|
|
label: string;
|
|
pixels: string;
|
|
class: string;
|
|
}
|
|
|
|
/**
|
|
* Gap 프리셋 상세 정보
|
|
*/
|
|
export const GAP_PRESETS: Record<GapPreset, GapPresetInfo> = {
|
|
none: {
|
|
value: 0,
|
|
label: "없음",
|
|
pixels: "0px",
|
|
class: "gap-0",
|
|
},
|
|
xs: {
|
|
value: 2,
|
|
label: "매우 작게",
|
|
pixels: "8px",
|
|
class: "gap-2",
|
|
},
|
|
sm: {
|
|
value: 4,
|
|
label: "작게",
|
|
pixels: "16px",
|
|
class: "gap-4",
|
|
},
|
|
md: {
|
|
value: 6,
|
|
label: "보통",
|
|
pixels: "24px",
|
|
class: "gap-6",
|
|
},
|
|
lg: {
|
|
value: 8,
|
|
label: "크게",
|
|
pixels: "32px",
|
|
class: "gap-8",
|
|
},
|
|
xl: {
|
|
value: 12,
|
|
label: "매우 크게",
|
|
pixels: "48px",
|
|
class: "gap-12",
|
|
},
|
|
};
|
|
|
|
/**
|
|
* 컬럼 스팬 유효성 검사
|
|
*/
|
|
export function isValidColumnSpan(value: string): value is ColumnSpanPreset {
|
|
return value in COLUMN_SPAN_VALUES;
|
|
}
|
|
|
|
/**
|
|
* 컬럼 스팬 값 가져오기
|
|
*/
|
|
export function getColumnSpanValue(preset: ColumnSpanPreset): number {
|
|
return COLUMN_SPAN_VALUES[preset];
|
|
}
|
|
|
|
/**
|
|
* Tailwind 그리드 클래스 생성
|
|
*/
|
|
export function getColumnSpanClass(preset: ColumnSpanPreset): string {
|
|
return COLUMN_SPAN_PRESETS[preset].class;
|
|
}
|
|
|
|
/**
|
|
* 컬럼 시작 위치 클래스 생성
|
|
*/
|
|
export function getColumnStartClass(start: number): string {
|
|
if (start < 1 || start > 12) {
|
|
console.warn(`Invalid column start: ${start}. Must be between 1 and 12.`);
|
|
return "";
|
|
}
|
|
return `col-start-${start}`;
|
|
}
|
|
|
|
/**
|
|
* 전체 그리드 클래스 조합
|
|
*/
|
|
export function buildGridClasses(columnSpan: ColumnSpanPreset, columnStart?: number): string {
|
|
const classes: string[] = [];
|
|
|
|
// 컬럼 스팬
|
|
const spanClass = getColumnSpanClass(columnSpan);
|
|
if (spanClass) {
|
|
classes.push(spanClass);
|
|
}
|
|
|
|
// 시작 위치
|
|
if (columnStart !== undefined && columnStart > 0) {
|
|
classes.push(getColumnStartClass(columnStart));
|
|
}
|
|
|
|
return classes.join(" ");
|
|
}
|
|
|
|
/**
|
|
* Gap 클래스 생성
|
|
*/
|
|
export function getGapClass(preset: GapPreset): string {
|
|
return GAP_PRESETS[preset].class;
|
|
}
|
|
|
|
/**
|
|
* Padding 클래스 생성 (gap 클래스를 padding으로 변환)
|
|
*/
|
|
export function getPaddingClass(preset: GapPreset): string {
|
|
return GAP_PRESETS[preset].class.replace("gap-", "p-");
|
|
}
|