detail update

2025-12-15 08:53:23 +09:00
parent 3cee45b6c0
commit 5bafb0d567
5 changed files with 429 additions and 100 deletions
--- a/.claude/commands/appkit.visualize.md
+++ b/.claude/commands/appkit.visualize.md
@@ -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 설계서, 정책, 목업을 한 곳에서 볼 수 있습니다
+- 각 화면 목업은 상호 링크되어 있어 네비게이션 테스트가 가능합니다
 ```