fix: 모바일 화면 높이 수정

src/App.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { Route, Routes } from 'react-router-dom';
 
 import AddTime from './pages/addTime/AddTime';
@@ -9,8 +10,13 @@ import Timer from './pages/roomTimer/RoomTimer';
 import Login from './pages/login/Login';
 import Result from './pages/result/Result';
 import Invite from './pages/invite/Invite';
+import { setScreenSize } from './utils/setScreenSize';
 
 function App() {
+ useEffect(() => {
+ setScreenSize();
+ }, []);
+
  return (
  <Routes>
  <Route path="/" element={<Start />} />

src/styles/GlobalStyle.tsx

@@ -10,6 +10,10 @@ const defaultStyle = css`
  font-display: fallback;
  }
 
+ :root {
+ --vh: 100%;
+ }
+
  html,
  body {
  margin: 0;

src/utils/setScreenSize.ts

@@ -0,0 +1,6 @@
+export const setScreenSize = () => {
+ document.documentElement.style.setProperty(
+ '--vh',
+ `${window.innerHeight * 0.01}px`
+ );
+};