ai-dev-portal/public/js/ui.js

// 헤더 UI — 테마 토글 · 사용자 메뉴 · 로고 이스터에그.
import { $, toast, burstThumbs } from "./util.js";

function applyTheme(t) { document.documentElement.setAttribute("data-aidev-theme", t); }

export function initTheme() {
  const btn = $("#themeToggle");
  if (!btn) return;
  btn.addEventListener("click", () => {
    const cur = document.documentElement.getAttribute("data-aidev-theme") === "dark" ? "dark" : "light";
    const next = cur === "dark" ? "light" : "dark";
    applyTheme(next);
    try { localStorage.setItem("aidev-theme", next); } catch (e) {}
  });
}

export function initUserMenu() {
  const btn = $("#userMenuBtn"), pop = $("#userMenuPop");
  if (!btn || !pop) return;
  btn.addEventListener("click", (e) => {
    e.stopPropagation();
    const open = pop.hidden;
    pop.hidden = !open;
    btn.setAttribute("aria-expanded", open ? "true" : "false");
  });
  document.addEventListener("click", (e) => {
    if (!pop.hidden && !pop.contains(e.target) && !btn.contains(e.target)) {
      pop.hidden = true; btn.setAttribute("aria-expanded", "false");
    }
  });
}

// 로고를 4번 빠르게 클릭하면 흔들림 + 👍 (단일 클릭은 잠시 뒤 홈 이동)
export function initLogoEgg() {
  const logo = $("#brandLink");
  if (!logo) return;
  let clicks = 0, timer = null, navTimer = null;
  const mark = $(".brand-mark", logo);
  logo.addEventListener("click", (e) => {
    e.preventDefault();
    clicks++;
    clearTimeout(timer);
    timer = setTimeout(() => { clicks = 0; }, 700);
    if (navTimer) clearTimeout(navTimer);
    if (clicks >= 4) {
      clicks = 0;
      if (mark) {
        mark.style.animation = "aidev-shake .5s ease";
        const old = mark.style.filter;
        mark.style.filter = "hue-rotate(180deg) saturate(1.5)";
        setTimeout(() => { mark.style.animation = ""; mark.style.filter = old; }, 520);
      }
      burstThumbs();
      toast('🌈 git commit -m "found an easter egg"');
      return;
    }
    navTimer = setTimeout(() => { window.location.href = logo.getAttribute("href") || "/"; }, 320);
  });
}