From dff75eb70ad98bfce795c55dc0caab3ade004bf2 Mon Sep 17 00:00:00 2001
From: choi <cejewe@naver.com>
Date: Fri, 6 Dec 2024 02:13:05 +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/watch/[watchId]/mobileWatchPage.tsx   | 60 +++++++++++--------
 .../container/rectangle-container.tsx         |  4 +-
 src/features/watch/watch-nowPlaying.tsx       |  2 +-
 3 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/src/app/watch/[watchId]/mobileWatchPage.tsx b/src/app/watch/[watchId]/mobileWatchPage.tsx
index 4398a74..b52f406 100644
--- a/src/app/watch/[watchId]/mobileWatchPage.tsx
+++ b/src/app/watch/[watchId]/mobileWatchPage.tsx
@@ -40,19 +40,35 @@ export default function MobileWatchPage() {
       </div>
 
       <div className="relative flex flex-col items-center gap-y-2 w-full mt-16">
-        <div className="bg-gradient-to-br from-[#FFFFFF33] to-[#99999933] aspect-square rounded-3xl mb-4 w-full overflow-y-auto max-h-96">
-          {view === "main" && (
-            <div className="p-6 flex items-center justify-center">
-              <Image
-                src="/images/albumcover.png"
-                alt="albumcover"
-                width={300}
-                height={300}
-                className="rounded-full"
-              />
+        {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">
+              <div className="p-6 flex items-center justify-center">
+                <Image
+                  src="/images/albumcover.png"
+                  alt="albumcover"
+                  width={300}
+                  height={300}
+                  className="rounded-full"
+                />
+              </div>
             </div>
-          )}
-          {view === "lyrics" && (
+            <div className="text-3xl font-bold text-white truncate">
+              WHIPLASH
+            </div>
+            <div className="text-2xl font-bold text-neutral-300 flex items-center gap-x-2">
+              <Link href="/user/123" className="hover:underline truncate">
+                에스파
+              </Link>
+              <span>·</span>
+              <Link href="/album/123" className="hover:underline truncate">
+                WHIPLASH
+              </Link>
+            </div>
+          </>
+        )}
+        {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="flex whitespace-pre-line p-4 items-center justify-center text-lg truncate leading-loose text-white">
               Fancy 이건 참 화려해
               <br />
@@ -84,23 +100,15 @@ export default function MobileWatchPage() {
               <br />
               외면해도 소용없지 don&apos;t you blow it?
             </div>
-          )}
-          {view === "nowPlaying" && (
+          </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="p-4 w-full">
               <WatchNowPlaying />
             </div>
-          )}
-        </div>
-        <div className="text-3xl font-bold text-white truncate">WHIPLASH</div>
-        <div className="text-2xl font-bold text-neutral-300 flex items-center gap-x-2">
-          <Link href="/user/123" className="hover:underline truncate">
-            에스파
-          </Link>
-          <span>·</span>
-          <Link href="/album/123" className="hover:underline truncate">
-            WHIPLASH
-          </Link>
-        </div>
+          </div>
+        )}
       </div>
 
       <div className="relative flex flex-col items-center justify-center w-full py-4 mt-12">
diff --git a/src/components/container/rectangle-container.tsx b/src/components/container/rectangle-container.tsx
index 2018acc..0e8cb21 100644
--- a/src/components/container/rectangle-container.tsx
+++ b/src/components/container/rectangle-container.tsx
@@ -19,7 +19,8 @@ const RectangleContainer = ({
   duration,
 }: RectangleContainerProps) => {
   return (
-    <div className="flex text-black items-center gap-x-4 p-2 mb-2 rounded-lg hover:bg-white/30 transition-colors">
+    <div className="flex text-black w-full items-center gap-x-4 p-2 mb-2 rounded-lg hover:bg-white/30 transition-colors">
+      <div className="flex">
       <Image
         src={cover}
         alt="cover"
@@ -27,6 +28,7 @@ const RectangleContainer = ({
         height={44}
         className="rounded-lg"
       />
+      </div>
       <div className="flex-1 min-w-0">
         <h3 className="font-semibold text-lg truncate">{name}</h3>
         <p className="text-sm text-neutral-700 truncate">
diff --git a/src/features/watch/watch-nowPlaying.tsx b/src/features/watch/watch-nowPlaying.tsx
index b73fa09..238e9df 100644
--- a/src/features/watch/watch-nowPlaying.tsx
+++ b/src/features/watch/watch-nowPlaying.tsx
@@ -52,7 +52,7 @@ const WatchNowPlaying = () => {
         },
     ]
     return (
-        <div className="flex flex-col h-full w-full items-center justify-center truncate">
+        <div className="flex flex-col h-full w-full items-center justify-center">
             {dummy.map((item) => (
                 <RectangleContainer
                     key={item.id}