✨ feat: Scroll To Top

src/components/common/ScrollToTop/ScrollTarget.tsx

@@ -0,0 +1,15 @@
+import React, { MutableRefObject } from 'react'
+
+interface ScrollTargetProps {
+    refScrollUp: MutableRefObject<HTMLDivElement>;
+}
+
+const ScrollTarget = ({ refScrollUp } : ScrollTargetProps) => {
+
+    return (
+        <div ref={refScrollUp}></div>
+    )
+
+}
+
+export default ScrollTarget

src/components/common/ScrollToTop/ScrollToTop.module.scss

@@ -0,0 +1,24 @@
+@import '../../../styles/utilities';
+
+.scrollToTop {
+    @apply hidden;
+
+    @screen md {
+        &.show {
+            @apply block rounded-lg fixed cursor-pointer;
+            right: 11.2rem;
+            bottom: 21.6rem; 
+            width: 6.4rem;
+            height: 6.4rem;
+            background-color: var(--border-line);
+        }
+        
+        &.hide {
+            @apply hidden;
+        }
+    }
+
+    .scrollToTopBtn {
+        @apply outline-none w-full h-full;
+    }
+}

src/components/common/ScrollToTop/ScrollToTop.tsx

@@ -0,0 +1,54 @@
+import React, { useState, useEffect, MutableRefObject } from 'react'
+import classNames from 'classnames'
+import s from './ScrollToTop.module.scss'
+
+import ArrowUp from '../../icons/IconArrowUp'
+
+interface ScrollToTopProps {
+    target: MutableRefObject<HTMLDivElement>;
+    visibilityHeight?: number;
+}
+
+const ScrollToTop = ({ target, visibilityHeight=450 }: ScrollToTopProps) => {
+
+    const [scrollPosition, setSrollPosition] = useState(0);
+    const [showScrollToTop, setShowScrollToTop] = useState("hide");
+
+    function handleVisibleButton() {
+        const position = window.pageYOffset;
+        setSrollPosition(position);
+    
+        if (scrollPosition > visibilityHeight) {
+          return setShowScrollToTop("show")
+        } else if (scrollPosition < visibilityHeight) {
+          return setShowScrollToTop("hide");
+        }
+    };
+
+    function handleScrollUp() {
+        target.current.scrollIntoView({ behavior: "smooth" });
+    }
+
+    function addEventScroll() {
+        window.addEventListener("scroll", handleVisibleButton);
+    }
+
+    useEffect(() => {
+        addEventScroll()
+    });    
+
+    return (
+        <div className={classNames(s.scrollToTop, {
+            [s[`${showScrollToTop}`]]: showScrollToTop
+          })}
+          onClick={handleScrollUp}
+          >
+            <button className={s.scrollToTopBtn}>
+                <ArrowUp />
+            </button>
+        </div>
+    )
+
+}
+
+export default ScrollToTop