스크롤 ‐ scrollTo, useSectionInitialize

✨ 어떤 기능을 하나요?

scrollTo는 원하는 섹션으로 스크롤을 이동시킵니다. 정확히 말해, 현재 뷰포트의 상단과 원하는 섹션 Element의 상단을 맞춥니다.

useSectionInitialize는 scrollTo로 이동시키고 싶은 섹션을 초기화합니다.

💡 사용 예제

• scrollTo

import scrollTo from "@/scroll/scrollTo";

...

scrollTo(index);

index에 해당하는 정수 인덱스 값에 해당하는 섹션으로 스크롤을 이동시킵니다. 일반 함수이므로 어디서든 호출 가능합니다.

• useSectionInitialize

import useSectionInitialize from "@/scroll/useSectionInitialize";

...

export default function Section(){
  const SECTION_IDX = 1;
  const sectionRef = useRef(null);
  useSectionInitialize(SECTION_IDX, sectionRef);

  return (
    <section ref={sectionRef}>
    ...
    </section>
  );
}

해당 섹션 전체 Element를 ref로 지정해준 다음 그 섹션이 가지길 원하는 인덱스값과 ref를 인자로 넣고 호출합니다. Hook이므로 컴포넌트 최상단에서만 호출 가능합니다.

🔌 인터페이스

• scrollTo(index)

• useSectionInitialize(SECTION_IDX, sectionRef)

🎸 기타

현재 프로젝트에서는 기획서 상 사용자가 헤더바와 하단 타이머를 통해 4개의 섹션으로 스크롤 할 수 있습니다. 각각의 인덱스대로 1은 추첨 이벤트 섹션, 2는 차량 상세정보 섹션, 3은 기대평 작성 섹션, 4는 선착순 이벤트 섹션입니다. 0에 해당하는 인덱스는 차량 간단 설명 섹션입니다.

// scroll section constants
export const INTERACTION_SECTION = 1;
export const DETAIL_SECTION = 2;
export const COMMENT_SECTION = 3;
export const FCFS_SECTION = 4;

해당 인덱스는 매직 넘버이므로, common/constants.js (폴더구조 리팩토링하면서 /features-main/shared/scroll/constants.js로 옮겨질 가능성 있음)에서 상수를 import해서 코드를 보는 사용자가 어떠한 위치로 보는지 확실히 인지하도록 하는 것을 권장합니다.