Merge pull request #237 from TeamPiickle/feat/#233-100vh

Feat/#233 100vh
TeamPiickle · Mar 23, 2023 · bc19b3e · bc19b3e
2 parents 9ff2163 + 08c6cfb
commit bc19b3e
Show file tree

Hide file tree

Showing 13 changed files with 32 additions and 5 deletions.
diff --git a/src/@components/@common/Loading/style.ts b/src/@components/@common/Loading/style.ts
@@ -9,6 +9,8 @@ export const St = {
     left: 0;
 
     height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
+    min-height: -webkit-fill-available;
 
     display: flex;
     justify-content: center;

diff --git a/src/@components/@common/MenuBar/style.ts b/src/@components/@common/MenuBar/style.ts
@@ -7,6 +7,8 @@ const Root = styled.main`
   right: 0;
   left: 0;
   height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
+  min-height: -webkit-fill-available;
 
   background-color: ${({ theme }) => theme.newColors.black50};
 
@@ -72,6 +74,8 @@ const ContentsContainer = styled.section`
 
   width: 28.8rem;
   height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
+  min-height: -webkit-fill-available;
   float: right;
 
   background-color: ${({ theme }) => theme.newColors.white};

diff --git a/src/@components/@common/Modal/style.ts b/src/@components/@common/Modal/style.ts
@@ -19,10 +19,14 @@ const GrayRoot = styled(Root)``;
 
 const WhiteRoot = styled(Root)`
   height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
+  min-height: -webkit-fill-available;
 `;
 
 const DefaultRoot = styled(Root)`
   height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
+  min-height: -webkit-fill-available;
   padding: 1.6rem;
 `;
 

diff --git a/src/@components/CardCollectionPage/CardSlider/style.ts b/src/@components/CardCollectionPage/CardSlider/style.ts
@@ -10,6 +10,7 @@ export const St = {
 
     & .slick-slide {
       height: calc(100vh - 14.8rem);
+      height: calc(calc(var(--vh, 1vh) * 100) - 14.8rem);
       max-height: 49.5em;
     }
 
@@ -31,7 +32,6 @@ export const St = {
     }
 
     & .slick-track {
-      /* height: calc(100vh - 10.5rem); */
       height: 52rem;
 
       display: flex;

diff --git a/src/@components/CardCollectionPage/style.ts b/src/@components/CardCollectionPage/style.ts
@@ -2,9 +2,9 @@ import styled from "styled-components";
 
 export const St = {
   MainPage: styled.main`
+    height: 100vh;
     height: calc(var(--vh, 1vh) * 100);
     min-height: -webkit-fill-available;
-    /* min-height: fill-available; */
 
     padding: 8rem 0 5.1rem;
 

diff --git a/src/@components/DeletePage/style.ts b/src/@components/DeletePage/style.ts
@@ -4,6 +4,8 @@ import styled, { css } from "styled-components";
 export const St = {
   Root: styled.main`
     height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
+    min-height: -webkit-fill-available;
   `,
 
   TitleContainer: styled.section`

diff --git a/src/@components/Error404Page/style.ts b/src/@components/Error404Page/style.ts
@@ -4,6 +4,8 @@ import styled from "styled-components";
 export const St = {
   Root: styled.main`
     height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
+    min-height: -webkit-fill-available;
 
     padding: 6.4rem 1.6rem 0;
 

diff --git a/src/@components/JoinPage/AgreePage/style.ts b/src/@components/JoinPage/AgreePage/style.ts
@@ -4,6 +4,8 @@ import styled, { css, keyframes } from "styled-components";
 export const St = {
   Root: styled.main`
     height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
+    min-height: -webkit-fill-available;
   `,
 
   JoinAgree: styled.section`

diff --git a/src/@components/JoinPage/EmailAuthenticationPage/style.ts b/src/@components/JoinPage/EmailAuthenticationPage/style.ts
@@ -2,6 +2,8 @@ import styled from "styled-components";
 export const St = {
   Root: styled.section`
     height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
+    min-height: -webkit-fill-available;
   `,
 
   EmailAuthenticationSection: styled.section`

diff --git a/src/@components/JoinPage/EmailConfirmPage/style.ts b/src/@components/JoinPage/EmailConfirmPage/style.ts
@@ -3,6 +3,8 @@ import styled from "styled-components";
 export const St = {
   Root: styled.section`
     height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
+    min-height: -webkit-fill-available;
   `,
 
   EmailConfirmContainer: styled.section`

diff --git a/src/@components/JoinPage/UserProfilePage/style.ts b/src/@components/JoinPage/UserProfilePage/style.ts
@@ -3,6 +3,8 @@ import styled from "styled-components";
 export const St = {
   Root: styled.main`
     height: 100vh;
+    height: calc(var(--vh, 1vh) * 100);
+    min-height: -webkit-fill-available;
   `,
 
   ProfileContainer: styled.section``,

diff --git a/src/style/globalStyle.ts b/src/style/globalStyle.ts
@@ -1,9 +1,9 @@
 import { createGlobalStyle } from "styled-components";
 
 export const GlobalStyle = createGlobalStyle`
-  :root {
-    --vh: 100%;
-   }
+  html {
+    height: -webkit-fill-available;
+  }
 
   html, body, div, span, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,

diff --git a/src/util/setScreenSize.ts b/src/util/setScreenSize.ts
@@ -1,4 +1,9 @@
 export default function setScreenSize() {
   const vh = window.innerHeight * 0.01;
   document.documentElement.style.setProperty("--vh", `${vh}px`);
+
+  window.addEventListener("resize", () => {
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty("--vh", `${vh}px`);
+  });
 }