[ Feature/DEV-75 ] 메인페이지에 topbutton 구현

[Happhee]

🔥 Related Issues

https://linear.app/fewletter/issue/DEV-75/메인-페이지-무한스크롤-탑버튼

💜 작업 내용

• top button 컴포넌트를 구현

✅ PR Point

Topbutton

export default function TopButton() {
  const [showButton, setShowButton] = useState(false);

  const scrollToTop = () => {
    window.scroll({
      top: 0,
      behavior: "smooth",
    });
  };

  useEffect(function setScrollShowButton() {
    const handleShowButton = () => {
      console.log(window.screenY);
      if (window.scrollY > 300) {
        setShowButton(true);
      } else {
        setShowButton(false);
      }
    };

    window.addEventListener("scroll", handleShowButton);
    return () => {
      window.removeEventListener("scroll", handleShowButton);
    };
  }, []);

  return (
    showButton && (
      <div className="z-1 sticky bottom-[10px] left-[90%] w-fit">
        <Button
          id="top"
          onClick={scrollToTop}
          type="button"
          className={cn(
            "h-[36px] w-[36px] p-0",
            "rounded-full border-[0.5px] border-text-gray2 bg-white",
            "hover:bg-white",
          )}
        >
          <UpIcon width={22} height={26} />
        </Button>
      </div>
    )
  );
}

👀 스크린샷 / GIF / 링크

2024-08-03.9.34.54.mov

[soomin9106]

나중에 커스텀 훅으로 뺴면 좋을 것 같슴다 🫡

[Happhee]

@soomin9106 아네넵!!좋습니다!