자바스크립트와 외부 API를 이용해 구현 하는 나만의 유튜브 강의실
step1
- 문자열이 주어지면 유튜브 검색 API로 10개의 영상을 받을 수 있어야 한다.
- 다음 페이지 토큰이 주어지면 다음 페이지의 10개의 영상을 받을 수 있어야 한다.
- 받은 영상들의 id를 Web Storage에 저장할 수 있어야 한다.
- 저장 가능한 최대 동영상의 갯수는 100개이다.
step2
- 저장된 영상 정보를 저장한다. (videoId, title, thumbnailUrl, channelTitle, publishTime, watched)
- 영상 카드의 감상 기록(watched)를 변경할 수 있다. (watched)
- 영상 카드를 로컬 스토리지의 저장된 리스트에서 삭제할 수 있다.
step1
- 엔터키를 눌러 검색할 수 있다.
- 검색 버튼을 클릭해 검색할 수 있다.
- 받아온 검색 결과를 화면에 보여줄 수 있어야 한다.
- 데이터를 불러오는 동안 현재 데이터를 불러오는 중임을 skeleton UI로 보여준다.
- 검색 결과가 없는 경우 결과 없음 이미지를 보여준다.
- 검색 결과 없음 이미지는
src/images/status/not_found.png
경로에 있다.
- 검색 결과 없음 이미지는
- 검색 결과 화면에서 유저가 브라우저 스크롤 바를 끝까지 이동시켰을 경우, 그 다음 10개 아이템을 추가로 불러온다.
- 이미 저장된 영상이라면 저장 버튼이 보이지 않도록 한다.
step2
- 가장 처음에는 저장된 영상이 없으므로, 비어있다는 것을 사용자에게 알려주는 상태를 보여준다.
- 이후 페이지를 방문했을 때 기본 메인 화면은 내가 볼 영상들의 리스트를 보여준다.
- 영상 카드의 이모지 버튼을 클릭하여 아래와 같은 상태 변경이 가능해야 한다.
- ✅ 본 영상으로 체크
- 🗑️ 버튼으로 저장된 리스트에서 삭제할 수 있다. (삭제 시 사용자에게 정말 삭제할 것인지 물어봅니다.)
- 본 영상, 볼 영상 버튼을 눌러 필터링 할 수 있다.
- 반응형 웹: 유저가 사용하는 디바이스의 가로 길이에 따라 검색결과의 row 당 column 갯수를 변경한다.
- 1280px 이상: 4개
- 960px이상~1280px 미만: 3개
- 600px이상~960px 미만: 2개
- 600px 미만: 1개
This project is MIT licensed.