From 5b750817a157dc190ff8d57ccf1428c1558e6cca Mon Sep 17 00:00:00 2001
From: GulSam00 <gulsamcono@gmail.com>
Date: Thu, 23 Jul 2026 00:36:23 +0900
Subject: [PATCH] =?UTF-8?q?fix=20:=20=EB=B3=B8=EB=AC=B8=20=EC=BD=98?=
 =?UTF-8?q?=ED=85=90=EC=B8=A0=EA=B0=80=20=ED=97=A4=EB=8D=94/=ED=91=B8?=
 =?UTF-8?q?=ED=84=B0=20=EC=A0=9C=EC=99=B8=20=EC=A0=84=EC=B2=B4=20=EC=98=81?=
 =?UTF-8?q?=EC=97=AD=EC=9D=84=20=EC=B1=84=EC=9A=B0=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=A0=9C=EA=B1=B0=20(#286)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HwgKjeajq2RGBSMpvfZ4TK
---
 apps/web/src/Footer.tsx                         | 2 +-
 apps/web/src/Header.tsx                         | 2 +-
 apps/web/src/app/layout.tsx                     | 4 ++--
 apps/web/src/app/login/page.tsx                 | 2 +-
 apps/web/src/app/popular/PopularRankingList.tsx | 6 +++---
 apps/web/src/app/popular/page.tsx               | 4 ++--
 apps/web/src/app/recent/page.tsx                | 6 +++---
 apps/web/src/app/search/HomePage.tsx            | 6 +++---
 apps/web/src/app/signup/page.tsx                | 2 +-
 apps/web/src/app/tosing/page.tsx                | 6 +++---
 apps/web/src/app/withdrawal/page.tsx            | 2 +-
 11 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/apps/web/src/Footer.tsx b/apps/web/src/Footer.tsx
index 62f973ac..76bd7f4f 100644
--- a/apps/web/src/Footer.tsx
+++ b/apps/web/src/Footer.tsx
@@ -30,7 +30,7 @@ export default function Footer() {
   const navPath = pathname.split('/')[1];
 
   return (
-    <footer className="bg-background fixed bottom-0 flex h-10 w-full max-w-md justify-between border-t">
+    <footer className="bg-background flex h-10 w-full max-w-md shrink-0 justify-between border-t">
       {navigation.map(item => {
         const isActive = '/' + navPath === item.href;
         const isAnimating = footerAnimateKey === item.key;
diff --git a/apps/web/src/Header.tsx b/apps/web/src/Header.tsx
index 1b388b3d..146dac6b 100644
--- a/apps/web/src/Header.tsx
+++ b/apps/web/src/Header.tsx
@@ -98,7 +98,7 @@ export default function Header() {
   }, []);
 
   return (
-    <header className="bg-background sticky top-0 z-50 flex h-16 w-full max-w-md items-center justify-between border-b p-4">
+    <header className="bg-background sticky top-0 z-50 flex h-16 w-full max-w-md shrink-0 items-center justify-between border-b p-4">
       <div
         className="font-barcode hover:text-accent cursor-pointer text-5xl transition-colors"
         onClick={() => router.push('/')}
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index aeecc111..962576eb 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -102,9 +102,9 @@ export default function RootLayout({
 
   const AppContent = () => (
     <ErrorWrapper>
-      <div className="relative flex h-full w-full max-w-md flex-col">
+      <div className="relative flex h-dvh w-full max-w-md flex-col overflow-hidden">
         <Header />
-        <div className="h-full p-4">{children}</div>
+        <div className="min-h-0 flex-1 overflow-y-auto p-4">{children}</div>
 
         <div className="pointer-events-none fixed bottom-10 left-1/2 z-40 w-full max-w-md -translate-x-1/2 px-1 pb-1">
           <div className="pointer-events-auto">
diff --git a/apps/web/src/app/login/page.tsx b/apps/web/src/app/login/page.tsx
index b1557cb5..731a05a3 100644
--- a/apps/web/src/app/login/page.tsx
+++ b/apps/web/src/app/login/page.tsx
@@ -74,7 +74,7 @@ export default function LoginPage() {
   }, [router, isAuthenticated, isAlert]);
 
   return (
-    <div className="bg-background flex h-dvh flex-col justify-center px-4">
+    <div className="bg-background flex h-full flex-col justify-center px-4">
       <div className="w-full space-y-6">
         <div className="flex flex-col items-center gap-1">
           <h1 className="text-2xl font-bold">로그인</h1>
diff --git a/apps/web/src/app/popular/PopularRankingList.tsx b/apps/web/src/app/popular/PopularRankingList.tsx
index 03b4d0f2..0c3c2ae7 100644
--- a/apps/web/src/app/popular/PopularRankingList.tsx
+++ b/apps/web/src/app/popular/PopularRankingList.tsx
@@ -17,8 +17,8 @@ export default function PopularRankingList() {
   }
 
   return (
-    <Card className="relative">
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+    <Card className="relative flex min-h-0 flex-1 flex-col">
+      <CardHeader className="flex shrink-0 flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-xl">추천 곡 순위</CardTitle>
 
         <RotateCw
@@ -27,7 +27,7 @@ export default function PopularRankingList() {
         />
       </CardHeader>
 
-      <ScrollArea className="h-[calc(100vh-22rem)]">
+      <ScrollArea className="min-h-0 flex-1">
         <CardContent className="pt-0">
           <div className="space-y-0">
             {data && data.length > 0 ? (
diff --git a/apps/web/src/app/popular/page.tsx b/apps/web/src/app/popular/page.tsx
index 866daea4..1bdffd13 100644
--- a/apps/web/src/app/popular/page.tsx
+++ b/apps/web/src/app/popular/page.tsx
@@ -2,8 +2,8 @@ import PopularRankingList from './PopularRankingList';
 
 export default function PopularPage() {
   return (
-    <div className="flex flex-col gap-4">
-      <h1 className="text-2xl font-bold">인기 노래</h1>
+    <div className="flex h-full flex-col gap-4">
+      <h1 className="shrink-0 text-2xl font-bold">인기 노래</h1>
 
       {/* 추천 곡 순위 */}
 
diff --git a/apps/web/src/app/recent/page.tsx b/apps/web/src/app/recent/page.tsx
index 45192749..0cc00647 100644
--- a/apps/web/src/app/recent/page.tsx
+++ b/apps/web/src/app/recent/page.tsx
@@ -45,8 +45,8 @@ export default function RecentSongPage() {
   const months = Array.from({ length: 12 }, (_, i) => i);
 
   return (
-    <div className="bg-background h-full space-y-4">
-      <div className="flex items-center justify-between px-2">
+    <div className="bg-background flex h-full flex-col space-y-4">
+      <div className="flex shrink-0 items-center justify-between px-2">
         <Button variant="ghost" size="icon" onClick={handlePrevMonth}>
           <ArrowLeft className="h-5 w-5" />
         </Button>
@@ -86,7 +86,7 @@ export default function RecentSongPage() {
       </div>
 
       {recentAddSongs && recentAddSongs.length > 0 ? (
-        <div className="flex h-[calc(100vh-16rem)] flex-col overflow-y-auto">
+        <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
           {recentAddSongs.map(song => (
             <RecentSongCard key={song.id} song={song} />
           ))}
diff --git a/apps/web/src/app/search/HomePage.tsx b/apps/web/src/app/search/HomePage.tsx
index 858dac60..3546ef25 100644
--- a/apps/web/src/app/search/HomePage.tsx
+++ b/apps/web/src/app/search/HomePage.tsx
@@ -141,8 +141,8 @@ export default function SearchPage() {
   }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage, isError]);
 
   return (
-    <div className="bg-background">
-      <div className="flex flex-col gap-4">
+    <div className="bg-background flex h-full flex-col">
+      <div className="flex shrink-0 flex-col gap-4">
         <div className="flex justify-between">
           <div className="flex flex-col">
             <h1 className="text-2xl font-bold">노래 검색</h1>
@@ -226,7 +226,7 @@ export default function SearchPage() {
 
         <LanguageTagFilter value={languageTag} onChange={handleLanguageTagChange} />
       </div>
-      <div ref={setScrollRef} className="h-[calc(100vh-22rem)] overflow-x-hidden overflow-y-auto">
+      <div ref={setScrollRef} className="min-h-0 flex-1 overflow-x-hidden overflow-y-auto">
         {searchSongs.length > 0 && (
           <div className="flex w-full max-w-md flex-col gap-4 p-4">
             {searchSongs.map((song, index) => (
diff --git a/apps/web/src/app/signup/page.tsx b/apps/web/src/app/signup/page.tsx
index e79117f2..2b988447 100644
--- a/apps/web/src/app/signup/page.tsx
+++ b/apps/web/src/app/signup/page.tsx
@@ -78,7 +78,7 @@ export default function SignupPage() {
   };
 
   return (
-    <div className="bg-background flex h-dvh flex-col justify-center px-4">
+    <div className="bg-background flex h-full flex-col justify-center px-4">
       <div className="w-full space-y-6">
         <div className="space-y-2 text-center">
           <h1 className="text-2xl font-bold">회원가입</h1>
diff --git a/apps/web/src/app/tosing/page.tsx b/apps/web/src/app/tosing/page.tsx
index 3125f7ab..b45bb3e6 100644
--- a/apps/web/src/app/tosing/page.tsx
+++ b/apps/web/src/app/tosing/page.tsx
@@ -5,12 +5,12 @@ import SongList from './SongList';
 
 export default function HomePage() {
   return (
-    <div className="bg-background">
-      <div className="mb-6 flex items-center justify-between">
+    <div className="bg-background flex h-full flex-col">
+      <div className="mb-6 flex shrink-0 items-center justify-between">
         <h1 className="text-2xl font-bold">노래방 플레이리스트</h1>
         <AddSongButton />
       </div>
-      <ScrollArea className="h-[calc(100vh-16rem)] py-4">
+      <ScrollArea className="min-h-0 flex-1 py-4">
         <SongList />
       </ScrollArea>
     </div>
diff --git a/apps/web/src/app/withdrawal/page.tsx b/apps/web/src/app/withdrawal/page.tsx
index 6b4f39e9..3c2a7fbc 100644
--- a/apps/web/src/app/withdrawal/page.tsx
+++ b/apps/web/src/app/withdrawal/page.tsx
@@ -56,7 +56,7 @@ export default function WithdrawalPage() {
   };
 
   return (
-    <div className="bg-background flex h-dvh flex-col justify-center px-4">
+    <div className="bg-background flex h-full flex-col justify-center px-4">
       <div className="mx-auto w-full max-w-md space-y-6">
         <div className="space-y-2 text-center">
           <h1 className="text-2xl font-bold">회원 탈퇴</h1>