프로젝트 개요

---

과제 개요

1. 개인과제에서 작성한 [내배캠 인기영화 콜렉션]을 발전시키는 팀 프로젝트
2. 팀원들의 프로젝트 N개 중 1개를 대표로 선택, 팀 프로젝트로 발전

필수요구사항

• TMDB 오픈 API 이용
• 영화정보 상세 페이지 구현
  • 기존 영화정보 카드 리스트에서 특정 item을 선택할 시, 상세 페이지로 이동하도록 구현합니다.
  • 상세 페이지에서 메인 페이지(홈)로 이동하는 UI도 함께 구성합니다.
• 상세 페이지 영화 리뷰 작성 기능 구현
  • 상세페이지에서 특정 영화에 대해 의견을 작성할 수 있는 UI를 구현합니다.
  • 작성자, 리뷰, 확인비밀번호를 입력하도록 구현합니다.
  • 작성한 정보는 브라우저의 localStorage에 적재하도록 합니다.
• github PR(=Pull Request) 사용한 협업
• UX를 고려한 validation check

✏️ 6명의 팀원들 중 다수결로 나의 프로젝트를 가지고 디벨롭 하기로 하였다! 그런다음 회의 끝에 우리는 기능 구현 요구 사항에 맞춰 각 팀원 6명의 와이어 프레임을 만들고 의견을 종합하기로 했다!

와이어 프레임 제작

각 팀원 분들이 기능에 맞게 와이어 프레임을 제작하셨다. 좋은 의견과 아이디어들이 많아 추합한 와이어 프레임은 다음과 같다.

[⬆️랜딩 화면]

[⬆️검색 시 연관검색어]

[⬆️카드 검색 시]

[⬆️카드 클릭 시 이동한 세부정보 화면]

파트 분배

part 1 (전체적인 틀 개발)

• 카드 클릭 시 페이지 이동
• detail 안에 전체적인 UI 구현 (html, css)

part 2 (영화 세부 정보 및 아이콘 디자인)

• 카드 정보 불러오고 세부 ui 정하기(영화 제목, 감독, 배우, 개봉년도, 개봉일, 평점 등등 )
• 로고(초승달), 별점 아이콘 디자인

part 3 (리뷰 create 부분)

• 별에 마우스 호버 시 이 얼마나 채워지는지 보이게
• 호버 한 부분만큼 클릭 시 아이콘 색 채워짐
• 작성자, 별점, 리뷰 내용 작성 후 버튼 등록 시 패쓰워드 modal창
  • 예외 처리 해 주셔야 됨(빈칸있을 시 빈칸 작성 해달라는 alert창)
  • input에 글자 수 제한. (닉네임이 1000자가 되면 곤란..)
• localStorage.setItem
  • 작성한 영화 id, 작성자, 별점, 리뷰, password 저장 > key값을 뭐로 하실지 정하셔야 됨(수정, 삭제할 때 겹치지 않는 key값 필요)

part 4 (리뷰 read)

• 해당 영화에 대한 리뷰만 불러오기(ui 만들기)
• Review 옆에 몇 개의 리뷰가 있는 지 숫자로 표시
• 리뷰가 없을 시 ‘리뷰가 없습니다 text’
• 리뷰 보이는 것을 3개로 제한하고 리뷰 더보기 버튼

part 5(리뷰 update, delete)

• password 확인하는 모달 창 UI 구현
• 수정/삭제 버튼 클릭 시 password를 입력 창 모달뜨게
• password가 맞다면
  • localStorage.remove로 삭제
  • 수정 : text가 input창으로 변하고 이 전 내용이 적혀져있게.
• password가 틀리다면
  • 비밀번호가 일치하지 않습니다 alert창
• 내용을 수정하고 확인 버튼 클릭 시 수정된 내용 업데이트

part6(랜딩페이지 영화 배너)

• 전체 영화를 슬라이드 형식으로 n초마다 넘어가게 애니메이션 넣기
• 버튼 클릭시 하나 하나 넘어가게 하기 or 클릭 후 옆으로 넘기면 슬라이드 되게하기