feat(homepage): GUARDiA features expanded to 36+ with 5-category grid layout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

workspace/zioinfo-web/frontend/src/pages/GuardiaDetail.jsx

@@ -3,6 +3,91 @@ import { Link } from 'react-router-dom';
 import './GuardiaDetail.css';
 import { useSeoMeta } from '../hooks/useSeoMeta';
 
+/* 36개 기능을 5개 카테고리로 분류 */
+const FEATURE_CATEGORIES = [
+  {
+    id: 'ai',
+    label: 'AI · 자동화',
+    icon: '🤖',
+    color: '#6366F1',
+    items: [
+      { title: 'AI 에이전트 자동화',       desc: 'Ollama 온프레미스 sLLM. 메신저 한 줄 → 자동 배포·운영. 폐쇄망 완전 지원.' },
+      { title: 'AI 이상 탐지',             desc: '서버·애플리케이션 메트릭 실시간 분석. 이상 패턴 감지 시 자동 인시던트 생성.' },
+      { title: 'AI 코드 리뷰 에이전트',    desc: 'Ollama 기반 코드 리뷰. 보안 취약점·성능·컨벤션 자동 검토 후 SR 연동.' },
+      { title: 'KB 자동 업데이트',         desc: '해결된 SR·인시던트 기반 지식베이스 자동 생성. 유사 사례 검색 연동.' },
+      { title: '멀티 에이전트 오케스트레이션', desc: 'SR→코드리뷰→배포→알림 E2E 워크플로우 자동화. 에이전트 협업 조율.' },
+      { title: '예측 유지보수',             desc: '서버 이력 데이터 기반 장애 예측. 선제적 점검 일정 자동 생성.' },
+      { title: 'RPA 봇 자동화',            desc: '소스 기반 Validation 학습 → SR 자동 접수·승인·상태 변경. APScheduler 크론.' },
+      { title: '웹 스크랩핑 봇',           desc: 'URL 스크랩 → DB 저장 → DRAFT/PUBLISHED/DELETED 상태 관리. 메신저 알림.' },
+    ],
+  },
+  {
+    id: 'itsm',
+    label: 'ITSM 핵심',
+    icon: '📋',
+    color: '#0EA5E9',
+    items: [
+      { title: 'SR 서비스 요청 관리',      desc: '접수→배정→처리→완료 전 과정. AI 자동 분류·우선순위 산정. 대량 처리 지원.' },
+      { title: 'CMDB 형상 관리',           desc: 'CI(서버·SW·네트워크) 등록·관계 매핑·변경 이력. 의존성 토폴로지 시각화.' },
+      { title: '변경 관리 CAB',            desc: 'RFC 등록→CAB 투표→승인→실행→사후 검토. 변경 동결 기간 자동 관리.' },
+      { title: 'Problem Management',       desc: '반복 인시던트 근본 원인(RCA) 분석. Known Error DB 관리. PRB ID 체계.' },
+      { title: '서비스 카탈로그',          desc: '표준 서비스 목록 정의. SLA 자동 계산. 카탈로그 선택 시 SR 자동 생성.' },
+      { title: 'SLA 대시보드',             desc: '실시간 SLA 준수율. 위반 예측 알림. 에스컬레이션 자동화.' },
+      { title: '운영 이벤트 타임라인',     desc: 'SR·배포·인시던트·변경 이력 시간 순 통합 조회. 감사 추적 시각화.' },
+      { title: '알림 고도화',              desc: 'WebSocket 실시간 + 이메일 + 메신저 다채널 알림. 역할별 수신 설정.' },
+    ],
+  },
+  {
+    id: 'infra',
+    label: '인프라 · 운영',
+    icon: '⚙️',
+    color: '#10B981',
+    items: [
+      { title: '에이전트리스 배포',        desc: '대상 서버 소프트웨어 설치 불필요. SSH/SFTP로 Tomcat·JBoss·WebLogic 원격 관리.' },
+      { title: 'ChatOps 자연어 명령',     desc: '"서버1 헬스체크", "SR-XXXX 배포" — 자연어를 자동으로 봇 명령어로 변환.' },
+      { title: 'Scouter APM 모니터링',   desc: 'Java WAS 전문 APM. CPU·Heap·TPS·응답시간 실시간 수집. 이상 시 자동 인시던트.' },
+      { title: 'Grafana 연동',           desc: 'Prometheus 메트릭 수집. Grafana 대시보드 자동 생성. 실시간 인프라 현황.' },
+      { title: 'FinOps 비용 분석',       desc: '서버·인스턴스 비용 추적. 최적화 권고. 기관별 비용 배분 리포트.' },
+      { title: 'DR 재해복구 자동화',     desc: 'DR 시나리오·Failover·백업 무결성·복구 테스트·RTO/RPO 실적 추적.' },
+      { title: '네트워크 장비 관리',     desc: '스위치·라우터·방화벽 SSH 설정 백업·변경 감지·토폴로지 자동 갱신.' },
+      { title: '용량 관리 대시보드',     desc: '서버 자원 사용 추이 분석. 용량 부족 예측. 확장 시점 자동 권고.' },
+    ],
+  },
+  {
+    id: 'security',
+    label: '보안 · 컴플라이언스',
+    icon: '🔒',
+    color: '#F59E0B',
+    items: [
+      { title: 'RBAC 역할 기반 접근 제어', desc: '역할(관리자·운영자·개발자·PM)별 메뉴·API 권한 세밀 분리. JWT 연동.' },
+      { title: 'MFA / 2FA OTP',           desc: 'TOTP 기반 2단계 인증. QR 코드 등록. 로그인 이상 감지 시 강제 재인증.' },
+      { title: 'PAM 특권 접근 관리',      desc: '세션 발급·체크아웃·명령 로깅·강제 종료. root 직접 접속 완전 차단.' },
+      { title: '보안 취약점 자동 스캔',   desc: '포트 스캔·CVE 취약점·CVSS 점수 자동 수집. 위험 등급별 자동 SR 생성.' },
+      { title: '불변 감사 로그',          desc: 'SHA-256 해시체인 감사 로그. 위·변조 불가. IP·계정 해시 저장. Export 지원.' },
+      { title: 'CSAP 보안 자동 점검',     desc: '공공기관 보안 100개 항목 자동 점검. 증적 수집·Excel/HTML 보고서 자동 생성.' },
+      { title: 'LDAP / AD 연동',          desc: '기존 사내 LDAP·Active Directory 연동. 그룹→역할 자동 매핑. 동기화 스케줄.' },
+      { title: '공공기관 필수 준수',      desc: '행안부 SW 보안약점, KWCAG 2.1 접근성, 개인정보보호법. 19개 체크리스트 내장.' },
+    ],
+  },
+  {
+    id: 'platform',
+    label: '플랫폼 · 통합',
+    icon: '🌐',
+    color: '#8B5CF6',
+    items: [
+      { title: '멀티테넌트 데이터 격리',  desc: '기관별 데이터 완전 격리. Row-Level Security. 테넌트간 정보 유출 원천 차단.' },
+      { title: '모바일 반응형 + PWA',     desc: '스마트폰에서 SR 접수·승인·현황 조회. 오프라인 캐싱. 홈 화면 추가 지원.' },
+      { title: '다국어 지원 (i18n)',      desc: '한국어·영어 실시간 전환. 공공기관 다국어 서비스 의무 준수.' },
+      { title: 'OpenAPI 게이트웨이',      desc: '외부 시스템(ERP·GroupWare) REST API 연동. API Key 발급·관리·사용량 추적.' },
+      { title: '월별 리포트 자동 생성',   desc: 'SR·SLA·배포·인시던트 월간 통계 자동 집계. Excel·PDF·PPT 자동 생성 발송.' },
+      { title: '대시보드 분석',           desc: '7일 추이 차트·기관별 비교·AI 인사이트·예측 그래프. Chart.js + D3.js.' },
+      { title: '첨부 파일 관리',          desc: 'SR·KB·보고서 파일 첨부. 경로 순회 방지·확장자 검증. 서버별 격리 저장.' },
+      { title: '배포 승인 알림',          desc: '배포 전 PM 승인 요청 자동 발송. 승인/반려 시 메신저 즉시 알림.' },
+    ],
+  },
+];
+
+/* 기존 12개 하이라이트 카드 (히어로 섹션용) */
 const FEATURES = [
   { icon:'🤖', title:'AI 에이전트 자동화',
     desc:'Ollama 온프레미스 sLLM 기반. 메신저 한 줄 명령 → 자연어 파싱 → 자동 배포·운영. 외부 API 완전 차단으로 폐쇄망 환경 최적화.' },
@@ -171,7 +256,7 @@ export default function GuardiaDetail() {
           <div className="gd-hero-stats">
             {[
               {val:'1,000+', lab:'관리 기관'},
-              {val:'99.9%',  lab:'가용성'},
+              {val:'40+',    lab:'구현 완료 기능'},
               {val:'70%',    lab:'운영 비용 절감'},
               {val:'0개',    lab:'대상 서버 추가 설치'},
             ].map((s,i) => (
@@ -213,9 +298,52 @@ export default function GuardiaDetail() {
           <div className="container">
             <div className="section-header">
               <span className="section-label">Core Features</span>
-              <h2 className="section-title">GUARDiA가 제공하는<br/><em>12가지 핵심 기능</em></h2>
+              <h2 className="section-title">GUARDiA가 제공하는<br/><em>36가지 이상 핵심 기능</em></h2>
+              <p style={{color:'var(--gray-500)',marginTop:'12px',fontSize:'16px'}}>
+                5개 카테고리, 총 40개 기능 — 모두 구현 완료
+              </p>
               <div className="divider" />
             </div>
+
+            {/* ── 카테고리별 전체 기능 표 ───────────────────── */}
+            <div style={{marginBottom:'64px'}}>
+              {FEATURE_CATEGORIES.map(cat => (
+                <div key={cat.id} style={{marginBottom:'40px'}}>
+                  <div style={{display:'flex',alignItems:'center',gap:'10px',marginBottom:'16px'}}>
+                    <span style={{fontSize:'24px'}}>{cat.icon}</span>
+                    <h3 style={{
+                      fontSize:'20px',fontWeight:'700',color:'var(--gray-900)',margin:0,
+                      borderLeft:`4px solid ${cat.color}`,paddingLeft:'12px'
+                    }}>{cat.label}</h3>
+                    <span style={{
+                      fontSize:'12px',background:cat.color,color:'#fff',
+                      borderRadius:'12px',padding:'2px 10px',fontWeight:'600'
+                    }}>{cat.items.length}개</span>
+                  </div>
+                  <div style={{
+                    display:'grid',
+                    gridTemplateColumns:'repeat(auto-fill, minmax(280px, 1fr))',
+                    gap:'12px',
+                  }}>
+                    {cat.items.map((item, i) => (
+                      <div key={i} style={{
+                        background:'var(--gray-50)',borderRadius:'10px',
+                        padding:'14px 16px',
+                        borderLeft:`3px solid ${cat.color}`,
+                        transition:'box-shadow .2s',
+                      }}>
+                        <div style={{fontWeight:'700',color:'var(--gray-900)',fontSize:'14px',marginBottom:'4px'}}>
+                          ✅ {item.title}
+                        </div>
+                        <div style={{color:'var(--gray-500)',fontSize:'13px',lineHeight:'1.5'}}>
+                          {item.desc}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
             {/* 실행 화면 스크린샷 */}
             {/* GUARDiA ITSM 실행 화면 */}
             <div className="section-header" style={{marginBottom:'24px'}}>