헤더 우측 액션 단순화

frontend/public/app.js

@@ -6,7 +6,6 @@ const loginForm = document.getElementById("login-form");
 const loginMessage = document.getElementById("login-message");
 const logoutBtn = document.getElementById("logout-btn");
 const userBadge = document.getElementById("user-badge");
-const healthStatus = document.getElementById("health-status");
 
 function getSession() {
   try {
@@ -30,22 +29,8 @@ function renderAuth() {
   loginPanel.classList.toggle("hidden", authenticated);
   dashboardPanel.classList.toggle("hidden", !authenticated);
   if (authenticated) {
-    userBadge.textContent = `${session.user.display_name} / ${session.user.role}`;
-    refreshHealth();
-  }
-}
-
-async function refreshHealth() {
-  if (!healthStatus) return;
-  healthStatus.textContent = "서버 상태 확인 중";
-  try {
-    const response = await fetch("/api/health");
-    if (!response.ok) throw new Error("unhealthy");
-    const payload = await response.json();
-    const count = typeof payload.member_count === "number" ? ` / ${payload.member_count}명` : "";
-    healthStatus.textContent = `API ${payload.status}${count}`;
-  } catch (error) {
-    healthStatus.textContent = "API 연결 실패";
+    userBadge.textContent = "내 정보";
+    userBadge.title = `${session.user.display_name} / ${session.user.role}`;
   }
 }
 

frontend/public/index.html

@@ -50,8 +50,7 @@
       </div>
 
       <div class="header-actions">
-        <span id="health-status" class="status-badge">서버 상태 확인 중</span>
-        <span id="user-badge" class="user-badge"></span>
+        <button id="user-badge" class="ghost-button ghost-button-soft" type="button"></button>
         <button id="logout-btn" class="ghost-button" type="button">로그아웃</button>
       </div>
     </header>

frontend/public/styles.css

@@ -211,30 +211,7 @@
 .header-actions {
   display: flex;
   align-items: center;
-  gap: 8px;
-}
-
-.status-badge,
-.user-badge {
-  display: inline-flex;
-  align-items: center;
-  min-height: 34px;
-  padding: 0 12px;
-  border-radius: 999px;
-  font-size: 11px;
-  font-weight: 800;
-}
-
-.status-badge {
-  background: #eef2ff;
-  color: var(--color-accent-strong);
-  border: 1px solid #dfe5ff;
-}
-
-.user-badge {
-  background: #f8fafc;
-  color: var(--color-text);
-  border: 1px solid #dbe2ea;
+  gap: 6px;
 }
 
 .ghost-button {
@@ -242,12 +219,16 @@
   border: 1px solid #dbe2ea;
   background: #fff;
   color: var(--color-text);
-  padding: 0 14px;
+  padding: 0 12px;
   border-radius: 999px;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 800;
 }
 
+.ghost-button-soft {
+  background: #f8fafc;
+}
+
 .dashboard-main {
   flex: 1;
   min-height: calc(100vh - 68px);