[ Fix ] active 상태, 드롭다운 잘림 수정

[ptyoiy]

#️⃣ Related Issue

Closes #317

✅ Done Task

• active 상태
• 메뉴 드롭다운 잘림 현상

☀️ New-insight

💎 PR Point

• 드롭다운 열림 방향 정하기

1. intersection observer로 감지된 버튼들을 찾습니다. observer callback의 속성 중 화면에 표시된건지 가려진건지 여부를 알 수 있는 isIntersecting을 사용합니다.
   찾은 버튼들을 저장하기 위한 여러 방법들 중 간단하게 class(".intersection")를 부여하는 방법을 선택했습니다.
2. 버튼 클릭 시 querySelectorAll(".intersection")과 ref를 사용해 버튼의 index를 확인합니다.
3. index가 마지막 3개면 위로 열리도록 setState(바익 recipe에 연결)를 up으로 설정합니다. 아닐경우 down입니다.

화면에 표시/제거될때, 버튼을 클릭할때만 계산하므로 성능이 좋습니다.

• 수정사항
  • 드롭다운 토글 함수를 쓰기 위해 Menu 컴포넌트를 forwardRef로 만들었습니다.
  • 랜딩페이지에서 쓰던 useFadeIn을 쓰임새에 맞는 변수명인 useIntersectionObserver로 변경했습니다.

📸 Screenshot

• 드롭다운
  

• 활성된 상태 필터값 호버 이펙트
  

[j-nary]

드롭다운의 경우 client height의 80% 이상 위치(대충 맨 아래 2,3개까지)에 있으면 드롭다운이 위로 열리게 할까요?

이거 엄청 좋은 아이디어인 것 같아요! 수고하셨습니다 :)