create-ax-project 1.0.0 → 1.0.2

package/template/stages/03-planning/outputs/project_plan.md

@@ -1,204 +0,0 @@
-# 📅 Snake Game - 프로젝트 계획
-
-> 생성일: 2026-01-21
-> 스테이지: 03-planning
-> 프로젝트: snake-game
-
----
-
-## 1. 마일스톤 정의
-
-### Phase 1: MVP (핵심 기능)
-
-| 마일스톤 | 목표 | 완료 기준 |
-|---------|------|----------|
-| M1.1 | 프로젝트 셋업 | Vite + React + TypeScript 환경 구성 완료 |
-| M1.2 | 게임 보드 렌더링 | Canvas에 그리드 표시, 뱀 초기 위치 렌더링 |
-| M1.3 | 뱀 이동 | 방향키로 뱀 이동, 게임 루프 동작 |
-| M1.4 | 먹이 시스템 | 먹이 생성, 먹이 충돌 시 뱀 성장 |
-| M1.5 | 충돌 감지 | 벽/자기 몸 충돌 시 게임 오버 |
-| M1.6 | 점수 & UI | 점수 표시, 게임 오버 화면, 재시작 |
-
-### Phase 2: 향상된 기능
-
-| 마일스톤 | 목표 | 완료 기준 |
-|---------|------|----------|
-| M2.1 | 레벨 시스템 | 점수 증가 시 속도 증가 |
-| M2.2 | 최고 점수 | localStorage 저장/불러오기 |
-| M2.3 | 일시정지 | P/Escape 키로 일시정지/재개 |
-| M2.4 | 모바일 지원 | 터치 스와이프 + 방향 버튼 |
-
-### Phase 3: 폴리싱
-
-| 마일스톤 | 목표 | 완료 기준 |
-|---------|------|----------|
-| M3.1 | 반응형 디자인 | 다양한 화면 크기 대응 |
-| M3.2 | 테스트 작성 | 단위 테스트 커버리지 80%+ |
-| M3.3 | 배포 | GitHub Pages 또는 Vercel 배포 |
-
----
-
-## 2. 스프린트 계획
-
-### Sprint 1: 프로젝트 기반 (04-ui-ux ~ 05-task-management)
-
-| 태스크 | 담당 스테이지 | 산출물 |
-|--------|-------------|--------|
-| UI/UX 와이어프레임 | 04-ui-ux | wireframes.md |
-| 디자인 토큰 정의 | 04-ui-ux | design-tokens.md |
-| 태스크 분해 | 05-task-management | tasks.md |
-| 스프린트 계획 | 05-task-management | sprint-plan.md |
-
-### Sprint 2: MVP 구현 (06-implementation)
-
-| 태스크 | 우선순위 | 예상 시간 |
-|--------|---------|----------|
-| 프로젝트 초기화 (Vite) | P0 | 10분 |
-| 타입 정의 | P0 | 10분 |
-| 상수 정의 | P0 | 10분 |
-| useGameLoop 훅 | P0 | 15분 |
-| useKeyboard 훅 | P0 | 15분 |
-| gameReducer 구현 | P0 | 20분 |
-| collision.ts 구현 | P0 | 15분 |
-| renderer.ts 구현 | P0 | 20분 |
-| CanvasLayer 컴포넌트 | P0 | 15분 |
-| GameEngine 컴포넌트 | P0 | 20분 |
-| ScoreBoard 컴포넌트 | P1 | 10분 |
-| GameOverModal 컴포넌트 | P1 | 15분 |
-| App 통합 | P0 | 15분 |
-
-### Sprint 3: 기능 확장 (06-implementation 계속)
-
-| 태스크 | 우선순위 | 예상 시간 |
-|--------|---------|----------|
-| 레벨 시스템 | P1 | 15분 |
-| useHighScore 훅 | P1 | 15분 |
-| 일시정지 기능 | P1 | 10분 |
-| useSwipe 훅 | P1 | 20분 |
-| MobileControls 컴포넌트 | P1 | 20분 |
-| StartScreen 컴포넌트 | P2 | 15분 |
-
-### Sprint 4: 품질 개선 (07-refactoring ~ 08-qa)
-
-| 태스크 | 담당 스테이지 | 예상 시간 |
-|--------|-------------|----------|
-| 코드 리뷰 & 리팩토링 | 07-refactoring | 30분 |
-| 성능 최적화 | 07-refactoring | 20분 |
-| 버그 수정 | 08-qa | 20분 |
-| 엣지 케이스 테스트 | 08-qa | 15분 |
-
-### Sprint 5: 테스트 & 배포 (09-testing ~ 10-deployment)
-
-| 태스크 | 담당 스테이지 | 예상 시간 |
-|--------|-------------|----------|
-| 단위 테스트 작성 | 09-testing | 30분 |
-| E2E 테스트 작성 | 09-testing | 20분 |
-| 빌드 설정 | 10-deployment | 10분 |
-| 배포 | 10-deployment | 15분 |
-
----
-
-## 3. 의존성 그래프
-
-```
-프로젝트 초기화
-       │
-       ▼
-┌──────┴──────┐
-│             │
-▼             ▼
-타입 정의    상수 정의
-│             │
-└──────┬──────┘
-       │
-       ▼
-┌──────┴──────┬──────────────┐
-│             │              │
-▼             ▼              ▼
-useGameLoop  useKeyboard  collision.ts
-│             │              │
-└─────────────┼──────────────┘
-              │
-              ▼
-        gameReducer
-              │
-              ▼
-        renderer.ts
-              │
-              ▼
-       CanvasLayer
-              │
-              ▼
-       GameEngine
-              │
-       ┌──────┼──────┐
-       │      │      │
-       ▼      ▼      ▼
-  ScoreBoard Modal  App
-```
-
----
-
-## 4. 리스크 관리
-
-### 기술적 리스크
-
-| 리스크 | 확률 | 영향 | 대응 |
-|--------|------|------|------|
-| Canvas 성능 이슈 | 낮 | 중 | requestAnimationFrame 최적화 |
-| 모바일 터치 지연 | 중 | 중 | passive 리스너, 즉시 응답 |
-| 상태 동기화 문제 | 중 | 높 | useRef로 게임 상태 분리 |
-
-### 일정 리스크
-
-| 리스크 | 확률 | 영향 | 대응 |
-|--------|------|------|------|
-| 기능 범위 확대 | 중 | 중 | MVP 우선, Phase 분리 |
-| 디버깅 시간 초과 | 중 | 중 | 단계별 테스트 |
-
----
-
-## 5. 완료 기준 (Definition of Done)
-
-### 코드 레벨
-- [ ] TypeScript 컴파일 에러 0개
-- [ ] ESLint 경고 0개
-- [ ] 단위 테스트 커버리지 80%+
-
-### 기능 레벨
-- [ ] 방향키로 뱀 이동 가능
-- [ ] 먹이 먹으면 길이 증가 + 점수 획득
-- [ ] 벽/자기 몸 충돌 시 게임 오버
-- [ ] 게임 재시작 가능
-- [ ] 최고 점수 저장/표시
-
-### 품질 레벨
-- [ ] 60fps 유지 (Chrome DevTools 확인)
-- [ ] 모바일 터치 작동
-- [ ] 접근성 기본 준수 (키보드 네비게이션)
-
----
-
-## 6. 스테이지별 예상 시간
-
-| 스테이지 | 예상 시간 | 주요 산출물 |
-|---------|----------|------------|
-| 04-ui-ux | 15분 | wireframes.md, design-tokens.md |
-| 05-task-management | 15분 | tasks.md, sprint-plan.md |
-| 06-implementation | 60분 | 소스 코드 전체 |
-| 07-refactoring | 30분 | 최적화된 코드 |
-| 08-qa | 20분 | 버그 수정 |
-| 09-testing | 30분 | 테스트 코드 |
-| 10-deployment | 20분 | 배포된 앱 |
-| **총계** | **~3시간** | - |
-
----
-
-## ✅ 프로젝트 계획 체크리스트
-
-- [x] 마일스톤 정의
-- [x] 스프린트 계획
-- [x] 의존성 그래프
-- [x] 리스크 관리 계획
-- [x] 완료 기준 정의
-- [x] 시간 추정

package/template/stages/03-planning/outputs/tech_stack.md

@@ -1,176 +0,0 @@
-# 🔧 Snake Game - 기술 스택 결정
-
-> 생성일: 2026-01-21
-> 스테이지: 03-planning
-> 프로젝트: snake-game
-
----
-
-## 📋 최종 기술 스택
-
-### 핵심 스택
-
-| 카테고리 | 선택 | 버전 | 근거 |
-|---------|------|------|------|
-| **프레임워크** | React | ^18.2.0 | 컴포넌트 기반, 훅 시스템 |
-| **언어** | TypeScript | ^5.3.0 | 타입 안전성, IDE 지원 |
-| **빌드** | Vite | ^5.0.0 | 빠른 HMR, 최적화된 빌드 |
-| **렌더링** | Canvas API | 네이티브 | 게임 성능, 60fps |
-| **상태관리** | useReducer + useRef | React 내장 | 외부 의존성 최소화 |
-
-### 개발 도구
-
-| 카테고리 | 선택 | 버전 | 용도 |
-|---------|------|------|------|
-| **린터** | ESLint | ^8.55.0 | 코드 품질 |
-| **포맷터** | Prettier | ^3.1.0 | 코드 일관성 |
-| **테스트** | Vitest | ^1.1.0 | 단위/통합 테스트 |
-| **E2E** | Playwright | ^1.40.0 | E2E 테스트 |
-
-### 스타일링
-
-| 카테고리 | 선택 | 근거 |
-|---------|------|------|
-| **CSS** | CSS Modules | 스코프 격리, 번들 최적화 |
-| **대안** | Tailwind CSS | 빠른 프로토타이핑 (선택) |
-
----
-
-## 📦 package.json 의존성
-
-```json
-{
-  "name": "snake-game",
-  "private": true,
-  "version": "1.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest",
-    "test:coverage": "vitest run --coverage",
-    "test:e2e": "playwright test"
-  },
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "^1.1.0",
-    "@testing-library/react": "^14.1.0",
-    "@testing-library/jest-dom": "^6.1.6",
-    "@playwright/test": "^1.40.0",
-    "eslint": "^8.55.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "jsdom": "^23.0.1",
-    "prettier": "^3.1.0",
-    "typescript": "^5.3.0",
-    "vite": "^5.0.0",
-    "vitest": "^1.1.0"
-  }
-}
-```
-
----
-
-## ⚖️ 기술 결정 근거
-
-### 1. React vs Vue vs Svelte
-
-| 항목 | React | Vue | Svelte |
-|------|-------|-----|--------|
-| 생태계 | ⭐⭐⭐ | ⭐⭐ | ⭐ |
-| 학습 곡선 | 중간 | 낮음 | 낮음 |
-| 게임 개발 자료 | 많음 | 보통 | 적음 |
-| 커뮤니티 | 최대 | 큼 | 성장 중 |
-
-**선택: React** - 풍부한 게임 개발 자료, 훅 시스템 활용
-
-### 2. Canvas vs CSS Grid vs SVG
-
-| 항목 | Canvas | CSS Grid | SVG |
-|------|--------|----------|-----|
-| 성능 (대량 요소) | ⭐⭐⭐ | ⭐ | ⭐⭐ |
-| 구현 복잡도 | 중간 | 낮음 | 높음 |
-| 애니메이션 | ⭐⭐⭐ | ⭐⭐ | ⭐⭐ |
-| 반응형 | 코드 필요 | 자동 | 자동 |
-
-**선택: Canvas** - 게임에 최적화, 60fps 보장
-
-### 3. 상태 관리: useReducer vs Redux vs Zustand
-
-| 항목 | useReducer | Redux | Zustand |
-|------|-----------|-------|---------|
-| 번들 크기 | 0KB | ~43KB | ~3KB |
-| 복잡도 | 낮음 | 높음 | 낮음 |
-| 게임 적합성 | ⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐ |
-
-**선택: useReducer** - 외부 의존성 없음, 게임 규모에 적합
-
-### 4. Vite vs CRA vs Next.js
-
-| 항목 | Vite | CRA | Next.js |
-|------|------|-----|---------|
-| 빌드 속도 | ⭐⭐⭐ | ⭐ | ⭐⭐ |
-| 설정 복잡도 | 낮음 | 낮음 | 중간 |
-| 정적 빌드 | ⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐ |
-
-**선택: Vite** - 빠른 개발 경험, 최적화된 빌드
-
----
-
-## 🚫 미사용 기술
-
-| 기술 | 미사용 이유 |
-|------|-----------|
-| Phaser.js | 게임 엔진 금지 (순수 React) |
-| PixiJS | 게임 엔진 금지 |
-| jQuery | 레거시, React와 충돌 |
-| MobX | 과도한 복잡성 |
-| Next.js | SSR 불필요 (정적 게임) |
-| Sass/SCSS | CSS Modules로 충분 |
-
----
-
-## 📁 프로젝트 생성 명령
-
-```bash
-# Vite로 React + TypeScript 프로젝트 생성
-npm create vite@latest snake-game -- --template react-ts
-
-# 디렉토리 이동
-cd snake-game
-
-# 의존성 설치
-npm install
-
-# 개발 도구 설치
-npm install -D @vitest/coverage-v8 @testing-library/react \
-  @testing-library/jest-dom jsdom @playwright/test
-
-# 개발 서버 시작
-npm run dev
-```
-
----
-
-## ✅ 기술 스택 체크리스트
-
-- [x] 핵심 프레임워크 선택 (React 18)
-- [x] 언어 선택 (TypeScript 5)
-- [x] 빌드 도구 선택 (Vite 5)
-- [x] 렌더링 방식 선택 (Canvas API)
-- [x] 상태 관리 방식 선택 (useReducer + useRef)
-- [x] 스타일링 방식 선택 (CSS Modules)
-- [x] 테스트 도구 선택 (Vitest + Playwright)
-- [x] 의존성 목록 작성

package/template/stages/04-ui-ux/HANDOFF.md

@@ -1,165 +0,0 @@
-# HANDOFF: 04-ui-ux → 05-task-management
-
-> 생성일: 2026-01-21
-> 프로젝트: snake-game
-> 현재 스테이지: 04-ui-ux (완료)
-> 다음 스테이지: 05-task-management
-
----
-
-## ✅ 완료된 작업
-
-- [x] 와이어프레임 설계 (5개 화면)
-- [x] 사용자 플로우 다이어그램
-- [x] 디자인 시스템 정의 (Neon Arcade 테마)
-- [x] 컴포넌트 스타일 가이드
-- [x] 반응형 브레이크포인트 정의
-- [x] 애니메이션 명세
-
----
-
-## 📁 생성된 산출물
-
-| 파일 | 설명 |
-|------|------|
-| `outputs/wireframes.md` | 5개 화면 ASCII 와이어프레임 |
-| `outputs/user_flows.md` | 사용자 플로우 다이어그램 |
-| `outputs/design_system.md` | 디자인 시스템 토큰 |
-| `HANDOFF.md` | 이 문서 |
-
----
-
-## 🎨 핵심 디자인 결정사항
-
-### 1. 테마: Neon Arcade
-
-| 요소 | 스타일 |
-|------|--------|
-| 배경 | 다크 네이비 (#1a1a2e) |
-| 강조 | 네온 그린 (#00ff88) + Glow |
-| 위험 | 네온 레드 (#ff6b6b) + Glow |
-| 하이라이트 | 골드 (#f0e130) |
-
-### 2. 컴포넌트 구조
-
-```
-App
-├── StartScreen
-│   ├── Logo (Neon Glow)
-│   ├── HighScore
-│   └── StartButton
-│
-├── GameEngine
-│   ├── ScoreBoard
-│   │   ├── CurrentScore
-│   │   └── BestScore
-│   │
-│   ├── CanvasLayer (400x400)
-│   │   ├── Grid (20x20)
-│   │   ├── Snake (Glow)
-│   │   └── Food (Glow)
-│   │
-│   └── MobileControls (D-Pad)
-│
-├── PauseOverlay
-│   ├── ResumeButton
-│   └── QuitButton
-│
-└── GameOverModal
-    ├── FinalScore
-    ├── NewHighScore (조건부)
-    ├── PlayAgainButton
-    └── MainMenuLink
-```
-
-### 3. 반응형 브레이크포인트
-
-| 너비 | 대상 | 변경사항 |
-|------|------|----------|
-| < 480px | 모바일 | MobileControls 활성화, 캔버스 축소 |
-| 480px - 768px | 태블릿 | 터치 컨트롤 선택적 |
-| > 768px | 데스크톱 | 키보드 전용, 풀 캔버스 |
-
----
-
-## 📐 CSS 변수 요약
-
-### 색상
-```css
---color-primary: #00ff88
---color-secondary: #ff6b6b
---color-accent: #f0e130
---color-bg: #1a1a2e
---color-surface: #16213e
-```
-
-### 타이포그래피
-```css
---font-pixel: 'Press Start 2P', monospace
---font-base: 0.875rem (14px)
---font-lg: 1rem (16px)
---font-2xl: 1.5rem (24px)
-```
-
-### 스페이싱
-```css
---space-4: 1rem (16px)
---space-6: 1.5rem (24px)
---space-8: 2rem (32px)
-```
-
----
-
-## 🔜 05-task-management 스테이지 작업
-
-### 필수 산출물
-
-1. **tasks.md**
-   - 구현 태스크 분해
-   - 우선순위 지정 (P0, P1, P2)
-   - 의존성 정의
-
-2. **sprint-plan.md**
-   - 스프린트 계획
-   - 마일스톤 기반 배치
-
-3. **HANDOFF.md**
-
-### 태스크 분해 기준
-
-| 카테고리 | 예시 태스크 |
-|---------|-----------|
-| 설정 | 프로젝트 초기화, 타입 정의, 상수 정의 |
-| 훅 | useGameLoop, useKeyboard, useSwipe, useHighScore |
-| 엔진 | gameReducer, collision.ts, renderer.ts |
-| UI | CanvasLayer, ScoreBoard, GameOverModal, MobileControls |
-| 통합 | GameEngine, App |
-
----
-
-## 📊 AI 호출 기록
-
-| AI | 시간 | 도구 | 결과 | 상태 |
-|----|------|------|------|------|
-| Gemini | 12:45 | tmux wrapper | UI/UX 설계 | ✅ |
-| ClaudeCode | 12:50 | - | wireframes.md 작성 | ✅ |
-| ClaudeCode | 12:52 | - | user_flows.md 작성 | ✅ |
-| ClaudeCode | 12:55 | - | design_system.md 작성 | ✅ |
-
----
-
-## 🚀 다음 단계
-
-```bash
-# 다음 스테이지 실행
-/run-stage 05-task-management
-
-# 또는
-/tasks
-```
-
----
-
-**생성자**: ClaudeCode + Gemini
-**검토자**: -
-**승인**: 대기