Intro

영화 정보를 얻을 수 있고 다른 유저들과 소통할 수 있는 웹 사이트.

메인 페이지에서는 일일 박스오피스 영화 목록과 금일 개봉한 영화가 조회된다. 관심있는 영화는 마음 에 담아둘 수 있다. 게시판을 통해 다른 유저들과 소통이 가능한 커뮤니티 사이트이다.

목표 일정

2023/1/2~ 2023/1/8

기능

전체 기능

우선 구현하고 싶은 기능을 전부 나열해보자.

• 로그인 시에만 서비스 이용 가능
• 소셜 로그인 가능
• 일반 유저, 어드민 유저 구분
  • 어드민 유저는 Admin 메뉴 추가
• 영화 목록을 확인 가능 (최신 데이터 반영)
• 원하는 영화를 마음 에 담아둘 수 있음
• 영화 리스트에 필터링을 적용할 수 있음
  • 마음에 많이 담긴 순
  • 최신 개봉 순
  • 별점 높은 순
  • 리뷰 많은 순
• 영화 리뷰와 별점을 남길 수 있음
• 영화 검색 가능
• 채팅기능
• 프로필정보 변경 가능
• My 페이지에서
  • 내가 남긴 리뷰 확인 가능
  • 영화 관람 목표 세우고 달성률 확인 가능
  • 마음 에 담긴 영화 리스트 조회 가능
• 다크모드로 테마를 변경할 수 있다

흠.. 너무많다.
혼자서 단기간에 진행하기엔 방대한 양이므로 우선순위를 정하는게 중요할 것 같다.

필수 기능 (실제 구현 예정)

가장 우선적으로 개발해야 할 기본적인 기능들이다.

• 로그인
• 영화 검색
• 영화 상세 정보 조회
• 마음에 영화 추가
• 마음 리스트 조회
• 게시판 CRUD

필수기능 구현을 끝내고 여건이 된다면 이후에 전체 기능 리스트를 하나씩 완료해나갈 예정이다.

디자인

디자인 프로토타입을 미리 만들어두면 훨씬 편하긴 하지만 figma사용에 능숙하지 않아 세세한 디자인까지 하려면 시간이 오래걸리고 그러면 오히려 주객전도가 될 것 같아 우선은 레이아웃 정도만 잡아두었다.

잘 될지는 모르겠으나 요소 디자인 같은 경우는 최대한 원자 단위로 스타일링해서 재상용성을 높여보고자 한다.

아키텍처

폴더 구조

📦src
 ┣ 📂api // API 관련
 ┣ 📂components	// 컴포넌트
 ┃ ┣ 📂ui // 공통style을 위한 box컴포넌트나 html요소 컴포넌트 
 ┣ 📂pages // 라우팅 처리되는 페이지 컴포넌트
 ┣ 📂store // context, redux 등 state관리
 ┣ 📂util // 데이터 포맷 등 부가적인 기능을 수행하는 메소드

기술

프론트

Movyes는 리액트 프로젝트다.
create-react-app 프로젝트를 생성하고 필요에 맞게 커스텀 할것이다.

백엔드

직접 백엔드까지 구현해본다면 좋겠지만 나는 node.js를 사용할 줄 모르므로 Firebase API를 사용한다. firebase API 는 프로젝트에서 백엔드 API의 역할을 해주는데 그 중 auth와 realtime database 서비스를 이용하면 사용자 정보를 관리하거나 데이터베이스를 이용할 수 있다. 이번 프로젝트에서는 이 두가지 서비스를 적극적으로 활용할 것이다.

이번 프로젝트는 진행하는 동안의 과정을 모두 블로그에 써보려고 한다.

그럼 우선 로그인부터 시작!