diff --git a/README.md b/README.md index 2368ce6..5832106 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,104 @@ -# movie-site -영화 정보 공유사이트 [TMDB API](https://developer.themoviedb.org/reference/intro/getting-started) 의 Open API를 바탕으로 만든 JS 웹 사이트 입니다.

-
+# 🎥 Ennergivve +대한민국의 OTT 서비스, Wavve(웨이브)를 클론코딩하는 JS 프로젝트에요
+영화 정보 공유사이트 [TMDB API](https://developer.themoviedb.org/reference/intro/getting-started) 의 Open API를 바탕으로 만들었어요

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

+## 3. 상세설명 +### 1. 쿠키를 사용한 팝업 기능 +팝업
+- 사이트 접속시 팝업을 띄워요 +- 쿠키를 사용하여 7일간 다시보지 않는 기능을 제공해요

+### 2. swiper를 사용한 메인 슬라이드 기능 +![swiper-r](https://github.com/SpartaEnergizerTeam/movie-site/assets/40863185/64206bcc-22c6-4ebd-b5ec-1a1486f55ccd)
+- 인기 있는 영화 중 5개만 노출돼요 +- swiper의 기본 제공 className인 `swiper-slide-active`를 이용하여 css transition 애니메이션을 적용했어요

+### 2-1. 배열의 index를 사용하여 만든 랭킹 숫자 UI +![top20-r](https://github.com/SpartaEnergizerTeam/movie-site/assets/40863185/c912c6d2-e91f-4829-a8ef-f905bf14f65a)
+- TOP 20 구좌는 render할 때 배열의 `index`값을 이용하여 숫자 이미지를 순차대로 적용하도록 구현했어요

+### 3. css var를 사용한 테마모드 구현 +![다크테마-r](https://github.com/SpartaEnergizerTeam/movie-site/assets/40863185/54357511-261c-497f-b536-983b464f86f8)
+- 사이트에서 주로 사용하는 컬러를 정리하고, 컬러팔레트를 정의했어요 +- css var를 이용하여 최상단에서 선언하고, 테마가 바뀔 경우 body에 `.light-mode` class를 주어 변수를 재선언하도록 했어요 +- 사이트를 벗어나거나, 끄는 경우에도 `localstorage`를 사용하여 유지할 수 있도록 했어요

+### 3. css animation을 사용한 페이지 로더 +![로딩바-r](https://github.com/SpartaEnergizerTeam/movie-site/assets/40863185/fff9779a-5b43-40b0-a4e9-d7cdceade2e7) +- 상세페이지가 로딩중인 경우, 부자연스러운 화면으로 고객 경험을 해치지 않도록 css animation을 이용하여 loading dim을 구현했어요

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

+### 4. dicebear http-api를 사용한 프로필 변경 기능 +![프로필 변경-r](https://github.com/SpartaEnergizerTeam/movie-site/assets/40863185/01fd2f86-0848-4477-bb02-897ed8376999) +- `localstorage`를 사용하여 프로필을 저장해요 +- 프로필 이미지를 랜덤으로 생성할 수 있게 했어요 +- 생성 중에는 다시 클릭할 수 없어요

+### 5. setInterval을 이용한 footer 공지 슬라이더 구현 +![footer-r](https://github.com/SpartaEnergizerTeam/movie-site/assets/40863185/dfbb757c-4844-4b4f-bb5d-617e3224b89e) +- setInterval을 사용하여, swiper 라이브러리 없이 슬라이더를 구현했어요

+### 6. js를 사용한 별점 부여 UI +![review](https://github.com/SpartaEnergizerTeam/movie-site/assets/40863185/36953914-4df0-45db-bfeb-d383d0d26e9b) +- 프로필 등록을 하여야 리뷰를 남길 수 있도록 했어요, 등록하지 않은 경우 프로필 등록 페이지로 이동해요 +- `localstorage`를 이용하여 리뷰를 저장할 수 있도록 했어요 +- 영화마다 리뷰를 다르게 작성할 수 있어요 +- 삭제는 본인임을 증명할 수 있어야 해요, 프로필 등록시 입력했던 비밀번호와 일치하면 삭제할 수 있어요 -## 💬 To-Do -- [] 상세페이지 리뷰 댓글 기능 구현 \ No newline at end of file