| name | react-atomic-pattern |
| description | React 컴포넌트를 Atomic Design 패턴에 따라 구조화하고 검증합니다. "아토믹 패턴 확인", "컴포넌트 구조 검토", "레이어 분류", "atomic design 적용" 요청 시 사용합니다. |
| metadata | {"author":"pjt3591oo","version":"1.0.0"} |
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
체크리스트
새 컴포넌트 작성 시:
사용 방법
컴포넌트 검증
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 참조
