문제

카카오 맵을 가져와서 tailwind 클래스인 h-screen을
맵의 클래스로 지정을 했다.

<div id='map' className='w-full h-screen' />

h-screen은 곧 height: 100vh;을 나타낸다.
근데 화면에 스크롤이 생겼다.

대체 왜용..?

이유

내 navbar에는 height: 50px 이 설정되어 있고
내 레이아웃은 아래와 같이 되어있다.

export default function Layout({ children }: LayoutProps) {
  return (
    <div className='layout'>
      <Navbar />
      {children}
    </div>
  )
}

Layout 컴포넌트의 children에는 (여기서는 지도 부분)
padding-top: 50px 이 같이 들어가있다.
(navbar에 가려지면 안 되니까)

근데 여기에서 navbar: 50px 에다가
map: 100vh가 지도로 들어가버리니까

50px 아래에서 시작한 map이
50px 만큼 넘쳐서 스크롤이 생긴 것이었다.

해결

navbar는 어느 화면에서나 보이기 때문에
저 50px을 무시해야 했다.

일단은 지금 100vh 를 사용하는 컴포넌트가 지도뿐이어서
지도 컴포넌트에 아래 함수를 추가했다.

컴포넌트가 렌더링 될 때
window.innerHeight 속성을 통해서
--window-height 라는 글로벌 변수를 설정해
그 값을 받아 지도의 height를 설정해 주는 함수이다.

const setRootHeight = () => {
  const root = document.documentElement
  root.style.setProperty('--window-height', `${window.innerHeight - 50}px`)
}

useEffect(() => {
    setRootHeight()
  	// 브라우저 창의 크기가 바뀌면 변수의 값도 바뀌니까
    // 이벤트리스너를 추가해서 계속 감시함
    window.addEventListener('resize', setRootHeight)

    // 지도 컴포넌트 언마운트 될 때 제거
    return () => {
      window.removeEventListener('resize', setRootHeight)
    }
  }, [])

.map {
  height: var(--window-height);
}

이러면 브라우저 창 크기가 바뀌어도 알아서 높이 조절해준다.