[Feat] 헤더 스크롤 시 숨김 처리

[eonseok-jeon]

Related Issue : Closes #345

---

🧑‍🎤 Summary

• apply page category 부분 아래로 스크롤 시 사라지게 만들기

🧑‍🎤 Screenshot

2024-08-06.10.28.45.mov

🧑‍🎤 Comment

scroll 여부 파악하는 custom hook(useScrollPosition) 제작

공홈 거 가져왔어요!

다만 조금 더 확장을 했는데요

기존에는 상단 페이지인 경우 스크롤의 상관 없이 항상 보여지도록 구현을 했어요
이때 상단 페이지인지 구분하기 위해 window.scrollY이 20보다 작은지를 기준으로 삼고 있었어요
하지만 저희는 category가 header랑 딱 붙기 전까진 계속 보여져야 했으므로 window.scrollY이 950보다 작아야 했어요
그래서 이를 동적으로 설정할 수 있도록 해줬어요
기본값은 20입니다

const useScrollPosition = (topYScrollPosition: number = 20) => {
  // ...

  useEffect(() => {
    const scrollHandler = () => {
      const currentScrollPosition = window.scrollY;

      setIsScrollTop(currentScrollPosition < topYScrollPosition);
    // ...

gap 수정

gap을 100으로 늘려줬어요
왜냐면 category 클릭 시 아래 사진과 같이 윗 부분 section도 살짝 보이게 되더라고요

대신 section의 padding top을 줄여주어 디자인적으로는 변함이 없도록 했어요

[height]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[lydiacho]

확인했습니다 수고하셨습니다 :)

이렇게 하니까 파트별로 헤더에 카테고리 isActive 처리해둔게 보일 일이 거의 없어져서 조금 아숩긴 하네요 ㅠ 지금 결정된 사안으로서는 충분히 좋은 것 같습니다~~