126 lines
3.4 KiB
Markdown
126 lines
3.4 KiB
Markdown
---
|
|
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[]
|
|
- ...
|
|
|
|
### 스켈레톤 코드
|
|
[각 파일 코드]
|
|
```
|