본문 이동 Scroll 페이지 구현

작업하려는 페이지는 커버 이미지(절반 위)와 본문(절반 아래)으로 이루어졌다.
상단 또는 하단으로 스크롤되어 포커싱하도록 구현하려고 한다.

1. 기능 설계

• 본문 또는 키보드 아이콘을 클릭하면 아래에 있던 본문이 가장 위에 오게 된다.
• 본문이 상단에 있을 때 키보드 아이콘을 클릭하면 다시 하단으로 내려온다.
  
  

2. scroll을 사용하기 위해 먼저 각각의 ref를 만들어 준다.

// 하단 -> 상단
  const downScrollRef = useRef<HTMLDivElement | null>(null);
// 상단 -> 하단
  const UpScrollRef = useRef<HTMLDivElement | null>(null);

3. 본문 또는 아이콘 클릭 여부를 확인하기 위해 boolean state를 만든다.

const [contentClick, setContentClick] = useState<boolean>(false);

4. 본문이 상단으로 스크롤될때, top 0에 올라올 컴포넌트에 downScrollRef를 추가한다. 본문이 이동되었을 때도 header가 잘 보이길 원해서 padding top을 변경하고, 하단에는 공간을 추가하기 위해 height를 800으로 바꾸어주었다.

<article
  className={`bg-red ${contentClick ? "h-[800px] pt-20" : "pt-8"} absolute top-[400px] min-h-[390px] px-5`}
  ref={downScrollRef}
>
  ...

5. contentClick이 변경될때마다 true 여부를 확인하고, 만약 true라면 4번에서 ref를 할당한 컴포넌트로 smooth하게 이동하도록 만든다.

useEffect(() => {
	if (contentClick) {
  		downScrollRef?.current?.scrollIntoView({ behavior: "smooth" });
    }
  }, [contentClick]);

6. 하단에서 상단으로 스크롤 시 타겟이 되는 컴포넌트에 ref를 할당한다.

<Layout>
	<div ref={UpScrollRef}>
      ...

7. 하단에서 상단으로 스크롤될때 키보드 아이콘을 클릭해야한다. 처음에는 setContentClick를 false가 아닌 !contentClick으로 변경하여 toggle처럼 사용하고자 했는데, 테스트해보니 scroll하기도 전에 위치가 바뀌는 상황이 일어나 다른 방법을 사용하기로 하였다.

7-1. 만약 contentClick이 이미 false라면, 즉 화면이 상단으로 이동하지 않은 상태라면 contentClick을 true로 만들어 스크롤을 실행한다.

if (!contentClick) return setContentClick(true);

7-2. contentClick이 true라면, 즉 화면이 이미 이동된 상태라면 UpScrollRef의 scrollIntoView를 실행하여 본문을 다시 하단으로 내려오게 만든다.

else {
  UpScrollRef.current?.scrollIntoView({
	behavior: "smooth",
  	block: "start",
  });
  ...
}

7-3. 6번과 마찬가지로 6-2의 바로 밑에 setContentClick(false)를 작성하면 바로 이동된다. 그래서 충분히 이동된 다음 setContentClick(false)를 실행하기 위해 setTimeout를 사용하였다.

setTimeout(() => {
  setContentClick(false);
}, 400);

---

참고

https://stackoverflow.com/questions/62497110/detect-scroll-direction-in-react-js