if9 팀의 ✨팀장✨으로서 조금이라도 더 잘 해보고 싶은 마음에 지금 이시간까지 프로젝트 계속 깎고 또 깎다가... 11시 반이 다 되어서야 벨로그에 들어올 수 있었다😇
이번 팀프로젝트는 2주차 개인프로젝트로 만들었던 '영화 검색 사이트'를 디벨롭하는 것이다. 4명의 조원 중 한 명의 코드를 선택해서 다함께 힘을 합쳐 코드를 보완하고 기능을 추가하는 것이다.
맨 처음 든 생각은, 두 가지 였다. 첫 번째, 개인프로젝트 필수 요구사항이 모두 안정적으로 구현된 코드일 것. 두 번째, 기본형 템플릿처럼 사용할 수 있도록 알아보기 쉽고 가독성 좋게 짜여진 코드일 것. 요렇게 팀원분의 코드를 다함께 논의하여 결정하고, 한 팀은 api 불러오기 / 한 팀은 로컬 스토리지 활용해서 댓글기능 만들기 등의 2팀으로 나누었다.
나는 미니프로젝트 때 파이어베이스를 활용한 방명록 만들기를 담당했었기 때문에 이번에는 api 쪽이 좀 더 끌려서 api를 맡기로 했다.
1. 메인 페이지 div 가운데 정렬하기
메인 페이지에 뜨는 기존 카드들이 왼쪽 정렬 되어 있었는데, 가운데 정렬을 해주었다.
2. 카드 클릭 시 id 정보 갖고 다음 페이지로 이동하기
메인페이지에 붙어 있는 영화 카드들을 클릭하면,
detail.html로 이동하는데, 이 때 각 영화의 id값을 함께 갖고 가게 된다. 이 id값을 가지고 해당 영화에 대한 상세 정보나, 배우, 제작진 등의 정보를 불러올 수 있는 TMDB의 또다른 api를 활용하게 되는 것이다.
<script>
/** 영화 카드 클릭 시 영화 ID값 갖고 이동 */
function clickBox(event) {
const movieId = event.currentTarget.getAttribute("movieId");
window.location.href = `detail.html?id=${movieId}`;
}
</script>메인 페이지의 영화 카드마다 clickBox 이벤트를 걸어주고, 이 영화의 id값을 붙인 주소로 이동하게 되는 코드이다.
<script>
/** index에서 카드 클릭시 영화 id 정보를 갖고 이동*/
document.addEventListener("DOMContentLoaded", function () {
const urlParams = new URLSearchParams(window.location.search);
const movieId = urlParams.get('id');
loadDetails(movieId);
});
</script>그 다음 문서가 로드되면 이전 페이지에서 불러온 id값을 가지고 loadDetails함수를 실행하여 api 데이터를 가져와서 페이지를 동적으로 구성하게 되는 것이다.
3. 데이터 불러와서 상세정보 카드 붙이기
짠😇😇😇 실로 눈물겨운 순간🥹🥹🥹 어제 이게 그렇게 안돼서 너무 머리가 아프고 지치고 힘들고 약간 울고 싶은 기분이었는데... 오늘까지 계속 달린 결과 요런 느낌으로 구현하는 데까지 성공했다. 이 페이지를 구현하기 위해서는 다음과 같은 3개의 api가 필요했다. 1. Details(영화 상세정보), 2. Credits(배우, 제작진 정보), 3. Image(포스터 이미지)
이 3개의 api를 쭈르륵 불러와서, 불러온 정보들을 가용하기 쉽게 변수에 저장해두고 알맞은 곳에 쏙쏙 집어넣었다. 내가 상세페이지 레이아웃을 잡는 동안 나와 함께 api파트를 맡게된 팀원분이 불러온 데이터의 필요한 요소에 접근할 수 있도록 미리 방법을 찾아주셔서 나 역시 빠르게 방법을 파악하고 협업할 수 있었다.
내가 작업한 부분과 팀원분이 작업한 부분을 합친 뒤에 동적으로 형성된 요소에 css가 먹히지 않는 문제가 발생하여, 이 부분은 한 명이 맡아서 고치는 동안 나머지 한 명은 남은 강의를 듣는 식으로 했다. 역할을 바꿔서 또 한 명은 고쳐보고 나머지 한 명은 강의를 들었다. 정말 탄탄하고 빡빡한 스케줄링!! 🥹🥹🥹
여튼 상세 페이지도 일단은 이렇게 구현 완료!!!
4. 포스터 클릭하면 다음 이미지 보여주기
데이터를 불러와봤더니, 제공하는 이미지 소스들이 정말 많아서, 이미지를 클릭하면 5개까지 다음 이미지를 보여주도록 해봤다. 이미지에 마우스 오버시 손가락 모양으로 바뀌고, title 속성을 이용하여 간단히 메시지를 띄웠다. 5번째 이미지까지 보고난 이후에는 다시 첫번째(인덱스0) 이미지로 바뀌게 된다.
이미지 위에 좌측 화살표, 우측 화살표 아이콘을 띄워서 사용자 입장에서 좀 더 명료하게 기능을 인지할 수 있도록 해볼까 했지만, 너무 복잡해질 것 같아서 일단은 그만두기로 했다
짜잔스틴! 클릭하면 다음 이미지로 바뀐다.
<내일 더 달려볼 것들>
1. 메뉴를 하나 더 만들어서 개봉예정작 페이지를 추가할 것이다.
2. 상단에 있는 페이지 타이틀을 팀명으로 바꾸고, 영화필름 아이콘을 추가할 것이다.
3. 댓글팀이 구현한 기능을 캐스팅 정보 밑에 합쳐야 한다.
4. 댓글 영역 css 손봐야 한다.
5. 불러온 데이터에 해당 값이 없을 때 디폴트값 설정하기... (할 수 있으면... 시간 나면...)
<해결해야 할 사항>
1. 상세페이지에서 아직 검색 기능이 먹히지 않는다 .... 해결할 수 있겠지.... 해결해야만 한다... 살려야 한다
2. 검색어에 해당하는 결과가 없을 때 카드가 사라지는 문제를 해결해야 한다.
3. 강의.... 빨리 봐야 한다 😇🔫🔫💥
