From 012b963a13e7fd97a25ace6cb4d1181c1eb45c55 Mon Sep 17 00:00:00 2001 From: "DESKTOP-TKLFCPR\\ython" Date: Sun, 31 May 2026 12:27:48 +0900 Subject: [PATCH] =?UTF-8?q?feat(homepage):=20GUARDiA=20=EB=AA=A8=EB=B0=94?= =?UTF-8?q?=EC=9D=BC=20=EC=95=B1=20=EB=AA=A9=EC=97=85=20=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A6=B0=EC=83=B7=205=EC=9E=A5=20=EC=83=9D=EC=84=B1=20+=20?= =?UTF-8?q?=EC=95=B1=20=ED=83=AD=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Playwright headless로 HTML 목업 → PNG 스크린샷 변환 11_app_home.png 홈 대시보드 (SR·서버 실시간 현황) 12_app_sr.png SR 서비스 요청 목록 13_app_chat.png AI 챗봇 (Ollama 연동) 14_app_dr.png DR 재해복구 RTO/RPO 모니터링 15_app_network.png 네트워크 장비 백업 현황 - GuardiaDetail.jsx: '모바일 앱' 탭 신규 추가 5장 목업 5열 그리드 (390x844 세로 비율) Google Play / App Store 다운로드 배지 - GuardiaDetail.css: 모바일 스크린샷 5열 그리드 스타일 Co-Authored-By: Claude Sonnet 4.6 --- manual/mockups/m_chat.html | 89 +++++++++++++++++++ manual/mockups/m_dashboard.html | 79 ++++++++++++++++ manual/mockups/m_dr.html | 80 +++++++++++++++++ manual/mockups/m_network.html | 81 +++++++++++++++++ manual/mockups/m_sr.html | 86 ++++++++++++++++++ .../frontend/src/pages/GuardiaDetail.css | 25 ++++-- .../frontend/src/pages/GuardiaDetail.jsx | 53 +++++++++++ 7 files changed, 486 insertions(+), 7 deletions(-) create mode 100644 manual/mockups/m_chat.html create mode 100644 manual/mockups/m_dashboard.html create mode 100644 manual/mockups/m_dr.html create mode 100644 manual/mockups/m_network.html create mode 100644 manual/mockups/m_sr.html diff --git a/manual/mockups/m_chat.html b/manual/mockups/m_chat.html new file mode 100644 index 00000000..b944daaa --- /dev/null +++ b/manual/mockups/m_chat.html @@ -0,0 +1,89 @@ + + + +
9:41● ●● ▐▌
+
+
🤖
+

GUARDiA AI

Ollama llama3:8b 연결됨

+
+
+
+
🤖
+
+
안녕하세요 홍 관리자님! 👋
GUARDiA AI 어시스턴트입니다.
무엇을 도와드릴까요?
+
9:35
+
+
+
+
+
서울시청 WAS-01 서비스 상태 확인해줘
+
9:40
+
+
+
+
🤖
+
+
📡 WAS-01 상태 확인 중...

✅ 서비스 정상 운영 중
• CPU: 34% | 메모리: 2.1/4GB
• Tomcat 8.5.99 — UP (14일)
• 최근 에러로그: 없음

⚡ 응답시간: 12ms (정상 범위)
+
9:41
+
+
+
+
+
DR 테스트 실행해줘
+
9:41
+
+
+
+
🤖
+
+
🛡️ DR 복구 테스트 시작합니다

시나리오: WAS-01 장애
단계 1/4 ✅ 서비스 중단 확인
단계 2/4 🔄 대기 서버 활성화 중...
+
9:41
+
+
+
+
+ 서버 상태 확인 + SR 목록 보여줘 + 최근 인시던트 + DR 테스트 실행 +
+
+
메시지 입력...
+
➤
+
+
+
📊
홈
+
📋
SR
+
🛡️
DR
+
🤖
AI
+
⚙️
설정
+
+ diff --git a/manual/mockups/m_dashboard.html b/manual/mockups/m_dashboard.html new file mode 100644 index 00000000..9b96393d --- /dev/null +++ b/manual/mockups/m_dashboard.html @@ -0,0 +1,79 @@ + + + + +
9:41● ●● ▐▌
+
+
안녕하세요
+
홍 관리자님 👋
+ 🟢 ITSM 운영 중  |  Enterprise +
+
+
+
23
오늘 SR 접수
▲ 3 증가
+
7
처리 대기
SLA 위험 2건
+
+
+
98.2%
서버 가용률
24대 중 24대 정상
+
14
오늘 배포
성공 13 / 실패 1
+
+
+

최근 서비스 요청

+
행정망 WAS 서비스 장애
서울시청 · 10분 전
처리중
+
Tomcat 재기동 요청
안산시청 · 23분 전
대기
+
DB 백업 스케줄 변경
수원시청 · 1시간 전
완료
+
+
+

서버 상태

+
WAS-서울시청-01
응답 12ms
● 정상
+
DB-안산시청-01
응답 45ms
⚠ 주의
+
WEB-수원시청-01
응답 8ms
● 정상
+
+
+
+
📊
홈
+
📋
SR
+
🛡️
DR
+
🤖
AI
+
⚙️
설정
+
+ diff --git a/manual/mockups/m_dr.html b/manual/mockups/m_dr.html new file mode 100644 index 00000000..dc408d7d --- /dev/null +++ b/manual/mockups/m_dr.html @@ -0,0 +1,80 @@ + + + +
9:41● ●● ▐▌
+

🛡️ DR 재해복구

RTO/RPO 목표 대비 실적 모니터링

+
+
+
5
전체
+
3
PASS
+
1
FAIL
+
1
미테스트
+
+
+

시나리오 목록

+
+
서울시청 WAS 장애PASS
+
RTO 목표
120분
+
RTO 실적
18분
+
최근 테스트: 2026-05-30 ✔ 충족
+
+
+
안산시청 DB 페일오버PASS
+
RTO 목표
240분
+
RTO 실적
45분
+
최근 테스트: 2026-05-29 ✔ 충족
+
+
+
수원시청 사이트 장애FAIL
+
RTO 목표
200분
+
RTO 실적
320분
+
최근 테스트: 2026-05-28 ✘ 목표 초과
+
+
+
화성시청 네트워크 장애미테스트
+
테스트 예정: 2026-06-15
+
+
+
+
+
📊
홈
+
📋
SR
+
🛡️
DR
+
🤖
AI
+
⚙️
설정
+
+ diff --git a/manual/mockups/m_network.html b/manual/mockups/m_network.html new file mode 100644 index 00000000..34a9edce --- /dev/null +++ b/manual/mockups/m_network.html @@ -0,0 +1,81 @@ + + + +
9:41● ●● ▐▌
+

🔀 네트워크 장비

스위치·라우터·방화벽 관제

+
+
+
+
12
전체
+
10
정상
+
2
미백업
+
+
+
+
🔀
+
Core-Switch-서울-01
CISCO Catalyst 9300 · 서울시청 IDC
+
✅
+
+
SWITCHcisco_ios백업 2일 전
+
최근 백업: 2026-05-29 · 변경 0줄백업
+
+
+
+
🛡️
+
FW-안산-01
PIOLINK TPLINK · 안산시청
+
⚠️
+
+
FIREWALLlinux미백업 8일
+
갱신 필요 — 8일 초과백업 필요
+
+
+
+
🔗
+
Router-수원-01
HUAWEI AR3200 · 수원시청
+
✅
+
+
ROUTERhuawei_vrp백업 1일 전
+
최근 백업: 2026-05-30 · 변경 3줄백업
+
+
+
+
📊
홈
+
📋
SR
+
🛡️
DR
+
🤖
AI
+
⚙️
설정
+
+ diff --git a/manual/mockups/m_sr.html b/manual/mockups/m_sr.html new file mode 100644 index 00000000..61056236 --- /dev/null +++ b/manual/mockups/m_sr.html @@ -0,0 +1,86 @@ + + + +
9:41● ●● ▐▌
+

서비스 요청

전체 23건 · 대기 7건

+
+ 전체 + 처리중 + 대기 + 완료 + CRITICAL +
+
+
+
SR-20260531-0042CRITICAL
+
행정망 WAS 서비스 장애 — 즉시 대응 요망
+
서울시청
WAS-01
10분 전
+
김
김엔지니어
처리중
+
+
+
SR-20260531-0041HIGH
+
Tomcat 8.5 재기동 요청
+
안산시청
WAS-02
23분 전
+
박
박엔지니어
대기
+
+
+
SR-20260531-0040MEDIUM
+
DB 백업 스케줄 매일 02:00 변경
+
수원시청
DB-01
1시간 전
+
이
이엔지니어
완료
+
+
+
SR-20260531-0039MEDIUM
+
SSL 인증서 갱신 — 만료 7일 전
+
화성시청
WEB-01
2시간 전
+
최
최엔지니어
접수됨
+
+
+
＋
+
+
📊
홈
+
📋
SR
+
🛡️
DR
+
🤖
AI
+
⚙️
설정
+
+ diff --git a/workspace/zioinfo-web/frontend/src/pages/GuardiaDetail.css b/workspace/zioinfo-web/frontend/src/pages/GuardiaDetail.css index 6d60a12c..e9231dd9 100644 --- a/workspace/zioinfo-web/frontend/src/pages/GuardiaDetail.css +++ b/workspace/zioinfo-web/frontend/src/pages/GuardiaDetail.css @@ -85,17 +85,28 @@ gap: 20px; margin-top: 40px; } -/* 모바일 앱 스크린샷: 세로 비율 */ +/* 모바일 앱 스크린샷: 세로 비율 5열 */ .gd-screenshots--mobile { - grid-template-columns: repeat(3, 1fr); - max-width: 720px; - margin-left: auto; - margin-right: auto; + grid-template-columns: repeat(5, 1fr); + gap: 14px; +} +.screenshot-card--mobile { + border-radius: 16px; + overflow: hidden; + box-shadow: 0 8px 32px rgba(0,0,0,.25); + border: 3px solid #1e293b; } .screenshot-card--mobile .screenshot-img { - aspect-ratio: 9/16; + width: 100%; + aspect-ratio: 390/844; object-fit: cover; - border-radius: 12px 12px 0 0; + display: block; +} +@media (max-width: 900px) { + .gd-screenshots--mobile { grid-template-columns: repeat(3, 1fr); } +} +@media (max-width: 600px) { + .gd-screenshots--mobile { grid-template-columns: repeat(2, 1fr); } } .screenshot-card { border-radius: var(--radius); diff --git a/workspace/zioinfo-web/frontend/src/pages/GuardiaDetail.jsx b/workspace/zioinfo-web/frontend/src/pages/GuardiaDetail.jsx index ba25dcc7..c464d271 100644 --- a/workspace/zioinfo-web/frontend/src/pages/GuardiaDetail.jsx +++ b/workspace/zioinfo-web/frontend/src/pages/GuardiaDetail.jsx @@ -138,6 +138,7 @@ export default function GuardiaDetail() {
{[ {id:'features', label:'핵심 기능'}, + {id:'app', label:'모바일 앱'}, {id:'messenger', label:'Messenger Bot'}, {id:'manager', label:'Manager'}, {id:'editions', label:'에디션 비교'}, @@ -258,6 +259,58 @@ export default function GuardiaDetail() { )} + {/* ── 모바일 앱 ────────────────────────────────────── */} + {activeTab === 'app' && ( +
+
+
+ GUARDiA Messenger App +

현장에서 바로
스마트폰으로 관제

+
+

+ Android · iOS 모두 지원. SR 접수·처리, DR 복구 테스트, 네트워크 장비 관제,
+ AI 챗봇 명령까지 — 어디서든 GUARDiA를 손에 쥐세요. +

+
+
+ {[ + {file:'11_app_home', caption:'홈 대시보드 — SR·서버 실시간 현황'}, + {file:'12_app_sr', caption:'SR 서비스 요청 — 등록·처리·완료'}, + {file:'13_app_chat', caption:'AI 챗봇 — 자연어 명령으로 서버 제어'}, + {file:'14_app_dr', caption:'DR 재해복구 — RTO/RPO 실적 모니터링'}, + {file:'15_app_network', caption:'네트워크 장비 — 백업·상태 현장 점검'}, + ].map((s,i) => ( +
+ {s.caption}{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/> +
+ 📱준비 중 +
+
{s.caption}
+
+ ))} +
+ + {/* 앱 스토어 배지 */} + +
+
+ )} + {/* ── 메신저 봇 상세 소개 ──────────────────────────── */} {activeTab === 'messenger' && (