헤더 탭 전환 구조 추가

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 = "내 정보";
+    const displayName = session.user.display_name || "접속자";
-    userBadge.title = `${session.user.display_name} / ${session.user.role}`;
+    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();

frontend/public/index.html

@@ -39,24 +39,33 @@
     <header class="dashboard-header">
       <div class="brand-block">
         <p class="eyebrow">MH Dashboard</p>
-        <h2>조직현황 메인</h2>
+        <h2 id="current-view-title">조직 현황</h2>
       </div>
 
       <div class="header-center">
-        <span class="nav-pill muted">사업관리대장</span>
+        <button class="nav-pill" type="button" data-view="ledger">사업관리대장</button>
-        <span class="nav-pill muted">프로젝트별 분석</span>
+        <button class="nav-pill" type="button" data-view="project">프로젝트별 분석</button>
-        <span class="nav-pill muted">팀/개인별 분석</span>
+        <button class="nav-pill" type="button" data-view="team">팀/개인별 분석</button>
-        <button class="nav-pill active" type="button">조직 현황</button>
+        <button class="nav-pill active" type="button" data-view="organization">조직 현황</button>
       </div>
 
       <div class="header-actions">
-        <button id="user-badge" class="ghost-button ghost-button-soft" type="button"></button>
+        <button id="user-badge" class="ghost-button ghost-button-soft user-chip" type="button"></button>
-        <button id="logout-btn" class="ghost-button" type="button">로그아웃</button>
+        <button id="logout-btn" class="ghost-button icon-button" type="button" title="로그아웃" aria-label="로그아웃">↗</button>
       </div>
     </header>
 
     <main class="dashboard-main">
-      <section class="main-stage">
+      <section class="main-stage" data-stage="ledger" hidden>
+        <div class="stage-empty"></div>
+      </section>
+      <section class="main-stage" data-stage="project" hidden>
+        <div class="stage-empty"></div>
+      </section>
+      <section class="main-stage" data-stage="team" hidden>
+        <div class="stage-empty"></div>
+      </section>
+      <section class="main-stage" data-stage="organization">
         <div class="stage-frame">
           <iframe src="/legacy/organization?v=20260325-2" title="조직도 메인 화면"></iframe>
         </div>

frontend/public/styles.css

@@ -229,6 +229,55 @@
   background: #f8fafc;
 }
 
+.user-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 10px;
+}
+
+.user-chip-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #e2e8f0;
+  color: #475569;
+  font-size: 10px;
+  font-weight: 900;
+  flex: 0 0 auto;
+}
+
+.user-chip-text {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+.user-chip-text strong,
+.user-chip-text em {
+  font-size: 11px;
+  font-style: normal;
+}
+
+.user-chip-text strong {
+  color: var(--color-text);
+}
+
+.user-chip-text em {
+  color: var(--color-text-muted);
+}
+
+.icon-button {
+  width: 34px;
+  padding: 0;
+  justify-content: center;
+  font-size: 13px;
+}
+
 .dashboard-main {
   flex: 1;
   min-height: calc(100vh - 68px);
@@ -254,6 +303,12 @@
   background: #fff;
 }
 
+.stage-empty {
+  flex: 1;
+  min-height: 0;
+  background: transparent;
+}
+
 @media (max-width: 1180px) {
   .dashboard-header {
     grid-template-columns: 1fr;