293 lines
12 KiB
TypeScript
293 lines
12 KiB
TypeScript
import type { Metadata } from "next";
|
||
import Link from "next/link";
|
||
import Reveal from "@/components/Reveal";
|
||
import Marquee from "@/components/Marquee";
|
||
import Counter from "@/components/Counter";
|
||
import SectionLabel from "@/components/SectionLabel";
|
||
import HeroComposition from "./_components/HeroComposition";
|
||
|
||
export const metadata: Metadata = {
|
||
title: "연구실 소개 (Intro)",
|
||
description:
|
||
"메타버스 상호운용성(MCM)과 QUIC 기반 멀티에이전트 오케스트레이션을 연구하는 경북대학교 사물인터넷 표준 연구실 소개.",
|
||
};
|
||
|
||
// CUSTOMIZATION HOOK: the two research thrusts (cover spread comparison).
|
||
const thrusts = [
|
||
{
|
||
no: "Thrust 01",
|
||
tag: "MCM",
|
||
accent: "vermillion" as const,
|
||
ko: "메타버스 상호운용성",
|
||
en: "Metaverse Interoperability",
|
||
desc: "이종(異種) 메타버스 플랫폼 간 객체·아바타·자산의 상호운용을 위한 공통 데이터 모델과 변환 계층을 설계합니다. oneM2M / W3C 표준을 기반으로 서로 다른 가상 환경이 동일한 의미(semantics)로 데이터를 교환합니다.",
|
||
points: [
|
||
"공통 정보 모델(Common Information Model) 정의",
|
||
"의미 보존 변환(semantic-preserving mapping) 계층",
|
||
"상호운용성 테스트베드 및 적합성 검증",
|
||
],
|
||
},
|
||
{
|
||
no: "Thrust 02",
|
||
tag: "QUIC",
|
||
accent: "cobalt" as const,
|
||
ko: "멀티에이전트 오케스트레이션",
|
||
en: "Multi-Agent Orchestration",
|
||
desc: "다수의 자율 에이전트가 저지연·다중스트림 환경에서 협력하도록 QUIC 전송 위에 오케스트레이션 아키텍처와 통신 인터페이스를 설계합니다. 연결 마이그레이션과 스트림 다중화로 메시지 라우팅을 최적화합니다.",
|
||
points: [
|
||
"QUIC 스트림 다중화 기반 에이전트 메시지 라우팅",
|
||
"오케스트레이터–에이전트 제어 인터페이스 설계",
|
||
"연결 마이그레이션 기반 모바일·엣지 지원",
|
||
],
|
||
},
|
||
];
|
||
|
||
// CUSTOMIZATION HOOK: headline figures (animated counters).
|
||
// `value: 2026` is marked static so it renders as a fixed year, not a
|
||
// 0→2026 count-up. The year is also rendered at the smaller `display-sm`
|
||
// scale (the other two figures use the full `display` scale), so the
|
||
// 4-digit "2026" does not push the cell padding. See LAYOUT_AUDIT #11 + #13.
|
||
const figures = [
|
||
{ value: 2, label: "연구 축 · Research Thrusts", suffix: "", size: "display" as const, static: false },
|
||
{ value: 4, label: "표준화 기구 · Standards Bodies", suffix: "", size: "display" as const, static: false },
|
||
{ value: 2026, label: "Issue · 발행", suffix: "", size: "display-sm" as const, static: true },
|
||
];
|
||
|
||
// CUSTOMIZATION HOOK: research keyword ticker.
|
||
const keywords = [
|
||
"INTEROPERABILITY",
|
||
"oneM2M",
|
||
"W3C WoT",
|
||
"QUIC TRANSPORT",
|
||
"MULTI-AGENT",
|
||
"STREAM MULTIPLEXING",
|
||
"CONNECTION MIGRATION",
|
||
"METAVERSE",
|
||
"SEMANTIC MAPPING",
|
||
"CONFORMANCE",
|
||
];
|
||
|
||
const focusAreas = [
|
||
{ ko: "사물인터넷 표준화", en: "IoT Standardization" },
|
||
{ ko: "메타버스 상호운용성", en: "Metaverse Interoperability" },
|
||
{ ko: "전송 프로토콜(QUIC)", en: "Transport Protocols" },
|
||
{ ko: "멀티에이전트 시스템", en: "Multi-Agent Systems" },
|
||
];
|
||
|
||
export default function IntroPage() {
|
||
return (
|
||
<>
|
||
{/* ============ COVER SPREAD ============ */}
|
||
<section className="relative overflow-hidden border-b border-ink">
|
||
<div className="container-content pb-10 pt-12 sm:pt-16">
|
||
<Reveal>
|
||
<SectionLabel index={1} label="The Cover" />
|
||
</Reveal>
|
||
|
||
<div className="mt-8 grid items-center gap-10 lg:grid-cols-12">
|
||
{/* Headline column */}
|
||
<div className="lg:col-span-7">
|
||
<Reveal delay={60}>
|
||
<p className="kicker">경북대학교 컴퓨터학부 · IoT Standards Lab</p>
|
||
</Reveal>
|
||
<Reveal delay={120}>
|
||
{/* Korean + English mixed, magazine-cover scale */}
|
||
<h1 className="headline-ko mt-4 text-[clamp(2.5rem,8vw,5.5rem)] leading-[0.98] text-ink">
|
||
사물인터넷의
|
||
<br />
|
||
<span className="text-vermillion">표준</span>을 짓다
|
||
</h1>
|
||
<p className="display mt-3 leading-[0.9]" aria-hidden>
|
||
Standards
|
||
<span className="block italic text-cobalt">in Motion</span>
|
||
</p>
|
||
</Reveal>
|
||
<Reveal delay={200}>
|
||
<p className="mt-8 max-w-prose text-base leading-relaxed text-ink-soft">
|
||
메타버스 상호운용성(MCM)과 QUIC 기반 멀티에이전트 오케스트레이션.
|
||
국제 표준을 토대로 분산되고 이종적인 시스템이 동일한 의미로
|
||
데이터를 교환하고 협력하도록 설계합니다.
|
||
</p>
|
||
</Reveal>
|
||
<Reveal delay={260}>
|
||
<div className="mt-8 flex flex-wrap gap-3">
|
||
<Link
|
||
href="/publications"
|
||
className="bg-ink px-6 py-3 text-sm font-semibold uppercase tracking-[0.16em] text-ivory transition hover:bg-vermillion"
|
||
>
|
||
논문 보기 →
|
||
</Link>
|
||
<Link
|
||
href="/members"
|
||
className="border border-ink px-6 py-3 text-sm font-semibold uppercase tracking-[0.16em] text-ink transition hover:bg-ink hover:text-ivory"
|
||
>
|
||
구성원
|
||
</Link>
|
||
</div>
|
||
</Reveal>
|
||
</div>
|
||
|
||
{/* Abstract illustration column */}
|
||
<Reveal variant="scale" delay={200} className="lg:col-span-5">
|
||
<HeroComposition className="w-full" />
|
||
<p className="mt-3 text-right text-xs italic text-ink-mute">
|
||
Fig. 01 — MCM 노드 메시 × QUIC 멀티스트림
|
||
</p>
|
||
</Reveal>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Keyword marquee band */}
|
||
<Reveal>
|
||
<Marquee
|
||
items={keywords}
|
||
className="border-y border-ink bg-ink py-3 font-display text-xl tracking-wide text-ivory"
|
||
/>
|
||
</Reveal>
|
||
</section>
|
||
|
||
{/* ============ FIGURES / COUNTERS ============ */}
|
||
<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}
|
||
suffix={f.suffix}
|
||
static={f.static}
|
||
className={`${f.size} block text-ink`}
|
||
/>
|
||
<p className="kicker mt-3">{f.label}</p>
|
||
</div>
|
||
</Reveal>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* ============ MISSION / PULL QUOTE ============ */}
|
||
<section className="border-b border-ink">
|
||
<div className="container-content py-16 sm:py-24">
|
||
<Reveal>
|
||
<SectionLabel index={2} label="Mission" />
|
||
</Reveal>
|
||
<Reveal delay={100}>
|
||
<blockquote className="pull-quote mt-10 max-w-4xl text-ink">
|
||
“표준 적합성과 실증을 함께 추구하여, 연구가{" "}
|
||
<span className="text-vermillion">실제 표준 문서</span>와{" "}
|
||
<span className="text-cobalt">오픈소스 구현</span>으로 이어지게 한다.”
|
||
</blockquote>
|
||
</Reveal>
|
||
<Reveal delay={160}>
|
||
<p className="mt-6 max-w-prose text-sm leading-relaxed text-ink-mute">
|
||
{/* CUSTOMIZATION HOOK: marginalia / footnote */}
|
||
† 본 연구실은 사물인터넷 국제 표준을 토대로, 분산·이종 시스템이
|
||
동일한 의미로 데이터를 교환하고 협력할 수 있는 상호운용 기술을 연구합니다.
|
||
</p>
|
||
</Reveal>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ============ TWO THRUSTS — SIDE BY SIDE WITH CONNECTING LINE ============ */}
|
||
<section className="border-b border-ink">
|
||
<div className="container-content py-16 sm:py-24">
|
||
<Reveal>
|
||
<SectionLabel index={3} label="Two Research Thrusts" />
|
||
</Reveal>
|
||
|
||
<div className="relative mt-12 grid gap-px lg:grid-cols-2">
|
||
{/* Connecting line + node between the two thrusts (desktop) */}
|
||
<div
|
||
aria-hidden
|
||
className="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 lg:block"
|
||
>
|
||
<div className="flex items-center">
|
||
<span className="h-2 w-2 rounded-full bg-vermillion" />
|
||
<span className="h-px w-16 bg-ink" />
|
||
<span className="flex h-9 w-9 items-center justify-center rounded-full border border-ink bg-ivory font-display text-xs">
|
||
×
|
||
</span>
|
||
<span className="h-px w-16 bg-ink" />
|
||
<span className="h-2 w-2 rounded-full bg-cobalt" />
|
||
</div>
|
||
</div>
|
||
|
||
{thrusts.map((t, i) => {
|
||
const isVerm = t.accent === "vermillion";
|
||
return (
|
||
<Reveal
|
||
key={t.tag}
|
||
variant={i === 0 ? "left" : "right"}
|
||
delay={i * 120}
|
||
>
|
||
<article
|
||
className={`group h-full border border-ink p-8 transition-colors duration-500 sm:p-10 ${
|
||
isVerm
|
||
? "hover:bg-vermillion hover:text-ivory"
|
||
: "hover:bg-cobalt hover:text-ivory"
|
||
}`}
|
||
>
|
||
<div className="flex items-baseline justify-between">
|
||
<span className="kicker group-hover:text-ivory/70">{t.no}</span>
|
||
<span
|
||
className={`font-display text-5xl ${
|
||
isVerm ? "text-vermillion" : "text-cobalt"
|
||
} group-hover:text-ivory`}
|
||
>
|
||
{t.tag}
|
||
</span>
|
||
</div>
|
||
<h3 className="headline-ko mt-6 text-3xl leading-tight">
|
||
{t.ko}
|
||
</h3>
|
||
<p className="font-display mt-1 text-lg italic opacity-70">
|
||
{t.en}
|
||
</p>
|
||
<p className="mt-5 text-sm leading-relaxed opacity-90">
|
||
{t.desc}
|
||
</p>
|
||
<ul className="mt-6 space-y-3 text-sm">
|
||
{t.points.map((p) => (
|
||
<li key={p} className="flex gap-3 border-t border-ink/20 pt-3 group-hover:border-ivory/20">
|
||
<span className="font-display text-xs opacity-60">→</span>
|
||
<span>{p}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</article>
|
||
</Reveal>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ============ FOCUS AREAS ============ */}
|
||
<section>
|
||
<div className="container-content py-16 sm:py-24">
|
||
<Reveal>
|
||
<SectionLabel index={4} label="Focus Areas" />
|
||
</Reveal>
|
||
<div className="mt-10 grid gap-px bg-line sm:grid-cols-2 lg:grid-cols-4">
|
||
{focusAreas.map((f, i) => (
|
||
<Reveal key={f.en} delay={i * 80} className="bg-ivory">
|
||
<div 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(i + 1).padStart(2, "0")}
|
||
</span>
|
||
<div>
|
||
<p className="headline-ko text-lg">{f.ko}</p>
|
||
<p className="mt-1 text-xs uppercase tracking-[0.16em] text-ink-mute group-hover:text-ivory/60">
|
||
{f.en}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</Reveal>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</>
|
||
);
|
||
}
|