플레이리스트에 음악을 추가하기 위해 곡이 재생한 곡이 누적되도록 코드를 작성했다.
setPlaylist((prev) => {
const updatedPlaylist = [...prev, trackInfo];
localStorage.setItem("playlist", JSON.stringify(updatedPlaylist));
return updatedPlaylist;
});
또한 localStorage에도 플레이리스트를 저장하여 새로고침 시에도 데이터가 유지되도록 하였다.
const removeSong = (e, index) => {
e.stopPropagation();
const newPlaylist = tracks.filter((_, i) => i !== index);
localStorage.setItem("playlist", JSON.stringify(newPlaylist));
setPlaylist(newPlaylist);
setEllipsis(false);
};
삭제 기능은 filter() 함수를 이용하여 구현하였다. map() 함수처럼 내부 요소를 순회한 후 조건을 만족하는 요소들을 배열로 만들어 리턴한다.
이 코드에서 i는 내부 요소의 인덱스이고, index는 화면에 그려진 목록의 index이다. i와 index가 같을 경우 그 값을 제외해야하기 때문에 다시 말해서, i를 순회하면서 일치하는 index만 제외하면 되기 때문에 일치하지 않는 것들이 true로 리턴되도록 로직을 작성하였다.
이 부분을 클릭하면 밑에 같은 음악이 추가되는 현상이 발생했다. 그래서 이것을 해결하기 위해
const trackInfoOne = {
id,
name,
artists,
imgUrl,
state: "playlist",
videoId: fetchedVideoId,
};
재생할때, 플레이어로 음악의 정보가 넘어가는데 이 정보에 플레이리스트에서 클릭하는 경우만 state 값이 들어가도록 하였다.
if (trackInfo.state === "playlist") return;
그리고 음악을 재생하는 부분에서 state 값이 playlist이면 음악을 추가하지 않도록 해주었다.