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(false); + const [scrollPosition, setScrollPosition] = useState(0); + const [viewportHeight, setViewportHeight] = useState(0); - const scrollToTop = () => { - window.scroll({ - top: 0, - behavior: 'smooth', - }); - }; + const scrollButtonRef = useRef(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 && ( -
-
- -
-
- ) +
+ +
); } 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(null); + return ( - <> +
- - {/* */} - +
+ + +
+
); };