zioinfo-mail/workspace/guardia-docs/09_확장개발_Priority1_UI구현.md

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

---

공통 설계 원칙

인증

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;
}

테마 복원

document.body.dataset.theme = localStorage.getItem('guardia_theme') || 'dark';

상단 네비게이션 바

모든 외부 페이지는 공통 topnav를 가진다:

• GUARDiA ITSM 로고 (/ 링크)
• 페이지 링크: 대시보드, 장애관리, SSL, PM점검, 온콜, 배치, 바이브, SI, AI에이전트
• 우측: 사용자명, 로그아웃 버튼

자동 새로고침

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