♻️ enhan: refactor component ScrollToTop

:%s

src/components/common/Layout/Layout.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 import { FC } from 'react'
 import { useModalCommon } from 'src/components/hooks'
 import { BRAND, CATEGORY, FEATURED } from 'src/utils/constanst.utils'
-import { CustomShapeSvg } from '..'
+import { CustomShapeSvg, ScrollToTop } from '..'
 import Footer from '../Footer/Footer'
 import Header from '../Header/Header'
 import MenuNavigationProductList from '../MenuNavigationProductList/MenuNavigationProductList'
@@ -29,11 +29,12 @@ const Layout: FC<Props> = ({ children }) => {
     return (
         <CommerceProvider locale={locale}>
             <div className={s.mainLayout}>
-                    <Header toggleFilter={toggleFilter}/>
+                <Header toggleFilter={toggleFilter} />
                 <main >{children}</main>
 
-                    <CustomShapeSvg/>
+                <CustomShapeSvg />
-					<div className={s.filter}><MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter}/> </div>
+                <div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter} /> </div>
+                <ScrollToTop visibilityHeight={1500} />
                 <Footer />
             </div>
         </CommerceProvider>

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

@@ -1,20 +1,20 @@
-@import '../../../styles/utilities';
+@import "../../../styles/utilities";
 
 .scrollToTop {
     @apply hidden;
+    z-index: 9999;
 
     @screen md {
         &.show {
             @apply block rounded-lg fixed cursor-pointer;
-            right: 11.2rem;
+            right: 6.4rem;
             bottom: 21.6rem;
             width: 6.4rem;
             height: 6.4rem;
             background-color: var(--border-line);
+            @screen lg {
+                right: 11.2rem;
             }
-        
-        &.hide {
-            @apply hidden;
         }
     }
 

src/components/common/ScrollToTop/ScrollToTop.tsx

@@ -1,44 +1,41 @@
-import React, { useState, useEffect, MutableRefObject } from 'react'
 import classNames from 'classnames'
+import React, { useEffect, useState } from 'react'
+import ArrowUp from '../../icons/IconArrowUp'
 import s from './ScrollToTop.module.scss'
 
-import ArrowUp from '../../icons/IconArrowUp'
 
 interface ScrollToTopProps {
     visibilityHeight?: number;
 }
 
-const ScrollToTop = ({ visibilityHeight=450 }: ScrollToTopProps) => {
+const ScrollToTop = ({ visibilityHeight = 450 }: ScrollToTopProps) => {
-
+    const [showScrollToTop, setShowScrollToTop] = useState<boolean>();
-    const [scrollPosition, setSrollPosition] = useState(0);
-    const [showScrollToTop, setShowScrollToTop] = useState("hide");
 
     function handleVisibleButton() {
-        const position = window.pageYOffset;
+        const scrollPosition = window.scrollY;
-        setSrollPosition(position);
 
         if (scrollPosition > visibilityHeight) {
-          return setShowScrollToTop("show")
+            setShowScrollToTop(true)
-        } else if (scrollPosition < visibilityHeight) {
+        } else {
-          return setShowScrollToTop("hide");
+            setShowScrollToTop(false)
         }
     };
 
+    useEffect(() => {
+        window.addEventListener("scroll", handleVisibleButton);
+        return () => {
+            window.removeEventListener("scroll", handleVisibleButton);
+        }
+    }, []);
+
+
     function handleScrollUp() {
         window.scrollTo(0, 0);
     }
 
-    function addEventScroll() {
-        window.addEventListener("scroll", handleVisibleButton);
-    }
-
-    useEffect(() => {
-        addEventScroll();
-    }, []);    
-
     return (
         <div className={classNames(s.scrollToTop, {
-            [s[`${showScrollToTop}`]]: showScrollToTop
+            [s.show]: showScrollToTop
         })}
             onClick={handleScrollUp}
         >