MediaWiki:Common.js: Difference between revisions

Revision as of 02:34, 9 April 2026

(function () {
  /* --- Google Fonts 강제 로드 --- */
  var fontLink = document.createElement("link");
  fontLink.rel = "stylesheet";
  fontLink.href = "https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500&display=swap";
  document.head.insertBefore(fontLink, document.head.firstChild);

  /* --- 쿠키 읽기 --- */
  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) {}

  /* --- 인라인 스타일 헬퍼 --- */
  function s(el, styles) {
    Object.keys(styles).forEach(function(k) { el.style[k] = styles[k]; });
  }

  /* --- 헤더 --- */
  var header = document.createElement("header");
  s(header, {
    position: "fixed",
    top: "0",
    left: "0",
    right: "0",
    zIndex: "9999",
    width: "100%",
    background: "#f9f6f0",
    borderBottom: "1px solid #e2d9c8",
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    padding: "0 2rem",
    height: "56px",
    boxSizing: "border-box"
  });

  /* --- 좌측 --- */
  var left = document.createElement("div");
  s(left, {
    display: "flex",
    alignItems: "center",
    gap: "1.75rem"
  });

  var logo = document.createElement("a");
  logo.href = "https://erakh.com";
  logo.textContent = "Erakh Archive";
  s(logo, {
    fontFamily: "'Cinzel', serif",
    fontSize: "1.125rem",
    fontWeight: "500",
    color: "#2a2218",
    textDecoration: "none",
    letterSpacing: "0.05em",
    textTransform: "none",
    fontVariant: "normal",
    fontVariantCaps: "normal",
    lineHeight: "1"
  });

  var nav = document.createElement("nav");
  s(nav, { display: "flex", alignItems: "center", gap: "1.5rem" });

  var codexLink = document.createElement("a");
  codexLink.href = "https://codex.erakh.com";
  codexLink.textContent = "Codex";
  s(codexLink, {
    fontFamily: "'EB Garamond', serif",
    fontSize: "1rem",
    color: "#6b5e4e",
    textDecoration: "none",
    textTransform: "none",
    fontVariant: "normal",
    lineHeight: "1"
  });
  codexLink.addEventListener("mouseover", function() { this.style.color = "#2a2218"; });
  codexLink.addEventListener("mouseout",  function() { this.style.color = "#6b5e4e"; });

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

  /* --- 우측 --- */
  var right = document.createElement("div");
  s(right, { display: "flex", alignItems: "center" });

  if (user && user.email) {
    /* 로그인 — 아바타 + 드롭다운 */
    var profile = document.createElement("div");
    s(profile, { position: "relative" });

    var avatar = document.createElement("div");
    avatar.textContent = user.email.slice(0, 1).toUpperCase();
    s(avatar, {
      width: "32px",
      height: "32px",
      borderRadius: "50%",
      background: "#e2d9c8",
      border: "1px solid #c8b99a",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      cursor: "pointer",
      fontFamily: "'Cinzel', serif",
      fontSize: "0.75rem",
      color: "#2a2218",
      boxSizing: "border-box",
      fontVariant: "normal",
      textTransform: "none"
    });

    var dropdown = document.createElement("div");
    s(dropdown, {
      display: "none",
      position: "absolute",
      top: "calc(100% + 8px)",
      right: "0",
      background: "#f9f6f0",
      border: "1px solid #e2d9c8",
      minWidth: "180px",
      padding: "0.5rem 0",
      boxShadow: "0 4px 16px rgba(0,0,0,0.06)",
      zIndex: "10000",
      boxSizing: "border-box"
    });

    var emailDiv = document.createElement("div");
    emailDiv.textContent = user.email;
    s(emailDiv, {
      padding: "0.5rem 1rem 0.75rem",
      fontFamily: "'EB Garamond', serif",
      fontSize: "0.875rem",
      color: "#6b5e4e",
      borderBottom: "1px solid #e2d9c8",
      marginBottom: "0.25rem",
      fontStyle: "italic",
      wordBreak: "break-all"
    });

    var profileLink = document.createElement("a");
    profileLink.href = "https://erakh.com/profile";
    profileLink.textContent = "Profile";
    s(profileLink, {
      display: "block",
      width: "100%",
      padding: "0.5rem 1rem",
      fontFamily: "'Inter', sans-serif",
      fontSize: "0.8125rem",
      color: "#2a2218",
      textDecoration: "none",
      boxSizing: "border-box",
      textTransform: "none"
    });

    var signOutBtn = document.createElement("button");
    signOutBtn.textContent = "Sign out";
    s(signOutBtn, {
      display: "block",
      width: "100%",
      padding: "0.5rem 1rem",
      fontFamily: "'Inter', sans-serif",
      fontSize: "0.8125rem",
      color: "#a04040",
      textAlign: "left",
      background: "transparent",
      border: "none",
      cursor: "pointer",
      boxSizing: "border-box",
      textTransform: "none"
    });
    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.textContent = "Sign in";
    s(loginBtn, {
      fontFamily: "'Inter', sans-serif",
      fontSize: "0.8125rem",
      fontWeight: "500",
      color: "#2a2218",
      textDecoration: "none",
      padding: "0.4rem 1rem",
      border: "1px solid #c8b99a",
      background: "transparent",
      cursor: "pointer",
      textTransform: "none",
      boxSizing: "border-box",
      lineHeight: "1"
    });
    loginBtn.addEventListener("mouseover", function() {
      this.style.borderColor = "#c8a060";
      this.style.background = "#f0ebe0";
    });
    loginBtn.addEventListener("mouseout", function() {
      this.style.borderColor = "#c8b99a";
      this.style.background = "transparent";
    });
    right.appendChild(loginBtn);
  }

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