feat(members,header): overhaul members page with CV dialog and english-ify navigation

- Rewrite Members page to English: LAB MEMBERS, Prof. Seok-Joo Koh, Active Researchers, and Graduates
- Add ProfessorDetailsDialog component with comprehensive CV modal
- Standardize degree course label mappings (Ph. D., M. S.)
- Translate mobile navigation panel and header aria-labels to English
- Update E2E test suite assertions for the updated members structure
This commit is contained in:
2026-08-21 23:16:06 +09:00
parent 8eabd7a2db
commit 44c21ab59e
5 changed files with 337 additions and 79 deletions
+46 -53
View File
@@ -1,74 +1,73 @@
import React from "react";
import { activeMembers, alumni } from "../../content/members";
import { ProfessorDetailsDialog } from "./_components/ProfessorDetailsDialog";
const DEGREE_LABEL: Record<string, string> = {
Professor: "Professor",
PhD: "Ph. D.",
PhDCandidate: "Ph. D. Candidate",
PhDStudent: "Ph. D. Student",
MSCandidate: "M. S. Candidate",
MSStudent: "M. S. Student",
MS: "M. S.",
};
export default function MembersPage() {
const professor = activeMembers.find((m) => m.degree === "Professor");
const phdStudents = activeMembers.filter(
(m) => m.degree === "PhD" || m.degree === "PhDCandidate" || m.degree === "PhDStudent"
(m) =>
m.degree === "PhD" ||
m.degree === "PhDCandidate" ||
m.degree === "PhDStudent"
);
const msStudents = activeMembers.filter(
(m) => m.degree === "MSCandidate" || m.degree === "MSStudent"
);
return (
<div className="container-content space-y-12 md:space-y-16 pt-10 md:pt-16 pb-16 md:pb-24">
{/* Header */}
<section className="space-y-3">
<div className="flex items-center gap-3">
<span className="h-px w-8 bg-cobalt-dark"></span>
<span className="font-mono text-xs tracking-widest uppercase text-cobalt-dark font-bold">
People &amp; Researchers
</span>
</div>
<div className="container-content py-8 sm:py-12 space-y-12 sm:space-y-16">
{/* Page Header */}
<section>
<h1 className="font-serif text-4xl sm:text-5xl font-normal text-ink">
LAB MEMBERS
</h1>
<p className="text-ink-mute text-base max-w-2xl">
16, IT 60 .
</p>
</section>
{/* Professor Section */}
<section className="space-y-6 pt-6 md:pt-10 border-t border-line">
<div className="font-mono text-xs text-cobalt-dark uppercase tracking-widest font-bold">
Faculty
</div>
<div className="bg-paper p-8 rounded-lg border border-line grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
<div className="lg:col-span-8 space-y-4">
<div className="flex items-baseline gap-3">
<h2 className="font-serif text-3xl font-normal text-ink">
{professor?.ko || "고석주"}
</h2>
<span className="font-mono text-sm text-ink-mute">
{professor?.en || "Seok-Joo Koh"}, Professor
</span>
<h2 className="font-serif text-3xl font-normal text-ink">
Prof. Seok-Joo Koh
</h2>
<div className="text-sm text-ink-mute leading-relaxed space-y-2">
<p>
Professor at the School of Computer Science and Engineering, Kyungpook National University, and Dean of the College of IT Engineering. He directs the AI Agent Networking Laboratory (ANL), leading research on QUIC/gRPC transport, A2A/ACP protocols, MCP &amp; SKILL architectures, and multi-agent orchestration, and serves as Project Editor in ISO/IEC JTC1, ITU-T, and IEC TC100.
</p>
<div>
<ProfessorDetailsDialog />
</div>
</div>
<p className="text-sm text-ink-mute leading-relaxed">
· AI (ANL) .
QUIC/gRPC , A2A/ACP , MCP &amp; SKILL .
</p>
<div className="pt-4 border-t border-line/60 flex flex-wrap gap-4 text-xs font-mono">
<a
href="mailto:sjkoh@knu.ac.kr"
className="text-cobalt-dark hover:underline"
className="text-cobalt-dark hover:underline font-bold"
>
sjkoh@knu.ac.kr
</a>
<span className="text-ink-mute"></span>
<span className="text-ink-mute">|</span>
<a
href="https://github.com/sjkoh12"
target="_blank"
rel="noreferrer"
className="text-cobalt-dark hover:underline"
rel="noopener noreferrer"
className="text-ink hover:text-cobalt-dark hover:underline"
>
GitHub @sjkoh12
GitHub Profile
</a>
</div>
</div>
<div className="lg:col-span-4 bg-ivory p-6 rounded border border-line text-xs space-y-2 font-mono">
<div className="text-ink font-bold border-b border-line pb-1">
Affiliation & Office
Affiliation &amp; Office
</div>
<p className="text-ink-mute">Kyungpook National University</p>
<p className="text-ink-mute">IT Building #5 Room 527</p>
@@ -81,11 +80,8 @@ export default function MembersPage() {
<section className="space-y-8 pt-6 md:pt-10 border-t border-line">
<div className="flex justify-between items-end">
<div>
<div className="font-mono text-xs text-cobalt-dark uppercase tracking-widest font-bold">
Active Researchers ({activeMembers.length} Members)
</div>
<h2 className="font-serif text-3xl font-normal text-ink mt-1">
<h2 className="font-serif text-3xl font-normal text-cobalt-dark">
Active Researchers
</h2>
</div>
</div>
@@ -106,7 +102,7 @@ export default function MembersPage() {
{mem.ko}
</span>
<span className="font-mono text-xs text-cobalt-dark">
{mem.degree}
{DEGREE_LABEL[mem.degree] || mem.degree}
</span>
</div>
<div className="font-mono text-xs text-ink-mute">{mem.en}</div>
@@ -136,7 +132,7 @@ export default function MembersPage() {
{mem.ko}
</span>
<span className="font-mono text-xs text-cobalt-dark">
{mem.degree}
{DEGREE_LABEL[mem.degree] || mem.degree}
</span>
</div>
<div className="font-mono text-xs text-ink-mute">{mem.en}</div>
@@ -155,11 +151,8 @@ export default function MembersPage() {
<section className="space-y-6 pt-6 md:pt-10 border-t border-line">
<div className="flex justify-between items-end">
<div>
<div className="font-mono text-xs text-ink-mute uppercase tracking-widest font-bold">
Alumni Inventory ({alumni.length} Graduates)
</div>
<h2 className="font-serif text-3xl font-normal text-ink mt-1">
<h2 className="font-serif text-3xl font-normal text-ink">
Graduates
</h2>
</div>
</div>
@@ -168,15 +161,15 @@ export default function MembersPage() {
<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">
{alumni.length}
Browse all graduates
</span>
<p className="text-xs text-ink-mute font-mono">
2007 2026 (Ph.D.) (M.S.)
Ph. D. and M. S. graduates conferred from 2007 to 2026
</p>
</div>
<span className="font-mono text-xs text-vermillion-dark font-bold border border-vermillion-dark px-3 py-1.5 rounded group-open:bg-vermillion-dark group-open:text-white dark:group-open:text-ivory transition-colors">
<span className="group-open:hidden"> </span>
<span className="hidden group-open:inline"> </span>
<span className="group-open:hidden">Open </span>
<span className="hidden group-open:inline">Close </span>
</span>
</summary>
@@ -191,7 +184,7 @@ export default function MembersPage() {
{alum.ko} ({alum.en})
</span>
<span className="font-mono text-xs text-ink-mute">
{alum.degree}
{DEGREE_LABEL[alum.degree] || alum.degree}
</span>
</div>
<div className="font-mono text-xs text-ink-mute flex justify-between">