@su-record/vibe 2.2.4 → 2.3.0

package/.claude/vibe/rules/languages/typescript-vue.md

@@ -0,0 +1,353 @@
+# 🟢 TypeScript + Vue/Nuxt 품질 규칙
+
+## 핵심 원칙 (core에서 상속)
+
+```markdown
+✅ 단일 책임 (SRP)
+✅ 중복 제거 (DRY)
+✅ 재사용성
+✅ 낮은 복잡도
+✅ 함수 ≤ 30줄, Template ≤ 100줄
+✅ 중첩 ≤ 3단계
+✅ Cyclomatic complexity ≤ 10
+```
+
+## Vue 3 + TypeScript 특화 규칙
+
+### 1. Composition API 사용 (Options API 지양)
+
+```typescript
+// ❌ Options API (레거시)
+export default {
+  data() {
+    return { count: 0 };
+  },
+  methods: {
+    increment() {
+      this.count++;
+    }
+  }
+};
+
+// ✅ Composition API + script setup
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+
+const count = ref(0);
+const doubled = computed(() => count.value * 2);
+
+function increment() {
+  count.value++;
+}
+
+onMounted(() => {
+  console.log('컴포넌트 마운트됨');
+});
+</script>
+```
+
+### 2. 타입 안전한 Props/Emits
+
+```typescript
+// ✅ Props 타입 정의
+interface Props {
+  userId: string;
+  title?: string;
+  items: Item[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '기본 제목',
+});
+
+// ✅ Emits 타입 정의
+interface Emits {
+  (e: 'update', value: string): void;
+  (e: 'delete', id: number): void;
+  (e: 'select', item: Item): void;
+}
+
+const emit = defineEmits<Emits>();
+
+// 사용
+emit('update', '새 값');
+emit('delete', 123);
+```
+
+### 3. Composables로 로직 분리
+
+```typescript
+// ✅ composables/useUser.ts
+import { ref, computed } from 'vue';
+import type { User } from '@/types';
+
+export function useUser(userId: string) {
+  const user = ref<User | null>(null);
+  const isLoading = ref(false);
+  const error = ref<string | null>(null);
+
+  const fullName = computed(() =>
+    user.value ? `${user.value.firstName} ${user.value.lastName}` : ''
+  );
+
+  async function fetchUser() {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      const response = await api.getUser(userId);
+      user.value = response.data;
+    } catch (e) {
+      error.value = '사용자를 불러오지 못했습니다';
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
+  return {
+    user,
+    isLoading,
+    error,
+    fullName,
+    fetchUser,
+  };
+}
+
+// 컴포넌트에서 사용
+<script setup lang="ts">
+const { user, isLoading, fetchUser } = useUser(props.userId);
+
+onMounted(fetchUser);
+</script>
+```
+
+### 4. Pinia 상태 관리
+
+```typescript
+// ✅ stores/user.ts
+import { defineStore } from 'pinia';
+import type { User } from '@/types';
+
+interface UserState {
+  currentUser: User | null;
+  users: User[];
+  isLoading: boolean;
+}
+
+export const useUserStore = defineStore('user', {
+  state: (): UserState => ({
+    currentUser: null,
+    users: [],
+    isLoading: false,
+  }),
+
+  getters: {
+    isLoggedIn: (state) => !!state.currentUser,
+    userCount: (state) => state.users.length,
+  },
+
+  actions: {
+    async login(email: string, password: string) {
+      this.isLoading = true;
+      try {
+        const user = await authApi.login(email, password);
+        this.currentUser = user;
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
+    logout() {
+      this.currentUser = null;
+    },
+  },
+});
+
+// Setup Store 스타일 (권장)
+export const useUserStore = defineStore('user', () => {
+  const currentUser = ref<User | null>(null);
+  const isLoggedIn = computed(() => !!currentUser.value);
+
+  async function login(email: string, password: string) {
+    currentUser.value = await authApi.login(email, password);
+  }
+
+  return { currentUser, isLoggedIn, login };
+});
+```
+
+### 5. Nuxt 3 특화 규칙
+
+```typescript
+// ✅ Server API Routes (server/api/)
+// server/api/users/[id].get.ts
+export default defineEventHandler(async (event) => {
+  const id = getRouterParam(event, 'id');
+
+  if (!id) {
+    throw createError({
+      statusCode: 400,
+      message: 'ID가 필요합니다',
+    });
+  }
+
+  const user = await prisma.user.findUnique({ where: { id } });
+
+  if (!user) {
+    throw createError({
+      statusCode: 404,
+      message: '사용자를 찾을 수 없습니다',
+    });
+  }
+
+  return user;
+});
+
+// ✅ useFetch / useAsyncData
+<script setup lang="ts">
+// SSR 지원 데이터 페칭
+const { data: user, pending, error } = await useFetch<User>(
+  `/api/users/${props.userId}`
+);
+
+// 캐싱 키 지정
+const { data: posts } = await useAsyncData(
+  `user-${props.userId}-posts`,
+  () => $fetch(`/api/users/${props.userId}/posts`)
+);
+</script>
+
+// ✅ Middleware
+// middleware/auth.ts
+export default defineNuxtRouteMiddleware((to, from) => {
+  const { isLoggedIn } = useUserStore();
+
+  if (!isLoggedIn && to.path !== '/login') {
+    return navigateTo('/login');
+  }
+});
+```
+
+### 6. 컴포넌트 구조
+
+```vue
+<!-- ✅ 권장 컴포넌트 구조 -->
+<script setup lang="ts">
+// 1. 타입 import
+import type { User, Item } from '@/types';
+
+// 2. 컴포넌트 import
+import UserAvatar from '@/components/UserAvatar.vue';
+
+// 3. Props/Emits
+interface Props {
+  user: User;
+  editable?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  editable: false,
+});
+
+const emit = defineEmits<{
+  (e: 'update', user: User): void;
+}>();
+
+// 4. Composables
+const { isLoading, save } = useUserForm();
+
+// 5. Reactive state
+const formData = ref({ ...props.user });
+const isEditing = ref(false);
+
+// 6. Computed
+const canSave = computed(() =>
+  formData.value.name.length > 0 && !isLoading.value
+);
+
+// 7. Methods
+async function handleSave() {
+  await save(formData.value);
+  emit('update', formData.value);
+}
+
+// 8. Lifecycle
+onMounted(() => {
+  console.log('컴포넌트 준비됨');
+});
+</script>
+
+<template>
+  <div class="user-card">
+    <UserAvatar :src="user.avatar" />
+    <h2>{{ user.name }}</h2>
+    <button
+      v-if="editable"
+      :disabled="!canSave"
+      @click="handleSave"
+    >
+      저장
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.user-card {
+  padding: 1rem;
+  border-radius: 8px;
+}
+</style>
+```
+
+## 안티패턴
+
+```typescript
+// ❌ v-if와 v-for 함께 사용
+<li v-for="user in users" v-if="user.isActive">
+
+// ✅ computed로 필터링
+const activeUsers = computed(() => users.value.filter(u => u.isActive));
+<li v-for="user in activeUsers">
+
+// ❌ Props 직접 수정
+props.user.name = '새 이름';
+
+// ✅ emit으로 부모에게 알림
+emit('update', { ...props.user, name: '새 이름' });
+
+// ❌ $refs 남용
+this.$refs.input.focus();
+
+// ✅ template ref + expose
+const inputRef = ref<HTMLInputElement>();
+defineExpose({ focus: () => inputRef.value?.focus() });
+```
+
+## 파일 구조 (Nuxt 3)
+
+```
+project/
+├── components/
+│   ├── ui/              # 기본 UI 컴포넌트
+│   ├── features/        # 기능별 컴포넌트
+│   └── layouts/         # 레이아웃 컴포넌트
+├── composables/         # Composition 함수
+├── stores/              # Pinia 스토어
+├── server/
+│   ├── api/             # API 라우트
+│   ├── middleware/      # 서버 미들웨어
+│   └── utils/           # 서버 유틸리티
+├── pages/               # 파일 기반 라우팅
+├── middleware/          # 클라이언트 미들웨어
+├── types/               # TypeScript 타입
+└── utils/               # 유틸리티 함수
+```
+
+## 체크리스트
+
+- [ ] Composition API + `<script setup>` 사용
+- [ ] Props/Emits 타입 정의
+- [ ] Composables로 로직 분리
+- [ ] Pinia Setup Store 스타일 사용
+- [ ] `any` 타입 사용 금지
+- [ ] v-if/v-for 분리
+- [ ] scoped 스타일 사용

package/README.md

@@ -24,7 +24,14 @@ SPEC 문서 하나로 AI가 바로 구현하고, **시나리오별 자동 검증
 - **자동 컨텍스트 관리**: 80%+ 시 자동 저장, 세션 자동 복원
 - **36개 내장 도구**: 코드 분석, 품질 검증, 세션 메모리 (MCP 오버헤드 제거)
 
-### v2.2.0 신규 기능
+### v2.3.0 신규 기능
+
+- **📦 14개 프레임워크별 언어 룰**: Next.js, React, Vue, Nuxt, React Native 등 프레임워크별 최적화 규칙
+- **🔄 모노레포 완벽 지원**: packages/*, apps/* 하위 패키지별 자동 감지 및 룰 적용
+- **🧹 레거시 자동 정리**: `vibe update` 시 이전 버전 파일 자동 정리
+- **⚙️ 명령어 구조 개선**: 7개 core 명령어 + `/vibe.utils` 유틸리티 통합
+
+### v2.2.0 기능
 
 - **⚡ ULTRAWORK Pipeline**: 구현 중 백그라운드 에이전트로 다음 Phase 준비
 - **🔄 Phase 파이프라이닝**: Phase 간 대기 시간 제거 (~50% 속도 향상)
@@ -40,18 +47,20 @@ SPEC 문서 하나로 AI가 바로 구현하고, **시나리오별 자동 검증
 
 ## Installation
 
+### CLI 설치
+
 ```bash
 npm install -g @su-record/vibe
 vibe init
 ```
 
-**생성되는 구조:**
+CLI 설치 시 생성되는 구조:
 
 ```text
 project/
 ├── CLAUDE.md              # 프로젝트 컨텍스트
 └── .claude/
-    ├── commands/          # 슬래시 커맨드 (12개)
+    ├── commands/          # 슬래시 커맨드 (7개)
     ├── agents/            # 서브에이전트
     │   ├── review/        # 리뷰 에이전트 (12개)
     │   └── research/      # 리서치 에이전트 (4개)
@@ -91,28 +100,29 @@ cd my-project
 ## Workflow
 
 ```
-┌─────────────────────────────────────────────────────┐
-│  /vibe.spec "기능명"                                │
-│  ↓ 대화형 요구사항 수집                              │
-│  ↓ 요구사항 확정 후 4개 병렬 리서치 (v2.1.0)        │
-│  ↓ .claude/vibe/specs/{기능명}.md + .feature              │
-├─────────────────────────────────────────────────────┤
-│  /vibe.run "기능명" ultrawork                       │
-│  ↓ 시나리오별 구현 + 즉시 검증 (SDD)                │
-│  ↓ Scenario 1 → ✅ → Scenario 2 → ...             │
-├─────────────────────────────────────────────────────┤
-│  /vibe.verify "기능명"                              │
-│  ↓ Given/When/Then 단계별 검증                     │
-├─────────────────────────────────────────────────────┤
-│  /vibe.review                    ← NEW (v2.1.0)    │
-│  ↓ 13+ 병렬 리뷰 에이전트 (P1/P2/P3)               │
-├─────────────────────────────────────────────────────┤
-│  /vibe.e2e                       ← NEW (v2.1.0)    │
-│  ↓ Playwright E2E 테스트                           │
-├─────────────────────────────────────────────────────┤
-│  /vibe.compound                  ← NEW (v2.1.0)    │
-│  ↓ 해결책 문서화 → .claude/vibe/solutions/                │
-└─────────────────────────────────────────────────────┘
+/vibe.spec "기능명"
+  ↓ 대화형 요구사항 수집
+  ↓ 요구사항 확정 후 4개 병렬 리서치
+  ↓ .claude/vibe/specs/{기능명}.md + .feature
+
+/vibe.run "기능명" ultrawork
+  ↓ 시나리오별 구현 + 즉시 검증 (SDD)
+  ↓ Scenario 1 → Scenario 2 → ...
+
+/vibe.verify "기능명"
+  ↓ Given/When/Then 단계별 검증
+
+/vibe.review
+  ↓ 13+ 병렬 리뷰 에이전트 (P1/P2/P3)
+
+/vibe.analyze "기능명"
+  ↓ 코드 탐색/구조 분석
+
+/vibe.reason "문제"
+  ↓ 9단계 체계적 추론
+
+/vibe.utils --옵션
+  ↓ 유틸리티 (--ui, --diagram, --e2e, --compound)
 ```
 
 ### 시나리오 주도 개발 (SDD)
@@ -161,35 +171,16 @@ Feature 로드 → Scenario 1 [구현→검증] → Scenario 2 [구현→검증]
 
 ### Claude Code 슬래시 커맨드
 
-#### 핵심 워크플로우
-
 | 명령어 | 설명 |
 |--------|------|
 | `/vibe.spec "기능명"` | SPEC 작성 (PTCF 구조) + 병렬 리서치 |
 | `/vibe.run "기능명"` | 구현 실행 |
 | `/vibe.run "기능명" ultrawork` | 🚀 **최대 성능 모드** (권장) |
-| `/vibe.run "기능명" ulw` | ultrawork 단축어 |
-| `/vibe.run "기능명" --phase N` | 특정 Phase만 실행 |
 | `/vibe.verify "기능명"` | 검증 |
-| `/vibe.review` | 🆕 **병렬 코드 리뷰** (13+ 에이전트) |
-| `/vibe.e2e` | 🆕 **E2E 테스트** (Playwright) |
-| `/vibe.compound` | 🆕 **지식 문서화** (해결책 아카이브) |
-| `/vibe.continue` | 🆕 **세션 복원** (이전 컨텍스트 로드) |
-
-#### 분석 & 도구
-
-| 명령어 | 설명 |
-|--------|------|
-| `/vibe.analyze` | 프로젝트 전체 분석 |
-| `/vibe.analyze "기능명"` | 특정 기능/모듈 분석 |
-| `/vibe.analyze --code` | 코드 품질 분석만 |
-| `/vibe.analyze --deps` | 의존성 분석만 |
-| `/vibe.analyze --arch` | 아키텍처 분석만 |
+| `/vibe.review` | **병렬 코드 리뷰** (13+ 에이전트) |
+| `/vibe.analyze "기능명"` | 코드 탐색/분석 |
 | `/vibe.reason "문제"` | 체계적 추론 (9단계) |
-| `/vibe.ui "설명"` | ASCII UI 미리보기 |
-| `/vibe.diagram` | 아키텍처 다이어그램 |
-| `/vibe.diagram --er` | ERD 다이어그램 |
-| `/vibe.diagram --flow` | 플로우차트 |
+| `/vibe.utils --옵션` | 유틸리티 (--ui, --diagram, --e2e) |
 
 ---
 
@@ -245,24 +236,18 @@ Scenario 1 → Scenario 2 → Scenario 3 → ... → Scenario N
 
 `/vibe.verify` 실행 시 자동 생성되는 품질 리포트:
 
-```
-┌─────────────────────────────────────────────────────────────────┐
-│  📊 VERIFICATION REPORT: login                                   │
-├─────────────────────────────────────────────────────────────────┤
-│                                                                 │
-│  ✅ 시나리오: 4/4 통과 (100%)                                   │
-│                                                                 │
-│  | # | Scenario              | Given | When | Then | Status |   │
-│  |---|───────────────────────|───────|──────|──────|────────|   │
-│  | 1 | 유효한 로그인 성공     | ✅    | ✅   | ✅   | ✅     |   │
-│  | 2 | 잘못된 비밀번호 에러   | ✅    | ✅   | ✅   | ✅     |   │
-│  | 3 | 이메일 형식 검증       | ✅    | ✅   | ✅   | ✅     |   │
-│  | 4 | 비밀번호 찾기 링크     | ✅    | ✅   | ✅   | ✅     |   │
-│                                                                 │
-│  📈 품질 점수: 94/100                                           │
-│                                                                 │
-└─────────────────────────────────────────────────────────────────┘
-```
+**VERIFICATION REPORT: login**
+
+시나리오: 4/4 통과 (100%)
+
+| # | Scenario | Given | When | Then | Status |
+|---|----------|-------|------|------|--------|
+| 1 | 유효한 로그인 성공 | ✅ | ✅ | ✅ | ✅ |
+| 2 | 잘못된 비밀번호 에러 | ✅ | ✅ | ✅ | ✅ |
+| 3 | 이메일 형식 검증 | ✅ | ✅ | ✅ | ✅ |
+| 4 | 비밀번호 찾기 링크 | ✅ | ✅ | ✅ | ✅ |
+
+품질 점수: **94/100**
 
 ### 검증 실패 시
 
@@ -289,31 +274,27 @@ When: "비밀번호 찾기" 클릭
 
 13+ 전문 에이전트가 동시에 코드 리뷰:
 
-```
-┌─────────────────────────────────────────────────────┐
-│  🚀 PARALLEL REVIEW AGENTS                          │
-├─────────────────────────────────────────────────────┤
-│  Security      │ OWASP Top 10, SQL injection, XSS  │
-│  Performance   │ N+1 queries, memory leaks         │
-│  Architecture  │ SOLID violations, layer breaches  │
-│  Language      │ Python, TypeScript, Rails, React  │
-│  Quality       │ Complexity, test coverage, git    │
-└─────────────────────────────────────────────────────┘
-```
+| 분야 | 검토 항목 |
+|------|----------|
+| Security | OWASP Top 10, SQL injection, XSS |
+| Performance | N+1 queries, memory leaks |
+| Architecture | SOLID violations, layer breaches |
+| Language | Python, TypeScript, Rails, React |
+| Quality | Complexity, test coverage, git |
 
 **우선순위 시스템:**
 - 🔴 **P1 (Critical)**: 머지 차단 - 보안 취약점, 데이터 손실
 - 🟡 **P2 (Important)**: 수정 권장 - 성능 문제, 테스트 누락
 - 🔵 **P3 (Nice-to-have)**: 백로그 - 코드 스타일, 리팩토링
 
-### E2E 테스트 (/vibe.e2e)
+### E2E 테스트 (/vibe.utils --e2e)
 
 Playwright 기반 브라우저 자동화 테스트:
 
 ```bash
-/vibe.e2e "login flow"        # 시나리오 테스트
-/vibe.e2e --visual            # 시각적 회귀 테스트
-/vibe.e2e --record            # 비디오 녹화
+/vibe.utils --e2e "login flow"    # 시나리오 테스트
+/vibe.utils --e2e --visual        # 시각적 회귀 테스트
+/vibe.utils --e2e --record        # 비디오 녹화
 ```
 
 **기능:**
@@ -322,7 +303,7 @@ Playwright 기반 브라우저 자동화 테스트:
 - 접근성(a11y) 검사
 - 버그 재현 자동화
 
-### 지식 복리 (/vibe.compound)
+### 지식 복리 (자동 트리거)
 
 해결한 문제를 자동 문서화하여 지식 축적:
 
@@ -334,7 +315,7 @@ Playwright 기반 브라우저 자동화 테스트:
 └── integration/        # 외부 연동
 ```
 
-**트리거**: "버그 해결됨", "bug fixed", "PR merged" 등
+**자동 트리거**: "버그 해결됨", "bug fixed", "PR merged" 등 (Hooks에서 자동 감지)
 
 ### 리서치 에이전트 강화
 
@@ -386,7 +367,7 @@ Primary 결과만 사용
 project/
 ├── CLAUDE.md                 # 프로젝트 컨텍스트        ← git 공유
 └── .claude/                  # ⚠️ 반드시 git에 커밋    ← git 공유
-    ├── commands/             # 슬래시 커맨드 (12개)
+    ├── commands/             # 슬래시 커맨드 (7개)
     ├── agents/               # 서브에이전트
     │   ├── review/           # 리뷰 에이전트 (12개)
     │   └── research/         # 리서치 에이전트 (4개)
@@ -477,22 +458,41 @@ Then: {예상 결과}
 
 ## Coding Rules (.claude/vibe/rules/)
 
-### 언어별 규칙 자동 적용
+### 14개 프레임워크별 언어 룰 (v2.3.0)
+
+`vibe init` / `vibe update` 시 프로젝트의 기술 스택을 감지하여 **프레임워크별 최적화 규칙**을 자동 설치합니다.
+
+| 감지 스택 | 룰 파일 | 주요 내용 |
+|----------|---------|----------|
+| Next.js | `typescript-nextjs.md` | App Router, Server Components, Server Actions |
+| React | `typescript-react.md` | Hooks, 컴포넌트 패턴, 상태관리 |
+| Vue.js | `typescript-vue.md` | Composition API, Pinia, script setup |
+| Nuxt 3 | `typescript-nuxt.md` | useFetch, Server API, Auto-imports |
+| React Native | `typescript-react-native.md` | 네이티브 모듈, 성능 최적화 |
+| Node.js | `typescript-node.md` | Express/Fastify/NestJS 패턴 |
+| FastAPI | `python-fastapi.md` | Pydantic, 비동기 처리, 의존성 주입 |
+| Django | `python-django.md` | ORM, 뷰 패턴, 시그널 |
+| Flutter | `dart-flutter.md` | Riverpod/BLoC, 위젯 트리 |
+| Go | `go.md` | 에러 처리, 고루틴, 인터페이스 |
+| Rust | `rust.md` | Result/Option, 소유권, unsafe |
+| Spring Boot | `java-spring.md` | DI, JPA, 트랜잭션 |
+| Android | `kotlin-android.md` | Compose, ViewModel, Coroutines |
+| iOS | `swift-ios.md` | SwiftUI, Combine, 프로토콜 |
 
-`vibe init` / `vibe update` 시 프로젝트의 기술 스택을 감지하여 **해당 언어에 맞는 규칙만** CLAUDE.md에 추가합니다.
+### 모노레포 지원
 
-| 감지 스택 | 적용 규칙 |
-|----------|----------|
-| TypeScript/Node.js | `any` 금지, 반환 타입 명시 등 |
-| Python | 타입 힌트 필수, f-string 권장 등 |
-| Go | 에러 즉시 처리, 인터페이스 사용처 정의 등 |
-| Rust | unwrap() 금지, unsafe 최소화 등 |
-| Java | Optional 활용, 불변 객체 선호 등 |
-| Kotlin | nullable 명시, !! 금지 등 |
-| Dart/Flutter | null safety, const 생성자 등 |
-| Swift/iOS | 옵셔널 강제 언래핑 금지 등 |
+`packages/*`, `apps/*` 하위 패키지별로 각각 감지하여 필요한 룰만 설치:
+
+```bash
+# 모노레포 예시
+monorepo/
+├── packages/
+│   ├── web/         → typescript-nextjs.md 설치
+│   ├── mobile/      → typescript-react-native.md 설치
+│   └── api/         → python-fastapi.md 설치
+```
 
-> Python 프로젝트에는 Python 규칙만, TypeScript 프로젝트에는 TypeScript 규칙만 적용됩니다.
+> 각 패키지에 맞는 프레임워크 규칙이 자동 적용됩니다.
 
 ### 핵심 원칙