From 40b09361bf2fe24c4258a752798aeaa1670fc221 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=9D=80=EC=84=9D?= <korea5410@gmail.com>
Date: Sat, 28 Feb 2026 19:19:25 +0900
Subject: [PATCH] feat(app): add API health check banner on mount

- Check /api/v1/health on mount, show offline banner if unreachable
- Add .banner-offline style with dark mode support
- Use CSS system font stack instead of next/font/google (avoids build-time font download issues)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/app/globals.css | 18 ++++++++++++++++++
 app/app/page.tsx    | 10 ++++++++++
 2 files changed, 28 insertions(+)

diff --git a/app/app/globals.css b/app/app/globals.css
index 1db8c24..722706c 100644
--- a/app/app/globals.css
+++ b/app/app/globals.css
@@ -304,6 +304,24 @@ pre {
   padding: 1rem 0;
 }
 
+.banner-offline {
+  background: #fef2f2;
+  border: 1px solid #fca5a5;
+  color: #991b1b;
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+  font-weight: 500;
+}
+
+@media (prefers-color-scheme: dark) {
+  .banner-offline {
+    background: #450a0a;
+    border-color: #7f1d1d;
+    color: #fca5a5;
+  }
+}
+
 @media (max-width: 640px) {
   main {
     padding: 1rem 0.75rem 3rem;
diff --git a/app/app/page.tsx b/app/app/page.tsx
index 47b6389..73060f0 100644
--- a/app/app/page.tsx
+++ b/app/app/page.tsx
@@ -69,7 +69,12 @@ export default function HomePage() {
   const sourceRef = useRef<HTMLTextAreaElement>(null);
   const questionRef = useRef<HTMLTextAreaElement>(null);
 
+  const [apiOnline, setApiOnline] = useState(true);
+
   useEffect(() => {
+    fetch(ENDPOINT.health)
+      .then((res) => setApiOnline(res.ok))
+      .catch(() => setApiOnline(false));
     void refreshAll();
   }, []);
 
@@ -166,6 +171,11 @@ export default function HomePage() {
 
   return (
     <main>
+      {!apiOnline && (
+        <p className="banner-offline" role="alert">
+          API 서버에 연결할 수 없습니다. 일부 기능이 제한됩니다.
+        </p>
+      )}
       <h1 id="title">Knowledge Copilot</h1>
       <p className="subtitle">RAG, 액션형 AI, API 로그 추적까지 포함한 포트폴리오 프로젝트</p>