lab/landing_page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Godopu
2026-07-30 20:15:40 +09:00
parent d833252217
commit 36a4cd851e
20 changed files with 1266 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
refer_landing_page/components/Header.tsx
+53 -41
View File
@@ -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 */}