# 🌐 경북대학교 사물인터넷 표준 연구실 (ISL) 홈페이지 리뉴얼 프로젝트

> 본 프로젝트는 **경북대학교 컴퓨터학부 사물인터넷 표준 연구실 (IoT Standards Laboratory, ISL)**의 공식 홈페이지를 차세대 웹 기술 스택(Next.js 14+, TypeScript, Tailwind CSS)으로 리뉴얼 및 구축하기 위한 디렉터리입니다.
> 
> 연구실의 실제 데이터 원본(`ISL-2026/`)과 참고용 모던 웹 프로토타입(`refer_landing_page/`)을 기반으로, 멀티 에이전트 협업 체계(MAM)를 통해 차세대 연구실 랜딩페이지를 완성합니다.

---

## 📌 1. 연구실 개요 (Lab Overview)

- **연구실명**: 사물인터넷 표준 연구실 (IoT Standards Laboratory, ISL)
- **소속**: 경북대학교 IT대학 컴퓨터학부
- **지도교수**: 고석주 교수 (Prof. Seok-Joo Koh / `sjkoh@knu.ac.kr`)
- **핵심 연구 분야**:
  1. **IoT Standards & Protocols**: oneM2M, W3C WoT, OCF, OMA LwM2M 기반 사물인터넷 국제 표준 및 상호운용성 연구
  2. **Automotive & IVI (CCIS)**: Configurable Car Infotainment Service, 차량 내 인포테인먼트 제어 및 표준 인터페이스
  3. **Optical Wireless & VLC**: Visible Light Communication (가시광 통신) 및 오토모티브 광통신
  4. **Next-Gen Networks**: QUIC 기반 멀티에이전트 오케스트레이션, MCM (Metaverse Content Management) 메타버스 인터페이스

---

## 📁 2. 디렉터리 구조 및 역할 (Directory Structure)

```
landing_page/
├── README.md               # [본 문서] 프로젝트 통합 온보딩 가이드
├── ISL-2026/               # 📄 [실제 데이터 원본] 기존 연구실 공식 홈페이지 (HTML/CSS)
│   ├── index.html          # 메인 랜딩페이지 & 연구 분야 소개
│   ├── member.html         # 교수진, 석/박사 연구원, 학부연구생, 졸업생 목록
│   ├── paper-international.html # 국외 저널 및 학회 논문 실적
│   ├── paper-domestic.html # 국내 저널 및 학회 논문 실적
│   ├── patent.html         # 특허 등록/출원 실적
│   ├── standard.html       # 국제/국내 표준화 기여 내역 (oneM2M, ITU-T 등)
│   ├── lecture.html        # 담당 학부 및 대학원 강의 목록
│   └── assets/ & image/    # 로고, 교수님 및 연구원 사진, 연구 분야 그래픽 자산
│
├── refer_landing_page/     # 🚀 [타겟 웹 애플리케이션 프로토타입] Next.js 14+ App Router
│   ├── app/                # Next.js App Router 페이지 (intro, members, publications, lectures, standardization)
│   ├── components/         # 모듈화된 UI 컴포넌트 (Header, Footer, PageHeader, SectionLabel, Reveal, Counter, Marquee)
│   ├── docs/DESIGN.md      # 고대비 매거진 에디토리얼 디자인 시스템 가이드 문서
│   └── tailwind.config.ts  # 디자인 토큰 및 시각 스타일 규칙 정의
│
├── .agents/                # 🤖 멀티 에이전트 오케스트레이션 규칙 및 스킬 툴킷 (MAM)
├── .mam/                   # ⚡ 에이전트 세션 DB 및 격리 상태 레지스트리
├── docs/                   # 진행 작업 노트, 미팅 기록, 아키텍처 결정(ADR)
└── research/               # 관련 논문, 표준 사양서, 벤치마크 자료
```

---

## 🎯 3. 온보딩 핵심 미션 (Core Development Missions)

에이전트 팀 및 개발자는 아래 3단계 주요 미션을 순차적으로 진행합니다:

### 📥 Mission 1: 실제 연구실 데이터 추출 및 정밀 마이그레이션 (Data Migration)
- `ISL-2026/` 디렉터리의 레거시 HTML 파일들에서 **실제 데이터**를 추출합니다:
  - **구성원**: 교수 소개, 박사/석사/학부 연구원, 졸업생(진로 정보 포함) `[ISL-2026/member.html]`
  - **논문 실적**: 국외 저널/학회, 국내 저널/학회 논문 최신순 정렬 `[ISL-2026/paper-international.html, paper-domestic.html]`
  - **특허 & 표준화**: 특허 등록/출원 목록 및 oneM2M/ITU-T/OCF 표준화 실적 `[ISL-2026/patent.html, standard.html]`
  - **강의 목록**: 학부/대학원 개설 과목 `[ISL-2026/lecture.html]`
- `refer_landing_page/app/<route>/page.tsx` 내의 예시(placeholder) 데이터 배열을 추출한 **실제 ISL 연구실 데이터로 전면 교체**합니다.

### 🎨 Mission 2: 브랜드 가치 및 디자인 시스템 유지 (Design & UX Refinement)
- `refer_landing_page/docs/DESIGN.md`에 명시된 에디토리얼 디자인 시스템("Issue 01") 규격을 엄격히 준수합니다.
- `ISL-2026/assets/`의 연구실 공식 로고(`Lab_logo_color_transparent.png`), 인물 사진, 연구 분야 그래픽 이미지를 `refer_landing_page/public/`으로 이관하여 적용합니다.
- 매거진 섹션 넘버링(`SectionLabel`), 카운트업(`Counter`), 등장 모션(`Reveal`), 티커(`Marquee`) 컴포넌트를 효과적으로 활용합니다.

### 🔍 Mission 3: SEO, 반응형 UI 및 품질 검증 (QA & Verification)
- 모든 페이지에 **SEO 최적화** (Title, Meta Description, Semantic HTML5) 적용.
- 모바일, 태블릿, 데스크톱 화면 반응형 Breakpoint 및 터치 사용자 경험 검증.
- `npm run build`를 통한 TypeScript 및 Next.js 타입/린트 오류 0건 검증.

---

## 👥 4. 멀티 에이전트 역할 및 협업 프로토콜 (Multi-Agent Team)

본 프로젝트는 `multi-agent-mux` 환경에서 3개의 전용 에이전트가 역할 분담하여 작업을 수행합니다.

| 에이전트 | 담당 역할 (Role) | 주요 임무 (Primary Responsibilities) |
| :--- | :--- | :--- |
| 🧠 **Claude** | `planner and reviewer` | 전체 마이그레이션 아키텍처 수립, 데이터 누락 검증, 최종 코드 PR 승인 |
| 🎨 **Agy** (Antigravity) | `creator` | Component 개발, `ISL-2026` 데이터 추출 및 `refer_landing_page` 코드 작성/적용 |
| 🔍 **Cline** | `reviewer` | UI/UX 반응형 검수, SEO 및 Accessibility 점검, 린트/타입 안전성 검증 |

> ⚠️ 모든 에이전트는 프로젝트 루트의 [`AGENTS.md`](./AGENTS.md) 지침 및 [`.agents/MULTI_AGENT_RULES.md`](./.agents/MULTI_AGENT_RULES.md) 규약을 최우선으로 숙지하고 준수해야 합니다.

---

## 🛠️ 5. 로컬 개발 및 실행 가이드 (Getting Started)

```bash
# 1. 참고용 웹 애플리케이션 디렉터리로 이동
cd refer_landing_page

# 2. 의존성 패키지 설치
npm install

# 3. 개발 서버 실행 (기본 포트: http://localhost:3000)
npm run dev

# 4. 프로덕션 빌드 테스트 (검증 시 사용)
npm run build
```

---

## 📜 6. 개발 컨벤션 (Development Conventions)

- **커밋 메시지 규칙**: `feat:`, `fix:`, `docs:`, `refactor:`, `style:`, `data:` 접두사 사용.
- **이미지 및 자산**: 영문 snake_case 파일명 사용 (`refer_landing_page/public/images/` 하위에 저장).
- **디자인 토큰**: `tailwind.config.ts` 및 `app/globals.css` 디자인 토큰 참조.