Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[2단계 - 나만의 유튜브 강의실] 병민(윤병인) 미션 제출합니다. #146

Merged
merged 48 commits into from
Mar 21, 2022
Merged
Show file tree
Hide file tree
Changes from 36 commits
Commits
Show all changes
48 commits
Select commit Hold shift + click to select a range
bc76afd
:memo: docs(todo): 2단계 기능 요구사항을 작성한다
airman5573 Mar 18, 2022
b063ec9
:lipstick: style(ui): 버튼을 디자인 한다
airman5573 Mar 19, 2022
f4e6e24
:lipstick: style(ui): video list에 반응형 grid를 적용한다
airman5573 Mar 19, 2022
7cae651
:bug: fix(ui): 버튼 디자인 수정 및 적용
airman5573 Mar 19, 2022
0247a66
:bug: fix(ui): modal을 닫아도 메인 페이지에 있는 video-list는 사라지지 않도록 한다
airman5573 Mar 19, 2022
c9c500c
:memo: docs(todo): 기능 구현 목록을 수정한다
airman5573 Mar 19, 2022
e96c15a
:memo: docs(todo): 기능 구현 목록에서 구현한 아이템을 체크한다
airman5573 Mar 19, 2022
146e9a8
:truck: chore(settings): 함수 길이를 15자로 제한하는 rule을 제거한다
airman5573 Mar 19, 2022
ad5df35
:sparkles: feat(storage): video list를 저장하고 가져오는 역할을 하는 Class를 추가한다
airman5573 Mar 19, 2022
83802fc
:truck: chore(settings): 커밋 컨벤션 스코프를 추가한다
airman5573 Mar 19, 2022
8502ac1
:sparkles: feat(storage): video storage를 추가한다
airman5573 Mar 19, 2022
e09424e
:sparkles: feat(api): 저장된 비디오를 메인페이지에서 보여준다
airman5573 Mar 19, 2022
a2a9303
:truck: chore(settings): 커밋 컨벤션 스코프를 수정한다
airman5573 Mar 19, 2022
08a686b
:sparkles: feat(ui): 체크 버튼을 클릭해서 해당 영상을 볼 영상 혹은 본 영상 그룹에 귀속시킨다
airman5573 Mar 19, 2022
9df90aa
:sparkles: feat(ui): 저장된 영상을 삭제한다
airman5573 Mar 19, 2022
451e0e4
:recycle: refactor(ui): 공통으로 적용되는 css코드를 app.css로 뺀다
airman5573 Mar 19, 2022
a786ce1
:lipstick: style(ui): 활성화된 버튼을 hover했을때의 배경색을 변경한다
airman5573 Mar 19, 2022
ccdf939
:lipstick: style(ui): 반응형 디자인 관련 소스코드를 정리한다
airman5573 Mar 19, 2022
9f78f64
:lipstick: style: skeleton의 크기는 video-item을 따른다
airman5573 Mar 19, 2022
31b6160
:zap: perf(ui): scroll event listener대신 IntersectionObserver를 사용한다
airman5573 Mar 19, 2022
c9aa854
:recycle: refactor(cleanup): 소소한 부분들을 정리한다
airman5573 Mar 19, 2022
aa6e0ee
:recycle: refactor(api): api요청을 담당하는 util함수를 만든다
airman5573 Mar 19, 2022
3a06f56
:sparkles: feat(ui): 저장된 비디오가 없거나 필터링 결과가 없는 경우 이모지를 보여준다
airman5573 Mar 19, 2022
e58dd5e
:bug: fix(ui): 미디어쿼리 우선순위에 혼선이 생기지 않도록 범위를 지정한다
airman5573 Mar 19, 2022
b9acacd
:memo: docs(todo): 완료한 목록을 체크한다
airman5573 Mar 19, 2022
98b28e9
:bug: fix(logic): cache가 없는경우를 고려한다
airman5573 Mar 20, 2022
60043de
:recycle: refactor(cleanup): 유틸 함수를 한곳에 모아놓는다
airman5573 Mar 20, 2022
6d6e2fa
:bug: fix(logic): 올바른 함수를 사용한다
airman5573 Mar 20, 2022
8c0a1d3
:recycle: refactor(ui): 새로운 동영상이 불러와지고 일정시간 후에 scroll observer를 설치한다
airman5573 Mar 20, 2022
38d4981
:recycle: refactor: 소소한 수정
airman5573 Mar 20, 2022
22ffcf5
:lipstick: style(ui): 검색 모달의 검색 버튼과 입력 필드를 화면 크기에 맞게 조절한다
airman5573 Mar 20, 2022
939fc84
:lipstick: style(ui): 검색 결과에서 저장된 비디오의 저장 버튼은 제거하지 않고 disabled시킨다
airman5573 Mar 20, 2022
9d7b939
:white_check_mark: test: 동영상 검색에서 저장까지의 프로세스를 테스트하는 케이스를 추가한다
airman5573 Mar 20, 2022
454d601
:white_check_mark: test(ui): 저장된 동영상을 필터링 하는 테스트를 추가한다
airman5573 Mar 20, 2022
325c10e
:white_check_mark: test(ui): 저장된 동영상을 삭제하는 테스트를 추가한다
airman5573 Mar 20, 2022
799fb6b
:bug: fix: dummy data가 아닌 실제 api를 사용한다
airman5573 Mar 20, 2022
3519d70
:sparkles: feat(html): 1. 유튜브 썸네일이 아닌 실제 동영상 플레이어를 넣는다. |2. 영상의 제목을 링…
airman5573 Mar 21, 2022
5a12a16
:recycle: refactor(ui): esc키를 누르면 모달이 닫힌다
airman5573 Mar 21, 2022
43a3d0c
:lipstick: style(ui): 동영상 플레이어를 responsive하게 만든다
airman5573 Mar 21, 2022
acb80bd
:zap: perf(storage): 불필요한 cache를 갱신을 지양한다
airman5573 Mar 21, 2022
92bf38a
:recycle: refactor: hidden attribute 대신에 class로 가시성을 관리한다
airman5573 Mar 21, 2022
7e5d13e
:recycle: refactor(cleanup): videoStorage에 인자값을 넣어주지 않고 안에서 상수를 바로 사용한다
airman5573 Mar 21, 2022
6401dd7
:recycle: refactor(cleanup): tagName대신 localName을 활용한다
airman5573 Mar 21, 2022
fb917e6
:bug: fix(ui): app대신 window에 이벤트를 건다
airman5573 Mar 21, 2022
76a61f6
:recycle: refactor: for attribute대신에 data-* attribute를 사용한다
airman5573 Mar 21, 2022
8f5444c
:recycle: refactor: getAttribute대신에 dataset을 사용한다
airman5573 Mar 21, 2022
d79b9cc
:bug: fix(api): 검색 결과가 더이상 없는 경우에도 추가적으로 요청되는 문제를 해결한다
airman5573 Mar 21, 2022
c859b46
:bug: fix: 검색 결과가 없을때 없다고 보여준다
airman5573 Mar 21, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .cz-config.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
"rules": {
"no-alert": "off",
"max-depth": ["error", 2],
"max-lines-per-function": ["error", 15],
"no-unused-expressions": ["error", { "allowShortCircuit": true }],
"class-methods-use-this": "off"
},
Expand Down
8 changes: 8 additions & 0 deletions cypress.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"testFiles": "**/*.spec.js",
"screenshotOnRunFailure": false,
"video": false,
"pluginsFile": false,
"supportFile": "./cypress/support",
"fixturesFolder": "./cypress/fixtures"
}
6 changes: 6 additions & 0 deletions cypress/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
extends: ['plugin:cypress/recommended'],
rules: {
'no-unused-expressions': 0, // chai assertions trigger this rule
},
};
285 changes: 285 additions & 0 deletions cypress/fixtures/youtube-search-results.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,285 @@
{
"kind": "youtube#searchListResponse",
"etag": "guT6lrC69-TMlQip6X0ouxXWc_A",
"nextPageToken": "CJEBEAA",
"prevPageToken": "CIcBEAE",
"regionCode": "KR",
"pageInfo": {
"totalResults": 1000000,
"resultsPerPage": 8
},
"items": [
{
"kind": "youtube#searchResult",
"etag": "JQkXquR6Uh0Thqv-UR0feIYRpFA",
"id": {
"kind": "youtube#video",
"videoId": "tBwqWC2qHjo"
},
"snippet": {
"publishedAt": "2020-11-15T01:48:10Z",
"channelId": "UCVYFHFADz7jA6-OoPetwg8w",
"title": "VISION DANCE CREW EN ESPECIAL DE KPOP MUSIC CORE - SOMI "What You Waiting For"",
"description": "Nuestra líder Jeaneth Loayza representó a VISION DANCE CREW presentándose en WILLAX TV, haciendo un cover de nuestra ...",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/tBwqWC2qHjo/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/tBwqWC2qHjo/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/tBwqWC2qHjo/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "K VISION CREW",
"liveBroadcastContent": "none",
"publishTime": "2020-11-15T01:48:10Z"
}
},
{
"kind": "youtube#searchResult",
"etag": "JZT54mf86UggmDYjbtiesdSkibA",
"id": {
"kind": "youtube#video",
"videoId": "nFXevhK6enU"
},
"snippet": {
"publishedAt": "2018-07-08T14:11:19Z",
"channelId": "UCOcza_EohZGiuI7hP_nMhRA",
"title": "MISTAKES IN KPOP MUSIC VIDEOS (BTS, BLACKPINK, EXO, TWICE, ETC.)",
"description": "This video is made for fun not to hate on the groups! If any of it appeard already in other videos then sorry for reccurence ^^\" And ...",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/nFXevhK6enU/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/nFXevhK6enU/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/nFXevhK6enU/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "Omona Pierożki",
"liveBroadcastContent": "none",
"publishTime": "2018-07-08T14:11:19Z"
}
},
{
"kind": "youtube#searchResult",
"etag": "t74xqvDjpIKJKepx6UYp1JKhi2Q",
"id": {
"kind": "youtube#video",
"videoId": "rOVXOasYvNQ"
},
"snippet": {
"publishedAt": "2021-02-18T13:30:15Z",
"channelId": "UCAg_4sKu2Ba2f0cWsm9Pmew",
"title": "PRO DANCER REACTS TO KPOP | Top 10 Most Viewed KPOP Music Videos Each Year REACTION",
"description": "PRO DANCER REACTS TO KPOP | Top 10 Most Viewed KPOP Music Videos Each Year REACTION. ⬇️⬇️LINK TO PATREON ...",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/rOVXOasYvNQ/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/rOVXOasYvNQ/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/rOVXOasYvNQ/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "ChrisStillBeTalkin",
"liveBroadcastContent": "none",
"publishTime": "2021-02-18T13:30:15Z"
}
},
{
"kind": "youtube#searchResult",
"etag": "dXPH113qXurOwBfkK4KBkFM8kgM",
"id": {
"kind": "youtube#video",
"videoId": "IqjaFwL76qQ"
},
"snippet": {
"publishedAt": "2021-08-30T14:10:51Z",
"channelId": "UCC1TV4rSNlv9gdK_AkWJCzQ",
"title": "Most viewed Kpop music videos in the first 24 hours #shorts #kpop #blackpink #bts",
"description": "",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/IqjaFwL76qQ/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/IqjaFwL76qQ/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/IqjaFwL76qQ/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "Rosie Mina",
"liveBroadcastContent": "none",
"publishTime": "2021-08-30T14:10:51Z"
}
},
{
"kind": "youtube#searchResult",
"etag": "9FQ4wrFoOTs_-fsHO-_vJDTbiTU",
"id": {
"kind": "youtube#video",
"videoId": "pyrzHIIPW44"
},
"snippet": {
"publishedAt": "2020-06-08T18:07:11Z",
"channelId": "UCdYVQ4i7eZD_GJkL4yxkKCw",
"title": "KPOP Changed the Music Video Industry",
"description": "Join Rondell Sheridan and I, as we explore how KPop music videos are accelerating the rise of global music video budgets.",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/pyrzHIIPW44/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/pyrzHIIPW44/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/pyrzHIIPW44/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "Olufemii",
"liveBroadcastContent": "none",
"publishTime": "2020-06-08T18:07:11Z"
}
},
{
"kind": "youtube#searchResult",
"etag": "AsqtyXtXoYIQ-pVRSA0n2xic6uc",
"id": {
"kind": "youtube#video",
"videoId": "VMu4tkg-HAc"
},
"snippet": {
"publishedAt": "2021-06-04T13:15:29Z",
"channelId": "UCDUI6xzccc1ZV41MgM1MixQ",
"title": "MOST VIEWED KPOP MUSIC VIDEOS of 2021 - MAY Releases!",
"description": "Join my patreon and enjoy extra content, that would help me a lot to continue making videos for you. -Patreon: ...",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/VMu4tkg-HAc/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/VMu4tkg-HAc/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/VMu4tkg-HAc/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "AE Top Musics",
"liveBroadcastContent": "none",
"publishTime": "2021-06-04T13:15:29Z"
}
},
{
"kind": "youtube#searchResult",
"etag": "HUXAOxW0HY9HaawvXTP-C0bNuIo",
"id": {
"kind": "youtube#video",
"videoId": "g5cP18IFtdI"
},
"snippet": {
"publishedAt": "2022-02-26T04:00:29Z",
"channelId": "UC4JMmZQS6WfOOV96_aigulg",
"title": "MOST VIEWED KPOP MUSIC VIDEOS IN THE FIRST 24 HOURS [Only 4th Generation]",
"description": "Here's the the list of kpop's most watched music videos only 4th generation in the first 24 hours of release! NEW: NMIXX - O.O ...",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/g5cP18IFtdI/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/g5cP18IFtdI/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/g5cP18IFtdI/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "BongBongKyu",
"liveBroadcastContent": "none",
"publishTime": "2022-02-26T04:00:29Z"
}
},
{
"kind": "youtube#searchResult",
"etag": "f1cs-GWI9n_n9aOvFNDhPCxa7gk",
"id": {
"kind": "youtube#video",
"videoId": "7el8kckasX4"
},
"snippet": {
"publishedAt": "2013-09-02T17:06:42Z",
"channelId": "UCLMtDePlMyiqv2XC_ByNEVQ",
"title": "Kpop Music Mondays - Seungri "Gotta Talk to You"",
"description": "We're talking about Seungri's \"Gotta Talk To You\" for this week's Kpop Music Monday and teaching you the limitations that come ...",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/7el8kckasX4/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/7el8kckasX4/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/7el8kckasX4/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "Eatyourkimchi Studio",
"liveBroadcastContent": "none",
"publishTime": "2013-09-02T17:06:42Z"
}
}
]
}
Loading