feat(screenshots+manual): 기능 테스트 + 스크린샷 24개 + 홈페이지 업데이트 [auto-sync]

frontend/src/pages/GuardiaDetail.jsx

@@ -574,10 +574,10 @@ export default function GuardiaDetail() {
               </p>
               <div style={{display:'flex',gap:'12px',justifyContent:'center',flexWrap:'wrap'}}>
                 {[
-                  {href:'https://itsm.zioinfo.co.kr',    label:'GUARDiA ITSM',    icon:'🔧', desc:'admin / 1111'},
-                  {href:'https://manager.zioinfo.co.kr', label:'GUARDiA Manager', icon:'📊', desc:'관리자 포털'},
-                  {href:'https://mail.zioinfo.co.kr',    label:'웹메일',           icon:'✉️', desc:'@zioinfo.co.kr'},
-                  {href:'https://git.zioinfo.co.kr',     label:'Gitea',            icon:'🐙', desc:'소스 저장소'},
+                  {href:'https://itsm.zioinfo.co.kr',    label:'GUARDiA ITSM',    icon:<IconWrench size={24} color="#00A0C8"/>, desc:'admin / 1111'},
+                  {href:'https://manager.zioinfo.co.kr', label:'GUARDiA Manager', icon:<IconBarChart size={24} color="#00A0C8"/>, desc:'관리자 포털'},
+                  {href:'https://mail.zioinfo.co.kr',    label:'웹메일',           icon:<IconEmail size={24} color="#00A0C8"/>, desc:'@zioinfo.co.kr'},
+                  {href:'https://git.zioinfo.co.kr',     label:'Gitea',            icon:<IconCode size={24} color="#00A0C8"/>, desc:'소스 저장소'},
                 ].map((l,i) => (
                   <a key={i} href={l.href} target="_blank" rel="noopener noreferrer"
                      style={{display:'flex',flexDirection:'column',alignItems:'center',gap:'6px',
@@ -897,14 +897,18 @@ export default function GuardiaDetail() {
             </div>
             <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(320px,1fr))',gap:24}}>
               {[
-                {src:'/screenshots/itsm_02_dashboard.png', title:'GUARDiA ITSM 대시보드',    desc:'SR 7건·승인대기·진행중 실시간 현황. 운영 상태 한눈에 파악.'},
-                {src:'/screenshots/itsm_06_agents.png',    title:'AI 에이전트 관리',          desc:'Ollama 4개 모델 온라인. llava·codellama·llama3 동작 중.'},
-                {src:'/screenshots/itsm_05_incidents.png', title:'장애 관리 (인시던트)',      desc:'P1~P4 등급별 장애 관리. MTTR 자동 측정. AI RCA 분석.'},
-                {src:'/screenshots/itsm_07_ssl.png',       title:'SSL 인증서 관리',           desc:'만료일 추적·자동 갱신 알림·배포 자동화.'},
-                {src:'/screenshots/itsm_01_login.png',     title:'GUARDiA ITSM 로그인',       desc:'JWT + 2FA/OTP 보안. 역할별 계정 (관리자·엔지니어·PM·고객).'},
-                {src:'/screenshots/manager_01_login.png',  title:'GUARDiA Manager',           desc:'GUARDiA ITSM 통합 관제 관리자 포털.'},
-                {src:'/screenshots/mail_01_webmail.png',   title:'zioinfo 웹메일',            desc:'Postfix/Dovecot 연동. @zioinfo.co.kr 기업 웹메일.'},
-                {src:'/screenshots/home_07_guardia.png',   title:'GUARDiA 홈페이지 소개',     desc:'160+ 기능 · 1,000+ API · 9개 카테고리 완전 구현.'},
+                {src:'/screenshots/itsm_02_dashboard.png', title:'ITSM 통합 대시보드',       desc:'SR 현황·AI 인사이트·운영 지표 실시간 모니터링. 나눔고딕 UI.'},
+                {src:'/screenshots/itsm_03_sr_list.png',   title:'SR 서비스 요청 목록',      desc:'15건 SR 관리. HIGH/MEDIUM/LOW 우선순위. AI봇 자동 처리.'},
+                {src:'/screenshots/itsm_04_cmdb.png',      title:'CMDB 서버 자산 관리',      desc:'24대 서버 자산. 상태·역할·OS 통합 관리. SSH 에이전트리스.'},
+                {src:'/screenshots/itsm_05_incidents.png', title:'장애 관리 (인시던트)',     desc:'P1~P3 등급별 장애. MTTR 45분. AI 자동 RCA 분석.'},
+                {src:'/screenshots/itsm_06_agents.png',    title:'AI 에이전트',              desc:'Ollama 온라인. llava·codellama·llama3·nomic 4개 모델.'},
+                {src:'/screenshots/itsm_07_ssl.png',       title:'SSL 인증서 관리',          desc:'만료 추적·자동 갱신·Let\'s Encrypt/ZeroSSL 지원.'},
+                {src:'/screenshots/manager_02_dashboard.png', title:'GUARDiA Manager',       desc:'통합 관제 포털. 서버·SR·배포 현황 한눈에.'},
+                {src:'/screenshots/home_07_guardia.png',   title:'GUARDiA 홈페이지',         desc:'160+ 기능 · 1,000+ API · 9개 카테고리 · 서브도메인 HTTPS.'},
+                {src:'/screenshots/home_09_news.png',      title:'뉴스룸 (DB 동적)',          desc:'뉴스·기술블로그·공지사항 DB 관리. 관리자 페이지 CRUD.'},
+                {src:'/screenshots/mail_01_webmail.png',   title:'zioinfo 웹메일',           desc:'Postfix/Dovecot 연동. @zioinfo.co.kr 기업 웹메일.'},
+                {src:'/screenshots/home_02_greeting.png',  title:'CEO 인사말',               desc:'대표이사 홍영택 인사말. GUARDiA 비전 소개.'},
+                {src:'/screenshots/home_08_business.png',  title:'파트너 페이지',             desc:'Oracle·RedHat·TmaxSoft·SamsungSDS 실제 로고 크롤링.'},
               ].map((sc,i) => (
                 <div key={i} style={{borderRadius:12,overflow:'hidden',border:'1px solid #e2e8f0',boxShadow:'0 2px 12px rgba(0,51,102,.08)'}}>
                   <div style={{background:'#f1f5f9',height:8,display:'flex',gap:4,padding:'8px 12px',alignItems:'center'}}>
@@ -1241,19 +1245,19 @@ export default function GuardiaDetail() {
 
             <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))',gap:20}}>
               {[
-                {icon:'📘', title:'운영자 지침서',       no:'04', desc:'일상 운영 절차, SR 관리, 장애 대응, 보안 운영 지침. 16개 섹션 935줄.',      tag:'필수'},
-                {icon:'🚀', title:'설치 가이드 (Linux)', no:'05', desc:'Ubuntu/CentOS/RHEL 환경 설치 절차. 폐쇄망·개방망 별도 가이드 포함.',       tag:'설치'},
-                {icon:'🪟', title:'설치 가이드 (Windows)',no:'06', desc:'Windows Server 환경 WSL2 기반 설치. 방화벽·포트 설정 상세.',           tag:'설치'},
-                {icon:'🔑', title:'라이선스 발급 가이드', no:'14', desc:'커뮤니티·스탠다드·엔터프라이즈 라이선스 키 발급·갱신·관리.',            tag:'관리'},
-                {icon:'🌐', title:'API 명세서',           no:'16', desc:'960개+ REST API 엔드포인트 전체 명세. Swagger/OpenAPI 3.0.',            tag:'개발'},
-                {icon:'🛡️', title:'DR 재해복구 가이드',   no:'39', desc:'DR 자동화·Failover·네트워크장비·CSAP 운영 가이드 통합본.',              tag:'운영'},
-                {icon:'🔧', title:'CI/CD 파이프라인 가이드',no:'20',desc:'Jenkins·Gitea·deploy_server.py·Webhook 자동 배포 전체 흐름.',          tag:'DevOps'},
-                {icon:'🎨', title:'디자인 AI SR 가이드',  no:'44', desc:'디자인 수정 SR AI 자동화. Ollama llava 비전 분석·SVG·CSS 생성 방법.', tag:'NEW'},
+                {icon:<IconClipboard size={26} color="#003366"/>, title:'운영자 지침서',        no:'04', desc:'일상 운영 절차, SR 관리, 장애 대응, 보안 운영 지침. 16개 섹션.',     tag:'필수'},
+                {icon:<IconCode size={26} color="#003366"/>,      title:'설치 가이드 (Linux)',  no:'05', desc:'Ubuntu/CentOS/RHEL 환경 설치. 폐쇄망·개방망 별도 가이드 포함.',     tag:'설치'},
+                {icon:<IconServer size={26} color="#003366"/>,    title:'설치 가이드 (Windows)',no:'06', desc:'Windows Server WSL2 기반 설치. 방화벽·포트 설정 상세.',              tag:'설치'},
+                {icon:<IconKey size={26} color="#003366"/>,       title:'라이선스 발급 가이드', no:'14', desc:'커뮤니티·스탠다드·엔터프라이즈 라이선스 키 발급·갱신·관리.',         tag:'관리'},
+                {icon:<IconGlobe size={26} color="#003366"/>,     title:'API 명세서',           no:'16', desc:'1,000개+ REST API 엔드포인트 전체 명세. Swagger/OpenAPI 3.0.',      tag:'개발'},
+                {icon:<IconShield size={26} color="#003366"/>,    title:'DR 재해복구 가이드',   no:'39', desc:'DR 자동화·Failover·네트워크장비·CSAP 운영 가이드.',                   tag:'운영'},
+                {icon:<IconZap size={26} color="#003366"/>,       title:'CI/CD 파이프라인 가이드',no:'20',desc:'post-commit 훅·Gitea·서버cron·5시간 자동 배포 흐름.',              tag:'DevOps'},
+                {icon:<IconBuilding size={26} color="#003366"/>,  title:'zio서버 운영가이드',   no:'19', desc:'서브도메인 전환·자동배포·SSL·nginx 설정. 2026-06-04 업데이트.',      tag:'NEW'},
               ].map((m,i)=>(
                 <div key={i} style={{background:'#fff',border:'1px solid #e2e8f0',borderRadius:12,padding:20,
                                      borderLeft:`4px solid #003366`,transition:'box-shadow .2s'}}>
                   <div style={{display:'flex',alignItems:'flex-start',gap:10}}>
-                    <span style={{fontSize:28}}>{m.icon}</span>
+                    <span style={{display:'flex',alignItems:'center',paddingTop:2}}>{m.icon}</span>
                     <div style={{flex:1}}>
                       <div style={{display:'flex',alignItems:'center',gap:6,marginBottom:4}}>
                         <span style={{fontWeight:700,fontSize:14,color:'#003366'}}>{m.title}</span>