FIX: 모바일 환경에서 화면 높이가 제대로 꽉차지 않던 문제

BSSM-BSM · Mar 24, 2023 · 18cbc47 · 18cbc47
1 parent 2935b4f
commit 18cbc47
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 7 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -8,6 +8,11 @@ import StyledComponentsRegistry from '../lib/registry';
 import Script from 'next/script';
 import { Main } from '../components/common/main';
 
+const upadteScreenHeight = () => {
+  const vh = window.innerHeight * 0.01;
+  document.documentElement.style.setProperty("--vh", `${vh}px`);
+}
+
 export default function RootLayout({
   children,
 }: {
@@ -19,6 +24,11 @@ export default function RootLayout({
     }
   }, []);
 
+  useEffect(() => {
+    upadteScreenHeight();
+    window.addEventListener('resize', () => upadteScreenHeight());
+  }, []);
+
   return (
     <html lang="kr">
       <head>

diff --git a/app/meister/page.tsx b/app/meister/page.tsx
@@ -100,7 +100,7 @@ const MeisterPage = () => {
   return (
     <div className='container _100'>
       <>
-        <Banner position={BannerPos.BOTTOM} type={BannerType.HORIZONTAL} />
+        <Banner position={BannerPos.TOP} type={BannerType.HORIZONTAL} />
       </>
       <form className={`${styles.form} cols gap-1`} autoComplete='off' onSubmit={e => {
         e.preventDefault();

diff --git a/styles/globals.css b/styles/globals.css
@@ -120,21 +120,21 @@ body.dark {
   --background: var(--level-0);
 }
 
-html, body {
-  width: 100%;
-  height: 100%;
+:root {
+  --vh: 100%
 }
 
 html {
   /* 1rem == 10px */
   --scale: 62.5%;
   font-size: var(--scale);
-  height: 100%;
+  height: calc(var(--vh) * 100);
   scroll-behavior: smooth;
   scroll-snap-type: y proximity;
 }
 
 body {
+  height: 100%;
   background-color: var(--background);
   color: var(--text);
   font-size: 1.5rem;
@@ -152,7 +152,7 @@ body {
   grid-template-rows: auto 1fr auto;
   grid-template-columns: auto 1fr;
   width: 100%;
-  height: calc(1vh * 100);
+  height: 100%;
 }
 
 main {

diff --git a/styles/meister/index.module.css b/styles/meister/index.module.css
@@ -1,5 +1,5 @@
 .form {
-  margin-top: 10rem;
+  margin-top: 15rem;
 }
 
 .result {