From e819e3d77b678a77a979885d3892c8acd20c949c Mon Sep 17 00:00:00 2001 From: Hyein Jeong Date: Mon, 2 Dec 2024 20:41:31 +0900 Subject: [PATCH] =?UTF-8?q?[FE][Fix]=20#357=20:=20=EC=98=A8=EB=B3=B4?= =?UTF-8?q?=EB=94=A9=20=ED=8E=98=EC=9D=B4=EC=A7=80=20height=20=EB=AC=B8?= =?UTF-8?q?=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 온보딩 페이지 height 문제 해결 --- .../src/component/onBoarding/Onboarding.tsx | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/frontend/src/component/onBoarding/Onboarding.tsx b/frontend/src/component/onBoarding/Onboarding.tsx index 86c4109e..bd52edfb 100644 --- a/frontend/src/component/onBoarding/Onboarding.tsx +++ b/frontend/src/component/onBoarding/Onboarding.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { onboardingData } from '@/lib/data/onboardingData.ts'; import { MdClear } from 'react-icons/md'; @@ -9,6 +9,19 @@ interface IOnboardingProps { export const Onboarding = ({ onComplete }: IOnboardingProps) => { const [currentSlide, setCurrentSlide] = useState(0); + useEffect(() => { + const setVh = () => { + const vh = window.innerHeight * 0.01; + document.documentElement.style.setProperty('--vh', `${vh}px`); + }; + setVh(); + + window.addEventListener('resize', setVh); + return () => { + window.removeEventListener('resize', setVh); + }; + }, []); + const handleNext = () => { if (currentSlide < onboardingData.length - 1) { setCurrentSlide(currentSlide + 1); @@ -24,7 +37,10 @@ export const Onboarding = ({ onComplete }: IOnboardingProps) => { }; return ( -
+
튜토리얼 끝내기