Merge pull request #72 from Soongsil-Developers/mainpage

[수정] fixed 제거 #71

src/css/LoginPage.css

@@ -2,12 +2,13 @@ html,
 body {
   width: 100vw;
   height: 100vh;
-  overflow: hidden;
+  height: calc(var(--vh) * 100);
 }
 
 #root {
   width: 100vw;
   height: 100vh;
+  height: calc(var(--vh) * 100);
   align-items: center;
 }
 

src/css/MainPage.css

@@ -1,7 +1,3 @@
-#mainPage {
-  margin-top: 75px;
-}
-
 #timer {
   position: sticky;
   top: 20px;
@@ -11,7 +7,6 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  /* justify-content: space-between; */
   position: sticky;
   bottom: 50px;
 }

src/css/Navigation.css

@@ -1,7 +1,6 @@
 .navigation__wrapper {
   width: 100%;
   height: 75px;
-  position: fixed;
   display: flex;
   align-items: center;
   z-index: 1;
@@ -51,6 +50,7 @@
     left: 0;
     top: 75px;
     background-color: #50b4d2;
+    z-index: 1;
     box-shadow: 2px 0px 1px rgba(44, 44, 44, 0.137);
   }
 

src/tsx/LoginPage.tsx

@@ -1,10 +1,32 @@
+import React from "react";
 import Button from "react-bootstrap/Button";
 import Form from "react-bootstrap/Form";
 import { FaUser, FaLock } from "react-icons/fa";
 import { Link } from "react-router-dom";
 import "../css/LoginPage.css";
 
 const LoginPage = () => {
+  let windowInnerHeight = 0;
+  let vh = 0;
+
+  const handleResize = () => {
+    const currentInnerHeight = window.innerHeight;
+    console.log(`${currentInnerHeight}/${windowInnerHeight}`);
+    if (currentInnerHeight !== windowInnerHeight) {
+      windowInnerHeight = currentInnerHeight;
+      vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty("--vh", `${vh}px`);
+    }
+  };
+
+  handleResize();
+
+  React.useEffect(() => {
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  });
   return (
     <Form>
       <div id="loginPage">