# 사물인터넷 표준 연구실 랜딩 페이지 (Reference Prototype)

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

## 연구실 소개 (Lab Context)

본 연구실은 사물인터넷 국제 표준을 기반으로 **(a) 메타버스 상호운용성(MCM Project)**
과 **(b) QUIC 기반 멀티에이전트 오케스트레이션 아키텍처 및 통신 인터페이스 설계**
두 가지 축을 연구합니다.

## 기술 스택 (Tech Stack)

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

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

```
refer_landing_page/
├── app/
│   ├── layout.tsx              # 루트 레이아웃 (Header/Footer, 폰트, 메타데이터)
│   ├── globals.css             # Tailwind 지시문 + 공통 유틸 클래스
│   ├── intro/page.tsx          # 연구실 소개
│   ├── members/page.tsx        # 구성원
│   ├── publications/page.tsx   # 논문
│   ├── lectures/page.tsx       # 강의
│   └── standardization/page.tsx# 표준화 활동
├── components/
│   ├── Header.tsx              # 반응형 상단 내비게이션
│   ├── Footer.tsx              # 하단 연락처/바로가기
│   ├── PageHeader.tsx          # 페이지 배너 (한글 제목 + 영문 display)
│   ├── SectionLabel.tsx        # 매거진 섹션 넘버링 (01 / 05)
│   ├── Reveal.tsx              # 스크롤 등장 모션 래퍼
│   ├── Counter.tsx             # 0→값 카운트업 숫자
│   └── Marquee.tsx             # 키워드 러닝 티커
├── docs/
│   └── DESIGN.md               # 디자인 시스템 문서 (토큰·타입·모션·컴포넌트)
├── tailwind.config.ts          # 색상·폰트·타입스케일·모션 토큰
├── 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)

| 경로 | 설명 |
| --- | --- |
| `/intro` | 연구실 소개 — 두 가지 연구 축(MCM, QUIC)과 연구 분야 |
| `/members` | 구성원 — 지도교수 및 박사·석사·학부 연구원 (placeholder) |
| `/publications` | 논문 — 대표 저널/학회 논문 목록 (placeholder) |
| `/lectures` | 강의 — 담당 학부·대학원 강의 (placeholder) |
| `/standardization` | 표준화 활동 — oneM2M, W3C WoT, IETF QUIC, OMA LwM2M 기여 (placeholder) |

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

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

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

- **색상(Colors):** `tailwind.config.ts` 의 `theme.extend.colors` 에서 디자인 토큰을
  수정합니다 — `ink`(본문·괘선), `ivory`/`paper`(종이 배경), `line`(헤어라인),
  그리고 두 에디토리얼 강조색 `vermillion`(MCM/저널) · `cobalt`(QUIC/학회). 같은 값이
  `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 를 수정합니다.

---

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