yeomko22 / groove Goto Github PK

• 현재 떠있는 gcp cluster ip 주소에 도메인 적용하기

변경사항

• 플레이어 디자인 변경
• 네비게이션 수정 (계정, 업로드 부분 제거하고, 검색버튼 추가)

• 최신순, 인기순으로 트랙 가져오는 API 구축

• ingress에 ssl 적용해서 https로 통신하도록 구현하기

이전에는 카테고리 이름을 직접적으로 보여줬으나 이제는 카테고리별 새로운 제목을 달아줌
const.js 파일 내 카테고리 리스트를 객체로 변경 후 네 가지 속성 적용함.

• morning
• afternoon
• night
• dawn

시간대별로 각각의 음악 리스트를 띄워줌.

• 유저별 상세 페이지 API 구축

• 검색 API 구현할 것
• 검색 쿼리에 해당하는 아티스트, 트랙을 함께 섞어서 보여줄 것

1. 유저 정보표시
   
2. 유저 트랙 표시
   

• GKE 클러스터 pv에 지금 수집해놓은 m3u8 파일을 mp3, hls 포맷으로 변경하여 채워넣을 것
• 프런트엔드 단에서 스트리밍이 잘 이루어지는지 중간중간 체크할 것

• travisCI를 이용해서 CICD 파이프라인 구축

• prometheus 공부해서 현재 배포되어 있는 파드들에 적용해 볼 것

• 사용자 회원가입, 로그인 API 개발할 것

Description

현재상태

MusicContext에서 전역의 state를 관리하고 있음.
MusicContext에서 관리되는 것

• 현재 재생중인 track에 관한 정보 (트랙 Hls, 트랙 이름 등등 static한 정보들)
• 현재 음악의 재생 여부 (isPlaying)

MusicPlayer는 음악 실제 재생에 관한 정보들을 담고 있는 컴포넌트임. MusicContext의 정보를 사용하며 세부적으로 현재 음악이 몇 분 간 재생되었는지 등 실제 오디오 컨트롤에 관한 모든 정보를 관리하고 있음.

변경할 내용

음악 플레이에 관한 정보들 (음악이 현재 몇 분간 재생되었는지, 음악의 길이는 몇 분인지 등)이 global하게 필요해짐. track페이지나 user page에서도 플레이바를 보여줘야 하기 때문. 그래서 MusicPlayer컴포넌트에 있던 상태들을 MusicContext로 옮기는 작업을 진행할 계획임.

(일단 테스트를 해보고 혹시 속도 지연이 생기면 다른 방법을 해볼 것)

• 트랙 페이지 상단 부분
  
  • 플레이바 외 (제목, 가수 이름, 재생 버튼, 트랙이미지) - 작업 1
  • 플레이바 작업 - 작업 2
• 트랙페이지 하단 부분
  
  • 가사 추가 - 작업 3
  • 댓글 추가 - 작업 4

• 현재 수집된 아티스트는 약 30명 가량, 곡 수는 600곡 정도
• 아직 서비스로 보여지기에는 부족한 상황
• 데이터를 계속 더 모아보자

• 처음 메인 페이지 접속 시 정보를 전달해주어야 하는 api 구현

• swagger 적용해서 API 시각화할 것

• 각 트랙별 태그 수집하는 크롤러 구현
• api에서 태그 모델 생성 및 디비 반영
• 태그 API 추가

• genre로 track을 가져올 때 genre 문자열에 공백이 들어가는 경우가 발생한다.
• 이 경우에는 url을 통해 요청할 때 에러가 발생하므로 이를 +로 치환해서 입력받도록 수정한다.

• 현재 travis 단에서 test 과정이 없음
• 테스트 코드 추가할 것
• go build 수행하고 제대로 빌드 되는지 확인하는 단계 추가할 것

• 대략 노란색 박스 친 부분을 컴포넌트로 만들 것.
• 네비게이션
• 메인페이지
• 백그라운드 뮤직

🔧메인 페이지 손봐야하는 부분

• 데이터 잘라서 가져오기(페이징?)
• 데이터 로딩할 때 주소에 / 들어간 것 해결하기
• 데이터 로딩 UI추가
• 데이터 로딩 실패했을때 에러핸들링

• 저화질(썸네일 이미지) -> 고화질(아트워크)로 수정
• 아트워크 없을 경우, 가수 커버 이미지로 셋팅하기

• 개별 트랙별 댓글 수집
• 댓글 작성자 정보 및 프로필 사진 수집

• travis 단에서 빌드에 실패하거나 배포가 완료되면 카카오톡 메시지 API로 알림이 오도록 구현

• 트랙별 댓글 수집기 구현
• 트랙별 댓글 API 구현

현재는 모든 genre리스트를 불러와서 화면에 뿌려주고 있음
적절히 tag, genre, hottest 등을 선별해서 메인 화면에 뿌려주기.

튜플 구성: (A,B)
A: tag, genre, hottest등 종류
B: A 내의 세부 카테고리

완료한 작업

• 재생/ 멈춤
• 음악 재생 시간 표시
• 음악 재생 구간 변경

더 추가할 내용

• 음량
• 반복

• 수집한 트랙들 가운데 hls 파일이 누락된 것들을 찾아내어 hls 추가 수집 및 업로드

• UI 작업 진행이 어느 정도 완료되면 gke에 frontend deployment 추가할 것