MediaWiki:Common.js: Difference between revisions

Revision as of 02:32, 9 April 2026

/* =============================================
   ERAKH HEADER — MediaWiki:Common.js
   erakh.com Header.tsx와 동일한 디자인/역할
   ============================================= */

(function () {
  /* --- 쿠키 읽기 --- */
  function getCookie(name) {
    var match = document.cookie.match(new RegExp("(?:^|; )" + name + "=([^;]*)"));
    return match ? decodeURIComponent(match[1]) : null;
  }

  /* --- 유저 정보 파싱 --- */
  var user = null;
  try {
    var raw = getCookie("erakh_user");
    if (raw) user = JSON.parse(raw);
  } catch (e) {}

  /* --- CSS 주입 --- */
  var style = document.createElement("style");
  style.textContent = `
    .erakh-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9999;
      width: 100%;
      background: var(--bg, #f9f6f0);
      border-bottom: 1px solid var(--beige-2, #e2d9c8);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 2rem;
      height: 56px;
    }
    .erakh-header-left {
      display: flex;
      align-items: center;
      gap: 1.75rem;
    }
    .erakh-logo {
      font-family: 'Cinzel', serif;
      font-size: 1.125rem;
      font-weight: 500;
      color: var(--ink, #2a2218);
      text-decoration: none;
      letter-spacing: 0.05em;
    }
    .erakh-nav a {
      font-family: 'EB Garamond', serif;
      font-size: 1rem;
      color: var(--ink-soft, #6b5e4e);
      text-decoration: none;
      transition: color 0.15s;
    }
    .erakh-nav a:hover {
      color: var(--ink, #2a2218);
    }
    .erakh-nav a.active {
      color: var(--ink, #2a2218);
    }
    .erakh-login-btn {
      font-family: 'Inter', sans-serif;
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--ink, #2a2218);
      text-decoration: none;
      padding: 0.4rem 1rem;
      border: 1px solid var(--beige-3, #c8b99a);
      background: transparent;
      transition: border-color 0.15s, background 0.15s;
      cursor: pointer;
    }
    .erakh-login-btn:hover {
      border-color: var(--gold, #c8a060);
      background: var(--beige-1, #f0ebe0);
    }
    .erakh-profile {
      position: relative;
    }
    .erakh-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--beige-2, #e2d9c8);
      border: 1px solid var(--beige-3, #c8b99a);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-family: 'Cinzel', serif;
      font-size: 0.75rem;
      color: var(--ink, #2a2218);
      transition: border-color 0.15s;
    }
    .erakh-avatar:hover {
      border-color: var(--gold, #c8a060);
    }
    .erakh-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      background: var(--bg, #f9f6f0);
      border: 1px solid var(--beige-2, #e2d9c8);
      min-width: 180px;
      padding: 0.5rem 0;
      box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    }
    .erakh-dropdown-email {
      padding: 0.5rem 1rem 0.75rem;
      font-family: 'EB Garamond', serif;
      font-size: 0.875rem;
      color: var(--ink-soft, #6b5e4e);
      border-bottom: 1px solid var(--beige-2, #e2d9c8);
      margin-bottom: 0.25rem;
      font-style: italic;
      word-break: break-all;
    }
    .erakh-dropdown-item {
      display: block;
      width: 100%;
      padding: 0.5rem 1rem;
      font-family: 'Inter', sans-serif;
      font-size: 0.8125rem;
      color: var(--ink, #2a2218);
      text-align: left;
      background: transparent;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.1s;
      box-sizing: border-box;
    }
    .erakh-dropdown-item:hover {
      background: var(--beige-1, #f0ebe0);
    }
    .erakh-dropdown-item.danger {
      color: #a04040;
    }
  `;
  document.head.appendChild(style);

  /* --- 헤더 HTML 생성 --- */
  var header = document.createElement("header");
  header.className = "erakh-header";

  /* 좌측 */
  var left = document.createElement("div");
  left.className = "erakh-header-left";

  var logo = document.createElement("a");
    logo.href = "https://erakh.com";
    logo.className = "erakh-logo";
    logo.textContent = "Erakh Archive";
    logo.style.cssText = "font-family:'Cinzel',serif !important;font-size:1.125rem !important;font-weight:500 !important;color:#2a2218 !important;text-decoration:none !important;letter-spacing:0.05em !important;text-transform:none !important;font-variant:normal !important;font-variant-caps:normal !important;";

  var nav = document.createElement("nav");
  nav.className = "erakh-nav";
  var codexLink = document.createElement("a");
  codexLink.href = "https://codex.erakh.com";
  codexLink.textContent = "Codex";
  codexLink.className = "active";
  nav.appendChild(codexLink);

  left.appendChild(logo);
  left.appendChild(nav);

  /* 우측 */
  var right = document.createElement("div");

  if (user && user.email) {
    /* 로그인 상태 — 아바타 + 드롭다운 */
    var profile = document.createElement("div");
    profile.className = "erakh-profile";

    var avatar = document.createElement("div");
    avatar.className = "erakh-avatar";
    avatar.textContent = user.email.slice(0, 1).toUpperCase();

    var dropdown = document.createElement("div");
    dropdown.className = "erakh-dropdown";
    dropdown.style.display = "none";

    var emailDiv = document.createElement("div");
    emailDiv.className = "erakh-dropdown-email";
    emailDiv.textContent = user.email;

    var profileLink = document.createElement("a");
    profileLink.href = "https://erakh.com/profile";
    profileLink.className = "erakh-dropdown-item";
    profileLink.textContent = "Profile";

    var signOutBtn = document.createElement("button");
    signOutBtn.className = "erakh-dropdown-item danger";
    signOutBtn.textContent = "Sign out";
    signOutBtn.addEventListener("click", function () {
      fetch("https://erakh.com/api/auth/logout", { method: "POST", credentials: "include" })
        .then(function () {
          window.location.href = "https://erakh.com";
        });
    });

    dropdown.appendChild(emailDiv);
    dropdown.appendChild(profileLink);
    dropdown.appendChild(signOutBtn);

    avatar.addEventListener("click", function () {
      dropdown.style.display = dropdown.style.display === "none" ? "block" : "none";
    });

    document.addEventListener("click", function (e) {
      if (!profile.contains(e.target)) {
        dropdown.style.display = "none";
      }
    });

    profile.appendChild(avatar);
    profile.appendChild(dropdown);
    right.appendChild(profile);

  } else {
    /* 비로그인 상태 — Sign in 버튼 */
    var loginBtn = document.createElement("a");
    loginBtn.href = "https://erakh.com/login?redirect=" + encodeURIComponent(window.location.href);
    loginBtn.className = "erakh-login-btn";
    loginBtn.textContent = "Sign in";
    right.appendChild(loginBtn);
  }

  header.appendChild(left);
  header.appendChild(right);
  document.body.insertBefore(header, document.body.firstChild);
})();