design: 모바일 viewport 문제 개션을 위한 훅 추가

Author: AAminha

src/App.tsx

@@ -1,5 +1,6 @@
 import { Route, Routes } from 'react-router';
 
+import useViewport from './hooks/useViewport';
 import Home from './pages/Home';
 import LetterBoardPage from './pages/LetterBoard';
 import LetterBoardDetailPage from './pages/LetterBoardDetail';
@@ -14,6 +15,8 @@ import RollingPaperPage from './pages/RollingPaper';
 import WritePage from './pages/Write';
 
 const App = () => {
+  useViewport();
+
   return (
     <Routes>
       <Route>

src/hooks/.gitkeep

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+
+function useViewport() {
+  useEffect(() => {
+    const setViewport = () => {
+      const vh = window.innerHeight * 0.00999;
+      const vw = document.documentElement.clientWidth * 0.00999;
+      document.documentElement.style.setProperty('--vh', `${vh}px`);
+      document.documentElement.style.setProperty('--vw', `${vw}px`);
+    };
+
+    setViewport();
+    window.addEventListener('resize', setViewport);
+
+    return () => {
+      window.removeEventListener('resize', setViewport);
+    };
+  }, []);
+}
+
+export default useViewport;