🧭 네비게이션 바 구현

Next.js와 tailwindcss를 이용한 프로젝트입니다.

📑 구조 설계

네비게이션 바는 최하단에 붙여놓도록 만들었습니다.

스크롤을 내리는 경우에는 현재 페이지의 내용을 읽어보는 경우일 것이기 때문에 영역을 넓히기 위해서 네이게이션 바를 숨기고, 스크롤을 올리는 경우는 다른 페이지로 넘어가기 위함일 경우가 많기 때문에 네비게이션 바를 나타내도록 설계했습니다.

따라서 항상 최하단에 붙어 있다가
1. 스크롤을 아래로 내리는 경우 숨기고
2. 위로 올리는 경우 나타나고
3. 스크롤을 아래로 내리더라도 페이지의 최하단이라면 나타나도록 설계했습니다.

📃 페이지 구분

크게 5가지 페이지로 구분했습니다.
1. 카테고리
2. 검색
3. 홈
4. 내 정보
5. 장바구니

next.js의 useRouter().asPath를 이용해서 현재 URL에 맞는 페이지에 들어올 경우 구분할 수 있도록 네이게이션 바에 특정 색상을 입혔습니다.

중요하고 어려운 코드가 아니므로 자세한 코드는 생략하겠습니다.

🔒 네비게이션 바 하단 고정

position: fixed를 이용해서 하단에 고정시켰습니다.
다만 fixed는 공중에 떠있는 느낌으로 다른 요소의 레이아웃에 영향을 미치지 않으므로 실제 컨텐츠가 네비게이션 바에 묻힐 수 있기 때문에 네비게이션 바의 높이만큼 body에 margin-bottom을 부여해서 네비게이션 바가 들어갈 공간을 만들었습니다.

중요하고 어려운 코드가 아니므로 자세한 코드는 생략하겠습니다.

🤔 useScrollDirection 훅

처음 말했던 네비게이션 바를 스크롤에 의해서 숨길지 보여줄지를 결정하는 데 사용할 수 있는 훅을 만들었습니다.

자세한 설명은 주석으로 작성했기 때문에 생략하겠습니다.
다만 스크롤 이벤트 등록하기 때문에 쓰로틀링을 적용했습니다.

• src/hooks/useScroll.tsx

import { useCallback, useEffect, useState } from "react";

// util
import { throttleHelper } from "@src/libs";

/**
 * 마지막 스크롤링의 방향을 알아내는 훅
 * @returns [스크롤 방향, 스크롤 최하단 여부, 현재 스크롤 위치] 순서로 반환 ( boolean, boolean, number )
 */
const useScrollDirection = () => {
  // 2022/08/09 - 마지막 스크롤 방향 - by 1-blue
  const [isUp, setIsUp] = useState(false);
  // 2022/08/09 - 현재 스크롤 위치값 저장할 변수 - by 1-blue
  const [pageY, setPageY] = useState(0);
  // 2022/08/09 - 현재 스크롤이 최하단에 있는지 판단할 변수 - by 1-blue
  const [isBottom, setIsBottom] = useState(false);

  // 2022/08/09 - 현재 스크롤 방향을 확인할 스크롤 이벤트 함수 - by 1-blue
  const handleScroll = useCallback(() => {
    /**
     * scrollHeight: 총 컨텐츠 높이
     * clientHeight: 현재 보이는 높이 ( 현재 화면(컨텐츠)의 높이 )
     * scrollY: 현재 스크롤 높이
     *
     * 따라서 "총 컨텐츠 높이 === 현재 보이는 높이 + 현재 스크롤 높이" 라면 최하단까지 스크롤을 내린 것
     */
    const {
      scrollY,
      document: {
        documentElement: { scrollHeight, clientHeight },
      },
    } = window;

    const deltaY = scrollY - pageY;
    const isUp = scrollY !== 0 && deltaY >= 0;
    const isBottom = scrollHeight - scrollY - clientHeight === 0;

    setIsUp(isUp);
    setPageY(scrollY);
    setIsBottom(isBottom);
  }, [pageY, setIsUp, setPageY, setIsBottom]);

  // 2022/08/09 - 스크롤 이벤트에 스로틀링 적용 - by 1-blue
  const throttleScroll = throttleHelper(handleScroll, 50);

  // 2022/08/09 - 스크롤 이벤트 등록 - by 1-blue
  useEffect(() => {
    document.addEventListener("scroll", throttleScroll);
    return () => document.removeEventListener("scroll", throttleScroll);
  }, [throttleScroll]);

  return [isUp, isBottom, pageY];
};

export default useScrollDirection;

• src/libs/utils.ts

/**
 * 스로틀링 적용 헬퍼 함수
 * @param callback 이후에 실행할 콜백함수
 * @param waitTime 기다릴 시간
 * @returns "waitTime"만큼 스로틀링이 적용된 함수("callback") 반환
 */
export const throttleHelper = (callback: () => void, waitTime: number) => {
  let timerId: ReturnType<typeof setTimeout> | null = null;

  return () => {
    if (timerId) return;

    timerId = setTimeout(() => {
      callback();
      timerId = null;
    }, waitTime);
  };
};