From 3ab29564f51eda852c36a72e3389fc9ec982f367 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: Fri, 10 Jul 2026 03:10:10 +0900
Subject: [PATCH] Add HealthComponent to fetch and display health status

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

diff --git a/src/components/HealthComponent.jsx b/src/components/HealthComponent.jsx
new file mode 100644
index 0000000..40a4368
--- /dev/null
+++ b/src/components/HealthComponent.jsx
@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react';
+
+const HealthComponent = () => {
+    const [health, setHealth] = useState(null);
+
+    useEffect(() => {
+        const fetchHealth = async () => {
+            try {
+                const response = await fetch('/api/v1/health');
+                const data = await response.json();
+                setHealth(data.healthy);
+            } catch (error) {
+                console.error('Error fetching health status', error);
+                setHealth(false);
+            }
+        };
+        fetchHealth();
+    }, []);
+
+    return (
+        <div>
+            {health !== null && (
+                <span style={{
+                    color: health ? 'green' : 'red'
+                }}>
+                    {health ? 'Healthy' : 'Unhealthy'}
+                </span>
+            )}
+        </div>
+    );
+};
+
+export default HealthComponent;
\ No newline at end of file