detail update

This commit is contained in:
2025-12-15 08:53:23 +09:00
parent 3cee45b6c0
commit 5bafb0d567
5 changed files with 429 additions and 100 deletions

BIN
.DS_Store vendored

Binary file not shown.

View File

@@ -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 완료
```

View File

@@ -8,7 +8,13 @@ description: 목업 생성 - HTML 기반 라이브 프로토타입 UI 생성
$ARGUMENTS
```
User input should be a screen name (e.g., "home", "chat", "booking") or "all" for all screens.
**이 명령어는 인자를 받지 않습니다.**
사용자가 `/appkit.visualize`를 실행하면 자동으로:
- `index.html` (통합 뷰어)
- 모든 화면 목업 (`.html` 파일들)
- 공통 스타일/스크립트 파일
모두 생성합니다.
## Overview
@@ -26,7 +32,10 @@ User input should be a screen name (e.g., "home", "chat", "booking") or "all" fo
## Purpose
router.md와 policy 문서를 기반으로 실제 동작하는 HTML 목업을 생성합니다.
UI 설계서(`docs/ui/*.md`)와 정책 설계서(`docs/policies/*.md`)를 기반으로:
1. 실제 동작하는 HTML 목업을 생성합니다
2. **통합 뷰어(index.html)**: UI 설계서, 정책 설계서, 목업을 한 곳에서 볼 수 있는 인터랙티브 문서 생성
브라우저에서 바로 확인할 수 있는 라이브 프로토타입입니다.
---
@@ -34,19 +43,24 @@ router.md와 policy 문서를 기반으로 실제 동작하는 HTML 목업을
## Pre-requisite
- `/appkit.ui`로 화면설계가 되어 있어야 함
- `router.md` 파일이 존재해야 함
- `docs/ui/router.md` 파일이 존재해야 함
- `docs/ui/main.md` 파일이 존재해야 함
- `docs/ui/[screen].md` 화면별 상세 문서가 존재해야 함
---
## Usage
```bash
/appkit.visualize home # 화면 목업
/appkit.visualize chat # 채팅 화면 목업
/appkit.visualize all # 전체 화면 목업
/appkit.visualize "예약 상세" # 특정 화면 목업
/appkit.visualize # 통합 뷰어(index.html) + 모든 화면 목업 생성
```
**자동 생성 항목:**
1. `docs/mockup/index.html` - 통합 뷰어 (UI 설계서 + 정책 설계서 + 목업 링크)
2. `docs/mockup/[screen].html` - 모든 화면 목업
3. `docs/mockup/styles.css` - 공통 스타일
4. `docs/mockup/scripts.js` - 공통 스크립트
---
## Execution Flow
@@ -54,37 +68,99 @@ router.md와 policy 문서를 기반으로 실제 동작하는 HTML 목업을
### 1. 기존 기획 읽기
Read files from `docs/`:
- `router.md` - 라우터 및 UI 목록
- `main.md` - 메인 구조
- `ui/router.md` - 라우터 및 화면 목록
- `ui/main.md` - 메인 구조
- `ui/*.md` - 각 화면별 상세 문서
- `policies/*.md` - 정책 문서
### 2. 목업 생성 대화
### 2. 통합 뷰어 (index.html) 생성
**Step 1: 화면 확인**
**최우선 작업**: `docs/mockup/index.html` 생성/업데이트
```markdown
## 목업 생성
통합 뷰어는 다음을 포함:
1. **UI 설계서 뷰어**: `docs/ui/*.md` 파일들을 읽어서 화면별 탭으로 표시
2. **정책 설계서 뷰어**: `docs/policies/*.md` 파일들을 읽어서 정책별 탭으로 표시
3. **목업 링크**: 생성된 HTML 목업으로 바로 이동할 수 있는 네비게이션
router.md에서 확인된 화면 목록:
**index.html 구조**:
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>[서비스명] - 통합 문서 뷰어</title>
<!-- 스타일 -->
</head>
<body>
<!-- 상단 네비게이션 -->
<nav>
<button data-tab="ui">UI 설계서</button>
<button data-tab="policies">정책 설계서</button>
<button data-tab="mockups">목업</button>
</nav>
| 화면 | 경로 | 생성 여부 |
|-----|------|----------|
| home | `/` | ⬜ |
| chat-list | `/chat` | ⬜ |
| chat-room | `/chat/:id` | ⬜ |
| shop | `/shop` | ⬜ |
<!-- UI 설계서 탭 -->
<section id="ui-tab">
<aside>
<!-- docs/ui/*.md 파일 목록 -->
</aside>
<main>
<!-- 선택된 MD 파일 내용 (HTML 변환) -->
</main>
</section>
어떤 화면을 생성할까요?
<!-- 정책 설계서 탭 -->
<section id="policies-tab">
<aside>
<!-- docs/policies/*.md 파일 목록 -->
</aside>
<main>
<!-- 선택된 정책 MD 파일 내용 (HTML 변환) -->
</main>
</section>
<!-- 목업 탭 -->
<section id="mockups-tab">
<div class="mockup-grid">
<!-- 각 화면 목업으로 가는 카드 링크 -->
</div>
</section>
</body>
</html>
```
**Step 2: 사용자 선택**
**구현 방식**:
- Markdown 파일을 JavaScript로 읽어서 HTML로 변환
- 또는 빌드 시점에 모든 MD를 HTML로 변환하여 포함
- 특정 화면명 → 해당 화면만 생성
- "all", "전체" → 모든 화면 생성
---
### 3. HTML 목업 파일 생성
### 3. 자동 화면 목업 생성
#### 3-1. 기본 구조
**자동으로 수행:**
1. `docs/ui/` 디렉토리에서 모든 `.md` 파일 스캔
2. `router.md`, `main.md`를 제외한 모든 화면 문서 감지
3. 각 화면별 HTML 목업 자동 생성
```markdown
## 목업 생성 시작
docs/ui/에서 확인된 화면 문서:
| 화면 | 파일 | 목업 |
|-----|------|-----|
| 친구 | `friends.md` | `friends.html` |
| 채팅 목록 | `chat-list.md` | `chat-list.html` |
| 채팅방 | `chat.md` | `chat.html` |
| 진행 | `progress.md` | `progress.html` |
| 쇼핑 | `shop.md` | `shop.html` |
모든 화면 목업을 생성합니다...
```
### 4. 화면별 HTML 목업 파일 생성
#### 4-1. 기본 구조
**File**: `docs/mockup/[screen].html`
@@ -132,7 +208,7 @@ router.md에서 확인된 화면 목록:
</html>
```
#### 3-2. 공통 스타일시트 (styles.css)
#### 4-2. 공통 스타일시트 (styles.css)
```css
/* Reset & Base */
@@ -346,7 +422,7 @@ body {
}
```
#### 3-3. 공통 스크립트 (scripts.js)
#### 4-3. 공통 스크립트 (scripts.js)
```javascript
// Modal Functions
@@ -386,40 +462,51 @@ function updateBadge(tabId, count) {
---
### 4. 화면별 목업 생성
### 5. 화면별 목업 생성 규칙
각 화면에 대해 router.md의 컴포넌트 정보를 기반으로 HTML 생성:
각 화면에 대해 `docs/ui/[screen].md`의 컴포넌트 정보를 기반으로 HTML 생성:
1. **헤더 영역**: `[screen]-header` 컴포넌트들
2. **메인 콘텐츠**: `[screen]-content` 내 컴포넌트들
3. **탭바**: 전역 탭바 (현재 탭 active 표시)
4. **팝업/모달**: `popup-*`, `bs-*` 컴포넌트들
### 5. 완료 리포트
### 6. 완료 리포트
```
✅ 목업 생성 완료!
📁 생성된 파일:
- mockup/home.html
- mockup/index.html (통합 뷰어 - UI 설계서 + 정책 + 목업 링크) ⭐
- mockup/friends.html
- mockup/chat-list.html
- mockup/chat.html
- mockup/progress.html
- mockup/shop.html
- ... (총 N개 화면)
- mockup/styles.css
- mockup/scripts.js
🌐 브라우저에서 확인:
file:///Users/.../ui/works/mockup/home.html
**📚 통합 뷰어 (여기서 시작하세요!)**
file:///Users/.../docs/mockup/index.html
📊 생성 요약:
- HTML 파일: N개
- 컴포넌트: N개
- 모달/팝업: N개
- 통합 뷰어: 1개 (index.html)
- 화면 목업: N개
- UI 설계서: N개 문서 포함
- 정책 설계서: N개 문서 포함
- 전체 컴포넌트: N개
📝 참고:
- 각 화면은 상호 링크되어 있습니다
- 팝업은 JavaScript로 동작합니다
- **index.html**에서 모든 설계 문서와 목업을 한 곳에서 확인할 수 있습니다
- 각 화면 목업은 상호 링크되어 네비게이션 테스트가 가능합니다
- 정책 문서와 연결된 UI 요소에는 정책 ID 주석이 포함되어 있습니다
📍 현재 위치: Step 5/5 완료!
🎉 이제 프로젝트 전체 문서를 index.html에서 확인하세요!
```
---
@@ -427,7 +514,7 @@ file:///Users/.../ui/works/mockup/home.html
## 목업 생성 원칙
### Do's
-**router.md 기반**: 모든 컴포넌트 ID와 구조 준수
-**docs/ui/router.md 기반**: 모든 컴포넌트 ID와 구조 준수
-**정책 연결**: UI에 적용되는 정책 ID 주석 추가
-**상호 링크**: 화면 간 네비게이션 동작
-**상태 표시**: Empty, Loading, Error 상태 시뮬레이션
@@ -436,7 +523,7 @@ file:///Users/.../ui/works/mockup/home.html
### Don'ts
-**과도한 디자인**: 와이어프레임 수준 유지
-**하드코딩**: 데이터는 의미있는 샘플로
-**누락**: router.md에 정의된 컴포넌트 누락 금지
-**누락**: docs/ui/router.md에 정의된 컴포넌트 누락 금지
---
@@ -460,25 +547,43 @@ file:///Users/.../ui/works/mockup/home.html
## Example
```
$ /appkit.visualize home
$ /appkit.visualize
🎨 목업 생성: home
🎨 통합 뷰어 + 전체 목업 생성
router.md에서 컴포넌트 확인:
- home-header (Header)
- home-stats (Card)
- home-quick-status (Display)
- tab-bar (TabBar)
- popup-new-message (Modal)
- popup-life-stage (Modal)
📚 UI 설계서 읽기:
- docs/ui/router.md
- docs/ui/main.md
- docs/ui/friends.md
- docs/ui/chat-list.md
- docs/ui/chat.md
- docs/ui/progress.md
- docs/ui/shop.md
정책 적용:
- [MN-001] 채팅권 잔액 표시 → header
- [GM-001] 모드 전환 → header
📋 정책 설계서 읽기:
- docs/policies/01-monetization.md
- docs/policies/02-gameplay.md
- docs/policies/03-dating.md
✅ home.html 생성 완료
styles.css 업데이트
✅ scripts.js 업데이트
🌐 통합 뷰어 생성:
mockup/index.html 생성
- UI 설계서 뷰어 (7개 문서)
- 정책 설계서 뷰어 (3개 문서)
- 목업 네비게이션
🌐 file:///Users/.../ui/works/mockup/home.html
📱 화면 목업 생성:
✅ mockup/friends.html
✅ mockup/chat-list.html
✅ mockup/chat.html
✅ mockup/progress.html
✅ mockup/shop.html
✅ mockup/styles.css
✅ mockup/scripts.js
🌐 브라우저에서 확인:
📚 file:///Users/.../docs/mockup/index.html
💡 Tip:
- index.html을 열면 모든 UI 설계서, 정책, 목업을 한 곳에서 볼 수 있습니다
- 각 화면 목업은 상호 링크되어 있어 네비게이션 테스트가 가능합니다
```

1
.serena/.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
/cache

84
.serena/project.yml Normal file
View File

@@ -0,0 +1,84 @@
# list of languages for which language servers are started; choose from:
# al bash clojure cpp csharp csharp_omnisharp
# dart elixir elm erlang fortran go
# haskell java julia kotlin lua markdown
# nix perl php python python_jedi r
# rego ruby ruby_solargraph rust scala swift
# terraform typescript typescript_vts yaml zig
# Note:
# - For C, use cpp
# - For JavaScript, use typescript
# Special requirements:
# - csharp: Requires the presence of a .sln file in the project folder.
# When using multiple languages, the first language server that supports a given file will be used for that file.
# The first language is the default language and the respective language server will be used as a fallback.
# Note that when using the JetBrains backend, language servers are not used and this list is correspondingly ignored.
languages:
- typescript
# the encoding used by text files in the project
# For a list of possible encodings, see https://docs.python.org/3.11/library/codecs.html#standard-encodings
encoding: "utf-8"
# whether to use the project's gitignore file to ignore files
# Added on 2025-04-07
ignore_all_files_in_gitignore: true
# list of additional paths to ignore
# same syntax as gitignore, so you can use * and **
# Was previously called `ignored_dirs`, please update your config if you are using that.
# Added (renamed) on 2025-04-07
ignored_paths: []
# whether the project is in read-only mode
# If set to true, all editing tools will be disabled and attempts to use them will result in an error
# Added on 2025-04-18
read_only: false
# list of tool names to exclude. We recommend not excluding any tools, see the readme for more details.
# Below is the complete list of tools for convenience.
# To make sure you have the latest list of tools, and to view their descriptions,
# execute `uv run scripts/print_tool_overview.py`.
#
# * `activate_project`: Activates a project by name.
# * `check_onboarding_performed`: Checks whether project onboarding was already performed.
# * `create_text_file`: Creates/overwrites a file in the project directory.
# * `delete_lines`: Deletes a range of lines within a file.
# * `delete_memory`: Deletes a memory from Serena's project-specific memory store.
# * `execute_shell_command`: Executes a shell command.
# * `find_referencing_code_snippets`: Finds code snippets in which the symbol at the given location is referenced.
# * `find_referencing_symbols`: Finds symbols that reference the symbol at the given location (optionally filtered by type).
# * `find_symbol`: Performs a global (or local) search for symbols with/containing a given name/substring (optionally filtered by type).
# * `get_current_config`: Prints the current configuration of the agent, including the active and available projects, tools, contexts, and modes.
# * `get_symbols_overview`: Gets an overview of the top-level symbols defined in a given file.
# * `initial_instructions`: Gets the initial instructions for the current project.
# Should only be used in settings where the system prompt cannot be set,
# e.g. in clients you have no control over, like Claude Desktop.
# * `insert_after_symbol`: Inserts content after the end of the definition of a given symbol.
# * `insert_at_line`: Inserts content at a given line in a file.
# * `insert_before_symbol`: Inserts content before the beginning of the definition of a given symbol.
# * `list_dir`: Lists files and directories in the given directory (optionally with recursion).
# * `list_memories`: Lists memories in Serena's project-specific memory store.
# * `onboarding`: Performs onboarding (identifying the project structure and essential tasks, e.g. for testing or building).
# * `prepare_for_new_conversation`: Provides instructions for preparing for a new conversation (in order to continue with the necessary context).
# * `read_file`: Reads a file within the project directory.
# * `read_memory`: Reads the memory with the given name from Serena's project-specific memory store.
# * `remove_project`: Removes a project from the Serena configuration.
# * `replace_lines`: Replaces a range of lines within a file with new content.
# * `replace_symbol_body`: Replaces the full definition of a symbol.
# * `restart_language_server`: Restarts the language server, may be necessary when edits not through Serena happen.
# * `search_for_pattern`: Performs a search for a pattern in the project.
# * `summarize_changes`: Provides instructions for summarizing the changes made to the codebase.
# * `switch_modes`: Activates modes by providing a list of their names
# * `think_about_collected_information`: Thinking tool for pondering the completeness of collected information.
# * `think_about_task_adherence`: Thinking tool for determining whether the agent is still on track with the current task.
# * `think_about_whether_you_are_done`: Thinking tool for determining whether the task is truly completed.
# * `write_memory`: Writes a named memory (for future reference) to Serena's project-specific memory store.
excluded_tools: []
# initial prompt for the project. It will always be given to the LLM upon activating the project
# (contrary to the memories, which are loaded on demand).
initial_prompt: ""
project_name: "appkit"
included_optional_tools: []