# 결재관리 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