feat: initialize IoT Standards Lab website project with MAM skills & onboarding guide

2026-07-29 23:43:59 +09:00
commit f3f53c1318
123 changed files with 19987 additions and 0 deletions
@@ -0,0 +1,173 @@
+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",
+};
+
+export default function StandardizationPage() {
+  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>
+      </section>
+
+      {/* ============ CONTRIBUTIONS BY BODY ============ */}
+      <section>
+        <div className="container-content py-16 sm:py-24">
+          <Reveal>
+            <SectionLabel index={1} label="Contributions" />
+          </Reveal>
+
+          <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")}
+                    </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>
+            ))}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}