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

2026-08-20 22:42:26 +09:00
parent 9725c8ef66
commit 30e5bd8429
11 changed files with 372 additions and 135 deletions
@@ -39,16 +39,16 @@
  --font-sans: 'Geist', 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

-  --ink-rgb: 10, 10, 10;
-  --ink-soft-rgb: 38, 36, 32;
-  --ink-mute-rgb: 107, 101, 91;
-  --ivory-rgb: 245, 241, 232;
-  --paper-rgb: 236, 230, 214;
-  --line-rgb: 216, 209, 192;
-  --vermillion-rgb: 217, 52, 43;
-  --vermillion-dark-rgb: 168, 35, 28;
-  --cobalt-rgb: 27, 58, 138;
-  --cobalt-dark-rgb: 18, 40, 99;
+  --ink-rgb: 10 10 10;
+  --ink-soft-rgb: 38 36 32;
+  --ink-mute-rgb: 107 101 91;
+  --ivory-rgb: 245 241 232;
+  --paper-rgb: 236 230 214;
+  --line-rgb: 216 209 192;
+  --vermillion-rgb: 217 52 43;
+  --vermillion-dark-rgb: 168 35 28;
+  --cobalt-rgb: 27 58 138;
+  --cobalt-dark-rgb: 18 40 99;

  --ink: rgb(var(--ink-rgb));
  --ink-soft: rgb(var(--ink-soft-rgb));
@@ -72,16 +72,16 @@ html.dark,
 html[data-theme="dark"] {
  color-scheme: dark;

-  --ink-rgb: 245, 241, 232;
-  --ink-soft-rgb: 216, 209, 192;
-  --ink-mute-rgb: 160, 153, 142;
-  --ivory-rgb: 18, 18, 18;
-  --paper-rgb: 30, 28, 26;
-  --line-rgb: 51, 48, 43;
-  --vermillion-rgb: 235, 75, 66;
-  --vermillion-dark-rgb: 255, 107, 97;
-  --cobalt-rgb: 77, 119, 255;
-  --cobalt-dark-rgb: 112, 148, 255;
+  --ink-rgb: 245 241 232;
+  --ink-soft-rgb: 216 209 192;
+  --ink-mute-rgb: 160 153 142;
+  --ivory-rgb: 18 18 18;
+  --paper-rgb: 30 28 26;
+  --line-rgb: 51 48 43;
+  --vermillion-rgb: 235 75 66;
+  --vermillion-dark-rgb: 255 107 97;
+  --cobalt-rgb: 77 119 255;
+  --cobalt-dark-rgb: 112 148 255;

  --grain-color: rgba(245, 241, 232, 0.03);
 }
@@ -90,7 +90,7 @@ export default function HomePage() {
              </div>
              <div>
                <div className="font-serif text-3xl text-cobalt font-normal">
-                  220+
+                  {Math.floor((publications.length + patents.length) / 10) * 10}+
                </div>
                <div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
                  Publications
@@ -5,7 +5,6 @@ import { PubCategory } from "../../../content/types";

 interface CategoryNavProps {
  currentCategory?: PubCategory;
-  totalCount?: number;
 }

 export function CategoryNav({ currentCategory }: CategoryNavProps) {
@@ -20,7 +19,7 @@ export function CategoryNav({ currentCategory }: CategoryNavProps) {
              href={`/publications/${cat.slug}`}
              className={`px-4 py-2 rounded text-xs font-mono tracking-wider transition-colors ${
                isActive
-                  ? "bg-vermillion text-ivory font-bold"
+                  ? "bg-vermillion text-white dark:text-ivory font-bold"
                  : "bg-paper text-ink border border-line hover:border-vermillion"
              }`}
            >
@@ -1,5 +1,128 @@
-import { redirect } from "next/navigation";
+import Link from "next/link";
+import { CategoryNav } from "./_components/CategoryNav";
+import { PUB_CATEGORIES } from "../../content/categories";
+import { publications, patents } from "../../content/publications";
+
+export const metadata = {
+  title: "Publications Overview | ANL",
+  description: "AI 에이전트 네트워크 연구실(ANL) 연구 실적 개요 및 카테고리별 집계",
+};

 export default function PublicationsIndexPage() {
-  redirect("/publications/intl-journal-conf");
+  const totalPubCount = publications.length + patents.length;
+
+  // Sort publication records by publishedAt descending to select top 10 highlights
+  const top10Highlights = [...publications]
+    .sort((a, b) => (b.publishedAt || "").localeCompare(a.publishedAt || ""))
+    .slice(0, 10);
+
+  const getCount = (slug: string) => {
+    if (slug === "patent") return patents.length;
+    return publications.filter((p) => p.category === slug).length;
+  };
+
+  return (
+    <main className="container-content space-y-8 md:space-y-12 pt-10 md:pt-16 pb-16 md:pb-24">
+      {/* Header section */}
+      <section className="space-y-4">
+        <div className="flex items-center gap-3">
+          <span className="h-px w-8 bg-vermillion" />
+          <span className="font-mono text-xs font-bold uppercase tracking-widest text-vermillion">
+            BIBLIOGRAPHY &amp; INTELLECTUAL PROPERTY
+          </span>
+        </div>
+        <h1 className="headline-ko text-3xl sm:text-4xl text-ink font-bold">
+          연구 실적 개요
+        </h1>
+        <p className="text-sm sm:text-base text-ink-mute max-w-3xl leading-relaxed">
+          AI 에이전트 네트워크 연구실(ANL)의 학술 논문({publications.length}건)과 특허({patents.length}건)를 포함한 총 {totalPubCount}건의 연구 성과 집계 및 대표 실적 목록입니다.
+        </p>
+      </section>
+
+      {/* Category Navigation */}
+      <CategoryNav />
+
+      {/* Category Summary Cards */}
+      <section className="grid gap-6 md:grid-cols-3">
+        {PUB_CATEGORIES.map((cat) => {
+          const count = getCount(cat.slug);
+          return (
+            <div
+              key={cat.slug}
+              className="flex flex-col justify-between border border-line bg-paper p-6 rounded-lg transition-colors hover:border-vermillion group"
+            >
+              <div className="space-y-3">
+                <span className="font-mono text-xs text-ink-mute uppercase tracking-wider">
+                  Category
+                </span>
+                <h2 className="headline-ko text-xl text-ink font-bold group-hover:text-vermillion transition-colors">
+                  {cat.label}
+                </h2>
+                <p className="text-xs text-ink-mute leading-relaxed">
+                  {cat.desc}
+                </p>
+              </div>
+              <div className="mt-6 pt-4 border-t border-line flex items-baseline justify-between">
+                <span className="font-display text-3xl font-bold text-ink">
+                  {count}
+                  <span className="text-xs font-sans text-ink-mute ml-1 font-normal">건</span>
+                </span>
+                <Link
+                  href={`/publications/${cat.slug}`}
+                  className="inline-flex items-center text-xs font-bold text-vermillion hover:underline"
+                >
+                  전체 보기 &rarr;
+                </Link>
+              </div>
+            </div>
+          );
+        })}
+      </section>
+
+      {/* Top 10 Highlights Section */}
+      <section className="space-y-6 pt-6 border-t border-line">
+        <div className="flex items-center justify-between">
+          <h2 className="headline-ko text-2xl font-bold text-ink">
+            최신 대표 실적 (Top 10 Highlights)
+          </h2>
+          <span className="font-mono text-xs text-ink-mute">
+            RECENT HIGHLIGHTS
+          </span>
+        </div>
+
+        <div className="divide-y divide-line border border-line bg-ivory rounded-lg overflow-hidden">
+          {top10Highlights.map((pub, idx) => (
+            <article key={`${pub.category}-${idx}`} className="p-5 hover:bg-paper/50 transition-colors space-y-2">
+              <div className="flex flex-wrap items-center gap-2 text-xs font-mono text-ink-mute">
+                <span className="px-2 py-0.5 rounded bg-paper border border-line text-ink font-bold">
+                  {pub.publishedAt?.substring(0, 7) || "Recent"}
+                </span>
+                <span>·</span>
+                <span className="capitalize">{pub.category.replace(/-/g, " ")}</span>
+                {pub.doi && (
+                  <>
+                    <span>·</span>
+                    <span className="text-vermillion">DOI: {pub.doi}</span>
+                  </>
+                )}
+              </div>
+              <h3 className="font-semibold text-base text-ink leading-snug">
+                {pub.title}
+              </h3>
+              {pub.authors && (
+                <p className="text-xs text-ink-mute">
+                  {pub.authors}
+                </p>
+              )}
+              {pub.venue && (
+                <p className="text-xs italic text-ink-soft">
+                  {pub.venue}
+                </p>
+              )}
+            </article>
+          ))}
+        </div>
+      </section>
+    </main>
+  );
 }