1. 팀프로젝트 소개
나의 개인 과제를 업그레이드 시켜서 영화 검색 사이트를 만들기 !
2. 기획
- 공용으로 사용가능한 header나 footer등은 ejs를 사용
- 랜딩페이지
- 메인페이지
- 상세페이지
- 영화 순위페이지
- 영화 검색페이지
3. 구현 기능
- 회원가입과 로그인 기능
- 프로필 클릭 시 마이페이지 이동
- 돋보기 클릭 시 검색창 -> 입력하면 검색페이지로 이동
- 장르별 인기영화 순위
- 영화 더 보기 클릭 시 해당 순위페이지로 이동
- 메인페이지에서 포스터 클릭 시 상세페이지
- 상세페이지 내에서 영화예고편 삽입
- 상세페이지 내에서 별점, 댓글 기능 추가, 닉네임과 비밀번호 추가로 작성
비밀번호 입력 후 댓글 수정 및 삭제 가능 - 검색페이지로 내에서 검색 필터기능 추가
4. 사용한 기술
- API 설계
- GET / POST
- 테스트 : Thunder Client, Postman
- DB 연동 : MongoDB, Mongoose
- 서버 구축 : Vercel
- 배포 : Github
5. 프로젝트 진행 과정
일정 : 01 / 10 ~ 01/ 16
1) 먼저 어떤식으로 구현할 것인지 자세하게 기획 후 분담
2) 각자 github에 개인 작업하는 branch를 만들어 작업 push
3) 확인 후 dev라는 branch로 pull request
4) 다른 페이지로 이동 시 또는 필요한 부분은 서로 도와가면서 진행
6. 내가 맡아 진행한 부분
1) 메인 페이지에 가장 처음 보여지는 곳
사진과 같이 사이트에 들어가면 가장 먼저 보이는 곳이다.
총 5개의 영화들이 보여지는데
양 옆으로 이동할 수 있는 버튼과, 각각 버튼 별로 해당 영화가 있는 곳으로 바로 이동할 수 있다.
그리고 더보기 버튼을 클릭하면,
사진과 같이 해당 영화의 포스터와 제목, 오리지널 제목, 개봉 날짜, 평점, 줄거리가 나온다.
오른쪽 상단의 x 버튼을 클릭하면 다시 첫번째의 사진이 보여지게 된다.
이건 헤더부분의 달을 클릭하게 되면 해로 변하면서 다크모드가 풀리게 된다.
다크모드에 맞춰서 색들도 모두 변하게 설정해두었다.
상단의 카테고리 버튼을 클릭하게 되면 사진과 같이 다양한 장르들이 나와 해당 장르 클릭 시
해당 장르의 영화 순위별로 확인 가능하다.
메인 아래쪽은
사진에는 보이지는 않지만 실시간 인기영화 순위나 한국 영화 순위, 몇몇 장르별 영화 순위를 보여준다.
양 옆으로 이동가능한 버튼과, 해당 포스터에 마우스를 올리게 되면 해당 포스터가 커지고, 그림자도 주었다 ㅎㅎ
해당 영화 포스터 클릭 시
이런 식으로 모달창이 뜨고, 유튜브에서 해당 영화 제목 + 메인예고편으로 검색하여 나온 첫번째 동영상을 보여준다.
아래쪽은 다음과 같이 해당 영화의 정보와 별점, 댓글을 달 수 있는 기능이 있다.
그리고 메인페이지에서 영화 더 보기 버튼을 클릭하게 되면
랭킹 페이지로 이동하여 해당 장르의 영화를 더 보여준다.
그리고 랭킹페이지 아래쪽의 더 보기 버튼을 클릭하게 되면 영화를 20개씩 더 보여준다.
헤더 부분의 돋보기를 클릭하여 검색어를 입력하면
사진과 같이 어떤 검색어로 검색을 했는지, 그리고 해당 영화에 대해 보여준다.
내가 맡아 구현한 부분은 이 정도인것같다!
이렇게 사진과 함께 설명을 하고 보니 열심히 한것같아서 뿌듯하다 ㅎㅎ
모두 팀원분들과 협업을 해서 이만큼 할 수 있었다는 사실!!!
7. 프로젝트를 통해 느낀점
개인과제를 가지고 그걸 토대로 팀프로젝트로 이어지면서 느낀점은,
혼자할때와 같이할때는 엄연히 다르고 더 좋은 부분 또는 약간 불편하다고 생각하는 부분이 있다는 생각이 들었다.
그래도 혼자는 구현하지 못하거나, 새로운 아이디어나 어려운 부분이 생기면 서로 도와가면서 협엽하는 점이 너무너무 좋았다.
아쉬웠던 부분들도 있는데, 처음 기획했던 것만큼 더 많은 기능을 넣고 싶었지만 시간이 부족해서 너무 아쉽다.
팀원분들이 있어서 우리가 기획한 것들의 어느정도를 해낼 수 있었다고 생각한다.
모르는 부분이 있으면 각자 잘하는 부분에서 서로 도와가며 협력해서 완성한 결과물이라고 생각한다.
