85e4901541
- FastAPI + WebSocket 백엔드 (ws_relay, webhook, messages 라우터) - GUARDiA-Bot: @bot 명령 응답 + 선제적 맥락 분석 (DB 지연, 디스크, 장애 감지) - 승인 워크플로우: 재기동/배포 SR → 승인/반려 인터랙티브 버튼 - 다크 테마 Slack형 프론트엔드 (5개 채널, 실시간 메시지) - 채널: 일반/배포/운영/PM관리/알림 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
89 lines
2.8 KiB
HTML
89 lines
2.8 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 Messenger</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- 사용자 이름 설정 모달 -->
|
|
<div id="user-modal-overlay">
|
|
<div id="user-modal">
|
|
<h2>🛡️ GUARDiA Messenger</h2>
|
|
<p>사용자 이름을 입력하고 입장하세요</p>
|
|
<form id="username-form">
|
|
<input id="username-input" type="text" placeholder="이름 입력 (예: ENGINEER_01)"
|
|
maxlength="30" autocomplete="off" required>
|
|
<button type="submit">입장</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="app">
|
|
|
|
<!-- ── Sidebar ────────────────────────────────────── -->
|
|
<nav id="sidebar">
|
|
<div id="workspace-header">
|
|
<div id="workspace-name">
|
|
<span class="status-dot"></span>
|
|
GUARDiA
|
|
</div>
|
|
<div id="user-display">로딩 중…</div>
|
|
</div>
|
|
|
|
<input id="sidebar-search" type="text" placeholder="🔍 검색">
|
|
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-section-header">▾ 채널</div>
|
|
<div id="channel-list"><!-- JS 렌더링 --></div>
|
|
</div>
|
|
|
|
<div class="sidebar-section" style="margin-top:auto; padding:12px 16px; border-top:1px solid var(--border)">
|
|
<div style="font-size:11px; color:var(--text-muted); line-height:1.6">
|
|
<div>📡 WebSocket 실시간 연동</div>
|
|
<div>🤖 GUARDiA-Bot 내장</div>
|
|
<div>🔒 ITSM ChatOps v1.0</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- ── Main ──────────────────────────────────────── -->
|
|
<main id="main">
|
|
|
|
<header id="channel-header">
|
|
<span id="ch-name"># 일반</span>
|
|
<span id="ch-desc" class="ch-desc"></span>
|
|
<span id="member-count">🟢 접속 중</span>
|
|
</header>
|
|
|
|
<div id="messages"></div>
|
|
|
|
<div id="typing-indicator"></div>
|
|
|
|
<div id="input-area">
|
|
<div id="input-box">
|
|
<button class="input-btn" title="파일 첨부">📎</button>
|
|
<textarea
|
|
id="msg-input"
|
|
rows="1"
|
|
placeholder="메시지 입력 — @bot 으로 GUARDiA Bot 명령 / Shift+Enter 줄바꿈"
|
|
></textarea>
|
|
<button class="input-btn" id="send-btn" title="전송">➤</button>
|
|
</div>
|
|
<div id="input-hint">
|
|
<strong>@bot 도움</strong> — 명령어 목록 |
|
|
<strong>@bot 배포</strong> — 배포 SR 생성 |
|
|
<strong>@bot 서버 상태</strong> — 인프라 현황
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<div id="conn-status"></div>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|