# 컴포넌트 계층 구조 참조

## 아토믹 디자인 시스템 계층도

```
Templates (페이지 템플릿)
    │
    ├── DashboardTemplate
    │   ├── PageHeader (Organism)
    │   ├── StatCards (Organism)
    │   └── Custom Content
    │
    ├── ListPageTemplate
    │   ├── PageHeader (Organism)
    │   ├── StatCards (Organism)
    │   ├── SearchFilter (Organism)
    │   └── DataTable (Organism)
    │
    ├── FormPageTemplate
    │   ├── PageHeader (Organism)
    │   ├── FormSection (Organism)
    │   └── Actions
    │
    └── TabbedPageTemplate
        ├── PageHeader (Organism)
        └── Tabs + Content

Organisms (복합 컴포넌트)
    │
    ├── PageHeader
    │   ├── Icon (Atom)
    │   ├── Title (Text)
    │   └── Description (Text)
    │
    ├── StatCards
    │   └── StatCard (Molecule) × 4
    │       ├── Icon (Atom)
    │       ├── Label (Atom)
    │       └── Value (Text)
    │
    ├── SearchFilter
    │   ├── SearchBar (Molecule)
    │   ├── Button (Atom) × n
    │   └── Select (Atom)
    │
    ├── DataTable
    │   ├── Table (Atom)
    │   ├── TableActions (Molecule)
    │   └── StatusBadge (Molecule)
    │
    ├── FormSection
    │   └── FormField (Molecule) × n
    │       ├── Label (Atom)
    │       └── Input (Atom)
    │
    └── EmptyState
        ├── Icon (Atom)
        └── Button (Atom)

Molecules (조합 컴포넌트)
    │
    ├── FormField
    │   ├── Label (Atom)
    │   └── Input/Select/Textarea (Atom)
    │
    ├── SearchBar
    │   ├── Search Icon (Atom)
    │   └── Input (Atom)
    │
    ├── StatCard
    │   ├── Icon (Atom)
    │   ├── Label (Atom)
    │   └── Badge (Atom)
    │
    ├── StatusBadge
    │   └── Badge (Atom)
    │
    ├── TableActions
    │   └── Button (Atom) × 3
    │
    └── IconWithBadge
        ├── Icon (Atom)
        └── Badge (Atom)

Atoms (기본 컴포넌트)
    │
    ├── Button
    ├── Input
    ├── Label
    ├── Badge
    ├── Switch
    └── Checkbox
```

## 의존성 맵

### PageHeader 사용하는 컴포넌트
- ✅ DashboardTemplate
- ✅ ListPageTemplate
- ✅ FormPageTemplate
- ✅ TabbedPageTemplate
- ✅ 모든 개별 페이지 (ItemManagement, CustomerManagement 등)

### StatCards 사용하는 컴포넌트
- ✅ DashboardTemplate
- ✅ ListPageTemplate
- ✅ 대시보드 페이지들 (SalesDashboard, ProductionDashboard 등)
- ✅ 목록 페이지들 (ItemManagement, OrderManagement 등)

### SearchFilter 사용하는 컴포넌트
- ✅ ListPageTemplate
- ✅ 모든 목록 페이지들

### DataTable 사용하는 컴포넌트
- ✅ ListPageTemplate
- ✅ 모든 목록 페이지들

### FormField 사용하는 컴포넌트
- ✅ FormPageTemplate
- ✅ FormSection
- ✅ 모든 등록/수정 페이지들

### StatusBadge 사용하는 컴포넌트
- ✅ DataTable
- ✅ 모든 테이블 컬럼

### TableActions 사용하는 컴포넌트
- ✅ DataTable
- ✅ 모든 테이블의 액션 컬럼

## 컴포넌트별 영향 범위

### 🔴 Critical (전체 시스템 영향)

**Button** → 영향 범위: 전체 시스템의 모든 버튼
- 수정 시 주의: 모든 페이지의 버튼이 변경됨
- 사용 페이지: 모든 페이지
- 사용 횟수: 약 500+ 곳

**Input** → 영향 범위: 모든 입력 필드
- 수정 시 주의: 모든 폼, 검색바가 변경됨
- 사용 페이지: 모든 페이지
- 사용 횟수: 약 300+ 곳

**Label** → 영향 범위: 모든 레이블
- 수정 시 주의: 모든 폼 레이블이 변경됨
- 사용 페이지: 모든 폼 페이지
- 사용 횟수: 약 300+ 곳

**PageHeader** → 영향 범위: 모든 페이지 헤더
- 수정 시 주의: 모든 페이지의 헤더가 변경됨
- 사용 페이지: 모든 페이지
- 사용 횟수: 약 100+ 페이지

### 🟡 High (주요 기능 영향)

**StatCards** → 영향 범위: 모든 대시보드 및 목록 페이지
- 수정 시 주의: 모든 통계 카드가 변경됨
- 사용 페이지: 대시보드, 목록 페이지
- 사용 횟수: 약 50+ 페이지

**SearchFilter** → 영향 범위: 모든 목록 페이지
- 수정 시 주의: 모든 검색/필터 영역이 변경됨
- 사용 페이지: 목록 페이지
- 사용 횟수: 약 50+ 페이지

**DataTable** → 영향 범위: 모든 테이블
- 수정 시 주의: 모든 데이터 테이블이 변경됨
- 사용 페이지: 목록 페이지
- 사용 횟수: 약 50+ 페이지

**FormField** → 영향 범위: 모든 폼
- 수정 시 주의: 모든 입력 필드가 변경됨
- 사용 페이지: 등록/수정 페이지
- 사용 횟수: 약 200+ 곳

### 🟢 Medium (특정 기능 영향)

**StatusBadge** → 영향 범위: 상태 표시 영역
- 수정 시 주의: 모든 상태 배지가 변경됨
- 사용 페이지: 테이블, 카드
- 사용 횟수: 약 100+ 곳

**TableActions** → 영향 범위: 테이블 액션 버튼
- 수정 시 주의: 모든 테이블 액션이 변경됨
- 사용 페이지: 테이블
- 사용 횟수: 약 50+ 곳

**Badge** → 영향 범위: 모든 배지
- 수정 시 주의: 상태, 태그 등 모든 배지가 변경됨
- 사용 페이지: 대부분의 페이지
- 사용 횟수: 약 200+ 곳

### 🔵 Low (제한적 영향)

**Switch** → 영향 범위: 토글 스위치
- 사용 페이지: 설정 페이지
- 사용 횟수: 약 20+ 곳

**Checkbox** → 영향 범위: 체크박스
- 사용 페이지: 폼, 테이블
- 사용 횟수: 약 50+ 곳

**SearchBar** → 영향 범위: 검색 입력
- 사용 페이지: SearchFilter
- 사용 횟수: 약 50+ 곳

**StatCard** → 영향 범위: 개별 통계 카드
- 사용 페이지: StatCards
- 사용 횟수: 약 200+ 곳 (4개씩 배치)

**IconWithBadge** → 영향 범위: 아이콘 배지
- 사용 페이지: 헤더, 알림
- 사용 횟수: 약 10+ 곳

**EmptyState** → 영향 범위: 빈 상태
- 사용 페이지: 목록 페이지
- 사용 횟수: 약 50+ 곳

**FormSection** → 영향 범위: 폼 섹션
- 사용 페이지: 등록/수정 페이지
- 사용 횟수: 약 30+ 페이지

**MobileCard** → 영향 범위: 모바일 카드
- 사용 페이지: 모바일 목록
- 사용 횟수: 약 30+ 페이지

## 수정 전 체크리스트

컴포넌트를 수정하기 전에 다음을 확인하세요:

### Atoms 수정 전
- [ ] 영향 범위 확인 (전체 시스템)
- [ ] 최소 5개 이상의 페이지에서 테스트
- [ ] 모든 variants 테스트
- [ ] 모바일/데스크톱 반응형 확인
- [ ] 다크모드 호환성 확인

### Molecules 수정 전
- [ ] 사용하는 Organisms 확인
- [ ] 영향받는 페이지 목록 작성
- [ ] 최소 3개 페이지에서 테스트
- [ ] Props 변경 시 하위 호환성 유지

### Organisms 수정 전
- [ ] 사용하는 Templates 확인
- [ ] 영향받는 페이지 목록 작성
- [ ] 최소 2개 페이지에서 테스트
- [ ] 레이아웃 변경 시 모든 사용처 확인

### Templates 수정 전
- [ ] 사용하는 페이지 목록 작성
- [ ] 모든 사용 페이지에서 테스트
- [ ] 페이지 구조 변경 시 영향도 분석

## 안전한 수정 방법

### 1. Variant 추가 (권장)
```tsx
// ❌ 기존 코드 변경
<Button>클릭</Button> // 이 동작을 변경하면 모든 버튼 영향

// ✅ 새 variant 추가
<Button variant="new-style">클릭</Button> // 새 스타일만 적용
```

### 2. Optional Props 추가 (권장)
```tsx
// ❌ Required props 추가
interface ButtonProps {
  onClick: () => void;
  newProp: string; // 모든 사용처에서 에러
}

// ✅ Optional props 추가
interface ButtonProps {
  onClick: () => void;
  newProp?: string; // 기존 코드는 영향 없음
}
```

### 3. 하위 호환성 유지 (권장)
```tsx
// ❌ Props 이름 변경
interface ButtonProps {
  text: string; // 이전: children
}

// ✅ 하위 호환성 유지
interface ButtonProps {
  children: ReactNode;
  text?: string; // text도 지원 (deprecated)
}
```

## 컴포넌트 삭제 전 확인사항

컴포넌트를 삭제하기 전에 다음을 확인하세요:

1. **사용처 검색**
   ```bash
   # VSCode에서 Ctrl+Shift+F
   import { ComponentName } from
   ```

2. **의존성 확인**
   - 다른 컴포넌트에서 import하는지 확인
   - 상위 컴포넌트에서 사용하는지 확인

3. **대체 방안 마련**
   - 새 컴포넌트로 교체 계획
   - 마이그레이션 가이드 작성

## 버전 관리

컴포넌트를 major 변경할 때는 버전을 관리하세요:

```
/components/organisms/DataTable.tsx (v1 - current)
/components/organisms/DataTableV2.tsx (v2 - new)
```

점진적으로 마이그레이션한 후 v1을 제거합니다.
