feat: complete ANL lab web application with lossless data migration and SSG routes

refer_landing_page/app/publications/page.tsx

@@ -1,173 +1,138 @@
-import type { Metadata } from "next";
-import PageHeader from "@/components/PageHeader";
-import Reveal from "@/components/Reveal";
-import SectionLabel from "@/components/SectionLabel";
-import Counter from "@/components/Counter";
-import Marquee from "@/components/Marquee";
+import React from "react";
+import Link from "next/link";
+import { CategoryNav } from "./_components/CategoryNav";
+import { publications, patents } from "../../content/publications";
+import { PUB_CATEGORIES } from "../../content/categories";
 
-export const metadata: Metadata = {
-  title: "논문 (Publications)",
-  description: "AI 에이전트 네트워크 연구실 (ANL)의 대표 논문 목록 (placeholder).",
-};
+export default function PublicationsIndexPage() {
+  const allRecords = [
+    ...publications.map((p) => ({ ...p, type: "paper" as const })),
+    ...patents.map((p) => ({
+      category: "patent" as const,
+      title: p.title,
+      venue: `발명자: ${p.inventors} (출원번호: ${p.applicationNo})`,
+      volume: p.registrationNo ? `등록번호: ${p.registrationNo}` : `출원국가: ${p.country}`,
+      publishedAt: p.publishedAt,
+      type: "patent" as const,
+    })),
+  ];
 
-// CUSTOMIZATION HOOK: replace placeholder publications below.
-const publications = [
-  {
-    year: "2025",
-    type: "Journal",
-    title:
-      "메타버스 상호운용을 위한 공통 정보 모델 설계 및 oneM2M 매핑 (Design of a Common Information Model for Metaverse Interoperability over oneM2M)",
-    authors: "Hong G., Researcher A., et al.",
-    venue: "한국통신학회논문지 (J-KICS), Vol. 50, No. 3",
-  },
-  {
-    year: "2025",
-    type: "Conference",
-    title:
-      "QUIC-based Orchestration Architecture for Low-Latency Multi-Agent Communication",
-    authors: "Researcher B., Hong G.",
-    venue: "IEEE International Conference on Communications (ICC)",
-  },
-  {
-    year: "2024",
-    type: "Journal",
-    title:
-      "W3C WoT Thing Description를 활용한 이종 메타버스 자산의 의미 보존 변환 (Semantic-Preserving Mapping of Cross-Platform Metaverse Assets Using W3C WoT)",
-    authors: "Researcher C., Hong G., et al.",
-    venue: "정보과학회논문지 (KIISE Transactions), Vol. 51, No. 11",
-  },
-  {
-    year: "2024",
-    type: "Conference",
-    title:
-      "Stream Multiplexing Strategies for Agent Message Routing over QUIC",
-    authors: "Researcher D., Researcher B., Hong G.",
-    venue: "ACM/IEEE Symposium on Edge Computing (SEC)",
-  },
-  {
-    year: "2023",
-    type: "Conference",
-    title:
-      "oneM2M 기반 IoT 디바이스 상호운용성 적합성 검증 프레임워크 (A Conformance Testing Framework for oneM2M-based IoT Interoperability)",
-    authors: "Researcher E., Hong G.",
-    venue: "한국정보과학회 학술발표회 (KSC)",
-  },
-];
+  // Sort by publishedAt descending
+  const sortedRecords = [...allRecords].sort(
+    (a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime()
+  );
 
-// CUSTOMIZATION HOOK: venue ticker.
-const venueTicker = [
-  "J-KICS",
-  "IEEE ICC",
-  "KIISE TRANSACTIONS",
-  "ACM/IEEE SEC",
-  "KSC",
-  "oneM2M",
-  "W3C WoT",
-  "IETF QUIC",
-];
+  const recentRecords = sortedRecords.slice(0, 10);
 
-// Accent per publication type, drawn from the editorial palette.
-const typeAccent: Record<string, { text: string; rule: string }> = {
-  Journal: { text: "text-vermillion", rule: "bg-vermillion" },
-  Conference: { text: "text-cobalt", rule: "bg-cobalt" },
-};
+  const getCategoryCount = (slug: string) => {
+    if (slug === "patent") return patents.length;
+    return publications.filter((p) => p.category === slug).length;
+  };
 
-// Derived figures.
-const journalCount = publications.filter((p) => p.type === "Journal").length;
-const confCount = publications.filter((p) => p.type === "Conference").length;
-const figures = [
-  { value: publications.length, label: "전체 논문 · Total Publications" },
-  { value: journalCount, label: "저널 · Journal" },
-  { value: confCount, label: "학회 · Conference" },
-];
-
-export default function PublicationsPage() {
   return (
-    <>
-      <PageHeader
-        ko="논문"
-        en="Publications"
-        index={3}
-        description="메타버스 상호운용성(MCM)과 QUIC 기반 멀티에이전트 통신 분야의 대표 논문입니다. 아래 목록은 예시(placeholder)입니다."
-      />
+    <div className="space-y-16 py-6">
+      {/* Header */}
+      <section className="space-y-3">
+        <div className="flex items-center gap-3">
+          <span className="h-px w-8 bg-vermillion"></span>
+          <span className="font-mono text-xs tracking-widest uppercase text-vermillion font-bold">
+            Research Output &amp; Patents
+          </span>
+        </div>
+        <h1 className="font-serif text-4xl sm:text-5xl font-normal text-ink">
+          연구 실적 개요
+        </h1>
+        <p className="text-ink-mute text-base max-w-2xl">
+          국제·국내 우수 학술지 및 학술대회 논문 148건과 특허 75건 등 총 {allRecords.length}건의 실측 연구 성과 카탈로그입니다.
+        </p>
+      </section>
 
-      {/* Venue marquee band */}
-      <Reveal>
-        <Marquee
-          items={venueTicker}
-          reverse
-          className="border-b border-ink bg-ink py-3 font-display text-xl tracking-wide text-ivory"
-        />
-      </Reveal>
+      {/* Category Nav */}
+      <CategoryNav totalCount={allRecords.length} />
 
-      {/* ============ FIGURES ============ */}
-      <section className="border-b border-ink">
-        <div className="container-content grid gap-px bg-line sm:grid-cols-3">
-          {figures.map((f, i) => (
-            <Reveal key={f.label} delay={i * 100} className="bg-ivory">
-              <div className="px-6 py-10">
-                <Counter value={f.value} className="display block text-ink" />
-                <p className="kicker mt-3">{f.label}</p>
+      {/* Category Cards Overview */}
+      <section className="space-y-6">
+        <h2 className="font-serif text-2xl font-normal text-ink">
+          카테고리별 실적 분류
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {PUB_CATEGORIES.map((cat) => {
+            const count = getCategoryCount(cat.slug);
+            return (
+              <div
+                key={cat.slug}
+                className="bg-paper p-6 rounded-lg border border-line flex flex-col justify-between hover:border-vermillion transition-colors"
+              >
+                <div className="space-y-3">
+                  <div className="flex justify-between items-baseline">
+                    <span className="font-mono text-xs text-vermillion font-bold uppercase">
+                      Category
+                    </span>
+                    <span className="font-serif text-2xl font-normal text-ink">
+                      {count}건
+                    </span>
+                  </div>
+                  <h3 className="font-serif text-xl font-normal text-ink">
+                    {cat.label}
+                  </h3>
+                  <p className="text-xs text-ink-mute leading-relaxed">
+                    {cat.desc}
+                  </p>
+                </div>
+                <div className="mt-6 pt-4 border-t border-line flex justify-between items-center">
+                  <span className="font-mono text-xs text-ink-mute">
+                    SSG Pre-rendered
+                  </span>
+                  <Link
+                    href={`/publications/${cat.slug}`}
+                    className="font-mono text-xs text-vermillion font-bold hover:underline"
+                  >
+                    목록 보기 ({count}) ↗
+                  </Link>
+                </div>
               </div>
-            </Reveal>
+            );
+          })}
+        </div>
+      </section>
+
+      {/* Recent 10 Highlight Records */}
+      <section className="space-y-6 pt-6 border-t border-line">
+        <div className="flex justify-between items-end">
+          <h2 className="font-serif text-2xl font-normal text-ink">
+            최신 성과 하이라이트 (Top 10)
+          </h2>
+          <span className="font-mono text-xs text-ink-mute">
+            Total {allRecords.length} Records
+          </span>
+        </div>
+
+        <div className="space-y-4">
+          {recentRecords.map((rec, idx) => (
+            <div
+              key={idx}
+              className="bg-paper p-5 rounded border border-line space-y-2"
+            >
+              <div className="flex justify-between items-start gap-4">
+                <h3 className="font-serif text-lg font-normal text-ink leading-snug">
+                  {rec.title}
+                </h3>
+                <span className="font-mono text-xs text-vermillion bg-ivory border border-line px-2 py-0.5 rounded shrink-0">
+                  {rec.publishedAt}
+                </span>
+              </div>
+              <div className="text-xs text-ink-mute font-mono">
+                {rec.venue}
+              </div>
+              {rec.volume && (
+                <div className="text-xs text-ink-mute font-mono">
+                  {rec.volume}
+                </div>
+              )}
+            </div>
           ))}
         </div>
       </section>
-
-      {/* ============ PUBLICATION LIST ============ */}
-      <section>
-        <div className="container-content py-16 sm:py-24">
-          <Reveal>
-            <SectionLabel index={1} label="Selected Works" />
-          </Reveal>
-
-          <ol className="mt-12 border-t border-ink">
-            {publications.map((p, i) => {
-              const accent = typeAccent[p.type] ?? {
-                text: "text-ink",
-                rule: "bg-ink",
-              };
-              // Reveal `as="li"` keeps the <ol> direct-child contract (HTML spec:
-              // <ol> may only contain <li>/<script>/<template>). See REVIEW.md §3 #1.
-              return (
-                <Reveal
-                  as="li"
-                  key={p.title}
-                  delay={(i % 3) * 80}
-                  className="group grid gap-6 border-b border-ink py-8 transition-colors duration-500 hover:bg-paper sm:grid-cols-12 sm:py-10"
-                >
-                  {/* Index + year rail */}
-                  <div className="flex items-baseline gap-4 sm:col-span-3 sm:flex-col sm:gap-3">
-                    <span className="font-display text-5xl leading-none text-ink-mute">
-                      {String(i + 1).padStart(2, "0")}
-                    </span>
-                    <span className="font-display text-2xl italic text-ink">
-                      {p.year}
-                    </span>
-                    <span
-                      className={`inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] ${accent.text}`}
-                    >
-                      <span className={`h-1.5 w-1.5 rounded-full ${accent.rule}`} />
-                      {p.type}
-                    </span>
-                  </div>
-
-                  {/* Title + meta */}
-                  <div className="sm:col-span-9">
-                    <h3 className="headline-ko text-xl leading-snug text-ink sm:text-2xl">
-                      {p.title}
-                    </h3>
-                    <p className="mt-3 text-sm text-ink-soft">{p.authors}</p>
-                    <p className="font-display text-sm italic text-ink-mute">
-                      {p.venue}
-                    </p>
-                  </div>
-                </Reveal>
-              );
-            })}
-          </ol>
-        </div>
-      </section>
-    </>
+    </div>
   );
 }