SKILL.md
React Atomic Design Pattern
React 컴포넌트를 Atomic Design 패턴에 따라 구조화하고 유지합니다.
핵심 개념
Atomic Design은 컴포넌트를 5가지 레벨로 계층화하여 재사용성과 유지보수성을 극대화하는 디자인 시스템입니다.
레이어 계층 구조
Pages (최상위)
↓
Templates
↓
Organisms
↓
Molecules
↓
Atoms (최하위)디렉토리 구조
src/
├── components/
│ ├── atoms/ # 가장 작은 단위 (Button, Input, Label 등)
│ ├── molecules/ # atoms의 조합 (SearchBar, FormField 등)
│ ├── organisms/ # molecules/atoms의 복잡한 조합 (Header, Footer 등)
│ ├── templates/ # 페이지 레이아웃
│ └── pages/ # 실제 페이지 컴포넌트레이어별 패턴 가이드
| 레이어 | 주요 패턴 | 부가 패턴 | 금지 사항 |
|---|---|---|---|
| Atoms | 합성, 프레젠테이션 | 제어/비제어 | useState, API 호출, 비즈니스 로직 |
| Molecules | 합성, 커스텀 훅 | 제어 컴포넌트, 컴파운드 | API 호출, 복잡한 비즈니스 로직 |
| Organisms | 컨테이너/프레젠테이션, 커스텀 훅 | 컴파운드, 상태 끌어올리기 | 페이지 레이아웃 |
| Templates | Slot, 합성 | Context 제공 | 비즈니스 로직, API 호출 |
| Pages | 컨테이너, 커스텀 훅 | 상태 끌어올리기 | 직접적인 스타일링 |
빠른 가이드
컴포넌트 분류 방법
- 더 이상 분해할 수 없는가? → Atoms
- 2-3개 컴포넌트로 하나의 기능을 하는가? → Molecules
- 여러 molecules/atoms로 복잡한 섹션을 구성하는가? → Organisms
- 페이지의 레이아웃 구조인가? → Templates
- 실제 데이터가 주입되는 라우트인가? → Pages
체크리스트
새 컴포넌트 작성 시:
- 올바른 레이어에 배치되었는가?
- 해당 레이어의 패턴 가이드를 준수하는가?
- 금지된 패턴을 사용하지 않았는가?
- 단일 책임 원칙을 지키는가?
- TypeScript 타입이 명확히 정의되었는가?
사용 방법
컴포넌트 검증
# 특정 컴포넌트 검증
claude code review src/components/molecules/SearchBar
# 디렉토리 전체 검증
claude code review src/components/organisms자동 생성
# 새 컴포넌트 생성
claude code create atom Button
claude code create molecule SearchBar더 알아보기
- 상세 가이드라인:
reference.md참조 - 코드 예시:
examples.md참조