382 lines
18 KiB
Markdown
382 lines
18 KiB
Markdown
|
# 결재관리 UI 화면 구성
|
||
|
|
|
||
|
|
> **작성일**: 2026-02-28
|
||
|
|
> **상태**: Phase 2 구현 완료
|
||
|
|
> **기술**: Blade + HTMX + Alpine.js + Tailwind CSS
|
||
|
|
> **관련**: [README.md](README.md) | [워크플로우](workflows.md) | [API 명세](api-reference.md)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 1. 개요
|
||
|
|
|
||
|
|
결재관리 화면은 MNG(관리자 웹)에서 Blade 템플릿으로 구현되며, API 호출은 `fetch()`를 사용한다.
|
||
|
|
|
||
|
|
### 1.1 파일 구조
|
||
|
|
|
||
|
|
```
|
||
|
|
resources/views/approvals/
|
||
|
|
├── drafts.blade.php ← 기안함 (목록)
|
||
|
|
├── pending.blade.php ← 결재 대기함 (목록)
|
||
|
|
├── completed.blade.php ← 처리 완료함 (목록)
|
||
|
|
├── references.blade.php ← 참조함 (목록)
|
||
|
|
├── create.blade.php ← 기안 작성
|
||
|
|
├── edit.blade.php ← 기안 수정
|
||
|
|
├── show.blade.php ← 상세 조회 + 결재 처리
|
||
|
|
└── partials/
|
||
|
|
├── _status-badge.blade.php ← 상태 뱃지 컴포넌트
|
||
|
|
└── _step-progress.blade.php ← 결재 단계 진행 표시
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 2. 목록 화면
|
||
|
|
|
||
|
|
### 2.1 기안함 (`/approval-mgmt/drafts`)
|
||
|
|
|
||
|
|
내가 기안한 모든 문서를 표시한다.
|
||
|
|
|
||
|
|
**UI 구성:**
|
||
|
|
|
||
|
|
```
|
||
|
|
┌──────────────────────────────────────────────────────────┐
|
||
|
|
│ 기안함 [+ 새 기안] │
|
||
|
|
├──────────────────────────────────────────────────────────┤
|
||
|
|
│ [검색] [상태 필터 ▼] [긴급만 □] [날짜 범위] │
|
||
|
|
├──────────────────────────────────────────────────────────┤
|
||
|
|
│ 문서번호 │ 제목 │ 양식 │ 상태 │ 기안일 │
|
||
|
|
│ APR-260228-001│ 휴가 신청 │ 휴가서 │ 🟢완료 │ 02-28 │
|
||
|
|
│ APR-260228-002│ 출장 보고 │ 출장서 │ 🔵진행 │ 02-28 │
|
||
|
|
│ APR-260227-001│ 경비 청구 │ 경비서 │ ⬜임시 │ 02-27 │
|
||
|
|
├──────────────────────────────────────────────────────────┤
|
||
|
|
│ [◀ 이전] 1 / 3 [다음 ▶] │
|
||
|
|
└──────────────────────────────────────────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
**상태 필터:** 전체, 임시저장, 진행, 완료, 반려, 회수, 보류
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### 2.2 결재 대기함 (`/approval-mgmt/pending`)
|
||
|
|
|
||
|
|
내가 현재 결재해야 할 문서를 표시한다.
|
||
|
|
|
||
|
|
**UI 구성:**
|
||
|
|
|
||
|
|
```
|
||
|
|
┌──────────────────────────────────────────────────────────┐
|
||
|
|
│ 결재 대기함 [뱃지: 3건] │
|
||
|
|
├──────────────────────────────────────────────────────────┤
|
||
|
|
│ 문서번호 │ 제목 │ 기안자 │ 양식 │ 상신일 │
|
||
|
|
│ 🔴 APR-260..│ 긴급 승인 │ 홍길동 │ 구매서 │ 02-28 │
|
||
|
|
│ APR-260..│ 휴가 신청 │ 김영희 │ 휴가서 │ 02-27 │
|
||
|
|
└──────────────────────────────────────────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
> 긴급 문서는 🔴 아이콘과 함께 상단에 표시
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### 2.3 참조함 (`/approval-mgmt/references`)
|
||
|
|
|
||
|
|
내가 참조자로 지정된 문서를 표시한다.
|
||
|
|
|
||
|
|
**UI 구성:**
|
||
|
|
|
||
|
|
```
|
||
|
|
┌──────────────────────────────────────────────────────────┐
|
||
|
|
│ 참조함 │
|
||
|
|
├──────────────────────────────────────────────────────────┤
|
||
|
|
│ [전체] [미열람 (5)] [열람완료] │
|
||
|
|
├──────────────────────────────────────────────────────────┤
|
||
|
|
│ 문서번호 │ 제목 │ 기안자 │ 상태 │ 열람 │
|
||
|
|
│ APR-260228-001│ 회의록 │ 박부장 │ 🟢완료 │ ❌미열람│
|
||
|
|
│ APR-260227-003│ 인사발령 │ 이팀장 │ 🔵진행 │ ✅열람 │
|
||
|
|
└──────────────────────────────────────────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
**열람 추적:**
|
||
|
|
- 문서 클릭 시 `mark-read` API가 자동 호출된다
|
||
|
|
- 미열람/열람완료 탭으로 필터링 가능
|
||
|
|
- 미열람 건수가 뱃지로 표시된다
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 3. 상세 화면 (`/approval-mgmt/{id}`)
|
||
|
|
|
||
|
|
### 3.1 전체 레이아웃
|
||
|
|
|
||
|
|
```
|
||
|
|
┌──────────────────────────────────────────────────────────┐
|
||
|
|
│ 결재 상세 [수정] [목록으로] │
|
||
|
|
│ APR-260228-001 │
|
||
|
|
├──────────────────────────────────────────────────────────┤
|
||
|
|
│ │
|
||
|
|
│ 상태: [🔵 진행] [🔴 긴급] │
|
||
|
|
│ 양식: 휴가신청서 기안자: 홍길동 │
|
||
|
|
│ 기안일: 2026-02-28 10:05 완료일: - │
|
||
|
|
│ 원본 문서: APR-260225-003 (재기안 시 표시) │
|
||
|
|
│ │
|
||
|
|
│ ┌──────────────────────────────────────────────────┐ │
|
||
|
|
│ │ 회수 사유 (cancelled 상태에서만) │ │
|
||
|
|
│ │ 내용 수정이 필요하여 회수합니다. │ │
|
||
|
|
│ └──────────────────────────────────────────────────┘ │
|
||
|
|
│ │
|
||
|
|
│ 제목: 2월 연차 사용 신청 │
|
||
|
|
│ 본문: 2월 27일~28일 연차 사용합니다... │
|
||
|
|
│ │
|
||
|
|
├──────────────────────────────────────────────────────────┤
|
||
|
|
│ │
|
||
|
|
│ 결재 진행 │
|
||
|
|
│ ┌────────────────────────────────────────────────┐ │
|
||
|
|
│ │ [결재 단계 프로그레스 바] │ │
|
||
|
|
│ │ ✓김과장(승인) → ●박부장(대기) → ③이사(대기) │ │
|
||
|
|
│ └────────────────────────────────────────────────┘ │
|
||
|
|
│ │
|
||
|
|
│ 결재 의견 │
|
||
|
|
│ ┌────────────────────────────────────────────────┐ │
|
||
|
|
│ │ ✓ 김과장 2026-02-28 11:00 │ │
|
||
|
|
│ │ 승인합니다. │ │
|
||
|
|
│ └────────────────────────────────────────────────┘ │
|
||
|
|
│ │
|
||
|
|
├──────────────────────────────────────────────────────────┤
|
||
|
|
│ │
|
||
|
|
│ 결재 처리 (현재 결재자에게만 표시) │
|
||
|
|
│ [결재 의견 textarea] │
|
||
|
|
│ [승인] [반려] [보류] [전결] │
|
||
|
|
│ │
|
||
|
|
├──────────────────────────────────────────────────────────┤
|
||
|
|
│ 보류 해제 (on_hold + 보류한 본인에게만) │
|
||
|
|
│ [보류 해제] │
|
||
|
|
├──────────────────────────────────────────────────────────┤
|
||
|
|
│ 회수 (기안자 + pending/on_hold) │
|
||
|
|
│ [회수 사유 textarea] │
|
||
|
|
│ [결재 회수] │
|
||
|
|
├──────────────────────────────────────────────────────────┤
|
||
|
|
│ 복사 재기안 (기안자 + approved/rejected/cancelled) │
|
||
|
|
│ [복사하여 재기안] │
|
||
|
|
└──────────────────────────────────────────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
### 3.2 조건부 섹션 표시
|
||
|
|
|
||
|
|
| 섹션 | 표시 조건 |
|
||
|
|
|------|----------|
|
||
|
|
| **수정 버튼** | 기안자 + `draft`/`rejected` |
|
||
|
|
| **회수 사유** | `cancelled` + `recall_reason` 존재 |
|
||
|
|
| **원본 문서 링크** | `parent_doc_id` 존재 (재기안 문서) |
|
||
|
|
| **결재 처리** | `pending` + 현재 결재자 |
|
||
|
|
| **보류 해제** | `on_hold` + 보류한 본인 |
|
||
|
|
| **회수** | 기안자 + `pending`/`on_hold` |
|
||
|
|
| **복사 재기안** | 기안자 + `approved`/`rejected`/`cancelled` |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 4. 파셜 컴포넌트
|
||
|
|
|
||
|
|
### 4.1 상태 뱃지 (`_status-badge.blade.php`)
|
||
|
|
|
||
|
|
문서 상태를 색상 뱃지로 표시한다.
|
||
|
|
|
||
|
|
| 상태 | 라벨 | 스타일 |
|
||
|
|
|------|------|--------|
|
||
|
|
| `draft` | 임시저장 | `bg-gray-100 text-gray-700` |
|
||
|
|
| `pending` | 진행 | `bg-blue-100 text-blue-700` |
|
||
|
|
| `approved` | 완료 | `bg-green-100 text-green-700` |
|
||
|
|
| `rejected` | 반려 | `bg-red-100 text-red-700` |
|
||
|
|
| `cancelled` | 회수 | `bg-yellow-100 text-yellow-700` |
|
||
|
|
| `on_hold` | 보류 | `bg-amber-100 text-amber-700` |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
### 4.2 결재 단계 프로그레스 (`_step-progress.blade.php`)
|
||
|
|
|
||
|
|
결재선의 각 단계를 가로 프로그레스 바로 표시한다.
|
||
|
|
|
||
|
|
**단계 아이콘:**
|
||
|
|
|
||
|
|
| 상태 | 아이콘 | 배경색 | 텍스트색 |
|
||
|
|
|------|--------|--------|---------|
|
||
|
|
| `approved` (normal) | ✓ | `bg-green-500` | white |
|
||
|
|
| `approved` (pre_decided) | ⚡ | `bg-indigo-500` | white |
|
||
|
|
| `rejected` | ✗ | `bg-red-500` | white |
|
||
|
|
| `on_hold` | ⏸ | `bg-amber-400` | white |
|
||
|
|
| `skipped` | — | `bg-gray-300` | gray |
|
||
|
|
| `pending` (현재 차례) | 번호 | `bg-blue-500` | white |
|
||
|
|
| `pending` (대기) | 번호 | `bg-gray-200` | gray |
|
||
|
|
|
||
|
|
**레이아웃:**
|
||
|
|
|
||
|
|
```
|
||
|
|
┌──────────────────────────────────────────────────────┐
|
||
|
|
│ │
|
||
|
|
│ ✓ ──── ⚡ ──── — ──── — ──── ● ──── 3 │
|
||
|
|
│ 김과장 박부장 이사장 팀장 최대리 참조자 │
|
||
|
|
│ 경영팀 경영팀 대표실 개발팀 개발팀 인사팀 │
|
||
|
|
│ (승인) (전결) (건너뜀)(건너뜀)(대기) (참조) │
|
||
|
|
│ │
|
||
|
|
└──────────────────────────────────────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
**특수 표시:**
|
||
|
|
- **전결** step: ⚡ 아이콘 + "전결" 라벨 (남색)
|
||
|
|
- **보류** step: ⏸ 아이콘 + "보류" 라벨 (노란색)
|
||
|
|
- **건너뜀** step: 이름에 취소선 (line-through)
|
||
|
|
- **참조** step: 별도 구분 없이 동일 프로그레스 바에 표시
|
||
|
|
- **연결선**: 단계 사이 가로선 (`border-t-2`)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 5. 결재 처리 인터랙션
|
||
|
|
|
||
|
|
### 5.1 승인
|
||
|
|
|
||
|
|
```
|
||
|
|
[승인 버튼 클릭]
|
||
|
|
→ confirm("승인하시겠습니까?")
|
||
|
|
→ POST /api/admin/approvals/{id}/approve
|
||
|
|
body: { comment: "의견 텍스트" }
|
||
|
|
→ 성공 시: 토스트("승인되었습니다") + 페이지 리로드
|
||
|
|
```
|
||
|
|
|
||
|
|
### 5.2 반려
|
||
|
|
|
||
|
|
```
|
||
|
|
[반려 버튼 클릭]
|
||
|
|
→ comment 빈 값 체크 → 경고 토스트("반려 시 사유를 입력해주세요")
|
||
|
|
→ confirm("반려하시겠습니까?")
|
||
|
|
→ POST /api/admin/approvals/{id}/reject
|
||
|
|
body: { comment: "사유" }
|
||
|
|
→ 성공 시: 토스트("반려되었습니다") + 페이지 리로드
|
||
|
|
```
|
||
|
|
|
||
|
|
### 5.3 보류
|
||
|
|
|
||
|
|
```
|
||
|
|
[보류 버튼 클릭]
|
||
|
|
→ comment 빈 값 체크 → 경고 토스트("보류 사유를 입력해주세요")
|
||
|
|
→ confirm("이 결재를 보류하시겠습니까?")
|
||
|
|
→ POST /api/admin/approvals/{id}/hold
|
||
|
|
body: { comment: "사유" }
|
||
|
|
→ 성공 시: 토스트("보류되었습니다") + 페이지 리로드
|
||
|
|
```
|
||
|
|
|
||
|
|
### 5.4 전결
|
||
|
|
|
||
|
|
```
|
||
|
|
[전결 버튼 클릭]
|
||
|
|
→ confirm("전결 처리하시겠습니까?\n이후 모든 결재를 건너뛰고 문서를 최종 승인합니다.")
|
||
|
|
→ POST /api/admin/approvals/{id}/pre-decide
|
||
|
|
body: { comment: "의견(선택)" }
|
||
|
|
→ 성공 시: 토스트("전결 처리되었습니다") + 페이지 리로드
|
||
|
|
```
|
||
|
|
|
||
|
|
### 5.5 보류 해제
|
||
|
|
|
||
|
|
```
|
||
|
|
[보류 해제 버튼 클릭]
|
||
|
|
→ confirm("보류를 해제하시겠습니까?")
|
||
|
|
→ POST /api/admin/approvals/{id}/release-hold
|
||
|
|
→ 성공 시: 토스트("보류가 해제되었습니다") + 페이지 리로드
|
||
|
|
```
|
||
|
|
|
||
|
|
### 5.6 회수
|
||
|
|
|
||
|
|
```
|
||
|
|
[결재 회수 버튼 클릭]
|
||
|
|
→ confirm("결재를 회수하시겠습니까? 이 작업은 되돌릴 수 없습니다.")
|
||
|
|
→ POST /api/admin/approvals/{id}/cancel
|
||
|
|
body: { recall_reason: "사유(선택)" }
|
||
|
|
→ 성공 시: 토스트("결재가 회수되었습니다") + 페이지 리로드
|
||
|
|
```
|
||
|
|
|
||
|
|
### 5.7 복사 재기안
|
||
|
|
|
||
|
|
```
|
||
|
|
[복사하여 재기안 버튼 클릭]
|
||
|
|
→ confirm("이 문서를 복사하여 새 결재를 작성하시겠습니까?")
|
||
|
|
→ POST /api/admin/approvals/{id}/copy
|
||
|
|
→ 성공 시: 토스트("문서가 복사되었습니다")
|
||
|
|
→ /approval-mgmt/{newId}/edit로 이동
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 6. 결재 의견 표시
|
||
|
|
|
||
|
|
상세 페이지에서 결재 의견이 있는 step을 카드 형태로 표시한다.
|
||
|
|
|
||
|
|
```
|
||
|
|
┌──────────────────────────────────────┐
|
||
|
|
│ ✓ 김과장 2026-02-28 11:00 │
|
||
|
|
│ 승인합니다. │
|
||
|
|
├──────────────────────────────────────┤
|
||
|
|
│ ⚡ 박부장 (전결) 2026-02-28 14:00 │
|
||
|
|
│ 전결 처리합니다. │
|
||
|
|
├──────────────────────────────────────┤
|
||
|
|
│ ⏸ 이사장 (보류) 2026-02-28 15:00 │
|
||
|
|
│ 추가 자료 검토 필요 │
|
||
|
|
├──────────────────────────────────────┤
|
||
|
|
│ ✗ 팀장 2026-02-28 16:00 │
|
||
|
|
│ 예산 초과로 반려합니다. │
|
||
|
|
└──────────────────────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
**아이콘 색상:**
|
||
|
|
- ✓ 승인: 녹색 (`bg-green-100 text-green-600`)
|
||
|
|
- ⚡ 전결: 남색 (`bg-indigo-100 text-indigo-600`)
|
||
|
|
- ⏸ 보류: 노란색 (`bg-amber-100 text-amber-600`)
|
||
|
|
- ✗ 반려: 적색 (`bg-red-100 text-red-600`)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 7. 참조함 열람 추적 UI
|
||
|
|
|
||
|
|
### 7.1 탭 필터
|
||
|
|
|
||
|
|
```
|
||
|
|
[전체] [미열람 (5)] [열람완료]
|
||
|
|
```
|
||
|
|
|
||
|
|
- 탭 클릭 시 `is_read` 파라미터로 API 재호출
|
||
|
|
- 미열람 탭에 건수 뱃지 표시
|
||
|
|
|
||
|
|
### 7.2 열람 상태 표시
|
||
|
|
|
||
|
|
| 상태 | 표시 |
|
||
|
|
|------|------|
|
||
|
|
| 미열람 | `bg-red-100 text-red-700` "미열람" |
|
||
|
|
| 열람완료 | `bg-green-100 text-green-700` "열람완료" |
|
||
|
|
|
||
|
|
### 7.3 자동 열람 처리
|
||
|
|
|
||
|
|
문서 행 클릭 시:
|
||
|
|
1. `mark-read` API 호출 (비동기)
|
||
|
|
2. 상세 페이지로 이동
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 8. 버튼 스타일 가이드
|
||
|
|
|
||
|
|
| 버튼 | 색상 | Tailwind 클래스 |
|
||
|
|
|------|------|----------------|
|
||
|
|
| 승인 | 녹색 | `bg-green-600 hover:bg-green-700` |
|
||
|
|
| 반려 | 적색 | `bg-red-600 hover:bg-red-700` |
|
||
|
|
| 보류 | 노란색 | `bg-amber-500 hover:bg-amber-600` |
|
||
|
|
| 전결 | 남색 | `bg-indigo-600 hover:bg-indigo-700` |
|
||
|
|
| 보류 해제 | 노란색 | `bg-amber-500 hover:bg-amber-600` |
|
||
|
|
| 회수 | 노란색 | `bg-yellow-500 hover:bg-yellow-600` |
|
||
|
|
| 복사 재기안 | 회색 | `bg-gray-600 hover:bg-gray-700` |
|
||
|
|
| 수정 | 회색 | `bg-gray-600 hover:bg-gray-700` |
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 관련 문서
|
||
|
|
|
||
|
|
- [README.md](README.md) — 시스템 전체 개요
|
||
|
|
- [워크플로우 상세](workflows.md) — 각 동작의 상세 흐름
|
||
|
|
- [API 명세](api-reference.md) — 엔드포인트별 요청/응답
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
**최종 업데이트**: 2026-02-28
|