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,102 @@
+import type { Metadata } from "next";
+import PageHeader from "@/components/PageHeader";
+import Reveal from "@/components/Reveal";
+import SectionLabel from "@/components/SectionLabel";
+
+export const metadata: Metadata = {
+  title: "강의 (Lectures)",
+  description: "사물인터넷 표준 연구실 지도교수가 담당하는 강의 목록 (placeholder).",
+};
+
+// CUSTOMIZATION HOOK: replace placeholder lectures below.
+const lectures = [
+  {
+    code: "CSE3xx",
+    ko: "사물인터넷 개론",
+    en: "Introduction to IoT",
+    level: "학부 · Undergraduate",
+    accent: "vermillion" as const,
+    desc: "IoT 아키텍처, 센서·액추에이터, 통신 프로토콜(MQTT/CoAP)과 oneM2M 표준의 기본 개념을 다룹니다. 간단한 디바이스–서버 연동 실습을 포함합니다.",
+  },
+  {
+    code: "CSE4xx",
+    ko: "네트워크 프로토콜과 전송 기술",
+    en: "Network Protocols & Transport",
+    level: "학부/대학원 · Undergraduate / Graduate",
+    accent: "cobalt" as const,
+    desc: "TCP/UDP에서 QUIC까지 전송 계층의 발전과 설계 원리를 학습합니다. 스트림 다중화, 연결 마이그레이션, 혼잡 제어를 실험을 통해 분석합니다.",
+  },
+  {
+    code: "CSE6xx",
+    ko: "메타버스 상호운용성과 표준",
+    en: "Metaverse Interoperability & Standards",
+    level: "대학원 · Graduate",
+    accent: "ink" as const,
+    desc: "이종 메타버스 플랫폼 간 데이터 모델, 의미 보존 변환, W3C/oneM2M 표준을 다루는 세미나형 대학원 강의입니다. 최신 논문 리뷰와 프로젝트를 병행합니다.",
+  },
+];
+
+const accent: Record<string, { hover: string; text: string }> = {
+  vermillion: { hover: "hover:bg-vermillion hover:text-ivory", text: "text-vermillion" },
+  cobalt: { hover: "hover:bg-cobalt hover:text-ivory", text: "text-cobalt" },
+  ink: { hover: "hover:bg-ink hover:text-ivory", text: "text-ink" },
+};
+
+export default function LecturesPage() {
+  return (
+    <>
+      <PageHeader
+        ko="강의"
+        en="Lectures"
+        index={4}
+        description="연구실에서 담당하는 학부·대학원 강의입니다. 아래 강의 정보는 예시(placeholder)이며 실제 개설 과목으로 교체할 수 있습니다."
+      />
+
+      <section>
+        <div className="container-content py-16 sm:py-24">
+          <Reveal>
+            <SectionLabel index={1} label="Courses" />
+          </Reveal>
+
+          <div className="mt-12 grid gap-px bg-line lg:grid-cols-3">
+            {lectures.map((l, i) => {
+              const a = accent[l.accent];
+              return (
+                <Reveal
+                  key={l.code}
+                  variant={i === 0 ? "left" : i === 2 ? "right" : "up"}
+                  delay={i * 100}
+                  className="bg-ivory"
+                >
+                  <article
+                    className={`group flex h-full flex-col border border-ink p-8 transition-colors duration-500 sm:p-10 ${a.hover}`}
+                  >
+                    <div className="flex items-baseline justify-between">
+                      <span className={`font-display text-xl ${a.text} group-hover:text-ivory`}>
+                        {l.code}
+                      </span>
+                      <span className="font-display text-4xl text-ink-mute group-hover:text-ivory/70">
+                        {String(i + 1).padStart(2, "0")}
+                      </span>
+                    </div>
+
+                    <h3 className="headline-ko mt-6 text-2xl leading-tight">{l.ko}</h3>
+                    <p className="font-display mt-1 text-lg italic opacity-70">{l.en}</p>
+
+                    <p className={`mt-4 inline-flex w-fit border border-ink/30 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] group-hover:border-ivory/40`}>
+                      {l.level}
+                    </p>
+
+                    <p className="mt-6 border-t border-ink/20 pt-6 text-sm leading-relaxed opacity-90 group-hover:border-ivory/20">
+                      {l.desc}
+                    </p>
+                  </article>
+                </Reveal>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}