# GUARDiA ITSM — Priority 1: UI 없는 백엔드 모듈 화면 구현

**문서 버전**: 1.0 | **작성일**: 2026-05-25

---

## 개요

백엔드 API는 완성되어 있으나 프론트엔드 HTML 페이지가 없는 7개 모듈의 SPA 구현.
각 페이지는 `/static/style.css` 공유 테마를 사용하며 독립 경로로 접근한다.

---

## 구현 목록

| 페이지 | URL 경로 | 파일 | 백엔드 라우터 |
|--------|---------|------|-------------|
| 장애 관리 | /incidents | static/incidents.html | routers/incidents.py |
| SSL 관리 | /ssl | static/ssl.html | routers/ssl_manager.py |
| PM 점검 | /pm | static/pm.html | routers/pm.py |
| 온콜 관리 | /oncall | static/oncall.html | routers/oncall.py |
| 배치 작업 | /batch | static/batch.html | routers/batch.py |
| 바이브 코딩 | /vibe | static/vibe.html | routers/vibe.py |
| SI 프로젝트 | /si | static/si.html | si_projects/wbs/requirements/issues/risks/milestones/change_requests/tests.py |
| 라이선스 관리 | /license | static/license.html | routers/license.py |

---

## 공통 설계 원칙

### 인증
```javascript
const token = localStorage.getItem('guardia_token');
if (!token) { location.href = '/login'; return; }

async function api(method, path, body) {
  const res = await fetch(path, {
    method,
    headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
    body: body ? JSON.stringify(body) : undefined
  });
  if (res.status === 401) { localStorage.removeItem('guardia_token'); location.href = '/login'; }
  return res;
}
```

### 테마 복원
```javascript
document.body.dataset.theme = localStorage.getItem('guardia_theme') || 'dark';
```

### 상단 네비게이션 바
모든 외부 페이지는 공통 topnav를 가진다:
- GUARDiA ITSM 로고 (/ 링크)
- 페이지 링크: 대시보드, 장애관리, SSL, PM점검, 온콜, 배치, 바이브, SI, AI에이전트
- 우측: 사용자명, 로그아웃 버튼

### 자동 새로고침
```javascript
setInterval(loadData, 30000);
```

---

## 1. 장애 관리 (incidents.html)

### 화면 구성
1. **통계 카드 행** (4개): 전체, OPEN, P1/P2, 평균 MTTR
2. **필터 툴바**: 상태 / 등급 / 키워드 검색
3. **장애 테이블**: INC번호, 제목, 등급배지, 상태, 발생시각, 담당자, MTTR
4. **등록 모달**: 제목, 설명, grade, assigned_to, affected_services, occurred_at
5. **상세 모달**: 전체 정보 + 상태 전환 버튼 + SR 연결 + RCA 종료

### 등급 배지
| 등급 | 색상 | 의미 |
|------|------|------|
| P1 | 빨강 #f87171 | 서비스 전체 중단 |
| P2 | 주황 #fb923c | 주요 기능 영향 |
| P3 | 노랑 #fcd34d | 일부 기능 저하 |
| P4 | 초록 #4ade80 | 경미한 영향 |

### 상태 전환 규칙
```
OPEN → INVESTIGATING | CLOSED
INVESTIGATING → MITIGATED | RESOLVED
MITIGATED → INVESTIGATING | RESOLVED
RESOLVED → CLOSED
CLOSED → (전환 불가)
```

---

## 2. SSL 인증서 관리 (ssl.html)

### 화면 구성
1. **현황 카드** (4개): OK / WARN / URGENT / EXPIRED — 클릭 시 필터
2. **만료 현황 테이블**: 서버명, 만료일, 남은일수 게이지, 경고레벨 배지, 점검/갱신 버튼
3. **days 슬라이더**: 0~90일 범위 조회
4. **갱신 기록 모달**: new_expire_date, renewed_by, notes
5. **갱신 이력 모달**: 서버별 이력 테이블

### 경고 레벨 기준
| 레벨 | 조건 | 배지 색상 |
|------|------|----------|
| OK | days_left > 30 | 초록 |
| WARN | 7 < days_left ≤ 30 | 노랑 |
| URGENT | 0 < days_left ≤ 7 | 주황 |
| EXPIRED | days_left ≤ 0 | 빨강 |

---

## 3. PM 정기점검 (pm.html)

### 탭 구성
- **탭 1 — 점검 스케줄**: 스케줄 목록, 즉시 실행, 스케줄 등록
- **탭 2 — 점검 결과**: 타임테이블 선택 → 체크리스트 항목별 결과 입력 + Excel 다운로드
- **탭 3 — 체크리스트 템플릿**: 서버역할별 템플릿 CRUD

### 점검 주기 옵션
WEEKLY / BIWEEKLY / MONTHLY / QUARTERLY / SEMIANNUAL / ANNUAL / CUSTOM

### 결과 상태
| 상태 | 의미 | 색상 |
|------|------|------|
| PASS | 정상 | 초록 |
| FAIL | 실패 | 빨강 |
| WARNING | 경고 | 노랑 |
| NA | 해당없음 | 회색 |

---

## 4. 온콜/당직 관리 (oncall.html)

### 탭 구성
- **탭 1 — 월간 캘린더**: 연/월 네비게이션, 날짜 클릭 시 당직 등록 모달
- **탭 2 — 목록 & 일괄 등록**: 당직 목록 테이블 + JSON 일괄 등록

### 상단 배너
```
📞 오늘 당직: [이름] ([시프트]) | 백업: [백업담당자]
```

### 시프트 종류
| 값 | 시간 | 색상 |
|----|------|------|
| ALL_DAY | 24시간 | 파랑 |
| DAYTIME | 09:00~18:00 | 초록 |
| NIGHTTIME | 18:00~익일09:00 | 보라 |

---

## 5. 배치 작업 관리 (batch.html)

### 탭 구성
- **탭 1 — 배치 작업**: 작업 목록, 활성/비활성 토글, 즉시 실행, 등록
- **탭 2 — 실행 이력**: 최근 실행 이력 통합, 상세 모달 (stdout 전체)

### 작업 등록 필드
| 필드 | 설명 |
|------|------|
| job_name | 작업명 |
| server_id | 대상 서버 |
| cron_expr | cron 표현식 (예: `0 2 * * *`) |
| command | 실행 명령어 |
| timeout_sec | 타임아웃 (초) |
| alert_on_fail | 실패 시 SR 자동 생성 여부 |

### 실행 결과 상태
SUCCESS(초록) / FAILED(빨강) / TIMEOUT(주황) / RUNNING(파랑 깜빡)

---

## 6. 바이브 코딩 세션 (vibe.html)

### 탭 구성
- **탭 1 — 활성 세션**: 세션 카드 그리드, 파이프라인 스텝 바
- **탭 2 — 이력**: 전체 세션 이력 테이블
- **탭 3 — 프로젝트**: 등록된 프로젝트 목록 + 등록 모달

### 파이프라인 단계
```
PENDING → CODING → BUILDING → TESTING → DEPLOYING → COMPLETED
```

### Jenkins 연결 상태
- 상단 배너: `GET /api/vibe/jenkins/health` 결과 표시
- 연결됨(초록) / 오프라인(빨강)

---

## 7. SI 프로젝트 관리 (si.html)

### 탭 구성 (7탭)
- **프로젝트**: SI 프로젝트 목록, 등록, 단계 전환
- **WBS**: Gantt 차트 스타일 WBS 트리, 진척률 시각화
- **요구사항**: RFP → 확정 요구사항 관리
- **이슈**: 프로젝트 이슈 목록, 상태 전환
- **리스크**: 위험 매트릭스 (확률 × 영향도), 이슈 전환
- **마일스톤**: 마일스톤 타임라인, 산출물 목록
- **변경요청(CR)**: CR 등록, 영향도 분석, 승인 워크플로우
- **테스트**: 테스트 계획 → 케이스 → 실행 → 결함 관리

### SI 프로젝트 상태 전환
```
PLANNING → ANALYSIS → DESIGN → DEVELOPMENT → TESTING → DEPLOYMENT → COMPLETED
```