📗 스크롤 방향 감지 커스텀 훅을 만들어, 헤더를 숨기거나 보여주자..

1️⃣ 코드 예시

CustomHook 작성

스크롤의 방향에 따라서 어떠한 함수가 실행되는 커스텀 훅을 만들어 둔다면,
헤더를 숨기거나 보여주는 용도 외에도 많이 사용될 것 같다는 느낌이 들었다.

따라서 재사용성이 용이하게 커스텀 훅을 다음과 같이 만들어 봤다.

hooks -> common.ts

export const useScrollDirection = (
    downFunc: () => void,
    upFunc: () => void
) => {
    useEffect(() => {
        // 기준이 되는 상단 스크롤 위치
        let lastScrollTop = 0;

        const headerVisibleFunc = () => {
            // 현재 스크롤 위치 가져오기
            const currentScrollTop = window.scrollY;

            // 스크롤 방향 확인
            if (currentScrollTop > lastScrollTop) {
                // 아랫 방향 스크롤
                downFunc();
            } else {
                // 윗 방향 스크롤
                upFunc();
            }

            // 기준 스크롤 위치 업데이트
            lastScrollTop = currentScrollTop;
        };

        // 스크롤 이벤트 핸들러 등록
        window.addEventListener("scroll", headerVisibleFunc);

        // 스크롤 이벤트 핸들러 제거
        return () => {
            window.removeEventListener("scroll", headerVisibleFunc);
        };
    }, []);
};

작성한 CustomHook을 사용

css로 transition을 줌으로 사라지거나 나타날 때, 애니메이션 효과를 주고 싶어서, 헤더의 mrgin 값을 주는 방향으로 생각했다.

Layout -> Header.tsx

const [headerMargin, setHeaderMargin] = useState(0);
// 생략..
useScrollDirection(
  () => {
    setHeaderMargin(-130);
  },
  () => {
    setHeaderMargin(0);
  }
);
return (
  <Wrapper marginTop={headerMargin}>
    // 생략..
  <Wrapper />
);
    
const Wrapper = styled.section<{ marginTop: number }>`
    // 생략..
    margin-top: ${(props) => props.marginTop}px;
`;

2️⃣ 결과