📝 docs: 여러 문서 및 파일 삭제

2026-05-21 21:56:04 +09:00
parent 607ef1a435
commit 8876998acd
51 changed files with 7076 additions and 3085 deletions
--- a/.claude/skills/dev-component/SKILL.md
+++ b/.claude/skills/dev-component/SKILL.md
@@ -0,0 +1,125 @@
+---
+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[]
+- ...
+
+### 스켈레톤 코드
+[각 파일 코드]
+```