Merge pull request #305 from prgrms-web-devcourse-final-project/refactor/useSpotifyAuty

[refactor] useSpotifyAuth 리펙토링

Author: kangsuyeong

src/App.tsx

@@ -19,7 +19,7 @@ import { useSheetStore } from './store/sheetStore';
 import KaKaoRedirection from '@/components/KaKaoRedirection';
 import { useSSE } from '@/hooks/useSSE';
 import { useYotube } from '@/hooks/useYoutube';
-import { useSpotifyAuth } from '@/hooks/useSpotifyAuth';
+import { useSpotifyAuth } from '@/hooks/spotify/useSpotifyAuth';
 import UserProfile from '@/pages/user/UserProfile';
 import PublicRoute from '@/routes/PublicRoute';
 

src/components/modalSheet/MusicSearchSheet.tsx

@@ -7,12 +7,13 @@ import defaultImage from '@assets/images/default.png';
 import axios from 'axios';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import LoadingMini from '../loading/LoadingMini';
+import { useSpotifyStore } from '@/store/spotifyStore';
 
 function MusicSearchSheet() {
   const [searchText, setSearchText] = useState('');
   const [query, setQuery] = useState('');
   //로컬 스토리지에서 토큰 가져오기
-  const spotifyAccessToken = localStorage.getItem('spotify_access_token');
+  const { token } = useSpotifyStore();
 
   // 무한 스크롤 감지용 ref
   const loadMoreRef = useRef<HTMLDivElement | null>(null);
@@ -23,7 +24,7 @@ function MusicSearchSheet() {
       `https://api.spotify.com/v1/search?q=${encodeURIComponent(query)}&type=track&offset=${pageParam}`,
       {
         headers: {
-          Authorization: `Bearer ${spotifyAccessToken}`,
+          Authorization: `Bearer ${token}`,
         },
       },
     );
@@ -82,7 +83,7 @@ function MusicSearchSheet() {
 
   //음악 리스트 렌더링
   const musicListRender = () => {
-    if (!spotifyAccessToken) {
+    if (!token) {
       return (
         <div className="h-[calc(100vh-154px)]">
           <InfoMessage text="Spotify 로그인이 필요합니다." />

src/hooks/useSpotifyAuth.ts renamed to src/hooks/spotify/useSpotifyAuth.ts

@@ -1,27 +1,25 @@
 import axios from 'axios';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useAuthStore } from '@/store/authStore';
+import { useSpotifyStore } from '@/store/spotifyStore';
 
 const CLIENT_ID = import.meta.env.VITE_SPOTIFY_CLIENT_ID;
 const CLIENT_SECRET = import.meta.env.VITE_SPOTIFY_CLIENT_SECRET;
 const TOKEN_URL = 'https://accounts.spotify.com/api/token';
 
 // 클라이언트 자격 증명 방식 (Client Credentials Flow)
 export const useSpotifyAuth = () => {
-  const [token, setToken] = useState<string | null>(null);
   const { isAuthenticated } = useAuthStore();
-
+  const { setToken, isTokenValid } = useSpotifyStore();
   useEffect(() => {
-    if (isAuthenticated) {
-      checkTokenValidity();
-    } else {
-      // 인증되지 않은 상태에서는 아무 작업도 하지 않음
-      setToken(null);
+    // 로그인 되어있거나 토큰이 유효하지 않는 경우
+    if (isAuthenticated && !isTokenValid()) {
+      fetchAccessToken();
     }
   }, [isAuthenticated]);
 
   // Access Token을 가져오는 함수 (클라이언트 자격 증명 방식)
-  const getAccessToken = async () => {
+  const fetchAccessToken = async () => {
     const authHeader = `Basic ${btoa(`${CLIENT_ID}:${CLIENT_SECRET}`)}`; // client_id와 client_secret을 Base64로 인코딩
 
     try {
@@ -31,30 +29,11 @@ export const useSpotifyAuth = () => {
           'Content-Type': 'application/x-www-form-urlencoded',
         },
       });
-
       const { access_token, expires_in } = response.data;
-
-      // Access Token을 로컬 스토리지에 저장하고 상태를 업데이트
-      const expiresAt = Date.now() + expires_in * 1000;
-      localStorage.setItem('spotify_access_token', access_token);
-      localStorage.setItem('spotify_expires_at', expiresAt.toString());
-      setToken(access_token);
+      // useSpotifyStore zustand에 업데이트
+      setToken(access_token, expires_in);
     } catch (error) {
       console.error('Error fetching Spotify access token:', error);
     }
   };
-
-  // 토큰 유효성 검사 (만료되었으면 새로 가져옴)
-  const checkTokenValidity = () => {
-    const storedToken = localStorage.getItem('spotify_access_token');
-    const expiresAt = localStorage.getItem('spotify_expires_at');
-
-    if (!storedToken || !expiresAt || Date.now() > Number(expiresAt)) {
-      getAccessToken();
-    } else {
-      setToken(storedToken);
-    }
-  };
-
-  return { token };
 };

src/store/spotifyStore.ts

@@ -0,0 +1,34 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface SpotifyState {
+  token: string | null;
+  expiresAt: number | null;
+  setToken: (token: string, expiresIn: number) => void;
+  isTokenValid: () => boolean;
+  clearToken: () => void;
+}
+
+export const useSpotifyStore = create(
+  persist<SpotifyState>(
+    (set, get) => ({
+      token: null, // spotify 토큰
+      expiresAt: null, // 토큰 만료시간
+
+      setToken: (token, expiresIn) => {
+        const expiresAt = Date.now() + expiresIn * 1000;
+        set({ token, expiresAt });
+      },
+      // 토큰 유효성 검사
+      isTokenValid: () => {
+        const { token, expiresAt } = get();
+        return !!token && !!expiresAt && Date.now() < expiresAt;
+      },
+
+      clearToken: () => set({ token: null, expiresAt: null }),
+    }),
+    {
+      name: 'spotify-auth',
+    },
+  ),
+);