설명

성향테스트를 체험 할 수 있는 페이지입니다.

슬라이드 에니메이션이 적용되어 있습니다.

슬라이드 에니메이션

<HiddenWrapper>
	<SlideWrapper ref={slideRef}>
	  <StartScreen />
	  <MainScreen />
	  <LastScreen />
	</SlideWrapper>;
</HiddenWrapper>

HiddenWrapper는 StartScreen, MainScreen 및 LastScreen의 세 가지 구성 요소를 감싸며 각각 475px의 너비로 가로로 배치합니다.

overflow: hidden을 사용하여 화면의 overflow 부분을 hidden 시킵니다.

SlideWrapper는 사용자가 'nextSlide' 버튼을 클릭할 때 다음 화면으로 이동하는 역할을 합니다.

다음 슬라이드로 넘어가는 버튼을 연속으로 클릭시 다다음 슬라이드로 넘어가는 현상을 방지하기위해 slide 컴포넌트에 ‘transitionend’ event 등록하였습니다.

transition 시 isTransitioning = false 로 설정하여 버튼 disable 시킵니다.

useSlide

export const useSlide = () => {
  const slideRef = useRef(null);
  const [currentSlide, setCurrentSlide] = useState(0);
  const [isTransitioning, setIsTransitioning] = useState(false);

  useEffect(() => {
    if (slideRef.current) {
      slideRef.current.style.transition = 'transform 1s';
      slideRef.current.style.transform = `translateX(-${currentSlide}00%)`;
      const handleTransitionEnd = () => {
        setIsTransitioning(false);
      };

      slideRef.current.addEventListener('transitionend', handleTransitionEnd);

      return () => {
        slideRef.current &&
          slideRef.current.removeEventListener(
            'transitionend',
            handleTransitionEnd,
          );
      };
    }
  }, [currentSlide]);

  const nextSlide = () => {
    if (!isTransitioning) {
      setIsTransitioning(true);
      setCurrentSlide((currentSlide) => currentSlide + 1);
    }
  };

  const resetSlide = () => {
    slideRef.current.style.transition = 'none';
    slideRef.current.style.transform = `translateX(0)`;
    setCurrentSlide(0);
  };

  return { slideRef, currentSlide, nextSlide, resetSlide, isTransitioning };
};

흐름 예시)

1. nextSlide 버튼을 클릭합니다.