플레이리스트에 음악 추가하기

플레이리스트에 음악을 추가하기 위해 곡이 재생한 곡이 누적되도록 코드를 작성했다.

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이면 음악을 추가하지 않도록 해주었다.

YOUTUBE API 할당량