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,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 &amp; 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>
+  );
+}