📚 Pokemon dogam

---

next.js 와 typescript를 사용하여 포켓몬 api를 불러오고 포켓몬들의 list와 상세 정보를 볼 수 있어요.

👩‍💻 프로젝트 소개

---

• 제작 기간 : 2024.07.02 ~ 2024.07.04 (2일간)
• 배포 주소 : 포켓몬 도감 바로가기
• github 바로가기 : github 바로가기

🛠️ 프로젝트로 이런걸 시도했어요!

---

✅ 무한 스크롤링

랜딩 페이지에 data를 30개 이상만 가져와도 vercel에서 타임에러가 뜨고 너무 오래걸리기 때문에 무한 스크롤링으로 처음 진입할 때 30개만 가져오게 해서 build runtime을 줄이고 스크롤링할 때마다 데이터를 받아와서 유저 경험을 좋게 만들고 싶었어요

✅ 반응형 웹

이 전 프로젝트에서는 시간상의 문제로 모바일 친화적인 디자인을 만들지 못했어요. 그래서 요번 개인 프로젝트를 통해 mobile ui까지 신경써서 반응형으로 웹을 만들었어요.

✅ 컴포넌트 재사용성

class-variance-authority 라이브러리를 사용해서 포켓몬의 타입을 나타내는 Chip들을 api에서 받아온 이름에 따라 색과 내용을 다르게 지정해주었어요.