sam-react-prod/claudedocs/architecture/[IMPL] IntegratedDetailTemplate-checklist.md

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 기반 템플릿

// 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 컴포넌트 분리

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

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

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

// 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 - 기안함

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

Phase 2 - 생산관리

• WorkOrderCreate/Edit (작업지시 등록/수정)
  • 파일: src/components/production/WorkOrders/WorkOrderCreate.tsx

Phase 3 - 출고관리

• ShipmentCreate/Edit (출하 등록/수정)
  • 파일: src/components/outbound/ShipmentManagement/ShipmentCreate.tsx

Phase 4 - HR

• EmployeeForm (사원 등록/수정/상세)
  • 파일: src/components/hr/EmployeeManagement/EmployeeForm.tsx
  • 특이사항: "항목 설정" 버튼, 복잡한 섹션 구조

Phase 5 - 게시판

• BoardForm (게시판 글쓰기/수정)
  • 파일: src/components/board/BoardForm/index.tsx

Phase 6 - 고객센터

• InquiryForm (문의 등록/수정)
  • 파일: src/components/customer-center/InquiryManagement/InquiryForm.tsx

Phase 7 - 기준정보

• ProcessForm (공정 등록/수정)
  • 파일: src/components/process-management/ProcessForm.tsx

Phase 8 - 자재/품질

• InspectionCreate - 자재 (수입검사 등록)
• 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

---

📝 변경 이력

전체 변경 이력 보기

날짜	내용
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개)