feat(extend5): GUARDiA 5세대 확장 7개 라우터 구현 + 홈페이지 업데이트 [auto-sync]

frontend/src/components/Icons.jsx

@@ -164,18 +164,11 @@ export const IconPencilRule= p => <Ico {...p}><rect x="2" y="14" width="4" heigh
 export const IconBranch   = p => <Ico {...p}><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 01-9 9"/></Ico>;
 
 /* ── 추가 아이콘 ── */
-export const IconBell     = p => <Ico {...p}><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 01-3.4 0"/></Ico>;
-export const IconCalendar = p => <Ico {...p}><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></Ico>;
 export const IconHelpCircle=p => <Ico {...p}><circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 015.8 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17" strokeWidth="3"/></Ico>;
-export const IconFactory  = p => <Ico {...p}><path d="M2 20V8l5 4V8l5 4V4l5 4v12H2z"/><path d="M6 20v-5h4v5"/></Ico>;
-export const IconPackage  = p => <Ico {...p}><line x1="16.5" y1="9.4" x2="7.5" y2="4.2"/><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 002 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></Ico>;
-export const IconCart     = p => <Ico {...p}><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 002 1.6h9.7a2 2 0 002-1.6L23 6H6"/></Ico>;
 export const IconRuler    = p => <Ico {...p}><path d="M5 3l16 16M14 14l-2 4M10 10l-2 4M6 6L4 10"/><path d="M3 21L21 3"/></Ico>;
 export const IconCog      = p => <Ico {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></Ico>;
 export const IconKakao    = p => <Ico {...p}><path d="M12 4C7 4 3 7.1 3 11c0 2.5 1.5 4.7 3.8 6l-.8 3 3.4-2.2c.8.2 1.7.2 2.6.2 5 0 9-3.1 9-7S17 4 12 4z"/></Ico>;
 export const IconPeople   = p => <Ico {...p}><circle cx="9" cy="7" r="3"/><path d="M3 20v-1c0-3.3 2.7-6 6-6s6 2.7 6 6v1"/><circle cx="18" cy="8" r="2.5" opacity=".5"/><path d="M22 20v-.5c0-2.5-1.8-4.5-4-4.5" opacity=".5"/></Ico>;
 export const IconHouse    = p => <Ico {...p}><path d="M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H4a1 1 0 01-1-1V9.5z"/><path d="M9 21V12h6v9"/></Ico>;
 export const IconEnvelope = p => <Ico {...p}><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 7l10 7 10-7"/><path d="M2 18l6-5M22 18l-6-5"/></Ico>;
-export const IconQuestion = p => <Ico {...p}><circle cx="12" cy="12" r="10"/><path d="M9 9a3 3 0 116 0c0 1.5-1.5 2.5-3 3"/><circle cx="12" cy="17" r="1" fill="currentColor" stroke="none"/></Ico>;
-export const IconPerson   = p => <Ico {...p}><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></Ico>;
 export const IconFire2    = p => <Ico {...p}><path d="M12 22C6.5 22 2 17.5 2 12c0-2 .8-4 2.3-5.6C5.6 5 6 4.3 6 3c2 0 3 1.5 4 3 .7-1.2 2-2.5 4-3 0 1.5.7 2.5 1.7 3.5C17.2 8 18 9.8 18 12c0 5.5-4.5 10-6 10z"/></Ico>;

frontend/src/pages/GuardiaDetail.jsx

@@ -207,6 +207,21 @@ const FEATURE_CATEGORIES = [
       { title: '자립도 로드맵',              desc: '현재 30% → 3개월 50% → 6개월 70% → 1년 85% "GUARDiA가 알아서 다 했습니다."' },
     ],
   },
+  {
+    id: 'extend5',
+    label: '5세대 확장 (NEW)',
+    icon: <IconTarget size={22} color="#0EA5E9"/>,
+    color: '#0EA5E9',
+    items: [
+      { title: '레거시 현대화 자동화',    desc: 'EOL 시스템 위험도 자동 평가·마이그레이션 로드맵 생성·기술 부채 지표화. lift-and-shift→refactor→replace 단계별 전환.' },
+      { title: '통합 옵저버빌리티',       desc: 'OpenTelemetry 에이전트리스 계측. 분산 트레이스→서비스 맵 자동 생성. 메트릭-로그-트레이스 3-in-1. SLO/에러 예산 실시간 추적.' },
+      { title: 'AI-SOC 보안 운영센터',   desc: '보안 이벤트 자동 상관분석. SOAR 플레이북 자동 실행. CVE→영향도→패치 우선순위 자동화. 인시던트 타임라인 자동 재구성.' },
+      { title: '시민 접점 셀프서비스 포털', desc: '민원인 QR 스캔으로 IT 문제 직접 신고. SR 진행상황 SMS·카카오 자동 알림. RAG 기반 FAQ 챗봇. 공개 서비스 상태 페이지.' },
+      { title: '데이터 거버넌스 자동화',  desc: '개인정보(PII) 자동 탐지·마스킹. 개인정보보호법·공공데이터법 준수 자동 감사. 데이터 계보 추적(Data Lineage). 보존 기간 자동 관리.' },
+      { title: '하네스 빌더 (노코드)',    desc: 'ITSM 웹 UI에서 AI 에이전트 팀을 노코드로 생성·편집·실행·모니터링. 에이전트 정의 자동 생성. Ollama 기반 즉시 실행.' },
+      { title: 'tmux 영속 터미널 관리',  desc: '원격 서버 tmux 세션 생성·공유·분리·녹화. 다중 사용자 동시 접속. 위험 명령어 차단(rm -rf /, mkfs). 터미널 출력 검색·이력 관리.' },
+    ],
+  },
 ];
 
 /* 하이라이트 카드 (히어로 섹션용) */
@@ -239,6 +254,13 @@ const FEATURES = [
   { icon:<IconCheckCircle {...IC('#059669')}/>, title:'자가수복 + 건강검진',        desc:'매일 03:00 자동 테스트(69개). 장애 감지 시 서비스 자동 재시작 + 자동 보고.' },
   { icon:<IconTrendUp {...IC('#059669')}/>,   title:'자립도 측정 30→85%',           desc:'5차원 자립도 점수. 현재 30% → 목표 85%. 주간 보고서 자동 발송. LoRA 파인튜닝 자동화.' },
   { icon:<IconShuffle {...IC('#6366F1')}/>,   title:'git commit → 자동 배포',        desc:'post-commit 훅. workspace 변경 감지 → Gitea push → webhook → 서버 자동 배포. 수동 불필요.' },
+  { icon:<IconWrench {...IC('#0EA5E9')}/>,    title:'레거시 현대화 자동화',           desc:'EOL 위험도 자동 평가·기술 부채 지표화·마이그레이션 로드맵. lift-and-shift→refactor→replace 자동화.' },
+  { icon:<IconNetwork {...IC('#0EA5E9')}/>,   title:'통합 옵저버빌리티 (OTel)',       desc:'OpenTelemetry 에이전트리스. 분산 트레이스→서비스 맵 자동 생성. SLO/에러 예산 실시간 추적.' },
+  { icon:<IconShield {...IC('#EF4444')}/>,    title:'AI-SOC 보안 운영센터',           desc:'보안 이벤트 자동 상관분석. SOAR 플레이북 자동 실행. CVE→패치 우선순위 자동화. 위협 타임라인.' },
+  { icon:<IconUsers {...IC('#10B981')}/>,     title:'시민 접점 셀프서비스 포털',      desc:'QR 스캔으로 민원 신고. SMS·카카오 자동 알림. RAG FAQ 챗봇. 서비스 상태 페이지.' },
+  { icon:<IconDatabase {...IC('#8B5CF6')}/>,  title:'데이터 거버넌스 & PII 자동화',   desc:'개인정보 자동 탐지·마스킹. 개인정보보호법·공공데이터법 준수 자동 감사. 데이터 계보 추적.' },
+  { icon:<IconCog {...IC('#F59E0B')}/>,       title:'하네스 빌더 (노코드 AI)',         desc:'웹 UI에서 AI 에이전트 팀을 노코드로 생성·실행·모니터링. Ollama 기반 즉시 실행. 스킬 자동 생성.' },
+  { icon:<IconServer {...IC('#0891B2')}/>,    title:'tmux 영속 터미널 관리',           desc:'원격 서버 tmux 세션 생성·공유·분리. 다중 사용자 동시 접속. 위험 명령어 자동 차단. 출력 검색.' },
 ];
 
 const EDITIONS = [
@@ -359,10 +381,10 @@ const TECH_STACK = [
 
 export default function GuardiaDetail() {
   useSeoMeta({
-    title: 'GUARDiA ITSM — AI 기반 공공기관 인프라 자율 운영 플랫폼 (185+ 기능)',
-    description: 'GUARDiA ITSM: 1,100개+ API, 185가지 이상 기능. 자가수복·자립도 측정·LoRA 파인튜닝·CI/CD 자동배포·서브도메인 HTTPS·ZTNA·SBOM·N²SF·IDP·GreenOps. 폐쇄망/개방망 지원.',
+    title: 'GUARDiA ITSM — AI 기반 공공기관 인프라 자율 운영 플랫폼 (210+ 기능)',
+    description: 'GUARDiA ITSM: 1,168개+ API, 210가지 이상 기능. 레거시 현대화·옵저버빌리티·AI-SOC·시민포털·데이터거버넌스·하네스빌더·tmux 세션. ZTNA·SBOM·N²SF·IDP·GreenOps·자가수복. 폐쇄망/개방망 지원.',
     path: '/solution/guardia',
-    keywords: 'GUARDiA ITSM, AI ITSM, 공공기관 인프라 자동화, 자가수복, 자립도, LoRA 파인튜닝, ChatOps, 에이전트리스, RAG 검색, Text-to-SQL, CMDB 자동 발견, 멀티클라우드, 나라장터, Upstage OCR, 구성 드리프트',
+    keywords: 'GUARDiA ITSM, AI ITSM, 공공기관 인프라 자동화, 레거시 현대화, 옵저버빌리티, AI-SOC, 시민포털, 데이터거버넌스, 하네스빌더, tmux 세션, 자가수복, LoRA 파인튜닝, ChatOps, 에이전트리스, RAG 검색, CMDB 자동 발견, 나라장터, Upstage OCR',
     image: '/screenshots/01_dashboard.png',
   });
   const [activeTab, setActiveTab] = useState('features');
@@ -395,8 +417,8 @@ export default function GuardiaDetail() {
           <div className="gd-hero-stats">
             {[
               {val:'1,000+', lab:'관리 기관'},
-              {val:'1,100+', lab:'API 엔드포인트'},
-              {val:'185+',   lab:'구현 완료 기능'},
+              {val:'1,168+', lab:'API 엔드포인트'},
+              {val:'210+',   lab:'구현 완료 기능'},
               {val:'0개',    lab:'대상 서버 추가 설치'},
             ].map((s,i) => (
               <div key={i} className="gd-stat">
@@ -439,9 +461,9 @@ 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>185가지 이상 핵심 기능</em></h2>
+              <h2 className="section-title">GUARDiA가 제공하는<br/><em>210가지 이상 핵심 기능</em></h2>
               <p style={{color:'var(--gray-500)',marginTop:'12px',fontSize:'16px'}}>
-                11개 카테고리 · 1,100개+ API 엔드포인트 · 3세대 확장 완료
+                12개 카테고리 · 1,168개+ API 엔드포인트 · 5세대 확장 완료
               </p>
               <div className="divider" />
             </div>
@@ -602,6 +624,54 @@ export default function GuardiaDetail() {
               ))}
             </div>
 
+            {/* 5세대 신규 기능 하이라이트 */}
+            <div className="section-header" style={{marginTop:'48px',marginBottom:'24px'}}>
+              <span className="section-label" style={{fontSize:'12px',background:'#0EA5E9',color:'#fff',padding:'3px 10px',borderRadius:'12px'}}>NEW v2.2 — 5세대</span>
+              <h3 style={{fontSize:'22px',fontWeight:'700',color:'var(--gray-900)',margin:'8px 0 0'}}>
+                5세대 확장 — 레거시현대화·옵저버빌리티·AI-SOC·시민포털·데이터거버넌스·하네스빌더·tmux
+              </h3>
+              <p style={{color:'var(--gray-500)',fontSize:'14px',marginTop:'8px'}}>
+                68개 신규 엔드포인트 추가 · 2026-06-06 릴리즈
+              </p>
+            </div>
+            <div style={{
+              display:'grid',
+              gridTemplateColumns:'repeat(auto-fill, minmax(280px, 1fr))',
+              gap:'16px',
+              marginBottom:'48px',
+            }}>
+              {[
+                { icon:'🏛️', color:'#0EA5E9', title:'레거시 현대화 자동화',     badge:'9 APIs', desc:'EOL 위험도 평가·기술 부채 지표화·마이그레이션 로드맵 자동 생성. lift-and-shift→refactor→replace 단계별 전환 자동화.' },
+                { icon:'🔭', color:'#6366F1', title:'통합 옵저버빌리티',          badge:'9 APIs', desc:'OpenTelemetry 에이전트리스 계측. 분산 트레이스→서비스 맵. SLO/에러 예산 실시간 추적. AI 루트코즈 분석.' },
+                { icon:'🛡️', color:'#EF4444', title:'AI-SOC 보안 운영센터',     badge:'11 APIs', desc:'보안 이벤트 자동 상관분석. SOAR 플레이북 자동 실행. CVE→영향도→패치 우선순위. 인시던트 타임라인 재구성.' },
+                { icon:'🏙️', color:'#10B981', title:'시민 접점 셀프서비스 포털', badge:'9 APIs',  desc:'민원인 QR 스캔→IT 신고. SR 진행 SMS·카카오 자동 알림. RAG FAQ 챗봇. 공개 서비스 상태 페이지.' },
+                { icon:'🔐', color:'#8B5CF6', title:'데이터 거버넌스 자동화',     badge:'10 APIs', desc:'PII 자동 탐지·마스킹. 개인정보보호법·공공데이터법 준수 감사. 데이터 계보 추적. 보존 기간 자동 관리.' },
+                { icon:'🤖', color:'#F59E0B', title:'하네스 빌더 (노코드 AI)',    badge:'9 APIs',  desc:'웹 UI에서 AI 에이전트 팀을 노코드로 생성·실행·모니터링. Ollama 즉시 실행. 스킬 자동 생성·관리.' },
+                { icon:'💻', color:'#0891B2', title:'tmux 영속 터미널 관리',      badge:'11 APIs', desc:'원격 서버 tmux 세션 생성·공유·분리. 다중 사용자 동시 접속. 위험 명령어 자동 차단. 출력 이력 검색.' },
+              ].map((f, i) => (
+                <div key={i} style={{
+                  background:'#fff',
+                  border:`1px solid ${f.color}33`,
+                  borderTop:`3px solid ${f.color}`,
+                  borderRadius:'12px',
+                  padding:'16px',
+                }}>
+                  <div style={{display:'flex',alignItems:'center',gap:'10px',marginBottom:'10px'}}>
+                    <span style={{fontSize:'24px'}}>{f.icon}</span>
+                    <div style={{flex:1}}>
+                      <div style={{fontWeight:'700',fontSize:'14px',color:'var(--gray-900)'}}>{f.title}</div>
+                    </div>
+                    <span style={{
+                      background:f.color,color:'#fff',
+                      fontSize:'10px',padding:'2px 7px',borderRadius:'8px',
+                      fontWeight:'700',whiteSpace:'nowrap',
+                    }}>{f.badge}</span>
+                  </div>
+                  <p style={{fontSize:'13px',color:'var(--gray-500)',lineHeight:'1.6',margin:0}}>{f.desc}</p>
+                </div>
+              ))}
+            </div>
+
             <div className="section-header" style={{marginTop:'60px',marginBottom:'32px'}}>
               <h3 style={{fontSize:'28px',fontWeight:'800',color:'var(--gray-900)'}}>핵심 기능 상세</h3>
             </div>