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

fix: resolve review issues B1-B6 (color token alpha contract, Header contrast/budget B plan, Publications Overview page, N1-N8 cleanups) with 100% E2E PASS

Browse Source
This commit is contained in:
Godopu
2026-08-20 22:42:26 +09:00
parent 9725c8ef66
commit 30e5bd8429
11 changed files with 372 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
refer_landing_page/components/Header.tsx
+16 -36
View File
@@ -9,7 +9,7 @@ import ThemeToggle from "./ThemeToggle";
const navItems = [
{ href: "/", ko: "홈", en: "Home", no: "01" },
{ href: "/members", ko: "구성원", en: "Members", no: "02" },
{ href: "/publications/intl-journal-conf", ko: "논문", en: "Publications", no: "03" },
{ href: "/publications", ko: "논문", en: "Publications", no: "03" },
{ href: "/lectures", ko: "강의", en: "Lectures", no: "04" },
{ href: "/standardization", ko: "표준화", en: "Standardization", no: "05" },
];
@@ -22,13 +22,13 @@ export default function Header() {
pathname
? href === "/"
? pathname === "/"
: pathname === href || pathname.startsWith(`${href}/`) || (href.startsWith("/publications") && pathname.startsWith("/publications"))
: pathname === href || pathname.startsWith(`${href}/`)
: false;
return (
<header className="sticky top-0 z-50 border-b border-ink bg-ivory/85 backdrop-blur py-2 sm:py-3">
<header className="sticky top-0 z-50 border-b border-ink bg-ivory/85 backdrop-blur">
{/* Journal issue strip — magazine masthead feel. */}
<div className="hidden border-b border-line pb-2 mb-2 desktop:block">
<div className="hidden border-b border-line desktop:block">
<div className="container-content flex items-center justify-between py-1.5">
<span className="kicker">KNU/CSE/ANL</span>
{/* CUSTOMIZATION HOOK: masthead tagline */}
@@ -39,11 +39,11 @@ export default function Header() {
</div>
</div>
<div className="container-content flex min-h-[4.5rem] items-center justify-between gap-8 py-2 sm:py-3">
{/* Brand logo — explicit right margin to guarantee clear separation from 01 HOME */}
<div className="container-content flex h-[4.25rem] items-center justify-between gap-4">
{/* Brand logo */}
<Link
href="/"
className="group flex flex-col leading-none shrink-0 mr-8 xl:mr-16"
className="group flex flex-col leading-none shrink-0"
onClick={() => setOpen(false)}
>
<span className="headline-ko text-lg text-ink sm:text-xl">
@@ -55,7 +55,7 @@ export default function Header() {
</Link>
{/* Desktop nav — small caps, wide tracking (visible at >= 1240px) */}
<div className="hidden items-center gap-6 desktop:flex ml-auto">
<div className="hidden items-center gap-4 desktop:flex">
<nav className="flex items-center gap-2" aria-label="주 메뉴">
{navItems.map((item) => {
const active = isActive(item.href);
@@ -64,28 +64,20 @@ export default function Header() {
key={item.href}
href={item.href}
aria-current={active ? "page" : undefined}
style={
className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-semibold uppercase tracking-[0.18em] transition-all px-3 py-1.5 rounded-md ${
active
? { backgroundColor: "var(--vermillion)", color: "#ffffff" }
: undefined
}
className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-bold uppercase tracking-[0.18em] transition-all px-3.5 py-1.5 rounded-md ${
active
? "shadow-sm font-bold"
? "bg-vermillion text-white dark:text-ivory shadow-sm font-bold"
: "text-ink hover:text-vermillion hover:bg-paper/60"
}`}
>
<span
style={active ? { color: "#ffffff" } : undefined}
className={`font-display text-[0.62rem] ${
active ? "opacity-90 font-bold" : "text-ink-mute"
active ? "text-white dark:text-ivory" : "text-ink-mute"
}`}
>
{item.no}
</span>
<span style={active ? { color: "#ffffff" } : undefined}>
{item.en}
</span>
<span>{item.en}</span>
</Link>
);
})}
@@ -132,37 +124,25 @@ export default function Header() {
href={item.href}
onClick={() => setOpen(false)}
aria-current={active ? "page" : undefined}
style={
active
? { backgroundColor: "var(--vermillion)", color: "#ffffff" }
: undefined
}
className={`flex items-baseline justify-between px-4 py-3.5 transition-colors rounded-md my-1 ${
active
? "font-bold shadow-sm"
? "bg-vermillion text-white dark:text-ivory font-bold shadow-sm"
: "text-ink hover:bg-paper/60"
}`}
>
<span className="flex items-baseline gap-3">
<span
style={active ? { color: "#ffffff" } : undefined}
className={`font-display text-xs ${
active ? "opacity-90 font-bold" : "text-ink-mute"
active ? "text-white dark:text-ivory" : "text-ink-mute"
}`}
>
{item.no}
</span>
<span
style={active ? { color: "#ffffff" } : undefined}
className="headline-ko text-lg font-bold"
>
{item.ko}
</span>
<span className="headline-ko text-lg">{item.ko}</span>
</span>
<span
style={active ? { color: "#ffffff" } : undefined}
className={`text-[0.7rem] font-semibold uppercase tracking-[0.18em] ${
active ? "opacity-90 font-bold" : "text-ink-mute"
active ? "text-white dark:text-ivory" : "text-ink-mute"
}`}
>
{item.en}