7c0472b989
GuardiaDetail.jsx: - FEATURES: 8 -> 12 (RPA봇, 스크랩핑, DR, CSAP, 자연어명령 추가) - BOT_COMMANDS: 19 -> 44 (스크랩봇, CI/CD, PMS, 보안, 디자인 명령어 추가) - TECH_STACK: Vector DB(pgvector/ChromaDB/LangChain), 자동화봇 추가 Jenkinsfile: - sparse checkout: manual/ 폴더 체크아웃 제외 (배포 대상 아님) - workspace/zioinfo-web/Jenkinsfile 동일 적용 Manuals: - manual/41_zio서버_DB_연결정보.md: PostgreSQL/Gitea/Ollama/ChromaDB/SMTP/SSH - manual/42_zio서버_소프트웨어_구성도.md: 전체 SW 구성도 + 아키텍처 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
604 lines
34 KiB
JavaScript
604 lines
34 KiB
JavaScript
import React, { useState } from 'react';
|
||
import { Link } from 'react-router-dom';
|
||
import './GuardiaDetail.css';
|
||
import { useSeoMeta } from '../hooks/useSeoMeta';
|
||
|
||
const FEATURES = [
|
||
{ icon:'🤖', title:'AI 에이전트 자동화',
|
||
desc:'Ollama 온프레미스 sLLM 기반. 메신저 한 줄 명령 → 자연어 파싱 → 자동 배포·운영. 외부 API 완전 차단으로 폐쇄망 환경 최적화.' },
|
||
{ icon:'🔧', title:'에이전트리스 아키텍처',
|
||
desc:'대상 서버에 어떤 소프트웨어도 설치하지 않습니다. 표준 SSH/SFTP 프로토콜만으로 레거시 WAS(Tomcat/JBoss/WebLogic)를 원격 관리.' },
|
||
{ icon:'💬', title:'ChatOps + 자연어 명령',
|
||
desc:'카카오워크·네이버웍스·슬랙에서 자연어로 인프라 제어. "서버1 헬스체크 해줘", "SR-XXXX 배포해줘" 등 자연어를 자동으로 봇 명령어로 변환.' },
|
||
{ icon:'📊', title:'통합 ITSM 대시보드',
|
||
desc:'SR·인시던트·변경관리·SLA·CMDB·예측 유지보수를 단일 플랫폼에서 관리. 7일 추이 차트와 AI 인사이트 실시간 제공.' },
|
||
{ icon:'🤖', title:'RPA 봇 자동화',
|
||
desc:'소스코드 기반 Validation 학습 → 반복 업무(SR 자동 접수·승인·상태 변경) 자동화. dry_run 검증 후 실제 API 호출. APScheduler 크론 연동.' },
|
||
{ icon:'🕷️', title:'웹 스크랩핑 봇',
|
||
desc:'URL 스크랩 → DB 저장 → 상태 관리(DRAFT/PUBLISHED/DELETED). 게시 시 메신저 자동 알림. Manager UI에서 삭제·원복·게시 직접 관리.' },
|
||
{ icon:'🔒', title:'엔터프라이즈 보안',
|
||
desc:'AES-256-GCM 암호화, MFA/OTP, PAM 특권접근관리, SHA-256 해시체인 불변 감사로그, Zero Trust 지속 인증.' },
|
||
{ icon:'🏗️', title:'PMS 프로젝트 관리',
|
||
desc:'WBS·산출물·일간/주간/월간 자동 보고서(Excel·PDF·PPT). 이슈·위험 관리, Gitea 연동, Jenkins CI/CD 파이프라인.' },
|
||
{ icon:'🛡️', title:'DR 재해복구 자동화',
|
||
desc:'DR 시나리오 관리, Failover 실행, 백업 무결성 검증, 복구 테스트, RTO/RPO 실적 추적. 네트워크 장비(스위치·방화벽) SSH 설정 백업·변경 감지.' },
|
||
{ icon:'✅', title:'CSAP 보안 자동 점검',
|
||
desc:'행안부 공공기관 보안 체크리스트 100개 항목 자동 점검. 증적 수집·Excel/HTML 보고서 자동 생성. ISMS-P 준수율 대시보드 실시간 제공.' },
|
||
{ icon:'🌐', title:'공공기관 필수 준수',
|
||
desc:'행안부 SW 보안약점 자동 점검, KWCAG 2.1 웹접근성, 개인정보보호법 준수 스캔. 19개 공공기관 체크리스트 내장.' },
|
||
{ icon:'📡', title:'Scouter APM 모니터링',
|
||
desc:'Java WAS(Tomcat/JBoss) 전문 APM. CPU·Heap·TPS·응답시간 실시간 수집, 이상 탐지 시 자동 인시던트 생성.' },
|
||
];
|
||
|
||
const EDITIONS = [
|
||
{
|
||
name: 'COMMUNITY', badge: '무료',
|
||
color: '#10B981',
|
||
target: '소규모 기관·검토용',
|
||
features: ['기본 SR 관리 (무제한)', 'CMDB 서버 20대', '사용자 10명', '대시보드', '봇 기본 명령어'],
|
||
cta: '무료 시작',
|
||
href: '/support/contact?type=community',
|
||
},
|
||
{
|
||
name: 'STANDARD', badge: '권장',
|
||
color: 'var(--primary)',
|
||
target: '중형 기관',
|
||
features: ['전체 ITSM 기능', 'AI 에이전트 자동화', 'LDAP/AD 연동', 'MFA 보안', 'SLA 관리', 'PMS 기본'],
|
||
cta: '도입 문의',
|
||
href: '/support/contact?type=standard',
|
||
highlight: true,
|
||
},
|
||
{
|
||
name: 'ENTERPRISE', badge: '맞춤',
|
||
color: '#6366F1',
|
||
target: '대형 관공서·광역기관',
|
||
features: ['무제한 서버·기관', '취약점 자동 스캔', 'Scouter APM', 'FinOps 비용 분석', 'SIEM 연동', '전담 기술 지원'],
|
||
cta: '전문가 상담',
|
||
href: '/support/contact?type=enterprise',
|
||
},
|
||
];
|
||
|
||
/* ── 메신저 봇 명령어 목록 ──────────────────────────────── */
|
||
const BOT_COMMANDS = [
|
||
/* SR 관리 */
|
||
{ cmd: '/sr <제목>', desc: 'SR(서비스요청) 즉시 접수', cat: 'SR 관리' },
|
||
{ cmd: '/status', desc: '시스템 전체 현황 요약', cat: 'SR 관리' },
|
||
{ cmd: '/assign <SR-ID> <담당자>', desc: 'SR 담당자 즉시 배정', cat: 'SR 관리' },
|
||
{ cmd: '/approve <SR-ID>', desc: 'SR 또는 자율운영 작업 즉시 승인', cat: 'SR 관리' },
|
||
{ cmd: '/reject <SR-ID> [사유]', desc: 'SR 반려', cat: 'SR 관리' },
|
||
{ cmd: '/bulk <action> <SR-ID...>', desc: 'SR 대량 처리 (close/assign/status)', cat: 'SR 관리' },
|
||
{ cmd: '/sla', desc: 'SLA 위반 현황 목록', cat: 'SR 관리' },
|
||
{ cmd: '/escalate <SR-ID>', desc: '당직자에게 에스컬레이션', cat: 'SR 관리' },
|
||
/* 인시던트 */
|
||
{ cmd: '/incident <제목> [P1~P4]', desc: '인시던트 빠른 등록', cat: '인시던트' },
|
||
{ cmd: '/oncall', desc: '현재 당직자 즉시 조회', cat: '인시던트' },
|
||
{ cmd: '/rca <INC-ID>', desc: 'AI 자동 RCA 근본원인 분석', cat: '인시던트' },
|
||
/* 배포/CI-CD */
|
||
{ cmd: '!vibe <SR-ID>', desc: '바이브 코딩 세션 시작', cat: '배포 CI-CD' },
|
||
{ cmd: '!build <세션ID>', desc: '빌드 실행', cat: '배포 CI-CD' },
|
||
{ cmd: '!deploy <세션ID>', desc: 'WAS 배포 실행 (SSH)', cat: '배포 CI-CD' },
|
||
{ cmd: '/rollback <세션ID>', desc: '긴급 롤백', cat: '배포 CI-CD' },
|
||
{ cmd: '/cicd [project]', desc: 'Jenkins+Gitea CI/CD 전체 현황', cat: '배포 CI-CD' },
|
||
{ cmd: '/jenkins <job> [build|log]', desc: 'Jenkins 빌드 트리거·로그', cat: '배포 CI-CD' },
|
||
{ cmd: '/git <repo> [log|pr|branch]', desc: 'Gitea 저장소 정보', cat: '배포 CI-CD' },
|
||
{ cmd: '/release <project> [버전]', desc: '릴리즈 배포 파이프라인', cat: '배포 CI-CD' },
|
||
/* 인프라 제어 */
|
||
{ cmd: '!health <서버명>', desc: '서버 헬스체크', cat: '인프라' },
|
||
{ cmd: '!log <서버명>', desc: '서버 로그 분석', cat: '인프라' },
|
||
{ cmd: '!sm <서버> <스크립트>', desc: 'SM 원격 스크립트 실행', cat: '인프라' },
|
||
{ cmd: '/topology <서버명>', desc: 'CI 의존관계 토폴로지 조회', cat: '인프라' },
|
||
{ cmd: '/scouter <서버명>', desc: 'Scouter APM 실시간 메트릭', cat: '인프라' },
|
||
/* PMS 프로젝트 */
|
||
{ cmd: '/pms <프로젝트코드>', desc: '프로젝트 진척 현황', cat: 'PMS' },
|
||
{ cmd: '/report <코드> [daily|weekly|monthly]', desc: '보고서 발송', cat: 'PMS' },
|
||
{ cmd: '/wbs <코드>', desc: 'WBS 지연 현황', cat: 'PMS' },
|
||
{ cmd: '/deliverables <코드>', desc: '산출물 제출 현황', cat: 'PMS' },
|
||
{ cmd: '/issues <코드>', desc: '미결 이슈 목록', cat: 'PMS' },
|
||
/* 보안 */
|
||
{ cmd: '/scan', desc: '시큐어코딩·보안 자동 점검', cat: '보안' },
|
||
{ cmd: '/vuln <서버|IP>', desc: '취약점 스캔', cat: '보안' },
|
||
{ cmd: '/checklist', desc: '공공기관 보안 이행 현황', cat: '보안' },
|
||
{ cmd: '/perf [url]', desc: '성능·부하 테스트', cat: '보안' },
|
||
{ cmd: '/autoq', desc: '자율 운영 승인 대기 목록', cat: '자율 운영' },
|
||
/* 스크랩핑 봇 */
|
||
{ cmd: '!scrap <url>', desc: 'URL 즉시 스크랩', cat: '스크랩' },
|
||
{ cmd: '!scrap list [n]', desc: '최근 스크랩 결과 목록', cat: '스크랩' },
|
||
{ cmd: '!scrap publish <id>', desc: '스크랩 게시 + 메신저 알림', cat: '스크랩' },
|
||
{ cmd: '!scrap del <id>', desc: '스크랩 삭제', cat: '스크랩' },
|
||
{ cmd: '!scrap restore <id>', desc: '스크랩 원복', cat: '스크랩' },
|
||
/* 디자인 */
|
||
{ cmd: '/design capture', desc: 'UI 현재 화면 스크린샷 (Playwright)', cat: '디자인' },
|
||
{ cmd: '/design variant <키워드>', desc: 'Variant 디자인 레퍼런스 탐색', cat: '디자인' },
|
||
{ cmd: '/design <시스템>', desc: '시스템별 UI 개편 실행', cat: '디자인' },
|
||
/* 공지 */
|
||
{ cmd: '/notify <메시지>', desc: '운영팀 전체 공지 발송', cat: '공지' },
|
||
{ cmd: '/license', desc: '라이선스 상태 조회', cat: '공지' },
|
||
];
|
||
|
||
const MESSENGER_PLATFORMS = [
|
||
{ name: '카카오워크', icon: '💬', color: '#FAE100', textColor: '#3C1E1E', desc: '결재 버튼 + 봇 명령 완벽 지원' },
|
||
{ name: '네이버웍스', icon: '🟢', color: '#03C75A', textColor: '#fff', desc: 'Flex 메시지 + Rich 결과 표시' },
|
||
{ name: '슬랙', icon: '💜', color: '#611F69', textColor: '#fff', desc: '슬래시 명령 + 블록킷 UI' },
|
||
{ name: '자체 메신저', icon: '🔵', color: '#0051A2', textColor: '#fff', desc: 'GUARDiA 내장 Slack형 메신저' },
|
||
];
|
||
|
||
const TECH_STACK = [
|
||
{ category: 'Backend', items: ['Python 3.11 / FastAPI', 'SQLAlchemy Async', 'PostgreSQL 16 / SQLite'] },
|
||
{ category: 'AI·LLM', items: ['Ollama (온프레미스)', 'llama3:8b / codellama', '외부 API 완전 차단'] },
|
||
{ category: 'Vector DB', items: ['pgvector 0.6.0 (PostgreSQL 확장)', 'ChromaDB 1.5.9', 'LangChain 1.3.2 RAG'] },
|
||
{ category: '자동화 봇', items: ['RPA Engine (소스 기반 Validation 학습)', '스크랩핑 봇 (BeautifulSoup)', '자연어 명령 파서 (Ollama)'] },
|
||
{ category: 'Infra', items: ['paramiko SSH/SFTP', '에이전트리스', 'AES-256-GCM 암호화'] },
|
||
{ category: 'Frontend', items: ['React.js / PWA', 'Chart.js 대시보드', 'D3.js 토폴로지'] },
|
||
{ category: 'DevOps', items: ['Jenkins CI/CD', 'Gitea 형상관리', 'APScheduler 크론 스케줄러'] },
|
||
{ category: '모니터링', items: ['Scouter APM', 'Prometheus/Grafana', 'DR 자동화·CSAP 점검'] },
|
||
];
|
||
|
||
export default function GuardiaDetail() {
|
||
useSeoMeta({
|
||
title: 'GUARDiA ITSM — AI 기반 레거시 인프라 자율 운영 플랫폼',
|
||
description: 'GUARDiA ITSM은 메신저 한 줄 명령으로 공공기관 레거시 서버를 자동 운영합니다. 에이전트 설치 없이 SSH/SFTP로 배포·장애·보안 운영을 완전 자동화.',
|
||
path: '/solution/guardia',
|
||
keywords: 'GUARDiA ITSM, AI ITSM, 공공기관 인프라 자동화, ChatOps, 에이전트리스, 레거시 서버 자동화',
|
||
image: '/screenshots/01_dashboard.png',
|
||
});
|
||
const [activeTab, setActiveTab] = useState('features');
|
||
|
||
return (
|
||
<main id="main-content" className="guardia-page">
|
||
|
||
{/* ── 히어로 ────────────────────────────────────────── */}
|
||
<section className="gd-hero">
|
||
<div className="gd-hero-overlay" />
|
||
<div className="container gd-hero-inner">
|
||
<div className="gd-hero-text">
|
||
<span className="badge badge-new" style={{fontSize:'12px',padding:'4px 12px'}}>NEW v2.0</span>
|
||
<h1 className="gd-hero-title">
|
||
<span>GUARDiA</span> ITSM
|
||
</h1>
|
||
<p className="gd-hero-sub">
|
||
AI 기반 레거시 인프라 자율 운영 플랫폼<br/>
|
||
<strong>메신저 한 줄 명령</strong>으로 1,000개 관공서 인프라를 자동화
|
||
</p>
|
||
<div className="gd-hero-actions">
|
||
<Link to="/support/contact?type=demo" className="btn btn-white btn-lg">
|
||
무료 데모 신청
|
||
</Link>
|
||
<a href="#features" className="btn btn-lg" style={{color:'rgba(255,255,255,.85)',border:'1px solid rgba(255,255,255,.3)'}}>
|
||
기능 살펴보기 ↓
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div className="gd-hero-stats">
|
||
{[
|
||
{val:'1,000+', lab:'관리 기관'},
|
||
{val:'99.9%', lab:'가용성'},
|
||
{val:'70%', lab:'운영 비용 절감'},
|
||
{val:'0개', lab:'대상 서버 추가 설치'},
|
||
].map((s,i) => (
|
||
<div key={i} className="gd-stat">
|
||
<div className="gd-stat-val">{s.val}</div>
|
||
<div className="gd-stat-lab">{s.lab}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── 탭 메뉴 ──────────────────────────────────────── */}
|
||
<div className="gd-tabs-bar">
|
||
<div className="container">
|
||
<div className="gd-tabs">
|
||
{[
|
||
{id:'features', label:'핵심 기능'},
|
||
{id:'app', label:'모바일 앱'},
|
||
{id:'messenger', label:'Messenger Bot'},
|
||
{id:'manager', label:'Manager'},
|
||
{id:'editions', label:'에디션 비교'},
|
||
{id:'tech', label:'기술 스택'},
|
||
{id:'usecase', label:'도입 사례'},
|
||
].map(t => (
|
||
<button key={t.id}
|
||
className={`gd-tab ${activeTab === t.id ? 'active' : ''}`}
|
||
onClick={() => setActiveTab(t.id)}>
|
||
{t.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── 핵심 기능 ─────────────────────────────────────── */}
|
||
{activeTab === 'features' && (
|
||
<section id="features" className="section">
|
||
<div className="container">
|
||
<div className="section-header">
|
||
<span className="section-label">Core Features</span>
|
||
<h2 className="section-title">GUARDiA가 제공하는<br/><em>12가지 핵심 기능</em></h2>
|
||
<div className="divider" />
|
||
</div>
|
||
{/* 실행 화면 스크린샷 */}
|
||
{/* GUARDiA ITSM 실행 화면 */}
|
||
<div className="section-header" style={{marginBottom:'24px'}}>
|
||
<span className="section-label" style={{fontSize:'12px'}}>GUARDiA ITSM</span>
|
||
<h3 style={{fontSize:'22px',fontWeight:'700',color:'var(--gray-900)',margin:'8px 0 0'}}>
|
||
IT 서비스 관리 플랫폼
|
||
</h3>
|
||
</div>
|
||
<div className="gd-screenshots">
|
||
{[
|
||
{file:'itsm_02_dashboard', caption:'통합 대시보드 — SR·SLA·AI 인사이트 (실제 화면)'},
|
||
{file:'itsm_01_login', caption:'로그인 화면 — JWT + 2FA/OTP 보안'},
|
||
{file:'04_incidents', caption:'인시던트 관리 — AI 자동 RCA'},
|
||
{file:'05_agents', caption:'AI 에이전트 — Ollama 온프레미스'},
|
||
{file:'06_license', caption:'라이선스 관리 — 에디션·체험판'},
|
||
].map((s,i) => (
|
||
<div key={i} className="screenshot-card">
|
||
<img src={`/screenshots/${s.file}.png`} alt={s.caption}
|
||
className="screenshot-img"
|
||
onError={e=>{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/>
|
||
<div className="screenshot-placeholder" style={{display:'none'}}>
|
||
<span className="icon">🖥️</span><span>준비 중</span>
|
||
</div>
|
||
<div className="screenshot-caption">{s.caption}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* GUARDiA Manager 실행 화면 */}
|
||
<div className="section-header" style={{marginTop:'48px',marginBottom:'24px'}}>
|
||
<span className="section-label" style={{fontSize:'12px'}}>GUARDiA Manager</span>
|
||
<h3 style={{fontSize:'22px',fontWeight:'700',color:'var(--gray-900)',margin:'8px 0 0'}}>
|
||
통합 관제 관리자 포털
|
||
</h3>
|
||
</div>
|
||
<div className="gd-screenshots">
|
||
{[
|
||
{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) => (
|
||
<div key={i} className="screenshot-card">
|
||
<img src={`/screenshots/${s.file}.png`} alt={s.caption}
|
||
className="screenshot-img"
|
||
onError={e=>{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/>
|
||
<div className="screenshot-placeholder" style={{display:'none'}}>
|
||
<span className="icon">🖥️</span><span>준비 중</span>
|
||
</div>
|
||
<div className="screenshot-caption">{s.caption}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* GUARDiA Messenger 모바일 앱 */}
|
||
<div className="section-header" style={{marginTop:'48px',marginBottom:'24px'}}>
|
||
<span className="section-label" style={{fontSize:'12px'}}>GUARDiA Messenger</span>
|
||
<h3 style={{fontSize:'22px',fontWeight:'700',color:'var(--gray-900)',margin:'8px 0 0'}}>
|
||
모바일 앱 (Android · iOS)
|
||
</h3>
|
||
</div>
|
||
<div className="gd-screenshots gd-screenshots--mobile">
|
||
{[
|
||
{file:'06_mobile_home', caption:'홈 대시보드 — SR·서버 상태'},
|
||
{file:'02_guardia', caption:'SR 관리 — 등록·처리·승인'},
|
||
{file:'05_agents', caption:'AI 챗봇 — 자연어 명령 처리'},
|
||
].map((s,i) => (
|
||
<div key={i} className="screenshot-card screenshot-card--mobile">
|
||
<img src={`/screenshots/${s.file}.png`} alt={s.caption}
|
||
className="screenshot-img"
|
||
onError={e=>{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/>
|
||
<div className="screenshot-placeholder" style={{display:'none'}}>
|
||
<span className="icon">📱</span><span>준비 중</span>
|
||
</div>
|
||
<div className="screenshot-caption">{s.caption}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="section-header" style={{marginTop:'60px',marginBottom:'32px'}}>
|
||
<h3 style={{fontSize:'28px',fontWeight:'800',color:'var(--gray-900)'}}>핵심 기능 상세</h3>
|
||
</div>
|
||
<div className="gd-features-grid">
|
||
{FEATURES.map((f,i) => (
|
||
<div key={i} className="gd-feature-card card">
|
||
<div className="gd-feature-icon">{f.icon}</div>
|
||
<h3>{f.title}</h3>
|
||
<p>{f.desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* ── 모바일 앱 ────────────────────────────────────── */}
|
||
{activeTab === 'app' && (
|
||
<section className="section">
|
||
<div className="container">
|
||
<div className="section-header">
|
||
<span className="section-label">GUARDiA Messenger App</span>
|
||
<h2 className="section-title">현장에서 바로<br/><em>스마트폰으로 관제</em></h2>
|
||
<div className="divider" />
|
||
<p className="section-desc">
|
||
Android · iOS 모두 지원. SR 접수·처리, DR 복구 테스트, 네트워크 장비 관제,<br/>
|
||
AI 챗봇 명령까지 — 어디서든 GUARDiA를 손에 쥐세요.
|
||
</p>
|
||
</div>
|
||
<div className="gd-screenshots gd-screenshots--mobile">
|
||
{[
|
||
{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) => (
|
||
<div key={i} className="screenshot-card screenshot-card--mobile">
|
||
<img src={`/screenshots/${s.file}.png`} alt={s.caption}
|
||
className="screenshot-img"
|
||
onError={e=>{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/>
|
||
<div className="screenshot-placeholder" style={{display:'none'}}>
|
||
<span className="icon">📱</span><span>준비 중</span>
|
||
</div>
|
||
<div className="screenshot-caption">{s.caption}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 앱 스토어 배지 */}
|
||
<div style={{display:'flex',justifyContent:'center',gap:16,marginTop:40}}>
|
||
<a href="#" style={{display:'flex',alignItems:'center',gap:10,
|
||
padding:'12px 24px',background:'#1e293b',borderRadius:12,
|
||
color:'#e2e8f0',textDecoration:'none',border:'1px solid rgba(255,255,255,.1)'}}>
|
||
<span style={{fontSize:28}}>🤖</span>
|
||
<div><div style={{fontSize:10,opacity:.6}}>다운로드</div><div style={{fontWeight:700,fontSize:15}}>Google Play</div></div>
|
||
</a>
|
||
<a href="#" style={{display:'flex',alignItems:'center',gap:10,
|
||
padding:'12px 24px',background:'#1e293b',borderRadius:12,
|
||
color:'#e2e8f0',textDecoration:'none',border:'1px solid rgba(255,255,255,.1)'}}>
|
||
<span style={{fontSize:28}}>🍎</span>
|
||
<div><div style={{fontSize:10,opacity:.6}}>다운로드</div><div style={{fontWeight:700,fontSize:15}}>App Store</div></div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* ── 메신저 봇 상세 소개 ──────────────────────────── */}
|
||
{activeTab === 'messenger' && (
|
||
<section className="section">
|
||
<div className="container">
|
||
<div className="section-header">
|
||
<span className="section-label">ChatOps Messenger</span>
|
||
<h2 className="section-title">메신저 하나로<br/><em>모든 인프라를 제어</em></h2>
|
||
<div className="divider" />
|
||
<p className="section-desc">
|
||
익숙한 메신저에서 명령어 하나로 서버 배포·장애 대응·보고서 발송까지.<br/>
|
||
GUARDiA Bot은 25개 명령어로 IT 운영의 모든 순간을 지원합니다.
|
||
</p>
|
||
</div>
|
||
|
||
{/* 지원 플랫폼 */}
|
||
<div className="messenger-platforms">
|
||
{MESSENGER_PLATFORMS.map((p,i) => (
|
||
<div key={i} className="messenger-platform" style={{background: p.color}}>
|
||
<span className="platform-icon">{p.icon}</span>
|
||
<div>
|
||
<strong style={{color: p.textColor}}>{p.name}</strong>
|
||
<p style={{color: p.textColor, opacity:.85}}>{p.desc}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 명령어 카탈로그 */}
|
||
<div className="cmd-catalog">
|
||
<h3 className="cmd-catalog-title">25개 봇 명령어 전체 목록</h3>
|
||
{['SR 관리','인시던트','배포 제어','PMS','모니터링','보안','공지'].map(cat => {
|
||
const cmds = BOT_COMMANDS.filter(c => c.cat === cat);
|
||
return (
|
||
<div key={cat} className="cmd-group">
|
||
<h4 className="cmd-group-title">{cat}</h4>
|
||
<div className="cmd-list">
|
||
{cmds.map((c,i) => (
|
||
<div key={i} className="cmd-item">
|
||
<code className="cmd-code">{c.cmd}</code>
|
||
<span className="cmd-desc">{c.desc}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{/* 데모 시나리오 */}
|
||
<div className="messenger-demo">
|
||
<h3 className="demo-title">실제 운영 시나리오</h3>
|
||
<div className="demo-scenario">
|
||
<div className="demo-step">
|
||
<div className="step-num">1</div>
|
||
<div className="step-content">
|
||
<strong>장애 탐지</strong>
|
||
<p>Scouter APM이 서버 CPU 90% 감지 → 자동으로 GUARDiA 운영 채널에 경보 발송</p>
|
||
<div className="chat-bubble bot">🚨 web-01 CPU 90.3% — P2 인시던트 자동 등록: INC-20260530-A1B2C3</div>
|
||
</div>
|
||
</div>
|
||
<div className="demo-step">
|
||
<div className="step-num">2</div>
|
||
<div className="step-content">
|
||
<strong>담당자 즉시 대응</strong>
|
||
<p>메신저에서 RCA 분석 요청</p>
|
||
<div className="chat-bubble user">/rca INC-20260530-A1B2C3</div>
|
||
<div className="chat-bubble bot">
|
||
🤖 AI RCA 분석 완료<br/>
|
||
근본원인: 메모리 누수 (Heap 98%)<br/>
|
||
재발방지: WAS 재기동 + 힙덤프 분석<br/>
|
||
신뢰도: 87%
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="demo-step">
|
||
<div className="step-num">3</div>
|
||
<div className="step-content">
|
||
<strong>원격 조치 실행</strong>
|
||
<p>SSH 재기동 명령 실행</p>
|
||
<div className="chat-bubble user">!sm web-01 tomcat_restart</div>
|
||
<div className="chat-bubble bot">
|
||
✅ web-01 Tomcat 재기동 완료<br/>
|
||
소요: 38초 | CPU: 12% | 정상화
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="demo-step">
|
||
<div className="step-num">4</div>
|
||
<div className="step-content">
|
||
<strong>자동 보고</strong>
|
||
<p>인시던트 처리 결과 자동 보고서 발송</p>
|
||
<div className="chat-bubble user">/notify 22:15 web-01 서버 장애 복구 완료. 원인: 메모리 누수 재발 방지 조치 완료.</div>
|
||
<div className="chat-bubble bot">✅ 운영팀 전체 공지 발송 완료 (ops 채널)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* ── GUARDiA Manager ──────────────────────────────── */}
|
||
{activeTab === 'manager' && (
|
||
<section className="section">
|
||
<div className="container">
|
||
<div className="section-header">
|
||
<span className="section-label">GUARDiA Manager</span>
|
||
<h2 className="section-title">통합 관제 관리자 포털<br/><em>네이버 클라우드 콘솔 스타일</em></h2>
|
||
<div className="divider" />
|
||
<p className="section-desc">
|
||
ITSM·서버·배포·네트워크·보안·AI를 하나의 화면에서 관제합니다.<br/>
|
||
DR 자동화, 네트워크 장비 설정 백업, CSAP 준수율까지 통합 대시보드로 제공합니다.
|
||
</p>
|
||
</div>
|
||
<div className="gd-screenshots" style={{gridTemplateColumns:'repeat(2,1fr)'}}>
|
||
{[
|
||
{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) => (
|
||
<div key={i} className="screenshot-card">
|
||
<img src={`/screenshots/${s.file}.png`} alt={s.caption}
|
||
className="screenshot-img"
|
||
onError={e=>{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/>
|
||
<div className="screenshot-placeholder" style={{display:'none'}}>
|
||
<span className="icon">🖥️</span><span>준비 중</span>
|
||
</div>
|
||
<div className="screenshot-caption">{s.caption}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* ── 에디션 비교 ──────────────────────────────────── */}
|
||
{activeTab === 'editions' && (
|
||
<section className="section">
|
||
<div className="container">
|
||
<div className="section-header">
|
||
<span className="section-label">Editions</span>
|
||
<h2 className="section-title">기관 규모에 맞는<br/><em>에디션 선택</em></h2>
|
||
<div className="divider" />
|
||
</div>
|
||
<div className="gd-editions-grid">
|
||
{EDITIONS.map((e,i) => (
|
||
<div key={i} className={`gd-edition-card ${e.highlight ? 'highlight' : ''}`}
|
||
style={{'--ed-color': e.color}}>
|
||
{e.highlight && <div className="edition-recommend">추천</div>}
|
||
<div className="edition-header">
|
||
<h3>{e.name}</h3>
|
||
<span className="edition-badge">{e.badge}</span>
|
||
</div>
|
||
<p className="edition-target">{e.target}</p>
|
||
<ul className="edition-features">
|
||
{e.features.map((f,j) => (
|
||
<li key={j}><span className="check">✓</span>{f}</li>
|
||
))}
|
||
</ul>
|
||
<Link to={e.href} className="btn edition-cta">
|
||
{e.cta}
|
||
</Link>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* ── 기술 스택 ─────────────────────────────────────── */}
|
||
{activeTab === 'tech' && (
|
||
<section className="section">
|
||
<div className="container">
|
||
<div className="section-header">
|
||
<span className="section-label">Technology</span>
|
||
<h2 className="section-title">검증된<br/><em>기술 스택</em></h2>
|
||
<div className="divider" />
|
||
<p className="section-desc">온프레미스 전용 설계 — 외부 클라우드 의존 없는 완전 폐쇄망 동작</p>
|
||
</div>
|
||
<div className="gd-tech-grid">
|
||
{TECH_STACK.map((t,i) => (
|
||
<div key={i} className="gd-tech-card card">
|
||
<h3 className="tech-category">{t.category}</h3>
|
||
<ul className="tech-items">
|
||
{t.items.map((item,j) => (
|
||
<li key={j}>{item}</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* ── 도입 사례 ─────────────────────────────────────── */}
|
||
{activeTab === 'usecase' && (
|
||
<section className="section">
|
||
<div className="container">
|
||
<div className="section-header">
|
||
<span className="section-label">Use Cases</span>
|
||
<h2 className="section-title">실제 <em>도입 사례</em></h2>
|
||
<div className="divider" />
|
||
</div>
|
||
<div className="gd-usecases">
|
||
{[
|
||
{org:'광역 지방자치단체', result:'레거시 서버 200대 SSH 자동화, 운영 인력 3명→1명', badge:'중앙부처'},
|
||
{org:'공공기관 IT센터', result:'월간 SR 500건 처리, AI 자동분류로 80% 응답시간 단축', badge:'공공기관'},
|
||
{org:'지방 교육청', result:'Tomcat 100대 무중단 배포 자동화, 장애 대응 시간 70% 단축', badge:'교육'},
|
||
].map((u,i) => (
|
||
<div key={i} className="usecase-card card">
|
||
<span className="badge badge-primary">{u.badge}</span>
|
||
<h3>{u.org}</h3>
|
||
<p>{u.result}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* ── CTA ─────────────────────────────────────────────── */}
|
||
<section className="gd-cta">
|
||
<div className="container">
|
||
<h2>지금 바로 무료 데모를 경험해 보세요</h2>
|
||
<p>전문 컨설턴트가 귀 기관 환경에 맞는 최적의 구성을 제안해 드립니다.</p>
|
||
<div className="gd-cta-actions">
|
||
<Link to="/support/contact?type=demo" className="btn btn-white btn-lg">무료 데모 신청</Link>
|
||
<Link to="/support/catalog" className="btn btn-lg" style={{color:'rgba(255,255,255,.8)',border:'1px solid rgba(255,255,255,.3)'}}>제품 소개서</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
);
|
||
}
|