📗 롤 대백과사전

Riot API를 활용하여 리그오브레전드 정보를 보여주는 페이지입니다.

🔗 배포 링크

https://lol-dex.vercel.app

📚 프로젝트 구조

폴더 구조

lol-dex
├─ .gitignore
├─ components.json
├─ next.config.mjs
├─ package.json
├─ postcss.config.mjs
├─ public
│  └─ assets
│     ├─ link.cur
│     ├─ logo.png
│     └─ normal.cur
├─ README.md
├─ src
│  ├─ app
│  │  ├─ api
│  │  │  └─ rotation
│  │  │     └─ route.ts
│  │  ├─ champions
│  │  │  ├─ page.tsx
│  │  │  └─ [name]
│  │  │     ├─ loading.tsx
│  │  │     └─ page.tsx
│  │  ├─ error.tsx
│  │  ├─ favicon.ico
│  │  ├─ global-error.tsx
│  │  ├─ globals.css
│  │  ├─ items
│  │  │  └─ page.tsx
│  │  ├─ layout.tsx
│  │  ├─ loading.tsx
│  │  ├─ page.tsx
│  │  └─ rotation
│  │     └─ page.tsx
│  ├─ components
│  │  ├─ ChampionCard.tsx
│  │  ├─ detail
│  │  │  ├─ ChampionDetail.tsx
│  │  │  ├─ ChampionSkill.tsx
│  │  │  └─ ChampionSkins.tsx
│  │  ├─ home
│  │  │  └─ ThumbnailList.tsx
│  │  ├─ items
│  │  │  └─ ItemCard.tsx
│  │  ├─ layout
│  │  │  ├─ Header.tsx
│  │  │  ├─ HiddenHeaderList.tsx
│  │  │  └─ ThemeButton.tsx
│  │  └─ ui
│  │     ├─ button.tsx
│  │     ├─ card.tsx
│  │     └─ carousel.tsx
│  ├─ hooks
│  │  └─ queries
│  │     └─ useGetRotationQuery.ts
│  ├─ lib
│  │  └─ utils.ts
│  ├─ providers
│  │  └─ RQProvider.tsx
│  ├─ types
│  │  ├─ championType.ts
│  │  ├─ itemType.ts
│  │  └─ rotationType.ts
│  └─ utils
│     ├─ clientApi.ts
│     └─ serverApi.ts
├─ tailwind.config.ts
├─ tsconfig.json
└─ yarn.lock

개발 환경

프로젝트 기간

2024.09.25 ~ 24.10.07

🎨 주요 기능

홈페이지

로테이션

챔피언 목록

챔피언 상세

아이템 목록

다크모드

반응형

로딩 페이지

loading.tsx 파일을 이용한 로딩페이지 구현

에러 페이지

global-error.tsx와 error.tsx파일을 통한 에러 처리 페이지

후기

원래 만들고 싶었던 기능을 대부분 포기했다. 이번주 너무 바빠서 이것 저것 할게 너무 많더라,, 주말에 코테도 보고 사이드 프로젝트 하는 것도 막 알아보려니 아이템 목록 상세나 하위 템들 같은 페이지랑 기능이 만들고 싶었는데 아쉽게 되었다. 팀 프로젝트때는 최대한 할 수 있는 부분은 빠르게 끝내고 코드 퀄리티나 만들고 싶은 기능들을 확실하게 구현해보도록 해야겠다.