From f0dd8f20718a65118ecf6daa6fe9fef66c786a21 Mon Sep 17 00:00:00 2001
From: choi <cejewe@naver.com>
Date: Sun, 22 Dec 2024 17:34:51 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9E=A0=EA=B9=90=EB=A7=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/album/[albumId]/page.tsx              |  95 ++++---
 src/components/container/square-container.tsx |   2 +-
 .../modal/album/albumEdit-modal.tsx           | 232 ++++++++++++++++++
 .../modal/album/information-modal.tsx         |  47 ++++
 src/components/modal/modal-provider.tsx       |   6 +
 src/hooks/modal/use-albumEdit-modal.ts        |  15 ++
 src/hooks/modal/use-information-modal.ts      |  17 ++
 src/services/albumService.ts                  |  20 ++
 8 files changed, 397 insertions(+), 37 deletions(-)
 create mode 100644 src/components/modal/album/albumEdit-modal.tsx
 create mode 100644 src/components/modal/album/information-modal.tsx
 create mode 100644 src/hooks/modal/use-albumEdit-modal.ts
 create mode 100644 src/hooks/modal/use-information-modal.ts

diff --git a/src/app/album/[albumId]/page.tsx b/src/app/album/[albumId]/page.tsx
index b9b0fe4..3160653 100644
--- a/src/app/album/[albumId]/page.tsx
+++ b/src/app/album/[albumId]/page.tsx
@@ -19,39 +19,52 @@ import {
 } from "@/components/ui/table";
 
 import Image from "next/image";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { useMediaQuery } from "react-responsive";
 
 import useStreamingBar from "@/hooks/modal/use-streaming-bar";
 import { cn } from "@/lib/utils";
+import { useEffect, useState } from "react";
+import { Album, Profile, Track, getAlbumById } from "@/services/albumService";
+import { toast } from "sonner";
+import useInformationModal from "@/hooks/modal/use-information-modal";
+import useAlbumEditModal from "@/hooks/modal/use-albumEdit-modal";
 
 export default function AlbumPage() {
+  const [albumData, setAlbumData] = useState<Album>();
+  const [albumTrack, setAlbumTrack] = useState<Track[]>([]);
+  const [albumProfile, setAlbumProfile] = useState<Profile>();
+
   const router = useRouter();
   const streamingBar = useStreamingBar();
+  const informationModal = useInformationModal();
+  const albumEditModal = useAlbumEditModal();
+
   const isMobile = useMediaQuery({ maxWidth: 768 });
+  const pathname = usePathname();
+  const uuid = String(pathname.split("/").pop());
+
+  useEffect(() => {
+    const getAlbum = async () => {
+      try {
+        const data = await getAlbumById(uuid);
+        setAlbumData(data.albumResponseDto);
+        setAlbumTrack(data.trackResponseDtos);
+        setAlbumProfile(data.profileResponseDto);
+      } catch (error) {
+        console.error("앨범 로딩 실패:", error);
+      }
+    };
 
-  const dummy = [
-    {
-      id: 1,
-      title: "피곤해",
-      duration: "3:02",
-    },
-    {
-      id: 2,
-      title: "피곤해",
-      duration: "3:02",
-    },
-    {
-      id: 3,
-      title: "피곤해",
-      duration: "3:02",
-    },
-    {
-      id: 4,
-      title: "피곤해",
-      duration: "3:02",
-    },
-  ];
+    getAlbum();
+  }, []);
+
+  const handleShareClick = () => {
+    navigator.clipboard
+      .writeText(window.location.href)
+      .then(() => toast.success("링크가 복사되었습니다!"))
+      .catch(() => toast.error("복사 실패!"));
+  };
 
   return (
     <main
@@ -64,8 +77,8 @@ export default function AlbumPage() {
         <div className="flex w-full flex-row md:h-[250px] gap-x-8 pr-2">
           <div className="h-full w-full flex flex-col items-center justify-center group">
             <Image
-              src="/images/music1.png"
-              alt="albumCover"
+              src={albumData ? albumData?.artImage : ""}
+              alt="album"
               width={250}
               height={250}
               className="rounded-xl group-hover:opacity-75"
@@ -79,17 +92,22 @@ export default function AlbumPage() {
           </div>
           <div className="flex flex-col w-full h-full items-start justify-between py-2 gap-y-4">
             <div
-              onClick={() => router.push("/user/123")}
+              onClick={() => router.push(`/profile/${albumProfile?.name}`)}
               className="flex gap-x-2 items-center"
             >
               <Avatar className="w-6 h-6 lg:w-10 lg:h-10">
-                <AvatarImage src="/images/music1.png" alt="profile" />
+                <AvatarImage
+                  src={`${albumProfile?.profileImage}`}
+                  alt="profile"
+                />
                 <AvatarFallback>U</AvatarFallback>
               </Avatar>
-              <span className="text-sm hover:underline truncate">RARO YANG</span>
+              <span className="text-sm hover:underline truncate">
+                {albumProfile?.name}
+              </span>
             </div>
             <div className="tracking-wide text-3xl md:text-4xl lg:text-5xl font-extrabold truncate">
-              THIRSTY
+              {albumData?.title}
             </div>
             <div className="flex w-full items-center justify-between">
               <div className="flex gap-x-2 items-center justify-center mr-2 lg:mr-0">
@@ -97,9 +115,12 @@ export default function AlbumPage() {
                 <span className="text-base">13.1k</span>
               </div>
               <div className="flex gap-x-3">
-                <IconShare className="size-6" />
-                <IconInfoCircle className="size-6" />
-                <IconDotsVertical className="size-6" />
+                <IconShare onClick={handleShareClick} className="size-6 cursor-pointer" />
+                <IconInfoCircle
+                  onClick={() => informationModal.onOpen(albumData)}
+                  className="size-6 cursor-pointer"
+                />
+                <IconDotsVertical onClick={albumEditModal.onOpen} className="size-6 cursor-pointer" />
               </div>
             </div>
           </div>
@@ -120,13 +141,15 @@ export default function AlbumPage() {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {dummy.map((song) => (
+            {albumTrack.map((song) => (
               <TableRow
-                key={song.id}
+                key={song.uuid}
                 className="group hover:bg-[#7E47631F] dark:hover:bg-white/10 h-12"
               >
                 <TableCell className="w-[50px] pr-4">
-                  <div className="flex group-hover:hidden pr-4">{song.id}</div>
+                  <div className="flex group-hover:hidden pr-4">
+                    {song.uuid}
+                  </div>
                   <div
                     onClick={() => streamingBar.onOpen()}
                     className="hidden group-hover:flex text-[#FF239C]"
@@ -136,7 +159,7 @@ export default function AlbumPage() {
                 </TableCell>
                 <TableCell className="w-full truncate">{song.title}</TableCell>
                 <TableCell></TableCell>
-                <TableCell className="text-right">{song.duration}</TableCell>
+                <TableCell className="text-right">{song.title}</TableCell>
                 <TableCell>
                   <IconDotsVertical className="size-6" />
                 </TableCell>
diff --git a/src/components/container/square-container.tsx b/src/components/container/square-container.tsx
index 55462cd..6e5cbce 100644
--- a/src/components/container/square-container.tsx
+++ b/src/components/container/square-container.tsx
@@ -25,7 +25,7 @@ const SquareContainer = ({
 
   return (
     <div className="flex flex-col h-60 w-52 bg-transparent items-center justify-center hover:bg-[#7E47631F] dark:hover:bg-gradient-to-b dark:from-[#D8C2DC4D] dark:to-[#2D1E274D] rounded-lg transition hover:cursor-pointer group">
-      <div className="relative flex items-center justify-center h-40 w-40">
+      <div className="relative flex items-center justify-center h-40 w-40 overflow-hidden">
         <Image
           src={src}
           alt="profile"
diff --git a/src/components/modal/album/albumEdit-modal.tsx b/src/components/modal/album/albumEdit-modal.tsx
new file mode 100644
index 0000000..5eeff94
--- /dev/null
+++ b/src/components/modal/album/albumEdit-modal.tsx
@@ -0,0 +1,232 @@
+"use client";
+
+import { z } from "zod";
+import axios, { AxiosResponse } from "axios";
+import { toast } from "sonner";
+import { useState } from "react";
+import { FieldValues, SubmitHandler, useForm } from "react-hook-form";
+
+import { IconUserCircle } from "@tabler/icons-react";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { CustomModal } from "@/components/modal/custom-modal";
+import { api } from "@/lib/axios";
+import { usePathname, useRouter } from "next/navigation";
+import useAlbumEditModal from "@/hooks/modal/use-albumEdit-modal";
+import ModalTitle from "../modal-title";
+
+const AlbumEditModal = () => {
+  const [file, setFile] = useState<File | null>(null);
+  const [isLoading, setIsloading] = useState(false);
+  const albumEditModal = useAlbumEditModal();
+  const router = useRouter();
+
+  const pathname = usePathname();
+  const uuid = String(pathname.split("/").pop());
+
+  const onChange = (open: boolean) => {
+    if (!open) {
+      reset();
+      albumEditModal.onClose();
+    }
+  };
+
+  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    if (files && files.length > 0) {
+      const file = files[0];
+      if (!file.type.startsWith("image/")) {
+        toast.error("이미지 파일만 업로드 가능합니다.");
+        return;
+      }
+
+      setFile(file);
+    }
+  };
+
+  const uploadToS3 = async (file: File) => {
+    const formData = new FormData();
+    formData.append("file", file);
+
+    const response = await api.post(`/upload/images`, formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+
+    if (response.status === 201) {
+      return response.data;
+    } else {
+      throw new Error("이미지 업로드에 실패했습니다.");
+    }
+  };
+
+  const FormSchema = z.object({
+    title: z
+      .string()
+      .min(1, "1자 이상 입력하세요")
+      .max(20, "20자 이하로 입력하세요"),
+    description: z
+      .string()
+      .max(100, "소개는 100자 이내로 작성하세요")
+      .nullable()
+      .transform((val) => val ?? ""),
+    albumArt: z.string().nullable().optional(),
+  });
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      title: "",
+      description: "",
+      albumArt: null,
+    },
+  });
+
+  const onSubmit: SubmitHandler<FieldValues> = async (values) => {
+    if (!uuid) {
+      toast.error("앨범 정보를 찾을 수 없습니다.");
+      return;
+    }
+
+    setIsloading(true);
+
+    try {
+      const albumArtUrl = file ? (await uploadToS3(file)).url : "";
+
+      const response = await api.patch(`/album/${uuid}`, {
+        title: values.title,
+        description: values.description,
+        albumArt: albumArtUrl,
+      });
+
+      if (isSuccessResponse(response)) {
+        handleSuccess();
+      } else {
+        throw new Error("앨범 수정에 실패했습니다.");
+      }
+    } catch (error) {
+      handleError(error);
+    } finally {
+      setIsloading(false);
+    }
+  };
+
+  const handleSuccess = () => {
+    toast.success("앨범이 수정되었습니다.");
+    reset();
+    albumEditModal.onClose();
+    router.refresh();
+  };
+
+  const handleError = (error: unknown) => {
+    if (axios.isAxiosError(error)) {
+      console.error("서버 응답:", error.response);
+      toast.error(
+        error.response?.data?.message ||
+          error.response?.data?.detail ||
+          "앨범 수정 중 오류가 발생했습니다."
+      );
+    } else {
+      console.error("에러 상세:", error);
+      toast.error("앨범 수정 과정에서 오류가 발생했습니다.");
+    }
+  };
+
+  const isSuccessResponse = (response: AxiosResponse) => {
+    return response.status >= 200 && response.status < 300;
+  };
+
+  return (
+    <CustomModal
+      title={
+        <ModalTitle
+          icon={<IconUserCircle className="size-10 p-1" />}
+          title="앨범 편집"
+        />
+      }
+      description="앨범을 소개해주세요"
+      isOpen={albumEditModal.isOpen}
+      onChange={onChange}
+      className="p-4 flex flex-col items-center justify-center"
+    >
+      <form
+        className="flex flex-col h-full w-full items-center justify-center"
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <div className="flex flex-col gap-y-4 items-center justify-center h-full w-full rounded-md overflow-y-auto">
+          <Input
+            id="albumArt"
+            type="file"
+            {...register("albumArt", { required: false })}
+            disabled={isLoading}
+            className="hidden"
+            onChange={handleFileUpload}
+          />
+          <label
+            htmlFor="albumArt"
+            className="p-[1px] w-full flex bg-gradient-to-br from-[#FF00B1] to-[#875BFF] h-auto cursor-pointer rounded-lg"
+          >
+            <div className="w-full bg-neutral-200 dark:bg-neutral-800 rounded-lg transition duration-200 text-black dark:text-white hover:bg-opacity-75 text-sm items-center flex justify-between p-4">
+              <span className="text-gray-400 truncate max-w-[70%]">
+                {file ? file.name : "🖼️ 앨범 커버"}
+              </span>
+              <span className="bg-black text-white dark:bg-white dark:text-black px-4 py-1 rounded-lg text-sm">
+                커버 변경
+              </span>
+            </div>
+          </label>
+          <Input
+            id="title"
+            disabled={isLoading}
+            {...register("title", { required: true })}
+            placeholder="🚨 앨범 제목"
+            className="w-full h-14"
+          />
+          <p className={errors.title ? "text-red-500 text-xs" : "hidden"}>
+            {errors.title ? String(errors.title.message) : null}
+          </p>
+          <Textarea
+            id="description"
+            disabled={isLoading}
+            {...register("description", { required: false })}
+            placeholder="📝 소개"
+            className="w-full h-full resize-none"
+          />
+          <p className={errors.description ? "text-red-500 text-xs" : "hidden"}>
+            {errors.description ? String(errors.description.message) : null}
+          </p>
+        </div>
+        <div className="flex items-center justify-around w-full pt-10">
+          <button
+            className="p-[3px] relative"
+            onClick={() => albumEditModal.onClose()}
+            disabled={isLoading}
+          >
+            <div className="px-8 py-2 bg-white rounded-xl relative group text-black hover:bg-neutral-100 text-sm dark:bg-black/95 dark:text-white dark:hover:bg-neutral-800">
+              취소
+            </div>
+          </button>
+          <button
+            className="p-[3px] relative"
+            type="submit"
+            disabled={isLoading}
+          >
+            <div className="px-8 py-2  bg-[#FF3F8F] rounded-xl relative group transition duration-200 text-white hover:bg-opacity-75 text-sm">
+              확인
+            </div>
+          </button>
+        </div>
+      </form>
+    </CustomModal>
+  );
+};
+
+export default AlbumEditModal;
diff --git a/src/components/modal/album/information-modal.tsx b/src/components/modal/album/information-modal.tsx
new file mode 100644
index 0000000..8dfc5ff
--- /dev/null
+++ b/src/components/modal/album/information-modal.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import useInformationModal from "@/hooks/modal/use-information-modal";
+import { CustomModal } from "../custom-modal";
+import ModalTitle from "../modal-title";
+import { IconDisc } from "@tabler/icons-react";
+
+const InformationModal = () => {
+  const informationModal = useInformationModal();
+
+  const onChange = (open: boolean) => {
+    if (!open) {
+      informationModal.onClose();
+    }
+  };
+
+  const albumData = informationModal.data;
+
+  return (
+    <CustomModal
+      title={
+        <ModalTitle
+          icon={<IconDisc className="size-10 p-1" />}
+          title="앨범 소개"
+        />
+      }
+      description=""
+      isOpen={informationModal.isOpen}
+      onChange={onChange}
+      className="p-4 flex flex-col items-center justify-center h-[50%]"
+    >
+      <div className="px-4">
+        {albumData ? (
+          <div className="flex flex-col items-center gap-y-4">
+            <p className="test-sm truncate overflow-y-auto">
+              {albumData.description}
+            </p>
+          </div>
+        ) : (
+          <p className="text-sm">정보를 불러오는 중...</p>
+        )}
+      </div>
+    </CustomModal>
+  );
+};
+
+export default InformationModal;
diff --git a/src/components/modal/modal-provider.tsx b/src/components/modal/modal-provider.tsx
index ec34b46..1a8d4f5 100644
--- a/src/components/modal/modal-provider.tsx
+++ b/src/components/modal/modal-provider.tsx
@@ -15,6 +15,8 @@ import { MobileUploadMenu } from "../bar/mobile-upload-menu";
 import { MobileSettingMenu } from "../bar/mobile-setting-menu";
 import ProfileModal from "./profile-modal";
 import ProfileEditModal from "./profileEdit-modal";
+import InformationModal from "./album/information-modal";
+import AlbumEditModal from "./album/albumEdit-modal";
 
 const ModalProvider = () => {
   const [isMounted, setIsMounted] = useState(false);
@@ -35,8 +37,12 @@ const ModalProvider = () => {
 
       <SearchInput />
       <NotiModal />
+
+      <InformationModal />
+      <AlbumEditModal />
       
       <SigninModal />
+
       <ProfileModal />
       <ProfileEditModal />
 
diff --git a/src/hooks/modal/use-albumEdit-modal.ts b/src/hooks/modal/use-albumEdit-modal.ts
new file mode 100644
index 0000000..7eda584
--- /dev/null
+++ b/src/hooks/modal/use-albumEdit-modal.ts
@@ -0,0 +1,15 @@
+import { create } from "zustand";
+
+interface AlbumEditModalStore {
+    isOpen: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+};
+
+const useAlbumEditModal = create<AlbumEditModalStore>((set) => ({
+    isOpen: false,
+    onOpen: () => set({ isOpen: true }),
+    onClose: () => set({ isOpen: false }),
+}));
+
+export default useAlbumEditModal;
\ No newline at end of file
diff --git a/src/hooks/modal/use-information-modal.ts b/src/hooks/modal/use-information-modal.ts
new file mode 100644
index 0000000..f7c095a
--- /dev/null
+++ b/src/hooks/modal/use-information-modal.ts
@@ -0,0 +1,17 @@
+import { create } from "zustand";
+
+interface InformationModalStore {
+  isOpen: boolean;
+  data: any | null; 
+  onOpen: (modalData: any) => void; 
+  onClose: () => void;
+}
+
+const useInformationModal = create<InformationModalStore>((set) => ({
+  isOpen: false,
+  data: null, 
+  onOpen: (modalData: any) => set({ isOpen: true, data: modalData }),
+  onClose: () => set({ isOpen: false, data: null }), 
+}));
+
+export default useInformationModal;
diff --git a/src/services/albumService.ts b/src/services/albumService.ts
index f37af67..a84da99 100644
--- a/src/services/albumService.ts
+++ b/src/services/albumService.ts
@@ -18,6 +18,9 @@ export interface Track {
 
 export interface Profile {
   name: string;
+  description: string;
+  link1: string;
+  link2: string;
   profileImage: string;
   isMain: boolean;
 }
@@ -52,3 +55,20 @@ export const getAllAlbums = async (
     throw error;
   }
 };
+
+export const getAlbumById = async (uuid: string): Promise<AlbumResponse> => {
+  try {
+    const response = await api.get<AlbumResponse>(`/album/${uuid}`);
+    return response.data;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.error(
+        `앨범 데이터 조회 실패: ${error.response?.status}`,
+        error.message
+      );
+    } else {
+      console.error("앨범 데이터 조회 중 알 수 없는 오류 발생:", error);
+    }
+    throw error;
+  }
+}
\ No newline at end of file