• 팀 명 : 소문난 칠공주
• 프로젝트 명 : Cinema Princess
• 프로젝트 기간 : 2023.06.28 - 2023.07.24
• 팀원 : 어수현, 이정원, 김형일, 안형준, 김종현, 김휴, 이하루
• 배포 링크 : http://cinema-princess-s3-bucket.s3-website.ap-northeast-2.amazonaws.com/

🌟 팀 소개

이정원	김형일	김종현	어수현	김휴	안형준	이하루
FE 부팀장	FE	FE	BE 팀장	BE	BE	BE

담당 파트

FE

이정원

• 영화 상세 페이지

  • 영화 정보(평균 평점, 영화 커버, 상세 정보, 소개 영상, OTT제공 정보, 비슷한 영화 추천), 리뷰 목록 표시
  • 평점 및 리뷰 CRUD, 리뷰 좋아요 등록 및 해제, 와치리스트(찜) 등록 및 해제
  • 로그인 한 사용자와 로그인 안한 사용자 api요청과 버튼 조작 로직 분리

• 마이 페이지

  • 프로필 이미지(5MB이하) 업로드 및 미리보기
  • 회원정보 및 비밀번호 수정 Form 분리하여 렌더링 최적화
  • 내가 남긴 리뷰 모아보기

• 통계 페이지

  • 사용자가 선택한 연도의 연간 개봉 장르 통계 데이터 api 요청 및 차트 생성

김형일

• 메인페이지

  • 박스오피스 순위 , 탭(신작,인기,개봉예정), 올해 추천작 구현
  • react-slick 라이브러리를 활용하여 슬라이더 구현
  • 탭 기능 구현

• 찜한 영화 페이지

  • 무한스크롤 기능 구현
  • 필터기능 구현
  • 북마크 아이콘 클릭시 해당 영화 삭제기능 구현

김종현

• 회원 가입 및 로그인

  • 회원가입 및 로그인 모달창 구현
  • 유효성검사 구현

• 검색 페이지

  • 헤더 상단 검색창을 통한 영화 검색기능 구현

BE

어수현

• 멤버쉽

  • 멤버쉽 CRUD 구현
  • 회원가입, 회원정보 수정 시 중복 검사 및 유효성 검증 구현
  • 프로필 이미지 업로드 구현

• 영화 찜 목록

  • 영화 찜 목록 CRUD 구현

• Spring Security

  • JWT 토큰 인증 기반 로그인 구현
  • OAuth 2.0 소셜 로그인 구현 (Google, Kakao, Naver)
  • 회원별 역할 및 접근 권한 설정 구현

• CI/CD

  • CI/CD 환경 구축 및 백엔드 서버 배포 (Github Actions, AWS S3, AWS CodeDeploy, AWS EC2)
  • AWS RDS 구축

김휴

• 리뷰 CRUD
  • 영화에 대한 리뷰, 별점 작성
  • 리뷰에 대한 좋아요 추가, 취소
• 메인페이지
  • 박스오피스 순위 조회

안형준

• tmdb api 사용

  • 영화와 관련된 정보들을 외부 api인 tmdb api를 사용하여 DB에 저장 및 조회

• 메인페이지

  • 인기작, 신작, 개봉예정작 목록 조회
  • 올해의 추천 영화 목록 조회

• 영화 상세페이지

  • tmdb api를 통해 영화 정보(평균 평점, 영화 포스터, 상세 정보, 예고편, OTT제공 정보, 개요 등) 조회
  • 장르 리스트를 통해 조회하는 영화와 똑같은 장르의 다른 영화들을 추천

• 장르 리스트, ott 목록 tmdb api에서 가져와서 DB에 저장

• 약 8.5만 개의 영화 목록을 DB에 저장

  • jdbc의 batchupdate와 future api 를 사용하여 저장 속도 향상

이하루

• 통계페이지
  • 연도별 개봉장르 통계
  • 유저 유형별 선호장르 통계
• 검색페이지
  • 영화 제목 검색

⚙️ Tools

Github	Discord	Notion

🖥 Front-end

Html	CSS	JavaScript	React	TypeScript	redux-toolkit	styled-components

🔒 Back-end

Java	MySQL	Tomcat	AWS	Spring Boot	Spring Boot JPA	JWT	Spring Security

Figma 화면 정의

파일 구조

client

src
 ┣ api # api 요청하는 함수 폴더
 ┃ ┣ auth.ts
 ┃ ┣ getMonthly.ts
 ┃ ┣ getMovierank.ts
 ┃ ┣ getNew.ts
 ┃ ┣ getPopular.ts
 ┃ ┣ getSearch.ts
 ┃ ┣ getUpcoming.ts
 ┃ ┣ getWatchlist.ts
 ┃ ┣ movie.ts
 ┃ ┣ statistics.ts
 ┃ ┗ userInfo.ts
 ┣ assets # 이미지 파일 폴더
 ┃ ┣ closeButton.svg
 ┃ ┣ default_poster.png
 ┃ ┣ elemental_cover.png
 ┃ ┣ elemental_poster.png
 ┃ ┣ errorIcon.svg
 ┃ ┣ halfStarIcon.png
 ┃ ┣ profile.png
 ┃ ┣ starIcon.png
 ┃ ┗ thumb-up.svg
 ┣ components # 컴포넌트 파일 폴더
 ┃ ┣ account
 ┃ ┃ ┣ Googlelogin.tsx
 ┃ ┃ ┣ Kakaologin.tsx
 ┃ ┃ ┣ Naverlogin.tsx
 ┃ ┃ ┣ OauthHandler.tsx
 ┃ ┃ ┣ SignupForm1.tsx
 ┃ ┃ ┗ loginForm.tsx
 ┃ ┣ main
 ┃ ┃ ┣ monthmovie
 ┃ ┃ ┃ ┣ Monthcard.tsx
 ┃ ┃ ┃ ┣ Monthmovie.tsx
 ┃ ┃ ┃ ┗ Monthslider.tsx
 ┃ ┃ ┣ movierank
 ┃ ┃ ┃ ┣ Card.tsx
 ┃ ┃ ┃ ┣ Slider.tsx
 ┃ ┃ ┃ ┗ Topmovie.tsx
 ┃ ┃ ┗ tabmovie
 ┃ ┃ ┃ ┣ Botmovietab.tsx
 ┃ ┃ ┃ ┣ Tab.tsx
 ┃ ┃ ┃ ┣ TabCard.tsx
 ┃ ┃ ┃ ┗ Tabslider.tsx
 ┃ ┣ movie
 ┃ ┃ ┣ MovieInfo.tsx
 ┃ ┃ ┣ MyReview.tsx
 ┃ ┃ ┣ Rating.tsx
 ┃ ┃ ┗ ReviewRegisterModal.tsx
 ┃ ┣ mypage
 ┃ ┃ ┣ PasswordEditForm.tsx
 ┃ ┃ ┣ ProfileUploadModal.tsx
 ┃ ┃ ┗ UserInfoEditModal.tsx
 ┃ ┣ share
 ┃ ┃ ┣ ConfirmModal.tsx
 ┃ ┃ ┣ EmptyMessage.tsx
 ┃ ┃ ┣ Footer.tsx
 ┃ ┃ ┣ Header.tsx
 ┃ ┃ ┣ Pagination.tsx
 ┃ ┃ ┣ ReviewList.tsx
 ┃ ┃ ┣ ReviewListitem.tsx
 ┃ ┃ ┣ ReviewStars.tsx
 ┃ ┃ ┣ SearchCard.tsx
 ┃ ┃ ┗ Searchbar.tsx
 ┃ ┗ watch
 ┃ ┃ ┣ WatchBookMark.tsx
 ┃ ┃ ┗ WatchDrop.tsx
 ┣ pages # 라우터 폴더
 ┃ ┣ Error.tsx
 ┃ ┣ Login.tsx
 ┃ ┣ Main.tsx
 ┃ ┣ Movie.tsx
 ┃ ┣ Mypage.tsx
 ┃ ┣ Root.tsx
 ┃ ┣ Search.tsx
 ┃ ┣ Signup.tsx
 ┃ ┣ Statistics.tsx
 ┃ ┣ Statisticsusers.tsx
 ┃ ┣ Watchlist.tsx
 ┃ ┗ YearlyGenres.tsx
 ┣ redux # 상태 관리 폴더
 ┃ ┣ reducers
 ┃ ┃ ┣ authSlice.ts
 ┃ ┃ ┣ isLogin.ts
 ┃ ┃ ┣ modal.ts
 ┃ ┃ ┣ movierank.ts
 ┃ ┃ ┣ searchSlice.ts
 ┃ ┃ ┣ singupSlice.ts
 ┃ ┃ ┣ tabmovieSlice.ts
 ┃ ┃ ┣ watchlistSlice.ts
 ┃ ┃ ┗ yearlySlice.ts
 ┃ ┗ store.ts
 ┣ styles # 스타일 파일 폴더
 ┃ ┣ components
 ┃ ┃ ┣ account
 ┃ ┃ ┃ ┣ LoginForm.styled.ts
 ┃ ┃ ┃ ┗ SignupForm1.styled.ts
 ┃ ┃ ┣ main
 ┃ ┃ ┃ ┣ monthmovie
 ┃ ┃ ┃ ┃ ┣ Monthcard.ts
 ┃ ┃ ┃ ┃ ┗ Monthmovie.ts
 ┃ ┃ ┃ ┣ rankmovie
 ┃ ┃ ┃ ┃ ┣ Card.styled.ts
 ┃ ┃ ┃ ┃ ┣ Slider.styled.ts
 ┃ ┃ ┃ ┃ ┗ Topmovie.styled.ts
 ┃ ┃ ┃ ┗ tabmovie
 ┃ ┃ ┃ ┃ ┣ Botmovie.styled.ts
 ┃ ┃ ┃ ┃ ┣ Tab.styled.ts
 ┃ ┃ ┃ ┃ ┗ Tabcard.styled.ts
 ┃ ┃ ┣ movie
 ┃ ┃ ┃ ┣ MovieInfo.styled.ts
 ┃ ┃ ┃ ┣ MyReview.styled.ts
 ┃ ┃ ┃ ┣ Rating.styled.ts
 ┃ ┃ ┃ ┗ ReviewRegisterModal.styled.ts
 ┃ ┃ ┣ mypage
 ┃ ┃ ┃ ┣ PasswordEditForm.styled.ts
 ┃ ┃ ┃ ┣ ProfileUploadModal.styled.ts
 ┃ ┃ ┃ ┗ UserInfoEditModal.styled.ts
 ┃ ┃ ┣ share
 ┃ ┃ ┃ ┣ ConfirmModal.styled.ts
 ┃ ┃ ┃ ┣ Empty.styled.ts
 ┃ ┃ ┃ ┣ Footer.styled.ts
 ┃ ┃ ┃ ┣ Header.styled.ts
 ┃ ┃ ┃ ┣ Pagination.styled.ts
 ┃ ┃ ┃ ┣ ReviewList.styled.ts
 ┃ ┃ ┃ ┣ ReviewListitem.styled.ts
 ┃ ┃ ┃ ┣ ReviewStars.styled.ts
 ┃ ┃ ┃ ┗ Searchbar.styled.ts
 ┃ ┃ ┗ watchlist
 ┃ ┃ ┃ ┣ WatchBookMark.styled.ts
 ┃ ┃ ┃ ┗ WatchDrop.styled.ts
 ┃ ┣ pages
 ┃ ┃ ┣ Error.styled.ts
 ┃ ┃ ┣ Login.styled.ts
 ┃ ┃ ┣ Main.styled.ts
 ┃ ┃ ┣ Movie.styled.ts
 ┃ ┃ ┣ Mypage.styled.ts
 ┃ ┃ ┣ Root.styled.ts
 ┃ ┃ ┣ Signup.styled.ts
 ┃ ┃ ┣ Statistics.styled.ts
 ┃ ┃ ┣ Statisticsusers.styled.ts
 ┃ ┃ ┗ YearlyGenres.styled.ts
 ┃ ┣ GlobalStyle.tsx
 ┃ ┗ index.css
 ┣ types # 타입 지정 폴더
 ┃ ┣ movie.ts
 ┃ ┗ user.ts
 ┣ util # 유틸 함수 폴더
 ┃ ┗ func.ts
 ┣ App.tsx
 ┣ index.tsx
 ┗ react-app-env.d.ts

🌟 Pages & Features

메인 페이지(/)

• 메인페이지 박스오피스 순위, 탭(신작,인기,개봉예정), 올해 추천작으로 나뉩니다.
• 박스오피스 순위 슬라이더 버튼을 클릭을 하여 1~10위까지의 영화 랭킹을 볼 수 있습니다.
• 탭(신작, 인기, 개봉예정)도 마찬가지로 버튼을 클릭하여 영화를 볼 수 있고 클릭을 하면 해당 영화의 상세페이지로 이동합니다.
• 올해 추천작은 자동으로 넘어가지며 클릭했을때 상세페이지로 넘어갑니다.
• 영화를 클릭하면 해당 영화의 상세페이지로 이동합니다.

회원가입 및 로그인

• 닉네임, 이메일, 비밀번호로 구성된 1페이지와 나이, 성별, 선호장르로 구성된 2페이지를 가진 회원가입 모달창입니다.
• 회원가입에 사용한 이메일과 비밀번호로 구성된 로그인 모달창입니다.
• 각각의 유효성 검사를 가지고 있으며 유효성 검사에 통과하지 못할 경우 alert메세지를 표시합니다.
• 유효성 검사에 통과할 경우 로그인이 성공하며 모달창이 닫히고 헤더의 버튼 구성이 바뀝니다.

영화 상세 페이지(/movie/{movieId})

• 메인 페이지와 검색 페이지, 마이 페이지에서 영화를 클릭하면 영화 상세페이지에 진입합니다.
• 영화 정보, 유저들이 남긴 평균 평점과 리뷰, 비슷한 영화 추천 목록 등의 정보를 얻을 수 있습니다.
• 평점, 리뷰를 조회, 생성, 수정, 삭제할 수 있고, 와치리스트에 생성/삭제할 수 있습니다.
• 로그인을 하지 않고 버튼을 조작하면 로그인 모달창이 나타납니다.

와치리스트 페이지(/watchlist)

• 상세페이지에서 북마크 아이콘을 클릭을 하면 찜한영화 리스트에 담겨집니다.
• 찜한 영화 페이지에서 북마크 아이콘을 클릭을 하면 찜한영화 페이지에서 삭제가 됩니다.
• 찜한 영화 페이지에서 영화는 한페이지에 8개씩 보여지며 무한스크롤을 구현하여 밑으로 스크롤이 닿았을때 추가로 8개의 영화들이 불러와집니다.
• 담은순, 신작순, 이름순으로 필터 기능이 들어가있으며 영화를 클릭하면 상세페이지로 이동합니다.

검색 페이지(/search)

• 헤더 상단 검색바를 통해, 검색어에 해당하는 단어를 제목으로 가지고 있는 영화 목록을 불러온 페이지입니다.

마이 페이지(/mypage)

• 나의 회원 정보를 조회하고 수정, 프로필이미지 조회 및 수정, 회원 탈퇴를 할 수 있습니다.
• 내가 영화에 남긴 리뷰들을 모아 볼 수 있습니다. 클릭하면 해당 영화 상세 페이지로 이동합니다.
• 프로필 이미지로 5MB이하의 개인 파일을 업로드 할 수 있습니다.
• 회원정보에서 닉네임, 나이, 좋아하는 장르를 수정하고, 비밀번호를 변경할 수 있습니다.
• 회원 탈퇴시 체크박스에 체크를 해야 하고, 완료되면 로그아웃과 동시에 계정이 삭제됩니다.

통계 페이지(/statistics)

• 연도별 개봉한 영화의 장르 분포를 알 수 있습니다.
• 원하는 연도를 선택하면 해당 연도에 대한 데이터를 볼 수 있습니다.

Doc

사용자 요구사항 정의서
테이블 명세서
ERD
화면정의서
API 명세서
서비스 메뉴얼