내일배움캠프 리액트 트랙 3기 첫 개인과제를 위한 레포지토리입니다. 웹서비스 이름은 Spartaflix로, 우리 내배캠의 본거지인 스파르타에 넷플릭스의 flix를 살짝 붙이고, 이런 느낌으로 내배캠 로고를 조금 수정해서 마치 스파르타코딩클럽에서 만든 영화 추천 사이트처럼 뻔뻔하게 만들어보았습니다. 기본적인 요구 기능과 추가 구현한 기능은 아래와 같습니다.
- TMDB에서 Top Rated Movies 데이터를 가져옵니다.
- 카드 리스트의 UI를 구현해 영화 정보를 화면에 보여줍니다.
- 영화 카드를 클릭할 시 ID를 알려줍니다.
- 페이지 내 input 필드에 검색어를 입력하고 버튼을 클릭하면 제목에 해당 검색어가 포함된 영화들만 화면에 보여줍니다.
- jQuery가 아닌 VanillaJS 만으로 위의 기능을 구현했습니다.
- CSS grid와 flex를 사용했습니다.
- 웹사이트 랜딩 또는 리로드 시에 input 필드에 커서가 위치합니다.
- 대소문자에 상관 없이 검색됩니다.
- Enter 키 입력으로 검색이 실행됩니다.
- input 필드 왼쪽의 버튼을 누르면 다크 모드와 라이트 모드가 토글되도록 만들었습니다.
- 검색 결과 화면에만 보이는 검색 결과를 초기화하는 버튼을 만들었습니다. 매번 페이지를 리로드 할 필요가 없습니다.
- 미디어 쿼리 적용
- 코드 리팩토링
- 깃허브 및 벨로그 링크 추가하기
이 레포지토리 및 웹사이트 관련 문의사항은 yongseung.song@icloud.com 으로 보내주시기 바랍니다.