feat: complete ANL lab homepage with light/dark theme, responsive layout, and 100% SSG E2E test suite

2026-07-30 20:15:40 +09:00
parent d833252217
commit 36a4cd851e
20 changed files with 1266 additions and 105 deletions
@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useState } from "react";
+import ThemeToggle from "./ThemeToggle";

 // CUSTOMIZATION HOOK: edit nav labels / routes here.
 const navItems = [
@@ -18,7 +19,11 @@ export default function Header() {
  const pathname = usePathname();

  const isActive = (href: string) =>
-    href === "/" ? pathname === "/" : pathname === href || pathname.startsWith(`${href}/`);
+    pathname
+      ? href === "/"
+        ? pathname === "/"
+        : pathname === href || pathname.startsWith(`${href}/`)
+      : false;

  return (
    <header className="sticky top-0 z-50 border-b border-ink bg-ivory/85 backdrop-blur">
@@ -50,48 +55,55 @@ export default function Header() {
        </Link>

        {/* Desktop nav — small caps, wide tracking */}
-        <nav className="hidden items-center gap-7 lg:flex" aria-label="주 메뉴">
-          {navItems.map((item) => (
-            <Link
-              key={item.href}
-              href={item.href}
-              className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-semibold uppercase tracking-[0.18em] transition-colors ${
-                isActive(item.href)
-                  ? "text-vermillion"
-                  : "text-ink hover:text-vermillion"
-              }`}
-            >
-              <span className="font-display text-[0.62rem] text-ink-mute">
-                {item.no}
-              </span>
-              <span>{item.en}</span>
-              <span
-                aria-hidden
-                className={`absolute -bottom-1.5 left-0 h-px bg-vermillion transition-all duration-300 ${
-                  isActive(item.href) ? "w-full" : "w-0 group-hover:w-full"
+        <div className="hidden items-center gap-7 lg:flex">
+          <nav className="flex items-center gap-7" aria-label="주 메뉴">
+            {navItems.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-semibold uppercase tracking-[0.18em] transition-colors ${
+                  isActive(item.href)
+                    ? "text-vermillion"
+                    : "text-ink hover:text-vermillion"
                }`}
-              />
-            </Link>
-          ))}
-        </nav>
+              >
+                <span className="font-display text-[0.62rem] text-ink-mute">
+                  {item.no}
+                </span>
+                <span>{item.en}</span>
+                <span
+                  aria-hidden
+                  className={`absolute -bottom-1.5 left-0 h-px bg-vermillion transition-all duration-300 ${
+                    isActive(item.href) ? "w-full" : "w-0 group-hover:w-full"
+                  }`}
+                />
+              </Link>
+            ))}
+          </nav>
+          <div className="h-4 w-px bg-line" aria-hidden="true" />
+          <ThemeToggle />
+        </div>

-        {/* Mobile hamburger */}
-        <button
-          type="button"
-          className="inline-flex items-center justify-center border border-ink p-2 text-ink transition hover:bg-ink hover:text-ivory lg:hidden"
-          aria-label={open ? "메뉴 닫기" : "메뉴 열기"}
-          aria-expanded={open}
-          aria-controls="mobile-menu"
-          onClick={() => setOpen((v) => !v)}
-        >
-          <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.8} stroke="currentColor">
-            {open ? (
-              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
-            ) : (
-              <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M3.75 17.25h16.5" />
-            )}
-          </svg>
-        </button>
+        {/* Mobile controls */}
+        <div className="flex items-center gap-2 lg:hidden">
+          <ThemeToggle />
+          <button
+            type="button"
+            className="inline-flex items-center justify-center border border-ink p-2 text-ink transition hover:bg-ink hover:text-ivory"
+            aria-label={open ? "메뉴 닫기" : "메뉴 열기"}
+            aria-expanded={open}
+            aria-controls="mobile-menu"
+            onClick={() => setOpen((v) => !v)}
+          >
+            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.8} stroke="currentColor">
+              {open ? (
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
+              ) : (
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M3.75 17.25h16.5" />
+              )}
+            </svg>
+          </button>
+        </div>
      </div>

      {/* Mobile menu panel */}
@@ -0,0 +1,197 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export type Theme = "light" | "dark" | "system";
+
+export default function ThemeToggle() {
+  const [theme, setTheme] = useState<Theme | null>(null);
+
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem("theme") as Theme | null;
+      if (stored === "light" || stored === "dark" || stored === "system") {
+        setTheme(stored);
+      } else {
+        setTheme("system");
+      }
+    } catch (e) {
+      setTheme("system");
+    }
+  }, []);
+
+  const applyTheme = (targetTheme: Theme) => {
+    const isDark =
+      targetTheme === "dark" ||
+      (targetTheme === "system" &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches);
+
+    if (isDark) {
+      document.documentElement.classList.add("dark");
+      document.documentElement.setAttribute("data-theme", "dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+      document.documentElement.setAttribute("data-theme", "light");
+    }
+  };
+
+  const toggleTheme = () => {
+    if (theme === null) return;
+    const themeCycle: Record<Theme, Theme> = {
+      light: "dark",
+      dark: "system",
+      system: "light",
+    };
+    const nextTheme = themeCycle[theme];
+    setTheme(nextTheme);
+
+    try {
+      localStorage.setItem("theme", nextTheme);
+    } catch (e) {}
+
+    applyTheme(nextTheme);
+    window.dispatchEvent(new Event("theme-change"));
+  };
+
+  useEffect(() => {
+    const handleSync = () => {
+      try {
+        const stored = localStorage.getItem("theme") as Theme | null;
+        if (stored === "light" || stored === "dark" || stored === "system") {
+          setTheme(stored);
+        } else {
+          setTheme("system");
+        }
+      } catch (e) {
+        setTheme("system");
+      }
+    };
+    window.addEventListener("theme-change", handleSync);
+    return () => window.removeEventListener("theme-change", handleSync);
+  }, []);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleSystemThemeChange = (e: MediaQueryListEvent) => {
+      try {
+        const stored = localStorage.getItem("theme");
+        if (!stored || stored === "system") {
+          if (e.matches) {
+            document.documentElement.classList.add("dark");
+            document.documentElement.setAttribute("data-theme", "dark");
+          } else {
+            document.documentElement.classList.remove("dark");
+            document.documentElement.setAttribute("data-theme", "light");
+          }
+          window.dispatchEvent(new Event("theme-change"));
+        }
+      } catch (err) {}
+    };
+
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleSystemThemeChange);
+    } else {
+      mediaQuery.addListener(handleSystemThemeChange);
+    }
+
+    return () => {
+      if (mediaQuery.removeEventListener) {
+        mediaQuery.removeEventListener("change", handleSystemThemeChange);
+      } else {
+        mediaQuery.removeListener(handleSystemThemeChange);
+      }
+    };
+  }, []);
+
+  if (theme === null) {
+    return (
+      <button
+        type="button"
+        aria-label="테마 전환"
+        className="inline-flex h-8 w-20 items-center justify-center rounded border border-ink/20 p-1 text-ink opacity-70"
+      >
+        <span className="h-3 w-3 rounded-full bg-ink-mute/40 animate-pulse" />
+      </button>
+    );
+  }
+
+  const getLabel = () => {
+    if (theme === "dark") return "DARK";
+    if (theme === "system") return "AUTO";
+    return "LIGHT";
+  };
+
+  const getTitle = () => {
+    if (theme === "light") return "Switch to Dark Mode";
+    if (theme === "dark") return "Switch to System Theme";
+    return "Switch to Light Mode";
+  };
+
+  const getAriaLabel = () => {
+    if (theme === "light") return "다크 모드로 전환";
+    if (theme === "dark") return "시스템 설정 모드로 전환";
+    return "라이트 모드로 전환";
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      aria-label={getAriaLabel()}
+      title={getTitle()}
+      className="inline-flex h-8 items-center gap-1.5 rounded border border-ink/25 px-2.5 py-1 text-[0.7rem] font-semibold uppercase tracking-wider text-ink transition duration-200 hover:border-ink hover:bg-paper focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-vermillion"
+    >
+      {theme === "dark" && (
+        <svg
+          className="h-3.5 w-3.5 text-cobalt"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth="2"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
+          />
+        </svg>
+      )}
+      {theme === "light" && (
+        <svg
+          className="h-3.5 w-3.5 text-vermillion"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth="2"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 3v2.25m0 13.5V21m8.966-8.966h-2.25M4.284 12h-2.25m15.364 6.364l-1.591-1.591M6.758 6.758L5.167 5.167m12.728 0l-1.591 1.591M6.758 17.242l-1.591 1.591M12 7.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z"
+          />
+        </svg>
+      )}
+      {theme === "system" && (
+        <svg
+          className="h-3.5 w-3.5 text-ink-mute"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth="2"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25A2.25 2.25 0 015.25 3h13.5A2.25 2.25 0 0121 5.25z"
+          />
+        </svg>
+      )}
+      <span className="font-mono text-[0.68rem] uppercase text-ink">
+        {getLabel()}
+      </span>
+    </button>
+  );
+}