Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 회고록
- 기획
- vuex
- 로그인
- 정리
- 뷰
- Git
- vue
- database
- Docker
- nginx
- react-query
- 셋팅
- vsCode
- extension
- 배포
- react
- javascript
- AWS
- login
- 토이프로젝트
- 신상마켓
- Firebase
- jwt
- vue login
- 플러그인
- express
- PWA
- plugin
- 프론트
Archives
- Today
- Total
강디너의 개발 일지
유튜브 이용해서 Music Player 기획 본문
728x90
목적
- 회사 라운지 노래 컨트롤
- 내가 듣고 싶은 노래들 저장
- 다른 분들이 저장한 노래 듣기
- 내 공부
총 5개의 페이지
- 홈 화면
- 마이 페이지 화면
- 검색 결과 화면
- 플레이 리스트 화면
- 앱 전용 플레이 리스트 화면
홈 화면
1. 로고
2. 검색창
- 검색 결과 페이지로 이동
3. 로그인
- 로그인할 경우 마이페이지, 로그아웃 버튼 공개
- 로그아웃 버튼 클릭 시 홈 화면으로 이동
4. 마이 플레이 리스트
- 로그인하지 않을 경우 숨김 처리
- 해당 그룹 목록의 첫 번째 유튜브 썸네일
- 클릭 시 플레이 리스트 화면으로 이동
5. 공개 플레이 그룹
- 등록된 그룹 썸네일 표시
- Like 기능
- 클릭 시 플레이 리스트 화면으로 이동
6. 앱 재생 플레이어
- 앱에 틀어져있는 유튜브 컨트롤할 수 있는 컨트롤러
- 딜리셔스 이메일을 쓰는 사람만 보임
- 유튜브 재생, 정지, 다음곡, 이전곡, 볼륨 컨트롤 기능
- 재생 목록 볼 수 있는 메뉴 기능
- 재생 목록 메뉴에서 영상 삭제 기능
마이페이지 화면
1. 내 그룹
- 내 그룹 리스트
- 그룹 추가, 수정, 삭제 기능
- 그룹 추가, 수정 버튼 클릭 시 팝업 표시
- 수정, 삭제 기능은 썸네일에 Icon으로 표시
- 썸네일 클릭 시 플레이 리스트 화면으로 이동
2. 내가 좋아하는 그룹
- 내가 Like를 누른 그룹 리스트
- 썸네일 클릭 시 플레이 리스트 화면으로 이동
- Like를 다시 누르면 삭제
1. 검색 결과 리스트
- Youtube 검색을 통해서 긁어온 리스트
- 그룹을 선택 후 youtube 영상을 추가하는 기능
플레이 리스트 화면
1. 유튜브 재생 화면
2. 유튜브 재생 목록
- 삭제 기능 -> 자신이 등록한 그룹일 경우에만 버튼 노출
- 순서 바꾸기 ? (미정)
3. 공개된 플레이 그룹 리스트
- 클릭 시 해당 플레이 리스트 화면으로 이동
앱 전용 플레이 리스트 화면
1. 유튜브 재생 화면
- 앱은 특정 페이지 하나만 바라보고 있으면 됨
- 앱은 충전기 꽂고 스피커 연결하면 끝
- 홀드 해도 백그라운드에서 실행될 수 있도록 앱 개발
반응형
'Javascript > 기획' 카테고리의 다른 글
기획 - 유튜브 API 를 이용해서 플레이 리스트 만들기 (0) | 2020.01.08 |
---|---|
프론트부터 배포까지 기획_v5 (0) | 2019.02.25 |
프론트부터 배포까지 기획v_4 (0) | 2019.02.18 |
프론트부터 배포까지 기획 v_3 (0) | 2019.01.20 |
프론트부터 배포까지 기획_v2 (0) | 2018.12.04 |
Comments