From 401404648d60ed947f599d2630c1dbc9882732aa Mon Sep 17 00:00:00 2001 From: Jeon Eonseok Date: Tue, 6 Aug 2024 21:59:12 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20scroll=20=EC=97=AC=EB=B6=80=20?= =?UTF-8?q?=ED=8C=8C=EC=95=85=ED=95=98=EB=8A=94=20custom=20hook=20?= =?UTF-8?q?=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/hooks/useScrollPosition.tsx | 31 ++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 src/common/hooks/useScrollPosition.tsx diff --git a/src/common/hooks/useScrollPosition.tsx b/src/common/hooks/useScrollPosition.tsx new file mode 100644 index 00000000..ac722f78 --- /dev/null +++ b/src/common/hooks/useScrollPosition.tsx @@ -0,0 +1,31 @@ +import { useEffect, useRef, useState } from 'react'; + +const useScrollPosition = () => { + const lastScrollPositionRef = useRef(0); + const [isScrollingDown, setIsScrollingDown] = useState(true); + const [isScrollTop, setIsScrollTop] = useState(true); + + useEffect(() => { + const scrollHandler = () => { + const currentScrollPosition = window.scrollY; + + setIsScrollTop(currentScrollPosition < 20); + setIsScrollingDown(lastScrollPositionRef.current < currentScrollPosition); + + lastScrollPositionRef.current = currentScrollPosition; + }; + + window.addEventListener('scroll', scrollHandler); + + return () => { + window.removeEventListener('scroll', scrollHandler); + }; + }, []); + + return { + isScrollingDown, + isScrollTop, + }; +}; + +export default useScrollPosition; From 0a1a4aca292748adaa246f68fc8a4246ba9a2dbf Mon Sep 17 00:00:00 2001 From: Jeon Eonseok Date: Tue, 6 Aug 2024 21:59:40 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EC=95=84=EB=9E=98=EB=A1=9C=20?= =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=8B=9C=20category=20=EC=82=AC?= =?UTF-8?q?=EB=9D=BC=EC=A7=80=EB=8F=84=EB=A1=9D=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ApplyCategory/index.tsx | 6 +++++- .../components/ApplyCategory/style.css.ts | 21 +++++++++++++++++-- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/src/views/ApplyPage/components/ApplyCategory/index.tsx b/src/views/ApplyPage/components/ApplyCategory/index.tsx index cdcebcbd..7d78c820 100644 --- a/src/views/ApplyPage/components/ApplyCategory/index.tsx +++ b/src/views/ApplyPage/components/ApplyCategory/index.tsx @@ -1,6 +1,8 @@ import { memo } from 'react'; import { Link } from 'react-router-dom'; +import useScrollPosition from '@hooks/useScrollPosition'; + import { CATEGORY } from './constant'; import { activeLinkStyle, categoryLinkStyle, categoryList, container } from './style.css'; @@ -8,8 +10,10 @@ interface ApplyCategoryProps { minIndex: number; } const ApplyCategory = memo(({ minIndex }: ApplyCategoryProps) => { + const { isScrollingDown, isScrollTop } = useScrollPosition(); + return ( -