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,87 @@
+import React from "react";
+
+export function DirectionsBlock() {
+  return (
+    <section className="mt-20 pt-16 border-t border-line" id="directions">
+      <div className="flex items-center gap-3 mb-6">
+        <span className="h-px w-8 bg-vermillion"></span>
+        <span className="font-mono text-xs tracking-widest uppercase text-vermillion font-bold">
+          Location & Contact
+        </span>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
+        {/* Left info column */}
+        <div className="lg:col-span-7 space-y-6">
+          <h2 className="font-serif text-3xl font-normal text-ink">
+            오시는 길 & 연구실 소재지
+          </h2>
+          <p className="text-ink-mute text-base leading-relaxed">
+            경북대학교 AI 에이전트 네트워크 연구실 (ANL)은 IT대학 5호관에 위치하고 있으며, 차세대 차세대 에이전트 오케스트레이션 및 고성능 네트워크 백본 연구를 수행합니다.
+          </p>
+
+          <address className="not-italic space-y-4 pt-2 text-sm font-sans text-ink">
+            <div className="flex items-start gap-3">
+              <span className="font-mono text-xs uppercase tracking-wider text-ink-mute w-20 pt-0.5">
+                소재지
+              </span>
+              <div>
+                <p className="font-medium">
+                  경북대학교 IT대학 5호관(415동) 527호
+                </p>
+                <p className="text-xs text-ink-mute mt-0.5">
+                  School of Computer Science and Engineering, Kyungpook National University
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-3">
+              <span className="font-mono text-xs uppercase tracking-wider text-ink-mute w-20">
+                지도교수
+              </span>
+              <span>
+                고석주 교수 (<a href="mailto:sjkoh@knu.ac.kr" className="text-vermillion hover:underline">sjkoh@knu.ac.kr</a>)
+              </span>
+            </div>
+
+            <div className="flex items-start gap-3">
+              <span className="font-mono text-xs uppercase tracking-wider text-ink-mute w-20 pt-0.5">
+                관련 기관
+              </span>
+              <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs font-mono text-cobalt">
+                <a href="http://www.knu.ac.kr/" target="_blank" rel="noreferrer" className="hover:underline">
+                  경북대학교 (KNU) ↗
+                </a>
+                <a href="http://cse.knu.ac.kr/" target="_blank" rel="noreferrer" className="hover:underline">
+                  컴퓨터학부 ↗
+                </a>
+                <a href="http://it.knu.ac.kr/" target="_blank" rel="noreferrer" className="hover:underline">
+                  IT대학 ↗
+                </a>
+              </div>
+            </div>
+          </address>
+        </div>
+
+        {/* Right card column */}
+        <div className="lg:col-span-5 bg-paper p-6 rounded-lg border border-line flex flex-col justify-between">
+          <div className="space-y-4">
+            <div className="font-mono text-xs text-ink-mute uppercase tracking-wider">
+              Research Environment
+            </div>
+            <h3 className="font-serif text-xl font-normal text-ink">
+              AI Agent Networking Lab
+            </h3>
+            <p className="text-xs text-ink-mute leading-relaxed">
+              QUIC/gRPC 스트리밍 통신 인프라와 컨테이너 격리 프로세스 격리 환경을 포함한 멀티 에이전트 실험실 공간을 운용합니다.
+            </p>
+          </div>
+          <div className="mt-6 pt-4 border-t border-line flex justify-between items-center text-xs font-mono text-ink-mute">
+            <span>IT-5 Building #527</span>
+            <span className="text-vermillion font-bold">ANL Laboratory</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,120 @@
+/**
+ * Abstract editorial hero — a custom illustration (inline SVG, no asset).
+ *   • A2A  → a constellation of interconnected nodes (vermillion).
+ *   • QUIC → flowing, multiplexed streams (cobalt), animated dash flow.
+ * Animations are pure CSS (tailwind keyframes: node-pulse, stream-dash).
+ *
+ * CUSTOMIZATION HOOK — palette is inherited from CSS vars; geometry below.
+ */
+export default function HeroComposition({
+  className = "",
+}: {
+  className?: string;
+}) {
+  // A2A node coordinates (interconnected mesh, upper-left field).
+  const nodes = [
+    { x: 70, y: 90 },
+    { x: 160, y: 60 },
+    { x: 130, y: 170 },
+    { x: 230, y: 130 },
+    { x: 60, y: 210 },
+    { x: 210, y: 240 },
+  ];
+  // Mesh edges between nodes (index pairs).
+  const edges: [number, number][] = [
+    [0, 1],
+    [0, 2],
+    [1, 3],
+    [2, 3],
+    [2, 4],
+    [3, 5],
+    [2, 5],
+    [4, 5],
+  ];
+
+  return (
+    <svg
+      viewBox="0 0 380 380"
+      role="img"
+      aria-label="A2A 에이전트 메시와 QUIC/gRPC 멀티스트림을 형상화한 추상 일러스트레이션"
+      className={className}
+    >
+      {/* Frame */}
+      <rect
+        x="6"
+        y="6"
+        width="368"
+        height="368"
+        fill="none"
+        stroke="#0A0A0A"
+        strokeWidth="1.5"
+      />
+
+      {/* ---- QUIC: flowing multiplexed streams (cobalt) ---- */}
+      <g stroke="#1B3A8A" fill="none" strokeWidth="2.5" strokeLinecap="round">
+        {[0, 1, 2, 3].map((i) => {
+          const y = 250 + i * 30;
+          return (
+            <path
+              key={i}
+              d={`M 30 ${y} C 140 ${y - 40}, 240 ${y + 40}, 360 ${y - 20}`}
+              strokeDasharray="10 14"
+              className="animate-stream-dash"
+              style={{ animationDelay: `${i * 0.6}s`, opacity: 0.85 }}
+            />
+          );
+        })}
+      </g>
+
+      {/* ---- A2A: interconnected node mesh (vermillion) ---- */}
+      <g stroke="#D9342B" strokeWidth="1.5">
+        {edges.map(([a, b], i) => (
+          <line
+            key={i}
+            x1={nodes[a].x}
+            y1={nodes[a].y}
+            x2={nodes[b].x}
+            y2={nodes[b].y}
+            opacity="0.55"
+          />
+        ))}
+      </g>
+      <g fill="#D9342B">
+        {nodes.map((n, i) => (
+          <circle
+            key={i}
+            cx={n.x}
+            cy={n.y}
+            r={i % 2 === 0 ? 9 : 6}
+            className="animate-node-pulse"
+            style={{
+              animationDelay: `${i * 0.5}s`,
+              transformBox: "fill-box",
+              transformOrigin: "center",
+            }}
+          />
+        ))}
+      </g>
+
+      {/* Annotations — placed in the top corners (y=24), clear of the
+          A2A node mesh (y=60..240) and the QUIC stream curves (y≥250 with
+          control points reaching y+40=380). See LAYOUT_AUDIT #3 and
+          REVIEW §3 "P1 #3" — keeping them at y=24 (mirror corners) preserves
+          a symmetric layout that the original LAYOUT_AUDIT mirror decided on. */}
+      <text x="20" y="24" fill="#0A0A0A" fontSize="11" fontWeight="600" letterSpacing="2">
+        A2A · MESH
+      </text>
+      <text
+        x="360"
+        y="24"
+        textAnchor="end"
+        fill="#0A0A0A"
+        fontSize="11"
+        fontWeight="600"
+        letterSpacing="2"
+      >
+        QUIC · STREAMS
+      </text>
+    </svg>
+  );
+}