Refactor: 탑버튼 재구현(임시)

src/components/DetailSectionTop/DetailTopButton.tsx

@@ -1,41 +1,51 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { TopIcon } from '@components/common/icons/Icons';
 
-export default function DetailTopButton() {
-  const [showButton, setShowButton] = useState(true);
+export default function DetailTopButton({ parentRef }: any) {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+  const [scrollPosition, setScrollPosition] = useState<number>(0);
+  const [viewportHeight, setViewportHeight] = useState<number>(0);
 
-  const scrollToTop = () => {
-    window.scroll({
-      top: 0,
-      behavior: 'smooth',
-    });
-  };
+  const scrollButtonRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const handleShowButton = () => {
-      if (window.scrollY > 400) {
-        setShowButton(true);
-      } else {
-        setShowButton(false);
+    const handleScroll = () => {
+      if (scrollButtonRef.current && parentRef.current) {
+        setViewportHeight(screen.height);
+
+        // 부모 요소의 높이보다 적을 때까지 스크롤 허용
+        if (window.scrollY < parentRef.current.clientHeight - 50) {
+          // 기기 높이의 절반 이상 스크롤 했을 때
+          if (window.scrollY >= viewportHeight / 2) {
+            setIsVisible(true);
+            setScrollPosition(window.scrollY);
+          } else {
+            setIsVisible(false);
+          }
+        }
       }
     };
 
-    window.addEventListener('scroll', handleShowButton);
+    window.addEventListener('scroll', handleScroll);
 
     return () => {
-      window.removeEventListener('scroll', handleShowButton);
+      window.removeEventListener('scroll', handleScroll);
     };
-  }, []);
+  }, [parentRef, scrollPosition, setScrollPosition]);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
 
   return (
-    showButton && (
-      <div
-        onClick={scrollToTop}
-        className="scroll__container sticky bottom-3 z-20 flex cursor-pointer items-center justify-end">
-        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-white shadow-md">
-          <TopIcon />
-        </div>
-      </div>
-    )
+    <div
+      ref={scrollButtonRef}
+      className={`absolute right-2 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-white shadow-md transition-opacity duration-500 ${
+        isVisible ? 'opacity-100' : 'opacity-0'
+      }`}
+      onClick={scrollToTop}
+      style={{ top: `${scrollPosition}px` }}>
+      <TopIcon />
+    </div>
   );
 }

src/components/common/icons/Icons.tsx

@@ -995,8 +995,8 @@ export const TopIcon: React.FC<IconProps> = () => {
       xmlns="http://www.w3.org/2000/svg">
       <path
         id="Vector 734 (Stroke)"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M17.0462 8.95185C16.7278 9.30213 16.1857 9.32794 15.8354 9.00951L8.86914 2.67653L1.90286 9.00951C1.55258 9.32794 1.01048 9.30213 0.692049 8.95185C0.373615 8.60157 0.39943 8.05947 0.749708 7.74104L8.86914 0.359741L16.9886 7.74104C17.3388 8.05947 17.3647 8.60157 17.0462 8.95185Z"
         fill="#888888"
       />

src/pages/detail/detail.page.tsx

@@ -1,16 +1,21 @@
 import { DetailHeader } from '@components/common/header';
 import DetailSectionTop from '@components/DetailSectionTop/DetailSectionTop';
 import DetailSectionBottom from '@components/DetailSectionBottom/DetailSectionBottom';
-// import { DetailTopButton } from '@components/DetailSectionTop';
+import { DetailTopButton } from '@components/DetailSectionTop';
+import { useRef } from 'react';
 
 const DetailTours = () => {
+  const parentRef = useRef<HTMLDivElement>(null);
+
   return (
-    <>
+    <div>
       <DetailHeader />
       <DetailSectionTop />
-      <DetailSectionBottom />
-      {/* <DetailTopButton /> */}
-    </>
+      <div className="relative" ref={parentRef}>
+        <DetailSectionBottom />
+        <DetailTopButton parentRef={parentRef} />
+      </div>
+    </div>
   );
 };