feat(WEB): IntegratedDetailTemplate 통합 템플릿 구현 및 Phase 1~8 마이그레이션

- Phase 1: 기안함(DocumentCreate) 마이그레이션 - Phase 2: 작업지시(WorkOrderCreate/Edit) 마이그레이션 - Phase 3: 출하(ShipmentCreate/Edit) 마이그레이션 - Phase 4: 사원(EmployeeForm) 마이그레이션 - Phase 5: 게시판(BoardForm) 마이그레이션 - Phase 6: 1:1문의(InquiryForm) 마이그레이션 - Phase 7: 공정(ProcessForm) 마이그레이션 - Phase 8: 수입검사/품질검사(InspectionCreate) 마이그레이션 - DetailActions에 showSave 옵션 추가 - 각 도메인별 config 파일 생성 Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-20 19:31:07 +09:00
parent 6b0ffc810b
commit 62ef2b1ff9
24 changed files with 861 additions and 534 deletions
--- a/IntegratedDetailTemplate-migration-checklist.md
+++ b/IntegratedDetailTemplate-migration-checklist.md
@@ -0,0 +1,151 @@
+# IntegratedDetailTemplate 마이그레이션 체크리스트
+
+> 작성일: 2025-01-20
+> 목적: 별도 디자인 사용 중인 등록/수정 페이지를 IntegratedDetailTemplate으로 통합
+
+---
+
+## 마이그레이션 완료
+
+### Phase 1 - 기안함 (2025-01-20)
+- [x] DocumentCreate (기안함 등록/수정)
+  - 파일: `src/components/approval/DocumentCreate/index.tsx`
+  - config: `src/components/approval/DocumentCreate/documentCreateConfig.ts`
+  - 특이사항: 커스텀 headerActions (미리보기, 삭제, 상신, 임시저장)
+
+### Phase 2 - 생산관리 (2025-01-20)
+- [x] WorkOrderCreate (작업지시 등록)
+  - 파일: `src/components/production/WorkOrders/WorkOrderCreate.tsx`
+  - config: `src/components/production/WorkOrders/workOrderConfig.ts`
+- [x] WorkOrderEdit (작업지시 수정)
+  - 파일: `src/components/production/WorkOrders/WorkOrderEdit.tsx`
+  - config: 동일 파일 (workOrderEditConfig)
+
+### Phase 3 - 출고관리 (2025-01-20)
+- [x] ShipmentCreate (출하 등록)
+  - 파일: `src/components/outbound/ShipmentManagement/ShipmentCreate.tsx`
+  - config: `src/components/outbound/ShipmentManagement/shipmentConfig.ts`
+- [x] ShipmentEdit (출하 수정)
+  - 파일: `src/components/outbound/ShipmentManagement/ShipmentEdit.tsx`
+  - config: 동일 파일 (shipmentEditConfig)
+
+### Phase 4 - HR (2025-01-20)
+- [x] EmployeeForm (사원 등록/수정/상세)
+  - 파일: `src/components/hr/EmployeeManagement/EmployeeForm.tsx`
+  - config: `src/components/hr/EmployeeManagement/employeeConfig.ts`
+  - 특이사항: "항목 설정" 버튼, 복잡한 섹션 구조, view 모드 지원
+
+### Phase 5 - 게시판 (2025-01-20)
+- [x] BoardForm (게시판 글쓰기/수정)
+  - 파일: `src/components/board/BoardForm/index.tsx`
+  - config: `src/components/board/BoardForm/boardFormConfig.ts`
+  - 특이사항: 동적 게시판 코드 기반
+
+### Phase 6 - 고객센터 (2025-01-20)
+- [x] InquiryForm (문의 등록/수정)
+  - 파일: `src/components/customer-center/InquiryManagement/InquiryForm.tsx`
+  - config: `src/components/customer-center/InquiryManagement/inquiryConfig.ts`
+
+### Phase 7 - 기준정보 (2025-01-20)
+- [x] ProcessForm (공정 등록/수정)
+  - 파일: `src/components/process-management/ProcessForm.tsx`
+  - config: `src/components/process-management/processConfig.ts`
+
+### Phase 8 - 자재/품질 (2025-01-20)
+- [x] InspectionCreate - 자재 (수입검사 등록)
+  - 파일: `src/components/material/ReceivingManagement/InspectionCreate.tsx`
+  - config: `src/components/material/ReceivingManagement/inspectionConfig.ts`
+- [x] InspectionCreate - 품질 (품질검사 등록)
+  - 파일: `src/components/quality/InspectionManagement/InspectionCreate.tsx`
+  - config: `src/components/quality/InspectionManagement/inspectionConfig.ts`
+
+---
+
+## 마이그레이션 제외 (특수 레이아웃)
+
+| 페이지 | 사유 |
+|--------|------|
+| CEO 대시보드 | 대시보드 (특수 레이아웃) |
+| 생산 대시보드 | 대시보드 (특수 레이아웃) |
+| 작업자 화면 | 특수 UI |
+| 설정 페이지들 | 트리 구조, 특수 레이아웃 |
+| 부서 관리 | 트리 구조 |
+| 일일보고서 | 특수 레이아웃 |
+| 미수금현황 | 특수 레이아웃 |
+| 종합분석 | 특수 레이아웃 |
+
+---
+
+## 마이그레이션 패턴
+
+### 1. Config 파일 생성/수정
+```typescript
+export const xxxCreateConfig: DetailConfig = {
+  title: '페이지 제목',
+  description: '페이지 설명',
+  icon: IconComponent,
+  basePath: '/base/path',
+  fields: [],
+  actions: {
+    showBack: true,
+    showEdit: false,
+    showDelete: false,
+    showSave: true,  // false로 설정하면 기본 저장 버튼 숨김
+    submitLabel: '등록',
+  },
+};
+```
+
+### 2. 컴포넌트 수정
+```typescript
+// 변경 전
+import { PageLayout } from '@/components/organisms/PageLayout';
+return <PageLayout>...</PageLayout>;
+
+// 변경 후
+import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
+const renderFormContent = useCallback(() => (...), [deps]);
+return (
+  <IntegratedDetailTemplate
+    config={config}
+    mode="create"
+    isSubmitting={isSubmitting}
+    onBack={handleCancel}
+    onCancel={handleCancel}
+    onSubmit={handleSubmit}
+    renderForm={renderFormContent}
+  />
+);
+```
+
+### 3. 커스텀 버튼이 필요한 경우
+- config에서 `showSave: false` 설정
+- `headerActions` prop으로 커스텀 버튼 전달
+
+---
+
+## 검증 URL
+
+마이그레이션 완료 후 확인할 URL:
+- `/approval/draft/new` - 기안함 등록
+- `/production/work-orders/create` - 작업지시 등록
+- `/outbound/shipments/new` - 출하 등록
+- `/hr/employee-management/new` - 사원 등록
+- `/boards/notice/create` - 게시판 글쓰기
+
+---
+
+## 변경 이력
+
+| 날짜 | 작업 내용 |
+|------|----------|
+| 2025-01-20 | 기안함 마이그레이션 완료 |
+| 2025-01-20 | 작업지시 등록/수정 마이그레이션 완료 |
+| 2025-01-20 | DetailActions에 showSave 옵션 추가 |
+| 2025-01-20 | 출하 등록/수정 마이그레이션 완료 |
+| 2025-01-20 | 사원 등록/수정/상세 마이그레이션 완료 |
+| 2025-01-20 | 게시판 글쓰기/수정 마이그레이션 완료 |
+| 2025-01-20 | 1:1 문의 등록/수정 마이그레이션 완료 |
+| 2025-01-20 | 공정 등록/수정 마이그레이션 완료 |
+| 2025-01-20 | 수입검사(IQC) 등록 마이그레이션 완료 |
+| 2025-01-20 | 품질검사(PQC) 등록 마이그레이션 완료 |