헤더 탭 전환 구조 추가

frontend/public/app.js

@@ -6,6 +6,18 @@ 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 currentViewTitle = document.getElementById("current-view-title");
+const navButtons = Array.from(document.querySelectorAll(".header-center [data-view]"));
+const stages = Array.from(document.querySelectorAll(".main-stage[data-stage]"));
+
+const viewLabels = {
+  ledger: "사업관리대장",
+  project: "프로젝트별 분석",
+  team: "팀/개인별 분석",
+  organization: "조직 현황",
+};
+
+let currentView = "organization";
 
 function getSession() {
   try {
@@ -23,14 +35,30 @@ function clearSession() {
   sessionStorage.removeItem(sessionKey);
 }
 
+function setActiveView(view) {
+  currentView = view in viewLabels ? view : "organization";
+  if (currentViewTitle) {
+    currentViewTitle.textContent = viewLabels[currentView];
+  }
+  navButtons.forEach((button) => {
+    const active = button.dataset.view === currentView;
+    button.classList.toggle("active", active);
+    button.classList.toggle("muted", !active);
+  });
+  stages.forEach((stage) => {
+    stage.hidden = stage.dataset.stage !== currentView;
+  });
+}
+
 function renderAuth() {
   const session = getSession();
   const authenticated = Boolean(session?.user?.display_name);
   loginPanel.classList.toggle("hidden", authenticated);
   dashboardPanel.classList.toggle("hidden", !authenticated);
   if (authenticated) {
-    userBadge.textContent = "내 정보";
-    userBadge.title = `${session.user.display_name} / ${session.user.role}`;
+    const displayName = session.user.display_name || "접속자";
+    userBadge.innerHTML = `<span class="user-chip-icon">◎</span><span class="user-chip-text"><strong>${displayName}</strong><em>-</em></span>`;
+    userBadge.title = `${displayName} / -`;
   }
 }
 
@@ -62,4 +90,11 @@ if (logoutBtn) {
   });
 }
 
+navButtons.forEach((button) => {
+  button.addEventListener("click", () => {
+    setActiveView(button.dataset.view || "organization");
+  });
+});
+
+setActiveView(currentView);
 renderAuth();