앨범 조회 로직

src/features/main/main-album.tsx

@@ -4,18 +4,18 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 
 import { useUser } from "@/provider/userProvider";
-import { Album, getAllAlbums } from "@/services/albumService";
+import { AlbumResponse, getAllAlbums } from "@/services/albumService";
 import SquareContainer from "@/components/container/square-container";
 
 const MainAlbum = () => {
   const router = useRouter();
   const { user } = useUser();
-  const [albums, setAlbums] = useState<Album[]>([]);
+  const [albums, setAlbums] = useState<AlbumResponse[]>([]);
 
   useEffect(() => {
     const getAlbums = async () => {
       try {
-        const data = await getAllAlbums();
+        const data = await getAllAlbums(0, 10);
         setAlbums(data);
       } catch (error) {
         console.error('앨범 로딩 실패:', error);
@@ -38,15 +38,15 @@ const MainAlbum = () => {
         <p className="font-bold text-xl">님을 위한 앨범</p>
       </div>
       <div className="w-full overflow-x-auto flex gap-x-4">
-        {albums.map((album) => (
+        {albums.map(({ albumResponseDto: album, profileResponseDto: profile }) => (
           <SquareContainer
             key={album.uuid}
             src={album.artImage}
             name={album.title}
-            description={`${album.releaseDate} · ${album.description}`}
+            description={`${album.releaseDate} · ${profile.name}`}
             design="rounded-xl"
             onClickName={() => router.push(`/album/${album.uuid}`)}
-            onClickDescription={() => router.push(`/user/${album.uuid}`)}
+            onClickDescription={() => router.push(`/user/${profile.name}`)}
           />
         ))}
       </div>

src/lib/axios.ts

@@ -1,9 +1,34 @@
-import axios from 'axios';
-
-export const api = axios.create({
-  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '',
-  withCredentials: true,
-  headers: {
-    'Content-Type': 'application/json',
-  },
-});
+import axios, { AxiosInstance } from 'axios';
+
+const createAxiosInstance = (): AxiosInstance => {
+  const instance = axios.create({
+    baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  instance.interceptors.request.use(
+    (config) => {
+      const cookies = document.cookie;
+      const access_token = cookies
+        .split(';')
+        .map(cookie => cookie.trim())
+        .find(cookie => cookie.startsWith('access_token='))
+        ?.split('=')[1];
+
+      if (access_token) {
+        config.headers.Authorization = `Bearer ${access_token}`;
+      }
+
+      return config;
+    },
+    (error) => {
+      return Promise.reject(error);
+    }
+  );
+
+  return instance;
+};
+
+export const api = createAxiosInstance();

src/provider/userProvider.tsx

@@ -64,6 +64,12 @@ export function UserProvider({ children }: { children: React.ReactNode }) {
     }
 
     fetchUser();
+
+    const interval = setInterval(() => {
+      fetchUser();
+    }, 60 * 60 * 1000);
+
+    return () => clearInterval(interval);
   }, [isLoggedIn]);
 
   const logout = useCallback(async () => {

src/services/albumService.ts

@@ -1,4 +1,5 @@
-import { api } from '@/lib/axios';
+import { api } from "@/lib/axios";
+import axios from "axios";
 
 export interface Album {
   uuid: string;
@@ -8,12 +9,46 @@ export interface Album {
   releaseDate: string;
 }
 
-export const getAllAlbums = async (): Promise<Album[]> => {
+export interface Track {
+  uuid: string;
+  title: string;
+  lyric: string;
+  artUrl: string;
+}
+
+export interface Profile {
+  name: string;
+  profileImage: string;
+  isMain: boolean;
+}
+
+export interface AlbumResponse {
+  albumResponseDto: Album;
+  trackResponseDtos: Track[];
+  profileResponseDto: Profile;
+}
+
+export const getAllAlbums = async (
+  page = 0,
+  pageSize = 10
+): Promise<AlbumResponse[]> => {
   try {
-    const response = await api.get<Album[]>("/album");
+    const response = await api.get<AlbumResponse[]>("/album", {
+      params: {
+        page,
+        pageSize,
+      },
+    });
     return response.data;
   } catch (error) {
-    console.error('앨범 데이터 조회 실패:', error);
+    if (axios.isAxiosError(error)) {
+      console.error(
+        `앨범 데이터 조회 실패: ${error.response?.status}`,
+        error.message
+      );
+    } else {
+      console.error("앨범 데이터 조회 중 알 수 없는 오류 발생:", error);
+    }
     throw error;
   }
-}; 
+};