📌 클로닝해보면서 구글 로그인, 검색 로직 등 다양한 기능 및 배포 과정 학습
📢https://www.themoviedb.org/ 의 open API의 영화DB를 활용
🔗배포 주소 : https://disneyclone-72280.firebaseapp.com
첫 화면으로 로그인 페이지가 나온다.
가입화면은 구현을 안했지만 상단의 로그인 버튼을 누르면 구글 연동 로그인을 진행할 수 있다.
혹시나 도메인에서 path를 입력하여 로그인 없이 강제로 다른 화면으로 이동하려하는 것을 방지하기 위해 로그인 유무를 체크하는 로직을 추가하였다. 로그인 전에는 어떤 상황에서든 첫 화면이 나오게 된다.
로그인 유무를 체크하기 위해 로컬 스토리지에 userData를 저장하는 방식을 사용하였다. 이를 통해 로그인 유무 체크와 새로고침, 창을 껐다켜도 로그인이 유지될 수 있도록 한다. 로그인 뿐만 아니라 로그아웃도 구현.
로그인 시 메인화면으로 들어오게 된다. 큰 배너에 API를 통한 최신 영화 DB가 출력된다.
해당 영화DB에 예고편이 있으면 play 버튼과 함께 유튜브 예고편을 재생시킬 수 있다.
배너 아래 카테고리 컴포넌트를 구현한 모습. 각 아이템마다 호버를 할 시 스케일업 되며 아이템에 맞는 비디오가 재생된다.
장르별 영화 추천 컴포넌트이다. swiper 라이브러리를 통해, 클릭 후 swipe 또는 양 옆의 버튼을 눌러 페이지를 이동시킬 수 있다. 각 영화를 클릭 시 영화에 대한 제목과 소개, 평점을 모달을 통해 출력한다. 상단의 X버튼 뿐만 아니라 앱처럼 모달 밖을 클릭했을때도 모달이 close될 수 있도록 하였다.
상단의 검색창에 검색어를 입력하면 API를 통해 해당 키워드와 맞는 영화를 리스트업 해준다.
📑 구현 기능
구글 연동 로그인
firebase 활용한 인증 처리
The Movie DataBase의 오픈 API를 통해 최신, 인기, 장르별 영화 섹션 슬라이드 구현
이미지를 클릭하면 Modal로 상세 정보 표시
검색 페이지
검색한 영화 상세 페이지 (이미지만 구현)
🛠 사용한 라이브러리
axios
styled-components
react-router-dom'
swiper
firebase
❗ 추가 구현 사항
모달 close 버튼 외에도 모달 밖을 클릭 시 모달이 닫히도록 하여 사용자 경험 향상
useDebounce 커스텀 훅을 만들고 입력 지연시켜 불필요한 api 호출 수, 렌더 줄여서 성능 향상
