# 컴포넌트 통합 실행 계획

> **작성일**: 2025년 10월 24일  
> **목적**: 중복 컴포넌트 통합 및 아토믹 디자인 시스템 적용

---

## 📋 통합 대상 분석

### 1. BOM 관리 (3개 → 1개로 통합)

| 파일명 | 상태 | 특징 | 결정 |
|--------|------|------|------|
| BOMManagement.tsx | 기본 | 기본 기능만 구현 | ❌ 삭제 예정 |
| BOMManagementEnhanced.tsx | 개선 | 트리 구조, 고급 기능 | ✅ **채택** |
| BOMManagementPage.tsx | 페이지 | 기준정보 메뉴용 | ❌ 삭제 예정 |

**통합 후**: `BOMManagement.tsx` (Enhanced 내용으로 교체)

**작업 항목**:
- [ ] BOMManagementEnhanced를 BOMManagement로 이름 변경
- [ ] PageLayout + PageHeader 적용
- [ ] App.tsx에서 import 경로 수정
- [ ] 기존 BOMManagement.tsx, BOMManagementPage.tsx 삭제

---

### 2. Quote 관리 (3개 → 1개로 통합)

| 파일명 | 상태 | 특징 | 결정 |
|--------|------|------|------|
| QuoteManagement.tsx | 개선 | 고급 기능 | 🔄 통합 후 유지 |
| QuoteManagement3.tsx | 통합 | List + Write 컨테이너 | ❌ 삭제 예정 |
| QuoteManagement3List.tsx | 목록 | 견적 목록 화면 | ✅ 통합 |
| QuoteManagement3Write.tsx | 작성 | 견적 작성 화면 | ✅ 통합 |
| QuoteSimulation.tsx | 계산 | 견적 산출 기능 | 🔄 탭으로 통합 |

**통합 후**: `QuoteManagement.tsx` (탭 구조)
- 탭 1: 견적 목록 (QuoteManagement3List 내용)
- 탭 2: 견적 작성 (QuoteManagement3Write 내용)
- 탭 3: 견적 시뮬레이션 (QuoteSimulation 내용)

**작업 항목**:
- [ ] TabbedPageTemplate 사용하여 통합
- [ ] QuoteManagement.tsx에 3개 탭 구현
- [ ] App.tsx 메뉴 구조 단순화
- [ ] 기존 파일들 삭제

---

### 3. Item 관리 (5개 → 1개로 통합)

| 파일명 | 상태 | 특징 | 결정 |
|--------|------|------|------|
| ItemManagement.tsx | ✅ 완료 | PageLayout 적용 완료 | ✅ **유지** |
| ItemManagementPage.tsx | 중복 | 동일 기능 | ❌ 삭제 예정 |
| ItemManagementForm.tsx | 폼 | 작성 폼만 | ❌ 삭제 예정 |
| ItemManagementList.tsx | 목록 | 목록만 | ❌ 삭제 예정 |
| ItemRegistration.tsx | 등록 | 등록만 | ❌ 삭제 예정 |
| ProductsManagement.tsx | 유사 | 품목 관리 (생산) | 🔄 확인 후 통합 |
| ProductsRegistration.tsx | 유사 | 품목 등록 (생산) | 🔄 확인 후 통합 |

**통합 후**: `ItemManagement.tsx` (현재 버전 유지)

**작업 항목**:
- [ ] ItemManagement.tsx 기능 완성도 확인
- [ ] ProductsManagement와 차이점 분석
- [ ] 필요 시 ProductsManagement 기능 통합
- [ ] 불필요한 파일 삭제
- [ ] App.tsx import 정리

---

### 4. Inspection 관리 (2개 → 1개로 통합)

| 카테고리 | 파일명 | 결정 |
|---------|--------|------|
| 수입검사 | IncomingInspection.tsx | ❌ 삭제 |
| 수입검사 | IncomingInspectionManagement.tsx | ✅ **유지** |
| 검사기준 | InspectionStandardManagement.tsx | ❌ 삭제 |
| 검사기준 | InspectionStandardManagementPage.tsx | ✅ **유지** |
| 검사기준 | InspectionStandardRegistration.tsx | 🔄 통합 |

**작업 항목**:
- [ ] IncomingInspectionManagement.tsx에 PageLayout 적용
- [ ] InspectionStandardManagementPage.tsx에 PageLayout 적용
- [ ] 불필요한 파일 삭제

---

### 5. Code/Lot 관리 (각 2개 → 1개로 통합)

| 카테고리 | 파일명 | 결정 |
|---------|--------|------|
| 코드관리 | CodeManagement.tsx | ❌ 삭제 |
| 코드관리 | CodeManagementPage.tsx | ✅ **유지** |
| 로트관리 | LotManagement.tsx | ❌ 삭제 |
| 로트관리 | LotManagementPage.tsx | ✅ **유지** |

**작업 항목**:
- [ ] CodeManagementPage.tsx에 PageLayout 적용
- [ ] LotManagementPage.tsx에 PageLayout 적용
- [ ] 기존 파일 삭제

---

### 6. Dashboard 페이지 (패턴 통일)

| 파일명 | 현재 패턴 | 변경 계획 |
|--------|----------|----------|
| SalesDashboard.tsx | 커스텀 | DashboardTemplate 적용 |
| ProductionDashboard.tsx | 커스텀 | DashboardTemplate 적용 |
| QualityDashboard.tsx | 커스텀 | DashboardTemplate 적용 |
| MaterialDashboard.tsx | 커스텀 | DashboardTemplate 적용 |
| PurchaseDashboard.tsx | 커스텀 | DashboardTemplate 적용 |
| AccountingDashboard.tsx | 커스텀 | DashboardTemplate 적용 |
| MasterDataDashboard.tsx | 커스텀 | DashboardTemplate 적용 |
| SystemAdminDashboard.tsx | 커스텀 | DashboardTemplate 적용 |

**작업 항목**:
- [ ] DashboardTemplate 컴포넌트 생성
- [ ] 각 Dashboard를 Template 기반으로 리팩토링

---

### 7. 기타 중복 파일

| 파일명 | 상태 | 결정 |
|--------|------|------|
| Dashboard.tsx | 메인 대시보드 | ✅ 유지 |
| Dashboard-fixed.tsx | 수정 버전? | ❓ 확인 후 결정 |
| SalesManagement.tsx | 영업 관리 | ✅ 유지 |
| SalesManagement-clean.tsx | 정리 버전? | ❓ 확인 후 결정 |
| ModelManagement.tsx | 모델 관리 | ✅ 유지 |
| ModelRegistration.tsx | 모델 등록 | 🔄 통합 검토 |
| MaterialManagement.tsx | 자재 관리 | ✅ 유지 |
| MaterialRegistration.tsx | 자재 등록 | 🔄 통합 검토 |

---

## 🎯 우선순위 작업 계획

### Phase 1: 즉시 통합 가능 (Week 1)

**1.1 Item 관리 통합**
```bash
# 삭제할 파일
- ItemManagementPage.tsx
- ItemManagementForm.tsx
- ItemManagementList.tsx
- ItemRegistration.tsx

# 유지할 파일
✅ ItemManagement.tsx (이미 PageLayout 적용 완료)
```

**1.2 Code/Lot 통합**
```bash
# 삭제할 파일
- CodeManagement.tsx
- LotManagement.tsx

# 유지하고 개선할 파일
- CodeManagementPage.tsx (PageLayout 적용)
- LotManagementPage.tsx (PageLayout 적용)
```

**1.3 Inspection 통합**
```bash
# 삭제할 파일
- IncomingInspection.tsx
- InspectionStandardManagement.tsx

# 유지하고 개선할 파일
- IncomingInspectionManagement.tsx (PageLayout 적용)
- InspectionStandardManagementPage.tsx (PageLayout 적용)
```

### Phase 2: BOM 관리 통합 (Week 2)

**작업 순서**:
1. BOMManagementEnhanced.tsx 검토 및 개선
2. PageLayout + PageHeader 적용
3. ListPageTemplate 적용 검토
4. App.tsx에서 import 경로 변경
5. BOMManagement.tsx를 BOMManagementEnhanced 내용으로 교체
6. 기존 파일 삭제

### Phase 3: Quote 관리 통합 (Week 2-3)

**작업 순서**:
1. TabbedPageTemplate 생성
2. QuoteManagement.tsx를 탭 구조로 재구성
   - 탭 1: 견적 목록 (QuoteManagement3List 기반)
   - 탭 2: 견적 작성 (QuoteManagement3Write 기반)
   - 탭 3: 견적 시뮬레이션 (QuoteSimulation 기반)
3. App.tsx 메뉴 정리
4. 기존 파일 삭제

### Phase 4: Dashboard 패턴 통일 (Week 3-4)

**작업 순서**:
1. DashboardTemplate 컴포넌트 완성
2. SalesDashboard → Template 적용
3. ProductionDashboard → Template 적용
4. QualityDashboard → Template 적용
5. 나머지 Dashboard → Template 적용

---

## 📁 삭제 예정 파일 목록

### 즉시 삭제 가능

```
components/
├── ItemManagementPage.tsx          ❌
├── ItemManagementForm.tsx          ❌
├── ItemManagementList.tsx          ❌
├── ItemRegistration.tsx            ❌
├── CodeManagement.tsx              ❌
├── LotManagement.tsx               ❌
├── IncomingInspection.tsx          ❌
└── InspectionStandardManagement.tsx ❌
```

### 검토 후 삭제

```
components/
├── Dashboard-fixed.tsx             ❓ Dashboard.tsx와 비교 후
├── SalesManagement-clean.tsx       ❓ SalesManagement.tsx와 비교 후
├── BOMManagement.tsx               ❌ Enhanced 버전으로 교체 후
├── BOMManagementPage.tsx           ❌ Enhanced 버전으로 교체 후
├── QuoteManagement3.tsx            ❌ 통합 후
├── QuoteManagement3List.tsx        ❌ 통합 후
├── QuoteManagement3Write.tsx       ❌ 통합 후
├── QuoteSimulation.tsx             ❌ 통합 후
├── ProductsManagement.tsx          ❓ ItemManagement와 통합 검토
└── ProductsRegistration.tsx        ❓ ItemManagement와 통합 검토
```

---

## 🔧 App.tsx 수정 계획

### 현재 Import 정리

**삭제할 Import**:
```typescript
// 삭제 예정
import { BOMManagementPage } from "./components/BOMManagementPage";
import { QuoteManagement3 } from "./components/QuoteManagement3";
import { ItemManagementPage } from "./components/ItemManagementPage";
import { LotManagement } from "./components/LotManagement";
import { CodeManagement } from "./components/CodeManagement";
```

**유지할 Import**:
```typescript
// 유지 (개선 후)
import { BOMManagement } from "./components/BOMManagement"; // Enhanced 버전
import { QuoteManagement } from "./components/QuoteManagement"; // 통합 버전
import { ItemManagement } from "./components/ItemManagement"; // ✅ 이미 완료
import { LotManagementPage } from "./components/LotManagementPage";
import { CodeManagementPage } from "./components/CodeManagementPage";
```

### 메뉴 구조 단순화

**Before (복잡)**:
```typescript
{ id: \"quote-management\", label: \"견적관리 (개선)\", ... },
{ id: \"quote-simulation\", label: \"견적관리 (기존)\", ... },
{ id: \"quote-management3\", label: \"견적관리3\", ... },
```

**After (단순)**:
```typescript
{ id: \"quote-management\", label: \"견적관리\", ... },
// 내부에서 탭으로 구분: 목록 / 작성 / 시뮬레이션
```

---

## 📝 체크리스트

### Phase 1 체크리스트

**Item 관리 통합**:
- [ ] ItemManagement.tsx 기능 확인
- [ ] ProductsManagement.tsx와 차이점 분석
- [ ] 통합 결정
- [ ] App.tsx import 정리
- [ ] 불필요한 파일 삭제 (4개)
- [ ] 테스트

**Code/Lot 통합**:
- [ ] CodeManagementPage.tsx에 PageLayout 적용
- [ ] LotManagementPage.tsx에 PageLayout 적용
- [ ] App.tsx import 변경
- [ ] 기존 파일 삭제 (2개)
- [ ] 테스트

**Inspection 통합**:
- [ ] IncomingInspectionManagement.tsx에 PageLayout 적용
- [ ] InspectionStandardManagementPage.tsx에 PageLayout 적용
- [ ] App.tsx import 변경
- [ ] 기존 파일 삭제 (2개)
- [ ] 테스트

### Phase 2 체크리스트

**BOM 관리 통합**:
- [ ] BOMManagementEnhanced.tsx 기능 검토
- [ ] PageLayout + PageHeader 적용
- [ ] BOMManagement.tsx로 파일명 변경
- [ ] App.tsx import 변경
- [ ] 기존 파일 삭제 (2개)
- [ ] 테스트

### Phase 3 체크리스트

**Quote 관리 통합**:
- [ ] TabbedPageTemplate 생성
- [ ] QuoteManagement.tsx 재구성
- [ ] 탭 1: 견적 목록 구현
- [ ] 탭 2: 견적 작성 구현
- [ ] 탭 3: 시뮬레이션 구현
- [ ] App.tsx 메뉴 단순화
- [ ] 기존 파일 삭제 (4개)
- [ ] 테스트

### Phase 4 체크리스트

**Dashboard 패턴 통일**:
- [ ] DashboardTemplate 완성
- [ ] SalesDashboard 리팩토링
- [ ] ProductionDashboard 리팩토링
- [ ] QualityDashboard 리팩토링
- [ ] MaterialDashboard 리팩토링
- [ ] PurchaseDashboard 리팩토링
- [ ] AccountingDashboard 리팩토링
- [ ] MasterDataDashboard 리팩토링
- [ ] SystemAdminDashboard 리팩토링
- [ ] 테스트

---

## 📊 통합 효과 예상

### 파일 수 감소

| 카테고리 | Before | After | 감소 |
|---------|--------|-------|------|
| BOM 관리 | 3 | 1 | -2 |
| Quote 관리 | 4 | 1 | -3 |
| Item 관리 | 7 | 1 | -6 |
| Inspection | 5 | 3 | -2 |
| Code/Lot | 4 | 2 | -2 |
| **총계** | **23** | **8** | **-15 (65% 감소)** |

### 코드 유지보수성 향상

- **중복 코드 제거**: 동일 기능의 여러 구현 제거
- **일관성 향상**: 템플릿 사용으로 UI/UX 통일
- **개발 속도 향상**: 새 페이지 개발 시 템플릿 재사용
- **버그 감소**: 공통 컴포넌트 수정 시 전체 페이지 자동 반영

---

## 🚨 주의사항

### 삭제 전 확인 사항

1. **의존성 확인**
   - App.tsx에서 해당 컴포넌트 import 제거 확인
   - 다른 컴포넌트에서 해당 컴포넌트 사용 여부 검색

2. **기능 누락 방지**
   - 삭제할 파일의 고유 기능 확인
   - 통합될 파일에 해당 기능 존재 확인

3. **Git 관리**
   - 삭제 전 브랜치 생성
   - 단계별 커밋
   - 롤백 가능하도록 준비

### 테스트 필수 항목

- [ ] 페이지 로드 정상 작동
- [ ] 데이터 조회 정상 작동
- [ ] 등록/수정/삭제 기능 정상 작동
- [ ] 반응형 디자인 확인 (모바일/데스크톱)
- [ ] 검색 기능 정상 작동
- [ ] 필터 기능 정상 작동

---

## 📚 참고 문서

- [ATOMIC_DESIGN_SYSTEM.md](/ATOMIC_DESIGN_SYSTEM.md) - 아토믹 디자인 시스템 전체 가이드
- [COMMON_COMPONENTS_GUIDE.md](/COMMON_COMPONENTS_GUIDE.md) - 공통 컴포넌트 가이드
- [TITLE_STRUCTURE_STANDARDIZATION.md](/TITLE_STRUCTURE_STANDARDIZATION.md) - 타이틀 구조 표준화

---

**문서 버전**: 1.0.0  
**최종 수정일**: 2025년 10월 24일  
**작성자**: SAM MES 개발팀
