← 목록으로
컴포넌트 조합 예시
카드/폼/네비게이션/데이터 조합
카드 조합
기본 카드 - 헤더, 바디, 푸터
프로젝트의 기본 설정을 관리합니다.
프로젝트 이름:
디자인 시스템
생성일:
2024-01-15
상태:
활성
이미지 카드 - 제품/포트폴리오
제품명 2
제품 설명이 들어갑니다.
$149
네비게이션 조합
수평 탭 네비게이션
개요 탭 내용
선택된 탭의 내용이 여기에 표시됩니다.
데이터 표시 조합
데이터 테이블
| 주문 ID |
고객명 |
금액 |
상태 |
날짜 |
| #12345 |
홍길동 |
$120.00 |
완료 |
2024-01-15 |
| #12346 |
김철수 |
$85.50 |
처리중 |
2024-01-15 |
| #12347 |
이영희 |
$200.00 |
배송중 |
2024-01-14 |
## 94. 컴포넌트 조합 예시
```
Design component composition patterns:
**Card Compositions**:
**1. Profile Card**:
```
┌─────────────────────────────┐
│ ┌──────┐ │
│ │Avatar│ Name (16px bold) │
│ │ 64px │ Role (14px gray) │
│ └──────┘ │
│ │
│ Bio text (14px, 3-line max) │
│ │
│ ┌─┐ ┌─┐ ┌─┐ ┌─┐ │
│ │f│ │t│ │in│ │g│ (socials) │
│ └─┘ └─┘ └─┘ └─┘ │
│ │
│ [ Follow ] [ Message ] │
└─────────────────────────────┘
```
- Components: Avatar(lg) + Text + IconButtons + Button(primary) + Button(secondary)
**2. Product Card**:
```
┌─────────────────────────────┐
│ [Badge: SALE] [♡] │
│ ┌─────────────────────────┐ │
│ │ │ │
│ │ Product Image │ │
│ │ (1:1 ratio) │ │
│ │ │ │
│ └─────────────────────────┘ │
│ Brand Name (12px gray) │
│ Product Title (14px bold) │
│ ★★★★☆ (128) (rating) │
│ $99.00 $149.00 (price) │
│ ● ● ● ○ (color swatches) │
└─────────────────────────────┘
```
- Components: Badge + IconButton + Image + Text + Rating + Price + ColorSwatches
**3. Stat/KPI Card**:
```
┌─────────────────────────────┐
│ ┌────┐ [⋮] │
│ │ 📈 │ │
│ └────┘ │
│ Total Revenue (label) │
│ $84,254 (32px bold) │
│ ↑ 12.5% vs last month │
│ ▁▂▃▄▅▆▇ (sparkline) │
└─────────────────────────────┘
```
- Components: IconCircle + Text + TrendIndicator + Sparkline + DropdownMenu
**Form Compositions**:
**1. Login Form**:
```
┌─────────────────────────────┐
│ [Logo] │
│ Welcome back (h2) │
│ │
│ Email │
│ ┌─────────────────────────┐ │
│ │ ✉ email@example.com │ │
│ └─────────────────────────┘ │
│ │
│ Password │
│ ┌─────────────────────────┐ │
│ │ 🔒 •••••••••• 👁 │ │
│ └─────────────────────────┘ │
│ │
│ ☑ Remember me Forgot? │
│ │
│ [ Sign In ] │
│ │
│ ──────── or ──────── │
│ │
│ [G] Continue with Google │
│ [🍎] Continue with Apple │
│ │
│ Don't have account? Sign up │
└─────────────────────────────┘
```
- Components: Logo + Heading + Input(email) + Input(password) + Checkbox + Link + Button(primary) + Divider + Button(social) + TextLink
**2. Search + Filter Composition**:
```
┌─────────────────────────────────────────────────┐
│ ┌─────────────────────────────────┐ [🔍 Search] │
│ │ 🔍 Search products... │ │
│ └─────────────────────────────────┘ │
├─────────────────────────────────────────────────┤
│ [Category ▼] [Price ▼] [Rating ▼] [Sort ▼] │
├─────────────────────────────────────────────────┤
│ Active: [Electronics ✕] [Under $100 ✕] [Clear] │
└─────────────────────────────────────────────────┘
```
- Components: SearchInput + Button + Select/Dropdown × 4 + FilterChip × n + TextLink
**Navigation Compositions**:
**1. Header Navigation**:
```
┌──────────────────────────────────────────────────────────┐
│ [Logo] Products▼ Solutions▼ Pricing Blog [🔍][👤] │
└──────────────────────────────────────────────────────────┘
```
- Components: Logo + NavLink × n + DropdownMenu × n + IconButton × n
**
... (내용이 길어 일부만 표시됩니다)