팀 프로젝트 - 영화 검색 페이지 빌드업 (240731~240807)

tmdb 영화 api 를 불러와 만든 영화검색 페이지 개인과제에서 팀원 중 1명의 과제를 빌드업하여 리뷰, 상세페이지, 정렬 등 기능들을 추가한 첫 팀 프로젝트

 

■  배포링크 👉 바로가기

---

 

1. 와이어프레임 제작

• figma 링크

프로젝트의 필수 구현 기능들을 넣어서 메인페이지와 상세페이지, 리뷰작성부분, 정렬 등 전체적인 구조를 잡았다.

 

 

2. 역할 분담

팀장	메인페이지 영화카드 정렬기능 구현 (최신순, 인기순, 별점순)
팀원1	상세 페이지 영화 리뷰 작성 기능 구현
팀원2	메인페이지 영화카드 클릭 시 상세페이지 이동 기능 및 영화 포스터 슬라이드 기능 구현
팀원3	메인페이지 업버튼 (스크롤) 기능, 검색 추가 기능 구현
팀원4 (나)	상세페이지 구현 (타이틀, 이미지, 줄거리, 평점 등)

 

 

3. 내가 맡은 기능 : 상세페이지 구현

// window.location.search 로 클릭할 영화의 키와 값 확인
const myKeyValue = window.location.search;

// URL 검색매개변수(URLSearchParams)에 location.search를 인자로 넣어줌
const URLSearch = new URLSearchParams(myKeyValue);

// get으로 id 값만 가져오기
let id = URLSearch.get("id");

// 특정한 id값을 받는 영화에 대한 정보를 불러오는 api
async function fetchMovieContent() {
  const options = {
    method: "GET",
    headers: {
      accept: "application/json",
      Authorization: `Bearer // 여기는 보안 부분 같아서 지웠음`,
    },
  };
  const response = await fetch(
    `https://api.themoviedb.org/3/movie/${id}?language=en-US`,
    options
  );
  const data = await response.json();
  return data;
}
fetchMovieContent()
  .then((results) => {
    // 위 api에서 받아오는 영화정보 출력
    const detailBox = document.querySelector(".detailBox");
    detailBox.innerHTML = `<div class="contentBox">
    <img src="https://image.tmdb.org/t/p/w500${results.poster_path}" alt="${results.title}">
        <div class="detailcontents">
        <h3 class="datailTitle">${results.title}</h3>
        <p class="date">Release date : ${results.release_date}<span>Ratings : ${results.vote_average}</span></p>
        <p>${results.overview}</p>
        </div></div>
      `;
  })
  .catch((err) => console.error(err));

 

 

4. 팀원들이 구현한 기능

• 영화 포스터 슬라이드

- 좌 (<) , 우 (>) 버튼 클릭 시 영화 포스터가 한 칸씩 이동

- 마지막 포스터 끝까지 클릭되면 첫 포스터로 다시 돌아오기

- 인기순 최신순 클릭 시 같이 정렬됨

 

• 영화 검색 및 인기순 & 최신순 정렬

 

• Top 버튼 & 스크롤 표시 바

 

• 리뷰 작성 ( 리뷰 추가, 수정, 삭제, 비밀번호 확인 및 유효성 검사, 날짜 출력 등 )

 

 

5. 구현한 방법

(1) 메인페이지에서 이미지를 클릭했을 때 상세페이지로 이동할 주소의 id값 받아오기

     - window.location.search & URLSearchParams & URLSearchParams.get

(2) id 값과 일치하는 영화정보 상세페이지에 출력하기

     - 상세페이지 이동 기능은 다른 팀원분이 맡으셔서 id 값을 어떻게 전달해주실지 몰랐다. 그래서 id 값을 가져오는 방법이랑 전체 영화정보 api 에서 filter 메서드로 일치하는 영화정보를 출력하려고 코드를 짜보고있었는데 팀원분이 아예 클릭한 영화와 일치하는 api 를 불러오도록 코드를 짜주셨고 나는 그 api 를 받아서 영화정보를 상세페이지에 출력하도록 했다.

 

 

6. 그 외 작업했던 부분

다른 팀원분들은 맡은 기능을 구현하고 있었고 작업이 빨리 끝난 나는 기존에 되어있던 갈색톤의 디자인을 어두운 톤으로 메인페이지와 상세페이지의 전체적인 CSS 를 작업했다. CSS도 익숙하지않아서 어려웠는데 구글에 열심히 찾아보고 flex, grid 도 많이 써보면서 조금이나마 익숙해졌던 것 같다. 

 

 

7. 어려웠던 점

github 으로 팀원들과 협업을 해보면서 merge 하고 pull 할때 오류와 충돌을 많이 겪었는데 그럴 때마다 팀원들과 화면공유를 하면서 5명이 같이 머리를 맞대고 다같이 하나씩 오류를 해결했었다. 중간에 병합하는데 깃 오류가 계속 나서 팀원 한분이 튜터님께 도움을 요청하러 갔었는데 한참동안 오지않았고 이후에 보니 작업하고있던 dev 브랜치가 중간에 끊겨있었다고 들었다. github 사용법이 모두들 익숙하지 않아서 진행하는데 많이 어려웠지만 충돌도 많이 겪어봐야 나중에 덜 당황하고 어떻게 대처해야할 지 수월하게 판단할 수 있기에 이번 경험을 통해 많이 배웠던 것 같다.

 

 

8. 느낀점

팀 프로젝트를 통해 각자 구현할 기능을 맡아 공부했던 내용을 적용해보면서 자바스크립트에 조금 더 익숙해질 수 있었다.

단순히 강의를 보고 혼자 학습하는 것만이 아닌 스스로 고민하고 코드를 쳐봐야 진정한 내것으로 체득이 된다는 것을 느꼈다.

낯설었고 멘붕이었어서 아무것도 하지 못했던 미니프로젝트에 이어서 처음으로 팀원과 협업이라는 것을 했다는 생각이 들었고 한가지 아쉬웠던 점은 추가적인 기능을 구현해보려고 욕심내지 않아서 맡았던 기능 외에는 소극적이었던 나의 태도였다. 막상 끝나고 나니 여러가지 아쉬운 점들이 많았고 다음 팀 프로젝트 때는 좀 더 적극적으로 기능들을 구현할 수 있도록 열심히 공부해야겠다...!