feat: initialize IoT Standards Lab website project with MAM skills & onboarding guide

refer_landing_page/app/members/page.tsx

@@ -0,0 +1,174 @@
+import type { Metadata } from "next";
+import PageHeader from "@/components/PageHeader";
+import Reveal from "@/components/Reveal";
+import SectionLabel from "@/components/SectionLabel";
+import Counter from "@/components/Counter";
+
+export const metadata: Metadata = {
+  title: "구성원 (Members)",
+  description: "사물인터넷 표준 연구실 지도교수 및 대학원·학부 연구원 소개 (placeholder).",
+};
+
+// CUSTOMIZATION HOOK: replace placeholder member data below.
+const advisor = {
+  ko: "홍길동 교수",
+  en: "Prof. Gildong Hong",
+  role: "지도교수 · Principal Investigator",
+  desc: "사물인터넷 표준, 메타버스 상호운용성, 전송 프로토콜. (이메일 placeholder: pi@example.knu.ac.kr)",
+  fields: ["IoT Standardization", "Metaverse Interoperability", "QUIC Transport"],
+};
+
+const groups = [
+  {
+    ko: "박사과정 연구원",
+    en: "Ph.D. Students",
+    accent: "vermillion" as const,
+    members: [
+      { name: "연구원 A (placeholder)", topic: "QUIC 기반 멀티에이전트 오케스트레이션" },
+      { name: "연구원 B (placeholder)", topic: "메타버스 공통 정보 모델 (MCM)" },
+    ],
+  },
+  {
+    ko: "석사과정 연구원",
+    en: "M.S. Students",
+    accent: "cobalt" as const,
+    members: [
+      { name: "연구원 C (placeholder)", topic: "oneM2M 적합성 검증" },
+      { name: "연구원 D (placeholder)", topic: "QUIC 스트림 다중화 성능 분석" },
+      { name: "연구원 E (placeholder)", topic: "W3C WoT Thing Description 매핑" },
+    ],
+  },
+  {
+    ko: "학부 연구원",
+    en: "Undergraduate Researchers",
+    accent: "ink" as const,
+    members: [
+      { name: "연구원 F (placeholder)", topic: "테스트베드 개발" },
+      { name: "연구원 G (placeholder)", topic: "데이터 시각화" },
+    ],
+  },
+];
+
+// CUSTOMIZATION HOOK: headcount figures (animated counters).
+const figures = [
+  { value: 1, label: "지도교수 · Principal Investigator" },
+  { value: 5, label: "대학원 연구원 · Graduate Members" },
+  { value: 2, label: "학부 연구원 · Undergraduates" },
+];
+
+const accentText: Record<string, string> = {
+  vermillion: "text-vermillion",
+  cobalt: "text-cobalt",
+  ink: "text-ink",
+};
+
+export default function MembersPage() {
+  return (
+    <>
+      <PageHeader
+        ko="구성원"
+        en="Members"
+        index={2}
+        description="연구실 지도교수와 박사·석사·학부 연구원을 소개합니다. 아래 정보는 예시(placeholder)이며 실제 구성원 정보로 교체할 수 있습니다."
+      />
+
+      {/* ============ HEADCOUNT FIGURES ============ */}
+      <section className="border-b border-ink">
+        <div className="container-content grid gap-px bg-line sm:grid-cols-3">
+          {figures.map((f, i) => (
+            <Reveal key={f.label} delay={i * 100} className="bg-ivory">
+              <div className="px-6 py-10">
+                <Counter value={f.value} className="display block text-ink" />
+                <p className="kicker mt-3">{f.label}</p>
+              </div>
+            </Reveal>
+          ))}
+        </div>
+      </section>
+
+      {/* ============ PRINCIPAL INVESTIGATOR ============ */}
+      <section className="border-b border-ink">
+        <div className="container-content py-16 sm:py-24">
+          <Reveal>
+            <SectionLabel index={1} label="Principal Investigator" />
+          </Reveal>
+
+          <div className="mt-10 grid gap-px lg:grid-cols-12">
+            <Reveal variant="left" className="lg:col-span-7">
+              <article className="group h-full border border-ink p-8 transition-colors duration-500 hover:bg-ink hover:text-ivory sm:p-10">
+                <span className="kicker group-hover:text-ivory/70">{advisor.role}</span>
+                <h2 className="headline-ko mt-5 text-4xl leading-tight">{advisor.ko}</h2>
+                <p className="font-display mt-1 text-2xl italic text-vermillion">
+                  {advisor.en}
+                </p>
+                <p className="mt-6 max-w-prose text-sm leading-relaxed opacity-90">
+                  {advisor.desc}
+                </p>
+              </article>
+            </Reveal>
+
+            <Reveal variant="right" delay={120} className="lg:col-span-5">
+              <div className="flex h-full flex-col gap-px bg-line">
+                {advisor.fields.map((field, i) => (
+                  <div
+                    key={field}
+                    className="group flex items-center gap-5 bg-ivory px-7 py-6 transition-colors duration-500 hover:bg-paper"
+                  >
+                    <span className="font-display text-3xl text-ink-mute group-hover:text-vermillion">
+                      {String(i + 1).padStart(2, "0")}
+                    </span>
+                    <span className="text-sm uppercase tracking-[0.16em] text-ink-soft">
+                      {field}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </Reveal>
+          </div>
+        </div>
+      </section>
+
+      {/* ============ RESEARCH GROUPS ============ */}
+      <section>
+        <div className="container-content py-16 sm:py-24">
+          <Reveal>
+            <SectionLabel index={2} label="Researchers" />
+          </Reveal>
+
+          {groups.map((g, gi) => (
+            <div key={g.en} className="mt-14 first:mt-12">
+              <Reveal>
+                <div className="flex items-baseline justify-between border-b border-ink pb-4">
+                  <h3 className="headline-ko text-2xl text-ink sm:text-3xl">{g.ko}</h3>
+                  <span
+                    className={`font-display text-lg italic ${accentText[g.accent]}`}
+                  >
+                    {g.en}
+                  </span>
+                </div>
+              </Reveal>
+
+              <div className="mt-px grid gap-px bg-line sm:grid-cols-2">
+                {g.members.map((m, mi) => (
+                  <Reveal key={m.name} delay={mi * 80} className="bg-ivory">
+                    <article className="group flex h-full flex-col justify-between gap-8 p-7 transition-colors duration-500 hover:bg-ink hover:text-ivory">
+                      <span className="font-display text-2xl text-ink-mute group-hover:text-vermillion">
+                        {String(gi + 1).padStart(2, "0")}.{String(mi + 1).padStart(2, "0")}
+                      </span>
+                      <div>
+                        <h4 className="headline-ko text-lg">{m.name}</h4>
+                        <p className="mt-2 text-xs leading-relaxed text-ink-mute group-hover:text-ivory/60">
+                          {m.topic}
+                        </p>
+                      </div>
+                    </article>
+                  </Reveal>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </>
+  );
+}