컴포넌트 설계 분담
김민찬
- 랜딩 페이지
- 메인페이지
- 인기 포켓몬 컴포넌트
- 검색 + 타입
- 포켓몬 컴포넌트
- 버튼 컴포넌트
염정훈
- 포켓몬 상세 모달 컴포넌트
- 내 포켓몬 모달 컴포넌트
- PokeAPI
김세환
- 로그인 페이지(유효성 검사 포함)
- 회원가입 페이지(유효성 검사 포함)
컴포넌트 설계
랜딩 페이지
오늘의 포켓몬은 뭘까요?
- 포켓몬 퀴즈
- 목적
- 포켓몬 실루엣을 보여주고 어떤 포켓몬인지 맞추도록 유도하는 유저 흥미 유발을 위한 컴포넌트
- 유저 플로우
- 사이트 진입 시, 가장 먼저 해당 포켓몬의 실루엣과 2개의 포켓몬 이름이 적힌 버튼이 보임
그 아래에는 도감으로 바로 가기 버튼이 있음
- 2개의 포켓몬 이름이 적힌 버튼 중 하나를 클릭
- 클릭 시, 포켓몬의 온전한 모습이 나타나며, 다음 문제 버튼을 누르면
다른 포켓몬으로 계속 퀴즈를 풀 수 있음
- 아래에 위치한 포켓몬 도감 보기 버튼을 누르면 메인 화면(포켓몬 도감)으로 이동함
- 렌더링 방식
- SSR + CSR
- 랜딩 페이지인만큼 최대한 빨리 유저에게 페이지를 보여주는 것이 좋을 것,
포켓몬 퀴즈 컨텐츠라는 것이 SEO에 노출되면 검색어 유입에 좋을 것이라 생각
- 최초 렌더링 시에 포켓몬을 받아오는 것은 SSR로 구현
- 다음 문제 버튼을 누를 경우에 다른 포켓몬을 가져오는 것은 CSR로 구현
- 구현
- props: 필요없음
- 필요한 포켓몬 정보: 이름, 이미지, 타입(배경 표출용)
- 로직
- 전체 포켓몬 도감 번호 중에서 랜덤으로 번호를 뽑는 함수를 제작
- 랜덤 번호로 서버 사이드 data fetch
- 다음 문제 누르면 클라이언트 사이드 리패치
메인 페이지
인기 포켓몬
- 인기 포켓몬 리스트 컴포넌트
- 목적
- 내 포켓몬으로 가장 많이 등록된 상위 6마리의 포켓몬을 보여줌
- 유저 플로우
- 렌더링 방식
- ISR
- 인기 포켓몬 순위가 실시간으로 급변하는 것이 아니므로,
굳이 매번 서버에서 받아오는 것이 아니라,
일정 시간을 주기로 업데이트되는 정도면 충분하다 생각
- 구현 방식
- props: 필요없음
- 서버에서 즐겨찾기 기준으로 포켓몬 리스트를 불러옴
- 6개만 슬라이싱
- map 함수로 인기 포켓몬 컴포넌트 렌더링
- 인기 포켓몬 컴포넌트
- 목적
- 유저 플로우
- 구현 방식
- props: 포켓몬 이미지
- 로직
- 포켓몬 이미지를 받아서, 인기 포켓몬 공통 배경과 함께 렌더링
- 마우스 호버링 시, 바운스 효과
검색 기능