From 44c21ab59edd4c13ed0dd3f2e8fa863aa292147a Mon Sep 17 00:00:00 2001 From: Godopu Date: Fri, 21 Aug 2026 23:16:06 +0900 Subject: [PATCH] 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 --- TO-FIX.md | 104 ++++++++-- .../_components/ProfessorDetailsDialog.tsx | 179 ++++++++++++++++++ refer_landing_page/app/members/page.tsx | 99 +++++----- refer_landing_page/components/Header.tsx | 24 +-- refer_landing_page/tests/e2e_test_suite.py | 10 +- 5 files changed, 337 insertions(+), 79 deletions(-) create mode 100644 refer_landing_page/app/members/_components/ProfessorDetailsDialog.tsx diff --git a/TO-FIX.md b/TO-FIX.md index d4436ce..8ea78eb 100644 --- a/TO-FIX.md +++ b/TO-FIX.md @@ -1,16 +1,98 @@ -`body > header > div.hidden.border-b.border-line.desktop\:block > div > span:nth-child(3)` -- "Daegu / South Korea" 로 수정 +`body > main > div > section.space-y-3 > div > span.font-mono.text-xs.tracking-widest.uppercase.text-cobalt-dark.font-bold` +- 삭제 -`body > footer > div.container-content.grid.gap-12.py-16.lg\:grid-cols-12 > div.lg\:col-span-5 > h3`와 `body > footer > div.container-content.grid.gap-12.py-16.lg\:grid-cols-12 > div.lg\:col-span-5 > h3` 앞에 favicon logo 넣어서 `body > header > div.container-content.flex.h-\[4\.25rem\].items-center.justify-between.gap-4.my-2.sm\:my-3 > a`와 같이 변경해줘. +`body > main > div > section.space-y-3 > h1` +- 연구실 구성원 -> "LAB MEMBERS" -`body > footer > div.border-t.border-line > div > p.kicker.text-ink-mute` -- 제거해줘. +`body > main > div > section.space-y-3 > p` +- 삭제 -`body > footer > div.container-content.grid.gap-12.py-16.lg\:grid-cols-12 > div.lg\:col-span-4 > address` -- 교수 정보, 이메일 주소, 주소 순으로 배치 +`body > main > div > section:nth-child(2) > div.font-mono.text-xs.text-cobalt-dark.uppercase.tracking-widest.font-bold` +- 삭제 -Footer 레이아웃을 조금 더 구조적이고 모던하게 보이도록 레이아웃을 변경 +`body > main > div > section:nth-child(2) > div.font-mono.text-xs.text-cobalt-dark.uppercase.tracking-widest.font-bold` +- "고석주 교수" -> "Prof. Seok-Joo Koh"로 변경 -`body > main > div > section.relative > div.grid.grid-cols-1.lg\:grid-cols-12.gap-8.lg\:items-center > div.lg\:col-span-7.space-y-6.lg\:pt-4 > div` -- International Journals & Conference, Standardization Contributions, Patent 순으로 배치 -- "PATENT" -> "PATENT\n(IoT Architecture \& Protocols) 수정 \ No newline at end of file +`body > main > div > section:nth-child(2) > div.bg-paper.p-8.rounded-lg.border.border-line.grid.grid-cols-1.lg\:grid-cols-12.gap-8.items-center > div.lg\:col-span-8.space-y-4 > div.flex.items-baseline.gap-3 > span` +- 삭제 + +`body > main > div > section:nth-child(2) > div.bg-paper.p-8.rounded-lg.border.border-line.grid.grid-cols-1.lg\:grid-cols-12.gap-8.items-center > div.lg\:col-span-8.space-y-4 > p` + +- 다음 세부 커리어를 기반으로 설명 작성 (영어로) 및 details 링크 연결. +- details 링크 클릭 시 modal dialog를 통해 아래 세부 내용 보여주기 + +``` +# Education +- KAIST, Management Science, B. S., 1992. 2. +- KAIST, Management Science, M. S., 1994. 2. +- KAIST, Industrial Engineering, Ph. D., 1998. 8. + +# Career + +2024. 3 - Present +Dean +College of IT Engineering (CITE) +Kyungpook National University (KNU) + +2015. 12 - Present +Director +Institute of Software Education (SWEDU) +Kyungpook National University (KNU) + +2004. 3 - Present +Professor +School of Computer Science and Engineering (CSE) +College of IT Engineering (CITE) +Kyungpook National University (KNU) + +1998. 8 - 2004. 2 +Senior Researcher +Protocol Engineering Center (PEC) +Electronics Telecommunications Research Institute (ETRI) + +# International Standardization +- ISO/IEC JTC1 SC6/WG7: Reliable/Mobile Multicasting (1999 ~ 2019): Project Editor +- ISO/IEC JTC1 SC41/WG5: Internet-of-Things (IoT) Applications (2020 ~ Present): Project Editor +- ITU-T SG13: Mobility Management (1999 ~ 2015): Project Editor +- ITU-T SG20: VLC-based IoT (2018 ~ 2020): Project Editor +- IEC TC100: Multimedia Systems and Equipment (2018 ~ Present): Project Editor, TA15 TAM, WG11 Convenor + +# Membership on Academic Society + +- KIPS (Korea Information Processing Society) +- KICS (Korean Institute of Communications and Information Sciences) +- KIISE (Korean Institute of Information Scientists and Engineers) +- IEEE (Institute of Electrical and Electronics Engineers) +``` + +`body > main > div > section.space-y-8.pt-6.md\:pt-10.border-t.border-line > div.flex.justify-between.items-end > div > div` +- 삭제 + +`body > main > div > section.space-y-8.pt-6.md\:pt-10.border-t.border-line > div.flex.justify-between.items-end > div > h2` +- "재학 연구원" -> Active Researchers +- 글자색 변경: primary color + +`body > main > div > section.space-y-8.pt-6.md\:pt-10.border-t.border-line > div:nth-child(2)` +- PhD -> Ph. D +- PhDCandidate -> Ph. D. Candidate +- PhDStudent -> Ph. D. Student + +`body > main > div > section.space-y-8.pt-6.md\:pt-10.border-t.border-line > div.space-y-4.pt-4` +- MSCandidate -> M. S. Candidate +- MSStudent -> M. S. Student + +`body > main > div > section:nth-child(4) > div > div > div` +- 삭제 + +`body > main > div > section:nth-child(4) > div > div > h2` +- 졸업생 목록 -> "Graduates" + +`body > main > div > section:nth-child(4) > details > summary > div > span` +- 영어로 작성 +`body > main > div > section:nth-child(4) > details > summary > div > p` +- 영어로 작성 + +`body > main > div > section:nth-child(4) > details > summary > span > span.group-open\:hidden` +- 전체 보기 -> Open + +- 삭제된 component들의 크기를 반영하여 화면 비율 조정 \ No newline at end of file diff --git a/refer_landing_page/app/members/_components/ProfessorDetailsDialog.tsx b/refer_landing_page/app/members/_components/ProfessorDetailsDialog.tsx new file mode 100644 index 0000000..78a6351 --- /dev/null +++ b/refer_landing_page/app/members/_components/ProfessorDetailsDialog.tsx @@ -0,0 +1,179 @@ +"use client"; + +import React, { useRef } from "react"; + +// CUSTOMIZATION HOOK: Detailed career & background data for Prof. Seok-Joo Koh +const EDUCATION = [ + "KAIST, Management Science, B. S., 1992. 2.", + "KAIST, Management Science, M. S., 1994. 2.", + "KAIST, Industrial Engineering, Ph. D., 1998. 8.", +]; + +const CAREER = [ + { + period: "2024. 3 - Present", + role: "Dean", + org: "College of IT Engineering (CITE)", + inst: "Kyungpook National University (KNU)", + }, + { + period: "2015. 12 - Present", + role: "Director", + org: "Institute of Software Education (SWEDU)", + inst: "Kyungpook National University (KNU)", + }, + { + period: "2004. 3 - Present", + role: "Professor", + org: "School of Computer Science and Engineering (CSE), College of IT Engineering (CITE)", + inst: "Kyungpook National University (KNU)", + }, + { + period: "1998. 8 - 2004. 2", + role: "Senior Researcher", + org: "Protocol Engineering Center (PEC)", + inst: "Electronics Telecommunications Research Institute (ETRI)", + }, +]; + +const STANDARDIZATION = [ + "ISO/IEC JTC1 SC6/WG7: Reliable/Mobile Multicasting (1999 ~ 2019): Project Editor", + "ISO/IEC JTC1 SC41/WG5: Internet-of-Things (IoT) Applications (2020 ~ Present): Project Editor", + "ITU-T SG13: Mobility Management (1999 ~ 2015): Project Editor", + "ITU-T SG20: VLC-based IoT (2018 ~ 2020): Project Editor", + "IEC TC100: Multimedia Systems and Equipment (2018 ~ Present): Project Editor, TA15 TAM, WG11 Convenor", +]; + +const MEMBERSHIPS = [ + "KIPS (Korea Information Processing Society)", + "KICS (Korean Institute of Communications and Information Sciences)", + "KIISE (Korean Institute of Information Scientists and Engineers)", + "IEEE (Institute of Electrical and Electronics Engineers)", +]; + +export function ProfessorDetailsDialog() { + const dialogRef = useRef(null); + + const handleOpen = () => { + dialogRef.current?.showModal(); + }; + + const handleClose = () => { + dialogRef.current?.close(); + }; + + const handleBackdropClick = (e: React.MouseEvent) => { + if (e.target === dialogRef.current) { + dialogRef.current?.close(); + } + }; + + return ( + <> + + + + {/* Modal Header */} +
+
+ + Curriculum Vitae + +

+ Prof. Seok-Joo Koh +

+
+ +
+ + {/* Modal Scrollable Content */} +
+ {/* Education */} +
+

+ Education +

+
    + {EDUCATION.map((edu, idx) => ( +
  • + + {edu} +
    • + ))} +
+
+ + {/* Career */} +
+

+ Career +

+
+ {CAREER.map((car, idx) => ( +
+
{car.period}
+
+ {car.role} · {car.org} +
+
{car.inst}
+
+ ))} +
+
+ + {/* International Standardization */} +
+

+ International Standardization +

+
    + {STANDARDIZATION.map((std, idx) => ( +
  • + + {std} +
    • + ))} +
+
+ + {/* Membership on Academic Society */} +
+

+ Membership on Academic Society +

+
    + {MEMBERSHIPS.map((mem, idx) => ( +
  • + + {mem} +
    • + ))} +
+
+
+ + + ); +} diff --git a/refer_landing_page/app/members/page.tsx b/refer_landing_page/app/members/page.tsx index 1c1c8f7..8363950 100644 --- a/refer_landing_page/app/members/page.tsx +++ b/refer_landing_page/app/members/page.tsx @@ -1,74 +1,73 @@ import React from "react"; import { activeMembers, alumni } from "../../content/members"; +import { ProfessorDetailsDialog } from "./_components/ProfessorDetailsDialog"; + +const DEGREE_LABEL: Record = { + 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 ( -
- {/* Header */} -
-
- - - People & Researchers - -
+
+ {/* Page Header */} +

- 연구실 구성원 + LAB MEMBERS

-

- 지도교수와 재학 연구원 16명, 그리고 IT 산업체 및 학계에서 활약하고 있는 60명의 졸업생 인벤토리입니다. -

{/* Professor Section */}
-
- Faculty -
-
-
-

- {professor?.ko || "고석주"} 교수 -

- - {professor?.en || "Seok-Joo Koh"}, Professor - +

+ Prof. Seok-Joo Koh +

+
+

+ 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. +

+
+ +
-

- 경북대학교 컴퓨터학부 교수 · AI 에이전트 네트워크 연구실 (ANL) 지도교수. - QUIC/gRPC 통신, A2A/ACP 프로토콜, MCP & SKILL 아키텍처 및 에이전트 오케스트레이션 연구를 총괄하고 있습니다. -

- Affiliation & Office + Affiliation & Office

Kyungpook National University

IT Building #5 Room 527

@@ -81,11 +80,8 @@ export default function MembersPage() {
-
- Active Researchers ({activeMembers.length} Members) -
-

- 재학 연구원 +

+ Active Researchers

@@ -106,7 +102,7 @@ export default function MembersPage() { {mem.ko} - {mem.degree} + {DEGREE_LABEL[mem.degree] || mem.degree}
{mem.en}
@@ -136,7 +132,7 @@ export default function MembersPage() { {mem.ko} - {mem.degree} + {DEGREE_LABEL[mem.degree] || mem.degree}
{mem.en}
@@ -155,11 +151,8 @@ export default function MembersPage() {
-
- Alumni Inventory ({alumni.length} Graduates) -
-

- 졸업생 목록 +

+ Graduates

@@ -168,15 +161,15 @@ export default function MembersPage() {
- 전체 졸업생 {alumni.length}명 열람하기 + Browse all graduates

- 2007년부터 2026년까지 수여된 박사(Ph.D.) 및 석사(M.S.) 졸업생 이력 + Ph. D. and M. S. graduates conferred from 2007 to 2026

- 전체 보기 ▾ - 접기 ▴ + Open ▾ + Close ▴ @@ -191,7 +184,7 @@ export default function MembersPage() { {alum.ko} ({alum.en}) - {alum.degree} + {DEGREE_LABEL[alum.degree] || alum.degree}
diff --git a/refer_landing_page/components/Header.tsx b/refer_landing_page/components/Header.tsx index f644002..d3fd2dd 100644 --- a/refer_landing_page/components/Header.tsx +++ b/refer_landing_page/components/Header.tsx @@ -12,11 +12,11 @@ const NAV_SETTLE_MS = 300; // ms — 라우트 전환 직후 방향 판정 유 // CUSTOMIZATION HOOK: edit nav labels / routes here. const navItems = [ - { href: "/", ko: "홈", en: "Home", 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" }, + { href: "/", en: "Home", no: "01" }, + { href: "/members", en: "Members", no: "02" }, + { href: "/publications", en: "Publications", no: "03" }, + { href: "/lectures", en: "Lectures", no: "04" }, + { href: "/standardization", en: "Standardization", no: "05" }, ]; export default function Header() { @@ -170,7 +170,7 @@ export default function Header() { {/* Desktop nav — small caps, wide tracking (visible at >= 1240px) */}
-