feat: refine navigation and account access flow

2026-08-14 14:16:04 +09:00
parent cee36bf12d
commit 146e78cddf
12 changed files with 239 additions and 124 deletions
@@ -0,0 +1,97 @@
+export function mountAppBar({ onManageAccess } = {}) {
+  const header = document.querySelector('#site-header');
+  if (!header) throw new Error('Global app bar mount point is missing.');
+
+  header.innerHTML = `
+    <a class="brand" href="/" aria-label="Our Recipe Atlas 홈">
+      <span class="brand-mark brand-mark-small" aria-hidden="true">ORA</span>
+      <span>Our Recipe Atlas</span>
+    </a>
+    <div class="profile">
+      <img id="profile-image" class="avatar" alt="" hidden>
+      <span id="profile-name"></span>
+      <button id="access-menu-button" class="menu-button" type="button"
+              aria-label="메뉴 열기" aria-controls="access-drawer"
+              aria-expanded="false">
+        <span></span><span></span><span></span>
+      </button>
+    </div>`;
+
+  header.insertAdjacentHTML('afterend', `
+    <button id="drawer-backdrop" class="drawer-backdrop" type="button"
+            aria-label="메뉴 닫기" hidden></button>
+    <aside id="access-drawer" class="access-drawer" role="dialog" aria-modal="true"
+           aria-labelledby="drawer-title" aria-hidden="true" hidden>
+      <div class="drawer-heading">
+        <div>
+          <p class="section-number">MENU</p>
+          <h2 id="drawer-title">메뉴</h2>
+        </div>
+        <button id="close-access-drawer" class="drawer-close" type="button"
+                aria-label="메뉴 닫기">×</button>
+      </div>
+      <div class="drawer-account">
+        <strong id="drawer-user-name"></strong>
+        <span id="drawer-user-email"></span>
+      </div>
+      <div class="drawer-actions">
+        <button id="open-access-overlay" class="drawer-action" type="button" hidden>
+          <span>로그인 허용 계정 관리</span><small>관리자</small>
+        </button>
+        <button id="drawer-logout" class="drawer-action danger" type="button" data-logout>
+          로그아웃
+        </button>
+      </div>
+    </aside>`);
+
+  const elements = {
+    menuButton: document.querySelector('#access-menu-button'),
+    profileImage: document.querySelector('#profile-image'),
+    profileName: document.querySelector('#profile-name'),
+    drawer: document.querySelector('#access-drawer'),
+    closeButton: document.querySelector('#close-access-drawer'),
+    backdrop: document.querySelector('#drawer-backdrop'),
+    manageAccessButton: document.querySelector('#open-access-overlay'),
+    drawerUserName: document.querySelector('#drawer-user-name'),
+    drawerUserEmail: document.querySelector('#drawer-user-email'),
+  };
+
+  function setOpen(open) {
+    elements.menuButton.setAttribute('aria-expanded', String(open));
+    elements.drawer.setAttribute('aria-hidden', String(!open));
+    elements.drawer.hidden = !open;
+    elements.backdrop.hidden = !open;
+    document.body.classList.toggle('drawer-open', open);
+    if (open) elements.closeButton.focus();
+    else elements.menuButton.focus();
+  }
+
+  elements.menuButton.addEventListener('click', () => setOpen(true));
+  elements.closeButton.addEventListener('click', () => setOpen(false));
+  elements.backdrop.addEventListener('click', () => setOpen(false));
+  elements.manageAccessButton.addEventListener('click', () => {
+    setOpen(false);
+    if (onManageAccess) onManageAccess();
+    else window.location.assign('/?manage-access=1');
+  });
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && !elements.drawer.hidden) setOpen(false);
+  });
+
+  return {
+    focusMenuButton() {
+      elements.menuButton.focus();
+    },
+    setUser(user) {
+      elements.profileName.textContent = user.name || user.email;
+      if (user.picture) {
+        elements.profileImage.src = user.picture;
+        elements.profileImage.alt = `${user.name || user.email} 프로필`;
+        elements.profileImage.hidden = false;
+      }
+      elements.drawerUserName.textContent = user.name || user.email;
+      elements.drawerUserEmail.textContent = user.email;
+      elements.manageAccessButton.hidden = !user.canManageAccess;
+    },
+  };
+}