Next.js - 스크롤 유도 가이드 구현

📌스크롤 유도 가이드 구현

"use client";
import { useState, useEffect, useRef } from "react";
import gsap from "gsap";

export default function page() {
  const [isSpecialCase, setIsSpecialCase] = useState(false);

  const handleScrollGuideClick = () => {
    if (isSpecialCase) {

      window.scrollTo({
        top: 0,
        behavior: "smooth", //스크롤 부드럽게
      });
    }
  };
  
    useEffect(() => {

   const handleScroll = () => {
     const isScrollAtBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight;
     const scrollTop = window.scrollY;

      // 상단으로 스크롤될 때의 조건을 설정 (예: 0 또는 원하는 값)
      const isTop = scrollTop === 0;

      if (isScrollAtBottom) {
        setIsSpecialCase(!isSpecialCase);
      } else if (isTop) {
        setIsSpecialCase(isSpecialCase);
      }
    };

    document.addEventListener("scroll", handleScroll);

    // Clean up the event listener on component unmount
    return () => {
      document.removeEventListener("scroll", handleScroll);
    };
  }, []); // Empty dependency array to run the effect only once on mount


  return (
    <>
     {/* 스크롤 유도 가이드 */}
      <div
        className={`${isSpecialCase ? "scroll_guide_up" : "scroll_guide"}`}
        onClick={handleScrollGuideClick}
      >
        <span></span>
        <span></span>
        <span></span>
      </div>
    </>
  );
}

 

[isSpecialCase, setIsSpecialCase] = useState(false)

• isSpecialCase: 스크롤이 페이지 맨 아래로 도달하면 true가 되는 상태이다.
• setIsSpecialCase: isSpecialCase 상태를 업데이트하는 함수이다.

handleScrollGuideClick()

• handleScrollGuideClick 함수는 스크롤 가이드가 클릭되었을 때 호출된다.
• isSpecialCase가 true일 때 (스크롤이 맨 아래로 도달한 경우), 페이지를 맨 위로 부드럽게 스크롤한다.
• window.scrollTo를 사용하여 페이지를 맨 위로 스크롤하고, behavior: "smooth"를 통해 부드러운 스크롤 효과를 적용한다.

handleScroll()

     const isScrollAtBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight

• 현재 뷰포트의 맨 아래 위치를 의미하며, document.body.offsetHeight는 페이지의 총 높이를 나타낸다. 
• 따라서 이 조건이 true이면 페이지가 맨 아래로 스크롤되었다는 것을 나타낸다.
• window.innerHeight는 현재 뷰포트(화면에 보이는 영역)의 높이를 나타낸다. 
• 이 값은 사용자의 브라우저 창에 표시되는 내용 영역의 세로 높이를 의미한다.

   const scrollTop = window.scrollY;

• window.scrollY는 현재 세로 스크롤 위치를 나타낸다.
• 사용자가 페이지를 세로로 스크롤할 때마다 값이 증가하며, 페이지의 맨 위에서부터 현재 스크롤 위치까지의 세로 거리를 나타낸다. 사용자가 페이지를 스크롤하기 전까지는 0이다. 

 

className={`${isSpecialCase ? "scroll_guide_up" : "scroll_guide"}`}

• isSpecialCase가 true일 때 (스크롤이 맨 아래로 도달한 경우), scroll_guide_up으로 className을 설정해서 기능에 맞는 디자인을 해준다. 

 

📌스크롤 유도 가이드 최종 구현 영상