# IntegratedDetailTemplate 마이그레이션 체크리스트

> 최종 수정: 2026-01-21
> 브랜치: `feature/universal-detail-component`

---

## 📊 전체 진행 현황

| 단계 | 내용 | 상태 | 대상 |
|------|------|------|------|
| **Phase 1-5** | V2 URL 패턴 통합 | ✅ 완료 | 37개 |
| **Phase 6** | 폼 템플릿 공통화 | ✅ 완료 | 41개 |

### 통계 요약

| 구분 | 개수 |
|------|------|
| ✅ V2 URL 패턴 완료 | 37개 |
| ✅ IntegratedDetailTemplate 적용 완료 | 41개 |
| ❌ 제외 (특수 레이아웃) | 10개 |
| ⚪ 불필요 (View only 등) | 8개 |

---

## 📌 V2 URL 패턴이란?

```
기존: /[id] (조회) + /[id]/edit (수정) → 별도 페이지
V2:  /[id]?mode=view (조회) + /[id]?mode=edit (수정) → 단일 페이지
```

**핵심**: `searchParams.get('mode')` 로 view/edit 분기

---

## 🎯 마이그레이션 목표

- **타이틀/버튼 영역** (목록, 상세, 취소, 수정) 공통화
- **반응형 입력 필드** 통합
- **특수 기능** (테이블, 모달, 문서 미리보기 등)은 `renderView`/`renderForm`으로 유지
- **한 파일 수정으로 전체 페이지 일괄 적용** 가능

---

## 🔧 마이그레이션 패턴 가이드

### Pattern 1: Config 기반 템플릿

```typescript
// 1. config 파일 생성
export const xxxConfig: DetailConfig = {
  title: '페이지 타이틀',
  description: '설명',
  icon: IconComponent,
  basePath: '/path/to/list',
  fields: [], // renderView/renderForm 사용 시 빈 배열
  gridColumns: 2,
  actions: {
    showBack: true,
    showDelete: true,
    showEdit: true,
    showSave: true, // false로 설정하면 기본 저장 버튼 숨김
    submitLabel: '저장',
    cancelLabel: '취소',
  },
};

// 2. 컴포넌트에서 IntegratedDetailTemplate 사용
<IntegratedDetailTemplate
  config={dynamicConfig}
  mode={mode}
  initialData={data}
  itemId={id}
  isLoading={isLoading}
  onSubmit={handleSubmit}  // Promise<{ success: boolean; error?: string }>
  onDelete={handleDelete}  // Promise<{ success: boolean; error?: string }>
  headerActions={customHeaderActions}  // 커스텀 버튼
  renderView={() => renderContent()}
  renderForm={() => renderContent()}
/>
```

### Pattern 2: View/Edit 컴포넌트 분리

```tsx
// View와 Edit가 완전히 다른 구현인 경우
const mode = searchParams.get('mode') === 'edit' ? 'edit' : 'view';

if (mode === 'edit') {
  return <ComponentDetailEdit id={id} />;
}
return <ComponentDetailView id={id} />;
```

### Pattern 3: 커스텀 버튼이 필요한 경우

```tsx
// config에서 showSave: false 설정
// headerActions prop으로 커스텀 버튼 전달
<IntegratedDetailTemplate
  config={{ ...config, actions: { ...config.actions, showSave: false } }}
  headerActions={
    <>
      <Button onClick={handlePreview}>미리보기</Button>
      <Button onClick={handleSubmit}>상신</Button>
    </>
  }
/>
```

---

## ✅ Phase 6 적용 완료 (41개)

| No | 카테고리 | 컴포넌트 | 파일 | 특이사항 |
|----|---------|---------|------|----------|
| 1 | 건설 | 협력업체 | PartnerForm.tsx | - |
| 2 | 건설 | 시공관리 | ConstructionDetailClient.tsx | - |
| 3 | 건설 | 기성관리 | ProgressBillingDetailForm.tsx | - |
| 4 | 건설 | 발주관리 | OrderDetailForm.tsx | - |
| 5 | 건설 | 계약관리 | ContractDetailForm.tsx | - |
| 6 | 건설 | 인수인계보고서 | HandoverReportDetailForm.tsx | - |
| 7 | 건설 | 견적관리 | EstimateDetailForm.tsx | - |
| 8 | 건설 | 현장브리핑 | SiteBriefingForm.tsx | - |
| 9 | 건설 | 이슈관리 | IssueDetailForm.tsx | - |
| 10 | 건설 | 입찰관리 | BiddingDetailForm.tsx | - |
| 11 | 건설 | 구조검토 | StructureReviewDetailForm.tsx | view/edit/new 모드, 파일 드래그앤드롭 |
| 12 | 건설 | 현장관리 | SiteDetailForm.tsx | 다음 우편번호 API, 파일 드래그앤드롭 |
| 13 | 건설 | 품목관리 | ItemDetailClient.tsx | view/edit/new 모드, 동적 발주 항목 리스트 |
| 14 | 영업 | 견적관리(V2) | QuoteRegistrationV2.tsx | hideHeader prop, 자동견적/푸터바 유지 |
| 15 | 영업 | 고객관리(V2) | ClientDetailClientV2.tsx | - |
| 16 | 영업 | 수주관리 | OrderSalesDetailView/Edit.tsx | 문서 모달, 상태별 버튼, 확정/취소 다이얼로그 |
| 17 | 회계 | 청구관리 | BillDetail.tsx | - |
| 18 | 회계 | 매입관리 | PurchaseDetail.tsx | - |
| 19 | 회계 | 매출관리 | SalesDetail.tsx | - |
| 20 | 회계 | 거래처관리 | VendorDetail.tsx | - |
| 21 | 회계 | 입금관리(V2) | DepositDetailClientV2.tsx | - |
| 22 | 회계 | 출금관리(V2) | WithdrawalDetailClientV2.tsx | - |
| 23 | 회계 | 악성채권 | BadDebtDetail.tsx | 저장 확인 다이얼로그, 파일 업로드/다운로드 |
| 24 | 회계 | 거래처원장 | VendorLedgerDetail.tsx | 기간선택, PDF 다운로드, 판매/수금 테이블 |
| 25 | 생산 | 작업지시 | WorkOrderDetail.tsx | 상태변경버튼, 작업일지 모달 유지 |
| 26 | 품질 | 검수관리 | InspectionDetail.tsx | 성적서 버튼 |
| 27 | 출고 | 출하관리 | ShipmentDetail.tsx | 문서 미리보기 모달, 조건부 수정/삭제 |
| 28 | 자재 | 입고관리 | ReceivingDetail.tsx | 입고증/입고처리/성공 다이얼로그, 상태별 버튼 |
| 29 | 자재 | 재고현황 | StockStatusDetail.tsx | LOT별 상세 재고 테이블, FIFO 권장 메시지 |
| 30 | 기준정보 | 단가관리(V2) | PricingDetailClientV2.tsx | - |
| 31 | 기준정보 | 노무관리(V2) | LaborDetailClientV2.tsx | - |
| 32 | 설정 | 팝업관리(V2) | PopupDetailClientV2.tsx | - |
| 33 | 설정 | 계정관리 | accounts/[id]/page.tsx | - |
| 34 | 설정 | 공정관리 | process-management/[id]/page.tsx | - |
| 35 | 설정 | 게시판관리 | board-management/[id]/page.tsx | - |
| 36 | 설정 | 권한관리 | PermissionDetail.tsx | 인라인 수정, 메뉴별 권한 테이블, 자동 저장 |
| 37 | 인사 | 명함관리 | card-management/[id]/page.tsx | - |
| 38 | 인사 | 직원관리 | EmployeeDetail.tsx | 기본정보/인사정보/사용자정보 카드 |
| 39 | 고객센터 | 문의관리 | InquiryDetail.tsx | 댓글 CRUD, 작성자/상태별 버튼 표시 |
| 40 | 고객센터 | 이벤트관리 | EventDetail.tsx | view 모드만 |
| 41 | 고객센터 | 공지관리 | NoticeDetail.tsx | view 모드만, 이미지/첨부파일 |

---

## 📋 등록/수정 페이지 마이그레이션 (Phase 1-8)

### Phase 1 - 기안함
- [x] DocumentCreate (기안함 등록/수정)
  - 파일: `src/components/approval/DocumentCreate/index.tsx`
  - 특이사항: 커스텀 headerActions (미리보기, 삭제, 상신, 임시저장)

### Phase 2 - 생산관리
- [x] WorkOrderCreate/Edit (작업지시 등록/수정)
  - 파일: `src/components/production/WorkOrders/WorkOrderCreate.tsx`

### Phase 3 - 출고관리
- [x] ShipmentCreate/Edit (출하 등록/수정)
  - 파일: `src/components/outbound/ShipmentManagement/ShipmentCreate.tsx`

### Phase 4 - HR
- [x] EmployeeForm (사원 등록/수정/상세)
  - 파일: `src/components/hr/EmployeeManagement/EmployeeForm.tsx`
  - 특이사항: "항목 설정" 버튼, 복잡한 섹션 구조

### Phase 5 - 게시판
- [x] BoardForm (게시판 글쓰기/수정)
  - 파일: `src/components/board/BoardForm/index.tsx`

### Phase 6 - 고객센터
- [x] InquiryForm (문의 등록/수정)
  - 파일: `src/components/customer-center/InquiryManagement/InquiryForm.tsx`

### Phase 7 - 기준정보
- [x] ProcessForm (공정 등록/수정)
  - 파일: `src/components/process-management/ProcessForm.tsx`

### Phase 8 - 자재/품질
- [x] InspectionCreate - 자재 (수입검사 등록)
- [x] InspectionCreate - 품질 (품질검사 등록)

---

## ❌ 마이그레이션 제외 (특수 레이아웃)

| 페이지 | 경로 | 사유 |
|--------|------|------|
| CEO 대시보드 | - | 대시보드 (특수 레이아웃) |
| 생산 대시보드 | - | 대시보드 (특수 레이아웃) |
| 작업자 화면 | - | 특수 UI |
| 설정 페이지들 | - | 트리 구조, 특수 레이아웃 |
| 부서 관리 | - | 트리 구조 |
| 일일보고서 | - | 특수 레이아웃 |
| 미수금현황 | - | 특수 레이아웃 |
| 종합분석 | - | 특수 레이아웃 |
| 현장종합현황 | `/construction/project/management/[id]` | 칸반 보드 |
| 권한관리 | `/settings/permissions/[id]` | Matrix UI |

---

## 📚 Config 파일 위치 참조

| 컴포넌트 | Config 파일 |
|---------|------------|
| 출하관리 | shipmentConfig.ts |
| 작업지시 | workOrderConfig.ts |
| 검수관리 | inspectionConfig.ts |
| 견적관리(V2) | quoteConfig.ts |
| 수주관리 | orderSalesConfig.ts |
| 입고관리 | receivingConfig.ts |
| 재고현황 | stockStatusConfig.ts |
| 악성채권 | badDebtConfig.ts |
| 거래처원장 | vendorLedgerConfig.ts |
| 구조검토 | structureReviewConfig.ts |
| 현장관리 | siteConfig.ts |
| 품목관리 | itemConfig.ts |
| 문의관리 | inquiryConfig.ts |
| 이벤트관리 | eventConfig.ts |
| 공지관리 | noticeConfig.ts |
| 직원관리 | employeeConfig.ts |
| 권한관리 | permissionConfig.ts |

---

## 📝 변경 이력

<details>
<summary>전체 변경 이력 보기</summary>

| 날짜 | 내용 |
|------|------|
| 2026-01-17 | 체크리스트 초기 작성 |
| 2026-01-19 | Phase 1-5 V2 URL 패턴 마이그레이션 완료 (37개) |
| 2026-01-20 | Phase 6 폼 템플릿 공통화 마이그레이션 완료 (41개) |
| 2026-01-20 | 기안함, 작업지시, 출하, 사원, 게시판, 문의, 공정, 검사 마이그레이션 완료 |
| 2026-01-21 | 문서 통합 (중복 3개 파일 → 1개) |

</details>
