🌟 영화제작사이트 만들기

Moview

영화 검색 사이트(TMDB OPEN API 활용)

이번 프로젝트는 영화 검색 사이트의 기본 기능을 넘어, 사용자가 영화를 오래 기억하고 개인화된 경험을 제공할 수 있도록 다양한 기능을 추가한 커뮤니티 기반 영화 정보 사이트입니다.

주요 기능 및 특징

1. 회원가입 및 사용자 관리
   • 사용자는 회원가입을 통해 개인 계정을 생성할 수 있으며, 이를 통해 영화 검색뿐만 아니라 다양한 개인화된 서비스를 이용할 수 있습니다.
   • 사용자마다 최근 본 영화 내역을 저장하여 쉽게 접근할 수 있도록 했습니다.
2. 마이페이지
   • 사용자별 마이페이지를 제공하여 사용자가 본 영화, 평가한 영화, 좋아요 표시한 영화 등을 한눈에 확인할 수 있습니다.
   • 사용자가 자신만의 영화 리스트를 만들고 관리할 수 있는 기능을 추가했습니다.
3. 별점 및 리뷰 기능
   • TMDB의 별점 시스템뿐만 아니라, 사이트 내에서 사용자들이 직접 영화에 별점을 줄 수 있는 기능을 구현했습니다.
   • 이를 통해 사용자들 간의 영화 평가와 리뷰를 공유할 수 있는 커뮤니티를 조성했습니다.
4. 데이터 재사용성 극대화한 상세페이지
   • 영화 정보를 한 눈에 확인할 수 있는 카드 형식으로 제공하여, 한 카드에서 비슷한 장르, OTT 서비스 제공 여부, 좋아요 수, 총 갯수 등의 다양한 정보를 볼 수 있도록 했습니다.
   • 이를 통해 사용자가 더 많은 정보를 이용할 수 있도록 구현했습니다.

개인별 기능 담당

• 소현 : 상세페이지 댓글기능, 상세페이지 비슷한 장르, 로그인, 회원가입 css 깃
• 민규 : 메인페이지(언어별 노출), 좋아요, 좋아요 리스트 연동로그인, 회원가입 기능생성, 전체 css
• 준열 : 마이페이지 생성 css , 최근 본 내역,
• 용철 : 상세페이지 생성, css 서비스 ott정보 연결, 별점 평점기능

메인홈 이미지

메인검색페이지

상세페이지

마이페이지

로그인 & 회원가입페이지

메인홈 주요기능

- css 디자인
- css keyframe 을 활용한 타이핑 글자
- 버튼 클릭 시 메인검색 페이지로 스크롤 다운

메인검색페이지 주요기능

1. fetch를 활용한 Dom연결
2. 검색창
    - 빈 칸 검색 시 alert메세지
    - 원하는 영화 검색시 해당 영화 카드만 조회
3. 카드
    - 클릭시 id조회
    - flex를 이용한 반응형 페이지
4. 고정메뉴바(퀵메뉴)
    - position-sticky를 활용하여 위치고정
    - 이전 버튼 클릭 시 모든 카드 돌아오기
    - 검색 버튼 클릭 시 검색 메뉴로 스크롤
    - 홈 버튼 클릭 시 메인홈으로 스크롤 업
    - 한국국기 클릭시 한국영화변경
    - 미국국기 클릭시 해외영화변경

5. 햄버거 메뉴바
   • 로그인 시 마이페이지, 로그아웃 메뉴표시
   • 로그인하지 않았을 때는 로그인, 회원가입 메뉴표시
6. 로그인 시 카드에 좋아요(북마크) 표시 (마이페이지에서 좋아요 한 영화 조회가능)

상세페이지 주요기능

1. fetch로 감독/출연, OTT정보, 비슷한 장르, 뒤에 배경화면 이미지 등록 불러오기
2. 리뷰
   • 작성가능
   • 수정가능(새로운모달창에서)
   • 삭제가능
3. 리뷰의 별점 기능으로 (로그인시에만 가능) 커뮤니티 사이트 자체 별점 평균 조회 가능
4. 슬라이드, 캐러셀기능 구현

마이페이지 주요기능(로그인 시에만 이용가능)

1. 카드 좋아요(북마크)내역 조회가능
2. 최근 본 목록 내용 (localStorage사용)

로그인, 회원가입

1. 회원가입 - 중복된 아이디 사용자 확인 후 가입가능 정보 firebase에 저장
2. 로그인 - 회원가입 된 아이디로 로그인 가능

---

사용규칙

1. 오직 Vanila JS 만 사용
2. 코드컨벤션 지킬 것

---

KPT회고록

Keep - 현재 만족하고 있는 부분

팀원끼리의 적극적인 협력과 소통이 프로젝트 진행에 긍정적인 영향을 끼쳤습니다. 단위 기능 코드가 적절하게 구현되었습니다. 프로젝트 진행 중 각 개인이 목표를 향해 성장하려는 모습이 좋았습니다. 각자의 기능 구현에서 보완이 필요한 부분을 팀원끼리 도와주며 해결할 수 있었습니다.

Problem - 불편하게 느끼는 부분

코드 리뷰를 진행하지 못해 프로젝트 완료 시 발생할 문제를 예측하고 수정하는 데 어려움이 있었습니다. 코드 구조 설계에 대한 문제가 있어 아쉬움이 남았습니다. 개인 작업이 많아져 불필요한 분리 파일들이 생기게 되었습니다. 같은 코드를 반복해서 만들게 되면서 코드 정리가 되지 않아 유지보수가 어려웠습니다. 깃으로 협업하면서 많은 브랜치가 생겨 작은 기능별로 나뉘어진 브랜치를 정리할 필요가 있었습니다. 어떤 브랜치에서 작업했는지 기억하는 게 쉽지 않았습니다. 프로젝트 진행 전 기능 폴더 구조, 깃 설정, DB 구조 설계 시간이 부족했습니다. Pull Request를 리뷰하고 Merge하는 과정에서 시간이 부족해 개개인이 확인 없이 Merge하는 경우가 발생했습니다.

Try - Problem에 대한 해결책, 당장 실행 가능한 것

비슷한 기능을 하는 코드를 합쳐 나중에 유지보수가 필요할 때 개선하기 쉽도록 변경하겠습니다. 프로젝트 완료 기간이 부족하더라도 진행하기 전에 충분히 생각하고 상의하는 시간을 가져 결정하고 진행하는 것이 중요하다고 생각합니다. 초기 단계에서 더 철저한 계획과 검토를 통해 문제 발생 가능성을 최소화하겠습니다. 지속적인 협업 문화를 강화하여 문제 해결 속도와 효율성을 높이겠습니다. 각 팀원이 목표를 명확히 공유하고 함께 성장할 수 있는 환경을 조성하겠습니다. 깃 브랜치를 효율적으로 관리하고 불필요한 브랜치를 정리하여 협업을 원활하게 진행하겠습니다. Pull Request 리뷰 과정에 충분한 시간을 할애하여 코드 품질을 높이고 Merge 후의 문제를 최소화하겠습니다.

Moview