Items 페이지의 네비게이션 및 앵커의 sticky 동작 UI 구현

[fzdf0613]

메이커스 아이템 페이지에서의 스크롤 움직임에 따른 동작은 크게 두가지이다.

1. 스크롤을 내리는 경우

<스크롤 다운시의 동작>
스크롤을 내림에 따라 네비게이션바 ( 상세정보, 기본정보 등을 포함한 UI )가 먼저 sticky 되고, 앵커UI( 요약 스토리 등을 포함한 UI )를 덮는 순간 앵커 UI가 네비게이션바위에 sticky 된다.

스크롤 이벤트를 이용하여 해당 동작을 구현해야 하기 때문에, 기존에 hook으로 만들어 두었던 useScrollYHandler을 사용하였다. 해당
hook은 스크롤 이벤트에 직접적으로 핸들러를 콜백으로 전달하여 등록할 수 는 없지만, 내부적으로 스크롤 이벤트가 발생함에 따른 Y좌표를 state로 가지고 있고 이를 반환하기 때문에, 스크롤 이벤트를 (간접적으로) 감지하는 효과를 얻을 수 있다. 또한 쓰로틀링이 적용되어 있기 때문에, 아이템 페이지에서 새로 스크롤 이벤트 리스너를 관리하기 보다는 해당 훅을 사용하기로 하였다.

구현은 다음과 같다.

1. 내비게이션바와 본문을 담고있는 컨테이너에 Ref을 붙임
2. 내비게이션바의 하단이 본문의 상단보다 아래로 내려가는 순간, ( 내비게이션바의 z-index ) < ( 앵커의 z-index ) 설정
   ( 앵커와 본문 상단 사이의 픽셀 차이를 비교 계산에 추가함 )

구현 코드는 아래와 같다.

스크롤 이벤트가 발생할 때 ( ≒ Y 값이 변할 때 ), useEffect를 통해 navBottomY >= contentTopY - 12 가 되는 조건을 가진( 내비게이션 바가 앵커를 덮는 순간) 상태인 isOverlap을 true로 설정해준다.

2. 스크롤을 올리는 경우

<스크롤 업의 동작>
스크롤을 올릴 땐, 앵커가 아래쪽으로 이동하며 네비게이션바가 다시보이는 동작으로 이루어져있다.
useScrollYHandler Hook에 스크롤을 내릴 때 true값을 갖는 상태를 반환하기 때문에 이를 이용하여, 스크롤을 올릴 때
앵커의 stciky top값을 네비게이션바의 아래쪽에 붙도록 조정하여 구현하였다.

<스크롤 움직임 상태에 따른 css 적용으로 구현>