97f532e64f
## index.html (기반 메타태그) - title: 풀네임 + 키워드 포함 - description: 160자 최적화 - keywords: 지오정보기술·GUARDiA·공공기관IT·안산IT기업 등 - og:type/title/description/url/image/locale - twitter:card/title/description/image - JSON-LD: Organization (주소·전화·대표자) + WebSite 스키마 - 네이버/구글 서치콘솔 인증 주석 준비 ## public/sitemap.xml (26개 URL) - priority: 홈 1.0, GUARDiA 0.9, 오시는길·문의 0.8 - changefreq: 뉴스/공지 weekly, 솔루션 monthly, 약관 yearly ## public/robots.txt - Googlebot/Yeti(네이버) Allow, Baiduspider Disallow - /admin/ /api/ Disallow - Sitemap 경로 명시 ## hooks/useSeoMeta.js - 페이지별 title/description/og/twitter/canonical 동적 업데이트 ## 적용 페이지 (6개) - Home: AI 인프라 자율 운영 키워드 - GuardiaDetail: GUARDiA ITSM 상세 설명 - Company>Greeting: CEO 인사말·홍영택 - Company>Location: 안산 주소·전화번호 - Privacy/Terms/Sitemap: 각 페이지 설명 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
560 lines
30 KiB
JavaScript
560 lines
30 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:'카카오워크, 네이버웍스, 슬랙 등 익숙한 메신저에서 /deploy, /status, /incident 명령으로 인프라를 즉시 제어.' },
|
||
{ icon:'📊', title:'통합 ITSM 대시보드',
|
||
desc:'SR·인시던트·변경관리·SLA·CMDB·예측 유지보수를 단일 플랫폼에서 관리. 7일 추이 차트와 AI 인사이트 실시간 제공.' },
|
||
{ 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:'공공기관 필수 준수',
|
||
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 = [
|
||
{ 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: '/sla', desc: 'SLA 위반 현황 목록', cat: 'SR 관리' },
|
||
{ cmd: '/incident <제목> [P1~P4]', desc: '인시던트 빠른 등록', cat: '인시던트' },
|
||
{ cmd: '/oncall', desc: '현재 당직자 즉시 조회', cat: '인시던트' },
|
||
{ cmd: '/rca <INC-ID>', desc: 'AI 자동 RCA 근본원인 분석', cat: '인시던트' },
|
||
{ cmd: '/escalate <SR-ID>', desc: '당직자에게 에스컬레이션', cat: '인시던트' },
|
||
{ cmd: '!deploy <세션ID>', desc: 'WAS 배포 실행 (SSH)', cat: '배포 제어' },
|
||
{ cmd: '/rollback <세션ID>', desc: '긴급 롤백', cat: '배포 제어' },
|
||
{ cmd: '!health <서버명>', desc: '서버 헬스체크', cat: '배포 제어' },
|
||
{ cmd: '/pms <프로젝트코드>', desc: '프로젝트 진척 현황', cat: 'PMS' },
|
||
{ cmd: '/report <코드> weekly', desc: '주간 보고서 메신저 발송', cat: 'PMS' },
|
||
{ cmd: '/wbs <코드>', desc: 'WBS 지연 현황', cat: 'PMS' },
|
||
{ cmd: '/scouter <서버명>', desc: 'Scouter APM 실시간 메트릭', cat: '모니터링' },
|
||
{ cmd: '/scan', desc: '시큐어코딩·보안 자동 점검', cat: '보안' },
|
||
{ cmd: '/vuln <서버|IP>', desc: '취약점 스캔', cat: '보안' },
|
||
{ cmd: '/notify <메시지>', 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 / SQLite'] },
|
||
{ category: 'AI·LLM', items: ['Ollama (온프레미스)', 'llama3.1:8b / codellama', '외부 API 완전 차단'] },
|
||
{ 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 형상관리', 'Docker / K8s'] },
|
||
{ category: '모니터링', items: ['Scouter APM', 'Prometheus/Grafana', 'ELK/Splunk SIEM'] },
|
||
];
|
||
|
||
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>8가지 핵심 기능</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:'01_dashboard', caption:'통합 대시보드 — SR·SLA·AI 인사이트'},
|
||
{file:'02_sr_list', caption:'SR 서비스 요청 — 칸반/목록 뷰'},
|
||
{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>
|
||
);
|
||
}
|