Spotify API 불러오기

const BASE_URL = "<https://accounts.spotify.com/api/token>";

export const getAccessToken = async () => {
  const authParam = {
    grant_type: "client_credentials",
    client_id: import.meta.env.VITE_SPOTIFY_CLIENT_ID,
    client_secret: import.meta.env.VITE_SPOTIFY_CLIENT_SECRET,
  };

  try {
    const res = await axios.post(
      BASE_URL,
      new URLSearchParams(authParam).toString(),
      {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      }
    );
    window.localStorage.setItem("token", res.data.access_token);
    return res.data.access_token;
  } catch (error) {
    console.error(error);
    throw error;
  }
};

token은 이러한 코드로 가져올 수 있다. 그리고 token은 API를 불러올때 꼭 필요한 데이터라서 제대로 가져오는것이 매우 중요하다.

export const getArtist = async (id: string) => {
  const token = await getAccessToken();
  const response = await axios.get(`https://api.spotify.com/v1/artists/${id}`, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });

  return response.data;
};

이런식으로 아티스트 API를 가져올때 Autorization에 token을 넣어서 데이터를 불러올 수 있다. 다른 API들도 마찬가지로 Autorization부분에 token을 넣으면 된다.

홈 화면

홈 화면을 어떤 식으로 구현할까에 대해서 고민이 많았다. 결국엔 베이스를 spotify 홈페이지로 정하고 만들었다. 세세한 부분은 똑같이 따라 하려고 하지 않고 조금씩 다르게 만들어서 다른 사이트 느낌이 나도록 노력하였으나 쉽지 않았다. 디자인적인 부분은 기능 구현을 진행하면서 기능에 맞게 계속해서 수정해야겠다.

지금 구현된 홈 화면의 모습이다. Header부분은 아직 결정하지 못한 상태이고, 한국, 미국, 일본 탭을 만들어서 나라별 음악을 가져올 수 있도록 하였는데, 한국 부분에서 한국 음악이 하나도 나오지 않았다. spotify API의 countrycode에 KR을 넣어서 가져왔는데도 외국 음악들만 나와서 아쉬웠다.

Loading 컴포넌트

API를 가져올 때 약간의 delay가 발생한다. 때문에 isLoading state를 만들어서 값이 true일때는 Loading 컴포넌트가 화면에 그려지도록 구현하였다. 구글링을 통해 loading spinner 애니메이션을 가져왔다.

useEffect(() => {
    const fetchNewReleases = async () => {
      setIsLoading(true);
      try {
        const music = await getNewReleases(countryCode);
        setMusic(music);
      } catch (error) {
        console.error("Error:", error);
      } finally {
        setIsLoading(false);
      }
    };
    fetchNewReleases();
  }, [countryCode]);

이렇게 API 함수를 불러온뒤 isLoading이 false가 되도록 코드를 작성했다.

아티스트 페이지