From 4938d1b9b9e7bebd7e49239f5cbbf496d9226c01 Mon Sep 17 00:00:00 2001 From: choi Date: Fri, 15 Nov 2024 19:46:49 +0900 Subject: [PATCH] =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(main)/page.tsx | 2 +- src/app/album/[albumId]/page.tsx | 6 ++--- src/app/playlist/[playlistId]/page.tsx | 8 +++---- src/app/user/[userId]/page.tsx | 2 +- src/app/watch/[watchId]/page.tsx | 8 +++++-- src/components/bar/noti-modal.tsx | 3 ++- src/components/bar/search-input.tsx | 4 ++++ src/components/bar/streaming-bar.tsx | 2 +- src/components/modal/album-modal.tsx | 9 ++++--- .../ui/placeholders-and-vanish-input.tsx | 2 +- src/features/main/main-album.tsx | 24 ++++++++++++++++++- src/features/main/main-artist.tsx | 22 +++++++---------- src/features/main/main-playlist.tsx | 8 ++++++- src/features/main/main-track.tsx | 13 +++++----- src/features/user/user-album.tsx | 8 ++++++- src/features/user/user-playlist.tsx | 8 ++++++- 16 files changed, 87 insertions(+), 42 deletions(-) diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx index 78c0050..018f4be 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 9b3ca37..97fe5ab 100644 --- a/src/app/album/[albumId]/page.tsx +++ b/src/app/album/[albumId]/page.tsx @@ -51,9 +51,9 @@ export default function AlbumPage() { ]; return ( -
+
-
+
-
+
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 index ca308d8..b990408 100644 --- 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 ( -
+
albumCover1 +
-
+
-
+
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 index fbfdb33..5bca270 100644 --- a/src/app/user/[userId]/page.tsx +++ b/src/app/user/[userId]/page.tsx @@ -39,7 +39,7 @@ export default function UserPage() { ]; return ( -
+
diff --git a/src/app/watch/[watchId]/page.tsx b/src/app/watch/[watchId]/page.tsx index b14296f..3f523a8 100644 --- 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" > -
+
+
-
+
diff --git a/src/components/bar/noti-modal.tsx b/src/components/bar/noti-modal.tsx index 605d510..c01198e 100644 --- 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 = () => { 알림 + 알림

이번주

diff --git a/src/components/bar/search-input.tsx b/src/components/bar/search-input.tsx index 7f82635..211cbe7 100644 --- 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 ( + 검색 + 검색어를 입력하세요
diff --git a/src/components/bar/streaming-bar.tsx b/src/components/bar/streaming-bar.tsx index 1b3a242..bec8fad 100644 --- a/src/components/bar/streaming-bar.tsx +++ b/src/components/bar/streaming-bar.tsx @@ -24,7 +24,7 @@ const StreamingBar = () => { return (
diff --git a/src/components/modal/album-modal.tsx b/src/components/modal/album-modal.tsx index 2adb217..0ad4b40 100644 --- 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 index cc7d038..ce4ce08 100644 --- 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 index 43d3191..f6e361c 100644 --- a/src/features/main/main-album.tsx +++ b/src/features/main/main-album.tsx @@ -8,6 +8,7 @@ const MainAlbum = () => { const dummy = [ { + id: 1, src: "/images/music1.png", name: "ROCK-STAR", description: "2024 · IPCGRDN", @@ -15,6 +16,7 @@ const MainAlbum = () => { onClickDescription: () => router.push("/user/123"), }, { + id: 2, src: "/images/music1.png", name: "ROCK-STAR", description: "2024 · IPCGRDN", @@ -22,6 +24,7 @@ const MainAlbum = () => { onClickDescription: () => router.push("/user/123"), }, { + id: 3, src: "/images/music1.png", name: "ROCK-STAR", description: "2024 · IPCGRDN", @@ -29,6 +32,7 @@ const MainAlbum = () => { onClickDescription: () => router.push("/user/123"), }, { + id: 4, src: "/images/music1.png", name: "BREAK", description: "2018 · PALM", @@ -36,6 +40,7 @@ const MainAlbum = () => { onClickDescription: () => router.push("/user/123"), }, { + id: 5, src: "/images/music1.png", name: "Thirsty", description: "1988 · RARO", @@ -43,6 +48,23 @@ const MainAlbum = () => { 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 = () => {
{dummy.map((item) => ( { 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 = () => {
{dummy.map((item) => ( { const dummy = [ { + id: 1, src: "/images/music1.png", name: "THIRSTY", description: "RARO", @@ -15,6 +16,7 @@ const MainPlaylist = () => { onClickDescription: () => router.push("/user/123"), }, { + id: 2, src: "/images/music1.png", name: "THIRSTY", description: "RARO", @@ -22,6 +24,7 @@ const MainPlaylist = () => { onClickDescription: () => router.push("/user/123"), }, { + id: 3, src: "/images/music1.png", name: "THIRSTY", description: "RARO", @@ -29,6 +32,7 @@ const MainPlaylist = () => { onClickDescription: () => router.push("/user/123"), }, { + id: 4, src: "/images/music1.png", name: "THIRSTY", description: "RARO", @@ -36,6 +40,7 @@ const MainPlaylist = () => { onClickDescription: () => router.push("/user/123"), }, { + id: 5, src: "/images/music1.png", name: "THIRSTY", description: "RARO", @@ -43,6 +48,7 @@ const MainPlaylist = () => { onClickDescription: () => router.push("/user/123"), }, { + id: 6, src: "/images/music1.png", name: "THIRSTY", description: "RARO", @@ -60,7 +66,7 @@ const MainPlaylist = () => {
{dummy.map((item) => ( { const dummy = [ { + id: 1, src: "/images/music1.png", name: "ROCK-STAR", onClickName: () => router.push("/album/123"), onClickDescription: () => router.push("/user/123"), }, { + id: 2, src: "/images/music1.png", name: "ROCK-STAR", onClickName: () => router.push("/album/123"), onClickDescription: () => router.push("/user/123"), }, { + id: 3, src: "/images/music1.png", name: "ROCK-STAR", onClickName: () => router.push("/album/123"), onClickDescription: () => router.push("/user/123"), }, { + id: 4, src: "/images/music1.png", name: "BREAK", onClickName: () => router.push("/album/123"), onClickDescription: () => router.push("/user/123"), }, { + id: 5, src: "/images/music1.png", name: "Thirsty", onClickName: () => router.push("/album/123"), onClickDescription: () => router.push("/user/123"), }, - { - src: "/images/music1.png", - name: "산책", - onClickName: () => router.push("/album/123"), - onClickDescription: () => router.push("/user/123"), - }, ]; return ( @@ -53,7 +52,7 @@ const MainTrack = () => {
{dummy.map((item) => ( { const dummy = [ { + id: 1, src: "/images/music1.png", name: "ROCK-STAR", description: "2024 · IPCGRDN", onClickName: () => router.push("/album/123"), }, { + id: 2, src: "/images/music1.png", name: "ROCK-STAR", description: "2024 · IPCGRDN", onClickName: () => router.push("/album/123"), }, { + id: 3, src: "/images/music1.png", name: "ROCK-STAR", description: "2024 · IPCGRDN", onClickName: () => router.push("/album/123"), }, { + id: 4, src: "/images/music1.png", name: "BREAK", description: "2018 · PALM", onClickName: () => router.push("/album/123"), }, { + id: 5, src: "/images/music1.png", name: "Thirsty", description: "1988 · RARO", onClickName: () => router.push("/album/123"), }, { + id: 6, src: "/images/music1.png", name: "산책", description: "EP · BDD", @@ -50,7 +56,7 @@ const UserAlbum = () => {
{dummy.map((item) => ( { const dummy = [ { + id: 1, src: "/images/music1.png", name: "ROCK-STAR", description: "플레이리스트", onClickName: () => router.push("/playlist/123"), }, { + id: 2, src: "/images/music1.png", name: "ROCK-STAR", description: "플레이리스트", onClickName: () => router.push("/playlist/123"), }, { + id: 3, src: "/images/music1.png", name: "ROCK-STAR", description: "플레이리스트", onClickName: () => router.push("/playlist/123"), }, { + id: 4, src: "/images/music1.png", name: "BREAK", description: "플레이리스트", onClickName: () => router.push("/playlist/123"), }, { + id: 5, src: "/images/music1.png", name: "Thirsty", description: "플레이리스트", onClickName: () => router.push("/playlist/123"), }, { + id: 6, src: "/images/music1.png", name: "산책", description: "플레이리스트", @@ -50,7 +56,7 @@ const UserPlaylist = () => {
{dummy.map((item) => (