🎞 #02 왓챠 클론코딩 'MICCHA' Phase 2 기록 (로그인 후 Home 화면, 영화 목록 슬라이드 작업)

leehyunju·2021년 7월 14일

첫협업프로젝트 프로젝트기록

토이 프로젝트 모음zip

목록 보기

2/4

miccha 플젝 소개와 팀 소개는 이전에 했고 이어서 Phase2 를 기록해보려 한다.

⌛️ Phase 02 작업 기간

⭐️ 2021. 06. 14 ~ 06. 30

💻 작업 목표물

Home 페이지 마크업 및 스타일링, UI 컴포넌트 작업
영화 무비 리스트 API 인피니티 크롤링
비밀번호 찾기 페이지 API 연동
카테고리에 속한 컨텐츠를 표시하는 기능
컨텐츠에 대한 세부 정보를 표시하는 기능

Phase 01 단계가 끝나고 난 뒤, 서로 1주일 조금 넘게 휴식을 가졌다. 그리고 약속대로 Phase 02 작업에 돌입했다. 이전 단계 작업은 에피타이저 급이라면 이 작업은 진짜 메인이라 할 수 있다. UI 컴포넌트를 어떻게 구성할지 왓챠플레이 사이트 보면서 짱구 굴리기 바빴다.

제일 재밌었고 고민도 정말 많이 했던. 사실 아직도 야금야금 수정 작업중이다. 그리고 작업하면서 즐거웠던 것 하나 더 추가하자면 영화 포스터 보는 재미가 쏠쏠하다는거.. 작업하다말고 영화 뽐뿌와서 관람하는데 세상엔 재밌는게 넘 많은 듯 하다 오래 살아야지

Swiper 슬라이드 라이브러리를 사용했고 한 장씩 넘어갈 때마다 FadeIn 효과를 넣어서 구현했다. 그리고 영화 장르별로 슬라이드를 다섯 종류로 나누었다.

애니메이션
(혐짤주의) 공포/스릴러
키즈
SF 액션
로맨스

내가 맡은 작업물 중 가장 고민 많이 했던 부분을 꼽자면 바로 이 movieItem 컴포넌트와, movieSlider 부분이다. 일단 마크업도 신경 많이 썼고 왓챠와 정말 흡사하게 만들기 위해서 몇 번씩 뜯어고쳐서 나온 결과물이다. 완벽하게 클론할 수 없어 좀 아쉽지만,, 나중에 더 디벨롭하면 되는 부분이니까..!

MouseHover 했을 시 해당 this는 scale 이 커지면서 형제 태그들을 밀어내는 동작은 trasform:translateX() 속성을 이용하여 작업 했다. 이 과정에 있어서 머리가 터질 뻔 했던게 슬라이드 캐루셀 라이브러리인 slick을 써서 작업하니 위 Demo 처럼 구현이 안된다... 그래서 슬라이드 화살표 버튼 눌러 넘기는 것은 JS로 구현하는 방식을 선택하게 되었다.