- 😢 어릴적 오박사님이 내주던 포켓몬 문제! 그립지 않나요?
- 😵💫 무한으로 즐겨요~ 493마리의 랜덤 포켓몬이 나오는 포켓몬 퀴즈를 풀어봐요!
- 🤓 틀렸나요? 걱정말아요, 도감에서 공부하면 되니까!
- 🫵 넌 내꺼야! 내가 좋아하는 포켓몬을 포켓박스에 저장할 수 있어요!
 나는 포켓몬 마스터! - 포켓몬 퀴즈를 풀어봐요! |
|---|
 |
| - 포켓몬 그림자를 보고 정답을 맞출 수 있어요! - 문제를 맞추셨나요? 그렇다면 당신은 포켓몬 마스터! 다른 문제를 풀어보거나 도감을 볼 수 있어요! - 문제를 틀리셨나요? 그렇다면 포켓몬 도감을 클릭하여 공부하고 다시 풀어보세요! |
| 가랏, 몬스터볼! - 몬스터볼을 던져봐요! |
|---|
 |
| - 흔들리는 몬스터볼을 마우스로 잡고 던질 수 있어요! - 스크롤을 내리니 검색창과 필터 버튼이 보이지 않는다구요? 몬스터볼을 클릭해보세요! - 클릭하면 포켓몬을 검색할 수 있는 메뉴가 등장해요! - 검색은 물론, 타입별로 포켓몬을 필터링할 수 있어요! |
| 포켓몬들을 보고싶어! - 스크롤을 내려 모든 포켓몬을 확인하고 상호작용하세요! |
|---|
 |
| - 포켓몬 도감 페이지의 다양한 기능들과 상호작용하세요! 상호작용 가능한 모든 버튼에 효과가 있어요! - 잠시만 기다려주세요! 스크롤을 내리면 잠깐의 로딩 후 더 많은 포켓몬을 불러와요! - 짧은 로딩 시간에도 기다리기 지루하지 않게 랜덤한 포켓몬이 로딩 화면과 함께 등장해요! |
| 찾고 싶은 포켓몬이 있는데.. - 검색을 통해 포켓몬을 찾아보세요! |
|---|
 |
| - 포켓몬을 검색하여 원하는 포켓몬을 찾을 수 있어요! - 가물가물한 포켓몬 이름도 자동 완성의 도움으로 찾을 수도 있을거에요! - 자동완성 창이 보이면 엔터키를 눌러 포켓몬을 빠르게 찾을 수 있어요! - 물론 영어 버전에서도 검색과 자동완성 모두 할 수 있어요! |
| 전기 타입 포켓몬에는 뭐가 있을까? - 타입별 포켓몬을 확인하세요! |
|---|
 |
| - 타입 버튼을 클릭해 원하는 타입의 포켓몬을 찾아보세요! - 타입별 포켓몬 또한 스크롤을 통해 더 많은 포켓몬을 불러올 수 있어요! - 화면이 내려가 타입 버튼이 안보여도 떠다니는 몬스터볼을 클릭하면 타입 버튼을 찾을 수 있어요! |
| 이건 어떤 포켓몬이야? - 포켓몬 상세 정보를 확인해봐요! |
|---|
 |
| - 이런것 까지 알려준다고? 포켓몬의 모든 정보를 알려줍니다. - 기본적인 정보는 물론 디테일한 진화 단계와 특성, 색이 다른 버전인 이로치까지 볼 수 있어요! - 포켓몬 이미지 양옆에 화살표를 클릭하면 다음과 이전 포켓몬도 바로 바로 볼 수 있어요! |
| 내 최애 포켓몬! - 나만의 포켓몬 리시트를 확인해봐요! |
|---|
 |
| - 포켓몬 이름 옆 몬스터볼을 클릭하여 나만의 포켓몬을 저장할 수 있어요! - 나만의 포켓몬 조합을 만들고 좋아하는 모든 포켓몬을 저장할 수 있어요! - 마음에 들지 않는다면 놓아주자! 몬스터볼을 다시 한번 클릭하여 즐겨찾기에서 제외할 수 있어요! |
| 포켓몬 영어 이름! - 글로벌한 이름을 확인해보세요! |
|---|
 |
| - 포켓몬 도감을 전 세계 사람들과 함께 즐겨요! - 왼쪽 상단 KOR 텍스트를 클릭하면 영어로도 확인할 수 있어요! - 다시 한글로 보고 싶다면 왼쪽 상단 ENG 버튼을 클릭하면 볼 수 있어요! |
| 이름 | 개인 목표와 핵심 작업 내역 |
|---|---|
 |
개인 목표 오버레이 컴포넌트 및 동료 개발자가 쉽게 사용할 수 있는 공통 컴포넌트 제작 숙달 핵심 작업 내역 - Portal과 Framer-Motion 을 활용, 뷰포트 내에서 던질 수 있는 몬스터볼을 구현 - Portal과 Zustand를 활용, 전역에서 호출 가능한 토스트 팝업 기능 구현 - Portal을 활용, 내부를 children prop으로 채울 수 있고, 애니메이션이 적용된 모달 프레임 컴포넌트 제작 - Position 속성을 활용, SSR, CSR 상황에 맞게, 랜덤 포켓몬을 표출하는 오버레이 로딩중 컴포넌트 제작 - Zustand를 활용, 로컬 스토리지에 저장된 마이 포켓몬 데이터를 전역에서 관리하도록 구현 - party.js를 활용, 마이 포켓몬으로 추가할 때, 몬스터볼에 스파클링 효과 적용 |
 |
개인 목표 리액트 쿼리 활용한 서버상태 관리 및 최적화 숙달 핵심 작업 내역 - Tanstack Query를 활용한 서버 상태관리 - 무한 스크롤로 데이터 불러오기 구현 - 초기데이터를 포함한 SSR을 구현하여 SEO최적화 - 타입별 필터링, 포켓몬 검색 등을 조건부 랜더링을 통해 SPA처럼 동작하도록 구현 - 타입 필터링, 포켓몬 검색 기능을 모달 내부에서도 사용할 수 있도록 컴포넌트 추상화 - 한국어, 영문 검색, 자동 완성 기능 구현 - 뷰포트 사이즈에 맞춰 적절하게 줄바꿈 되는 반응형 디자인 구현 - Framer-Motion 라이브러리를 활용해 타입 버튼 클릭에 대한 인터렉티브한 효과 구현 |
 |
개인 목표 useContext, 커스텀 훅 등 기본 리액트 훅 및 API 사용 숙달 핵심 작업 내역 - PokeApi를 사용해 포켓몬의 정보(이름, 번호, 이미지, 타입, 무게, 신장, 분류, 특성, 설명, 진화 단계, 이로치)를 가져오는 코드 작성 - Zustand를 활용하여 글로벌 상태로 적용 가능한 한영 변환 기능 구현 - 랜덤으로 번호를 생성하여 해당 번호로 포켓몬 데이터를 가져와 문제를 출제하는 퀴즈 페이지 구현 - 포켓몬 클릭 시 해당 번호로 데이터를 조회해 상세 정보를 보여주는 모달 구현 - 상세 모달에서 탭 상태에 따라 적절한 콘텐츠가 표시되도록 구현 - 로컬스토리지에 저장된 포켓몬 번호를 기반으로 데이터를 조회해 표시하는 즐겨찾기 모달 구현 |