From 16d4acd2a9467fd1856617180fa6632158af386b Mon Sep 17 00:00:00 2001
From: NohWookJin <jinn98@kakao.com>
Date: Fri, 12 Jan 2024 14:26:34 +0900
Subject: [PATCH 1/2] =?UTF-8?q?refactor:=20clipRule,=20fillRule=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/icons/Icons.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx
index 52355fba..d0aed0ac 100644
--- a/src/components/common/icons/Icons.tsx
+++ b/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"
       />

From 1b4426e56a33fdc9954dfabe291fba4f7b2c2e22 Mon Sep 17 00:00:00 2001
From: NohWookJin <jinn98@kakao.com>
Date: Fri, 12 Jan 2024 14:26:50 +0900
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=ED=83=91=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EC=9E=AC=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DetailSectionTop/DetailTopButton.tsx      | 62 +++++++++++--------
 src/pages/detail/detail.page.tsx              | 15 +++--
 2 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/src/components/DetailSectionTop/DetailTopButton.tsx b/src/components/DetailSectionTop/DetailTopButton.tsx
index c1ffe145..225c4fc6 100644
--- a/src/components/DetailSectionTop/DetailTopButton.tsx
+++ b/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>
   );
 }
diff --git a/src/pages/detail/detail.page.tsx b/src/pages/detail/detail.page.tsx
index 99333eb4..bcccedb5 100644
--- a/src/pages/detail/detail.page.tsx
+++ b/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>
   );
 };