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
@@ -81,6 +81,7 @@ img { display: block; max-width: 100%; }

 .profile { display: flex; align-items: center; gap: 12px; font-size: 0.86rem; }
 .avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
+.profile .avatar[hidden] { display: none; }
 .menu-button { display: grid; width: 42px; height: 42px; padding: 10px; place-content: center; gap: 4px; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; background: transparent; }
 .menu-button[hidden] { display: none; }
 .menu-button span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); }
@@ -108,7 +109,7 @@ img { display: block; max-width: 100%; }
 .button-quiet { min-height: 38px; padding: 7px 14px; border-color: var(--line); background: transparent; }
 .button-danger { border-color: #a43928; color: #8d3022; background: transparent; }
 .google-login { width: 100%; gap: 12px; }
-.google-login span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: var(--green-dark); background: white; }
+.google-login > span[aria-hidden] { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: var(--green-dark); background: white; }

 .page-shell { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding-bottom: 100px; }

@@ -239,6 +240,9 @@ img { display: block; max-width: 100%; }
 .login-card .brand-mark { margin: 0 auto 28px; }
 .login-card h1 { margin: 8px 0 16px; font-family: var(--serif); font-size: 3rem; font-weight: 400; line-height: 1; }
 .login-copy { margin: 0 0 32px; color: var(--muted); }
+.login-alert { margin: -12px 0 20px; padding: 14px 16px; border: 1px solid rgba(164, 57, 40, 0.3); border-radius: 14px; color: #7f2e22; background: #fff3ed; text-align: left; }
+.login-alert strong { font-size: 0.9rem; }
+.login-alert p { margin: 5px 0 0; font-size: 0.76rem; line-height: 1.5; }
 .fine-print { margin: 18px 0 0; color: var(--muted); font-size: 0.72rem; }

 .detail-shell { width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: 50px 0 100px; }
@@ -300,11 +304,12 @@ img { display: block; max-width: 100%; }
  .import-form { flex-direction: column; border-radius: 18px; }
  .import-form .button { width: 100%; }
  .recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
-  .recipe-card { border-radius: 14px; }
-  .recipe-card-body { padding: 14px; }
-  .recipe-card-body h3 { display: -webkit-box; overflow: hidden; margin: 10px 0 6px; font-size: 1.15rem; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
-  .recipe-card-body > p:not(.recipe-card-match) { display: -webkit-box; overflow: hidden; font-size: 0.75rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
-  .recipe-card-tags { gap: 4px; margin-top: 10px; }
+  .recipe-card { display: flex; overflow: hidden; flex-direction: column; border-radius: 14px; }
+  .recipe-card-body { display: flex; height: 228px; flex: 0 0 228px; flex-direction: column; overflow: hidden; padding: 14px; }
+  .recipe-card-body h3 { display: -webkit-box; overflow: hidden; min-height: 2.58rem; max-height: 2.58rem; margin: 10px 0 6px; font-size: 1.15rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
+  .recipe-card-body > p:not(.recipe-card-match) { display: -webkit-box; overflow: hidden; min-height: 2.18rem; max-height: 2.18rem; font-size: 0.75rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
+  .recipe-card-body .recipe-card-match { display: -webkit-box; overflow: hidden; max-height: 2.5rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
+  .recipe-card-tags { overflow: hidden; max-height: 3.4rem; gap: 4px; margin-top: auto; padding-top: 10px; }
  .recipe-card-tags .tag { font-size: 0.68rem; }
  .tag-filter-heading { align-items: flex-start; flex-direction: column; }
  .tag-filter-heading small { display: block; margin: 2px 0 0; }
@@ -8,21 +8,7 @@
    <link rel="stylesheet" href="/css/app.css">
  </head>
  <body>
-    <header class="site-header">
-      <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>
+    <header id="site-header" class="site-header"></header>

    <main class="page-shell">
      <section class="hero">
@@ -94,32 +80,6 @@

    </main>

-    <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>
-
    <button id="access-overlay-backdrop" class="access-overlay-backdrop" type="button"
            aria-label="로그인 허용 계정 관리 닫기" hidden></button>
    <section id="access-overlay" class="access-overlay" role="dialog" aria-modal="true"
@@ -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;
+    },
+  };
+}
@@ -1,8 +1,11 @@
 import { apiRequest } from './api.js';
+import { mountAppBar } from './app-bar.js';
 import { bindLogout, loadSession } from './auth.js';
 import { searchRecipes } from './recipe-search.js';
 import { bindScrollToTop } from './scroll-to-top.js';

+const appBar = mountAppBar({ onManageAccess: openAccessManager });
+
 const elements = {
  importForm: document.querySelector('#import-form'),
  importStatus: document.querySelector('#import-status'),
@@ -17,13 +20,6 @@ const elements = {
  tagFilterOptions: document.querySelector('#tag-filter-options'),
  toggleTagFilter: document.querySelector('#toggle-tag-filter'),
  clearTagFilter: document.querySelector('#clear-tag-filter'),
-  accessMenuButton: document.querySelector('#access-menu-button'),
-  accessDrawer: document.querySelector('#access-drawer'),
-  closeAccessDrawer: document.querySelector('#close-access-drawer'),
-  drawerBackdrop: document.querySelector('#drawer-backdrop'),
-  drawerUserName: document.querySelector('#drawer-user-name'),
-  drawerUserEmail: document.querySelector('#drawer-user-email'),
-  openAccessOverlay: document.querySelector('#open-access-overlay'),
  accessOverlay: document.querySelector('#access-overlay'),
  closeAccessOverlay: document.querySelector('#close-access-overlay'),
  accessOverlayBackdrop: document.querySelector('#access-overlay-backdrop'),
@@ -199,20 +195,7 @@ async function loadAllowedEmails() {
 }

 function updatePageLock() {
-  document.body.classList.toggle(
-    'drawer-open',
-    !elements.accessDrawer.hidden || !elements.accessOverlay.hidden,
-  );
-}
-
-function setAccessDrawerOpen(open) {
-  elements.accessMenuButton.setAttribute('aria-expanded', String(open));
-  elements.accessDrawer.setAttribute('aria-hidden', String(!open));
-  elements.accessDrawer.hidden = !open;
-  elements.drawerBackdrop.hidden = !open;
-  updatePageLock();
-  if (open) elements.closeAccessDrawer.focus();
-  else elements.accessMenuButton.focus();
+  document.body.classList.toggle('drawer-open', !elements.accessOverlay.hidden);
 }

 function setAccessOverlayOpen(open) {
@@ -221,7 +204,16 @@ function setAccessOverlayOpen(open) {
  elements.accessOverlayBackdrop.hidden = !open;
  updatePageLock();
  if (open) elements.accessEmail.focus();
-  else elements.accessMenuButton.focus();
+  else appBar.focusMenuButton();
+}
+
+async function openAccessManager() {
+  setAccessOverlayOpen(true);
+  try {
+    await loadAllowedEmails();
+  } catch (error) {
+    showToast(error.message);
+  }
 }

 function ingredientGroupTemplate(group, groupIndex) {
@@ -444,28 +436,11 @@ elements.clearRecipeSearch.addEventListener('click', () => {
  renderRecipes();
 });

-elements.accessMenuButton.addEventListener('click', () => {
-  setAccessDrawerOpen(true);
-});
-
-elements.openAccessOverlay.addEventListener('click', async () => {
-  setAccessDrawerOpen(false);
-  setAccessOverlayOpen(true);
-  try {
-    await loadAllowedEmails();
-  } catch (error) {
-    showToast(error.message);
-  }
-});
-
-elements.closeAccessDrawer.addEventListener('click', () => setAccessDrawerOpen(false));
-elements.drawerBackdrop.addEventListener('click', () => setAccessDrawerOpen(false));
 elements.closeAccessOverlay.addEventListener('click', () => setAccessOverlayOpen(false));
 elements.accessOverlayBackdrop.addEventListener('click', () => setAccessOverlayOpen(false));
 document.addEventListener('keydown', (event) => {
  if (event.key !== 'Escape') return;
  if (!elements.accessOverlay.hidden) setAccessOverlayOpen(false);
-  else if (!elements.accessDrawer.hidden) setAccessDrawerOpen(false);
 });

 elements.accessForm.addEventListener('submit', async (event) => {
@@ -507,9 +482,11 @@ elements.allowedEmailList.addEventListener('click', async (event) => {
 bindLogout();
 bindScrollToTop(elements.scrollToTop);
 currentUser = await loadSession();
-elements.drawerUserName.textContent = currentUser.name || currentUser.email;
-elements.drawerUserEmail.textContent = currentUser.email;
+appBar.setUser(currentUser);
 await loadRecipes();
-if (currentUser.canManageAccess) {
-  elements.openAccessOverlay.hidden = false;
+if (
+  currentUser.canManageAccess
+  && new URLSearchParams(window.location.search).get('manage-access') === '1'
+) {
+  await openAccessManager();
 }
@@ -0,0 +1,7 @@
+const error = new URLSearchParams(window.location.search).get('error');
+
+if (error === 'account-not-allowed') {
+  document.querySelector('#login-alert').hidden = false;
+  document.querySelector('#google-login').href = '/auth/google/select-account';
+  document.querySelector('#google-login-label').textContent = '다른 Google 계정으로 다시 시도';
+}
@@ -1,7 +1,9 @@
 import { apiRequest } from './api.js';
+import { mountAppBar } from './app-bar.js';
 import { bindLogout, loadSession } from './auth.js';
 import { bindScrollToTop } from './scroll-to-top.js';

+const appBar = mountAppBar();
 const detail = document.querySelector('#recipe-detail');
 const toast = document.querySelector('#toast');
 const scrollToTop = document.querySelector('#scroll-to-top');
@@ -221,7 +223,7 @@ function renderRecipe(recipe) {
 }

 bindLogout();
-await loadSession();
+appBar.setUser(await loadSession());

 try {
  const recipeId = decodeURIComponent(window.location.pathname.split('/').filter(Boolean).pop());
@@ -13,12 +13,16 @@
      <p class="eyebrow">PRIVATE RECIPE ARCHIVE</p>
      <h1>Our Recipe Atlas</h1>
      <p class="login-copy">Instagram과 YouTube에서 발견한 레시피를 한곳에 정리하세요.</p>
-      <a class="button button-primary google-login" href="/auth/google">
+      <div id="login-alert" class="login-alert" role="alert" hidden>
+        <strong>이 Google 계정은 사용할 수 없어요.</strong>
+        <p>관리자에게 계정 등록을 요청하거나, 허용된 다른 계정으로 다시 시도해 주세요.</p>
+      </div>
+      <a id="google-login" class="button button-primary google-login" href="/auth/google">
        <span aria-hidden="true">G</span>
-        Google 계정으로 계속하기
+        <span id="google-login-label">Google 계정으로 계속하기</span>
      </a>
      <p class="fine-print">허용 목록에 등록된 Google 계정만 로그인할 수 있습니다.</p>
    </main>
+    <script type="module" src="/js/login.js"></script>
  </body>
 </html>
-
@@ -7,17 +7,7 @@
    <link rel="stylesheet" href="/css/app.css">
  </head>
  <body>
-    <header class="site-header">
-      <a class="brand" href="/">
-        <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="logout-button" class="button button-quiet" type="button" data-logout>로그아웃</button>
-      </div>
-    </header>
+    <header id="site-header" class="site-header"></header>
    <main id="recipe-detail" class="detail-shell">
      <p class="empty-state">레시피를 불러오는 중입니다.</p>
    </main>