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

2026-07-30 10:34:22 +09:00
parent 293431c1e8
commit ea26ef503e
23 changed files with 5326 additions and 882 deletions
@@ -0,0 +1,146 @@
+import React from "react";
+import { notFound } from "next/navigation";
+import { CategoryNav } from "../_components/CategoryNav";
+import { publications, patents } from "../../../content/publications";
+import { PUB_CATEGORIES } from "../../../content/categories";
+import { PubCategory } from "../../../content/types";
+
+interface PageProps {
+  params: {
+    category: string;
+  };
+}
+
+// SSG static pre-rendering (● SSG) for Next.js 14
+export function generateStaticParams() {
+  return PUB_CATEGORIES.map((cat) => ({
+    category: cat.slug,
+  }));
+}
+
+export default function PublicationCategoryPage({ params }: PageProps) {
+  const { category } = params;
+  const currentCat = PUB_CATEGORIES.find((c) => c.slug === category);
+
+  if (!currentCat) {
+    notFound();
+  }
+
+  const slug = category as PubCategory;
+
+  let records: any[] = [];
+  if (slug === "patent") {
+    records = patents.map((p) => ({
+      title: p.title,
+      inventors: p.inventors,
+      appNo: p.applicationNo,
+      appDate: p.applicationAt,
+      regNo: p.registrationNo,
+      regDate: p.registrationAt,
+      country: p.country,
+      publishedAt: p.publishedAt,
+      isPatent: true,
+    }));
+  } else {
+    records = publications
+      .filter((p) => p.category === slug)
+      .map((p) => ({
+        title: p.title,
+        venue: p.venue,
+        volume: p.volume,
+        publishedAt: p.publishedAt,
+        kci: p.kci,
+        isPatent: false,
+      }));
+  }
+
+  return (
+    <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">
+            Publications Category
+          </span>
+        </div>
+        <h1 className="font-serif text-4xl sm:text-5xl font-normal text-ink">
+          {currentCat.label}
+        </h1>
+        <p className="text-ink-mute text-base max-w-2xl">
+          {currentCat.desc} — 총 {records.length}건의 실데이터 카탈로그입니다.
+        </p>
+      </section>
+
+      {/* Category Nav */}
+      <CategoryNav currentCategory={slug} />
+
+      {/* Record List Section */}
+      <section className="space-y-6">
+        <div className="flex justify-between items-center border-b border-line pb-3">
+          <span className="font-mono text-xs text-ink-mute uppercase">
+            Showing {records.length} Pre-rendered Records
+          </span>
+          <span className="font-mono text-xs text-vermillion font-bold">
+            SSG ● Static HTML
+          </span>
+        </div>
+
+        {records.length === 0 ? (
+          <div className="bg-paper p-8 rounded-lg border border-line text-center space-y-3">
+            <p className="font-serif text-lg text-ink">
+              현재 등록된 실적이 0건입니다.
+            </p>
+            <p className="text-xs text-ink-mute font-mono">
+              (D-01 카테고리 정류 확정 후 후속 배치가 수행됩니다)
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {records.map((rec, idx) => (
+              <div
+                key={idx}
+                className="bg-paper p-6 rounded-lg border border-line space-y-3 hover:border-vermillion transition-colors"
+              >
+                <div className="flex justify-between items-start gap-4">
+                  <h3 className="font-serif text-xl font-normal text-ink leading-snug">
+                    {rec.title}
+                  </h3>
+                  <span className="font-mono text-xs text-vermillion bg-ivory border border-line px-2.5 py-1 rounded shrink-0 font-bold">
+                    {rec.publishedAt}
+                  </span>
+                </div>
+
+                {rec.isPatent ? (
+                  <div className="space-y-1 text-xs text-ink-mute font-mono">
+                    <p className="text-ink">발명자: {rec.inventors}</p>
+                    <p>
+                      출원번호: {rec.appNo} ({rec.country}, {rec.appDate})
+                    </p>
+                    {rec.regNo && (
+                      <p className="text-cobalt font-bold">
+                        등록번호: {rec.regNo} ({rec.regDate})
+                      </p>
+                    )}
+                  </div>
+                ) : (
+                  <div className="space-y-1 text-xs text-ink-mute font-mono">
+                    <p className="text-ink font-serif italic">{rec.venue}</p>
+                    <div className="flex items-center gap-3">
+                      <span>{rec.volume}</span>
+                      {rec.kci && (
+                        <span className="bg-cobalt text-ivory text-[0.65rem] px-1.5 py-0.5 rounded font-bold">
+                          KCI 등재
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
@@ -0,0 +1,45 @@
+import React from "react";
+import Link from "next/link";
+import { PUB_CATEGORIES } from "../../../content/categories";
+import { PubCategory } from "../../../content/types";
+
+interface CategoryNavProps {
+  currentCategory?: PubCategory;
+  totalCount?: number;
+}
+
+export function CategoryNav({ currentCategory, totalCount }: CategoryNavProps) {
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center gap-2 border-b border-line pb-4">
+        <Link
+          href="/publications"
+          className={`px-4 py-2 rounded text-xs font-mono tracking-wider transition-colors ${
+            !currentCategory
+              ? "bg-ink text-ivory font-bold"
+              : "bg-paper text-ink border border-line hover:border-ink"
+          }`}
+        >
+          All Overview {!currentCategory && totalCount ? `(${totalCount})` : ""}
+        </Link>
+
+        {PUB_CATEGORIES.map((cat) => {
+          const isActive = currentCategory === cat.slug;
+          return (
+            <Link
+              key={cat.slug}
+              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-paper text-ink border border-line hover:border-vermillion"
+              }`}
+            >
+              {cat.label}
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
@@ -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>
  );
 }