Floating Header 작동 로직 개선

[d5br5]

안녕하세요.

벨로그를 애용하고 있는 개발자입니다.
좋은 서비스를 운영, 관리해주셔서 감사하다는 말씀 먼저 드립니다 :)

벨로그 이용 중,
상단 FloatingHeader component에서 다음과 같은 현상을 발견했습니다.
(velog-web/src/features/home/components/FloatingHeader/FloatingHeader.tsx)

1. 위로 스크롤하다 아래로 전환할 때, 첫번째 scroll tick이 무시된다.

   • 두번째 scroll tick 부터 margin-top 값이 변하기 시작합니다.

2. 아래로 스크롤시, 해당 컴포넌트의 margin-top 값이 계속 변한다.

   • header div 요소의 height(본 예시에서는 64px)를 넘어서도 값이 계속 줄어든다.
   • 해당 요소에 한해 (사소한 요소이지만) 리렌더링이 계속 발생한다.
     

위 두가지 현상을 의도하셨던 것인지 궁금합니다..!

특히 2번 현상을 개선할 경우, 사용자 경험이 미세하게나마 좋아지지 않을까 싶습니다.
(viewport를 벗어난 요소에 대한 react의 렌더링 처리 방식이 별도로 존재하는지 모르겠지만,,)

관리자님들의 의견이 궁금합니다!

또 혹시 만약 괜찮으시다면
pull request를 통해 코드 개선에 참여하고 싶은데,
이 부분에 관한 절차도 마련되어 있는지 궁금합니다.
(본 repo 혹은 velopert/velog-client repo)

답변 부탁드립니다.

감사합니다!!

[winverse]

안녕하세요 Velog를 이용해주시고 이렇게 좋은 의견 주셔서 감사드립니다 :)

1번 내용은 의도한 것이 맞습니다!
2번 내용은 고려하지 못한 것으로, 주신 의견대로 사용자 경험 개선을 위해서 다음 업데이트에 반영하도록 하겠습니다. commit

pull request 요청은 아직 양식이나 특별한 절차가 아직은 준비 되어 있지 않습니다.
편하게 글을 작성해주시면 저희쪽에서 심사 숙고하여 반영 하도록 하겠습니다.

감사합니다 좋은 하루 되세요!