앨범 업로드 관련 오류 수정

BDD-CLUB · Nov 20, 2024 · 5ce975f · 5ce975f
1 parent dd425ee
commit 5ce975f
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 85 deletions.
diff --git a/src/components/modal/album-modal.tsx b/src/components/modal/album-modal.tsx
@@ -26,9 +26,14 @@ const AlbumModal = () => {
   const albumModal = useAlbumModal();
 
   const handleFileUpload = (files: File[]) => {
+    if (files.length > 0 && !files[0].type.startsWith("image/")) {
+      toast.error("이미지 파일만 업로드 가능합니다.");
+      return;
+    }
+
     setFiles(files);
 
-    if (files.length > 0 && files[0].type.startsWith("image/")) {
+    if (files.length > 0) {
       const imageUrl = URL.createObjectURL(files[0]);
       setPreviewImage(imageUrl);
     }
@@ -118,14 +123,11 @@ const AlbumModal = () => {
       reset();
       albumModal.onClose();
     } catch (error) {
-      if (error instanceof Error) {
-        toast.error(`문제가 발생하였습니다: ${error.message}`);
-      } else if (axios.isAxiosError(error) && error.response) {
-        toast.error(
-          `문제가 발생하였습니다: ${
-            error.response.data?.message || "알 수 없는 오류"
-          }`
-        );
+      if (axios.isAxiosError(error) && error.response?.data) {
+        const errorData = error.response.data;
+        toast.error(errorData.detail || "앨범 생성에 실패했습니다.");
+      } else if (error instanceof Error) {
+        toast.error(error.message);
       } else {
         toast.error("알 수 없는 오류가 발생했습니다.");
       }

diff --git a/src/features/main/bar.tsx b/src/features/main/bar.tsx
@@ -113,7 +113,7 @@ export function Bar() {
         if (!isLoggedIn) {
           signinModal.onOpen();
         } else {
-          router.push("/user/123");
+          router.push(`/user/${user?.uuid}`);
         }
       },
     },

diff --git a/src/features/main/main-album.tsx b/src/features/main/main-album.tsx
@@ -1,79 +1,33 @@
 "use client";
 
-import SquareContainer from "@/components/container/square-container";
-import { useUser } from "@/provider/userProvider";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 
+import { useUser } from "@/provider/userProvider";
+import { Album, getAllAlbums } from "@/services/albumService";
+import SquareContainer from "@/components/container/square-container";
+
 const MainAlbum = () => {
   const router = useRouter();
   const { user } = useUser();
+  const [albums, setAlbums] = useState<Album[]>([]);
+
+  useEffect(() => {
+    const getAlbums = async () => {
+      try {
+        const data = await getAllAlbums();
+        setAlbums(data);
+      } catch (error) {
+        console.error('앨범 로딩 실패:', error);
+      }
+    };
+
+    getAlbums();
+  }, []);
 
-  const dummy = [
-    {
-      id: 1,
-      src: "/images/music1.png",
-      name: "ROCK-STAR",
-      description: "2024 · IPCGRDN",
-      onClickName: () => router.push("/album/123"),
-      onClickDescription: () => router.push("/user/123"),
-    },
-    {
-      id: 2,
-      src: "/images/music1.png",
-      name: "ROCK-STAR",
-      description: "2024 · IPCGRDN",
-      onClickName: () => router.push("/album/123"),
-      onClickDescription: () => router.push("/user/123"),
-    },
-    {
-      id: 3,
-      src: "/images/music1.png",
-      name: "ROCK-STAR",
-      description: "2024 · IPCGRDN",
-      onClickName: () => router.push("/album/123"),
-      onClickDescription: () => router.push("/user/123"),
-    },
-    {
-      id: 4,
-      src: "/images/music1.png",
-      name: "BREAK",
-      description: "2018 · PALM",
-      onClickName: () => router.push("/album/123"),
-      onClickDescription: () => router.push("/user/123"),
-    },
-    {
-      id: 5,
-      src: "/images/music1.png",
-      name: "Thirsty",
-      description: "1988 · RARO",
-      onClickName: () => router.push("/album/123"),
-      onClickDescription: () => router.push("/user/123"),
-    },
-    {
-      id: 6,
-      src: "/images/music1.png",
-      name: "산책",
-      description: "EP · BDD",
-      onClickName: () => router.push("/album/123"),
-      onClickDescription: () => router.push("/user/123"),
-    },
-    {
-      id: 7,
-      src: "/images/music1.png",
-      name: "산책",
-      description: "EP · BDD",
-      onClickName: () => router.push("/album/123"),
-      onClickDescription: () => router.push("/user/123"),
-    },
-    {
-      id: 8,
-      src: "/images/music1.png",
-      name: "산책",
-      description: "EP · BDD",
-      onClickName: () => router.push("/album/123"),
-      onClickDescription: () => router.push("/user/123"),
-    },
-  ];
+  if (!albums.length) {
+    return null;
+  }
 
   return (
     <div className="flex flex-col gap-y-2">
@@ -84,15 +38,15 @@ const MainAlbum = () => {
         <p className="font-bold text-xl">님을 위한 앨범</p>
       </div>
       <div className="w-full overflow-x-auto flex gap-x-4">
-        {dummy.map((item) => (
+        {albums.map((album) => (
           <SquareContainer
-            key={item.id}
-            src={item.src}
-            name={item.name}
-            description={item.description}
+            key={album.uuid}
+            src={album.artImage}
+            name={album.title}
+            description={`${album.releaseDate} · ${album.description}`}
             design="rounded-xl"
-            onClickName={item.onClickName}
-            onClickDescription={item.onClickDescription}
+            onClickName={() => router.push(`/album/${album.uuid}`)}
+            onClickDescription={() => router.push(`/user/${album.uuid}`)}
           />
         ))}
       </div>

diff --git a/src/provider/userProvider.tsx b/src/provider/userProvider.tsx
@@ -10,6 +10,7 @@ import { useAuth } from "./authProvider";
 export interface Artist {
   uuid: string;
   name: string;
+  role: 'ROLE_USER';
   email: string;
   artistImage: string;
 }

diff --git a/src/services/albumService.ts b/src/services/albumService.ts
@@ -0,0 +1,21 @@
+import axios from 'axios';
+
+export interface Album {
+  uuid: string;
+  title: string;
+  description: string;
+  artImage: string;
+  releaseDate: string;
+}
+
+const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL;
+
+export const getAllAlbums = async (): Promise<Album[]> => {
+  try {
+    const response = await axios.get(`${BASE_URL}/album`);
+    return response.data;
+  } catch (error) {
+    console.error('앨범 데이터 조회 실패:', error);
+    throw error;
+  }
+};