# flow

# stack

react-player, nextjs, tailwindcss, zustand
localstorage 사용
spring, youtube data api v3, mysql

# erd

# 기본 UI

📌 사이드바에서 재생, 정지, 재생바 이동 가능
📌 아래 현재 재생 노래를 클릭하면 모달화면

# 플레이리스트 create

📌 제목만 넣으면 인증된 유저 id와 같이 DB에 저장

# 유튜브URL create

📌 유튜브 URL를 넣으면 목록에 추가

유튜브 url만 있으면 작동은 하는데 제목이나, 태그 이미지 등을 받아오기 위해서 youtube data api v3를 사용해서 백엔드에서 추가정보를 받아DB에 저장

# 유튜브URL read(선택 후 실행)

📌 재생을 하려다가 실패를 하는 경우는 유튜브에서 받아오더라도 권한 문제로 실패하는 것으로 보인다. 이럴 경우 삭제를 해주어야 한다.

url 경로 복사 가능

로컬스토리지에 노래정보, 노래플레이리스트, 재생방법, 반복재생 등 저장

DB에서 재생 목록을 불러오지 않아도 로컬스토리지 정보로 실행 가능

# 유튜브URL delete

# 플레이리스트 delete

# 기타 기능

이전 곡 재생, 다음 곡 재생, 임의 재생, 순차재생, 1곡재생, 1곡반복재생, 전체반복재생

# 만들면서 했던 고민

## 1. UI, 반응형, 애니메이션 등을 고려하여 제작,

update 기능은 불필요 할것이라고 판단
create를 위해서 추가로 모달창을 열어야 하나 고민하였지만 초기화면에서는 플레이리스트 추가할 수 있게하고, 플레이리스트를 클릭하면 노래를 추가할 수 있게 제작

## 2. 재생되지 않는 노래

재생을 해도 안되는 노래는 재생할 때 판단이 가능해서 재생을 하면 제목을 변경해서 사용자가 삭제할 수 있게 제작

## 개선할 점

1. 노래목록 스크롤 문제 : 현재 스크롤을 감춰놓아서 노래목록을 직접 아래로 내려야 한다.

2. 랜덤 재생 문제 : 현재 실행한 곡도 랜덤 요소에 포함이 되어있다.

3. 여러 브라우저 창이 열린 경우, 한 화면에서 재생을 하게 되거나 노래 등이 바뀌어도 다른 브라우저에서는 변경이 되지 않는다.

4. 등록 및 삭제 시 로딩 스피너 추가 필요

5. 로컬스토리지 삭제시 어떻게 처리되는지 확인 필요