랜딩 페이지 화면 크기에 따른 컴포넌트 크기 조절 및 디자인 이슈 수정 (issue #763)

[chosim-dvlpr]

구현 요약

1. 랜딩 페이지 화면 크기에 따른 컴포넌트 등장 오류 해결

• 컴포넌트 사이 간격이 좁고, 특정 스크롤 위치에 있을 때 컴포넌트가 깜빡이는 현상을 해결했습니다.

• 원인으로는, intersectionObserver가 각 컴포넌트마다 하나씩, 총 세 개가 있었는데요, 이를 하나의 observer로 합친 뒤 visibleIndex를 통해 현재 보여줘야 하는 컴포넌트의 인덱스를 저장하는 방식으로 변경했습니다.

• 버그 개선 후 랜딩 페이지

default.mp4

2. 랜딩 페이지 컴포넌트 세로 너비를 100vh로 꽉 차게 조정
3. 헤더에 여백이 생기는 현상 해결

• 헤더 아래에 작은 공백이 있었습니다. 이 공백은 헤더의 세로 폭 때문에 추가했던 spacer인데요, 원인을 확인해보니 본문으로 바로가기 버튼이 position을 차지하고 있어 버튼에 밀려 보여지는 공백이었습니다.

• 따라서 본문으로 바로가기 버튼의 기본 position을 absolute로 변경하여 문서의 흐름에 영향을 주지 않도록 변경했습니다. (기존에는 focusing 되어 있을 때만 absolute로 설정)

• 기존
  

• 헤더 개선 후
  

연관 이슈

• close 랜딩 페이지 화면 크기에 따른 컴포넌트 크기 조절 #763

참고

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

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

[Parkhanyoung]

LGTM