detail update
This commit is contained in:
@@ -183,13 +183,23 @@ Read files from `docs/`:
|
||||
|
||||
**출력 디렉토리**: `docs/ui/`
|
||||
|
||||
#### 4-1. router.md (라우터 & UI 목록)
|
||||
**파일 구조**:
|
||||
```
|
||||
docs/ui/
|
||||
├── router.md # 라우터 구조 정의
|
||||
├── main.md # 메인 구조 개요
|
||||
├── [screen1].md # 화면1 상세 문서
|
||||
├── [screen2].md # 화면2 상세 문서
|
||||
└── ... # 각 화면별 상세 문서
|
||||
```
|
||||
|
||||
#### 4-1. router.md (라우터 구조)
|
||||
|
||||
**File**: `docs/ui/router.md`
|
||||
|
||||
**템플릿**: `.specify/templates/ui-router.md` 참조
|
||||
|
||||
플랫폼에 따라 다른 섹션 포함:
|
||||
라우터 구조와 화면 목록만 간결하게 정의:
|
||||
- **웹**: 헤더 네비게이션, 사이드바, 반응형 레이아웃
|
||||
- **모바일**: 탭바, 스택 네비게이션, 모달
|
||||
|
||||
@@ -265,43 +275,19 @@ Read files from `docs/`:
|
||||
|
||||
## 화면 목록
|
||||
|
||||
### 1. [탭명] 탭
|
||||
### 탭/메인 화면
|
||||
|
||||
| 항목 | 내용 |
|
||||
|-----|------|
|
||||
| 경로 | `/[경로]` |
|
||||
| 탭바 | [탭] (활성) |
|
||||
| 역할 | [역할 설명] |
|
||||
| # | 화면명 | 경로 | 파일 | 설명 |
|
||||
|---|-------|-----|------|------|
|
||||
| 1 | [화면1] | `/[경로]` | `[screen1].md` | [설명] |
|
||||
| 2 | [화면2] | `/[경로]` | `[screen2].md` | [설명] |
|
||||
|
||||
#### 컴포넌트
|
||||
### 상세 화면
|
||||
|
||||
| ID | 유형 | 이름 | 설명 |
|
||||
|----|-----|-----|------|
|
||||
| `[id]-header` | Header | 상단 헤더 | [설명] |
|
||||
| `[id]-list` | List | 목록 | [설명] |
|
||||
| `[id]-item` | Card | 아이템 | [설명] |
|
||||
|
||||
#### 팝업/모달
|
||||
|
||||
| ID | 유형 | 트리거 | 설명 |
|
||||
|----|-----|-------|------|
|
||||
| `popup-[name]` | Modal | [트리거] | [설명] |
|
||||
|
||||
---
|
||||
|
||||
### 2. [화면명] 상세
|
||||
|
||||
| 항목 | 내용 |
|
||||
|-----|------|
|
||||
| 경로 | `/[경로]/:id` |
|
||||
| 진입 | [어디서] (Push) |
|
||||
|
||||
#### 컴포넌트
|
||||
|
||||
| ID | 유형 | 이름 | 설명 |
|
||||
|----|-----|-----|------|
|
||||
| `detail-header` | Header | 헤더 | [설명] |
|
||||
| `detail-content` | Display | 컨텐츠 | [설명] |
|
||||
| # | 화면명 | 경로 | 파일 | 진입점 |
|
||||
|---|-------|-----|------|-------|
|
||||
| 1 | [화면1 상세] | `/[경로]/:id` | `[screen1-detail].md` | [진입점] |
|
||||
| 2 | [화면2 상세] | `/[경로]/:id` | `[screen2-detail].md` | [진입점] |
|
||||
|
||||
---
|
||||
|
||||
@@ -533,30 +519,183 @@ interface [Response] {
|
||||
- [ ] [항목 2]
|
||||
```
|
||||
|
||||
#### 4-3. [화면별 상세 문서] (예: friends.md, chat.md 등)
|
||||
|
||||
**File**: `docs/ui/[screen].md`
|
||||
|
||||
각 화면별로 독립적인 상세 문서를 생성합니다.
|
||||
|
||||
**템플릿**:
|
||||
|
||||
```markdown
|
||||
# [서비스명] - [화면명]
|
||||
|
||||
## 화면 개요
|
||||
|
||||
| 항목 | 내용 |
|
||||
|-----|------|
|
||||
| 경로 | `/[경로]` |
|
||||
| 탭/섹션 | [탭/섹션명] |
|
||||
| 목적 | [화면의 목적] |
|
||||
| 핵심 액션 | [주요 사용자 액션] |
|
||||
| UI 컨셉 | [UI 스타일 및 레퍼런스] |
|
||||
|
||||
---
|
||||
|
||||
### 5. 완료 리포트
|
||||
## 레이아웃 구조
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ [상단 영역] │
|
||||
├─────────────────────────────────────┤
|
||||
│ │
|
||||
│ [메인 컨텐츠 영역] │
|
||||
│ │
|
||||
├─────────────────────────────────────┤
|
||||
│ [하단 영역] │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 컴포넌트 구성
|
||||
|
||||
### 헤더 영역
|
||||
|
||||
| ID | 유형 | 이름 | 설명 | 액션 |
|
||||
|----|-----|-----|------|-----|
|
||||
| `[screen]-header` | Header | 헤더 | [설명] | [액션] |
|
||||
|
||||
### 메인 컨텐츠
|
||||
|
||||
| ID | 유형 | 이름 | 설명 | 상태 |
|
||||
|----|-----|-----|------|------|
|
||||
| `[screen]-list` | List | 목록 | [설명] | Empty/Loading/Error |
|
||||
| `[screen]-item` | Card | 아이템 | [설명] | - |
|
||||
|
||||
### 인터랙션 요소
|
||||
|
||||
| ID | 유형 | 트리거 | 액션 | 결과 |
|
||||
|----|-----|-------|-----|------|
|
||||
| `btn-[action]` | Button | 클릭 | [액션] | [결과] |
|
||||
|
||||
### 팝업/모달
|
||||
|
||||
| ID | 유형 | 트리거 | 설명 |
|
||||
|----|-----|-------|------|
|
||||
| `popup-[name]` | Modal | [트리거] | [설명] |
|
||||
|
||||
---
|
||||
|
||||
## 상태별 UI
|
||||
|
||||
### Empty State
|
||||
[아이템이 없을 때]
|
||||
|
||||
### Loading State
|
||||
[로딩 중일 때]
|
||||
|
||||
### Error State
|
||||
[에러 발생 시]
|
||||
|
||||
---
|
||||
|
||||
## 데이터 요구사항
|
||||
|
||||
### API 엔드포인트
|
||||
|
||||
```
|
||||
GET /api/[endpoint]
|
||||
POST /api/[endpoint]
|
||||
```
|
||||
|
||||
### 데이터 모델
|
||||
|
||||
```typescript
|
||||
interface [Model] {
|
||||
[field]: [type];
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 네비게이션
|
||||
|
||||
### 진입 경로
|
||||
- [어디서] → [이 화면]
|
||||
|
||||
### 이동 경로
|
||||
- [액션] → [다른 화면]
|
||||
|
||||
---
|
||||
|
||||
## 정책 연결
|
||||
|
||||
| 정책 ID | 정책명 | 적용 위치 |
|
||||
|--------|-------|---------|
|
||||
| [POL-001] | [정책명] | [컴포넌트 ID] |
|
||||
|
||||
---
|
||||
|
||||
## 구현 노트
|
||||
|
||||
### Phase 1 (필수)
|
||||
- [ ] [기본 기능]
|
||||
|
||||
### Phase 2 (선택)
|
||||
- [ ] [추가 기능]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 5. 화면별 상세 문서 생성 프로세스
|
||||
|
||||
**사용자 입력에 따라**:
|
||||
|
||||
1. **입력 없음 또는 "all"**:
|
||||
- `router.md` 생성
|
||||
- `main.md` 생성
|
||||
- 모든 주요 화면별 상세 문서 생성 (예: `friends.md`, `chat.md`, `progress.md` 등)
|
||||
|
||||
2. **특정 화면명 입력 (예: "친구", "채팅")**:
|
||||
- 해당 화면의 상세 문서만 생성/업데이트
|
||||
- 기존 `router.md`의 해당 화면 정보와 일관성 유지
|
||||
|
||||
**생성할 화면 문서 예시**:
|
||||
- `friends.md` - 친구 탭
|
||||
- `chat-list.md` - 채팅 목록
|
||||
- `chat.md` - 채팅방 상세
|
||||
- `progress.md` - 진행 탭
|
||||
- `shop.md` - 쇼핑 탭
|
||||
- `more.md` - 더보기 탭
|
||||
- `settings.md` - 설정 화면
|
||||
|
||||
---
|
||||
|
||||
### 6. 완료 리포트
|
||||
|
||||
```
|
||||
✅ 화면설계서 작성 완료!
|
||||
|
||||
📁 생성된 파일:
|
||||
- docs/ui/router.md
|
||||
- docs/ui/main.md
|
||||
- docs/ui/router.md (라우터 구조)
|
||||
- docs/ui/main.md (메인 구조)
|
||||
- docs/ui/[screen1].md (화면1 상세)
|
||||
- docs/ui/[screen2].md (화면2 상세)
|
||||
- ... (총 N개 화면 문서)
|
||||
|
||||
📊 요약:
|
||||
- 플랫폼: [Web / Mobile App]
|
||||
- 화면/섹션: N개
|
||||
- 컴포넌트: N개
|
||||
- 화면 문서: N개
|
||||
- 전체 컴포넌트: N개
|
||||
|
||||
📝 다음 단계:
|
||||
|
||||
**Step 4 - 정책설계서 (/appkit.policy)**
|
||||
/appkit.policy
|
||||
|
||||
**Step 5 - HTML 목업 (/appkit.visualize)**
|
||||
/appkit.visualize home
|
||||
/appkit.visualize all
|
||||
**Step 5 - HTML 목업 + 통합 뷰어 (/appkit.visualize)**
|
||||
/appkit.visualize # 통합 뷰어(index.html) + 모든 화면 목업 자동 생성
|
||||
|
||||
📍 현재 위치: Step 3/5 완료
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user