[영화 목록 조회 프로젝트] 영화 목록 조회 프로젝트를 회고하기 전에

🚀 영화 목록 조회 프로젝트를 회고 하기 전에

본 프로젝트는 코리아 it 학원에서 프론트엔드 수업을 하며 과제로 나왔던 주제입니다. 저 포함 4명의 팀원들과 함께 진행했으며, 이번 회고 시리즈에서는 제가 한 부분과 다른 분께서 했지만 다시 정리해 보면 좋을 내용들을 포함해 보려고 합니다 :)

 

프로젝트 설명

영화 트레일러 오픈 API를 활용한 영화 목록 조회 웹 사이트입니다.

 

기능 구현 사항

• react-query를 사용하여 데이터를 캐싱
• 로딩 중에는 skeleton UI를 나타낼 것
• 목록을 불러올 때는 react-query의 useInfinitieQuery를 사용하여 무한 스크롤링으로 불러올 것
• 페이지
  • 리스트 페이지
    • 각 영화의 평점 및 짧은 미리보기(소개)가 나타나야 함
    • 미리보기는 길이가 길다면 특정 글자수를 넘어갈 시 ...으로 표시할 수 있도록 UI를 고려할 것
  • 상세 페이지
    • 비디오가 있는 경우, 페이지 진입 시 자동으로 비디오 플레이
    • 제목, 포스터, 별점, 제작 연도, 장르 데이터 활용해서 UI 표기
    • 그 외의 데이터 추가 활용 여부는 자유
  • search
    • 제목, 포스터, 미리보기(소개), 별점
    • 포스터 없는 경우, 대체 이미지 사용

 

실제 구현 화면

메인 페이지

상세 페이지

리스트 페이지

검색 결과 페이지