-
Notifications
You must be signed in to change notification settings - Fork 70
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
Changes from 33 commits
Commits
Show all changes
48 commits
Select commit
Hold shift + click to select a range
bc76afd
:memo: docs(todo): 2단계 기능 요구사항을 작성한다
airman5573 b063ec9
:lipstick: style(ui): 버튼을 디자인 한다
airman5573 f4e6e24
:lipstick: style(ui): video list에 반응형 grid를 적용한다
airman5573 7cae651
:bug: fix(ui): 버튼 디자인 수정 및 적용
airman5573 0247a66
:bug: fix(ui): modal을 닫아도 메인 페이지에 있는 video-list는 사라지지 않도록 한다
airman5573 c9c500c
:memo: docs(todo): 기능 구현 목록을 수정한다
airman5573 e96c15a
:memo: docs(todo): 기능 구현 목록에서 구현한 아이템을 체크한다
airman5573 146e9a8
:truck: chore(settings): 함수 길이를 15자로 제한하는 rule을 제거한다
airman5573 ad5df35
:sparkles: feat(storage): video list를 저장하고 가져오는 역할을 하는 Class를 추가한다
airman5573 83802fc
:truck: chore(settings): 커밋 컨벤션 스코프를 추가한다
airman5573 8502ac1
:sparkles: feat(storage): video storage를 추가한다
airman5573 e09424e
:sparkles: feat(api): 저장된 비디오를 메인페이지에서 보여준다
airman5573 a2a9303
:truck: chore(settings): 커밋 컨벤션 스코프를 수정한다
airman5573 08a686b
:sparkles: feat(ui): 체크 버튼을 클릭해서 해당 영상을 볼 영상 혹은 본 영상 그룹에 귀속시킨다
airman5573 9df90aa
:sparkles: feat(ui): 저장된 영상을 삭제한다
airman5573 451e0e4
:recycle: refactor(ui): 공통으로 적용되는 css코드를 app.css로 뺀다
airman5573 a786ce1
:lipstick: style(ui): 활성화된 버튼을 hover했을때의 배경색을 변경한다
airman5573 ccdf939
:lipstick: style(ui): 반응형 디자인 관련 소스코드를 정리한다
airman5573 9f78f64
:lipstick: style: skeleton의 크기는 video-item을 따른다
airman5573 31b6160
:zap: perf(ui): scroll event listener대신 IntersectionObserver를 사용한다
airman5573 c9aa854
:recycle: refactor(cleanup): 소소한 부분들을 정리한다
airman5573 aa6e0ee
:recycle: refactor(api): api요청을 담당하는 util함수를 만든다
airman5573 3a06f56
:sparkles: feat(ui): 저장된 비디오가 없거나 필터링 결과가 없는 경우 이모지를 보여준다
airman5573 e58dd5e
:bug: fix(ui): 미디어쿼리 우선순위에 혼선이 생기지 않도록 범위를 지정한다
airman5573 b9acacd
:memo: docs(todo): 완료한 목록을 체크한다
airman5573 98b28e9
:bug: fix(logic): cache가 없는경우를 고려한다
airman5573 60043de
:recycle: refactor(cleanup): 유틸 함수를 한곳에 모아놓는다
airman5573 6d6e2fa
:bug: fix(logic): 올바른 함수를 사용한다
airman5573 8c0a1d3
:recycle: refactor(ui): 새로운 동영상이 불러와지고 일정시간 후에 scroll observer를 설치한다
airman5573 38d4981
:recycle: refactor: 소소한 수정
airman5573 22ffcf5
:lipstick: style(ui): 검색 모달의 검색 버튼과 입력 필드를 화면 크기에 맞게 조절한다
airman5573 939fc84
:lipstick: style(ui): 검색 결과에서 저장된 비디오의 저장 버튼은 제거하지 않고 disabled시킨다
airman5573 9d7b939
:white_check_mark: test: 동영상 검색에서 저장까지의 프로세스를 테스트하는 케이스를 추가한다
airman5573 454d601
:white_check_mark: test(ui): 저장된 동영상을 필터링 하는 테스트를 추가한다
airman5573 325c10e
:white_check_mark: test(ui): 저장된 동영상을 삭제하는 테스트를 추가한다
airman5573 799fb6b
:bug: fix: dummy data가 아닌 실제 api를 사용한다
airman5573 3519d70
:sparkles: feat(html): 1. 유튜브 썸네일이 아닌 실제 동영상 플레이어를 넣는다. |2. 영상의 제목을 링…
airman5573 5a12a16
:recycle: refactor(ui): esc키를 누르면 모달이 닫힌다
airman5573 43a3d0c
:lipstick: style(ui): 동영상 플레이어를 responsive하게 만든다
airman5573 acb80bd
:zap: perf(storage): 불필요한 cache를 갱신을 지양한다
airman5573 92bf38a
:recycle: refactor: hidden attribute 대신에 class로 가시성을 관리한다
airman5573 7e5d13e
:recycle: refactor(cleanup): videoStorage에 인자값을 넣어주지 않고 안에서 상수를 바로 사용한다
airman5573 6401dd7
:recycle: refactor(cleanup): tagName대신 localName을 활용한다
airman5573 fb917e6
:bug: fix(ui): app대신 window에 이벤트를 건다
airman5573 76a61f6
:recycle: refactor: for attribute대신에 data-* attribute를 사용한다
airman5573 8f5444c
:recycle: refactor: getAttribute대신에 dataset을 사용한다
airman5573 d79b9cc
:bug: fix(api): 검색 결과가 더이상 없는 경우에도 추가적으로 요청되는 문제를 해결한다
airman5573 c859b46
:bug: fix: 검색 결과가 없을때 없다고 보여준다
airman5573 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" | ||
} | ||
} | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
import { | ||
LOCAL_STORAGE_VIDEO_LIST_KEY, | ||
MAX_SAVABLE_VIDEOS_COUNT, | ||
SERVER_URL, | ||
} from '../../src/js/constants/constant'; | ||
import VideoStorage from '../../src/js/storage/videoStorage'; | ||
import { hasProperty } from '../../src/js/utils'; | ||
import testid from '../support/utils/test-id'; | ||
|
||
describe('검색 모달을 열어 검색하고 동영상을 저장하는 프로세스를 테스트한다', () => { | ||
const storage = new VideoStorage(LOCAL_STORAGE_VIDEO_LIST_KEY, MAX_SAVABLE_VIDEOS_COUNT); | ||
|
||
before(() => { | ||
storage.clear(); | ||
cy.visit('http://localhost:9000/'); | ||
}); | ||
|
||
after(() => { | ||
storage.clear(); | ||
}); | ||
|
||
it('검색 버튼을 눌렀을때 검색 모달이 뜬다', () => { | ||
cy.get(testid`open-search-modal-button`).click(); | ||
cy.get(testid`search-modal`).should('be.visible'); | ||
}); | ||
|
||
it('검색어를 입력하고 검색 버튼을 누르면 동영상 리스트가 출력된다', () => { | ||
cy.fixture('youtube-videos').then(videos => { | ||
cy.intercept('GET', `${SERVER_URL}/dummy?*`, { | ||
statusCode: 200, | ||
body: videos, | ||
}).as('search-video'); | ||
|
||
cy.get(testid`search-input`).type('anything'); | ||
cy.get(testid`search-button`).click(); | ||
|
||
cy.wait('@search-video') | ||
.its('response.body') | ||
.then(({ items }) => { | ||
cy.get(testid`search-result-video-item`).should('have.length', Math.min(items.length)); | ||
}); | ||
}); | ||
}); | ||
|
||
it('검색 결과에서 동영상 저장 버튼을 누르면 localStorage에 저장된다', () => { | ||
cy.fixture('youtube-videos').then(videos => { | ||
cy.get(testid`save-video-button`) | ||
.each($button => { | ||
cy.wrap($button).click(); | ||
}) | ||
.then(() => { | ||
const videoSet = storage.load({}); | ||
const ids = videos.items.map(({ id }) => id.videoId); | ||
const isSame = ids.every(id => hasProperty(videoSet, id)); | ||
expect(isSame).to.be.true; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍 |
||
}); | ||
}); | ||
}); | ||
}); |
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
const testid = id => { | ||
return `[data-testid="${id}"]`; | ||
}; | ||
|
||
export default testid; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
tagged template 활용 좋습니다.