From c5573efb2ae350dca7a807dd886dc8a2e75c4767 Mon Sep 17 00:00:00 2001 From: choi Date: Fri, 6 Dec 2024 01:59:00 +0900 Subject: [PATCH] =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EC=B5=9C?= =?UTF-8?q?=EC=A0=81=ED=99=94=201=EC=B0=A8=20=EC=A7=84=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(main)/page.tsx | 10 +- src/app/album/[albumId]/page.tsx | 24 +- src/app/more/album/page.tsx | 24 +- src/app/more/artist/page.tsx | 54 ++-- src/app/more/playlist/page.tsx | 22 +- src/app/more/track/page.tsx | 20 +- src/app/playlist/[playlistId]/page.tsx | 29 ++- src/app/user/[userId]/page.tsx | 26 +- src/app/watch/[watchId]/mobileWatchPage.tsx | 162 ++++++++++++ src/app/watch/[watchId]/page.tsx | 241 ++++++++++-------- src/components/bar/streaming-bar.tsx | 177 ++++++++----- .../container/rectangle-container.tsx | 2 +- src/components/container/square-container.tsx | 8 +- src/features/main/topbar.tsx | 39 +-- src/features/watch/watch-nowPlaying.tsx | 2 +- 15 files changed, 583 insertions(+), 257 deletions(-) create mode 100644 src/app/watch/[watchId]/mobileWatchPage.tsx diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx index 018f4be..91bff78 100644 --- a/src/app/(main)/page.tsx +++ b/src/app/(main)/page.tsx @@ -1,8 +1,16 @@ +'use client'; + import MainContents from "@/features/main/main-contents"; +import useStreamingBar from "@/hooks/modal/use-streaming-bar"; +import { cn } from "@/lib/utils"; +import { useMediaQuery } from "react-responsive"; export default function Home() { + const streamingBar = useStreamingBar(); + const isMobile = useMediaQuery({ maxWidth: 768 }); + return ( -
+
); diff --git a/src/app/album/[albumId]/page.tsx b/src/app/album/[albumId]/page.tsx index f31d5de..b9b0fe4 100644 --- a/src/app/album/[albumId]/page.tsx +++ b/src/app/album/[albumId]/page.tsx @@ -20,12 +20,15 @@ import { import Image from "next/image"; import { useRouter } from "next/navigation"; +import { useMediaQuery } from "react-responsive"; import useStreamingBar from "@/hooks/modal/use-streaming-bar"; +import { cn } from "@/lib/utils"; export default function AlbumPage() { const router = useRouter(); const streamingBar = useStreamingBar(); + const isMobile = useMediaQuery({ maxWidth: 768 }); const dummy = [ { @@ -51,10 +54,15 @@ export default function AlbumPage() { ]; return ( -
+
-
-
+
+
albumCover
streamingBar.onOpen()} - className="absolute bottom-6 left-4 flex items-center justify-center opacity-0 group-hover:opacity-100 rounded-full bg-[#FF00B1] w-14 h-14 transform hover:scale-125 transition-transform duration-300" + className="absolute flex items-center justify-center opacity-0 group-hover:opacity-100 rounded-full bg-[#FF00B1] w-14 h-14 transform hover:scale-125 transition-transform duration-300" >
-
+
router.push("/user/123")} className="flex gap-x-2 items-center" @@ -78,9 +86,9 @@ export default function AlbumPage() { U - RARO YANG + RARO YANG
-
+
THIRSTY
@@ -126,7 +134,7 @@ export default function AlbumPage() {
- {song.title} + {song.title} {song.duration} diff --git a/src/app/more/album/page.tsx b/src/app/more/album/page.tsx index cffb027..0067c32 100644 --- a/src/app/more/album/page.tsx +++ b/src/app/more/album/page.tsx @@ -13,6 +13,8 @@ import { import Image from "next/image"; import { useRouter } from "next/navigation"; import useStreamingBar from "@/hooks/modal/use-streaming-bar"; +import { useMediaQuery } from "react-responsive"; +import { cn } from "@/lib/utils"; interface Album { id: number; @@ -26,6 +28,7 @@ interface Album { export default function MoreAlbumPage() { const router = useRouter(); const streamingBar = useStreamingBar(); + const isMobile = useMediaQuery({ maxWidth: 768 }); const albums: Album[] = [ { @@ -104,11 +107,16 @@ export default function MoreAlbumPage() { }; return ( -
-
+
+
{/* 왼쪽 프로필 섹션 */} -
-
+
+
{selectedAlbum.name} -

+

{selectedAlbum.name}

- 13.1k + 13.1k
@@ -173,8 +181,8 @@ export default function MoreAlbumPage() {
{/* 오른쪽 아티스트 그리드 섹션 */} -
-
+
+
{albums.map((album) => (
router.push("/user/123"), followers: "1.5M", - description: "Hello! My name is NewJeans, and I'm passionate about exploring new ideas and cultures. I enjoy reading, traveling, and meeting new people...", + description: + "Hello! My name is NewJeans, and I'm passionate about exploring new ideas and cultures. I enjoy reading, traveling, and meeting new people...", }, { id: 2, @@ -33,7 +39,8 @@ export default function MoreArtistPage() { src: "/images/albumcover.png", onClickName: () => router.push("/user/123"), followers: "2.1M", - description: "We are AESPA! Known for our unique blend of K-pop and virtual reality concepts...", + description: + "We are AESPA! Known for our unique blend of K-pop and virtual reality concepts...", }, { id: 3, @@ -41,7 +48,8 @@ export default function MoreArtistPage() { src: "/images/albumcover.png", onClickName: () => router.push("/user/123"), followers: "3.2M", - description: "MAROON 5 is an American pop rock band that was formed in 1994 in Los Angeles, California...", + description: + "MAROON 5 is an American pop rock band that was formed in 1994 in Los Angeles, California...", }, { id: 4, @@ -49,7 +57,8 @@ export default function MoreArtistPage() { src: "/images/albumcover.png", onClickName: () => router.push("/user/123"), followers: "4.5M", - description: "AVRIL LAVIGNE is a Canadian singer, songwriter, and actress. She rose to fame with her debut album 'Let Go'...", + description: + "AVRIL LAVIGNE is a Canadian singer, songwriter, and actress. She rose to fame with her debut album 'Let Go'...", }, { id: 5, @@ -57,7 +66,8 @@ export default function MoreArtistPage() { src: "/images/albumcover.png", onClickName: () => router.push("/user/123"), followers: "5.2M", - description: "IU is a South Korean singer, songwriter, and actress. She gained popularity with her albums 'IU...' and 'Palette'...", + description: + "IU is a South Korean singer, songwriter, and actress. She gained popularity with her albums 'IU...' and 'Palette'...", }, { id: 6, @@ -65,7 +75,8 @@ export default function MoreArtistPage() { src: "/images/albumcover.png", onClickName: () => router.push("/user/123"), followers: "2.8M", - description: "DAY6 is a South Korean boy band that debuted in 2015. They gained popularity with their album 'The Day'...", + description: + "DAY6 is a South Korean boy band that debuted in 2015. They gained popularity with their album 'The Day'...", }, ]; @@ -76,11 +87,16 @@ export default function MoreArtistPage() { }; return ( -
-
+
+
{/* 왼쪽 프로필 섹션 */} -
-
+
+
{selectedArtist.name} -

{selectedArtist.name}

+

+ {selectedArtist.name} +

-

+

{selectedArtist.description}

-
{/* 오른쪽 아티스트 그리드 섹션 */} -
-
+
+
{artists.map((artist) => ( -
handleArtistSelect(artist)} > diff --git a/src/app/more/playlist/page.tsx b/src/app/more/playlist/page.tsx index f7075d1..759d6a2 100644 --- a/src/app/more/playlist/page.tsx +++ b/src/app/more/playlist/page.tsx @@ -13,6 +13,8 @@ import { import Image from "next/image"; import { useRouter } from "next/navigation"; import useStreamingBar from "@/hooks/modal/use-streaming-bar"; +import { cn } from "@/lib/utils"; +import { useMediaQuery } from "react-responsive"; interface Playlist { id: number; @@ -26,6 +28,7 @@ interface Playlist { export default function MorePlaylistPage() { const router = useRouter(); const streamingBar = useStreamingBar(); + const isMobile = useMediaQuery({ maxWidth: 768 }); const playlists: Playlist[] = [ { @@ -106,11 +109,16 @@ export default function MorePlaylistPage() { }; return ( -
-
+
+
{/* 왼쪽 프로필 섹션 */} -
-
+
+
{selectedPlaylist.name} -

+

{selectedPlaylist.name}

{/* 오른쪽 아티스트 그리드 섹션 */} -

-
+
+
{playlists.map((playlist) => (
router.push("/album/123"), }, ]; - + return ( -
-
-
-
+
+
+
+
{tracks.map((track) => (
+
-
-
+
+
streamingBar.onOpen()} - className="absolute bottom-6 left-4 flex items-center justify-center opacity-0 group-hover:opacity-100 rounded-full bg-[#FF00B1] w-14 h-14 transform hover:scale-125 transition-transform duration-300" + className="absolute flex items-center justify-center opacity-0 group-hover:opacity-100 rounded-full bg-[#FF00B1] w-14 h-14 transform hover:scale-125 transition-transform duration-300" >
-
+ +
router.push("/user/123")} className="flex gap-x-2 items-center" @@ -120,9 +129,9 @@ export default function PlaylistPage() { U - RARO YANG + RARO YANG
-
+
THIRSTY
@@ -177,19 +186,19 @@ export default function PlaylistPage() { className="rounded-md" />
-

+

{song.title}

{song.artist} {song.album} diff --git a/src/app/user/[userId]/page.tsx b/src/app/user/[userId]/page.tsx index 95580dc..d291547 100644 --- a/src/app/user/[userId]/page.tsx +++ b/src/app/user/[userId]/page.tsx @@ -2,6 +2,7 @@ import { useState } from "react"; import { ChevronDown } from "lucide-react"; +import { useMediaQuery } from "react-responsive"; import { IconLink, @@ -22,10 +23,15 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import UserTrack from "@/features/user/user-track"; import UserAlbum from "@/features/user/user-album"; import UserPlaylist from "@/features/user/user-playlist"; +import useStreamingBar from "@/hooks/modal/use-streaming-bar"; import { useUser } from "@/provider/userProvider"; +import { cn } from "@/lib/utils"; export default function UserPage() { + const streamingBar = useStreamingBar(); + const isMobile = useMediaQuery({ maxWidth: 768 }); + const [activeTab, setActiveTab] = useState("track"); const [array, setArray] = useState("new"); @@ -43,18 +49,24 @@ export default function UserPage() { ]; return ( -
+
- -
-
+
+
U
-
-
{user?.name || "U"}
+
+
+ {user?.name || "U"} +
-
+
Hello! My name is Raro, and im passionate about exploring new ideas and cultures. I enjoy reading, traveling, and meeting new people. Currently, im pursuing my interests in technology and innovation, diff --git a/src/app/watch/[watchId]/mobileWatchPage.tsx b/src/app/watch/[watchId]/mobileWatchPage.tsx new file mode 100644 index 0000000..4398a74 --- /dev/null +++ b/src/app/watch/[watchId]/mobileWatchPage.tsx @@ -0,0 +1,162 @@ +"use client"; + +import Link from "next/link"; +import Image from "next/image"; +import { useState } from "react"; +import { useRouter } from "next/navigation"; + +import { + IconAlignBoxCenterMiddle, + IconArrowsShuffle, + IconChevronDown, + IconPlayerPlayFilled, + IconPlayerSkipBackFilled, + IconPlayerSkipForwardFilled, + IconRepeat, + IconVinyl, +} from "@tabler/icons-react"; + +import { CustomSlider } from "@/components/ui/custom-slider"; +import WatchNowPlaying from "@/features/watch/watch-nowPlaying"; + +type ViewState = "main" | "lyrics" | "nowPlaying"; + +export default function MobileWatchPage() { + const router = useRouter(); + const [view, setView] = useState("main"); + + const handleClick = () => { + router.back(); + }; + + return ( +
+
+ +
+ +
+ +
+
+ {view === "main" && ( +
+ albumcover +
+ )} + {view === "lyrics" && ( +
+ Fancy 이건 참 화려해 +
+ It's glowing and it's flashy (yeah) +
+ 알아, 적당함이 뭔지 keep it classy +
+ 따라 하지 넌 또 하나부터 열까지 (yeah) +
+ 아닌척하지 (yeah) +
+ Under pressure, body sweating, can you focus? (Hoo) +
+ I deliver, I can promise, I'm the coldest (cold) +
+ 외면해도 소용없지 don't you blow it? Fancy 이건 참 화려해 +
+ It's glowing and it's flashy (yeah) +
+ 알아, 적당함이 뭔지 keep it classy +
+ 따라 하지 넌 또 하나부터 열까지 (yeah) +
+ 아닌척하지 (yeah) +
+ Under pressure, body sweating, can you focus? (Hoo) +
+ I deliver, I can promise, I'm the coldest (cold) +
+ 외면해도 소용없지 don't you blow it? +
+ )} + {view === "nowPlaying" && ( +
+ +
+ )} +
+
WHIPLASH
+
+ + 에스파 + + · + + WHIPLASH + +
+
+ +
+
+ +
+
+
01:53
+
03:10
+
+
+ +
e.stopPropagation()} + > + + + + + +
+ +
+ + +
+
+ ); +} diff --git a/src/app/watch/[watchId]/page.tsx b/src/app/watch/[watchId]/page.tsx index 3f523a8..64718ff 100644 --- a/src/app/watch/[watchId]/page.tsx +++ b/src/app/watch/[watchId]/page.tsx @@ -2,6 +2,10 @@ import Link from "next/link"; import Image from "next/image"; +import { useState } from "react"; +import { useEffect } from "react"; +import { useRouter } from "next/navigation"; +import { useMediaQuery } from "react-responsive"; import { IconAlignBoxCenterMiddle, @@ -17,13 +21,27 @@ import { import { CustomSlider } from "@/components/ui/custom-slider"; import VolumeComponent from "@/components/bar/volume-component"; -import { useState } from "react"; import WatchNowPlaying from "@/features/watch/watch-nowPlaying"; -import { useRouter } from "next/navigation"; +import MobileWatchPage from "./mobileWatchPage"; type ViewState = "lyrics" | "nowPlaying"; export default function WatchPage() { + const [mobile, setMobile] = useState(false); + const isMobile = useMediaQuery({ maxWidth: 768 }); + + const checkResize = () => { + if (isMobile) { + setMobile(true); + } else { + setMobile(false); + } + }; + + useEffect(() => { + checkResize(); + }, [isMobile]); + const [view, setView] = useState("nowPlaying"); const router = useRouter(); @@ -37,120 +55,127 @@ export default function WatchPage() { }; return ( -
-
- -
-
- - -
+ <> + {!mobile && ( +
+
+
e.stopPropagation()} - className="flex items-center flex-2 space-x-4" + onClick={handleClick} + className="relative flex w-full items-center justify-between" > - - - - - -
-
- e.stopPropagation()} /> - -
-
- -
-
01:53
-
- -
-
03:10
-
- -
-
-
-
- albumcover + + +
+
e.stopPropagation()} + className="flex items-center flex-2 space-x-4" + > + + + + + +
+
+ e.stopPropagation()} /> +
+
-
WHIPLASH
-
- - 에스파 - - · - - WHIPLASH - +
+ +
+
01:53
+
+
+
03:10
- -
-
- {view === "nowPlaying" ? ( - - ) : ( -
- Fancy 이건 참 화려해 -
- It's glowing and it's flashy (yeah) -
- 알아, 적당함이 뭔지 keep it classy -
- 따라 하지 넌 또 하나부터 열까지 (yeah) -
- 아닌척하지 (yeah) -
- Under pressure, body sweating, can you focus? (Hoo) -
- I deliver, I can promise, I'm the coldest (cold) -
- 외면해도 소용없지 don't you blow it? + +
+
+
+
+ albumcover
- )} +
+
WHIPLASH
+
+ + 에스파 + + · + + WHIPLASH + +
+
+ +
+
+ {view === "nowPlaying" ? ( + + ) : ( +
+ Fancy 이건 참 화려해 +
+ It's glowing and it's flashy (yeah) +
+ 알아, 적당함이 뭔지 keep it classy +
+ 따라 하지 넌 또 하나부터 열까지 (yeah) +
+ 아닌척하지 (yeah) +
+ Under pressure, body sweating, can you focus? (Hoo) +
+ I deliver, I can promise, I'm the coldest (cold) +
+ 외면해도 소용없지 don't you blow it? +
+ )} +
-
-
+
+ )} + {mobile && ( + + )} + ); } diff --git a/src/components/bar/streaming-bar.tsx b/src/components/bar/streaming-bar.tsx index bec8fad..718b88c 100644 --- a/src/components/bar/streaming-bar.tsx +++ b/src/components/bar/streaming-bar.tsx @@ -22,77 +22,130 @@ const StreamingBar = () => { }; return ( -
-
-
- cover e.stopPropagation()} - /> -
e.stopPropagation()}> -

Current Song

-
- - RARO - - - THIRSTY - + <> +
+
+
+ cover e.stopPropagation()} + /> +
e.stopPropagation()}> +

Current Song

+
+ + RARO + + + THIRSTY + +
+
e.stopPropagation()} + > + + + + + +
+
+ e.stopPropagation()} /> + +
+
+
+ +
+
+ +
+
+
e.stopPropagation()} + className="flex w-full items-center px-2 pb-1 justify-between" + onClick={handleNowPlaying} > - - - - - -
-
- e.stopPropagation()} /> - +
e.stopPropagation()}> +

Current Song

+
+ + RARO + + + THIRSTY + +
+
+
+
+ + +
-
- -
-
+ ); }; diff --git a/src/components/container/rectangle-container.tsx b/src/components/container/rectangle-container.tsx index 3ec9203..2018acc 100644 --- a/src/components/container/rectangle-container.tsx +++ b/src/components/container/rectangle-container.tsx @@ -33,7 +33,7 @@ const RectangleContainer = ({ {artist} · {album}

-
+
{duration} -
+ <> +
+ {streamingBar.isOpen ? :
} + +
+
+ {streamingBar.isOpen ? :
} +
+ ); } diff --git a/src/features/watch/watch-nowPlaying.tsx b/src/features/watch/watch-nowPlaying.tsx index 0e85c59..b73fa09 100644 --- a/src/features/watch/watch-nowPlaying.tsx +++ b/src/features/watch/watch-nowPlaying.tsx @@ -52,7 +52,7 @@ const WatchNowPlaying = () => { }, ] return ( -
+
{dummy.map((item) => (