스크롤 방향에 따라 GNB UI 노출/숨김

src/components/Common/Gnb/index.tsx

@@ -5,17 +5,21 @@ import { useRouter } from 'next/router';
 
 import { css } from '@emotion/react';
 import { useMemo } from 'react';
-import { MdHome, MdArticle, MdGroupAdd, MdAccountCircle } from 'react-icons/md';
+import { MdAccountCircle, MdArticle, MdGroupAdd, MdHome } from 'react-icons/md';
 
+import {
+  useWindowScrollDirection,
+  WindowScrollDirection,
+} from '~/hooks/useWindowScrollDirection';
 import { useMyInfo } from '~/services/member';
 import {
+  colorMix,
+  fixBottomCenter,
   flex,
   fontCss,
   gnbHeight,
   palettes,
-  fixBottomCenter,
   zIndex,
-  colorMix,
 } from '~/styles/utils';
 import { routes } from '~/utils';
 
@@ -46,6 +50,11 @@ const createNavigationDetail = (
 
 export const Gnb = (props: GnbProps) => {
   const { className } = props;
+  const { windowScrollDirection } = useWindowScrollDirection(
+    WindowScrollDirection.UP
+  );
+  const hide = windowScrollDirection === WindowScrollDirection.DOWN;
+
   const navItems = useMemo(
     () => [
       createNavigationDetail('홈', <MdHome />, routes.main()),
@@ -74,7 +83,10 @@ export const Gnb = (props: GnbProps) => {
   const isSignedIn = !!myInfo;
 
   return (
-    <nav css={selfCss} className={className}>
+    <nav
+      css={[selfCss, hide && hideSelfCss, hoverSelfCss]}
+      className={className}
+    >
       <div css={itemContainerCss}>
         {navItems.map((navItem) => {
           const { text, icon, pathname: itemPathname, auth } = navItem;
@@ -102,7 +114,7 @@ export const Gnb = (props: GnbProps) => {
 };
 
 const selfCss = css(fixBottomCenter, {
-  transition: 'opacity 200ms',
+  transition: 'opacity 200ms, transform 200ms',
   borderTopLeftRadius: 15,
   borderTopRightRadius: 15,
   overflow: 'hidden',
@@ -113,6 +125,16 @@ const selfCss = css(fixBottomCenter, {
   zIndex: zIndex.fixed.normal,
 });
 
+const hideSelfCss = css({
+  transform: `translate3d(-50%, ${gnbHeight - 10}px, 0)`,
+});
+
+const hoverSelfCss = css({
+  '&:hover, &:focus-visible': {
+    transform: `translate3d(-50%, 0, 0)`,
+  },
+});
+
 const itemContainerCss = css(
   { width: '100%' },
   flex('center', 'center', 'row', 10)

src/hooks/useWindowScrollDirection.ts

@@ -0,0 +1,40 @@
+import { useEffect, useRef, useState } from 'react';
+
+export const enum WindowScrollDirection {
+  UP = 'up',
+  DOWN = 'down',
+}
+
+export const useWindowScrollDirection = (
+  initialValue: WindowScrollDirection
+) => {
+  const [windowScrollDirection, setWindowScrollDirection] =
+    useState<WindowScrollDirection>(initialValue);
+  const y = useRef(0);
+
+  useEffect(() => {
+    y.current = window.scrollY;
+
+    const onScroll = () => {
+      const nextY = window.scrollY;
+
+      if (nextY === y.current) return;
+
+      const nextWindowScrollDirection =
+        nextY > y.current
+          ? WindowScrollDirection.DOWN
+          : WindowScrollDirection.UP;
+
+      if (nextWindowScrollDirection !== windowScrollDirection)
+        setWindowScrollDirection(nextWindowScrollDirection);
+
+      y.current = nextY;
+    };
+
+    window.addEventListener('scroll', onScroll);
+
+    return () => window.removeEventListener('scroll', onScroll);
+  }, [windowScrollDirection]);
+
+  return { windowScrollDirection };
+};