[Team Project] Spotify API 활용한 음악 공유 커뮤니티 (3)

새로고침 시 마다 다른 플레이리스트 보여주기

api로 받아온 플레이리스트는 배열 형식으로 다른 플레이리스트 정보를 객체로 담고 있었다. 이미 메인페이지 다른 부분에서 캐러셀을 많이 사용하고 있었기 때문에 캐러셀을 또 다시 사용하는 것보다 화면이 렌더링 될 때마다 다른 플레이리스트 화면에서 보여주고 싶었다.

생각보다 로직이 간단했는데 컴포넌트 렌더링 시 다른 Index 값을 생성해 해당 index값 데이터를 사용하면 됐다.
우선 받아온 데이터 배열 속 객체 수가 10개였기 때문에 0부터 9까지의 랜덤한 수를 구해주는 로직을 작성했다.

1부터 9사이의 랜덤한 수 구하기
Math.floor(Math.random() * 10)

0부터 n까지의 랜덤한 수 구하기
Math.floor(Math.random() * (n + 1))

function getRandomNumber(max) {
  return Math.floor(Math.random() * (max + 1));
}

// 예제 사용
const max = 20;
const randomNumber = getRandomNumber(max);
console.log(`0부터 ${max}까지의 랜덤한 수: ${randomNumber}`);

"use client";
import { SpotifyFeaturedPlaylist } from "@/types/spotify.type";
import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import Link from "next/link";
import { useEffect, useState } from "react";
import TrendingSkeleton from "./TrendingSkeleton";
import { Tooltip } from "react-tooltip";
import "react-tooltip/dist/react-tooltip.css";

const Trending = () => {
  const [selectedPlaylist, setSelectedPlaylist] = useState<SpotifyFeaturedPlaylist>({
    id: "",
    name: "",
    description: "",
    imageUrl: "",
    trackLink: "",
    tracksCount: 0
  });
  const {
    data: featuredPlaylists,
    isPending,
    isError,
    isSuccess
  } = useQuery({
    queryKey: ["trending"],
    queryFn: async () => {
      const response = await axios<SpotifyFeaturedPlaylist[]>("/api/spotify/featuredPlaylists");

      return response.data;
    }
  });

  useEffect(() => {
    const randomIndex = Math.floor(Math.random() * 10);

    if (isSuccess) {
      setSelectedPlaylist(featuredPlaylists[randomIndex]);
    } else return;
  }, [featuredPlaylists]);

  if (isPending) return <TrendingSkeleton />;

  return (
    <div className="w-full flex flex-col p-2 gap-y-2">
      {isSuccess && (
        <>
          <span className="text-base">추천 플레이리스트 🎵</span>
          <Link href={selectedPlaylist.trackLink} target="_blank" rel="noopener noreferrer">
            <div className="flex flex-col text-sm gap-2 place-self-center">
              {selectedPlaylist?.imageUrl ? (
                <img
                  src={selectedPlaylist.imageUrl || ""}
                  alt={selectedPlaylist.name}
                  height={200}
                  width={200}
                  className="w-[200px] h-[200px] max-w-[180px] max-h-[180px] object-cover rounded-md self-center"
                />
              ) : null}
              <div className="flex flex-col text-sm gap-2 text-center">
                <p
                  className="h-[15px] text-base hover:underline"
                  data-tooltip-id="플레이리스트 바로가기"
                  data-tooltip-content="바로가기"
                >
                  {selectedPlaylist.name}
                </p>
              </div>
            </div>
          </Link>
        </>
      )}
    </div>
  );
};

export default Trending;