sam-react-prod/claudedocs/dev/[PLAN] detail-page-pattern-classification.md

상세/등록/수정 페이지 패턴 분류표

Chrome DevTools MCP로 직접 확인한 결과 기반 (2026-01-19)

패턴 분류 기준

1️⃣ 페이지 형태 - 하단 버튼 (표준 패턴)

• URL이 변경되며 별도 페이지로 이동
• 버튼 위치: 하단 (좌: 목록/취소, 우: 삭제/수정/저장)
• IntegratedDetailTemplate 적용 대상

2️⃣ 페이지 형태 - 상단 버튼

• URL이 변경되며 별도 페이지로 이동
• 버튼 위치: 상단
• IntegratedDetailTemplate 확장 필요 (buttonPosition="top")

3️⃣ 모달 형태

• URL 변경 없음, Dialog/Modal로 표시
• IntegratedDetailTemplate 적용 제외

4️⃣ 인라인 입력 형태

• 리스트 페이지 내에서 직접 입력/수정
• IntegratedDetailTemplate 적용 제외

5️⃣ DynamicForm 형태

• API 기반 동적 폼 생성
• IntegratedDetailTemplate의 renderForm prop으로 분기 처리

---

📄 페이지 형태 - 하단 버튼 (통합 대상)

도메인	페이지	URL 패턴	상태
설정	계좌관리	/settings/accounts/[id], /new	✅ 이미 마이그레이션 완료
설정	카드관리	/hr/card-management/[id], /new	✅ 이미 마이그레이션 완료
설정	팝업관리	/settings/popup-management/[id], /new	🔄 대상
설정	게시판관리	/board/board-management/[id], /new	🔄 대상
기준정보	공정관리	/master-data/process-management/[id], /new	🔄 대상
판매	거래처관리	/sales/client-management-sales-admin/[id], /new	🔄 대상
판매	견적관리	/sales/quote-management/[id], /new	🔄 대상
판매	수주관리	/sales/order-management-sales/[id], /new	🔄 대상
품질	검사관리	/quality/inspections/[id], /new	🔄 대상
출고	출하관리	/outbound/shipments/[id], /new	🔄 대상
고객센터	공지사항	/customer-center/notices/[id]	🔄 대상
고객센터	이벤트	/customer-center/events/[id]	🔄 대상

---

📄 페이지 형태 - 상단 버튼 (확장 필요)

도메인	페이지	URL 패턴	버튼 구성	비고
회계	거래처관리	/accounting/vendors/[id], /new	목록/삭제/수정	다중 섹션 구조
회계	매출관리	/accounting/sales/[id], /new	-	🔄 대상
회계	매입관리	/accounting/purchase/[id]	-	🔄 대상
회계	입금관리	/accounting/deposits/[id]	-	🔄 대상
회계	출금관리	/accounting/withdrawals/[id]	-	🔄 대상
회계	어음관리	/accounting/bills/[id], /new	-	🔄 대상
회계	악성채권	/accounting/bad-debt-collection/[id], /new	-	🔄 대상
전자결재	기안함 (임시저장)	/approval/draft/new?id=:id&mode=edit	상세/삭제/상신/저장	복잡한 섹션 구조

---

🔲 모달 형태 (통합 제외)

도메인	페이지	모달 컴포넌트	비고
설정	직급관리	RankDialog.tsx	인라인 입력 + 수정 모달
설정	직책관리	TitleDialog.tsx	인라인 입력 + 수정 모달
인사	부서관리	DepartmentDialog.tsx	트리 구조
인사	근태관리	AttendanceInfoDialog.tsx	모달로 등록
인사	휴가관리	VacationRequestDialog.tsx	모달로 등록/조정
인사	급여관리	SalaryDetailDialog.tsx	모달로 상세
전자결재	기안함 (결재대기)	품의서 상세 Dialog	상세만 모달
건설	카테고리관리	CategoryDialog.tsx	모달로 등록/수정

---

🔧 DynamicForm 형태 (renderForm 분기)

도메인	페이지	URL 패턴	비고
품목	품목관리	/items/[id]	DynamicItemForm 사용

---

⚠️ 특수 케이스 (개별 처리 필요)

도메인	페이지	URL 패턴	특이사항
설정	권한관리	/settings/permissions/[id], /new	Matrix UI, 복잡한 구조
인사	사원관리	/hr/employee-management/[id], /new	40+ 필드, 탭 구조
게시판	게시글	/board/[boardCode]/[postId]	동적 게시판
건설	다수 페이지	/construction/...	별도 분류 필요

---

📊 통합 우선순위

Phase 1: 단순 CRUD (우선 작업)

1. 팝업관리
2. 게시판관리
3. 공정관리
4. 공지사항/이벤트

Phase 2: 중간 복잡도

1. 판매 > 거래처관리
2. 판매 > 견적관리
3. 품질 > 검사관리
4. 출고 > 출하관리

Phase 3: 회계 도메인 (상단 버튼 확장 후)

1. 회계 > 거래처관리
2. 회계 > 매출/매입/입금/출금
3. 회계 > 어음/악성채권

제외 (개별 유지)

• 권한관리 (Matrix UI)
• 사원관리 (40+ 필드)
• 부서관리 (트리 구조)
• 전자결재 (복잡한 워크플로우)
• DynamicForm 페이지 (renderForm 분기)
• 모달 형태 페이지들

---

IntegratedDetailTemplate 확장 필요 Props

interface IntegratedDetailTemplateProps {
  // 기존 props...

  // 버튼 위치 제어
  buttonPosition?: 'top' | 'bottom'; // default: 'bottom'

  // 뒤로가기 버튼 표시 여부
  showBackButton?: boolean; // default: true

  // 상단 버튼 커스텀 (문서 결재 등)
  headerActions?: ReactNode;

  // 다중 섹션 지원
  sections?: Array<{
    title: string;
    fields: FieldConfig[];
  }>;
}

---

작성일

• 최초 작성: 2026-01-19
• Chrome DevTools MCP 확인 완료