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

refer_landing_page/app/members/page.tsx

@@ -1,174 +1,213 @@
-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";
-
-export const metadata: Metadata = {
-  title: "구성원 (Members)",
-  description: "AI 에이전트 네트워크 연구실 (ANL) 지도교수 및 대학원·학부 연구원 소개 (placeholder).",
-};
-
-// CUSTOMIZATION HOOK: replace placeholder member data below.
-const advisor = {
-  ko: "고석주 교수",
-  en: "Prof. Seok-Joo Koh",
-  role: "지도교수 · Principal Investigator",
-  desc: "QUIC/gRPC/A2A 에이전트 통신, 멀티에이전트 오케스트레이션, MCP & SKILL 확장, 네트워크 프로토콜. (sjkoh@knu.ac.kr)",
-  fields: ["Agent Communication (A2A)", "Multi-Agent Orchestration", "QUIC & gRPC Transport"],
-};
-
-const groups = [
-  {
-    ko: "박사과정 연구원",
-    en: "Ph.D. Students",
-    accent: "vermillion" as const,
-    members: [
-      { name: "연구원 A (placeholder)", topic: "QUIC 기반 멀티에이전트 오케스트레이션" },
-      { name: "연구원 B (placeholder)", topic: "메타버스 공통 정보 모델 (MCM)" },
-    ],
-  },
-  {
-    ko: "석사과정 연구원",
-    en: "M.S. Students",
-    accent: "cobalt" as const,
-    members: [
-      { name: "연구원 C (placeholder)", topic: "oneM2M 적합성 검증" },
-      { name: "연구원 D (placeholder)", topic: "QUIC 스트림 다중화 성능 분석" },
-      { name: "연구원 E (placeholder)", topic: "W3C WoT Thing Description 매핑" },
-    ],
-  },
-  {
-    ko: "학부 연구원",
-    en: "Undergraduate Researchers",
-    accent: "ink" as const,
-    members: [
-      { name: "연구원 F (placeholder)", topic: "테스트베드 개발" },
-      { name: "연구원 G (placeholder)", topic: "데이터 시각화" },
-    ],
-  },
-];
-
-// CUSTOMIZATION HOOK: headcount figures (animated counters).
-const figures = [
-  { value: 1, label: "지도교수 · Principal Investigator" },
-  { value: 5, label: "대학원 연구원 · Graduate Members" },
-  { value: 2, label: "학부 연구원 · Undergraduates" },
-];
-
-const accentText: Record<string, string> = {
-  vermillion: "text-vermillion",
-  cobalt: "text-cobalt",
-  ink: "text-ink",
-};
+import React from "react";
+import { activeMembers, alumni } from "../../content/members";
 
 export default function MembersPage() {
-  return (
-    <>
-      <PageHeader
-        ko="구성원"
-        en="Members"
-        index={2}
-        description="연구실 지도교수와 박사·석사·학부 연구원을 소개합니다. 아래 정보는 예시(placeholder)이며 실제 구성원 정보로 교체할 수 있습니다."
-      />
+  const professor = activeMembers.find((m) => m.degree === "Professor");
+  const phdStudents = activeMembers.filter(
+    (m) => m.degree === "PhD" || m.degree === "PhDCandidate" || m.degree === "PhDStudent"
+  );
+  const msStudents = activeMembers.filter(
+    (m) => m.degree === "MSCandidate" || m.degree === "MSStudent"
+  );
 
-      {/* ============ HEADCOUNT 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>
-              </div>
-            </Reveal>
-          ))}
+  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">
+            People & Researchers
+          </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">
+          지도교수와 재학 연구원 16명, 그리고 IT 산업체 및 학계에서 활약하고 있는 60명의 졸업생 인벤토리입니다.
+        </p>
       </section>
 
-      {/* ============ PRINCIPAL INVESTIGATOR ============ */}
-      <section className="border-b border-ink">
-        <div className="container-content py-16 sm:py-24">
-          <Reveal>
-            <SectionLabel index={1} label="Principal Investigator" />
-          </Reveal>
+      {/* Professor Section */}
+      <section className="space-y-6 pt-6 border-t border-line">
+        <div className="font-mono text-xs text-vermillion uppercase tracking-widest font-bold">
+          Faculty
+        </div>
 
-          <div className="mt-10 grid gap-px lg:grid-cols-12">
-            <Reveal variant="left" className="lg:col-span-7">
-              <article className="group h-full border border-ink p-8 transition-colors duration-500 hover:bg-ink hover:text-ivory sm:p-10">
-                <span className="kicker group-hover:text-ivory/70">{advisor.role}</span>
-                <h2 className="headline-ko mt-5 text-4xl leading-tight">{advisor.ko}</h2>
-                <p className="font-display mt-1 text-2xl italic text-vermillion">
-                  {advisor.en}
-                </p>
-                <p className="mt-6 max-w-prose text-sm leading-relaxed opacity-90">
-                  {advisor.desc}
-                </p>
-              </article>
-            </Reveal>
-
-            <Reveal variant="right" delay={120} className="lg:col-span-5">
-              <div className="flex h-full flex-col gap-px bg-line">
-                {advisor.fields.map((field, i) => (
-                  <div
-                    key={field}
-                    className="group flex items-center gap-5 bg-ivory px-7 py-6 transition-colors duration-500 hover:bg-paper"
-                  >
-                    <span className="font-display text-3xl text-ink-mute group-hover:text-vermillion">
-                      {String(i + 1).padStart(2, "0")}
-                    </span>
-                    <span className="text-sm uppercase tracking-[0.16em] text-ink-soft">
-                      {field}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            </Reveal>
+        <div className="bg-paper p-8 rounded-lg border border-line grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
+          <div className="lg:col-span-8 space-y-4">
+            <div className="flex items-baseline gap-3">
+              <h2 className="font-serif text-3xl font-normal text-ink">
+                {professor?.ko || "고석주"} 교수
+              </h2>
+              <span className="font-mono text-sm text-ink-mute">
+                {professor?.en || "Seok-Joo Koh"}, Professor
+              </span>
+            </div>
+            <p className="text-sm text-ink-mute leading-relaxed">
+              경북대학교 컴퓨터학부 교수 · AI 에이전트 네트워크 연구실 (ANL) 지도교수. 
+              QUIC/gRPC 통신, A2A/ACP 프로토콜, MCP &amp; SKILL 아키텍처 및 에이전트 오케스트레이션 연구를 총괄하고 있습니다.
+            </p>
+            <div className="pt-4 border-t border-line/60 flex flex-wrap gap-4 text-xs font-mono">
+              <a
+                href="mailto:sjkoh@knu.ac.kr"
+                className="text-vermillion hover:underline"
+              >
+                sjkoh@knu.ac.kr
+              </a>
+              <span className="text-ink-mute">•</span>
+              <a
+                href="https://github.com/sjkoh12"
+                target="_blank"
+                rel="noreferrer"
+                className="text-cobalt hover:underline"
+              >
+                GitHub @sjkoh12 ↗
+              </a>
+            </div>
+          </div>
+          <div className="lg:col-span-4 bg-ivory p-6 rounded border border-line text-xs space-y-2 font-mono">
+            <div className="text-ink font-bold border-b border-line pb-1">
+              Affiliation & Office
+            </div>
+            <p className="text-ink-mute">Kyungpook National University</p>
+            <p className="text-ink-mute">IT Building #5 Room 527</p>
+            <p className="text-ink-mute">Daegu, Republic of Korea</p>
           </div>
         </div>
       </section>
 
-      {/* ============ RESEARCH GROUPS ============ */}
-      <section>
-        <div className="container-content py-16 sm:py-24">
-          <Reveal>
-            <SectionLabel index={2} label="Researchers" />
-          </Reveal>
+      {/* Active Researchers Section */}
+      <section className="space-y-8 pt-6 border-t border-line">
+        <div className="flex justify-between items-end">
+          <div>
+            <div className="font-mono text-xs text-cobalt uppercase tracking-widest font-bold">
+              Active Researchers ({activeMembers.length} Members)
+            </div>
+            <h2 className="font-serif text-3xl font-normal text-ink mt-1">
+              재학 연구원
+            </h2>
+          </div>
+        </div>
 
-          {groups.map((g, gi) => (
-            <div key={g.en} className="mt-14 first:mt-12">
-              <Reveal>
-                <div className="flex items-baseline justify-between border-b border-ink pb-4">
-                  <h3 className="headline-ko text-2xl text-ink sm:text-3xl">{g.ko}</h3>
-                  <span
-                    className={`font-display text-lg italic ${accentText[g.accent]}`}
-                  >
-                    {g.en}
+        {/* Ph.D. Candidates / Students */}
+        <div className="space-y-4">
+          <h3 className="font-mono text-xs uppercase tracking-wider text-ink-mute border-b border-line pb-2">
+            Ph.D. Course ({phdStudents.length})
+          </h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {phdStudents.map((mem, idx) => (
+              <div
+                key={idx}
+                className="bg-paper p-5 rounded border border-line space-y-2 hover:border-cobalt transition-colors"
+              >
+                <div className="flex justify-between items-baseline">
+                  <span className="font-serif text-lg font-normal text-ink">
+                    {mem.ko}
+                  </span>
+                  <span className="font-mono text-xs text-cobalt">
+                    {mem.degree}
                   </span>
                 </div>
-              </Reveal>
-
-              <div className="mt-px grid gap-px bg-line sm:grid-cols-2">
-                {g.members.map((m, mi) => (
-                  <Reveal key={m.name} delay={mi * 80} className="bg-ivory">
-                    <article className="group flex h-full flex-col justify-between gap-8 p-7 transition-colors duration-500 hover:bg-ink hover:text-ivory">
-                      <span className="font-display text-2xl text-ink-mute group-hover:text-vermillion">
-                        {String(gi + 1).padStart(2, "0")}.{String(mi + 1).padStart(2, "0")}
-                      </span>
-                      <div>
-                        <h4 className="headline-ko text-lg">{m.name}</h4>
-                        <p className="mt-2 text-xs leading-relaxed text-ink-mute group-hover:text-ivory/60">
-                          {m.topic}
-                        </p>
-                      </div>
-                    </article>
-                  </Reveal>
-                ))}
+                <div className="font-mono text-xs text-ink-mute">{mem.en}</div>
+                {mem.affiliation && (
+                  <div className="text-xs text-vermillion pt-1 border-t border-line/40">
+                    with {mem.affiliation}
+                  </div>
+                )}
               </div>
-            </div>
-          ))}
+            ))}
+          </div>
+        </div>
+
+        {/* M.S. Candidates / Students */}
+        <div className="space-y-4 pt-4">
+          <h3 className="font-mono text-xs uppercase tracking-wider text-ink-mute border-b border-line pb-2">
+            M.S. Course ({msStudents.length})
+          </h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {msStudents.map((mem, idx) => (
+              <div
+                key={idx}
+                className="bg-paper p-5 rounded border border-line space-y-2 hover:border-cobalt transition-colors"
+              >
+                <div className="flex justify-between items-baseline">
+                  <span className="font-serif text-lg font-normal text-ink">
+                    {mem.ko}
+                  </span>
+                  <span className="font-mono text-xs text-cobalt">
+                    {mem.degree}
+                  </span>
+                </div>
+                <div className="font-mono text-xs text-ink-mute">{mem.en}</div>
+                {mem.affiliation && (
+                  <div className="text-xs text-vermillion pt-1 border-t border-line/40">
+                    with {mem.affiliation}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
         </div>
       </section>
-    </>
+
+      {/* Alumni Section (Native <details>/<summary> progressive disclosure) */}
+      <section className="space-y-6 pt-6 border-t border-line">
+        <div className="flex justify-between items-end">
+          <div>
+            <div className="font-mono text-xs text-ink-mute uppercase tracking-widest font-bold">
+              Alumni Inventory ({alumni.length} Graduates)
+            </div>
+            <h2 className="font-serif text-3xl font-normal text-ink mt-1">
+              졸업생 목록
+            </h2>
+          </div>
+        </div>
+
+        <details className="group border border-line rounded-lg bg-paper p-6 transition-all duration-200">
+          <summary className="flex justify-between items-center cursor-pointer list-none select-none">
+            <div className="space-y-1">
+              <span className="font-serif text-xl font-normal text-ink">
+                전체 졸업생 {alumni.length}명 열람하기
+              </span>
+              <p className="text-xs text-ink-mute font-mono">
+                2007년부터 2026년까지 수여된 박사(Ph.D.) 및 석사(M.S.) 졸업생 이력
+              </p>
+            </div>
+            <span className="font-mono text-xs text-vermillion font-bold border border-vermillion px-3 py-1.5 rounded group-open:bg-vermillion group-open:text-ivory transition-colors">
+              <span className="group-open:hidden">전체 보기 ▾</span>
+              <span className="hidden group-open:inline">접기 ▴</span>
+            </span>
+          </summary>
+
+          <div className="mt-6 pt-6 border-t border-line grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {alumni.map((alum, idx) => (
+              <div
+                key={idx}
+                className="bg-ivory p-4 rounded border border-line space-y-1.5"
+              >
+                <div className="flex justify-between items-baseline">
+                  <span className="font-serif text-base font-normal text-ink">
+                    {alum.ko} ({alum.en})
+                  </span>
+                  <span className="font-mono text-xs text-ink-mute">
+                    {alum.degree}
+                  </span>
+                </div>
+                <div className="font-mono text-xs text-ink-mute flex justify-between">
+                  <span>{alum.graduatedAt}</span>
+                  {alum.major && <span>{alum.major}</span>}
+                </div>
+                {alum.currentPosition && (
+                  <div className="text-xs text-cobalt pt-1 border-t border-line/40">
+                    {alum.currentPosition}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </details>
+      </section>
+    </div>
   );
 }