라이엇 API를 이용한 League of Legends 정보 App
- 실시간 데이터 제공: 라이엇 API를 통해 게임의 챔피언, 아이템, 무료 챔피언 정보를 실시간으로 제공합니다.
작업 기간 : 2025. 03. 10 - 2025. 03. 18
배포 주소 : https://nextjs-riot-app.vercel.app
⚙ 프로젝트 기능 소개
- 챔피언 리스트, 아이템 리스트 그리고 주간 무료 챔피언 리스트 정보를 제공
- SSG, SSR, ISR, CSR 네 가지 렌더링 기법을 사용하여 각 페이지를 구현
- Next Link Component을 이용해 페이지 간 네비게이션을 처리
- Tailwind CSS를 사용하여 반응형 디자인을 적용
📁 프로젝트 구조
📁
nextjs-riot-app
├─ public
├─ src
│ ├─ app
│ │ ├─ api
│ │ │ └─ rotation/route.ts # Route Handlers fetching Riot API
│ │ ├─ champions
│ │ │ ├─ page.tsx # Champion list page
│ │ │ └─ [id]/page.tsx # Champion Detail page
│ │ ├─ items
│ │ │ └─ page.tsx # Item list page
│ │ ├─ layout.tsx # Global Layout
│ │ ├─ page.tsx # Home page
│ │ └─ rotation
│ │ └─ page.tsx # Free Champion list page
│ ├─ components # UI Components
│ ├─ types
│ │ ├─ Champion.ts # Champion types
│ │ └─ Item.ts # Item types
│ └─ utils
│ ├─ clientApi.ts # API for client side
│ ├─ commonApi.ts # API for both side
│ └─ serverApi.ts # API for server side📄 페이지 구성
