harry21-kr/movieboobie

내일배움캠프 리액트 5기 B반 9조 팀 프로젝트

📢 프로젝트 소개

• 무비부비는 TMDB API를 통해 살면서 한번쯤은 봐야할 영화, 인기있는 영화, 지금 트렌드인 영화들을 카드 형식으로 추천해드려요!
• 무비부비에서 좋아하는 영화에 댓글을 남겨 영화에 대한 자신의 생각을 남길 수 있고, 좋아요도 누를 수 있어요!

🛠️ 주요 기능

메인 페이지

• 살면서 한번쯤은 봐야할 영화, 인기있는 영화, 지금 트렌드인 영화들을 카드 형식으로 추천해드려요.
• 카드를 누르면 선택한 영화에 대한 자세한 정보를 알 수 있어요.
• 궁금한 영화가 생긴다면 검색을 통해서 그 영화에 대한 정보도 알 수 있어요.

검색결과 페이지

• 검색한 영화에 대한 정보들을 보여드려요.
• 카드를 누르면 선택한 영화에 대한 자세한 정보를 알 수 있어요.
• 평점 순, 인기 순으로 정렬해서 볼 수도 있어요.

디테일 페이지

• 선택한 영화에 대한 자세한 정보들을 보여드려요.
  • 영화와 관련된 영상, 영화의 줄거리, 개봉 일자, 출연진, 시청 가능한 플랫폼까지 알려드려요.
  • 그리고 그 영화와 비슷한 영화까지 추천해드려요.
• 영화에 대한 리뷰를 남길수도 있고, 남긴 리뷰에 좋아요도 누를 수 있어요.

⚙️ 채택한 개발 기술

로컬 스토리지

• 로컬 스토리지를 통해 각 영화의 리뷰와 좋아요를 저장하고, UI에 표시합니다.

세션 스토리지

• 세션 스토리지를 통해 유저가 선택한 영화나 검색한 영화의 정보를 저장하고, 다른 페이지에서 활용할 수 있게끔 합니다.

🙋🏻‍♂️ 팀원 구성

박원빈	김정훈	천다연	강동석	정주신
@harry21-kr	@mangmuse	@Dayeon-Cheon	@show1486	@JOYmet33

💻 개발 환경

사용 언어

버전 및 이슈관리

• Github

협업 툴

• Slack
• Notion
• Zep

디자인 툴

• Figma

🎋 브랜치 전략

main branch

개발이 완료된 후 배포되는 브랜치입니다.

develop branch

개발 단계에서 git-flow의 master 역할을 하는 브랜치입니다.

feature branch

새로운 기능이나 레이아웃을 추가하는 브랜치입니다.

fix branch

개발되었던 기능이나 레이아웃을 수정하는 브랜치입니다.

refactor branch

개발되었던 코드를 리팩토링하는 브랜치입니다.

프로젝트 디렉토리 구조

┣ 📂 css
┃ ┣ 📂 detail
┃ ┃ ┣ 📜 actors.css
┃ ┃ ┣ 📜 detail.css
┃ ┃ ┣ 📜 password-modal.css
┃ ┃ ┣ 📜 providers.css
┃ ┃ ┗ 📜 similar-movie.css
┃ ┣ 📂 main
┃ ┃ ┣ 📜 main.css
┃ ┃ ┗ 📜 movie.css
┃ ┣ 📂 search
┃ ┃ ┗ 📜 search.css
┃ ┣ 📜 global.css
┃ ┗ 📜 reset.css
┣ 📂 img
┃ ┣ 📜 github.webp
┃ ┣ 📜 logo.png
┃ ┣ 📜 main-page-ad-banner.png
┃ ┣ 📜 sad_emogi.png
┃ ┗ 📜 search-page-ad-banner.png
┣ 📂 js
┃ ┣ 📂 config
┃ ┃ ┗ 📂 constants
┃ ┃   ┗ 📜 index.js
┃ ┣ 📂 detail
┃ ┃ ┣ 📂 display
┃ ┃ ┃ ┣ 📜 displayActors.js
┃ ┃ ┃ ┣ 📜 displayMovieDetail.js
┃ ┃ ┃ ┣ 📜 displayProviders.js
┃ ┃ ┃ ┣ 📜 displaySimilarMovies.js
┃ ┃ ┃ ┗ 📜 displayTrailer.js
┃ ┃ ┣ 📂 hook
┃ ┃ ┃ ┗ 📜 useMovieDetailData.js
┃ ┃ ┣ 📂 review
┃ ┃ ┃ ┣ 📜 checkPassword.js
┃ ┃ ┃ ┣ 📜 displayAllReviews.js
┃ ┃ ┃ ┣ 📜 domElements.js
┃ ┃ ┃ ┣ 📜 handleAdd.js
┃ ┃ ┃ ┣ 📜 handleDelete.js
┃ ┃ ┃ ┣ 📜 handleEdit.js
┃ ┃ ┃ ┣ 📜 initReviews.js
┃ ┃ ┃ ┗ 📜 reviewCount.js
┃ ┃ ┣ 📜 icon.js
┃ ┃ ┗ 📜 index.js
┃ ┣ 📂 main
┃ ┃ ┣ 📂 components
┃ ┃ ┃ ┗ 📜 MoviesInfo.js
┃ ┃ ┣ 📂 hook
┃ ┃ ┃ ┗ 📜 useMovieData.js
┃ ┃ ┣ 📜 addMovieAnimation.js
┃ ┃ ┗ 📜 index.js
┃ ┣ 📂 search
┃ ┃ ┣ 📂 components
┃ ┃ ┃ ┗ 📜 NoSearchResult.js
┃ ┃ ┣ 📂 hook
┃ ┃ ┃ ┗ 📜 useMovieSearchData.js
┃ ┃ ┣ 📜 addSearchEvent.js
┃ ┃ ┗ 📜 index.js
┃ ┗ 📂 utils
┃   ┗ 📜 index.js
┣ 📜.DS_Store
┣ 📜 .gitignore
┣ 📜 detail.html
┣ 📜 index.html
┣ 📜 README.md
┗ 📜 search.html