rupy1014
e9b0c00be7
- Remove old commands: spec, customer, sales, merge, design - Add new commands: ui, policy, visualize - Update mvp to include landing page generation - Add templates for mockup, policy, and UI documents - Simplify output path (remove [project] subfolder) - Rewrite README focused on usage 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
6.8 KiB
6.8 KiB
[서비스명] - Router & UI 목록
라우터 구조
/ # 기본 = [메인탭]
├── /[tab1] # 탭1 (목록)
│ └── /:id # 상세
├── /[tab2] # 탭2 (목록)
│ └── /:id # 상세
├── /[tab3] # 탭3 (메인 액션)
├── /[tab4] # 탭4
├── /[tab5] # 탭5
└── /settings # 설정
탭 구조
하단 탭바 (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 | 메인 구조 |
| concept.md | 서비스 컨셉 |
| policies/ | 정책 문서 |