271 lines
8.8 KiB
Markdown
271 lines
8.8 KiB
Markdown
# [서비스명] - 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/) | 정책 문서 |
|