Fix : 본문 콘텐츠 영역 및 로그인 화면 스크롤 레이아웃 수정 (#286)

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;

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('/')}

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">

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>

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 ? (

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>
 
       {/* 추천 곡 순위 */}
 

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} />
           ))}

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) => (

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>

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>

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>