From 00fff6de38503eac223737c98cab9807b95ff432 Mon Sep 17 00:00:00 2001
From: Cola <bcad1591@gmail.com>
Date: Sun, 5 Nov 2023 18:16:55 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20useWindowScrollDirection=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useWindowScrollDirection.ts | 40 +++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/hooks/useWindowScrollDirection.ts

diff --git a/src/hooks/useWindowScrollDirection.ts b/src/hooks/useWindowScrollDirection.ts
new file mode 100644
index 00000000..adf51ab9
--- /dev/null
+++ b/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 };
+};

From ddbeb5c6d2f3e49c25cb2fedeb069fee7801caa6 Mon Sep 17 00:00:00 2001
From: Cola <bcad1591@gmail.com>
Date: Sun, 5 Nov 2023 18:17:11 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?=
 =?UTF-8?q?=EB=82=B4=EB=A6=B4=20=EB=95=8C=20Gnb=20=EC=88=A8=EA=B9=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Common/Gnb/index.tsx | 32 ++++++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/Common/Gnb/index.tsx b/src/components/Common/Gnb/index.tsx
index 466cea6e..7b9ba3fc 100644
--- a/src/components/Common/Gnb/index.tsx
+++ b/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)