156 lines
5.8 KiB
Markdown
156 lines
5.8 KiB
Markdown
|
# 상세/등록/수정 페이지 패턴 분류표
|
|||
|
|
|
|||
|
|
> 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 확인 완료
|