gygy7151/Netflex

📍 영화 검색 사이트 Netflex

• Netflex

  • 배포 도메인은 가비아에서 구매한 도메인으로 netlify에 배포완료했습니다.

• 작업기간 및 기여도

  • 2023년 1월 4일 ~ 2월 4일(고도화 종료예정)
  • 기여도 100%

• 기술스택

  • Frontend :, ,
  • CI/CD: Netlify

• 구현목표

  • imdb api 사이트의 오픈 API 소스를 활용하여 영화를 연도별로 검색 가능하도록 구현 했습니다.
  • 영화 제목만 검색하면 랜덤 연도별 영화 검색이 가능합니다.
  • 영화 검색시 엔터키와 검색버튼 둘 중 어느것을 클릭하든 검색 가능하며, 영어제목만 검색 가능합니다.
  • imdb api 사이트의 오픈 API 소스를 활용하여 영화를 검색하고 세부정보를 확인 할 수 있는 사이트를 제작하였습니다.
  • 영화 검색 완료시점에 영화 포스터 로딩 아이콘이 사라지도록 이벤트를 구현 했습니다.
  • 무한스크롤을 적용하여 최초 20개의 영화가 업로드된 후 아래로 스크롤하면 추가목록이 20개씩 확인 가능합니다.
  • 일정 스크롤 이벤트가 발생하고 모든 영화목록이 렌더링 되고 나면 검색완료 모달창이 페이지 하단에 한번만 노출되고 사라집니다.
  • 검색 된 영화의 상세정보 보기 버튼을 클릭하면 영화의 세부정보를 확인 할 수 있는 모달창을 작업했습니다.
  • 상세정보 모달창 닫기 버튼 및 상세정보보기 버튼에 마우스가 호버링 되면 cursor가 포인터로 바뀌도록 작업했습니다.
  • 영화목록이 길어지면 우측 moveTop 버튼을 클릭하여 자동으로 스크롤이 맨 상단에 위치하도록 작업했습니다.
  • 상세정보 모달창이 띄워지면 우측 moveTop버튼에 상세보기 안내문구가 blink되고, 모달창이 사라지면 함께 문구가 사라집니다.
  • 검색 인풋값 길이에 따른 동적인 배너 애니메이션 작업도 붙였습니다.
  • 상세정보 모달창에 로딩아이콘 대신 이용자 이탈율을 더욱 낮춰줄 수 있는 스켈레톤 로딩 모달 기능도 레이아웃과 함께 작업 했습니다.
  • 상세정보 모달창에는 RottenTomato 스코어와 AudienceScore 및 영화타이틀, 관람등급, 상영시간 정보를 바인딩 및 레이아웃 작성 완료했습니다.
  • 상세정보 모달창이 띄워지면 'x'버튼을 클릭뿐만 아니라 모달창 외 다른 요소를 클릭하면 모달창이 사라지도록 작업했습니다.
  • SCSS를 사용하여 스타일 적용하였습니다.
  • 개별 구매한 도메인주소로 접속가능하도록 배포했고, HTTPS 인증도 받았습니다.
  • 상세 페이지 이미지 깨짐현상도 수정완료했습니다. (feat.어진님 코드리뷰 의견반영)
  • 포스터 사이 공간을 클릭했을 때에도 상세모달 페이지가 띄워지는 버그 해결했습니다.
  • 영화 제목 및 연도가 블럭을 벗어나는 버그를 해결했습니다.
  • 상세페이지 모달창이 페이지 맨 상단에 고정된 버그 중심부로 고정되도록 수정 작업했습니다.
  • 크로스 브라우징 문제도 해결했습니다.
  • 반응형 웹 디자인을 적용했습니다.
  • Open Graph 프로토콜 업계 표준을 따라 SEO를 위한 메타태그를 작업해야 합니다. (참조: https://www.daleseo.com/html-meta-tags-for-seo/ )
  • MoveTop 눌러 맨 상단으로 스크롤 이동후 다시 한번더 누르면 직전 스크롤 위치로 이동하는 기능도 추가할 예정입니다.