js-movie-site

영화 정보 공유사이트 TMDB API 의 Open API를 바탕으로 만든 JS 웹 사이트 입니다.

1. 사용한 라이브러리

swiper @11
lottie @latest
gsap @3.12.5

2. 대표기능

• 급상승 트렌드 영화 탐색
  
• 상영중인 영화 탐색
  
• 영화 검색
  
• 영화 상세 페이지
  

3. 상세기능

1. 커스텀 커서

🔗 코드 바로가기

• 급상승 영화를 노출합니다.
• 영화 이미지에 마우스를 hover하면, 현재 커서에서 가시성을 키우기 위해 scale이 되는 효과를 주었습니다.
• 첫 접속시 브라우저 너비가 1200이 되지 않는다면, customCursor 함수를 실행시키지 않습니다.
• swiper 사용으로 다양한 환경에서 동일하게 제공될 수 있도록 swipe 효과를 주었습니다.

2. 영화 데이터 랜덤 정렬

🔗 코드 바로가기

• 다양한 영화를 탐색할 수 있도록, 영화 데이터를 랜덤으로 정렬될 수 있도록 구현하였습니다.

3. 상세페이지 애니메이션 적용

🔗 코드 바로가기

• 영화 컨텐츠에 몰입할 수 있도록 gsap.js animation 라이브러리를 사용하여 비주얼 애니메이션 요소를 추가하였습니다.
• 제공하는 메서드인 timeline()을 이용하여 가변적인 제목이라도, 제목 애니메이션이 끝날 때까지 summary text 애니메이션이 대기하도록 하였습니다.

4. 검색 결과가 없는 경우 UI 제공

🔗 코드 바로가기

• 검색 결과가 없음을 나타내는 UI를 추가하였습니다.

5. 상세페이지 fetch 에러시, not-found 에러페이지 제공

🔗 코드 바로가기

• api 에러를 발생 했을 때의 화면을 제공할 수 있도록 하였습니다.
• lottie js 라이브러리를 사용하여, 애니메이션 화면을 제공하였습니다.
• fetch error를 catch 하는 경우, 현재 화면 element에 not-found.html을 append 하도록 구성하였습니다.

6. 상세페이지 loading page 적용

🔗 코드 바로가기

• 데이터 fetch 중에도 부드러운 화면 전환 경험을 제공할 수 있도록, css animation을 이용하여 loading page를 적용하였습니다.

💬 To-Do

• 검색 상세페이지 구현
• 메인 하단 구좌 추가
• grid 사용하기
• list가 비었을 때 UI
• 통신에 실패했을때 UI
• 랜덤 정렬 기능 추가
• UI 변경 모드 추가
• 모바일 Hover UI 제거
• 썸네일 이미지 사이즈 통일
• includeHtml 리팩토링
• customCursor 리팩토링
• movie-detail에 gsap(js animate) 넣기
• lottie 적용하기
• DocumentFragment 적용
• 상세페이지 로딩화면 추가

💬 Author

yerin lee