[6주차 과제] 영화 탐색 페이지

[Navi-Up]

🏡 과제 명세

• React + TypeScript
• TanStack Query 사용
• HTTP 클라이언트 라이브러리 사용 (axios, ky, ...)
• ThemeProvider, GlobalStyle 사용 (CSS 라이브러리 사용)
• any 사용 금지

1. 영화 목록 페이지(메인 페이지)

• 리스트 형태로 영화 데이터 불러오기
• 별점을 통한 필터링 기능 구현
• 각 영화 카드에는 포스터, 영화 제목, 개봉일, 줄거리 표시
• 영화 카드 hover시 효과(확대 or 그림자 or 색상 변경 등 자유)
• 영화 카드 클릭 시, 영화 상세 페이지로 이동
• 무한 스크롤 구현

2. 영화 상세 페이지

• movieId 로 라우팅
• 영화 포스터, 배경 이미지, 제목, 개봉일, 장르, 평점, 상영 시간, 투표 수, 상태, 줄거리 표시
• 기본 정보(원제, 원어, 제작 국가, 사용 언어, 예산, 수익) 표시
• ‘<- 목록으로 돌아가기’ 클릭 시 영화 목록 페이지로 이동

3. 별점 남기기/삭제하기

• 영화 상세 페이지에 존재
• 이전에 매긴 별점이 없을 경우 비어 있으며, 있을 경우 해당 값으로 채워짐
• 범위 밖 숫자 입력 시 저장 x
• 성공시, 성공 메시지 하단에 출력
• ‘별점 삭제하기’ 클릭 시, 별점 삭제

✍️ 구현 요약 및 새로 배운 점

• TanStack Query의 useInfiniteQuery를 활용해서 무한 스크롤을 구현했습니다
• IntersectionObserver와 useRef로 스크롤 감지 후 자동으로 다음 페이지를 불러오게 구현했습니다
• localStorage로 게스트 세션을 유지해서 페이지를 새로고침해도 이전 별점이 유지됩니다
• Tailwind CSS의 group, group-hover를 활용해서 카드 hover 시 정보가 올라오는 효과를 구현했습니다

💦 구현 과정에서 어려웠던 & 고민했던 부분

• useInfiniteQuery의 queryKey에 필터 값을 넣어야 필터 변경 시 자동으로 새로 fetch된다는 걸 이해하는 데 시간이 걸렸습니다
• TMDB 게스트 세션이 별점 없을 때 404를 반환하는데, 에러인지 정상인지 헷갈렸습니다
• 별점 필터를 min/max 범위로 구현할지 단순 이상으로 구현할지 고민했습니다

🙋‍♀️ 리뷰 요청 포인트 & 질문

• MovieDetailPage에 로직이 많이 몰려있는데 분리하는 게 나을지 궁금합니다
• 게스트 세션을 localStorage로 관리하는 방식이 적절한지 궁금합니다

📷 결과물

(https://drive.google.com/file/d/11cVv7w_phgf2URKKLCHl_DXpglRFcJRL/view?usp=sharing)