# AI 에이전트 네트워크 연구실 랜딩 페이지 (Reference Prototype)

경북대학교 컴퓨터학부 **AI 에이전트 네트워크 연구실(ANL / AI Agent Networking Lab)** 의 랜딩 페이지
**참고용 프로토타입**입니다. 프로덕션 배포용이 아니라, 구조와 디자인을 참고해
실제 콘텐츠로 교체하기 위한 레퍼런스 구현입니다. 모든 인물·논문·표준 기여 내역은
예시(placeholder)이므로 실제 정보로 바꿔서 사용하세요.

## 연구실 소개 (Lab Context)

본 연구실은 **(a) QUIC, gRPC, A2A 기반 차세대 에이전트 통신 프로토콜**과
**(b) HERDR/LangGraph 기반 멀티에이전트 오케스트레이션 아키텍처 및 시스템**을 연구합니다.

## 기술 스택 (Tech Stack)

- **Next.js 14+** (App Router)
- **TypeScript**
- **Tailwind CSS**

## 디렉터리 구조 (Directory Structure)

```
refer_landing_page/
├── app/
│   ├── _components/            # 서버/클라이언트 전용 컴포넌트 (ProjectPageView, ProjectPageViewControls)
│   ├── layout.tsx              # 루트 레이아웃 (Header/Footer, 폰트, 메타데이터)
│   ├── globals.css             # Tailwind 지시문 + 공통 유틸 클래스
│   ├── page.tsx                # Home 라우트 (연구실 소개, Research Project PageView, 4대 분야 조판, 오시는 길)
│   ├── members/page.tsx        # 구성원 (16명 재학 연구원, 60명 졸업생 인벤토리)
│   ├── publications/
│   │   ├── page.tsx            # 연구 실적 개요 및 Top 10 하이라이트
│   │   └── [category]/page.tsx # 카테고리 3종 정적 사전 생성 라우트 (● SSG)
│   ├── lectures/page.tsx       # 강의 이력 (2004 Spring ~ 2026 Spring 45개 학기)
│   ├── standardization/page.tsx# 표준화 활동 (6개 기구 / 44개 규격 문서)
│   ├── sitemap.ts              # SEO 사이트맵
│   └── robots.ts               # 검색엔진 크롤러 제어
├── content/                    # 마이그레이션 실데이터 및 스키마 모듈 (projects.ts 자동 생성)
├── scripts/                    # 레거시 데이터 파싱 및 무손실 대조 검증 파이프라인
├── components/
│   ├── Header.tsx              # 반응형 상단 내비게이션 (1240px desktop: 햄버거 토글)
│   ├── Footer.tsx              # 하단 연락처/바로가기
│   ├── SectionLabel.tsx        # 매거진 섹션 넘버링 (01 / 05)
│   ├── Reveal.tsx              # 스크롤 등장 모션 래퍼
│   ├── Counter.tsx             # 0→값 카운트업 숫자
│   └── Marquee.tsx             # 키워드 러닝 티커
├── docs/
│   └── DESIGN.md               # 디자인 시스템 문서 (토큰·타입·모션·컴포넌트)
├── tailwind.config.ts          # 색상·폰트·타입스케일·모션 토큰 (desktop: "1240px")
├── next.config.js
├── tsconfig.json
├── postcss.config.js
└── package.json
```

## 실행 방법 (How to Run)

> ⚠️ 의존성 설치(`npm install`)는 **사용자가 직접 실행**해야 합니다. 이 저장소를
> 생성한 도구는 `npm install`을 실행하지 않았습니다.

```bash
cd refer_landing_page
npm install
npm run dev
```

개발 서버는 기본적으로 **http://localhost:3000** 에서 실행됩니다.

## 라우트 맵 (Route Map)

| 경로 | 설명 |
| --- | --- |
| `/` | Home — 연구실 소개 · Research Project PageView(3대 실연구과제 인터랙티브 카드) · 4대 핵심 연구 분야 · 오시는 길 |
| `/intro` | Home (`/`)으로 308 permanent redirect |
| `/members` | 구성원 — 지도교수 및 재학 연구원 16명, 졸업생 60명 이력 인벤토리 |
| `/publications` | 연구 실적 개요 — 223건 카테고리 분류 및 Top 10 최신 성과 |
| `/publications/[category]` | 카테고리별 실적 (intl-journal-conf, domestic-journal-conf, patent) — ● SSG 정적 프리렌더 |
| `/lectures` | 강의 — 45개 학기 학부·대학원 개설 교과목 이력 |
| `/standardization` | 표준화 활동 — IEC TC100, ISO/IEC JTC1, ITU-T, TTA 등 6개 기구 / 44개 규격 문서 |

## 디자인 시스템 (Design System)

이 사이트는 **고대비 매거진 스프레드** 감성의 에디토리얼 디자인 시스템("Issue 01")
으로 구성됩니다. 소수의 토큰에서 전체 테마가 파생되며, 토큰 하나를 바꾸면 사이트
전반에 반영됩니다. 색상 토큰, 타입 스케일, 모션 원칙, 공유 컴포넌트 사용법 등 전체
설명은 **[`docs/DESIGN.md`](./docs/DESIGN.md)** 를 참고하세요.

## 커스터마이징 (Customization Hooks)

- **색상(Colors):** `tailwind.config.ts` 의 `theme.extend.colors` 에서 디자인 토큰을
  수정합니다 — `ink`(본문·괘선), `ivory`/`paper`(종이 배경), `line`(헤어라인),
  그리고 두 에디토리얼 강조색 `vermillion`(Agent Engineering / Orchestration) · `cobalt`(MCP / A2A Protocol). 같은 값이
  `app/globals.css` 의 `:root` CSS 변수에도 미러링되어 있으니 **두 곳을 함께** 바꾸세요.
  (`brand`/`accent` 별칭은 레거시 호환용이므로 신규 코드에서는 사용하지 마세요.)
- **폰트(Fonts):** `app/layout.tsx` 에서 `next/font` 로 로드해 CSS 변수
  (`--font-display`, `--font-serif-ko`, `--font-sans`)로 노출하고,
  `tailwind.config.ts` 의 `fontFamily` 에서 패밀리를, `fontSize` 의
  `display`/`display-sm` 에서 매거진 디스플레이 스케일을 조정합니다.
- **모션(Motion):** 스크롤 등장 타이밍은 `app/globals.css` 의 `--reveal-duration` /
  `--reveal-ease` 에서, 마퀴·스트림 등 애니메이션 속도는 `tailwind.config.ts` 의
  `theme.extend.animation` 에서 조정합니다. `prefers-reduced-motion` 은 자동 존중됩니다.
- **콘텐츠(Content):** 각 `app/<route>/page.tsx` 상단의 `// CUSTOMIZATION HOOK` 주석이
  표시된 데이터 배열(구성원, 논문, 강의, 표준 기여, 카운터 수치, 키워드 티커 등)을
  실제 정보로 교체하세요.
- **공유 컴포넌트(Shared Components):** `Reveal`(등장 모션), `SectionLabel`(섹션 넘버링),
  `PageHeader`(페이지 마스트헤드), `Counter`(카운트업 수치), `Marquee`(키워드 티커)를
  재사용합니다. 각 컴포넌트의 용도와 props 는 `docs/DESIGN.md` 4절을 참고하세요.
- **내비게이션/푸터:** `components/Header.tsx` 의 `navItems`, `components/Footer.tsx` 의
  주소·이메일 placeholder 를 수정합니다.

---

> 본 프로젝트는 참고용 프로토타입이며 실제 서비스 배포를 보장하지 않습니다.