QA 개선 사항 반영 (issue #707)

[chosim-dvlpr]

구현 요약

1. 풀이 디테일 페이지에서 해시태그 클릭하면 해당 미션으로 navigate
2. 해시태그 호버 변환 속도 느리게 (0.2s -> 0.4s로 변경)

2024-10-20.191008.mp4

3. 스크롤 가장 위에 있을 땐 ScrollToTopButton이 안보이도록

• 스크롤 이벤트가 계속 실행되면서 window의 높이를 구하게 되는데, 이는 성능에 문제가 생길 것으로 판단하여 debounce를 적용했습니다!

• 스크롤 이벤트에 자주 사용되는 throttle 방식이 아닌 debounce를 사용한 이유는 스크롤이 멈췄을 때 현재 스크롤 위치를 구하기 위함입니다. throttle의 경우 이벤트가 진행되는 동안 지정된 시간마다 콜백 함수를 실행하는데, 스크롤이 끝나기 전에 콜백 함수를 실행한 뒤 지정된 시간 전에 스크롤이 끝났을 땐 더 이상 스크롤을 계산하지 않아 정확한 스크롤의 위치를 파악하기 어렵습니다.

  • (자세하게 찾아보니 스크롤이 끝난 뒤에도 throttle 콜백 함수가 1회 더 실행되는 것이 맞다고 합니다..! 그런데 제가 작성했던 코드에서는 최상단에 도착해도 정확한 위치를 계산하지 못했어요 이 부분은 좀 더 확인이 필요할 것 같네용)
    

• throttle 사용 시

20241020-0848-22.0216041.mp4

• debounce 사용 시

2024-10-20.194107.mp4

• 추가로 개인적으로 궁금해서 확인해봤는데요! 콜백 함수가 실행되는 횟수를 콘솔에서 확인해보니 같은 조건에서 debounce는 3회, throttle은 11회 실행되더라구요! debounce가 더 적게 실행되어 성능상 이점이 있어 보였습니다.
  • 조건 : 메인 페이지, 노트북 터치 패드로 한 번 길게 스크롤 → 스크롤이 멈춘 뒤 한 번 더 길게 스크롤 하여 페이지 하단까지 닿도록

4. 미션 상세, 풀이 상세, 디스커션 렌더 시 transition으로 부드럽게

• GlobalStyles의 body 부분에 transition이 걸려있지만 왜인지 작동하지 않았던 부분이라 .. 일단 모든 페이지에 트랜지션을 걸어놓았습니다😭

연관 이슈

• close QA 개선 사항 반영 #707

참고

코드 리뷰에 RCA 룰을 적용할 시 참고해주세요.

헤더	설명
R (Request Changes)	적극적으로 반영을 고려해주세요
C (Comment)	웬만하면 반영해주세요
A (Approve)	반영해도 좋고, 넘어가도 좋습니다. 사소한 의견입니다.