# [서비스명] - Router & UI 목록

## 플랫폼 정보

| 항목 | 내용 |
|-----|------|
| 플랫폼 타입 | [Web / Mobile App / PWA / Cross-platform] |
| 네비게이션 패턴 | [Header+Sidebar / Bottom Tab / Top Tab] |
| 반응형 지원 | [Yes / No] |
| 반응형 브레이크포인트 | Desktop: 1024px+, Tablet: 768px~1023px, Mobile: <768px |

---

## 라우터 구조

```
/                           # 기본 경로
├── /[section1]             # 섹션1
│   └── /:id                # 상세
├── /[section2]             # 섹션2
│   └── /:id                # 상세
└── /settings               # 설정
```

---

## 네비게이션 구조

### 웹 (Header + Sidebar) - 해당 시

**데스크톱 레이아웃 (1024px+)**
```
┌─────────────────────────────────────────────────┐
│  Logo    [메뉴1] [메뉴2] [메뉴3]    👤 Profile  │
├──────┬──────────────────────────────────────────┤
│      │                                          │
│ 사이드│  메인 컨텐츠 영역                          │
│ 메뉴  │                                          │
│      │                                          │
└──────┴──────────────────────────────────────────┘
```

**헤더 네비게이션**

| # | 메뉴 | 아이콘 | 경로 | 설명 |
|---|-----|------|-----|------|
| 1 | [메뉴1] | [아이콘] | `/[경로]` | [설명] |
| 2 | [메뉴2] | [아이콘] | `/[경로]` | [설명] |

**사이드바 메뉴**

| # | 메뉴 | 아이콘 | 경로 | 뱃지 |
|---|-----|------|-----|------|
| 1 | [메뉴1] | [아이콘] | `/[경로]` | [조건] |
| 2 | [메뉴2] | [아이콘] | `/[경로]` | [조건] |

### 모바일 앱 (Bottom Tab) - 해당 시

**모바일 레이아웃**
```
┌─────────────────────────────────────────────────┐
│  [상단 헤더]                                     │
├─────────────────────────────────────────────────┤
│                                                 │
│  메인 컨텐츠 영역                                 │
│                                                 │
├─────────────────────────────────────────────────┤
│   [아이콘]  [아이콘]  [센터]  [아이콘]  [아이콘]  │
│   탭1      탭2      탭3     탭4      탭5        │
│                     ^^^^                        │
│              (크게, 강조 배경)                   │
└─────────────────────────────────────────────────┘
```

**하단 탭바**

| # | 탭 | 아이콘 | 경로 | 뱃지 |
|---|-----|------|-----|------|
| 1 | [탭명] | [아이콘] | `/[경로]` | [뱃지 조건] |
| 2 | [탭명] | [아이콘] | `/[경로]` | [뱃지 조건] |
| 3 | **[센터탭]** | [아이콘] | `/` | - |
| 4 | [탭명] | [아이콘] | `/[경로]` | [뱃지 조건] |
| 5 | [탭명] | [아이콘] | `/[경로]` | [뱃지 조건] |

---

## 화면 목록

### 1. [탭명] 탭 ([아이콘] [TabName])

| 항목 | 내용 |
|-----|------|
| 경로 | `/[경로]` |
| 문서 | `[문서명].md` |
| 탭바 | [아이콘] [탭명] (활성) |
| 역할 | [역할 설명] |

#### 컴포넌트

| ID | 유형 | 이름 | 설명 |
|----|-----|-----|------|
| `[screen]-header` | Header | 상단 헤더 | [헤더 요소 설명] |
| `[screen]-list` | List | 목록 | [목록 설명] |
| `[screen]-item` | Card | 아이템 카드 | [카드 설명] |
| `[screen]-empty` | Empty | 빈 상태 | [빈 상태 메시지] |

#### 바텀시트

| ID | 유형 | 트리거 | 내용 |
|----|-----|-------|------|
| `bs-[name]` | BottomSheet | [트리거 설명] | [내용 설명] |

#### 팝업/모달

| ID | 유형 | 트리거 | 설명 |
|----|-----|-------|------|
| `popup-[name]` | Modal | [트리거 설명] | [설명] |

---

### 2. [화면명] 상세 화면 ([Screen] Detail)

| 항목 | 내용 |
|-----|------|
| 경로 | `/[경로]/:id` |
| 문서 | `[문서명].md` |
| 진입 | [어디서] (Push) |

#### 컴포넌트

| ID | 유형 | 이름 | 설명 |
|----|-----|-----|------|
| `detail-header` | Header | 헤더 | 뒤로, 이름, [추가 요소] |
| `detail-content` | Display | 컨텐츠 | [컨텐츠 설명] |
| `detail-tabs` | TabGroup | 탭 | [탭 목록] |
| `detail-actions` | ActionBar | 액션 버튼 | [버튼 목록] |

#### 바텀시트

| ID | 유형 | 트리거 | 내용 |
|----|-----|-------|------|
| `bs-[name]` | BottomSheet | [트리거] | [내용] |

---

## 전역 컴포넌트

### 상단 헤더 (Global Header)

```
┌─────────────────────────────────────────────────┐
│  [로고]       [상태 표시]                   ⚙️   │
│  ^^^^^^^^     ^^^^^^^^^^^^^                 ^^   │
│  로고         상태 정보                    설정   │
└─────────────────────────────────────────────────┘
```

| 요소 | 위치 | 설명 | 액션 |
|-----|-----|------|-----|
| 로고 | 좌측 | 서비스 로고 | 홈 이동 |
| [상태] | 우측 | [상태 설명] | [액션] |
| 설정 | 우측 끝 | ⚙️ 아이콘 | 설정 화면 |

### 전역 팝업

| ID | 유형 | 트리거 | 설명 |
|----|-----|-------|------|
| `global-network-error` | Modal | 네트워크 오류 | 재시도/취소 |
| `global-session-expired` | Modal | 세션 만료 | 재로그인 |
| `global-update-required` | Modal | 업데이트 필요 | 스토어 이동 |
| `global-maintenance` | Modal | 점검 중 | 점검 안내 |

### 전역 토스트

| ID | 유형 | 트리거 | 설명 |
|----|-----|-------|------|
| `toast-success` | Toast | 성공 액션 | 성공 메시지 |
| `toast-error` | Toast | 오류 발생 | 오류 메시지 |
| `toast-info` | Toast | 정보 알림 | 정보 메시지 |

---

## 네비게이션 플로우

### 기본 플로우

```
[앱 실행]
    │
    └─→ [메인 탭] (기본)
            │
            ├─→ [액션 버튼] → [액션 결과 화면]
            │
            ├─→ [아이템 탭] → [상세 화면]
            │
            └─→ [알림] → [관련 화면]
```

### 메인 액션 플로우

```
[메인 탭]
    │
    └─→ [메인 버튼] (Push)
            │
            └─→ [전체화면 모드 - 탭바 숨김]
                    │
                    ├─→ Phase 1: [단계1 설명]
                    │
                    ├─→ Phase 2: [단계2 설명]
                    │
                    └─→ 완료 → [확인] → Pop back
```

### 탭 간 이동

```
┌─────────────────────────────────────────────────────────────┐
│                                                             │
│   탭1 ←─────→ 탭2 ←─────→ 탭3 ←─────→ 탭4 ←─────→ 탭5     │
│    │           │           │           │           │       │
│    └─ 상세     └─ 상세     └─ 액션     └─ 결제     └─ 설정 │
│                                                             │
└─────────────────────────────────────────────────────────────┘
```

---

## 요약 통계

| 카테고리 | 개수 |
|---------|-----|
| 탭 화면 | N개 |
| 상세 화면 | N개 |
| 전체화면 모드 | N개 |
| 바텀시트 | N개 |
| 팝업/모달 | N개 |
| 토스트 | N개 |
| **총 UI 요소** | **N개** |

---

## URL 스킴

### 딥링크

| 경로 | 설명 |
|-----|------|
| `[scheme]://` | 앱 실행 (메인 탭) |
| `[scheme]://[tab1]` | 탭1 |
| `[scheme]://[tab1]/:id` | 탭1 상세 |
| `[scheme]://[tab2]` | 탭2 |
| `[scheme]://[tab2]/:id` | 탭2 상세 |

### 푸시 알림 딥링크

| 알림 유형 | 딥링크 |
|---------|-------|
| [알림 유형1] | `[scheme]://[경로]` |
| [알림 유형2] | `[scheme]://[경로]` |

---

## 관련 문서

| 문서 | 설명 |
|-----|------|
| [main.md](main.md) | 메인 구조 |
| [concept.md](concept.md) | 서비스 컨셉 |
| [policies/](policies/) | 정책 문서 |