Refactor to 5-step workflow (new → mvp → ui → policy → visualize)

- 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>
2025-12-14 20:07:13 +09:00
parent 721cf3a5dd
commit e9b0c00be7
23 changed files with 5221 additions and 3902 deletions
--- a/.claude/commands/appkit.visualize.md
+++ b/.claude/commands/appkit.visualize.md
@@ -0,0 +1,484 @@
+---
+description: 목업 생성 - HTML 기반 라이브 프로토타입 UI 생성
+---
+
+## User Input
+
+```text
+$ARGUMENTS
+```
+
+User input should be a screen name (e.g., "home", "chat", "booking") or "all" for all screens.
+
+## Overview
+
+**논리적 사고 5단계 워크플로우**:
+
+```
+1. /appkit.new       → 아이디어 스케치 (어떤 서비스인지?)
+2. /appkit.mvp       → MVP 범위 정하기 + 랜딩페이지
+3. /appkit.ui        → 화면설계서 (라우터, 화면, 컴포넌트)
+4. /appkit.policy    → 정책설계서 (비즈니스 규칙)
+5. /appkit.visualize → 목업 생성 (HTML 프로토타입) ← YOU ARE HERE
+```
+
+**출력 디렉토리**: `/Users/taesupyoon/sideProjects/rovel.ai/docs/appkit/ui/works/mockup`
+
+## Purpose
+
+router.md와 policy 문서를 기반으로 실제 동작하는 HTML 목업을 생성합니다.
+브라우저에서 바로 확인할 수 있는 라이브 프로토타입입니다.
+
+---
+
+## Pre-requisite
+
+- `/appkit.ui`로 화면설계가 되어 있어야 함
+- `router.md` 파일이 존재해야 함
+
+---
+
+## Usage
+
+```bash
+/appkit.visualize home          # 홈 화면 목업
+/appkit.visualize chat          # 채팅 화면 목업
+/appkit.visualize all           # 전체 화면 목업
+/appkit.visualize "예약 상세"    # 특정 화면 목업
+```
+
+---
+
+## Execution Flow
+
+### 1. 기존 기획 읽기
+
+Read files from `/Users/taesupyoon/sideProjects/rovel.ai/docs/appkit/ui/works/`:
+- `router.md` - 라우터 및 UI 목록
+- `main.md` - 메인 구조
+- `policies/*.md` - 정책 문서
+
+### 2. 목업 생성 대화
+
+**Step 1: 화면 확인**
+
+```markdown
+## 목업 생성
+
+router.md에서 확인된 화면 목록:
+
+| 화면 | 경로 | 생성 여부 |
+|-----|------|----------|
+| home | `/` | ⬜ |
+| chat-list | `/chat` | ⬜ |
+| chat-room | `/chat/:id` | ⬜ |
+| shop | `/shop` | ⬜ |
+
+어떤 화면을 생성할까요?
+```
+
+**Step 2: 사용자 선택**
+
+- 특정 화면명 → 해당 화면만 생성
+- "all", "전체" → 모든 화면 생성
+
+### 3. HTML 목업 파일 생성
+
+#### 3-1. 기본 구조
+
+**File**: `/Users/taesupyoon/sideProjects/rovel.ai/docs/appkit/ui/works/mockup/[screen].html`
+
+**템플릿**: `.specify/templates/mockup-base.html` 참조
+
+```html
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>[화면명] - [서비스명]</title>
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="app">
+    <!-- Header -->
+    <header class="header" id="[screen]-header">
+      <!-- 헤더 컴포넌트 -->
+    </header>
+
+    <!-- Main Content -->
+    <main class="content" id="[screen]-content">
+      <!-- 메인 콘텐츠 -->
+    </main>
+
+    <!-- Tab Bar -->
+    <nav class="tab-bar">
+      <!-- 탭바 -->
+    </nav>
+  </div>
+
+  <!-- Overlay -->
+  <div class="overlay" id="overlay" onclick="closeAll()"></div>
+
+  <!-- Modals/Popups -->
+  <!-- 모달/팝업 -->
+
+  <script src="scripts.js"></script>
+  <script>
+    // 화면별 스크립트
+  </script>
+</body>
+</html>
+```
+
+#### 3-2. 공통 스타일시트 (styles.css)
+
+```css
+/* Reset & Base */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  /* Colors */
+  --bg-primary: #0D0D1A;
+  --bg-secondary: #1A1A2E;
+  --bg-card: #252538;
+  --text-primary: #FFFFFF;
+  --text-secondary: #9999AA;
+  --accent-primary: #6C5CE7;
+  --accent-secondary: #45B7D1;
+  --accent-pink: #FF6B9D;
+  --accent-gold: #FFD93D;
+  --danger: #FF6B6B;
+  --success: #4ECB71;
+
+  /* Sizing */
+  --header-height: 56px;
+  --tab-height: 64px;
+  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+body {
+  font-family: 'Noto Sans KR', sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+/* App Container */
+.app {
+  max-width: 430px;
+  margin: 0 auto;
+  min-height: 100vh;
+  position: relative;
+  background: var(--bg-primary);
+}
+
+/* Header */
+.header {
+  position: fixed;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: 430px;
+  background: var(--bg-primary);
+  padding: 12px 16px;
+  z-index: 100;
+}
+
+/* Tab Bar */
+.tab-bar {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: 430px;
+  background: var(--bg-primary);
+  display: flex;
+  justify-content: space-around;
+  padding: 8px 0;
+  padding-bottom: calc(8px + var(--safe-area-bottom));
+  border-top: 1px solid #2D2D3A;
+  z-index: 100;
+}
+
+.tab-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px 16px;
+  color: var(--text-secondary);
+  text-decoration: none;
+  position: relative;
+}
+
+.tab-item.active {
+  color: var(--text-primary);
+}
+
+.tab-icon {
+  font-size: 20px;
+  margin-bottom: 4px;
+}
+
+.tab-label {
+  font-size: 10px;
+}
+
+.tab-badge {
+  position: absolute;
+  top: 0;
+  right: 8px;
+  background: var(--danger);
+  color: white;
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  min-width: 16px;
+  text-align: center;
+}
+
+/* Content Area */
+.content {
+  padding-top: var(--header-height);
+  padding-bottom: calc(var(--tab-height) + var(--safe-area-bottom));
+  min-height: 100vh;
+}
+
+/* Cards */
+.card {
+  background: var(--bg-card);
+  border-radius: 16px;
+  padding: 16px;
+  margin: 12px 16px;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 24px;
+  border-radius: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: none;
+}
+
+.btn-primary {
+  background: var(--accent-primary);
+  color: white;
+}
+
+.btn-secondary {
+  background: var(--bg-card);
+  color: var(--text-primary);
+}
+
+/* Modal */
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.9);
+  background: var(--bg-secondary);
+  border-radius: 20px;
+  padding: 24px;
+  text-align: center;
+  z-index: 1001;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s;
+  max-width: 320px;
+  width: 90%;
+}
+
+.modal.active {
+  opacity: 1;
+  visibility: visible;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+/* Overlay */
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0,0,0,0.7);
+  z-index: 1000;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s;
+}
+
+.overlay.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Toast */
+.toast {
+  position: fixed;
+  bottom: calc(var(--tab-height) + 20px + var(--safe-area-bottom));
+  left: 50%;
+  transform: translateX(-50%) translateY(100px);
+  background: var(--bg-card);
+  padding: 12px 24px;
+  border-radius: 12px;
+  opacity: 0;
+  transition: all 0.3s;
+  z-index: 1002;
+}
+
+.toast.active {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+```
+
+#### 3-3. 공통 스크립트 (scripts.js)
+
+```javascript
+// Modal Functions
+function showModal(id) {
+  document.getElementById('overlay').classList.add('active');
+  document.getElementById(id).classList.add('active');
+}
+
+function closeAll() {
+  document.getElementById('overlay').classList.remove('active');
+  document.querySelectorAll('.modal, .bottom-sheet').forEach(el => {
+    el.classList.remove('active');
+  });
+}
+
+// Toast Function
+function showToast(message, duration = 2000) {
+  const toast = document.getElementById('toast');
+  if (toast) {
+    toast.textContent = message;
+    toast.classList.add('active');
+    setTimeout(() => {
+      toast.classList.remove('active');
+    }, duration);
+  }
+}
+
+// Tab Badge Update
+function updateBadge(tabId, count) {
+  const badge = document.querySelector(`#${tabId} .tab-badge`);
+  if (badge) {
+    badge.textContent = count;
+    badge.style.display = count > 0 ? 'block' : 'none';
+  }
+}
+```
+
+---
+
+### 4. 화면별 목업 생성
+
+각 화면에 대해 router.md의 컴포넌트 정보를 기반으로 HTML 생성:
+
+1. **헤더 영역**: `[screen]-header` 컴포넌트들
+2. **메인 콘텐츠**: `[screen]-content` 내 컴포넌트들
+3. **탭바**: 전역 탭바 (현재 탭 active 표시)
+4. **팝업/모달**: `popup-*`, `bs-*` 컴포넌트들
+
+### 5. 완료 리포트
+
+```
+✅ 목업 생성 완료!
+
+📁 생성된 파일:
+- mockup/home.html
+- mockup/chat.html
+- mockup/styles.css
+- mockup/scripts.js
+
+🌐 브라우저에서 확인:
+file:///Users/.../ui/works/mockup/home.html
+
+📊 생성 요약:
+- HTML 파일: N개
+- 컴포넌트: N개
+- 모달/팝업: N개
+
+📝 참고:
+- 각 화면은 상호 링크되어 있습니다
+- 팝업은 JavaScript로 동작합니다
+- 정책 문서와 연결된 UI 요소에는 정책 ID 주석이 포함되어 있습니다
+
+📍 현재 위치: Step 5/5 완료!
+```
+
+---
+
+## 목업 생성 원칙
+
+### Do's
+- ✅ **router.md 기반**: 모든 컴포넌트 ID와 구조 준수
+- ✅ **정책 연결**: UI에 적용되는 정책 ID 주석 추가
+- ✅ **상호 링크**: 화면 간 네비게이션 동작
+- ✅ **상태 표시**: Empty, Loading, Error 상태 시뮬레이션
+- ✅ **반응형**: 모바일 퍼스트 (max-width: 430px)
+
+### Don'ts
+- ❌ **과도한 디자인**: 와이어프레임 수준 유지
+- ❌ **하드코딩**: 데이터는 의미있는 샘플로
+- ❌ **누락**: router.md에 정의된 컴포넌트 누락 금지
+
+---
+
+## 정책 연결 주석 예시
+
+```html
+<!-- [MN-001] 채팅권 잔액 표시 -->
+<div class="token-badge">
+  <span>💬</span>
+  <span>127</span>
+</div>
+
+<!-- [GM-002] 예약 가능 시간: 24시간 전까지만 -->
+<button class="btn-primary" disabled>
+  예약 마감
+</button>
+```
+
+---
+
+## Example
+
+```
+$ /appkit.visualize home
+
+🎨 목업 생성: home
+
+router.md에서 컴포넌트 확인:
+- home-header (Header)
+- home-stats (Card)
+- home-quick-status (Display)
+- tab-bar (TabBar)
+- popup-new-message (Modal)
+- popup-life-stage (Modal)
+
+정책 적용:
+- [MN-001] 채팅권 잔액 표시 → header
+- [GM-001] 모드 전환 → header
+
+✅ home.html 생성 완료
+✅ styles.css 업데이트
+✅ scripts.js 업데이트
+
+🌐 file:///Users/.../ui/works/mockup/home.html
+```