youtube playlist로 만든 노래 플레이어에 필터 기능 구현하기

하나의 playlist는 모두 한 명의 artist의 노래로만 구성되었다는 전제입니다.

 

1. 가수 정보를 추가합니다.

 

  // 가수 데이터를 추가한 뒤 노래 배열 반환

  const allSongs = singerData

    .map((singer) => {

      const songs = singer.songList.map((song) => {

        const singerName = song.snippet.channelId === "UCXXXXX" ? "name1" : "name2";

        return { ...song, singer: singerName };

      });

      return [...songs];

    })

    .flat();

 

=> playlist에 담긴 노래 리스트마다 singerName 프로퍼티를 추가합니다.

2. 어느나라의 노래인지를 판별할 정보는 youtube api에 없어 수작업으로 지정합니다.

 

  const koreaCategorySet = new Set();

  const japanCategorySet = new Set();

  const othersCategorySet = new Set();

  for (const song of allSongs) {

    if (koreaMusicTitles.some((title) => song.snippet.title.includes(title))) {

      koreaCategorySet.add(song);

    } else if (japanMusicsTitles.some((title) => song.snippet.title.includes(title))) {

      japanCategorySet.add(song);

    } else if (otherMusicTitles.some((title) => song.snippet.title.includes(title))) {

      othersCategorySet.add(song);

    }

  }

 

=> 한국노래, 일본노래 등의 배열을 만들어 노래 제목을 포함한다면 set에 추가하도록 했습니다. 중복 데이터를 방지하기 위함입니다.

3. 필터링을 해줍니다.

  // 필터하기

  const filteredSongs = allSongs.filter((song) => {

    if (selectedSingerFilter !== "all" && !song.singer.includes(selectedSingerFilter)) {

      return false;

    }

    if (selectedRegionFilter === "korea" && !koreaCategorySet.has(song)) {

      return false;

    }

    if (selectedRegionFilter === "japan" && !japanCategorySet.has(song)) {

      return false;

    }

    if (selectedRegionFilter === "others" && !othersCategorySet.has(song)) {

      return false;

    }

    return true;

  });

=> 노래별로 국가 정보를 추가해도 됩니다. 그게 더 확장성이 좋고 간편합니다.

이 이상 카테고리를 만들지 않고 singer와 region만 추가할 예정이기 때문에 곧바로 set과 비교하도록 했습니다.