react-atomic-pattern

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	컨테이너, 커스텀 훅	상태 끌어올리기	직접적인 스타일링

빠른 가이드

컴포넌트 분류 방법

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