[JavaScript]🍿Movie Night(팀)

✨ 프로젝트 소개

---

영화 API를 이용하여 영화 데이터를 불러와 검색할 수 있으며 각 영화에 리뷰를 남길 수 있어요!

내일배움캠프에서 진행한 프로젝트로 팀원 6명이서 진행하였으며 이 프로젝트는 앞서 각 6명이 만든 개인프로젝트 중 한 사람의 프로젝트를 골라서 develop한 프로젝트예요. 저희 팀은 투표를 통해 제 개인 작업을 채택하여 진행하게 되었어요😀

• 사이트 바로가기: Movie Night
• 깃허브 바로가기: github 주소

🗓️ 프로젝트 기간

• 2024.05.01 ~ 2024.05.08

🔧 개발 언어

• HTML, JavaScript, CSS

👥 내가 맡은 기능

• 연관 검색어
• 검색 기능
• 리뷰 작성
• 정렬 기능
• 배너 슬라이드
• 로딩화면
  
  
  
  

💫 사용한 라이브러리

---

• Swiper@11

  
  

💫 사용한 API

---

• TMDB

⚙️ 대표 기능

---

✅ 원하는 영화를 검색할 수 있어요!

✅ 검색창에서 3글자 이상 입력 시 연관 검색어를 5개 보여줘요

✅ 평점 순, 이름 순으로 검색한 결과를 정렬해줘요

✅ 검색한 카드를 클릭 시 상세정보 화면을 볼 수 있어요

✅ 상세정보 화면에서 작성된 리뷰를 보고 영화에 대한 리뷰를 작성할 수 있어요

✅ 등록한 리뷰의 비밀번호가 맞을 시, 리뷰 수정/삭제 기능을 지원해요

✅ 홈화면에서 별점이 높은 영화 20개를 배너로 보여줘요

🖥️ 구현 화면

---

[🔽 랜딩 화면 슬라이드 배너]

• swiper를 사용한 슬라이드 배너를 만들었어요
  
  
  
  

[🔽 연관 검색어 기능]

• 3글자 이상 입력 시, 검색한 단어와 가장 유사한 5개의 연관검색어를 보여줘요

[🔽 이름, 평점순 정렬 기능]

• 이름순, 별점순으로 카드를 정렬할 수 있어요

  
  
  

[🔽 검색한 카드 클릭 시 상세정보 화면]

• 카드 클릭 시 상세 정보 화면에서 영화 정보와 리뷰를 볼 수 있어요

[🔽 리뷰 작성 기능]

• 작성자 이름, 코멘트, 별점을 등록할 수 있고 비밀 번호를 입력해야 최종 등록이 완료돼요
• 작성자 이름은 10글자를 넘을 수 없어요
• 코멘트는 10글자 이상 써야 입력이 돼요
• 비밀번호는 6글자 이상 입력해야 해요

[🔽 리뷰 수정 삭제]

• 등록할 때 입력한 비밀번호가 맞아야 수정할 수 있는 모달창이 떠요
• 비밀 번호가 틀리면 다시 입력하라는 alert창이 떠요
• 수정이 완료되면 수정 내용이 변경돼요
• 마찬가지로 삭제도 비번이 맞으면 삭제, 틀리면 alert 창이 떠요