TMDB API를 활용해 React 기반의 Disney Plus 클론 SPA를 개발하였습니다.
Firebase Auth를 이용해 이메일/비밀번호 로그인과 GitHub OAuth 로그인을 구현했으며, 로그인 상태와 사용자 정보를 Recoil 전역 상태로 관리합니다.
특히 Recoil의 atom을 활용해 검색 중 상태, 검색어, 검색 결과, 그리고 로그인 사용자 정보를 체계적으로 정의하였습니다.
React Query를 사용해 TMDB API에서 다양한 영화 데이터를 비동기적으로 패칭하고, 배너와 카테고리별 영화 리스트를 효율적으로 렌더링하였습니다.
검색 페이지는 디바운싱 처리된 실시간 검색 기능을 제공하며, backdrop 이미지가 존재하는 결과만 필터링하여 보여줍니다.
Styled-components로 반응형 UI를 구성하였으며, framer-motion을 활용해 애니메이션 효과를 더했습니다.