---
name: dev-component
description: |
  화면 명세를 받아 Atomic Design 기반 컴포넌트 트리를 설계하고
  Nuxt 표준 디렉토리 구조와 컴포넌트 스켈레톤 코드를 자동 생성합니다.

  다음 상황에서 반드시 사용하세요:
  - "이 화면 컴포넌트로 분리해줘", "컴포넌트 구조 설계해줘"
  - "Atomic Design으로 나눠줘", "컴포넌트 트리 만들어줘"
  - 신규 기능의 컴포넌트 아키텍처를 결정해야 할 때
---

# 컴포넌트 아키텍처 설계 (dev-component)

화면 명세 → Atomic Design 기반 컴포넌트 트리 → Nuxt SFC 스켈레톤 자동 생성.

## 언제 사용하는가

- 신규 페이지/기능의 컴포넌트 구조를 잡을 때
- 마크업 완료 후 컴포넌트 분리 기준을 결정할 때
- 팀원이 병렬로 작업할 수 있도록 역할 분리가 필요할 때

## 입력

- 화면 명세 또는 완성된 마크업 코드
- `plan-analyzer` 산출물 (컴포넌트 트리 초안)이 있으면 활용
- 기존 `components/` 디렉토리 구조 (재사용 가능 컴포넌트 파악용)

---

## 작업 순서

### Phase 1: 기존 컴포넌트 파악

1. 프로젝트 `components/` 디렉토리를 읽어 재사용 가능한 컴포넌트를 파악한다.
2. 설계 전 중복 개발 방지를 위해 유사 컴포넌트 목록을 사용자에게 안내한다.

### Phase 2: Atomic Design 분류

각 UI 요소를 아래 5단계로 분류한다:

| 레벨 | 위치 | 기준 |
|---|---|---|
| **Atoms** | `components/base/` | 더 이상 분리 불가한 기본 단위 (Button, Icon, Input, Badge) |
| **Molecules** | `components/common/` | Atoms 2개 이상 조합 (SearchBar, FormField, Card) |
| **Organisms** | `components/<도메인>/` | 독립적 기능 단위 (Header, ProductList, ReviewSection) |
| **Templates** | `layouts/` | 페이지 레이아웃 골격 |
| **Pages** | `pages/` | 실제 데이터와 결합한 최종 화면 |

### Phase 3: 컴포넌트 트리 출력

```
pages/
└── <page-name>.vue
    ├── layouts/<layout>.vue
    └── components/
        ├── <domain>/
        │   ├── <Organism>.vue   ← props: { ... }
        │   └── <Organism>.vue
        └── common/
            └── <Molecule>.vue   ← props: { ... }, emits: [...]
```

### Phase 4: Props / Emits 설계

각 컴포넌트의 인터페이스를 정의한다:

```ts
// 예시: ProductCard.vue
interface Props {
  id: string
  title: string
  imageUrl: string
  price: number
  isSoldOut?: boolean
}

type Emits = {
  click: [id: string]
  addToCart: [id: string]
}
```

### Phase 5: 스켈레톤 코드 생성

각 컴포넌트의 SFC 스켈레톤 파일을 생성한다:

```vue
<script setup lang="ts">
interface Props {
  // Phase 4 정의 붙여넣기
}

const props = defineProps<Props>()
const emit = defineEmits<{
  // Phase 4 정의 붙여넣기
}>()
</script>

<template>
  <!-- TODO: markup-base / markup-figma 스킬로 마크업 구현 -->
</template>
```

---

## 출력 형식

```
## 컴포넌트 설계: <페이지명>

### 재사용 가능한 기존 컴포넌트
- `components/common/Button.vue` — CTA 버튼에 활용 가능

### 컴포넌트 트리
[ASCII 트리]

### 신규 생성 파일 목록
- `components/product/ProductCard.vue` — Props: id, title, imageUrl, price
- `components/product/ProductList.vue` — Props: items[]
- ...

### 스켈레톤 코드
[각 파일 코드]
```