TeamProject2.movieDetail

두번째 팀 프로젝트의 주제는 API를 활용한 영화정보를 가져와서 메인페이지에서 영화목록을 보여주고

 

상세페이지에서 각각의 영화정보 페이지와 Review의 CRUD를 구현하는 것이다.

 

라이브러리나 서버와 데이터베이스를 사용하지 않고, 바닐라 자바스크립트로 구현하고, 로컬스토리지를 이용한다.

 

내가 맡은 역할은 영화를 클릭했을 때 이동되는 detail페이지의 구현이었다.

 

단순히 API로 받아온 정보로 소개만 하는건 너무 평범하다고 느꼈고, 추가적인 기능을 고민해서

 

트레일러 영상을 받아와 보여주고 좋아요 기능을 통해 메인페이지에서 좋아요를 클릭한 리스트를 구현했다.

 

https://github.com/Rimsunwoo/movie_review

 

---

UI

 

Main Page

 

Movie Detail Page

 

Detail Page Trailer

 

Detail Page Review CRUD

---

기능구현 및 설명

 

1.  main page - detail page 영화 정보 UI 구현

 

먼저 매인 페이지에서 각 영화 아이템을 클릭했을 때 그 영화의 ID를 url에 포함시켜 이동시켰고

 

디테일 페이지에서 searchParams를 통해  ID를 받아와 Fecch요청을 통해 다시 영화 정보를 불러와 element를 추가헀다.

 

 

 

 

2. 트레일러 영상 구현

 

TMDB API에서 영화 정보가 담겨있는 url에는 비디오 정보가 포함돼 있지 않았다.

 

그래서 기존 url과 다른 url로 fetch요청을 보내 비디오 정보를 불러왔다.

 

그 비디오 정보 중 type이 tariler인 것을 find 메서드로 찾아 해당 key값을 다시 url에 담아 iframe 태그를 이용해 유튜브에서 영상을 불러왔다.

 

 

 

3. 좋아요 기능 구현

 

 

deiail 페이지에서 하트를 클릭할 시  localStorage에 추가하고 메인 페이지에서 불러와 리스트로 보여주려고 했다.

 

하지만 리뷰파트의 팀원들이 localStorage로 영화리뷰 기능을 구현하며 하나의 데이터에 객체나 배열로 넣은 게 아닌 리뷰마다 하나의 데이터로 저장시켰다. 그리고 filter와 map을 사용해 해당 데이터들을 불러왔다.

 

그래서 localStorage에 다른 데이터를 추가하면 데이터를 불러오는 과정에서 오류가 발생했다.

 

고민하던 중 sessionStorage를 사용하기로 했다.

 

클릭 이벤트가 발생하면 세션스토리지에서 데이터를 불러오고

 

해당 영화의 아이디 존재 여부 조건문으로 확인했다.

 

이미 존재한다면 splice를 통해 해당 영화를 데이터에서 제거하고 존재하지 않으면 추가한다.

 

아이콘에 스타일이 담긴 class를 추가하고 제거함으로서 추가된 상태인지 UI로 표현했다.

 

그 후에 세션스토리지를 변경된 배열로 업데이트 해준다.