MOVIE LOG

영화를 좋아하는 팀원들과 함께, 영화에 대한 흥미를 바탕으로 제작한 영화 리뷰 및 정보 제공 웹사이트입니다. 주요 기능으로는 영화의 별점, 줄거리, 예고편 링크 등의 정보를 제공하며, 로그인 후 리뷰와 별점, 태그를 포함해 사용자가 영화 평가에 참여할 수 있습니다.

개요

프로젝트 기간

2023/06 ~ 2023/07

역할

기획, FE(영화 상세 페이지, 검색 페이지), CI/CD, Deployment

팀 / 솔로

팀(FE & BE)

기술 스택

React, TypeScript, Tailwind, Redux Toolkit, Github Actions, AWS S3

영화 상세 페이지

디테일한 영화 정보 제공

백엔드 데이터베이스에 저장된 모든 영화의 영화 ID, 영화 제목, 영화 줄거리, 장르, 런타임, 그리고 영화 포스터 등과 같은 데이터를 이용해 유저에게 영화 관련 다양한 정보를 제공할 수 있도록 했습니다.
다양한 컴포넌트에서 사용되는 영화 데이터를 props drilling을 피하기 위해 Redux Toolkit을 활용해 전역 상태로 관리했습니다.

자유로운 영화 평가를 위한 리뷰 작성 기능 구현

유저는 로그인 후 0.5점 단위의 세밀한 별점 평가와, 음악, 힐링, 킬링타임 등 흥미로운 태그를 선택하여 리뷰를 작성, 수정, 삭제, 열람할 수 있습니다. 해당 별점과 태그는 웹사이트 전반에 걸쳐 영화의 평점 계산과 태그 필터링에 사용될 수 있도록 설계했습니다.

페이지네이션 기능 구현

효과적인 리뷰 열람에 도움이 되는, 한 페이지당 5개의 리뷰를 보여주는 페이지네이션 기능을 구현했습니다.

쿼리 파라미터를 이용한 영화 검색 기능 구현

사용자 테스트에서 영화 탐색이 제한적이라는 피드백을 반영하여, 유저가 검색한 내용과 가장 관련있는 20개의 영화를 보여주는 검색 기능을 구현했습니다. 유저는 영화 제목, 배우 이름, 감독 이름으로도 검색을 수행할 수 있습니다.
사용자가 입력한 검색어를 쿼리 파라미터로 구성해 서버로 전송하고, 해당 키워드와 가장 관련성 높은 20개의 영화 데이터를 받아와 보여주는 검색 페이지를 구현했습니다.

타입스크립트

타입스크립트를 활용하여 백엔드 서버로부터 수신한 영화 데이터의 타입을 미리 명시함으로써, 런타임 이전에 컴파일 시점에서 예상치 못한 데이터 유형의 문제를 사전에 방지할 수 있도록 하였습니다.

CI/CD & Deployment

프로젝트 회고