[feat] 스크롤 따라 헤더바 상태 변경되는 것 구현

[darkdulgi]

#️⃣ 연관 이슈

• [feat] 스크롤 관련 구현 #64

📝 작업 내용

현재 스크롤에 따라 헤더 상단 검정 바가 움직입니다. 명세서에 최대한 근접하고 쉬운 구현을 위해 추첨이벤트 섹션 직전의 차량 간단 설명 섹션 DOM의 인덱스를 0으로 두고, 그 다음부터 순서대로 1, 2, 3, 4로 지정했습니다. 때문에 헤더바에서 인덱스 관련해서 약간의 수정이 있었습니다.(헤더바 리스트의 인덱스는 0, 1, 2, 3 뿐이기 때문에 실제와 1씩 차이가 나기 때문)
현재 스크롤이 정확히 어느 섹션에 위치해 있는지를 전역상태에서 판단하고 저장하는 것이 불가능하다고 판단하여, 전역상태에서는 말 그대로 '현재 섹션'은 저장하지 않고, 현재 뷰포트와 각 섹션이 겹치는지 안 겹치는 지를 나타내는 불리언 배열을 저장합니다. 헤더바에서는 이 불리언 배열의 가장 먼저 true가 나오는 요소의 인덱스를 가지고 상단 검정 바 상태를 변경합니다. 즉, 검정 바의 위치는 전역 상태의 불리언 배열에 종속적입니다. 헤더바에서 섹션 클릭을 통해 스크롤을 이동하는 행동은 말 그대로 스크롤만 이동시킬 뿐 헤더바의 상태를 직접적으로 변경시키지 않습니다.

[lybell-art]

리팩토링만 해 주시면 감사하겠습니다.

[lybell-art]

왜 eager return을 빼고 도로 if문으로 돌아오셨나요?

[lybell-art]

zustand의 훅 안의 있는 함수는 상태에서 비롯된 다른 상태(derived state)를 계산할 수 있습니다.

그래서, 이런 게 가능합니다.

const currentSection = useSectionStore( (state)=>{
  return state.isVisibleList.findIndex((value) => value);
} );

[lybell-art]

상태가 바뀌었을 때 useEffect로 다른 상태를 동기적으로 계산하는 것은 별로 좋은 패턴이 아닙니다. (렌더링이 2번 일어남)

[lybell-art]

Good