103 lines
4.1 KiB
TypeScript
103 lines
4.1 KiB
TypeScript
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: "AI 에이전트 네트워크 연구실 (ANL) 지도교수가 담당하는 강의 목록 (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>
|
|
</>
|
|
);
|
|
}
|