sam-docs/sam/docs/features/approvals/ui-screens.md

결재관리 UI 화면 구성

작성일: 2026-02-28 상태: Phase 2 구현 완료 기술: Blade + HTMX + Alpine.js + Tailwind CSS 관련: README.md | 워크플로우 | API 명세

---

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 — 시스템 전체 개요
• 워크플로우 상세 — 각 동작의 상세 흐름
• API 명세 — 엔드포인트별 요청/응답

---

최종 업데이트: 2026-02-28