# 프로젝트 공통화 현황 분석

## 1. 핵심 지표 요약

| 구분 | 적용 현황 | 비고 |
|------|----------|------|
| **IntegratedDetailTemplate** | 96개 파일 (228회 사용) | 상세/수정/등록 페이지 통합 |
| **IntegratedListTemplateV2** | 50개 파일 (60회 사용) | 목록 페이지 통합 |
| **DetailConfig 파일** | 39개 생성 | 설정 기반 페이지 구성 |
| **레거시 패턴 (PageLayout 직접 사용)** | ~40-50개 파일 | 마이그레이션 대상 |

---

## 2. 공통화 달성률

### 2.1 상세 페이지 (Detail)
```
총 Detail 컴포넌트: ~105개
IntegratedDetailTemplate 적용: ~65개
적용률: 약 62%
```

### 2.2 목록 페이지 (List)
```
총 List 컴포넌트: ~61개
IntegratedListTemplateV2 적용: ~50개
적용률: 약 82%
```

### 2.3 폼 컴포넌트 (Form)
```
총 Form 컴포넌트: ~72개
공통 템플릿 미적용 (개별 구현)
적용률: 0%
```

---

## 3. 잘 공통화된 영역 ✅

### 3.1 템플릿 시스템
| 템플릿 | 용도 | 적용 현황 |
|--------|------|----------|
| IntegratedDetailTemplate | 상세/수정/등록 | 96개 파일 |
| IntegratedListTemplateV2 | 목록 페이지 | 50개 파일 |
| UniversalListPage | 범용 목록 | 7개 파일 |

### 3.2 UI 컴포넌트 (Radix UI 기반)
- **AlertDialog**: 65개 파일에서 일관되게 사용
- **Dialog**: 142개 파일에서 사용
- **Toast (Sonner)**: 133개 파일에서 일관되게 사용
- **Pagination**: 54개 파일에서 통합 사용

### 3.3 데이터 테이블
- **DataTable**: 공통 컴포넌트로 추상화됨
- **IntegratedListTemplateV2에 통합**: 자동 페이지네이션, 필터링

---

## 4. 추가 공통화 기회 🔧

### 4.1 우선순위 높음 (High Priority)

#### 📋 Form 템플릿 (IntegratedFormTemplate)
**현황**: 72개 Form 컴포넌트가 개별적으로 구현됨
**제안**:
```typescript
// 제안: IntegratedFormTemplate
<IntegratedFormTemplate
  config={formConfig}
  mode="create" | "edit"
  initialData={data}
  onSubmit={handleSubmit}
  onCancel={handleCancel}
  renderFields={() => <CustomFields />}
/>
```
**효과**:
- 폼 레이아웃 일관성
- 버튼 영역 통합 (저장/취소/삭제)
- 유효성 검사 패턴 통합

#### 📝 레거시 페이지 마이그레이션
**현황**: ~40-50개 파일이 PageLayout/PageHeader 직접 사용
**대상 파일** (샘플):
- `SubscriptionClient.tsx`
- `SubscriptionManagement.tsx`
- `ComprehensiveAnalysis/index.tsx`
- `DailyReport/index.tsx`
- `ReceivablesStatus/index.tsx`
- `FAQManagement/FAQList.tsx`
- `DepartmentManagement/index.tsx`
- 등등

---

### 4.2 우선순위 중간 (Medium Priority)

#### 🗑️ 삭제 확인 다이얼로그 통합
**현황**: 각 컴포넌트에서 AlertDialog 반복 구현
**제안**:
```typescript
// 제안: useDeleteConfirm hook
const { openDeleteConfirm, DeleteConfirmDialog } = useDeleteConfirm({
  title: '삭제 확인',
  description: '정말 삭제하시겠습니까?',
  onConfirm: handleDelete,
});

// 또는 공통 컴포넌트
<DeleteConfirmDialog
  isOpen={isOpen}
  itemName={itemName}
  onConfirm={handleDelete}
  onCancel={() => setIsOpen(false)}
/>
```

#### 📁 파일 업로드/다운로드 패턴 통합
**현황**: 여러 컴포넌트에서 파일 처리 로직 중복
**제안**:
```typescript
// 제안: useFileUpload hook
const { uploadFile, downloadFile, FileDropzone } = useFileUpload({
  accept: ['image/*', '.pdf'],
  maxSize: 10 * 1024 * 1024,
});
```

#### 🔄 로딩 상태 표시 통합
**현황**: 43개 파일에서 다양한 로딩 패턴 사용
**제안**:
- `LoadingOverlay` 컴포넌트 확대 적용
- `Skeleton` 패턴 표준화

---

### 4.3 우선순위 낮음 (Low Priority)

#### 📊 대시보드 카드 컴포넌트
**현황**: CEO 대시보드, 생산 대시보드 등에서 유사 패턴
**제안**: `DashboardCard`, `StatCard` 공통 컴포넌트

#### 🔍 검색/필터 패턴
**현황**: IntegratedListTemplateV2에 이미 통합됨
**추가**: 독립 검색 컴포넌트 표준화

---

## 5. 레거시 파일 정리 대상

### 5.1 _legacy 폴더 (삭제 검토)
```
src/components/hr/CardManagement/_legacy/
  - CardDetail.tsx
  - CardForm.tsx

src/components/settings/AccountManagement/_legacy/
  - AccountDetail.tsx
```

### 5.2 V1/V2 중복 파일 (통합 검토)
- `LaborDetailClient.tsx` vs `LaborDetailClientV2.tsx`
- `PricingDetailClient.tsx` vs `PricingDetailClientV2.tsx`
- `DepositDetail.tsx` vs `DepositDetailClientV2.tsx`
- `WithdrawalDetail.tsx` vs `WithdrawalDetailClientV2.tsx`

---

## 6. 권장 액션 플랜

### Phase 7: 레거시 페이지 마이그레이션
| 순서 | 대상 | 예상 작업량 |
|------|------|------------|
| 1 | 설정 관리 페이지 (8개) | 중간 |
| 2 | 회계 관리 페이지 (5개) | 중간 |
| 3 | 인사 관리 페이지 (5개) | 중간 |
| 4 | 보고서/분석 페이지 (3개) | 낮음 |

### Phase 8: Form 템플릿 개발
1. IntegratedFormTemplate 설계
2. 파일럿 적용 (2-3개 Form)
3. 점진적 마이그레이션

### Phase 9: 유틸리티 Hook 개발
1. useDeleteConfirm
2. useFileUpload
3. useFormState (공통 폼 상태 관리)

### Phase 10: 레거시 정리
1. _legacy 폴더 삭제
2. V1/V2 중복 파일 통합
3. 미사용 컴포넌트 정리

---

## 7. 결론

### 공통화 성과
- **상세 페이지**: 62% 공통화 달성 (Phase 6 완료)
- **목록 페이지**: 82% 공통화 달성
- **UI 컴포넌트**: Radix UI 기반 일관성 확보
- **토스트/알림**: Sonner로 완전 통합

### 남은 과제
- **Form 템플릿**: 72개 폼 컴포넌트 공통화 필요
- **레거시 페이지**: ~40-50개 마이그레이션 필요
- **코드 정리**: _legacy, V1/V2 중복 파일 정리

### 예상 효과 (추가 공통화 시)
- 코드 중복 30% 추가 감소
- 신규 페이지 개발 시간 50% 단축
- 유지보수성 대폭 향상
