영화 리뷰 작성하는 부분을 로컬 스토리지 기반/파이어베이스 기반 두 가지 방법으로 구현하였다.

아래 세 파일의 경로를 모두 동일하게 바꿔줘야 한다.

• displayMovies.js
• moviesSort.js
• searchMovies.js

로컬 스토리지 기반: detailMovie

<a href="./detailMovie.html?id=${movie.id}" class="card">

파이어베이스 기반: detailMovie2 (뒤에 숫자 '2'가 붙음)

<a href="./detailMovie2.html?id=${movie.id}" class="card">

헤더와 푸터는 모든 페이지에 똑같이 둔다.

헤더

• 웹사이트 제목, 검색창, 검색 버튼, 정렬 옵션
• 다른 페이지에서 웹사이트 제목을 클릭하면, 메인 페이지로 이동하도록 구현한다.
• 다른 페이지에서 검색창에 검색어를 입력하면, 영화 검색 페이지로 이동하도록 구현한다.

푸터

• 팀명, 팀원명 등

영화 컨테이너 안의 영화 박스에 불러온 영화 정보를 붙인다.

기존 영화 카드에 있던 영화 줄거리(overview) 내용을 삭제한다.

영화 카드에 들어갈 내용: 포스터(poster_path), 제목(title), 평점(vote_average)

영화 카드를 클릭하면, 영화 상세 페이지로 이동하도록 구현한다.

영화 상세 정보 컨테이너

• 포스터(poster_path), 제목(title), 평점(vote_average), 개봉일(release_date), 인기(popularity), 줄거리(overview) 등

영화 리뷰 작성 컨테이너

• 리뷰 작성 박스: 리뷰를 작성하는 부분

  • 작성자 입력란
  • 비밀번호 입력란
  • 평점 선택란
  • 리뷰 작성란
  • 리뷰 작성 버튼

• 리뷰 목록 박스: 작성된 리뷰가 보이는 부분

  • 작성자, 작성 날짜, 평점, 리뷰
  • 수정/수정 완료 버튼, 삭제 버튼
  • 리뷰 수정 및 삭제 시 비밀번호로 작성자가 맞는지 확인하기

검색 내용 위에 "(검색어)로 검색한 내용입니다." 라는 문구 띄우기

검색 내용이 없는 경우, "검색 내용이 없습니다." 라는 문구 띄우기

검색 내용이 있는 경우, 관련된 영화 박스들 띄우기