디자인 리소스
Pattern
dhub에서 사용하는 4가지 페이지 레이아웃 패턴과 그리드 시스템을 정리합니다.
레이아웃 패턴
| 패턴 | 이름 | 설명 | 너비 | 레이아웃 |
|---|---|---|---|---|
| A | 리스트 | 목록형 데이터 표시. 검색/필터 + 카드 또는 테이블 리스트 | Standard (1280px) | 1-column 또는 2-column (1:1) |
| B | 대시보드 | 차트·위젯·KPI를 조합한 종합 뷰 | Full (100%) | 2-column (2:1) 또는 3-column |
| C | 상세 | 단일 엔티티의 상세 정보 + 탭 구조 | Standard (1280px) | 2-column (2:1) |
| D | 폼 | 입력/수정/설정 등 사용자 입력 중심 | Narrow (768px) | 1-column |
패턴 프리뷰
각 패턴의 와이어프레임 미니어처 — 테이블에서 행을 클릭하여 전환
패턴 A: 리스트 — 목록형 데이터 표시. 검색/필터 + 카드 또는 테이블 리스트
그리드 시스템
1~4 column 그리드를 사용. 5 column 이상은 Carousel Row 또는 스크롤 그리드 권장
1 Column
grid-cols-11
폼, 상세 등 단일 흐름
2 Column (1:1)
grid-cols-21
2
리스트, 비교형 레이아웃
2 Column (2:1)
grid-cols-[2fr_1fr]1
2
콘텐츠 + 사이드바
3 Column
grid-cols-31
2
3
대시보드 위젯 배치
4 Column
grid-cols-41
2
3
4
KPI 카드, 요약 지표 등 간결한 아이템
5 Column 이상 — 페이지 레이아웃 그리드로는 사용하지 않습니다. 다만 Carousel Row(수평 스크롤), 갤러리·썸네일 등 nxn 반복 그리드에서는 자유롭게 사용 가능합니다.
Carousel Row
수평 스크롤 카드 행 — 오른쪽 fade + 화살표 버튼으로 네비게이션
브레이크포인트
| Name | Value | 동작 |
|---|---|---|
| lg | 1024px | 2-column → 1-column 전환 |
| xl | 1280px | Standard 너비 max-width 적용 시작 |
lg:grid-cols-2 → 1024px 이상에서 2-column, 미만에서 1-column
max-w-[1280px] mx-auto → Standard 너비 제한 + 중앙 정렬