24. 07. 10 TIL

오늘은 탑버튼을 만들었다.

 

찾아보니 간단하길래 그냥 대충 보고 만들면 되겠거니... 했는데?

 

했는데?

 

안 됐다.

 

이유는 공통으로 적용된 레이아웃에 overflow가 있으면 적용이 안 되는 모양...

 

나는 일단 탑버튼을 컴포넌트로 또 따로 분리했는데

 

onClick 이벤트가 발생했을 때 실행할 함수를 다른 컴포넌트 파일을 만들어 작성한다.

 

처음엔 그냥 window.scrollTo로 했었는데 window는 전체 창의 스크롤 위치를 변경하는 것이다.

 

그래서 찾아보니 공통 컴포넌트에 overflow가 있는 것을 발견@!

 

그럼 거기에 id를 넣어준다.

      <main className="grow overflow-auto" id="main-content">

 

그냥 메인에 이렇게 넣어주기.

 

그리고 tsx 파일을 만들어서

const topBtn = (e: React.MouseEvent<SVGElement, MouseEvent>) => {
  const mainContent = document.getElementById('main-content');

  if (mainContent !== 0) {
    mainContent.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }
};

export default topBtn;

이렇게 넣어줬다.

 

타입은 React.MouseEvent<SVGElement, MouseEvent> 이것으로 지정해주고,

 

상수 mainContent에 id가 main-content인 것을 가져와서 넣어준다.

 

그리고 mainContente가 존재하는지 확인하고, mainContent의 위치가 0이 아니면 실행시켜준다.

 

다른 방법도 있나 좀 더 찾아봤는데 일단은 내가 찾은 방법 중 가장 간단했다.

 

       <IoArrowUpCircleOutline
          className="fixed bottom-20 right-[calc(50%-300px)] mr-5 cursor-pointer text-5xl text-gray-600"
          onClick={topBtn}
        />

 

하여튼 저렇게 만든 컴포넌트는 import해서 onclick에 저렇게 넣어주면 잘 작동한다. 끄읏~