feat: complete ANL lab web application with lossless data migration and SSG routes
This commit is contained in:
@@ -1,102 +1,129 @@
|
||||
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" },
|
||||
};
|
||||
import React from "react";
|
||||
import { semesters } from "../../content/lectures";
|
||||
|
||||
export default function LecturesPage() {
|
||||
const recentSemesters = semesters.slice(0, 3);
|
||||
const olderSemesters = semesters.slice(3);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
ko="강의"
|
||||
en="Lectures"
|
||||
index={4}
|
||||
description="연구실에서 담당하는 학부·대학원 강의입니다. 아래 강의 정보는 예시(placeholder)이며 실제 개설 과목으로 교체할 수 있습니다."
|
||||
/>
|
||||
<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">
|
||||
Academic Courses
|
||||
</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">
|
||||
2016년 가을학기부터 2026년 봄학기까지 개설된 네트워크 및 소프트웨어 분야 약 20개 학기의 학부/대학원 강의 목록입니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
);
|
||||
})}
|
||||
{/* Recent 3 Semesters */}
|
||||
<section className="space-y-6 pt-6 border-t border-line">
|
||||
<div className="flex justify-between items-end">
|
||||
<div>
|
||||
<div className="font-mono text-xs text-vermillion uppercase tracking-widest font-bold">
|
||||
Recent Courses ({recentSemesters.length} Semesters)
|
||||
</div>
|
||||
<h2 className="font-serif text-3xl font-normal text-ink mt-1">
|
||||
최근 개설 강의
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{recentSemesters.map((sem, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="bg-paper p-6 rounded-lg border border-line space-y-4 flex flex-col justify-between"
|
||||
>
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center border-b border-line pb-2">
|
||||
<span className="font-serif text-xl font-normal text-ink">
|
||||
{sem.term} {sem.year}
|
||||
</span>
|
||||
<span className="font-mono text-xs text-vermillion font-bold">
|
||||
Latest
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-2 pt-1">
|
||||
{sem.courses.map((c, cIdx) => (
|
||||
<li key={cIdx} className="space-y-0.5">
|
||||
<div className="font-serif text-base text-ink">
|
||||
{c.en}
|
||||
</div>
|
||||
<div className="font-mono text-xs text-ink-mute">
|
||||
Code: {c.code} {c.note && `(${c.note})`}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="pt-3 border-t border-line/60 font-mono text-xs text-ink-mute">
|
||||
Course Count: {sem.courses.length}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
|
||||
{/* Older Semesters (Native <details>/<summary> progressive disclosure) */}
|
||||
<section className="space-y-6 pt-6 border-t border-line">
|
||||
<details className="group border border-line rounded-lg bg-paper p-6 transition-all duration-200">
|
||||
<summary className="flex justify-between items-center cursor-pointer list-none select-none">
|
||||
<div className="space-y-1">
|
||||
<span className="font-serif text-xl font-normal text-ink">
|
||||
이전 전체 강의 이력 ({olderSemesters.length}개 학기) 열람하기
|
||||
</span>
|
||||
<p className="text-xs text-ink-mute font-mono">
|
||||
2016 Fall ~ 2024 Spring 학기별 개설 교과목 이력
|
||||
</p>
|
||||
</div>
|
||||
<span className="font-mono text-xs text-vermillion font-bold border border-vermillion px-3 py-1.5 rounded group-open:bg-vermillion group-open:text-ivory transition-colors">
|
||||
<span className="group-open:hidden">전체 보기 ▾</span>
|
||||
<span className="hidden group-open:inline">접기 ▴</span>
|
||||
</span>
|
||||
</summary>
|
||||
|
||||
<div className="mt-6 pt-6 border-t border-line grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{olderSemesters.map((sem, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="bg-ivory p-5 rounded border border-line space-y-3"
|
||||
>
|
||||
<div className="font-serif text-lg font-normal text-ink border-b border-line pb-1.5 flex justify-between">
|
||||
<span>
|
||||
{sem.term} {sem.year}
|
||||
</span>
|
||||
<span className="font-mono text-xs text-ink-mute">
|
||||
{sem.courses.length} Courses
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-2">
|
||||
{sem.courses.map((c, cIdx) => (
|
||||
<li key={cIdx} className="space-y-0.5">
|
||||
<div className="font-serif text-sm text-ink">
|
||||
{c.en}
|
||||
</div>
|
||||
<div className="font-mono text-[0.7rem] text-ink-mute">
|
||||
Code: {c.code} {c.note && `(${c.note})`}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user