Items 페이지의 앵커 UI 구현

[fzdf0613]

<앵커 UI의 동작, 앵커 아이템을 클릭 시 해당 위치로 이동 및 각 앵커 영역에서 앵커 버튼의 활성화를 보여주는 style 변화>

실제 메이커스의 페이지는 어떻게 구성되어 있는 진 알 수 없지만, 본 프로젝트의 포스트(상품 페이지) 페이지는 text로된 HTML을 받아온 후 innerHTML로 렌더링하도록 구현되어 있다.

앵커를 구성하는 요소는 글 작성 시 Quill 에디터에서 커스텀으로 등록해둔 타이틀바이며, 각 타이틀바는 class 명이 'anchor', alt가 앵커명으로 지정된 img 태그이다.

따라서, 다음 절차에 따라 구현을 하였다.

1. innerHTML 로 렌더링 된 본문 내용에서 class 가 'anchor'인 element들을 찾음
2. 각 element에서 앵커 명(=alt 값)과 y값의 절대 좌표값을 추출하여 상태로 저장함
3. 2에서 생성한 상태를 이용하여 앵커 바를 렌더링하고, 클릭 시 해당 element의 y 절대 좌표값을 이용하여 이동
4. 현재 스크롤의 위치와 각 anchor의 y좌표값을 이용한 비교를 통해 어느 앵커 영역에 해당되는지를 저장하는 상태를 생성하고
   스크롤 이동시, 상태 변화

코드는 다음과 같다.

<1,2>

• dependency로 Y를 등록하지 않으면 화면 크기가 변경되어 UI크기가 변할 때, 적절한 위치를 찾아가지 못하게 되었다.
• 내비게이션바와 앵커바는 스크롤 이동에 따라 화면 상단에 sticky 되기 때문에, 해당 UI들의 높이를 고려하여 적정한 값을 차감하여
  적절히 스크롤히 이동될 수 있도록 하였다.

<3>

<4>

• 현재 스크롤 위치와 elemtent를 비교하는 부분에서 차감해준 값(-10)은 UI가 좀 더 적절하게 표시되기 위해 조절한 값이며, 큰 의미는 없음.

중요한 것

useEffect 내부에서 상태 값이 변하고, 그 상태를 기반으로 렌더링 되는 UI이므로, 처음에 useEffect로 구현 후 작동 시에 UI의 깜빡임 현상이 발생하였다. useEffect는 render후 paint가 된 후 작동하므로, paint가 되기 전 작동하는 useLayoutEffect로 변경하였다.