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:
@@ -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 & 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 & 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 & 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 & 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">
|
||||
|
||||
Reference in New Issue
Block a user