Skip to content

Commit

Permalink
[FE][Fix] #357 : 온보딩 페이지 height 문제 해결
Browse files Browse the repository at this point in the history
- 온보딩 페이지 height 문제 해결
  • Loading branch information
happyhyep committed Dec 2, 2024
1 parent 597b307 commit e819e3d
Showing 1 changed file with 18 additions and 2 deletions.
20 changes: 18 additions & 2 deletions frontend/src/component/onBoarding/Onboarding.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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);
Expand All @@ -24,7 +37,10 @@ export const Onboarding = ({ onComplete }: IOnboardingProps) => {
};

return (
<div className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden bg-gray-100">
<div
className="relative flex w-full flex-col items-center justify-center overflow-hidden bg-gray-100"
style={{ height: window.innerHeight }}
>
<div className="absolute right-3 top-3 z-[6000] flex items-center gap-2">
<div className="text-sm text-gray-200">튜토리얼 끝내기</div>
<button
Expand Down

0 comments on commit e819e3d

Please sign in to comment.