diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx index 7d83b12..78c0050 100644 --- a/src/app/(main)/page.tsx +++ b/src/app/(main)/page.tsx @@ -2,7 +2,7 @@ import MainContents from "@/features/main/main-contents"; export default function Home() { return ( -
+
); diff --git a/src/app/album/[albumId]/page.tsx b/src/app/album/[albumId]/page.tsx index ea7d769..9b3ca37 100644 --- a/src/app/album/[albumId]/page.tsx +++ b/src/app/album/[albumId]/page.tsx @@ -51,7 +51,7 @@ export default function AlbumPage() { ]; return ( -
+
@@ -119,7 +119,7 @@ export default function AlbumPage() { >
{song.id}
-
streamingBar.onOpen()} className="hidden group-hover:flex text-[#FF239C]" > diff --git a/src/app/playlist/[playlistId]/page.tsx b/src/app/playlist/[playlistId]/page.tsx index 0d79007..ca308d8 100644 --- a/src/app/playlist/[playlistId]/page.tsx +++ b/src/app/playlist/[playlistId]/page.tsx @@ -99,7 +99,7 @@ export default function PlaylistPage() { }; return ( -
+
diff --git a/src/app/user/[userId]/page.tsx b/src/app/user/[userId]/page.tsx index 253af5c..fbfdb33 100644 --- a/src/app/user/[userId]/page.tsx +++ b/src/app/user/[userId]/page.tsx @@ -39,7 +39,7 @@ export default function UserPage() { ]; return ( -
+
@@ -136,4 +136,4 @@ export default function UserPage() {
); -} \ No newline at end of file +} diff --git a/src/components/modal/album-modal.tsx b/src/components/modal/album-modal.tsx index ec4bc1d..2adb217 100644 --- a/src/components/modal/album-modal.tsx +++ b/src/components/modal/album-modal.tsx @@ -27,7 +27,6 @@ const AlbumModal = () => { const handleFileUpload = (files: File[]) => { setFiles(files); - console.log(files); if (files.length > 0 && files[0].type.startsWith("image/")) { const imageUrl = URL.createObjectURL(files[0]); @@ -55,7 +54,7 @@ const AlbumModal = () => { handleSubmit, reset, formState: { errors }, - } = useForm({ + } = useForm({ resolver: zodResolver(FormSchema), defaultValues: { albumName: "", @@ -64,36 +63,69 @@ const AlbumModal = () => { }, }); + const uploadToS3 = async (file: File) => { + const formData = new FormData(); + formData.append("file", file); + + const response = await axios.post( + `${process.env.NEXT_PUBLIC_API_BASE_URL}/upload/images`, + formData, + { + headers: { + "Content-Type": "multipart/form-data", + }, + } + ); + + if (response.status === 200) { + return response.data; + } else { + throw new Error("이미지 업로드에 실패했습니다."); + } + }; + const onSubmit: SubmitHandler = async (values) => { try { setIsloading(true); const albumCover = files[0]; - if (!albumCover) { toast.error("앨범 커버가 필요합니다."); return; } - const formData = new FormData(); - formData.append("albumArt", albumCover); - formData.append("title", values.albumName); - formData.append("description", values.albumDescription || ""); + const albumArtUrl = await uploadToS3(albumCover); + + const requestData = { + albumArt: albumArtUrl, + title: values.albumName, + description: values.albumDescription || "", + }; const response = await axios.post( `${process.env.NEXT_PUBLIC_API_BASE_URL}/album`, - formData + requestData ); - if (response.status !== 201) { + if (response.status !== 200) { throw new Error("앨범 생성에 실패했습니다."); } toast.success("앨범이 생성되었습니다!"); - reset(); + reset(); albumModal.onClose(); } catch (error) { - toast.error(`문제가 발생하였습니다: ${error}`); + if (error instanceof Error) { + toast.error(`문제가 발생하였습니다: ${error.message}`); + } else if (axios.isAxiosError(error) && error.response) { + toast.error( + `문제가 발생하였습니다: ${ + error.response.data?.message || "알 수 없는 오류" + }` + ); + } else { + toast.error("알 수 없는 오류가 발생했습니다."); + } } finally { setIsloading(false); } @@ -198,4 +230,4 @@ const AlbumModal = () => { ); }; -export default AlbumModal; \ No newline at end of file +export default AlbumModal; diff --git a/src/features/main/bar.tsx b/src/features/main/bar.tsx index c52932b..8967bb8 100644 --- a/src/features/main/bar.tsx +++ b/src/features/main/bar.tsx @@ -133,4 +133,4 @@ export const useOutsideClick = ( document.removeEventListener("touchstart", listener); }; }, [ref, callback]); -}; \ No newline at end of file +}; diff --git a/src/features/main/topbar.tsx b/src/features/main/topbar.tsx index 0d75094..0a79e84 100644 --- a/src/features/main/topbar.tsx +++ b/src/features/main/topbar.tsx @@ -2,9 +2,10 @@ import StreamingBar from "@/components/bar/streaming-bar"; +import { cn } from "@/lib/utils"; +import { useAuth } from "@/provider/authProvider"; import useSigninModal from "@/hooks/modal/use-signin-modal"; import useStreamingBar from "@/hooks/modal/use-streaming-bar"; -import { useAuth } from "@/provider/authProvider"; export default function Topbar() { const signinModal = useSigninModal(); @@ -17,15 +18,17 @@ export default function Topbar() { {streamingBar.isOpen ? :
}
); diff --git a/src/features/user/user-playlist.tsx b/src/features/user/user-playlist.tsx index 28d1026..6212b9c 100644 --- a/src/features/user/user-playlist.tsx +++ b/src/features/user/user-playlist.tsx @@ -1,36 +1,47 @@ +"use client"; + import SquareContainer from "@/components/container/square-container"; +import { useRouter } from "next/navigation"; const UserPlaylist = () => { + const router = useRouter(); + const dummy = [ { src: "/images/music1.png", name: "ROCK-STAR", description: "플레이리스트", + onClickName: () => router.push("/playlist/123"), }, { src: "/images/music1.png", name: "ROCK-STAR", description: "플레이리스트", + onClickName: () => router.push("/playlist/123"), }, { src: "/images/music1.png", name: "ROCK-STAR", description: "플레이리스트", + onClickName: () => router.push("/playlist/123"), }, { src: "/images/music1.png", name: "BREAK", description: "플레이리스트", + onClickName: () => router.push("/playlist/123"), }, { src: "/images/music1.png", name: "Thirsty", description: "플레이리스트", + onClickName: () => router.push("/playlist/123"), }, { src: "/images/music1.png", name: "산책", description: "플레이리스트", + onClickName: () => router.push("/playlist/123"), }, ]; @@ -44,6 +55,7 @@ const UserPlaylist = () => { name={item.name} description={item.description} design="rounded-xl" + onClickName={item.onClickName} /> ))}