Merge pull request #230 from SOPT-all/fix/#227/onboarding-ga

[FIX] 온보딩 하단 버튼 위치 조정
JEOLLOGA · Jan 24, 2025 · 7725fb5 · 7725fb5
2 parents bb724e7 + c8d9868
commit 7725fb5
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git 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
@@ -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',
 });