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

refer_landing_page/app/page.tsx

@@ -0,0 +1,215 @@
+import React from "react";
+import HeroComposition from "./_components/HeroComposition";
+import { DirectionsBlock } from "./_components/DirectionsBlock";
+import { publications } from "../content/publications";
+
+const PILLARS = [
+  {
+    no: "01",
+    en: "AI Agent Engineering",
+    ko: "AI 에이전트 3대 핵심 엔지니어링",
+    theme: "vermillion" as const,
+    topics: [
+      "프롬프트 엔지니어링 (System Prompt Optimization)",
+      "맥락 엔지니어링 (Dynamic Context & Memory Packaging)",
+      "하네스 엔지니어링 (Agent Control Loop & Sandbox Isolation)",
+    ],
+    desc: "AI 에이전트의 구동 성능과 안전성을 좌우하는 프롬프트·맥락·하네스 3대 핵심 엔지니어링 기술을 연구합니다.",
+  },
+  {
+    no: "02",
+    en: "MCP & SKILL Architecture",
+    ko: "AI Agent 기능 확장 프로토콜",
+    theme: "cobalt" as const,
+    topics: [
+      "Model Context Protocol (MCP) 서버/클라이언트 아키텍처",
+      "SKILL 도구 캡슐화 및 재사용 패키징",
+      "CLI 에이전트 인터페이스 제어 및 웹 가동 제어",
+    ],
+    desc: "에이전트가 외부 도구 및 시스템과 표준화된 방식으로 연동할 수 있도록 MCP와 SKILL 패키징 기술을 개발합니다.",
+  },
+  {
+    no: "03",
+    en: "Multi-Agent Orchestration",
+    ko: "멀티 에이전트 협업 및 오케스트레이션",
+    theme: "vermillion" as const,
+    topics: [
+      "HERDR 백그라운드 프로세스 컨테이너 격리 제어",
+      "crewAI 기반 역할 분담 및 태스크 위임 체계",
+      "LangGraph 순환 상태 그래프 기반 워크플로우 제어",
+    ],
+    desc: "다중 에이전트 환경에서 독립적인 역할 분담과 선순환 오케스트레이션을 보장하는 자율 협업 플랫폼을 연구합니다.",
+  },
+  {
+    no: "04",
+    en: "A2A & ACP Open Protocols",
+    ko: "에이전트 상호운용성 개방형 표준",
+    theme: "cobalt" as const,
+    topics: [
+      "Agent-to-Agent (A2A) 프로토콜 규격 정의 및 검증",
+      "Agent Communication Protocol (ACP) 메시지 교환 규격",
+      "Agent Card (/.well-known/agent-card.json) 메타데이터 검증",
+    ],
+    desc: "서로 다른 프레임워크 기반의 에이전트 간의 상호운용성을 보장하는 국제 표준 개방형 통신 프로토콜을 구현합니다.",
+  },
+  {
+    no: "05",
+    en: "High-Performance Networking Backbone",
+    ko: "AIoT & 고성능 통신 백본",
+    theme: "vermillion" as const,
+    topics: [
+      "gRPC / QUIC 양방향 스트리밍 에이전트 백본 통신",
+      "Protocol Buffers (Protobuf) 직렬화 통신 최적화",
+      "MQTT / CoAP 엣지 메시 통신망 통합",
+    ],
+    desc: "초저지연 양방향 스트리밍 통신 인프라를 바탕으로 고성능 에이전트 백본 네트워크를 설계하고 실증합니다.",
+  },
+];
+
+export default function HomePage() {
+  const pubCount = publications.length;
+
+  return (
+    <div className="space-y-16 py-6">
+      {/* Hero Section */}
+      <section className="relative">
+        <div className="flex items-center gap-3 mb-4">
+          <span className="h-px w-8 bg-vermillion"></span>
+          <span className="font-mono text-xs tracking-widest uppercase text-vermillion font-bold">
+            Kyungpook National University · AI Agent Networking Lab (ANL)
+          </span>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
+          <div className="lg:col-span-7 space-y-6">
+            <h1 className="font-serif text-4xl sm:text-5xl lg:text-6xl font-normal text-ink leading-tight">
+              에이전트 네트워크의 <br />
+              <span className="italic font-serif text-vermillion">미래를 짓다</span>
+            </h1>
+            <p className="text-ink-mute text-base sm:text-lg leading-relaxed max-w-2xl">
+              AI 에이전트 네트워크 연구실(ANL)은 에이전트 엔지니어링, MCP/SKILL 아키텍처, 
+              멀티 에이전트 오케스트레이션, A2A/ACP 개방형 표준, gRPC/QUIC 고성능 통신 백본의 
+              5대 연구 기둥을 중심으로 지능형 자율 에이전트 네트워크를 연구합니다.
+            </p>
+
+            {/* Metrics Row (Derived from data array, AC-13) */}
+            <div className="pt-6 border-t border-line grid grid-cols-3 gap-4">
+              <div>
+                <div className="font-serif text-3xl text-vermillion font-normal">
+                  {PILLARS.length}
+                </div>
+                <div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
+                  Core Pillars
+                </div>
+              </div>
+              <div>
+                <div className="font-serif text-3xl text-cobalt font-normal">
+                  {pubCount}
+                </div>
+                <div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
+                  Publications
+                </div>
+              </div>
+              <div>
+                <div className="font-serif text-3xl text-ink font-normal">
+                  2026
+                </div>
+                <div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
+                  Issue Static
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="lg:col-span-5 border border-line bg-paper p-4 rounded-lg">
+            <HeroComposition />
+          </div>
+        </div>
+      </section>
+
+      {/* 5 Pillars Magazine Spread Grid */}
+      <section className="space-y-8 pt-8 border-t border-line">
+        <div className="flex justify-between items-end">
+          <div>
+            <div className="font-mono text-xs text-vermillion uppercase tracking-widest font-bold">
+              Research Pillars
+            </div>
+            <h2 className="font-serif text-3xl font-normal text-ink mt-1">
+              5대 핵심 연구 기둥
+            </h2>
+          </div>
+          <div className="font-mono text-xs text-ink-mute">
+            Magazine Layout 01–05
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6">
+          {PILLARS.map((pillar, idx) => {
+            const isVermillion = pillar.theme === "vermillion";
+            const colSpan = idx < 3 ? "lg:col-span-2" : "lg:col-span-3";
+
+            return (
+              <div
+                key={pillar.no}
+                className={`${colSpan} bg-paper p-6 rounded-lg border border-line flex flex-col justify-between hover:border-ink transition-colors duration-200`}
+              >
+                <div className="space-y-4">
+                  <div className="flex justify-between items-center">
+                    <span
+                      className={`font-mono text-sm font-bold ${
+                        isVermillion ? "text-vermillion" : "text-cobalt"
+                      }`}
+                    >
+                      [{pillar.no}]
+                    </span>
+                    <span className="font-mono text-xs text-ink-mute uppercase">
+                      {pillar.en}
+                    </span>
+                  </div>
+
+                  <h3 className="font-serif text-xl font-normal text-ink">
+                    {pillar.ko}
+                  </h3>
+
+                  <p className="text-xs text-ink-mute leading-relaxed">
+                    {pillar.desc}
+                  </p>
+
+                  <ul className="space-y-2 pt-2">
+                    {pillar.topics.map((topic, tIdx) => (
+                      <li
+                        key={tIdx}
+                        className="text-xs text-ink flex items-start gap-2"
+                      >
+                        <span
+                          className={`inline-block w-1.5 h-1.5 rounded-full mt-1 ${
+                            isVermillion ? "bg-vermillion" : "bg-cobalt"
+                          }`}
+                        ></span>
+                        <span>{topic}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+
+                <div className="mt-6 pt-4 border-t border-line/60 flex justify-between items-center text-xs font-mono text-ink-mute">
+                  <span>ANL Core Spec</span>
+                  <span
+                    className={
+                      isVermillion ? "text-vermillion" : "text-cobalt"
+                    }
+                  >
+                    Pillar #{pillar.no}
+                  </span>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </section>
+
+      {/* Directions Block */}
+      <DirectionsBlock />
+    </div>
+  );
+}