generated from gc/template-java-maven
HYOJIN
c2a71c1b77
- 디자인 시스템 가이드 문서 11개 생성 (docs/design/) - CSS 변수 토큰 시스템 (@theme + :root/.dark 전환) - cn() 유틸리티 (clsx + tailwind-merge) - Button/Badge 공통 컴포넌트 (variant/size, 다크모드 대응) - 하드코딩 Tailwind 색상 → CSS 변수 토큰 리팩토링 (30개 파일) - 차트 팔레트 다크모드 색상 업데이트 (CHART_COLORS_HEX) - 버튼 다크모드 채도/대비 강화 (primary-600 기반) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
138 lines
3.5 KiB
Markdown
138 lines
3.5 KiB
Markdown
# 스페이싱 & 레이아웃
|
|
|
|
---
|
|
|
|
## 기본 스케일 (4px 기반)
|
|
|
|
모든 여백과 크기는 4px 단위를 기준으로 한다.
|
|
|
|
| Token | px | rem | Tailwind | 용도 |
|
|
|-------|----|-----|----------|------|
|
|
| space-0 | 0 | 0 | `p-0`, `m-0` | 초기화 |
|
|
| space-1 | 4px | 0.25rem | `p-1`, `m-1` | 아이콘 내부 간격 |
|
|
| space-2 | 8px | 0.5rem | `p-2`, `m-2` | 배지 내부 패딩 |
|
|
| space-3 | 12px | 0.75rem | `p-3`, `m-3` | 버튼 수직 패딩 |
|
|
| space-4 | 16px | 1rem | `p-4`, `m-4` | 카드 내부 패딩 (sm) |
|
|
| space-5 | 20px | 1.25rem | `p-5`, `m-5` | 인풋 내부 패딩 |
|
|
| space-6 | 24px | 1.5rem | `p-6`, `m-6` | 카드 내부 패딩 (md) |
|
|
| space-8 | 32px | 2rem | `p-8`, `m-8` | 섹션 내부 패딩 |
|
|
| space-10 | 40px | 2.5rem | `p-10`, `m-10` | 섹션 상하 여백 |
|
|
| space-12 | 48px | 3rem | `p-12`, `m-12` | 페이지 상하 패딩 |
|
|
| space-16 | 64px | 4rem | `p-16`, `m-16` | 섹션 간 여백 |
|
|
| space-20 | 80px | 5rem | `p-20`, `m-20` | 페이지 섹션 간격 |
|
|
| space-24 | 96px | 6rem | `p-24`, `m-24` | 히어로 여백 |
|
|
|
|
---
|
|
|
|
## 컴포넌트별 내부 여백
|
|
|
|
### Button
|
|
|
|
| 사이즈 | padding | font-size | height |
|
|
|--------|---------|-----------|--------|
|
|
| sm | `px-3 py-1.5` | `text-sm` | 32px |
|
|
| md | `px-4 py-2` | `text-base` | 40px |
|
|
| lg | `px-6 py-3` | `text-lg` | 48px |
|
|
|
|
### Input
|
|
|
|
| 사이즈 | padding | font-size | height |
|
|
|--------|---------|-----------|--------|
|
|
| sm | `px-3 py-1.5` | `text-sm` | 32px |
|
|
| md | `px-3 py-2` | `text-base` | 40px |
|
|
| lg | `px-4 py-3` | `text-lg` | 48px |
|
|
|
|
### Card
|
|
|
|
| 패딩 | 클래스 | 용도 |
|
|
|------|--------|------|
|
|
| compact | `p-4` | 데이터 테이블 행 |
|
|
| default | `p-6` | 일반 카드 |
|
|
| spacious | `p-8` | 주요 콘텐츠 카드 |
|
|
|
|
### Badge
|
|
|
|
패딩: `px-2 py-0.5` / 폰트: `text-xs font-medium`
|
|
|
|
### Modal
|
|
|
|
| 사이즈 | width | padding |
|
|
|--------|-------|---------|
|
|
| sm | `max-w-sm` | `p-6` |
|
|
| md | `max-w-md` | `p-6` |
|
|
| lg | `max-w-lg` | `p-8` |
|
|
| xl | `max-w-xl` | `p-8` |
|
|
|
|
---
|
|
|
|
## 반응형 브레이크포인트
|
|
|
|
Tailwind CSS 4 기본 브레이크포인트 사용.
|
|
|
|
| 이름 | 최소 너비 | 용도 |
|
|
|------|-----------|------|
|
|
| xs | — | 기본 (모바일 우선) |
|
|
| sm | 640px | 큰 모바일, 세로 태블릿 |
|
|
| md | 768px | 태블릿 |
|
|
| lg | 1024px | 데스크톱 |
|
|
| xl | 1280px | 와이드 데스크톱 |
|
|
| 2xl | 1536px | 울트라 와이드 |
|
|
|
|
---
|
|
|
|
## 12컬럼 그리드
|
|
|
|
```html
|
|
<!-- 페이지 컨테이너 -->
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
|
<!-- 12컬럼 그리드 -->
|
|
<div class="grid grid-cols-12 gap-4 lg:gap-6">
|
|
|
|
<!-- 사이드바 (3컬럼) -->
|
|
<aside class="col-span-12 lg:col-span-3">...</aside>
|
|
|
|
<!-- 메인 콘텐츠 (9컬럼) -->
|
|
<main class="col-span-12 lg:col-span-9">...</main>
|
|
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### 자주 쓰는 레이아웃 패턴
|
|
|
|
| 패턴 | 클래스 |
|
|
|------|--------|
|
|
| 전체 너비 | `col-span-12` |
|
|
| 절반 | `col-span-12 md:col-span-6` |
|
|
| 1/3 | `col-span-12 md:col-span-4` |
|
|
| 2/3 | `col-span-12 md:col-span-8` |
|
|
| 사이드바 | `col-span-12 lg:col-span-3` |
|
|
| 콘텐츠 | `col-span-12 lg:col-span-9` |
|
|
|
|
---
|
|
|
|
## Gap (간격)
|
|
|
|
| 컨텍스트 | 클래스 |
|
|
|----------|--------|
|
|
| 인라인 아이템 (버튼 그룹) | `gap-2` |
|
|
| 폼 필드 | `gap-4` |
|
|
| 카드 그리드 | `gap-4 lg:gap-6` |
|
|
| 섹션 간 | `gap-8 lg:gap-12` |
|
|
|
|
---
|
|
|
|
## 스택 레이아웃
|
|
|
|
```html
|
|
<!-- 수직 스택 -->
|
|
<div class="flex flex-col gap-4">...</div>
|
|
|
|
<!-- 수평 스택 -->
|
|
<div class="flex items-center gap-2">...</div>
|
|
|
|
<!-- 정렬 포함 -->
|
|
<div class="flex items-center justify-between gap-4">...</div>
|
|
```
|