Skip to content

[refactor/#99] 헤더 스크롤 방식 intersect observer 변경 & 카테고리 바깥 영역 클릭 이벤트 #100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
May 22, 2025

Conversation

heesunee
Copy link
Collaborator

📌 Related Issues

✅ 체크 리스트

  • PR 제목의 형식을 잘 작성했나요? e.g. [Feat/#이슈번호] PR 템플릿 작성
  • 빌드가 성공했나요? (pnpm build)
  • 컨벤션을 지켰나요?
  • 이슈는 등록했나요?
  • 리뷰어와 라벨을 지정했나요?

📄 Tasks

  • 기존에는 useEffect를 활용해 스크롤 이벤트 발생 시 특정 스타일을 동적으로 추가했으나, 이는 스크롤 이벤트마다 실행되어 불필요한 렌더링과 성능 저하가 있었습니다.
  • 이를 개선하기 위해 IntersectionObserver API로 변경하여 효율적인 스크롤 감지 및 스타일 적용이 가능하도록 리팩토링했습니다.
  • 카테고리 드롭다운 영역 외부를 클릭할 경우 자동으로 닫히도록 outside click 이벤트 처리 로직을 추가했습니다.
  • 로고를 클릭해서 페이지 이동시 제일 최상단으로 오게 했습니다

⭐ PR Point (To Reviewer)

  • 자세한 로직 설명은 노션 트러블 슈팅에 더 정리하겠습니다 !

📷 Screenshot

Tab-2025.5.22._20_09.mp4

🔔 ETC

Copy link

✅ 빌드에 성공했습니다! 🎉

Copy link
Collaborator

@hamxxn hamxxn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

스터디 바로바로 적용하는거 미쳤다,,
수고 많으셨습니다!

@@ -0,0 +1,26 @@
import { useCallback, useEffect, useRef, useState, type MutableRefObject } from 'react';

export const useIntersect = (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

성심스 적용 미쳤다!!!!

Copy link

✅ 빌드에 성공했습니다! 🎉

@heesunee heesunee merged commit 5e9f3e6 into develop May 22, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[refactor] header scroll 방식 변경 & 카테고리 외부 클릭, 페이지 이동시 닫히게 설정
2 participants