guardia-itsm/static/customer.html
DESKTOP-TKLFCPRython 64c27c3509 feat(itsm): G-1~G-12 확장 기능 + 하네스/봇/설치스크립트 구현
G-1: 메신저 Webhook Relay + _send_to_room 실제 httpx 호출 구현
G-2: POST /api/tasks/bulk SR 대량작업 엔드포인트 (최대 100건)
G-3: 라이선스 만료 알림 스케줄러 (매일 09:00 KST)
G-4: 체험판 upgrade_banner 필드 + license.py 배너 로직
G-5: core/auto_rca.py + incidents/problem auto-rca 엔드포인트
G-6: core/deploy_impact.py + vibe impact-analysis 엔드포인트
G-7: core/ticket_classifier.py + SR 생성 시 AI 분류 + ai-suggestion API
G-8: VulnPatchRecord 모델 + vuln_scan 패치추적 4개 엔드포인트
G-9: core/jira_sync.py + gateway Jira/Confluence 연동 엔드포인트
G-10: core/push_notify.py + routers/push.py + PushSubscription 모델
G-11: approvals 다중승인 (위임/서명/기한초과/마감연장)
G-12: alembic.ini + migrations/ + cicd/migrate_to_postgres.sh

하네스: guardia-orchestrator 확장기능 Phase 반영
봇명령어: /sr /status /license /bulk 슬래시 명령어 추가
설치스크립트: setup/ (Ubuntu, CentOS, RHEL, Windows) --test 옵션 포함

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-29 18:18:52 +09:00

137 lines
6.0 KiB
HTML

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GUARDiA 고객 서비스 포털</title>
<link rel="stylesheet" href="/static/customer.css">
</head>
<body>
<header class="portal-header">
<div class="portal-header-inner">
<div class="portal-logo">
<span class="logo-g">G</span>
<span class="logo-text">GUARDiA 고객 서비스 포털</span>
</div>
<span class="portal-sub">IT 인프라 서비스 요청 · 처리 현황 확인</span>
</div>
</header>
<main class="portal-main">
<!-- ── 제출 전: 요청 폼 ── -->
<section id="section-form">
<div class="portal-card">
<h2 class="card-title">서비스 요청 (SR) 등록</h2>
<p class="card-desc">이슈 또는 작업 요청 사항을 입력해 주세요. 담당 엔지니어 또는 AI가 신속하게 처리합니다.</p>
<form id="sr-form">
<div class="form-grid">
<div class="form-group">
<label for="f-name">요청자 이름 <span class="req">*</span></label>
<input id="f-name" name="requested_by" type="text" placeholder="홍길동" required>
</div>
<div class="form-group">
<label for="f-inst">기관 코드 <span class="req">*</span></label>
<select id="f-inst" name="inst_code" required>
<option value="">— 기관 선택 —</option>
<option value="MOF">기획재정부 (MOF)</option>
<option value="MOIS">행정안전부 (MOIS)</option>
<option value="MSS">중소벤처기업부 (MSS)</option>
</select>
</div>
<div class="form-group">
<label for="f-type">요청 유형 <span class="req">*</span></label>
<select id="f-type" name="sr_type" required>
<option value="OTHER">— 선택 —</option>
<option value="DEPLOY">파일 배포</option>
<option value="RESTART">서비스 재기동</option>
<option value="LOG">로그 분석 요청</option>
<option value="INQUIRY">문의 / 기타</option>
</select>
</div>
<div class="form-group">
<label for="f-priority">우선순위</label>
<select id="f-priority" name="priority">
<option value="MEDIUM">보통</option>
<option value="CRITICAL">긴급 🔴</option>
<option value="HIGH">높음 🟠</option>
<option value="LOW">낮음 🔵</option>
</select>
</div>
</div>
<div class="form-group full">
<label for="f-title">이슈 제목 <span class="req">*</span></label>
<input id="f-title" name="title" type="text"
placeholder="예: WAS 서버 응답 없음 / SSL 인증서 갱신 요청" required>
</div>
<div class="form-group full">
<label for="f-server">대상 서버 (선택)</label>
<input id="f-server" name="target_server" type="text"
placeholder="예: MOF-WAS-01 (모르시면 비워두세요)">
</div>
<div class="form-group full">
<label for="f-desc">상세 설명</label>
<textarea id="f-desc" name="description" rows="4"
placeholder="이슈 증상, 발생 시각, 영향 범위 등을 자유롭게 적어주세요."></textarea>
</div>
<button type="submit" class="btn-submit" id="submit-btn">
<span id="submit-label">요청 등록하기</span>
<span id="submit-spinner" class="spinner hidden"></span>
</button>
</form>
</div>
</section>
<!-- ── 제출 후: 처리 현황 ── -->
<section id="section-result" class="hidden">
<div class="portal-card result-card">
<div class="result-icon"></div>
<h2 class="card-title">요청이 접수되었습니다</h2>
<p class="card-desc">담당 엔지니어 또는 AI가 신속히 처리합니다. 아래 SR ID로 진행 상황을 확인하세요.</p>
<div class="sr-id-box">
<span class="sr-id-label">SR 접수 번호</span>
<span class="sr-id-value" id="result-sr-id"></span>
</div>
<!-- 진행 상태 타임라인 -->
<div id="progress-section">
<div class="progress-title">처리 현황</div>
<div id="status-badge-row" class="status-badge-row"></div>
<div class="timeline" id="work-timeline">
<div class="tl-loading">처리 정보를 불러오는 중…</div>
</div>
</div>
<!-- 별점 평가 -->
<div id="rating-section" class="hidden rating-section">
<div class="rating-title">서비스는 만족스러우셨나요?</div>
<div class="stars-row" id="stars-row">
<button class="star-btn" data-s="1" onclick="setStar(1)"></button>
<button class="star-btn" data-s="2" onclick="setStar(2)"></button>
<button class="star-btn" data-s="3" onclick="setStar(3)"></button>
<button class="star-btn" data-s="4" onclick="setStar(4)"></button>
<button class="star-btn" data-s="5" onclick="setStar(5)"></button>
</div>
<input type="text" id="rating-comment" placeholder="한 마디 남겨주세요 (선택)" class="rating-comment-input">
<button class="btn-rate" id="btn-rate" onclick="submitRating()" disabled>평가 제출</button>
<div id="rating-done" class="hidden rating-done">감사합니다! 소중한 의견이 반영됩니다 🙏</div>
</div>
<button class="btn-new" onclick="resetForm()">새 요청 등록</button>
</div>
</section>
</main>
<footer class="portal-footer">
GUARDiA 인프라 자동화 플랫폼 · 문의: guardia-ops@agency.go.kr
</footer>
<script src="/static/customer.js"></script>
</body>
</html>