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

> 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

```typescript
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 확인 완료