모바일 최적화 1차 진행

BDD-CLUB · Dec 5, 2024 · c5573ef · c5573ef
1 parent 858fcc6
commit c5573ef
Show file tree

Hide file tree

Showing 15 changed files with 583 additions and 257 deletions.
diff --git 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 (
-    <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">
+    <main className={cn("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", isMobile && streamingBar.isOpen && "mb-36")}>
       <MainContents />
     </main>
   );

diff --git 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 (
-    <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">
+    <main
+      className={cn(
+        "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",
+        isMobile && streamingBar.isOpen && "mb-36"
+      )}
+    >
       <div className="h-full lg:w-1/2 w-full flex flex-col gap-y-12 overflow-y-auto">
-        <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">
+        <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"
@@ -64,12 +72,12 @@ export default function AlbumPage() {
             />
             <div
               onClick={() => 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"
             >
               <IconPlayerPlayFilled className="w-8 h-8 text-black" />
             </div>
           </div>
-          <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 className="flex flex-col w-full h-full items-start justify-between py-2 gap-y-4">
             <div
               onClick={() => router.push("/user/123")}
               className="flex gap-x-2 items-center"
@@ -78,9 +86,9 @@ export default function AlbumPage() {
                 <AvatarImage src="/images/music1.png" alt="profile" />
                 <AvatarFallback>U</AvatarFallback>
               </Avatar>
-              <span className="text-sm hover:underline">RARO YANG</span>
+              <span className="text-sm hover:underline truncate">RARO YANG</span>
             </div>
-            <div className="tracking-wide text-3xl md:text-4xl lg:text-5xl font-extrabold">
+            <div className="tracking-wide text-3xl md:text-4xl lg:text-5xl font-extrabold truncate">
               THIRSTY
             </div>
             <div className="flex w-full items-center justify-between">
@@ -126,7 +134,7 @@ export default function AlbumPage() {
                     <IconPlayerPlayFilled className="size-6" />
                   </div>
                 </TableCell>
-                <TableCell className="w-full">{song.title}</TableCell>
+                <TableCell className="w-full truncate">{song.title}</TableCell>
                 <TableCell></TableCell>
                 <TableCell className="text-right">{song.duration}</TableCell>
                 <TableCell>

diff --git 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,19 +107,24 @@ export default function MoreAlbumPage() {
   };
 
   return (
-    <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 gap-y-4 lg:flex-row gap-x-4 items-center justify-center">
+    <main
+      className={cn(
+        "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",
+        isMobile && streamingBar.isOpen && "mb-36"
+      )}
+    >
+      <div className="h-auto flex gap-x-4 items-center justify-center">
         {/* 왼쪽 프로필 섹션 */}
-        <div className="w-full lg:w-1/3 h-full bg-[#D7C5C526] dark:bg-gradient-to-t dark:from-[#00000033] dark:to-[#41414133] backdrop-blur-xl lg:p-8 rounded-lg relative">
-          <div className="flex flex-col items-center mx-8 mt-2">
+        <div className="w-1/3 hidden lg:flex h-full bg-[#D7C5C526] dark:bg-gradient-to-t dark:from-[#00000033] dark:to-[#41414133] backdrop-blur-xl lg:p-8 rounded-lg relative">
+          <div className="relative flex flex-col items-center mx-auto mt-2">
             <Image
               src={selectedAlbum.src}
               alt={selectedAlbum.name}
               width={200}
               height={200}
               className="rounded-lg"
             />
-            <h1 className="text-3xl font-bold mt-8 text-center truncate tracking-wide">
+            <h1 className="text-2xl font-bold mt-8 text-center truncate tracking-wide">
               {selectedAlbum.name}
             </h1>
             <p
@@ -128,7 +136,7 @@ export default function MoreAlbumPage() {
             <div className="flex w-full items-center justify-between mt-6">
               <div className="flex gap-x-2 items-center justify-center mr-2 lg:mr-0">
                 <IconHeart className="size-6" />
-                <span className="text-base">13.1k</span>
+                <span className="text-base truncate">13.1k</span>
               </div>
               <div className="flex gap-x-3">
                 <IconShare className="size-6" />
@@ -173,8 +181,8 @@ export default function MoreAlbumPage() {
         </div>
 
         {/* 오른쪽 아티스트 그리드 섹션 */}
-        <div className="w-full lg:w-2/3 h-full bg-[#D7C5C526] dark:bg-gradient-to-t dark:from-[#00000033] dark:to-[#41414133] backdrop-blur-xl lg:p-8 rounded-lg overflow-y-auto hide-scrollbar">
-          <div className="grid grid-cols-3 xl:grid-cols-4 gap-8">
+        <div className="w-full lg:w-2/3 h-full bg-[#D7C5C526] dark:bg-gradient-to-t dark:from-[#00000033] dark:to-[#41414133] backdrop-blur-xl p-8 rounded-lg overflow-y-auto">
+          <div className="grid grid-cols-2 xl:grid-cols-4 gap-8">
             {albums.map((album) => (
               <div
                 className="flex flex-col items-center cursor-pointer"

diff --git a/src/app/more/artist/page.tsx b/src/app/more/artist/page.tsx
@@ -1,10 +1,13 @@
-'use client'
+"use client";
 
 import { useState } from "react";
 import SquareContainer from "@/components/container/square-container";
 import { IconChevronRight } from "@tabler/icons-react";
 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 Artist {
   id: number;
@@ -17,6 +20,8 @@ interface Artist {
 
 export default function MoreArtistPage() {
   const router = useRouter();
+  const streamingBar = useStreamingBar();
+  const isMobile = useMediaQuery({ maxWidth: 768 });
 
   const artists: Artist[] = [
     {
@@ -25,47 +30,53 @@ export default function MoreArtistPage() {
       src: "/images/albumcover.png",
       onClickName: () => 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,
       name: "AESPA",
       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,
       name: "MAROON 5",
       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,
       name: "AVRIL LAVIGNE",
       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,
       name: "IU",
       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,
       name: "DAY6",
       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,19 +87,26 @@ export default function MoreArtistPage() {
   };
 
   return (
-    <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-x-4 items-center justify-center">
+    <main
+      className={cn(
+        "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",
+        isMobile && streamingBar.isOpen && "mb-36"
+      )}
+    >
+      <div className="h-auto flex gap-x-4 items-center justify-center">
         {/* 왼쪽 프로필 섹션 */}
-        <div className="w-full lg:w-1/3 h-full bg-[#D7C5C526] dark:bg-gradient-to-t dark:from-[#00000033] dark:to-[#41414133] backdrop-blur-xl lg:p-8 rounded-lg">
-          <div className="flex flex-col items-center mx-8 mt-2">
+        <div className="w-1/3 hidden lg:flex h-full bg-[#D7C5C526] dark:bg-gradient-to-t dark:from-[#00000033] dark:to-[#41414133] backdrop-blur-xl lg:p-8 rounded-lg relative">
+          <div className="relative flex flex-col items-center mx-auto mt-2">
             <Image
               src={selectedArtist.src}
               alt={selectedArtist.name}
               width={200}
               height={200}
               className="rounded-full"
             />
-            <h1 className="text-3xl font-bold mt-8 text-center truncate tracking-wide">{selectedArtist.name}</h1>
+            <h1 className="text-2xl font-bold mt-8 text-center truncate tracking-wide">
+              {selectedArtist.name}
+            </h1>
             <div className="flex justify-center items-center gap-4 mt-6 gap-x-4 w-full">
               <button className="bg-[#FFFFFF] text-black font-bold text-sm w-1/2 rounded-lg py-2 drop-shadow-lg hover:opacity-75">
                 {selectedArtist.followers}
@@ -97,12 +115,12 @@ export default function MoreArtistPage() {
                 팔로우
               </button>
             </div>
-            <p className="mt-6 text-gray-700 dark:text-white">
+            <p className="mt-6 text-gray-700 dark:text-white h-52 overflow-y-auto">
               {selectedArtist.description}
               <button className="text-gray-500 dark:text-gray-400">more</button>
             </p>
             <div className="mt-8">
-              <button 
+              <button
                 className="bg-white dark:bg-black dark:backdrop-blur-xl hover:opacity-75 text-black dark:text-white rounded-full p-2"
                 onClick={selectedArtist.onClickName}
               >
@@ -113,11 +131,11 @@ export default function MoreArtistPage() {
         </div>
 
         {/* 오른쪽 아티스트 그리드 섹션 */}
-        <div className="w-full lg:w-2/3 h-full bg-[#D7C5C526] dark:bg-gradient-to-t dark:from-[#00000033] dark:to-[#41414133] backdrop-blur-xl lg:p-8 rounded-lg overflow-y-auto hide-scrollbar">
-          <div className="grid grid-cols-3 xl:grid-cols-4 gap-8">
+        <div className="w-full lg:w-2/3 h-full bg-[#D7C5C526] dark:bg-gradient-to-t dark:from-[#00000033] dark:to-[#41414133] backdrop-blur-xl p-8 rounded-lg overflow-y-auto">
+          <div className="grid grid-cols-2 xl:grid-cols-4 gap-8">
             {artists.map((artist) => (
-              <div 
-                className="flex flex-col items-center cursor-pointer" 
+              <div
+                className="flex flex-col items-center cursor-pointer"
                 key={artist.id}
                 onClick={() => handleArtistSelect(artist)}
               >

diff --git 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,19 +109,24 @@ export default function MorePlaylistPage() {
   };
 
   return (
-    <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 gap-y-4 lg:flex-row gap-x-4 items-center justify-center">
+    <main
+      className={cn(
+        "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",
+        isMobile && streamingBar.isOpen && "mb-36"
+      )}
+    >
+      <div className="h-auto flex gap-x-4 items-center justify-center">
         {/* 왼쪽 프로필 섹션 */}
-        <div className="w-full lg:w-1/3 h-full bg-[#D7C5C526] dark:bg-gradient-to-t dark:from-[#00000033] dark:to-[#41414133] backdrop-blur-xl lg:p-8 rounded-lg relative">
-          <div className="flex flex-col items-center mx-8 mt-2">
+        <div className="w-1/3 hidden lg:flex h-full bg-[#D7C5C526] dark:bg-gradient-to-t dark:from-[#00000033] dark:to-[#41414133] backdrop-blur-xl lg:p-8 rounded-lg relative">
+          <div className="relative flex flex-col items-center mx-auto mt-2">
             <Image
               src={selectedPlaylist.src}
               alt={selectedPlaylist.name}
               width={200}
               height={200}
               className="rounded-lg"
             />
-            <h1 className="text-3xl font-bold mt-8 text-center truncate tracking-wide">
+            <h1 className="text-2xl font-bold mt-8 text-center truncate tracking-wide">
               {selectedPlaylist.name}
             </h1>
             <p
@@ -175,8 +183,8 @@ export default function MorePlaylistPage() {
         </div>
 
         {/* 오른쪽 아티스트 그리드 섹션 */}
-        <div className="w-full lg:w-2/3 h-full bg-[#D7C5C526] dark:bg-gradient-to-t dark:from-[#00000033] dark:to-[#41414133] backdrop-blur-xl lg:p-8 rounded-lg overflow-y-auto hide-scrollbar">
-          <div className="grid grid-cols-3 xl:grid-cols-4 gap-8">
+        <div className="w-full lg:w-2/3 h-full bg-[#D7C5C526] dark:bg-gradient-to-t dark:from-[#00000033] dark:to-[#41414133] backdrop-blur-xl p-8 rounded-lg overflow-y-auto">
+          <div className="grid grid-cols-2 xl:grid-cols-4 gap-8">
             {playlists.map((playlist) => (
               <div
                 className="flex flex-col items-center cursor-pointer"