fix(layout): stabilize viewport height with 100dvh and SafeAreaView

src/App.css

@@ -9,6 +9,20 @@
   text-align: center;
 }
 
+/* Stable viewport height to avoid address-bar induced jumps */
+html,
+body {
+  height: 100%;
+}
+body {
+  min-height: 100dvh;
+}
+#root {
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+}
+
 .card {
   padding: 2em;
 }

src/components/Auth/Authform.jsx

@@ -40,14 +40,14 @@ const AuthForm = ({ type, onSubmit, setLoginType }) => {
     const serverRole = ROLE_MAP.toServer[type]; // MANAGER | MEMBER
     window.location.href = `${KAKAO_AUTH_URL}&state=${serverRole}`;
   }
-  
+
   function handleFindAccount(e) {
     e.preventDefault();
     navigate('/find-account');
   }
 
   return (
-    <div className='bg-white rounded-lg mx-auto'>
+    <div className='mx-auto'>
       <button
         onClick={() => navigateToHome(navigate)}
         className='w-1/2 mx-auto py-8 cursor-pointer'

src/components/ui/Layout.jsx

@@ -4,6 +4,23 @@ import Footer from './temp/Footer';
 import useAuthStore from '@/store/useAuthStore';
 import { useHeaderPropsStore } from '@/store/useHeaderPropsStore';
 
+function SafeAreaView({ children }) {
+  return (
+    <div
+      style={{
+        paddingTop: 'env(safe-area-inset-top, 0px)',
+        paddingBottom: 'env(safe-area-inset-bottom, 0px)',
+        paddingLeft: 'env(safe-area-inset-left, 0px)',
+        paddingRight: 'env(safe-area-inset-right, 0px)',
+        minHeight: '100dvh',
+        boxSizing: 'border-box',
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
 export default function Layout() {
   const location = useLocation();
   const headerProps = useHeaderPropsStore((state) => state.headerProps);
@@ -40,12 +57,14 @@ export default function Layout() {
     hidePaddingPrefixRoutes.some((route) => location.pathname.startsWith(route));
 
   return (
-    <div className='min-h-screen flex flex-col max-w-2xl mx-auto'>
-      {isHeaderVisible && <Header {...headerProps} />}
-      <main className={isFullWidth ? 'flex-grow' : 'w-[88%] mx-auto flex-grow'}>
-        <Outlet />
-      </main>
-      {isFooterVisible && <Footer isManager={isManager} />}
-    </div>
+    <SafeAreaView>
+      <div className='min-h-[100dvh] flex flex-col max-w-2xl mx-auto'>
+        {isHeaderVisible && <Header {...headerProps} />}
+        <main className={isFullWidth ? 'flex-grow' : 'w-[88%] mx-auto flex-grow'}>
+          <Outlet />
+        </main>
+        {isFooterVisible && <Footer isManager={isManager} />}
+      </div>
+    </SafeAreaView>
   );
 }

src/components/ui/custom/Navbar.jsx

@@ -1,19 +1,22 @@
 import { Button } from '@/components/ui/custom/Button';
 import { useNavigate } from 'react-router-dom';
-import { Phone, Menu } from 'lucide-react';
+import { Phone } from 'lucide-react';
 import useAuthStore from '@/store/useAuthStore';
 import Logo from '/blaybus_logo_icon_text.svg';
 
 export default function Navbar() {
   const navigate = useNavigate();
   const logout = useAuthStore((s) => s.logout);
   const isLoggedIn = useAuthStore((s) => s.isLoggedIn());
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
 
   return (
     <header className='bg-white shadow-sm border-b sticky top-0 z-50'>
       <div className='container mx-auto px-4 sm:px-6 lg:px-10 flex justify-between items-center py-4'>
         <div className='flex justify-between items-center py-2 lg:py-4 cursor-pointer'>
-          <div className='flex items-center space-x-3'>
+          <div className='flex items-center space-x-3' onClick={scrollToTop}>
             <img src={Logo} alt='logo' className='h-10 lg:h-12 w-auto' />
           </div>
         </div>
@@ -62,10 +65,6 @@ export default function Navbar() {
               </Button>
             )}
           </div>
-
-          <Button variant='ghost' size='icon' className='md:hidden'>
-            <Menu className='w-6 h-6' />
-          </Button>
         </div>
       </div>
     </header>

src/pages/Home.jsx

@@ -24,6 +24,9 @@ import {
 
 export default function Home() {
   const navigate = useNavigate();
+  const blockAlert = () => {
+    alert('준비 중입니다.');
+  };
 
   return (
     <>
@@ -50,11 +53,14 @@ export default function Home() {
             </div>
 
             <div className='flex flex-col sm:flex-row gap-3 justify-center items-center lg:w-[55%] mx-auto'>
-              <Button className='text-xl hover:bg-white hover:text-[var(--main)] hover:border-[var(--main)]'>
+              <Button
+                className='text-xl hover:bg-white hover:text-[var(--main)] hover:border-[var(--main)]'
+                onClick={blockAlert}
+              >
                 <Search className='w-5 h-5 mr-3' />
                 돌봄 서비스 찾기
               </Button>
-              <Button variant='white' className='text-xl'>
+              <Button variant='white' className='text-xl' onClick={blockAlert}>
                 <Phone className='w-5 h-5 mr-3' />
                 전화 상담하기
               </Button>
@@ -116,8 +122,7 @@ export default function Home() {
                   <CheckCircle className='w-6 h-6 text-green-500 mt-1 flex-shrink-0' />
                   <span>합리적인 비용, 투명한 요금제</span>
                 </div>
-                {/* TODO: 링크 연결 */}
-                <Button className='w-full mt-6 text-lg py-6'>
+                <Button className='w-full mt-6 text-lg py-6' onClick={blockAlert}>
                   요양보호사 찾기
                   <ChevronRight className='ml-2 w-5 h-5' />
                 </Button>
@@ -151,8 +156,7 @@ export default function Home() {
                   <CheckCircle className='w-6 h-6 text-green-500 mt-1 flex-shrink-0' />
                   <span>실제 이용자 리뷰 제공</span>
                 </div>
-                {/* TODO: 링크 연결 */}
-                <Button className='w-full mt-6 text-lg py-6'>
+                <Button className='w-full mt-6 text-lg py-6' onClick={blockAlert}>
                   복지센터 찾기
                   <ChevronRight className='ml-2 w-5 h-5' />
                 </Button>
@@ -299,10 +303,10 @@ export default function Home() {
                 <Phone className='mr-3 w-6 h-6' />
                 1588-1234 전화상담
               </Button>
-              {/* TODO: 링크 연결 */}
               <Button
                 variant='white'
                 className='text-xl px-10 py-6 hover:bg-gray-100 hover:text-[var(--main)]'
+                onClick={() => navigate('/signin')}
               >
                 매칭하러 가기
                 <ChevronRight className='ml-2 w-6 h-6' />