feat: initialize IoT Standards Lab website project with MAM skills & onboarding guide
This commit is contained in:
@@ -0,0 +1,84 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
/**
|
||||
* Number that ticks up from 0 → `value` when scrolled into view.
|
||||
* Uses requestAnimationFrame only (no animation library).
|
||||
*
|
||||
* CUSTOMIZATION HOOK — CONTENT: value / prefix / suffix.
|
||||
*/
|
||||
export default function Counter({
|
||||
value,
|
||||
duration = 1600,
|
||||
prefix = "",
|
||||
suffix = "",
|
||||
className = "",
|
||||
static: isStatic = false,
|
||||
}: {
|
||||
value: number;
|
||||
duration?: number;
|
||||
prefix?: string;
|
||||
suffix?: string;
|
||||
className?: string;
|
||||
/** Render the value as plain text (no tick animation). Use for years,
|
||||
dates, or any value that should not be perceived as "counting up".
|
||||
See LAYOUT_AUDIT #11. */
|
||||
static?: boolean;
|
||||
}) {
|
||||
const ref = useRef<HTMLSpanElement>(null);
|
||||
const [display, setDisplay] = useState(isStatic ? value : 0);
|
||||
|
||||
useEffect(() => {
|
||||
// When `static` is set, the value is rendered as-is with no observer.
|
||||
if (isStatic) return;
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
|
||||
const prefersReduced = window.matchMedia(
|
||||
"(prefers-reduced-motion: reduce)"
|
||||
).matches;
|
||||
|
||||
// Hoisted to the effect scope so the cleanup below can cancel an
|
||||
// in-flight frame on unmount / dep change (the IO callback's own
|
||||
// return value is never used as a cleanup).
|
||||
let raf = 0;
|
||||
|
||||
const io = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (!entry.isIntersecting) return;
|
||||
io.disconnect();
|
||||
|
||||
if (prefersReduced) {
|
||||
setDisplay(value);
|
||||
return;
|
||||
}
|
||||
|
||||
const start = performance.now();
|
||||
const tick = (now: number) => {
|
||||
const t = Math.min((now - start) / duration, 1);
|
||||
// easeOutExpo
|
||||
const eased = t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
|
||||
setDisplay(Math.round(eased * value));
|
||||
if (t < 1) raf = requestAnimationFrame(tick);
|
||||
};
|
||||
raf = requestAnimationFrame(tick);
|
||||
},
|
||||
{ threshold: 0.4 }
|
||||
);
|
||||
|
||||
io.observe(el);
|
||||
return () => {
|
||||
io.disconnect();
|
||||
cancelAnimationFrame(raf);
|
||||
};
|
||||
}, [value, duration, isStatic]);
|
||||
|
||||
return (
|
||||
<span ref={ref} className={`tabular-nums ${className}`}>
|
||||
{prefix}
|
||||
{display}
|
||||
{suffix}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
import Link from "next/link";
|
||||
import Marquee from "@/components/Marquee";
|
||||
|
||||
// CUSTOMIZATION HOOK: replace address / email placeholders & colophon below.
|
||||
const links = [
|
||||
{ href: "/intro", ko: "연구실 소개", en: "Intro" },
|
||||
{ href: "/members", ko: "구성원", en: "Members" },
|
||||
{ href: "/publications", ko: "논문", en: "Publications" },
|
||||
{ href: "/lectures", ko: "강의", en: "Lectures" },
|
||||
{ href: "/standardization", ko: "표준화", en: "Standardization" },
|
||||
];
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="mt-0 border-t border-ink bg-ink text-ivory lg:mt-8">
|
||||
{/* Marquee band — colophon ticker */}
|
||||
<Marquee
|
||||
items={[
|
||||
"IoT STANDARDS LAB",
|
||||
"METAVERSE INTEROPERABILITY",
|
||||
"QUIC MULTI-AGENT ORCHESTRATION",
|
||||
"ISSUE 01 — 2026",
|
||||
"KYUNGPOOK NATIONAL UNIVERSITY",
|
||||
]}
|
||||
reverse
|
||||
className="border-b border-ivory/20 py-4 font-display text-lg tracking-wide text-ivory/90"
|
||||
/>
|
||||
|
||||
<div className="container-content grid gap-12 py-16 lg:grid-cols-12">
|
||||
{/* Masthead title */}
|
||||
<div className="lg:col-span-5">
|
||||
<p className="kicker text-ivory/50">Colophon</p>
|
||||
<h3 className="headline-ko mt-3 text-2xl leading-snug">
|
||||
사물인터넷 표준 연구실
|
||||
</h3>
|
||||
<p className="font-display mt-1 text-xl italic text-ivory/70">
|
||||
IoT Standards Lab
|
||||
</p>
|
||||
<p className="mt-5 max-w-sm text-sm leading-relaxed text-ivory/60">
|
||||
경북대학교 컴퓨터학부<br />
|
||||
Kyungpook National University,<br />
|
||||
School of Computer Science and Engineering
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Contact */}
|
||||
<div className="lg:col-span-4">
|
||||
<p className="kicker text-ivory/50">Contact</p>
|
||||
<address className="mt-3 not-italic text-sm leading-relaxed text-ivory/70">
|
||||
{/* 주소 placeholder */}
|
||||
(41566) 대구광역시 북구 대학로 80<br />
|
||||
IT대학 OO호 (placeholder)<br />
|
||||
<a
|
||||
href="mailto:iot-lab@example.knu.ac.kr"
|
||||
className="draw-underline mt-2 inline-block text-ivory hover:text-vermillion"
|
||||
>
|
||||
iot-lab@example.knu.ac.kr
|
||||
</a>
|
||||
</address>
|
||||
</div>
|
||||
|
||||
{/* Index */}
|
||||
<div className="lg:col-span-3">
|
||||
<p className="kicker text-ivory/50">Index</p>
|
||||
<ul className="mt-3 space-y-2">
|
||||
{links.map((l, i) => (
|
||||
<li key={l.href} className="flex items-baseline gap-3">
|
||||
<span className="font-display text-xs text-ivory/40">
|
||||
{String(i + 1).padStart(2, "0")}
|
||||
</span>
|
||||
<Link
|
||||
href={l.href}
|
||||
className="text-sm text-ivory/70 transition hover:text-vermillion"
|
||||
>
|
||||
{l.ko}{" "}
|
||||
<span className="text-xs text-ivory/40">{l.en}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-ivory/20">
|
||||
<div className="container-content flex flex-col gap-2 py-5 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p className="text-xs text-ivory/50">
|
||||
© {new Date().getFullYear()} 사물인터넷 표준 연구실 · 경북대학교 컴퓨터학부. All rights reserved.
|
||||
</p>
|
||||
<p className="kicker text-ivory/40">Set in Fraunces · Noto Serif KR · Pretendard</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
// CUSTOMIZATION HOOK: edit nav labels / routes here.
|
||||
const navItems = [
|
||||
{ href: "/intro", ko: "연구실 소개", en: "Intro", no: "01" },
|
||||
{ href: "/members", ko: "구성원", en: "Members", no: "02" },
|
||||
{ href: "/publications", ko: "논문", en: "Publications", no: "03" },
|
||||
{ href: "/lectures", ko: "강의", en: "Lectures", no: "04" },
|
||||
{ href: "/standardization", ko: "표준화", en: "Standardization", no: "05" },
|
||||
];
|
||||
|
||||
export default function Header() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const pathname = usePathname();
|
||||
|
||||
const isActive = (href: string) =>
|
||||
pathname === href || pathname.startsWith(`${href}/`);
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 border-b border-ink bg-ivory/85 backdrop-blur">
|
||||
{/* Journal issue strip — magazine masthead feel. */}
|
||||
<div className="hidden border-b border-line lg:block">
|
||||
<div className="container-content flex items-center justify-between py-1.5">
|
||||
<span className="kicker">Issue 01 — 2026</span>
|
||||
{/* CUSTOMIZATION HOOK: masthead tagline */}
|
||||
<span className="kicker text-ink-mute">
|
||||
Kyungpook National University · School of Computer Science & Engineering
|
||||
</span>
|
||||
<span className="kicker">대구 · Daegu</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-content flex h-[4.25rem] items-center justify-between">
|
||||
{/* Brand */}
|
||||
<Link
|
||||
href="/intro"
|
||||
className="group flex flex-col leading-none"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
<span className="headline-ko text-lg text-ink sm:text-xl">
|
||||
사물인터넷 표준 연구실
|
||||
</span>
|
||||
<span className="kicker mt-1 group-hover:text-vermillion">
|
||||
IoT Standards Lab
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop nav — small caps, wide tracking */}
|
||||
<nav className="hidden items-center gap-7 lg:flex" aria-label="주 메뉴">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-semibold uppercase tracking-[0.18em] transition-colors ${
|
||||
isActive(item.href)
|
||||
? "text-vermillion"
|
||||
: "text-ink hover:text-vermillion"
|
||||
}`}
|
||||
>
|
||||
<span className="font-display text-[0.62rem] text-ink-mute">
|
||||
{item.no}
|
||||
</span>
|
||||
<span>{item.en}</span>
|
||||
<span
|
||||
aria-hidden
|
||||
className={`absolute -bottom-1.5 left-0 h-px bg-vermillion transition-all duration-300 ${
|
||||
isActive(item.href) ? "w-full" : "w-0 group-hover:w-full"
|
||||
}`}
|
||||
/>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Mobile hamburger */}
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center border border-ink p-2 text-ink transition hover:bg-ink hover:text-ivory lg:hidden"
|
||||
aria-label={open ? "메뉴 닫기" : "메뉴 열기"}
|
||||
aria-expanded={open}
|
||||
aria-controls="mobile-menu"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
>
|
||||
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.8} stroke="currentColor">
|
||||
{open ? (
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
) : (
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M3.75 17.25h16.5" />
|
||||
)}
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu panel */}
|
||||
{open && (
|
||||
<nav
|
||||
id="mobile-menu"
|
||||
className="border-t border-ink bg-ivory lg:hidden"
|
||||
aria-label="모바일 메뉴"
|
||||
>
|
||||
<ul className="container-content flex flex-col divide-y divide-line py-2">
|
||||
{navItems.map((item) => (
|
||||
<li key={item.href}>
|
||||
<Link
|
||||
href={item.href}
|
||||
onClick={() => setOpen(false)}
|
||||
className={`flex items-baseline justify-between py-4 transition ${
|
||||
isActive(item.href) ? "text-vermillion" : "text-ink"
|
||||
}`}
|
||||
>
|
||||
<span className="flex items-baseline gap-3">
|
||||
<span className="font-display text-xs text-ink-mute">{item.no}</span>
|
||||
<span className="headline-ko text-lg">{item.ko}</span>
|
||||
</span>
|
||||
<span className="text-[0.7rem] font-semibold uppercase tracking-[0.18em] text-ink-mute">
|
||||
{item.en}
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
/**
|
||||
* Horizontal running ticker of research keywords (magazine masthead style).
|
||||
* Pure CSS animation (see tailwind `animate-marquee`). The track is rendered
|
||||
* twice so the -50% translate loops seamlessly.
|
||||
*
|
||||
* CUSTOMIZATION HOOK — CONTENT: pass your own `items`.
|
||||
* CUSTOMIZATION HOOK — MOTION: `reverse` flips direction; speed via tailwind.
|
||||
*/
|
||||
export default function Marquee({
|
||||
items,
|
||||
reverse = false,
|
||||
className = "",
|
||||
}: {
|
||||
items: string[];
|
||||
reverse?: boolean;
|
||||
className?: string;
|
||||
}) {
|
||||
const sep = "✦";
|
||||
const sequence = [...items];
|
||||
|
||||
return (
|
||||
<div className={`w-full max-w-full overflow-hidden ${className}`} aria-hidden>
|
||||
<div
|
||||
className={`marquee-track w-max ${
|
||||
reverse ? "animate-marquee-reverse" : "animate-marquee"
|
||||
}`}
|
||||
>
|
||||
{[0, 1].map((dup) => (
|
||||
<span key={dup} className="flex shrink-0">
|
||||
{sequence.map((item, i) => (
|
||||
<span key={`${dup}-${i}`} className="flex items-center">
|
||||
<span className="px-6">{item}</span>
|
||||
<span className="text-vermillion">{sep}</span>
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import SectionLabel from "@/components/SectionLabel";
|
||||
import Reveal from "@/components/Reveal";
|
||||
|
||||
/**
|
||||
* Editorial page masthead. Korean serif headline + huge English display
|
||||
* word, with magazine "NN / 05" spread numbering.
|
||||
*
|
||||
* CUSTOMIZATION HOOK — CONTENT: ko / en / display / description / index.
|
||||
*/
|
||||
export default function PageHeader({
|
||||
ko,
|
||||
en,
|
||||
display,
|
||||
description,
|
||||
index,
|
||||
}: {
|
||||
ko: string;
|
||||
en: string;
|
||||
display?: string;
|
||||
description?: string;
|
||||
index: number;
|
||||
}) {
|
||||
return (
|
||||
<section className="relative overflow-hidden border-b border-ink bg-ivory">
|
||||
<div className="container-content pb-12 pt-14 sm:pb-16 sm:pt-20">
|
||||
<Reveal>
|
||||
<SectionLabel index={index} label={en} />
|
||||
</Reveal>
|
||||
|
||||
<div className="mt-8 grid items-end gap-6 lg:grid-cols-12">
|
||||
<Reveal className="lg:col-span-8" delay={80}>
|
||||
<h1 className="headline-ko break-keep text-balance text-3xl leading-[1.05] text-ink sm:text-4xl lg:text-5xl">
|
||||
{ko}
|
||||
</h1>
|
||||
{/* When a custom `display` word is provided, render it at the full
|
||||
magazine scale. Otherwise fall back to `en` at the smaller
|
||||
`display-sm` scale so long words like "Standardization" never
|
||||
overflow the col-span-8 column. See LAYOUT_AUDIT #6 + #10. */}
|
||||
<p
|
||||
className={
|
||||
display
|
||||
? "display mt-2 break-keep text-vermillion"
|
||||
: "display-sm mt-2 break-keep text-vermillion"
|
||||
}
|
||||
aria-hidden
|
||||
>
|
||||
{display ?? en}
|
||||
</p>
|
||||
</Reveal>
|
||||
|
||||
{description && (
|
||||
<Reveal className="lg:col-span-4" variant="right" delay={160}>
|
||||
<p className="border-l-2 border-ink pl-5 text-sm leading-relaxed text-ink-soft">
|
||||
{description}
|
||||
</p>
|
||||
</Reveal>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, type ElementType, type ReactNode } from "react";
|
||||
|
||||
type Variant = "up" | "left" | "right" | "scale";
|
||||
|
||||
/**
|
||||
* Scroll-triggered reveal. Uses a single IntersectionObserver (no deps).
|
||||
* Pairs with the `.reveal` / `.is-visible` rules in globals.css.
|
||||
*
|
||||
* CUSTOMIZATION HOOK — MOTION:
|
||||
* variant → direction of entrance
|
||||
* delay → stagger (ms), applied as transition-delay
|
||||
*/
|
||||
export default function Reveal({
|
||||
children,
|
||||
variant = "up",
|
||||
delay = 0,
|
||||
as: Tag = "div",
|
||||
className = "",
|
||||
}: {
|
||||
children: ReactNode;
|
||||
variant?: Variant;
|
||||
delay?: number;
|
||||
as?: ElementType;
|
||||
className?: string;
|
||||
}) {
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
|
||||
const io = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add("is-visible");
|
||||
io.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
|
||||
);
|
||||
|
||||
io.observe(el);
|
||||
return () => io.disconnect();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Tag
|
||||
ref={ref}
|
||||
data-variant={variant}
|
||||
style={delay ? { transitionDelay: `${delay}ms` } : undefined}
|
||||
className={`reveal ${className}`}
|
||||
>
|
||||
{children}
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* Magazine spread numbering — "01 / 05" with an eyebrow label.
|
||||
* Sits in the corner of a section per editorial convention.
|
||||
*
|
||||
* CUSTOMIZATION HOOK — CONTENT: index / total / label.
|
||||
*/
|
||||
export default function SectionLabel({
|
||||
index,
|
||||
total = 5,
|
||||
label,
|
||||
className = "",
|
||||
}: {
|
||||
index: number;
|
||||
total?: number;
|
||||
label: string;
|
||||
className?: string;
|
||||
}) {
|
||||
const pad = (n: number) => String(n).padStart(2, "0");
|
||||
return (
|
||||
<div className={`flex items-center gap-3 ${className}`}>
|
||||
<span className="corner-label">
|
||||
{pad(index)} <span className="text-ink-mute/50">/</span> {pad(total)}
|
||||
</span>
|
||||
<span className="h-px w-8 bg-ink/40" aria-hidden />
|
||||
<span className="kicker">{label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user