모바일 디자인 2차 수정

src/app/playlist/[playlistId]/page.tsx

@@ -108,8 +108,8 @@ export default function PlaylistPage() {
         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-row max-h-[250px] gap-x-8 pr-2">
+      <div className="h-full lg:w-1/2 w-full flex flex-col gap-y-8 overflow-y-auto">
+        <div className="flex w-full flex-row max-h-[250px] gap-x-8 px-2">
           <div className="h-full w-full flex flex-col items-center justify-center group">
             <GridImage />
             <div

src/app/user/[userId]/page.tsx

@@ -55,7 +55,7 @@ export default function UserPage() {
         isMobile && streamingBar.isOpen && "mb-36"
       )}
     >
-      <div className="h-auto flex flex-col lg:flex-row gap-y-4 gap-x-8 items-start">
+      <div className="h-auto flex flex-col lg:flex-row gap-y-2 gap-x-8 items-start px-4 md:px-0">
         <div className="flex h-full w-full gap-x-8 items-center justify-start">
           <div className="flex">
             <Avatar className="md:w-48 md:h-48 min-w-32 max-w-48 min-h-32 max-h-48">
@@ -89,7 +89,7 @@ export default function UserPage() {
           </div>
         </div>
 
-        <div className="flex w-full h-20 md:h-full font-light text-sm items-start md:items-center whitespace-pre-line leading-normal overflow-auto">
+        <div className="flex w-full h-28 md:h-full font-light text-sm items-start md:items-center whitespace-pre-line leading-normal overflow-auto">
           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,
@@ -106,18 +106,18 @@ export default function UserPage() {
             onValueChange={setActiveTab}
             className="w-full flex-1 flex justify-center items-center"
           >
-            <TabsList className="w-full flex justify-center items-center gap-x-10 bg-transparent">
+            <TabsList className="w-full ml-12 flex justify-center items-center gap-x-10 bg-transparent">
               {tabs.map((tab) => (
                 <TabsTrigger
                   key={tab.id}
                   value={tab.id}
                   className={`flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors duration-300 rounded-none ${
                     activeTab === tab.id
-                      ? "text-gray-900 border-t-2 border-[#FF7672] py-[17px]"
+                      ? "text-gray-900 border-t-2 border-[#FF7672] py-[15px]"
                       : "text-gray-500 hover:text-gray-700"
                   }`}
                 >
-                  <tab.icon className="w-4 h-4" />
+                  <tab.icon className="w-5 h-5" />
                   <span className="hidden md:flex">{tab.label}</span>
                 </TabsTrigger>
               ))}

src/app/watch/[watchId]/mobileWatchPage.tsx

@@ -39,7 +39,7 @@ export default function MobileWatchPage() {
         </button>
       </div>
 
-      <div className="relative flex flex-col items-center gap-y-2 w-full mt-16">
+      <div className="relative flex flex-col items-center w-full h-full mt-16">
         {view === "main" && (
           <>
             <div className="bg-gradient-to-br from-[#FFFFFF33] to-[#99999933] aspect-square rounded-3xl mb-4 w-full overflow-y-auto max-h-96">
@@ -68,7 +68,7 @@ export default function MobileWatchPage() {
           </>
         )}
         {view === "lyrics" && (
-          <div className="bg-gradient-to-br from-[#FFFFFF33] to-[#99999933] aspect-square rounded-3xl mb-4 w-full overflow-y-auto h-[468px]">
+          <div className="bg-gradient-to-br from-[#FFFFFF33] to-[#99999933] aspect-square rounded-3xl mb-64 w-full h-full overflow-y-auto">
             <div className="flex whitespace-pre-line p-4 items-center justify-center text-lg truncate leading-loose text-white">
               Fancy 이건 참 화려해
               <br />
@@ -103,68 +103,73 @@ export default function MobileWatchPage() {
           </div>
         )}
         {view === "nowPlaying" && (
-          <div className="bg-gradient-to-br from-[#FFFFFF33] to-[#99999933] aspect-square rounded-3xl mb-4 w-full overflow-y-auto h-[468px]">
+          <div className="bg-gradient-to-br from-[#FFFFFF33] to-[#99999933] aspect-square rounded-3xl h-full mb-64 w-full overflow-y-auto">
             <div className="p-4 w-full">
               <WatchNowPlaying />
             </div>
           </div>
         )}
       </div>
 
-      <div className="relative flex flex-col items-center justify-center w-full py-4 mt-12">
-        <div className="w-full">
-          <CustomSlider
-            className="cursor-pointer"
-            defaultValue={[50]}
-            max={100}
-            step={1}
-          />
+      <div className="fixed bottom-0 w-full left-0 right-0 px-8 pb-16">
+        <div className="relative flex flex-col items-center justify-center w-full py-4 mt-12">
+          <div className="w-full">
+            <CustomSlider
+              className="cursor-pointer"
+              defaultValue={[50]}
+              max={100}
+              step={1}
+            />
+          </div>
+          <div className="w-full flex justify-between items-center text-white px-1">
+            <div className="text-sm font-bold">01:53</div>
+            <div className="text-sm font-bold">03:10</div>
+          </div>
         </div>
-        <div className="w-full flex justify-between items-center text-white px-1">
-          <div className="text-sm font-bold">01:53</div>
-          <div className="text-sm font-bold">03:10</div>
+
+        <div
+          className="relative flex w-full items-center justify-center mt-4 space-x-8 text-white"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <button>
+            <IconArrowsShuffle className="size-6" />
+          </button>
+          <button>
+            <IconPlayerSkipBackFilled className="size-6" />
+          </button>
+          <button className="rounded-full bg-white drop-shadow-md p-3 text-black">
+            <IconPlayerPlayFilled className="size-8" />
+          </button>
+          <button>
+            <IconPlayerSkipForwardFilled className="size-6" />
+          </button>
+          <button>
+            <IconRepeat className="size-6" />
+          </button>
         </div>
-      </div>
 
-      <div
-        className="relative flex w-full items-center justify-center mt-4 space-x-8 text-white"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <button>
-          <IconArrowsShuffle className="size-6" />
-        </button>
-        <button>
-          <IconPlayerSkipBackFilled className="size-6" />
-        </button>
-        <button className="rounded-full bg-white drop-shadow-md p-3 text-black">
-          <IconPlayerPlayFilled className="size-8" />
-        </button>
-        <button>
-          <IconPlayerSkipForwardFilled className="size-6" />
-        </button>
-        <button>
-          <IconRepeat className="size-6" />
-        </button>
+        <div className="relative flex w-full items-center justify-between my-auto text-white">
+          <button
+            onClick={
+              view !== "lyrics"
+                ? () => setView("lyrics")
+                : () => setView("main")
+            }
+          >
+            <IconAlignBoxCenterMiddle className="size-8" />
+          </button>
+          <button
+            onClick={
+              view !== "nowPlaying"
+                ? () => setView("nowPlaying")
+                : () => setView("main")
+            }
+          >
+            <IconVinyl className="size-8" />
+          </button>
+        </div>
       </div>
 
-      <div className="relative flex w-full items-center justify-between my-auto text-white">
-        <button
-          onClick={
-            view !== "lyrics" ? () => setView("lyrics") : () => setView("main")
-          }
-        >
-          <IconAlignBoxCenterMiddle className="size-8" />
-        </button>
-        <button
-          onClick={
-            view !== "nowPlaying"
-              ? () => setView("nowPlaying")
-              : () => setView("main")
-          }
-        >
-          <IconVinyl className="size-8" />
-        </button>
-      </div>
     </main>
   );
 }

src/components/bar/noti-modal.tsx

@@ -83,7 +83,7 @@ export const NotiModal = () => {
   return (
     <Dialog open={notiModal.isOpen} onOpenChange={onChange}>
       <DialogPortal>
-        <DialogContent className="fixed top-[50%] left-0 md:left-[10%] flex flex-col translate-x-0 translate-y-[-50%] border border-transparent h-full md:h-[95%] rounded-2xl bg-neutral-200 backdrop-blur-xl bg-opacity-75 dark:bg-neutral-800 w-full md:w-[450px] drop-shadow-2xl p-0">
+        <DialogContent className="fixed top-[50%] left-0 md:left-[10%] flex flex-col translate-x-0 translate-y-[-50%] border border-transparent h-full md:h-[95%] md:rounded-2xl bg-neutral-100 backdrop-blur-xl bg-opacity-75 dark:bg-neutral-800 w-full md:w-[450px] drop-shadow-2xl p-0">
           <DialogTitle className="text-2xl tracking-wide text-left font-bold w-full mt-4 ml-6">
             알림
           </DialogTitle>

src/components/bar/streaming-bar.tsx

@@ -25,7 +25,7 @@ const StreamingBar = () => {
     <>
       <div className="hidden md:flex flex-col w-full h-full">
         <div
-          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]"
+          className="flex items-center justify-center rounded-2xl 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">
@@ -85,7 +85,7 @@ const StreamingBar = () => {
             </button>
           </div>
         </div>
-        <div className="w-full">
+        <div className="w-full px-4">
           <CustomSlider
             className="cursor-pointer"
             defaultValue={[50]}
@@ -95,8 +95,8 @@ const StreamingBar = () => {
         </div>
       </div>
 
-      <div className="flex flex-col md:hidden w-full h-[70px] bg-white dark:bg-black bg-opacity-75 backdrop-blur-3xl bottom-16 left-0 right-0 fixed">
-        <div className="w-full">
+      <div className="flex flex-col md:hidden w-[400px] h-[70px] bg-white dark:bg-neutral-800 rounded-2xl drop-shadow-lg border border-neutral-100 dark:border-neutral-900 bottom-16 left-1/2 -translate-x-1/2 fixed">
+        <div className="w-full px-1">
           <CustomSlider
             className="cursor-pointer"
             defaultValue={[50]}

src/components/container/square-container.tsx

@@ -24,8 +24,8 @@ const SquareContainer = ({
   const streamingBar = useStreamingBar();
 
   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 pb-4 transition hover:cursor-pointer group">
-      <div className="relative mt-4 flex items-center justify-center h-32 w-32 lg:h-40 lg:w-40">
+    <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">
         <Image
           src={src}
           alt="profile"

src/components/modal/signin-modal.tsx

@@ -36,12 +36,12 @@ export function SigninModal() {
     <Dialog open={signinModal.isOpen} onOpenChange={onChange}>
       <DialogPortal>
         <DialogOverlay className="bg-black dark:bg-opacity-50 bg-opacity-50 fixed inset-0" />
-        <DialogContent className="fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] border border-transparent h-[50%] w-full md:max-w-[800px] md:rounded-2xl bg-[url('/images/auth-background.svg')] bg-current bg-center bg-no-repeat p-0 flex">
+        <DialogContent className="fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] border border-transparent h-[50%] min-w-[450px] md:max-w-[800px] rounded-2xl bg-[url('/images/auth-background.svg')] bg-current bg-center bg-no-repeat p-0 flex">
           <DialogTitle className="hidden">로그인</DialogTitle>
           <DialogDescription className="hidden">로그인</DialogDescription>
           <div className="hidden md:flex w-1/4" />
 
-          <div className="w-full md:w-3/4 h-full flex flex-col gap-y-4 items-center bg-[#FFFFFF99] dark:bg-[#00000099] md:rounded-2xl pt-8">
+          <div className="w-full md:w-3/4 h-full flex flex-col gap-y-4 items-center bg-[#FFFFFF99] dark:bg-[#00000099] rounded-2xl pt-8">
             <Image src={"/images/logo.svg"} alt="logo" width={35} height={35} />
             <h1 className="text-2xl font-bold dark:text-white">Untitled</h1>
             <p className="text-sm text-[#222222] dark:text-white">

src/features/user/user-album.tsx

@@ -53,7 +53,7 @@ const UserAlbum = () => {
 
   return (
     <div className="h-full w-full">
-      <div className="w-full gap-x-2 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+      <div className="w-full gap-x-2 grid grid-cols-2 xl:grid-cols-4">
         {dummy.map((item) => (
           <SquareContainer
             key={item.id}

src/features/user/user-playlist.tsx

@@ -53,7 +53,7 @@ const UserPlaylist = () => {
 
   return (
     <div className="h-full">
-      <div className="w-full gap-x-2 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
+      <div className="w-full gap-x-2 grid grid-cols-2 xl:grid-cols-4">
         {dummy.map((item) => (
           <SquareContainer
             key={item.id}