[Feat] 헤더 스크롤 시 숨김 처리 (#346)

* feat: scroll 여부 파악하는 custom hook 제작

* feat: 아래로 스크롤 시 category 사라지도록 구현

* feat: top y scroll position 동적으로 받도록 수정

* design: section간 간격 수정

* chore: 변수 네이밍 좀 더 구체적으로

src/common/hooks/useScrollPosition.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from 'react';
+
+const useScrollPosition = (topYScrollPosition: number = 20) => {
+  const lastScrollPositionRef = useRef(0);
+  const [isScrollingDown, setIsScrollingDown] = useState(true);
+  const [isScrollTop, setIsScrollTop] = useState(true);
+
+  useEffect(() => {
+    const scrollHandler = () => {
+      const currentScrollPosition = window.scrollY;
+
+      setIsScrollTop(currentScrollPosition < topYScrollPosition);
+      setIsScrollingDown(lastScrollPositionRef.current < currentScrollPosition);
+
+      lastScrollPositionRef.current = currentScrollPosition;
+    };
+
+    window.addEventListener('scroll', scrollHandler);
+
+    return () => {
+      window.removeEventListener('scroll', scrollHandler);
+    };
+  }, [topYScrollPosition]);
+
+  return {
+    isScrollingDown,
+    isScrollTop,
+  };
+};
+
+export default useScrollPosition;

src/views/ApplyPage/components/ApplyCategory/index.tsx

@@ -1,15 +1,19 @@
 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';
 
 interface ApplyCategoryProps {
   minIndex: number;
 }
 const ApplyCategory = memo(({ minIndex }: ApplyCategoryProps) => {
+  const { isScrollingDown, isScrollTop } = useScrollPosition(950);
+
   return (
-    <nav className={container}>
+    <nav className={container[minIndex !== -1 && isScrollingDown && !isScrollTop ? 'scrollDown' : 'scrollUp']}>
       <ul className={categoryList}>
         {CATEGORY.map(({ index, text, path }) => (
           <li key={path}>

src/views/ApplyPage/components/ApplyCategory/style.css.ts

@@ -1,9 +1,9 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 
 import { Z_INDEX } from '@constants/zIndex';
 import { theme } from 'styles/theme.css';
 
-export const container = style({
+export const containerBase = style({
   display: 'flex',
   justifyContent: 'center',
   width: 1440,
@@ -14,6 +14,23 @@ export const container = style({
 
   backgroundColor: theme.color.white,
   zIndex: Z_INDEX.applyCategory,
+  transition: 'all 0.5s ease',
+});
+
+export const container = styleVariants({
+  scrollUp: [
+    containerBase,
+    {
+      opacity: 1,
+    },
+  ],
+  scrollDown: [
+    containerBase,
+    {
+      opacity: 0,
+      transform: 'translateY(-41px)',
+    },
+  ],
 });
 
 export const categoryList = style({

src/views/ApplyPage/components/CommonSection/style.css.ts

@@ -6,7 +6,7 @@ export const sectionContainer = style({
   display: 'flex',
   flexDirection: 'column',
   gap: 50,
-  paddingTop: 90,
+  paddingTop: 40,
 });
 
 export const title = style({

src/views/ApplyPage/components/PartSection/style.css.ts

@@ -6,7 +6,7 @@ export const sectionContainer = style({
   display: 'flex',
   flexDirection: 'column',
   gap: 50,
-  paddingTop: 90,
+  paddingTop: 40,
 });
 
 export const title = style({

src/views/ApplyPage/style.css.ts

@@ -11,7 +11,7 @@ export const container = style({
 export const formContainer = style({
   display: 'flex',
   flexDirection: 'column',
-  gap: 50,
+  gap: 100,
 
   marginBottom: 362,
   width: 720,