리액트와 타입스크립트를 공부하면서 넷플릭스 사이트의 간단한 기능을 구현해 보았습니다.

GitHub Pages : https://ahyeonmin.github.io/react-netflix/#/

Typescript React Router React Query React Hook Form Recoil Styled Components Framer Motion

모든 콘텐츠 정보는 React Query를 이용하여 The Movie Database의 API 데이터를 가져와서 사용했습니다.

• 메인 페이지로 인기 있는, 평가가 좋은, 새로 올라온, 다양한 장르의 영화를 슬라이드로 확인할 수 있습니다.
• 슬라이드 박스에 마우스를 올리면 해당 영화의 제목이 뜹니다.
• 슬라이드 박스를 클릭하면 해당 영화의 상세 정보 페이지로 넘어갑니다. 배너의 상세 정보 버튼 클릭 시에도 동일합니다.

• 메인 페이지와 기능은 같습니다.

• 검색창에 값을 입력하고 엔터를 치면, 입력한 값과 함께 검색 페이지로 넘어갑니다.
  • useLocation을 사용해서 현재 페이지의 정보를 가져온 후, URLSearchParams로 url의 query에 들어간 값을 가져옵니다. 가져온 query 값으로 검색 결과를 띄웁니다.
• 슬라이드 박스 클릭 시 상세 정보 페이지로 넘어갑니다. 데이터에 type을 지정해서 영화와 시리즈를 구분했습니다.

• 해당 콘텐츠에 대한 상세 정보를 확인할 수 있고, 비슷한 영화를 추천합니다.
• 모달창 외부 클릭 시에도 모달창을 닫을 수 있습니다.
• 시리즈 모달창엔 에피소드 개수도 추가했습니다.