From c8d9868e815727aa56937f377d83cb723391c6cf Mon Sep 17 00:00:00 2001
From: bykbyk0401 <bykbyk0401@gmail.com>
Date: Sat, 25 Jan 2025 02:04:37 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=B8=8C?=
 =?UTF-8?q?=EB=9D=BC=EC=9A=B0=EC=A0=80=20100vh=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/onboardingPage/OnboardingPage.tsx    | 14 ++++++++++++++
 src/pages/onboardingPage/onboardingPage.css.ts |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/pages/onboardingPage/OnboardingPage.tsx b/src/pages/onboardingPage/OnboardingPage.tsx
index f0672649..0c96cf4d 100644
--- a/src/pages/onboardingPage/OnboardingPage.tsx
+++ b/src/pages/onboardingPage/OnboardingPage.tsx
@@ -27,6 +27,20 @@ const OnboardingPage = () => {
 
   const { data, isLoading } = useGetNickname(userId);
   const [isInitialLoad, setIsInitialLoad] = useState<boolean>(true);
+  const setVh = () => {
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty('--vh', `${vh}px`);
+  };
+
+  useEffect(() => {
+    setVh();
+    window.addEventListener('resize', setVh);
+
+    return () => {
+      window.removeEventListener('resize', setVh);
+    };
+  }, []);
+
   useEffect(() => {
     if (isInitialLoad) {
       setSelections((prev) => ({
diff --git a/src/pages/onboardingPage/onboardingPage.css.ts b/src/pages/onboardingPage/onboardingPage.css.ts
index 4943e699..2d4f3185 100644
--- a/src/pages/onboardingPage/onboardingPage.css.ts
+++ b/src/pages/onboardingPage/onboardingPage.css.ts
@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
 
 const container = style({
-  height: '100vh',
+  height: 'calc(var(--vh, 1vh) * 100)',
   display: 'grid',
   gridTemplateRows: 'auto 1fr',
 });