📁 컴포넌트 구조와 Storybook 테스트 범위

💡**Atoms, Molecules, Organisms이 뭔지 궁금하다면?**💡

아토믹 디자인을 활용한 디자인 시스템 도입기 | 카카오엔터테인먼트 FE 기술블로그

테스트 적합도 기준:

Common (Atoms) ✅ 최우선 테스트

src/components/common/
├── Button/
│   ├── Button.tsx
│   └── Button.stories.tsx
└── Input/
    ├── Input.tsx
    └── Input.stories.tsx

• 가장 작은 단위의 재사용 컴포넌트
• 독립적이고 명확한 테스트 가능
• 버튼, 입력 필드, 아이콘, 타이포그래피 등

Feature (Molecules) 🤔 선택적 테스트

src/components/feature/
└── Table/
    ├── Table.tsx
    └── Table.stories.tsx

• Common 컴포넌트들의 조합
• 필요한 경우에만 테스트
• 테이블, 모달, 간단한 폼 등

Layout (Organisms) ❌ 권장하지 않음

src/components/layout/
├── Header/
└── Footer/

• 복잡한 상태와 로직 포함
• Jest, Cypress 등 다른 테스트 도구 권장