끝날 때까지 끝난 건 아니지만... 오늘 대강 마무리가 된 것 같아서 조금 이른 감사짤을 꺼내본다.
그래도 모두가 한마음으로 같이 달려주었기 때문에 처음에 막연하게 걱정했던 것만큼 눈 앞이 깜깜해지는 정도는 아니었던 것 같다. 오늘은 각자 따로 작업했던 부분을 머지하는 것이 가장 큰 과제였다. 그리고 나는 팀원들에게 개인적으로 Now Playing 메뉴를 만들어서 추가해보겠다고 호언장담(?) 해 둔게 있었어서 그것 또한 완료해야 했다.
1. Now Playing 페이지 만들기
요 메뉴는 TMDB에서 now_playing api를 활용한 것이다. 그래도 이제 여러 번 해봐서 그런지 오픈api를 활용해서 데이터 붙이는 것이 더이상 크게 어렵지는 않았다!🥹🥹🥹
앞서 보여지는 Top-Rated와 동일하게 구현해버리면 새로운 메뉴로서의 차별점이 없기 때문에 다른 느낌으로 한번 만들어 보았다.
각 영화 포스터 이미지에 마우스 오버 시 이미지에 변화를 주는 스크립트를 넣어보았다. 또한 api로부터 받아온 영화 제목, 개봉일과 같은 정보를 이미지 위에 텍스트로 표시되도록 했다.
<script>
/** 이미지 마우스 오버 효과 */
movieCard.addEventListener("mouseover", () => {
movieImage.style.transform = "scale(1.1)";
movieImage.style.filter = "brightness(0.5)";
const movieInfo = document.createElement("div");
movieInfo.classList.add("movieInfo");
movieInfo.innerHTML = `
<p class="playingtitle">${movie.title}</p>
<p class="releaseDate">Release Date<br>${movie.release_date}</p>
`;
movieCard.appendChild(movieInfo);
});
</script>포스터 이미지가 들어있는 movieCard div에 마우스오버 이벤트리스너를 달았다. 마우스오버 시 이미지가 조금 커지고, 흰색 텍스트가 잘 보이도록 조금 어두워지게 만들었다. 부드러운 움직임을 위해 transform 시간도 걸어줬는데, 지금 생각해보니 css 쪽에 추가하지 말고 여기다 할 걸 그랬다.
여튼 그러고나서 movieInfo라는 새로운 div를 생성해주고, movieCard div에 나타나도록 해주는 코드이다.
<script>
/** 이미지 마우스 아웃 시 효과 제거 */
movieCard.addEventListener("mouseout", () => {
movieImage.style.transform = "";
movieImage.style.filter = "";
const movieInfo = movieCard.querySelector(".movieInfo");
if (movieInfo) {
movieCard.removeChild(movieInfo);
}
});
</script>그리고 마우스 아웃시 더해준 효과를 제거해준다. 예전에 자바스크립트로 구현할 수 있는 움직임 기능의 일부를 css로도 어느 정도 구현 가능하다고 들었는데 오늘 그걸 확실히 느꼈다.
그리고 각 영화 포스터 이미지를 클릭하면, '해당 영화의 제목' + 'trailer' 키워드로 유튜브에 검색한 결과가 새창으로 뜨도록 했다. 사실 이렇게 검색 결과로 연결시키는 것보다는 공식 trailer 영상을 바로 볼 수 있도록 하는 것이 훨씬 좋을 것 같은데, TMDB의 api 데이터로 영화 제목을 찝어내는 거라 유튜브 영상의 고유 주소를 불러오기가 불가능해보인다.
이거는 정말 시간이 난다면 추가로 고민해 볼만한 문제인 것 같다.
2. 전체적으로 반응형으로 만들기
지난 주 개인 프로젝트에 대해서 튜터님이 피드백을 주셨던 것중에, 다음에는 미디어쿼리를 이용하여 반응형으로 만들어보는 게 좋겠다고 하셨던 게 기억나서 한 번 해보기로 했다.
역시 세상만사 모든게 '백문이불여일견 백견이불여일행'인 것 같다. 그냥 이런 기능들도 있구나~ 하고 단순히 미디어쿼리에 대해서 검색만 해봤을 때는 뭔가 엄청 어려워보였는데 오늘 직접 해보니까 금방 감이 왔다.
재밌었다!! 🤔🤔🤔
기본 레이아웃
창 너비가 1500px 이하일 때
창 너비가 900px 이하일 때
3. 깃헙에서 코드 머지 해보기
지금 요렇게 상세페이지 하단에 귀여운 댓글 기능이 들어가 있다 🥹🥹🥹 얼른 마무리하고 댓글팀에게 로컬스토리지 강의를 정중히 요청해 봐야겠다....
진짜 잘못 덮어씌우기 하고 돌이킬 수 없을 것 같아서 너무 무서웠는데 생각보다 할만했다!! 머지 하는 사람은 반드시 최신 코드와 개발 흐름을 양지하고 있어야 하겠다는 생각을 했다. 물론 머지 리퀘스트를 생성하면 한 사람만 확인하는 게 아니라 모두가 함께 확인하는 것이긴 하지만... 조심 또 조심
<또 더 달려볼 것들>
1. 댓글란 css 기깔나게 꾸며보기
2. 웹페이지 메타부분에 title 수정하기
3. Now Playing 이미지 눌렀을 때 영상 바로 뜨게 하기? 가능한? 😇
4. 검색 버튼 css 더 만져볼 수 있을 것 같은데...?
5. nav에 is there any movie.. 문구 크기를 조금 줄여야 할 듯!
<조장의 할일>
💥발 표 자 료 만 들 기💥
