From 257ccb57af4a3781156446483a53cf4a83d1d401 Mon Sep 17 00:00:00 2001
From: DESKTOP-TKLFCPRython <ythong86@gmail.com>
Date: Sun, 31 May 2026 12:27:48 +0900
Subject: [PATCH] =?UTF-8?q?feat(homepage):=20GUARDiA=20=EB=AA=A8=EB=B0=94?=
 =?UTF-8?q?=EC=9D=BC=20=EC=95=B1=20=EB=AA=A9=EC=97=85=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A6=B0=EC=83=B7=205=EC=9E=A5=20=EC=83=9D=EC=84=B1=20+=20?=
 =?UTF-8?q?=EC=95=B1=20=ED=83=AD=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Playwright headless로 HTML 목업 → PNG 스크린샷 변환
  11_app_home.png    홈 대시보드 (SR·서버 실시간 현황)
  12_app_sr.png      SR 서비스 요청 목록
  13_app_chat.png    AI 챗봇 (Ollama 연동)
  14_app_dr.png      DR 재해복구 RTO/RPO 모니터링
  15_app_network.png 네트워크 장비 백업 현황

- GuardiaDetail.jsx: '모바일 앱' 탭 신규 추가
  5장 목업 5열 그리드 (390x844 세로 비율)
  Google Play / App Store 다운로드 배지

- GuardiaDetail.css: 모바일 스크린샷 5열 그리드 스타일

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/GuardiaDetail.css | 25 +++++++++----
 frontend/src/pages/GuardiaDetail.jsx | 53 ++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/GuardiaDetail.css b/frontend/src/pages/GuardiaDetail.css
index 6d60a12..e9231dd 100644
--- a/frontend/src/pages/GuardiaDetail.css
+++ b/frontend/src/pages/GuardiaDetail.css
@@ -85,17 +85,28 @@
   gap: 20px;
   margin-top: 40px;
 }
-/* 모바일 앱 스크린샷: 세로 비율 */
+/* 모바일 앱 스크린샷: 세로 비율 5열 */
 .gd-screenshots--mobile {
-  grid-template-columns: repeat(3, 1fr);
-  max-width: 720px;
-  margin-left: auto;
-  margin-right: auto;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 14px;
+}
+.screenshot-card--mobile {
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0,0,0,.25);
+  border: 3px solid #1e293b;
 }
 .screenshot-card--mobile .screenshot-img {
-  aspect-ratio: 9/16;
+  width: 100%;
+  aspect-ratio: 390/844;
   object-fit: cover;
-  border-radius: 12px 12px 0 0;
+  display: block;
+}
+@media (max-width: 900px) {
+  .gd-screenshots--mobile { grid-template-columns: repeat(3, 1fr); }
+}
+@media (max-width: 600px) {
+  .gd-screenshots--mobile { grid-template-columns: repeat(2, 1fr); }
 }
 .screenshot-card {
   border-radius: var(--radius);
diff --git a/frontend/src/pages/GuardiaDetail.jsx b/frontend/src/pages/GuardiaDetail.jsx
index ba25dcc..c464d27 100644
--- a/frontend/src/pages/GuardiaDetail.jsx
+++ b/frontend/src/pages/GuardiaDetail.jsx
@@ -138,6 +138,7 @@ export default function GuardiaDetail() {
           <div className="gd-tabs">
             {[
               {id:'features',   label:'핵심 기능'},
+              {id:'app',        label:'모바일 앱'},
               {id:'messenger',  label:'Messenger Bot'},
               {id:'manager',    label:'Manager'},
               {id:'editions',   label:'에디션 비교'},
@@ -258,6 +259,58 @@ export default function GuardiaDetail() {
         </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">