🎥 Ennergivve

대한민국의 OTT 서비스, Wavve(웨이브)를 클론코딩하는 JS 프로젝트에요
영화 정보 공유사이트 TMDB API 의 Open API를 바탕으로 만들었어요

0. 팀원 소개

이예린	이인	서예은	임종현	안종현
리뷰	프로필	메인	검색	상세페이지

• 각자 맡은 역할을 다한 뒤에도, 다른 팀원의 작업을 도와주면서 완성했어요 😎
  
  

0-1. 프로젝트 진행 기간

• 2024.05.01 ~ 2024.05.08
  
  

0-2. 프로젝트 중에는..

• 활발하게 진행 상황을 공유하기 위해 zep과 slack을 사용했어요
• 매일 3시, 필요하다면 수시로 발의하여 솔직한 의견을 주고받았어요
• 회의는 간략하게 30분 이내로 마치도록 해요
• 전체적인 팀 프로젝트의 진행상황을 확인하기 위해 gitgub project를 사용했어요
• backlog를 남기고 수시로 진행상황을 팔로우업해요
  
  
• 코드리뷰하는 문화를 지향해요
• pr에 1명 이상의 approve가 있어야 develop에 merge를 할 수 있도록 설정했어요
  
  

1. 사용한 라이브러리

swiper @11

다양한 커스터마이징을 지원하는 가장 유명한 slider 라이브러리를 사용했어요

2. 사용한 외부 API

TMDB

영화 정보를 제공할 수 있도록 tmdb를 사용했어요

dicebear

프로필 아바타 이미지를 변경할 수 있도록 dicebear를 사용했어요

2. 대표기능

• 내가 찾고 싶은 영화를 검색할 수 있어요
  
• 엄선한 카테고리로 추천된 다양한 영화를 만날 수 있어요
  
• 영화의 상세 정보를 볼 수 있어요
  
• 밝게 보고 싶을 때, 테마 변경을 해 보세요
  
• 사이트에서 이용할 내 프로필을 변경할 수 있어요
  
• 프로필 이미지는 랜덤으로 가져와 재밌게 꾸밀 수 있어요
  
• 영화마다 감상평을 작성할 수 있어요
  
• 내가 작성한 감상평을 수정할 수 있어요
  
• 나의 비밀번호를 한번 더 체크하여, 안전하게 감상평을 지울 수 있어요
  
• 현재 영화 상세페이지를 공유할 수 있도록 공유버튼 기능을 제공해요
  
• 쿠키를 사용하여 사이트시 팝업을 띄우고, 7일간 다시보지 않는 기능을 제공해요
  
• 영화 상세페이지 접속시 트레일러 영상을 볼 수 있도록 링크를 제공해요
  
  

3. 상세설명

1. 쿠키를 사용한 팝업 기능

• 사이트 접속시 팝업을 띄워요
• 쿠키를 사용하여 7일간 다시보지 않는 기능을 제공해요
  
  

2. swiper를 사용한 메인 슬라이드 기능

• 인기 있는 영화 중 5개만 노출돼요
• swiper의 기본 제공 className인 swiper-slide-active를 이용하여 css transition 애니메이션을 적용했어요
  
  

2-1. 배열의 index를 사용하여 만든 랭킹 숫자 UI

• TOP 20 구좌는 render할 때 배열의 index값을 이용하여 숫자 이미지를 순차대로 적용하도록 구현했어요
  
  

3. css var를 사용한 테마모드 구현

• 사이트에서 주로 사용하는 컬러를 정리하고, 컬러팔레트를 정의했어요
• css var를 이용하여 최상단에서 선언하고, 테마가 바뀔 경우 body에 .light-mode class를 주어 변수를 재선언하도록 했어요
• 사이트를 벗어나거나, 끄는 경우에도 localstorage를 사용하여 유지할 수 있도록 했어요
  
  

3. css animation을 사용한 페이지 로더

• 상세페이지가 로딩중인 경우, 부자연스러운 화면으로 고객 경험을 해치지 않도록 css animation을 이용하여 loading dim을 구현했어요
  
  

3-1. 상세페이지

• seo 검색 최적화를 위해 탭 제목을 현재 영화 제목으로 바꿔주었어요
• 상세페이지 접속시 쿼리스트링에 id를 주어 새로고침을 해도 같은 페이지를 바라볼 수 있도록 했어요
• 트레일러 재생 클릭시 새 창으로 트레일러 영상을 볼 수 있도록 했어요
• 공유버튼을 제공하여 현재 영화 페이지 링크를 공유할 수 있도록 구현했어요
  
  

4. 검색 페이지

• 검색 페이지는 2개의 페이지로 나눠져요
• 검색 버튼을 누르면, 검색 메인 페이지로 이동하고 영화를 다양하게 탐색할 수 있도록 구좌를 제공해요
• 검색어를 입력하지 않으면 경고창이 떠요
• 검색결과가 없는 경우, 안내하는 UI를 보여줄 수 있게 했어요
• api 통신을 기타 이유로 실패한 경우에도, 안내할 수 있는 UI를 보여줄 수 있도록 했어요
  
  

5. 카테고리

• 각 메뉴에 접근하면, 영화를 큐레이션해주는 카테고리 메뉴를 만들었어요
  
  

6. dicebear http-api를 사용한 프로필 변경 기능

• localstorage를 사용하여 프로필을 저장해요
• 프로필 이미지를 랜덤으로 생성할 수 있게 했어요
• 생성 중에는 다시 클릭할 수 없어요
  
  

7. setInterval을 이용한 footer 공지 슬라이더 구현

• setInterval을 사용하여, swiper 라이브러리 없이 슬라이더를 구현했어요
  
  

8. js를 사용한 별점 부여 UI

• 프로필 등록을 하여야 리뷰를 남길 수 있도록 했어요, 등록하지 않은 경우 프로필 등록 페이지로 이동해요
• localstorage를 이용하여 리뷰를 저장할 수 있도록 했어요
• 영화마다 리뷰를 다르게 작성할 수 있어요
• 삭제는 본인임을 증명할 수 있어야 해요, 프로필 등록시 입력했던 비밀번호와 일치하면 삭제할 수 있어요