주석 링크 복귀 시 헤더와 콘텐츠 겹침 문제 #78
Description
문제 설명
블로그 포스트의 주석 링크를 클릭하여 하단 주석으로 이동한 후, 복귀 링크(↩)를 클릭하면 원래 위치로 돌아가지만 sticky 헤더와 콘텐츠가 겹쳐서 실제 내용이 헤더 뒤에 숨겨지는 문제가 발생합니다.
재현 단계
- 블로그 포스트에서 주석 링크
[1]클릭 - 하단 주석 영역으로 이동됨
- 주석 영역의 복귀 링크
↩클릭 - 원래 위치로 이동하지만 해당 내용이 헤더 아래 숨겨짐
현재 동작
- 주석 복귀 시 해당 텍스트가 뷰포트 최상단에 위치
- sticky 헤더가 해당 텍스트를 가려서 사용자가 내용을 볼 수 없음
- 포커스 아웃라인만으로 겨우 위치를 파악할 수 있음
- 사용자가 수동으로 스크롤해야 내용 확인 가능
예상 동작
- 주석 복귀 시 해당 텍스트가 헤더 아래 적절한 여백을 두고 표시되어야 함
- 사용자가 즉시 해당 내용을 확인할 수 있어야 함
환경 정보
- 브라우저: Chrome, Firefox, Safari (모든 브라우저에서 동일한 현상)
- 디바이스: 데스크톱, 모바일 (모든 디바이스에서 발생)
- 영향 범위: 모든 마크다운 포스트의 주석 시스템
추가 정보
이 문제는 브라우저의 기본 앵커 링크 동작이 position: sticky 헤더의 높이를 고려하지 않기 때문에 발생하는 일반적인 웹 개발 이슈입니다.