From d97285203895db587a2209b247d87db6224e0f73 Mon Sep 17 00:00:00 2001 From: DESKTOP-TKLFCPRython Date: Sun, 31 May 2026 12:16:09 +0900 Subject: [PATCH] =?UTF-8?q?feat(homepage):=20GUARDiA=20=EC=86=8C=EA=B0=9C?= =?UTF-8?q?=20=ED=99=94=EB=A9=B4=20=EC=8B=A4=EC=A0=9C=20=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=A6=B0=EC=83=B7=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Playwright headless 촬영으로 실제 배포 화면 스크린샷 10장 캡쳐 ITSM: 대시보드/SR목록/인시던트/AI에이전트/라이선스 (5장) Manager: 대시보드/DR관제/네트워크장비/CSAP점검 (4장) Messenger: 모바일 앱 화면 (1장) - GuardiaDetail.jsx: 3개 섹션으로 분리 표시 - GUARDiA ITSM 5장 (3열 그리드) - GUARDiA Manager 4장 (2열 그리드) - GUARDiA Messenger 모바일 앱 (세로 비율) - 탭 메뉴: 'Manager' 탭 신규 추가 (4장 2열 뷰) - GuardiaDetail.css: 모바일 앱 세로 스크린샷 스타일 추가 Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/pages/GuardiaDetail.css | 12 ++++ frontend/src/pages/GuardiaDetail.jsx | 95 +++++++++++++++++++++++++++- 2 files changed, 106 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/GuardiaDetail.css b/frontend/src/pages/GuardiaDetail.css index 02a7975..6d60a12 100644 --- a/frontend/src/pages/GuardiaDetail.css +++ b/frontend/src/pages/GuardiaDetail.css @@ -85,6 +85,18 @@ gap: 20px; margin-top: 40px; } +/* 모바일 앱 스크린샷: 세로 비율 */ +.gd-screenshots--mobile { + grid-template-columns: repeat(3, 1fr); + max-width: 720px; + margin-left: auto; + margin-right: auto; +} +.screenshot-card--mobile .screenshot-img { + aspect-ratio: 9/16; + object-fit: cover; + border-radius: 12px 12px 0 0; +} .screenshot-card { border-radius: var(--radius); overflow: hidden; diff --git a/frontend/src/pages/GuardiaDetail.jsx b/frontend/src/pages/GuardiaDetail.jsx index 7eecf6a..ba25dcc 100644 --- a/frontend/src/pages/GuardiaDetail.jsx +++ b/frontend/src/pages/GuardiaDetail.jsx @@ -139,6 +139,7 @@ export default function GuardiaDetail() { {[ {id:'features', label:'핵심 기능'}, {id:'messenger', label:'Messenger Bot'}, + {id:'manager', label:'Manager'}, {id:'editions', label:'에디션 비교'}, {id:'tech', label:'기술 스택'}, {id:'usecase', label:'도입 사례'}, @@ -163,11 +164,17 @@ export default function GuardiaDetail() {
{/* 실행 화면 스크린샷 */} + {/* GUARDiA ITSM 실행 화면 */} +
+ GUARDiA ITSM +

+ IT 서비스 관리 플랫폼 +

+
{[ {file:'01_dashboard', caption:'통합 대시보드 — SR·SLA·AI 인사이트'}, {file:'02_sr_list', caption:'SR 서비스 요청 — 칸반/목록 뷰'}, - {file:'03_si_project', caption:'PMS 프로젝트 — WBS·산출물·보고서'}, {file:'04_incidents', caption:'인시던트 관리 — AI 자동 RCA'}, {file:'05_agents', caption:'AI 에이전트 — Ollama 온프레미스'}, {file:'06_license', caption:'라이선스 관리 — 에디션·체험판'}, @@ -184,6 +191,57 @@ export default function GuardiaDetail() { ))}
+ {/* GUARDiA Manager 실행 화면 */} +
+ GUARDiA Manager +

+ 통합 관제 관리자 포털 +

+
+
+ {[ + {file:'07_manager_dashboard', caption:'Manager 대시보드 — 서버·배포·SLA 통합 관제'}, + {file:'08_manager_dr', caption:'DR 재해복구 관제 — RTO/RPO 실적 추적'}, + {file:'09_manager_network', caption:'네트워크 장비 관제 — 스위치·방화벽 설정 백업'}, + {file:'10_manager_csap', caption:'CSAP 보안 점검 — 준수율 자동 대시보드'}, + ].map((s,i) => ( +
+ {s.caption}{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/> +
+ 🖥️준비 중 +
+
{s.caption}
+
+ ))} +
+ + {/* GUARDiA Messenger 모바일 앱 */} +
+ GUARDiA Messenger +

+ 모바일 앱 (Android · iOS) +

+
+
+ {[ + {file:'06_mobile_home', caption:'홈 대시보드 — SR·서버 상태'}, + {file:'02_guardia', caption:'SR 관리 — 등록·처리·승인'}, + {file:'05_agents', caption:'AI 챗봇 — 자연어 명령 처리'}, + ].map((s,i) => ( +
+ {s.caption}{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/> +
+ 📱준비 중 +
+
{s.caption}
+
+ ))} +
+

핵심 기능 상세

@@ -302,6 +360,41 @@ export default function GuardiaDetail() { )} + {/* ── GUARDiA Manager ──────────────────────────────── */} + {activeTab === 'manager' && ( +
+
+
+ GUARDiA Manager +

통합 관제 관리자 포털
네이버 클라우드 콘솔 스타일

+
+

+ ITSM·서버·배포·네트워크·보안·AI를 하나의 화면에서 관제합니다.
+ DR 자동화, 네트워크 장비 설정 백업, CSAP 준수율까지 통합 대시보드로 제공합니다. +

+
+
+ {[ + {file:'07_manager_dashboard', caption:'통합 운영 대시보드 — 서버·SR·배포 현황'}, + {file:'08_manager_dr', caption:'DR 재해복구 — RTO/RPO 실적 대시보드'}, + {file:'09_manager_network', caption:'네트워크 장비 — 설정 백업·변경 감지'}, + {file:'10_manager_csap', caption:'CSAP 보안 점검 — 준수율 A~D 등급'}, + ].map((s,i) => ( +
+ {s.caption}{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/> +
+ 🖥️준비 중 +
+
{s.caption}
+
+ ))} +
+
+
+ )} + {/* ── 에디션 비교 ──────────────────────────────────── */} {activeTab === 'editions' && (