---

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가지 레벨로 계층화하여 재사용성과 유지보수성을 극대화하는 디자인 시스템입니다.

레이어 계층 구조

CopyPages (최상위)
  ↓
Templates
  ↓
Organisms
  ↓
Molecules
  ↓
Atoms (최하위)

디렉토리 구조

Copysrc/
├── components/
│   ├── atoms/      # 가장 작은 단위 (Button, Input, Label 등)
│   ├── molecules/  # atoms의 조합 (SearchBar, FormField 등)
│   ├── organisms/  # molecules/atoms의 복잡한 조합 (Header, Footer 등)
│   ├── templates/  # 페이지 레이아웃
│   └── pages/      # 실제 페이지 컴포넌트

레이어별 패턴 가이드

빠른 가이드

컴포넌트 분류 방법

1. 더 이상 분해할 수 없는가? → Atoms
2. 2-3개 컴포넌트로 하나의 기능을 하는가? → Molecules
3. 여러 molecules/atoms로 복잡한 섹션을 구성하는가? → Organisms
4. 페이지의 레이아웃 구조인가? → Templates
5. 실제 데이터가 주입되는 라우트인가? → Pages

체크리스트

새 컴포넌트 작성 시:

• 올바른 레이어에 배치되었는가?
• 해당 레이어의 패턴 가이드를 준수하는가?
• 금지된 패턴을 사용하지 않았는가?
• 단일 책임 원칙을 지키는가?
• TypeScript 타입이 명확히 정의되었는가?

사용 방법

컴포넌트 검증

Copy# 특정 컴포넌트 검증
claude code review src/components/molecules/SearchBar

# 디렉토리 전체 검증
claude code review src/components/organisms

자동 생성

Copy# 새 컴포넌트 생성
claude code create atom Button
claude code create molecule SearchBar

더 알아보기

• 상세 가이드라인: reference.md 참조
• 코드 예시: examples.md 참조