feat: complete ANL lab web application with lossless data migration and SSG routes
This commit is contained in:
@@ -1,173 +1,117 @@
|
||||
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";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "표준화 활동 (Standardization)",
|
||||
description:
|
||||
"oneM2M, W3C WoT, IETF QUIC, OMA LwM2M 등 국제 표준화 기구에서의 연구실 기여 활동 (placeholder).",
|
||||
};
|
||||
|
||||
// CUSTOMIZATION HOOK: replace placeholder standardization activities below.
|
||||
const bodies = [
|
||||
{
|
||||
org: "oneM2M",
|
||||
full: "oneM2M Partnership Project",
|
||||
area: "IoT 서비스 계층 표준",
|
||||
accent: "vermillion" as const,
|
||||
contributions: [
|
||||
"메타버스 상호운용을 위한 공통 정보 모델(CIM) 기고 (placeholder)",
|
||||
"디바이스 상호운용성 적합성 테스트 케이스 제안",
|
||||
],
|
||||
},
|
||||
{
|
||||
org: "W3C WoT",
|
||||
full: "W3C Web of Things",
|
||||
area: "Thing Description / 시맨틱",
|
||||
accent: "cobalt" as const,
|
||||
contributions: [
|
||||
"메타버스 자산의 Thing Description 매핑 프로파일 제안 (placeholder)",
|
||||
"의미 보존 변환 가이드라인 논의 참여",
|
||||
],
|
||||
},
|
||||
{
|
||||
org: "IETF QUIC",
|
||||
full: "IETF QUIC Working Group",
|
||||
area: "전송 프로토콜",
|
||||
accent: "vermillion" as const,
|
||||
contributions: [
|
||||
"멀티에이전트 환경을 위한 스트림 우선순위 확장 검토 (placeholder)",
|
||||
"연결 마이그레이션 활용 사례 기여",
|
||||
],
|
||||
},
|
||||
{
|
||||
org: "OMA LwM2M",
|
||||
full: "OMA SpecWorks Lightweight M2M",
|
||||
area: "경량 디바이스 관리",
|
||||
accent: "cobalt" as const,
|
||||
contributions: [
|
||||
"엣지 에이전트 디바이스 관리 객체 정의 제안 (placeholder)",
|
||||
"리소스 모델 상호운용성 검토",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// CUSTOMIZATION HOOK: standards-body ticker.
|
||||
const orgTicker = [
|
||||
"oneM2M",
|
||||
"W3C WoT",
|
||||
"IETF QUIC",
|
||||
"OMA LwM2M",
|
||||
"CONFORMANCE",
|
||||
"INTEROPERABILITY",
|
||||
"SEMANTIC MAPPING",
|
||||
];
|
||||
|
||||
const totalContributions = bodies.reduce(
|
||||
(n, b) => n + b.contributions.length,
|
||||
0
|
||||
);
|
||||
const figures = [
|
||||
{ value: bodies.length, label: "표준화 기구 · Standards Bodies" },
|
||||
{ value: totalContributions, label: "기여 항목 · Contributions" },
|
||||
{ value: 4, label: "기술 영역 · Technical Areas" },
|
||||
];
|
||||
|
||||
const accentText: Record<string, string> = {
|
||||
vermillion: "text-vermillion",
|
||||
cobalt: "text-cobalt",
|
||||
};
|
||||
const accentDot: Record<string, string> = {
|
||||
vermillion: "bg-vermillion",
|
||||
cobalt: "bg-cobalt",
|
||||
};
|
||||
import React from "react";
|
||||
import { standardsBodies } from "../../content/standards";
|
||||
|
||||
export default function StandardizationPage() {
|
||||
const totalDocs = standardsBodies.reduce(
|
||||
(acc, body) =>
|
||||
acc + body.projects.reduce((pAcc, proj) => pAcc + proj.documents.length, 0),
|
||||
0
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
ko="표준화 활동"
|
||||
en="Standardization"
|
||||
index={5}
|
||||
description="국제 표준화 기구와 협력하여 연구 결과를 표준에 반영합니다. 아래 기여 내역은 예시(placeholder)이며 실제 활동으로 교체할 수 있습니다."
|
||||
/>
|
||||
|
||||
{/* Standards-body marquee band */}
|
||||
<Reveal>
|
||||
<Marquee
|
||||
items={orgTicker}
|
||||
className="border-b border-ink bg-ink py-3 font-display text-xl tracking-wide text-ivory"
|
||||
/>
|
||||
</Reveal>
|
||||
|
||||
{/* ============ 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>
|
||||
))}
|
||||
<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">
|
||||
Open Standards & Contributions
|
||||
</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">
|
||||
IEC TC100, ISO/IEC JTC1, ITU-T, TTA 등 국제/국내 표준화 기구를 통해 제정 및 진행 중인 {standardsBodies.length}개 기구 {totalDocs}건의 표준 규격 문서 계층 인벤토리입니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* ============ CONTRIBUTIONS BY BODY ============ */}
|
||||
<section>
|
||||
<div className="container-content py-16 sm:py-24">
|
||||
<Reveal>
|
||||
<SectionLabel index={1} label="Contributions" />
|
||||
</Reveal>
|
||||
{/* Standards Bodies Section */}
|
||||
<section className="space-y-12 pt-6 border-t border-line">
|
||||
{standardsBodies.map((body, idx) => (
|
||||
<div key={idx} className="bg-paper p-8 rounded-lg border border-line space-y-6">
|
||||
<div className="flex flex-wrap justify-between items-start gap-4 border-b border-line pb-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-mono text-xs text-vermillion font-bold uppercase">
|
||||
[{body.scope}]
|
||||
</span>
|
||||
{body.role && (
|
||||
<span className="bg-vermillion text-ivory font-mono text-[0.65rem] px-2 py-0.5 rounded font-bold">
|
||||
{body.role}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="font-serif text-2xl font-normal text-ink mt-1">
|
||||
{body.org}
|
||||
</h2>
|
||||
<p className="text-xs text-ink-mute font-mono mt-0.5">
|
||||
{body.full} ({body.period})
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 grid gap-px bg-line sm:grid-cols-2">
|
||||
{bodies.map((b, i) => (
|
||||
<Reveal
|
||||
key={b.org}
|
||||
variant={i % 2 === 0 ? "left" : "right"}
|
||||
delay={(i % 2) * 100}
|
||||
className="bg-ivory"
|
||||
>
|
||||
<article className="group flex h-full flex-col border border-ink p-8 transition-colors duration-500 hover:bg-ink hover:text-ivory sm:p-10">
|
||||
<div className="flex items-baseline justify-between gap-3">
|
||||
<h3 className="headline-ko text-3xl">{b.org}</h3>
|
||||
<span className="font-display text-4xl text-ink-mute group-hover:text-ivory/40">
|
||||
{String(i + 1).padStart(2, "0")}
|
||||
<div className="font-mono text-xs text-ink-mute bg-ivory border border-line px-3 py-1.5 rounded">
|
||||
Projects: {body.projects.length}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3-Tier Hierarchy: Projects & Documents */}
|
||||
<div className="space-y-6">
|
||||
{body.projects.map((proj, pIdx) => (
|
||||
<div key={pIdx} className="bg-ivory p-6 rounded border border-line space-y-3">
|
||||
<div className="font-serif text-lg font-normal text-ink border-b border-line/60 pb-2 flex justify-between items-center">
|
||||
<div>
|
||||
<span className="font-mono text-xs text-cobalt font-bold mr-2">
|
||||
{proj.wg}
|
||||
</span>
|
||||
<span>{proj.name}</span>
|
||||
</div>
|
||||
<span className="font-mono text-xs text-ink-mute">
|
||||
{proj.documents.length} Docs
|
||||
</span>
|
||||
</div>
|
||||
<p className="font-display mt-1 text-sm italic opacity-70">{b.full}</p>
|
||||
|
||||
<p
|
||||
className={`mt-4 inline-flex w-fit border px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] ${
|
||||
b.accent === "vermillion"
|
||||
? "border-vermillion/40"
|
||||
: "border-cobalt/40"
|
||||
} ${accentText[b.accent]} group-hover:border-ivory/40 group-hover:text-ivory`}
|
||||
>
|
||||
{b.area}
|
||||
</p>
|
||||
|
||||
<ul className="mt-6 space-y-4 border-t border-ink/20 pt-6 text-sm group-hover:border-ivory/20">
|
||||
{b.contributions.map((c) => (
|
||||
<li key={c} className="flex gap-3">
|
||||
<span
|
||||
aria-hidden
|
||||
className={`mt-1.5 h-1.5 w-1.5 flex-none rounded-full ${accentDot[b.accent]} group-hover:bg-ivory`}
|
||||
/>
|
||||
<span className="leading-relaxed opacity-90">{c}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</article>
|
||||
</Reveal>
|
||||
))}
|
||||
{proj.documents.length > 0 ? (
|
||||
<div className="space-y-3 pt-1">
|
||||
{proj.documents.map((doc, dIdx) => (
|
||||
<div
|
||||
key={dIdx}
|
||||
className="bg-paper p-4 rounded border border-line/60 space-y-1.5"
|
||||
>
|
||||
<div className="flex justify-between items-start gap-4">
|
||||
<h3 className="font-serif text-base font-normal text-ink leading-snug">
|
||||
“{doc.title}”
|
||||
</h3>
|
||||
<span
|
||||
className={`font-mono text-[0.65rem] px-2 py-0.5 rounded font-bold shrink-0 ${
|
||||
doc.status === "InProgress"
|
||||
? "bg-vermillion text-ivory"
|
||||
: "bg-cobalt text-ivory"
|
||||
}`}
|
||||
>
|
||||
{doc.status}
|
||||
</span>
|
||||
</div>
|
||||
<div className="font-mono text-xs text-ink-mute flex justify-between">
|
||||
<span>{doc.ref}</span>
|
||||
{doc.publishedAt && (
|
||||
<span className="text-ink">{doc.publishedAt}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-xs text-ink-mute font-mono italic">
|
||||
진행 중인 주 프로젝트 규격서
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user