오류 수정

BDD-CLUB · Nov 15, 2024 · 4938d1b · 4938d1b
1 parent 8f0b984
commit 4938d1b
Show file tree

Hide file tree

Showing 16 changed files with 87 additions and 42 deletions.
diff --git 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 (
-    <main className="bg-transparent h-full mb-20 md:mb-10 pl-4 md:pl-0 md:ml-48 mt-16 pt-2 pr-4 md:pr-0 md:mr-28 overflow-y-auto hide-scrollbar">
+    <main className="bg-transparent h-full mb-20 md:mb-10 pl-4 md:pl-0 md:ml-48 mt-8 md:mt-20 pt-2 pr-4 md:pr-0 md:mr-28 overflow-y-auto hide-scrollbar">
       <MainContents />
     </main>
   );

diff --git a/src/app/album/[albumId]/page.tsx b/src/app/album/[albumId]/page.tsx
@@ -51,9 +51,9 @@ export default function AlbumPage() {
   ];
 
   return (
-    <main className="flex gap-x-12 bg-transparent h-full mb-20 md:mb-10 pl-4 md:pl-0 md:ml-48 mt-24 pt-2 pr-4 md:pr-0 md:mr-28 overflow-y-auto hide-scrollbar">
+    <main className="flex gap-x-12 bg-transparent h-full mb-20 md:mb-10 pl-4 md:pl-0 md:ml-48 mt-8 md:mt-24 pt-2 pr-4 md:pr-0 md:mr-28 overflow-y-auto hide-scrollbar">
       <div className="h-full lg:w-1/2 w-full flex flex-col gap-y-12">
-        <div className="flex w-full md:h-[250px] gap-x-8 pr-2">
+        <div className="flex w-full flex-col md:flex-row md:h-[250px] gap-x-8 pr-2">
           <div className="relative h-full w-full flex flex-col items-center justify-center group">
             <Image
               src="/images/music1.png"
@@ -69,7 +69,7 @@ export default function AlbumPage() {
               <IconPlayerPlayFilled className="w-8 h-8 text-black" />
             </div>
           </div>
-          <div className="flex flex-col w-full h-full items-start justify-between py-2 gap-y-4">
+          <div className="flex flex-col w-full h-full items-start justify-center md:justify-between pt-6 mt:pt-0 md:py-2 gap-y-4">
             <div
               onClick={() => router.push("/user/123")}
               className="flex gap-x-2 items-center"

diff --git a/src/app/playlist/[playlistId]/page.tsx b/src/app/playlist/[playlistId]/page.tsx
@@ -65,7 +65,7 @@ export default function PlaylistPage() {
 
   const GridImage = () => {
     return (
-      <div className="grid grid-cols-2 grid-rows-2 w-[250px] h-[250px] rounded-xl overflow-hidden group-hover:opacity-75">
+      <div className="grid grid-cols-2 grid-rows-2 max-w-[250px] max-h-[250px] rounded-xl overflow-hidden group-hover:opacity-75">
         <Image
           src="/images/music1.png"
           alt="albumCover1"
@@ -99,9 +99,9 @@ export default function PlaylistPage() {
   };
 
   return (
-    <main className="flex gap-x-12 bg-transparent h-full mb-20 md:mb-10 pl-4 md:pl-0 md:ml-48 mt-24 pt-2 pr-4 md:pr-0 md:mr-28 overflow-y-auto hide-scrollbar">
+    <main className="flex gap-x-12 bg-transparent h-full mb-20 md:mb-10 pl-4 md:pl-0 md:ml-48 mt-8 md:mt-24 pt-2 pr-4 md:pr-0 md:mr-28 overflow-y-auto hide-scrollbar">
       <div className="h-full lg:w-1/2 w-full flex flex-col gap-y-12">
-        <div className="flex w-full md:h-[250px] gap-x-8 pr-2">
+        <div className="flex w-full flex-col md:flex-row md:h-[250px] gap-x-8 pr-2">
           <div className="relative h-full w-full flex flex-col items-center justify-center group">
             <GridImage />
             <div
@@ -111,7 +111,7 @@ export default function PlaylistPage() {
               <IconPlayerPlayFilled className="w-8 h-8 text-black" />
             </div>
           </div>
-          <div className="flex flex-col w-full h-full items-start justify-between py-2 gap-y-4">
+          <div className="flex flex-col w-full h-full items-start justify-center md:justify-between pt-6 mt:pt-0 md:py-2 gap-y-4">
             <div
               onClick={() => router.push("/user/123")}
               className="flex gap-x-2 items-center"

diff --git a/src/app/user/[userId]/page.tsx b/src/app/user/[userId]/page.tsx
@@ -39,7 +39,7 @@ export default function UserPage() {
   ];
 
   return (
-    <main className="flex flex-col bg-transparent h-full mb-20 md:mb-10 pl-4 md:pl-0 md:ml-48 mt-24 pt-2 pr-4 md:pr-0 md:mr-28 overflow-y-auto hide-scrollbar">
+    <main className="flex flex-col bg-transparent h-full mb-20 md:mb-10 pl-4 md:pl-0 md:ml-48 mt-8 md:mt-24 pt-2 pr-4 md:pr-0 md:mr-28 overflow-y-auto hide-scrollbar">
       <div className="h-auto flex flex-col lg:flex-row gap-y-4 gap-x-8 items-start">
         <div className="flex h-full w-full lg:w-2/3 gap-x-8 items-center">
           <div className="flex flex-col">

diff --git a/src/app/watch/[watchId]/page.tsx b/src/app/watch/[watchId]/page.tsx
@@ -7,6 +7,7 @@ import {
   IconAlignBoxCenterMiddle,
   IconArrowsShuffle,
   IconDotsVertical,
+  IconMaximize,
   IconPlayerPlayFilled,
   IconPlayerSkipBackFilled,
   IconPlayerSkipForwardFilled,
@@ -43,7 +44,10 @@ export default function WatchPage() {
         onClick={handleClick}
         className="relative flex w-full items-center justify-between"
       >
-        <div className="flex flex-1">
+        <div className="flex flex-1 gap-x-4">
+          <button onClick={handleClick}>
+            <IconMaximize className="size-8 text-white" />
+          </button>
           <button onClick={(e) => toggleView(e)}>
             {view === "nowPlaying" ? (
               <IconAlignBoxCenterMiddle className="size-8 text-white" />
@@ -96,7 +100,7 @@ export default function WatchPage() {
         <div className="text-sm pb-2 font-bold">03:10</div>
       </div>
 
-      <div className="relative flex flex-col md:flex-row items-center justify-between md:justify-center w-full h-full my-8 md:gap-x-10 overflow-y-auto">
+      <div className="relative flex flex-col md:flex-row items-center justify-between md:justify-center w-full h-full md:my-8 md:gap-x-10 gap-y-8 md:gap-y-0 overflow-y-auto">
         <div className="flex flex-col items-center justify-center gap-y-4 w-full md:w-1/4">
           <div className="bg-gradient-to-br from-[#FFFFFFA0] to-[#999999A0] aspect-square rounded-lg mb-4">
             <div className="p-6 flex items-center justify-center">

diff --git a/src/components/bar/noti-modal.tsx b/src/components/bar/noti-modal.tsx
@@ -1,6 +1,6 @@
 import Image from "next/image";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
-import { Dialog, DialogContent, DialogPortal, DialogTitle } from "../ui/dialog";
+import { Dialog, DialogContent, DialogDescription, DialogPortal, DialogTitle } from "../ui/dialog";
 
 import useNotiModal from "@/hooks/modal/use-noti-modal";
 
@@ -87,6 +87,7 @@ export const NotiModal = () => {
           <DialogTitle className="text-2xl tracking-wide text-left font-bold w-full mt-4 ml-6">
             알림
           </DialogTitle>
+          <DialogDescription className="hidden">알림</DialogDescription>
           <div className="flex flex-col gap-y-6 mt-1 mb-6 mx-6">
             <div className="h-full flex flex-col gap-y-4">
               <h2 className="text-left font-bold text-base">이번주</h2>

diff --git a/src/components/bar/search-input.tsx b/src/components/bar/search-input.tsx
@@ -3,7 +3,9 @@ import React from "react";
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogOverlay,
+  DialogTitle,
 } from "../ui/dialog";
 import { PlaceholdersAndVanishInput } from "../ui/placeholders-and-vanish-input";
 
@@ -35,6 +37,8 @@ export const SearchInput = () => {
 
   return (
     <Dialog open={searchinput.isOpen} onOpenChange={onChange}>
+      <DialogTitle className="hidden">검색</DialogTitle>
+      <DialogDescription className="hidden">검색어를 입력하세요</DialogDescription>
       <DialogOverlay className="bg-black bg-opacity-10 fixed inset-0" />
       <DialogContent className="fixed top-[30%] left-[50%] translate-x-[-50%] translate-y-[-30%] border-none bg-transparent shadow-none w-full p-0">
         <div className="flex flex-col items-center justify-center">

diff --git a/src/components/bar/streaming-bar.tsx b/src/components/bar/streaming-bar.tsx
@@ -24,7 +24,7 @@ const StreamingBar = () => {
   return (
     <div className="hidden md:flex flex-col w-full h-full">
       <div
-        className="flex items-center justify-center pl-2 py-2 bg-gradient-to-r from-[#FFFFFFB2] to-[#D4C4C2B2] backdrop-blur-lg dark:bg-gradient-to-r dark:from-[#FFFFFF08] dark:to-[#D4C4C208]"
+        className="flex items-center justify-center px-4 py-2 bg-gradient-to-r from-[#FFFFFFB2] to-[#D4C4C2B2] backdrop-blur-lg dark:bg-gradient-to-r dark:from-[#FFFFFF08] dark:to-[#D4C4C208]"
         onClick={handleNowPlaying}
       >
         <div className="flex items-center space-x-4 flex-1 overflow-hidden">

diff --git a/src/components/modal/album-modal.tsx b/src/components/modal/album-modal.tsx
@@ -77,7 +77,7 @@ const AlbumModal = () => {
       }
     );
 
-    if (response.status === 200) {
+    if (response.status === 201) {
       return response.data;
     } else {
       throw new Error("이미지 업로드에 실패했습니다.");
@@ -104,10 +104,13 @@ const AlbumModal = () => {
 
       const response = await axios.post(
         `${process.env.NEXT_PUBLIC_API_BASE_URL}/album`,
-        requestData
+        requestData,
+        {
+          withCredentials: true,
+        }
       );
 
-      if (response.status !== 200) {
+      if (response.status !== 201) {
         throw new Error("앨범 생성에 실패했습니다.");
       }
 

diff --git a/src/components/ui/placeholders-and-vanish-input.tsx b/src/components/ui/placeholders-and-vanish-input.tsx
@@ -54,7 +54,7 @@ export function PlaceholdersAndVanishInput({
     if (!inputRef.current) return;
     const canvas = canvasRef.current;
     if (!canvas) return;
-    const ctx = canvas.getContext("2d");
+    const ctx = canvas.getContext("2d", { willReadFrequently: true });
     if (!ctx) return;
 
     canvas.width = 800;

diff --git a/src/features/main/main-album.tsx b/src/features/main/main-album.tsx
@@ -8,41 +8,63 @@ const MainAlbum = () => {
 
   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",
@@ -60,7 +82,7 @@ const MainAlbum = () => {
       <div className="w-full overflow-x-auto flex gap-x-4">
         {dummy.map((item) => (
           <SquareContainer
-            key={item.name}
+            key={item.id}
             src={item.src}
             name={item.name}
             description={item.description}

diff --git a/src/features/main/main-artist.tsx b/src/features/main/main-artist.tsx
@@ -8,35 +8,29 @@ const MainArtist = () => {
 
   const dummy = [
     {
+      id: 1,
       src: "/images/music1.png",
       name: "IPCGRDN",
       onClickName: () => router.push("/user/123"),
     },
     {
+      id: 2,
       src: "/images/music1.png",
       name: "IPCGRDN",
       onClickName: () => router.push("/user/123"),
     },
     {
-      src: "/images/music1.png",
-      name: "IPCGRDN",
+      id: 3,
+      src: "/images/albumcover.png",
+      name: "AESPA",
       onClickName: () => router.push("/user/123"),
     },
     {
-      src: "/images/music2.jpg",
+      id: 4,
+      src: "/images/music1.png",
       name: "RARO",
       onClickName: () => router.push("/user/123"),
     },
-    {
-      src: "/images/music3.jpg",
-      name: "PALM",
-      onClickName: () => router.push("/user/123"),
-    },
-    {
-      src: "/images/music4.jpg",
-      name: "BDD",
-      onClickName: () => router.push("/user/123"),
-    },
   ];
 
   return (
@@ -48,7 +42,7 @@ const MainArtist = () => {
       <div className="w-full overflow-x-auto flex gap-x-4">
         {dummy.map((item) => (
           <SquareContainer
-            key={item.name}
+            key={item.id}
             src={item.src}
             name={item.name}
             design="rounded-full"

diff --git a/src/features/main/main-playlist.tsx b/src/features/main/main-playlist.tsx
@@ -8,41 +8,47 @@ const MainPlaylist = () => {
 
   const dummy = [
     {
+      id: 1,
       src: "/images/music1.png",
       name: "THIRSTY",
       description: "RARO",
       onClickName: () => router.push("/playlist/123"),
       onClickDescription: () => router.push("/user/123"),
     },
     {
+      id: 2,
       src: "/images/music1.png",
       name: "THIRSTY",
       description: "RARO",
       onClickName: () => router.push("/playlist/123"),
       onClickDescription: () => router.push("/user/123"),
     },
     {
+      id: 3,
       src: "/images/music1.png",
       name: "THIRSTY",
       description: "RARO",
       onClickName: () => router.push("/playlist/123"),
       onClickDescription: () => router.push("/user/123"),
     },
     {
+      id: 4,
       src: "/images/music1.png",
       name: "THIRSTY",
       description: "RARO",
       onClickName: () => router.push("/playlist/123"),
       onClickDescription: () => router.push("/user/123"),
     },
     {
+      id: 5,
       src: "/images/music1.png",
       name: "THIRSTY",
       description: "RARO",
       onClickName: () => router.push("/playlist/123"),
       onClickDescription: () => router.push("/user/123"),
     },
     {
+      id: 6,
       src: "/images/music1.png",
       name: "THIRSTY",
       description: "RARO",
@@ -60,7 +66,7 @@ const MainPlaylist = () => {
       <div className="w-full overflow-x-auto flex gap-x-4">
         {dummy.map((item) => (
           <SquareContainer
-            key={item.name}
+            key={item.id}
             src={item.src}
             name={item.name}
             description={item.description}