feat(home): redesign homepage sections according to TO-FIX requirements
- Translate intro tagline and section headers to English - Update home metrics to reflect international publications, patents, and standards - Revamp Research Projects section with AIoT & AI-RAN, MCM, and MVQM projects - Update NRF standards track label to National Research Foundation of Korea - Reconstruct Research Areas section into 14-topic responsive card grid with 2-line header - Add International Standardizations section with global SDO listings and link - Add mobile max-w 500px, horizontal centering, and 30px vertical margin to hero composition - Update E2E test assertions for new content and structure
This commit is contained in:
Godopu committed
1 parent
73c4f8a8cb
commit
1b84803582
6 files changed
+195
-259
No files matched your search
@@ -17,11 +17,11 @@ export function ProjectPageView() {
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="font-serif text-2xl sm:text-3xl font-normal text-ink">
|
||||
주요 연구 프로젝트 (Research Projects)
|
||||
Research Projects
|
||||
</h2>
|
||||
</div>
|
||||
<p className="text-xs text-ink-mute font-mono">
|
||||
총 {researchProjects.length}개 핵심 국제/국내 표준화 연구 과제
|
||||
{researchProjects.length} core international standardization research projects
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
+113
-115
@@ -1,62 +1,47 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import HeroComposition from "./_components/HeroComposition";
|
||||
import { DirectionsBlock } from "./_components/DirectionsBlock";
|
||||
import { ProjectPageView } from "./_components/ProjectPageView";
|
||||
import { publications, patents } from "../content/publications";
|
||||
import { standardsBodies } from "../content/standards";
|
||||
|
||||
const PILLARS = [
|
||||
{
|
||||
no: "01",
|
||||
en: "Extensibility & Protocol",
|
||||
ko: "AI Agent 기능 확장 프로토콜",
|
||||
theme: "vermillion" as const,
|
||||
topics: [
|
||||
"Model Context Protocol (MCP) 서버/클라이언트 아키텍처",
|
||||
"SKILL 도구 캡슐화 및 재사용 패키징",
|
||||
"CLI 에이전트 인터페이스 제어 및 웹 가동 제어",
|
||||
],
|
||||
desc: "에이전트가 외부 도구 및 시스템과 표준화된 방식으로 연동할 수 있도록 MCP와 SKILL 패키징 기술을 개발합니다.",
|
||||
},
|
||||
{
|
||||
no: "02",
|
||||
en: "Multi-Agent Systems",
|
||||
ko: "멀티 에이전트 협업 및 오케스트레이션",
|
||||
theme: "cobalt" as const,
|
||||
topics: [
|
||||
"HERDR 백그라운드 프로세스 컨테이너 격리 제어",
|
||||
"crewAI 기반 역할 분담 및 태스크 위임 체계",
|
||||
"LangGraph 순환 상태 그래프 기반 워크플로우 제어",
|
||||
],
|
||||
desc: "다중 에이전트 환경에서 독립적인 역할 분담과 선순환 오케스트레이션을 보장하는 자율 협업 플랫폼을 연구합니다.",
|
||||
},
|
||||
{
|
||||
no: "03",
|
||||
en: "Interoperability Standards",
|
||||
ko: "에이전트 상호운용성 개방형 표준",
|
||||
theme: "vermillion" as const,
|
||||
topics: [
|
||||
"Agent-to-Agent (A2A) 프로토콜 규격 정의 및 검증",
|
||||
"Agent Communication Protocol (ACP) 메시지 교환 규격",
|
||||
"Agent Card (/.well-known/agent-card.json) 메타데이터 검증",
|
||||
],
|
||||
desc: "서로 다른 프레임워크 기반의 에이전트 간의 상호운용성을 보장하는 국제 표준 개방형 통신 프로토콜을 구현합니다.",
|
||||
},
|
||||
{
|
||||
no: "04",
|
||||
en: "High-Performance Backbone",
|
||||
ko: "AIoT & 고성능 통신 백본",
|
||||
theme: "cobalt" as const,
|
||||
topics: [
|
||||
"gRPC / QUIC 양방향 스트리밍 에이전트 백본 통신",
|
||||
"Protocol Buffers (Protobuf) 직렬화 통신 최적화",
|
||||
"MQTT / CoAP 엣지 메시 통신망 통합",
|
||||
],
|
||||
desc: "초저지연 양방향 스트리밍 통신 인프라를 바탕으로 고성능 에이전트 백본 네트워크를 설계하고 실증합니다.",
|
||||
},
|
||||
// CUSTOMIZATION HOOK: 14 Core Research Areas
|
||||
const RESEARCH_AREAS: string[] = [
|
||||
"Quick UDP Internet Connection (QUIC)",
|
||||
"QUIC-based Mobility and Multi-Streaming Support",
|
||||
"Services and Protocols for Internet-of-Things (IoT)",
|
||||
"Constrained Application Protocol (CoAP)",
|
||||
"In-Vehicle Infotainment (IVI)",
|
||||
"Optical Wireless or Visible Light Communications (OWC/VLC)",
|
||||
"Lighting Control Networks (PLASA E1.45) for LED-based VLC",
|
||||
"Mobility Management: Distributed Mobility Control",
|
||||
"Multicast Routing Protocols and Reliable Multicasting",
|
||||
"mobile SCTP (mSCTP): Soft Handover in Transport Layer",
|
||||
"Stream Control Transmission Protocol (SCTP)",
|
||||
"Telecommunication Optimization: Network Planning and Management",
|
||||
"TAC/TAL Configuration for Paging and Location Management",
|
||||
"Tabu Search and Genetic Algorithm",
|
||||
];
|
||||
|
||||
const INTERNATIONAL_SDOS = [
|
||||
"IEC TC100: Multimedia Systems and Equipment",
|
||||
"ISO/IEC JTC1/SC41: Internet-of-Things (IoT) Applications",
|
||||
"ITU-T SG20: IoT Services",
|
||||
"ITU-T SG13: Mobility Management",
|
||||
"ISO/IEC JTC1/SC6: Reliable Multicasting",
|
||||
];
|
||||
|
||||
export default function HomePage() {
|
||||
const pubCount = publications.length + patents.length;
|
||||
const intlPubsCount = publications.filter(
|
||||
(p) => p.category === "intl-journal-conf"
|
||||
).length;
|
||||
const patentCount = patents.length;
|
||||
const stdDocsCount = standardsBodies.reduce(
|
||||
(sum, b) =>
|
||||
sum + b.projects.reduce((pSum, p) => pSum + p.documents.length, 0),
|
||||
0
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="container-content space-y-16 md:space-y-24 pt-10 md:pt-16 pb-16 md:pb-24">
|
||||
@@ -75,39 +60,39 @@ export default function HomePage() {
|
||||
<span className="italic font-serif text-cobalt-dark">Orchestration</span>
|
||||
</h1>
|
||||
<p className="text-ink-mute text-base sm:text-lg leading-relaxed max-w-2xl">
|
||||
AI 에이전트 네트워크 연구실(ANL)은 멀티 AI 에이전트 오케스트레이션을 위해 서로 소통하고 협력하는 에이전트 네트워킹 기술과 표준 프레임워크 기술을 연구합니다.
|
||||
The AI Agent Networking Laboratory (ANL) studies agent networking technologies and standard frameworks that enable AI agents to communicate and collaborate with one another for multi-agent orchestration.
|
||||
</p>
|
||||
|
||||
{/* Metrics Row (Derived from data array, AC-13) */}
|
||||
{/* Metrics Row (Derived from real content data) */}
|
||||
<div className="pt-6 border-t border-line grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<div className="font-serif text-3xl text-cobalt-dark font-normal">
|
||||
{PILLARS.length}
|
||||
{intlPubsCount}
|
||||
</div>
|
||||
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
|
||||
Research Areas
|
||||
International Journals & Conference
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-serif text-3xl text-cobalt-dark font-normal">
|
||||
{Math.floor((publications.length + patents.length) / 10) * 10}+
|
||||
{patentCount}
|
||||
</div>
|
||||
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
|
||||
Publications
|
||||
Patent
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-serif text-3xl text-ink font-normal">
|
||||
2026
|
||||
<div className="font-serif text-3xl text-cobalt-dark font-normal">
|
||||
{stdDocsCount}
|
||||
</div>
|
||||
<div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1">
|
||||
Issue Static
|
||||
Standardization Contributions
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-5 border border-line bg-paper p-4 rounded-lg">
|
||||
<div className="w-full max-w-[500px] mx-auto my-[30px] lg:my-0 lg:max-w-none lg:mx-0 lg:col-span-5 border border-line bg-paper p-4 rounded-lg">
|
||||
<HeroComposition />
|
||||
</div>
|
||||
</div>
|
||||
@@ -116,79 +101,51 @@ export default function HomePage() {
|
||||
{/* Research Project PageView Component */}
|
||||
<ProjectPageView />
|
||||
|
||||
{/* Core Research Areas Grid */}
|
||||
<section className="space-y-8 pt-20 md:pt-28 border-t border-line">
|
||||
<div className="flex justify-between items-end">
|
||||
{/* 14 Research Areas Grid */}
|
||||
<section className="space-y-8 pt-16 md:pt-20 border-t border-line">
|
||||
<div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 border-b border-line pb-4">
|
||||
<div>
|
||||
<div className="font-mono text-xs text-cobalt-dark uppercase tracking-widest font-bold">
|
||||
Research Areas
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<span className="h-px w-8 bg-cobalt-dark"></span>
|
||||
<span className="font-mono text-xs tracking-widest uppercase text-cobalt-dark font-bold">
|
||||
Core Domains
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="font-serif text-3xl font-normal text-ink mt-1">
|
||||
핵심 연구 분야
|
||||
<h2 className="font-serif text-2xl sm:text-3xl font-normal text-ink">
|
||||
Research Areas
|
||||
</h2>
|
||||
</div>
|
||||
<div className="font-mono text-xs text-ink-mute">
|
||||
Magazine Layout 01–04
|
||||
</div>
|
||||
<p className="text-xs text-ink-mute font-mono">
|
||||
{RESEARCH_AREAS.length} fundamental networking protocols and AI system domains
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
|
||||
{PILLARS.map((pillar) => {
|
||||
const isVermillion = pillar.theme === "vermillion";
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{RESEARCH_AREAS.map((area, idx) => {
|
||||
const no = String(idx + 1).padStart(2, "0");
|
||||
const isOdd = (idx + 1) % 2 !== 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={pillar.no}
|
||||
className="bg-paper p-6 rounded-lg border border-line flex flex-col justify-between hover:border-ink transition-colors duration-200"
|
||||
key={no}
|
||||
className="bg-paper p-6 rounded-lg border border-line flex flex-col justify-between hover:border-ink transition-colors duration-200 h-full"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center">
|
||||
<span
|
||||
className={`font-mono text-sm font-bold ${
|
||||
isVermillion ? "text-vermillion" : "text-cobalt-dark"
|
||||
className={`font-mono text-xs font-bold ${
|
||||
isOdd ? "text-vermillion-dark" : "text-cobalt-dark"
|
||||
}`}
|
||||
>
|
||||
[{pillar.no}]
|
||||
{no}
|
||||
</span>
|
||||
<span className="font-mono text-xs text-ink-mute uppercase">
|
||||
{pillar.en}
|
||||
<span className="font-mono text-[0.68rem] text-ink-mute uppercase tracking-wider">
|
||||
Topic #{no}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="font-serif text-xl font-normal text-ink">
|
||||
{pillar.ko}
|
||||
<h3 className="font-serif text-base font-normal text-ink leading-snug">
|
||||
{area}
|
||||
</h3>
|
||||
|
||||
<p className="text-xs text-ink-mute leading-relaxed">
|
||||
{pillar.desc}
|
||||
</p>
|
||||
|
||||
<ul className="space-y-2 pt-2">
|
||||
{pillar.topics.map((topic, tIdx) => (
|
||||
<li
|
||||
key={tIdx}
|
||||
className="text-xs text-ink flex items-start gap-2"
|
||||
>
|
||||
<span
|
||||
className={`inline-block w-1.5 h-1.5 rounded-full mt-1 ${
|
||||
isVermillion ? "bg-vermillion" : "bg-cobalt"
|
||||
}`}
|
||||
></span>
|
||||
<span>{topic}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 pt-4 border-t border-line/60 flex justify-between items-center text-xs font-mono text-ink-mute">
|
||||
<span>ANL Core Spec</span>
|
||||
<span
|
||||
className={
|
||||
isVermillion ? "text-vermillion" : "text-cobalt-dark"
|
||||
}
|
||||
>
|
||||
Pillar #{pillar.no}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -196,6 +153,47 @@ export default function HomePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* International Standardizations Section */}
|
||||
<section className="space-y-6 pt-16 md:pt-20 border-t border-line">
|
||||
<div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 border-b border-line pb-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<span className="h-px w-8 bg-cobalt-dark"></span>
|
||||
<span className="font-mono text-xs tracking-widest uppercase text-cobalt-dark font-bold">
|
||||
Global Engagement
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="font-serif text-2xl sm:text-3xl font-normal text-ink">
|
||||
International Standardizations
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-paper p-6 sm:p-8 rounded-lg border border-line space-y-6">
|
||||
<p className="text-ink/80 text-sm sm:text-base leading-relaxed max-w-3xl">
|
||||
Along with the research activities, we are also in pursuit of the International Standardization, from the market deployment perspective, in the following SDOs (Standard-Defining Organizations):
|
||||
</p>
|
||||
|
||||
<ul className="grid grid-cols-1 md:grid-cols-2 gap-3 pt-2">
|
||||
{INTERNATIONAL_SDOS.map((sdo, idx) => (
|
||||
<li key={idx} className="flex items-start gap-2.5 text-sm text-ink font-sans">
|
||||
<span className="inline-block w-1.5 h-1.5 rounded-full bg-cobalt-dark mt-2 shrink-0"></span>
|
||||
<span>{sdo}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div className="pt-4 border-t border-line/60">
|
||||
<Link
|
||||
href="/standardization"
|
||||
className="inline-flex items-center gap-2 font-mono text-xs font-semibold uppercase tracking-wider text-cobalt-dark hover:text-ink transition-colors draw-underline"
|
||||
>
|
||||
<span>Please refer to here for details →</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Directions Block */}
|
||||
<DirectionsBlock />
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user