From 0c2b12ba2d22e4ca424095ec7aeb1185a93797af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=98=B8=EC=84=B1?=
 <68679792+HoSeong0731@users.noreply.github.com>
Date: Wed, 8 Jul 2026 11:20:22 +0900
Subject: [PATCH] Add HealthComponent to fetch and display API health status

---
 src/components/HealthComponent.js | 33 +++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/components/HealthComponent.js

diff --git a/src/components/HealthComponent.js b/src/components/HealthComponent.js
new file mode 100644
index 0000000..29e4c89
--- /dev/null
+++ b/src/components/HealthComponent.js
@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react';
+
+const HealthComponent = () => {
+  const [isHealthy, setIsHealthy] = useState(null);
+
+  useEffect(() => {
+    const fetchHealth = async () => {
+      try {
+        const response = await fetch('/api/v1/health');
+        const data = await response.json();
+        setIsHealthy(data.healthy);
+      } catch (error) {
+        setIsHealthy(false);
+      }
+    };
+
+    fetchHealth();
+  }, []);
+
+  return (
+    <div>
+      {isHealthy === null ? (
+        <span>Loading...</span>
+      ) : ( 
+        <span style={{ color: isHealthy ? 'green' : 'red' }}>
+          {isHealthy ? 'API is Healthy' : 'API is Down'}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default HealthComponent;
\ No newline at end of file