# 공통 컴포넌트 추출 후보 분석

> 프로젝트 전반의 반복 패턴 분석 및 공통화 후보 목록 (2025-12-23)

## 현황 요약

| 구분 | 수치 |
|-----|------|
| 전체 컴포넌트 파일 | 317개 |
| Dialog/AlertDialog 사용 파일 | 102개 |
| 공통 StandardDialog 사용 | 1개 (quote-management만) |
| 예상 코드 절감 | ~2,370줄 |

---

## 기존 공통 컴포넌트 (사용률 저조)

| 컴포넌트 | 위치 | 사용 현황 |
|---------|------|----------|
| `StandardDialog` | `molecules/StandardDialog.tsx` | 1곳 사용 |
| `ConfirmDialog` | `molecules/StandardDialog.tsx` | 미사용 |
| `FormDialog` | `molecules/StandardDialog.tsx` | 미사용 |

---

## 공통화 우선순위

### 🔴 긴급 (높은 중복률)

| 컴포넌트 | 현재 중복 | 예상 절감 | 설명 |
|---------|----------|----------|------|
| **DeleteConfirmDialog** | 54+ 파일 | ~810줄 | AlertDialog 기반 삭제 확인 |
| **ActionButtons** | 35+ 파일 | ~700줄 | Edit/Delete/Add 버튼 세트 |
| **TableActionCell** | 30+ 파일 | ~360줄 | 행 선택 시 액션 버튼 |
| **FormDialog** | 20+ 파일 | ~500줄 | Dialog + Form 조합 |

#### 세부 파일 목록 (DeleteConfirmDialog)
```
- ItemListClient.tsx
- VendorManagement/index.tsx
- SalesManagement/index.tsx
- AccountManagement/index.tsx
- BoardManagement/index.tsx
- PurchaseManagement/index.tsx
- DepositManagement/index.tsx
- WithdrawalManagement/index.tsx
- BillManagement/index.tsx
- EmployeeManagement/index.tsx
- DepartmentManagement/index.tsx
- VacationManagement/index.tsx
- RankManagement/index.tsx
- TitleManagement/index.tsx
- PermissionManagement/index.tsx
- CardManagement/index.tsx
- PopupManagement/PopupList.tsx
- ... (54개+)
```

#### 세부 파일 목록 (Dialog + Form 조합)
```
- RankDialog.tsx
- TitleDialog.tsx
- PermissionDialog.tsx
- DepartmentDialog.tsx
- EmployeeDialog.tsx
- VacationRegisterDialog.tsx
- VacationRequestDialog.tsx
- VacationGrantDialog.tsx
- VacationAdjustDialog.tsx
- VacationTypeSettingsDialog.tsx
- UserInviteDialog.tsx
- CSVUploadDialog.tsx
- SalaryDetailDialog.tsx
- AttendanceInfoDialog.tsx
- ReasonInfoDialog.tsx
- FieldSettingsDialog.tsx
- ... (20개+)
```

---

### 🟡 중간 우선순위

| 컴포넌트 | 현재 중복 | 설명 |
|---------|----------|------|
| **TableWrapper** | 40+ 파일 | 컬럼 정의 기반 자동 생성 |
| **EmptyStateTemplate** | 12+ 파일 | 빈 상태 통일 |
| **StatCard** | 5+ 파일 | 통계 카드 (아이콘+값+라벨) |
| **DetailCard** | 20+ 파일 | 상세보기 카드 래퍼 |
| **SearchFilterBar** | 40+ 파일 | 검색 + 필터 조합 |

---

### 🟢 낮음 (이미 공통화됨, 강화 필요)

| 컴포넌트 | 상태 | 개선 필요사항 |
|---------|------|-------------|
| **LoadingSpinner** | ✅ 존재 | 테이블용/페이지용 변형 추가 |
| **SearchFilter** | ✅ 존재 | 날짜범위, 다중선택 필터 |
| **Pagination** | ✅ 존재 | 현재 잘 작동 중 |
| **IntegratedListTemplateV2** | ✅ 존재 | 잘 사용 중 |

---

## 패턴별 상세 분석

### 1. 다이얼로그/모달 패턴

| 패턴 | 사용 빈도 | 파일 수 | 우선순위 |
|------|---------|-------|--------|
| 삭제 확인 AlertDialog | 매우 높음 | 54+ | 🔴 높음 |
| 정보 입력 Dialog | 높음 | 20+ | 🔴 높음 |
| 상세 조회 Modal | 높음 | 15+ | 🟡 중간 |
| CSV/파일 업로드 Dialog | 중간 | 5+ | 🟡 중간 |

### 2. 테이블 관련 패턴

| 패턴 | 사용 빈도 | 파일 수 | 우선순위 |
|------|---------|-------|--------|
| 테이블 액션 버튼 | 매우 높음 | 35+ | 🔴 높음 |
| 체크박스 행 선택 | 매우 높음 | 40+ | 🔴 높음 |
| 페이지네이션 | 높음 | 39+ | ✅ 공통화됨 |
| 테이블 헤더/행 구조 | 높음 | 40+ | 🟡 중간 |

### 3. 폼 관련 패턴

| 패턴 | 사용 빈도 | 파일 수 | 우선순위 |
|------|---------|-------|--------|
| 검색 폼 | 높음 | 40+ | ✅ 공통화됨 |
| 동적 폼 필드 | 중간 | 8+ | ✅ 공통화됨 |
| 폼 상태 관리 | 중간 | 15+ | 🟡 중간 |
| 폼 유효성 검사 | 중간 | 10+ | 🟡 중간 |

### 4. 상태 표시 패턴

| 패턴 | 사용 빈도 | 파일 수 | 우선순위 |
|------|---------|-------|--------|
| 로딩 스피너 | 높음 | 5 | ✅ 공통화됨 |
| 빈 상태 | 높음 | 12+ | 🟡 중간 |
| 에러 메시지 | 중간 | 10+ | 🟡 중간 |
| 배지/상태 표시 | 높음 | 30+ | 🟡 중간 |

### 5. 액션 버튼 그룹 패턴

| 패턴 | 사용 빈도 | 파일 수 | 우선순위 |
|------|---------|-------|--------|
| CRUD 버튼 세트 | 매우 높음 | 35+ | 🔴 높음 |
| Form 액션 버튼 | 높음 | 20+ | 🔴 높음 |
| 행 액션 버튼 | 높음 | 30+ | 🔴 높음 |

---

## 추천 구현 순서

### Phase 1: 다이얼로그 공통화
1. `DeleteConfirmDialog` - 삭제 확인용 (54+ 파일 영향)
2. 기존 `ConfirmDialog` 활용 또는 강화

### Phase 2: 액션 버튼 공통화
3. `ActionButtonGroup` - CRUD 버튼 세트
4. `TableActionCell` - 테이블 행 액션 버튼

### Phase 3: 폼 다이얼로그 공통화
5. 기존 `FormDialog` 활용 확대
6. 도메인별 Dialog들을 FormDialog 기반으로 리팩토링

### Phase 4: 기타
7. `EmptyStateTemplate` 통일
8. `StatCard` 통합

---

## 기대 효과

| 항목 | 효과 |
|-----|------|
| 코드 절감 | ~2,370줄 (전체 대비 5-7%) |
| 유지보수성 | 버튼 스타일/동작 통일, 버그 감소 |
| 개발 속도 | 새 페이지 작성 시 +30% 빠름 |
| UI 일관성 | 전체 앱에서 동일한 UX |

---

## 작업 시점 권장

> ⚠️ **권장**: 프로젝트 기능 구현이 어느 정도 마무리된 시점에 진행
> - 현재 새 페이지가 계속 추가되는 중
> - 리팩토링 후 다시 중복 코드가 생길 수 있음
> - MVP 완료 후 일괄 작업이 효율적

---

## 참고: 공통 컴포넌트 경로

```
src/components/
├── ui/                    # 기본 UI 컴포넌트 (shadcn)
│   ├── dialog.tsx
│   ├── alert-dialog.tsx
│   ├── button.tsx
│   └── ...
├── molecules/             # 조합 컴포넌트
│   └── StandardDialog.tsx # ⭐ 기존 공통 다이얼로그 (미사용)
├── templates/             # 페이지 템플릿
│   └── IntegratedListTemplateV2.tsx
└── [domain]/              # 도메인별 컴포넌트
    └── *Dialog.tsx        # 개별 다이얼로그들 (중복)
```

---

## 변경 이력

| 날짜 | 변경 내용 |
|-----|----------|
| 2025-12-23 | 최초 작성 - 공통화 후보 분석 |