정중앙에 모달을 띄우는것이 아닐 때, Modal를 띄울 상대적 위치를 구해야한다.

getBoundingClientRect 을 통해서 위치를 구할 수 있다.

• 그럼 ref를 통해서 모달의 상대적 위치를 전달해주자!

import React, { useMemo } from 'react'

/**
 * 컴포넌트의 dimenstions을 구한다.
 */
export const useRefDimensions = (ref: React.RefObject<HTMLElement>) => {
  const [dimensions, setDimensions] = React.useState<DOMRect>()

  React.useEffect(() => {
    if (ref.current) {
      setDimensions(ref.current.getBoundingClientRect())
    }
  }, [ref])

  const position = useMemo(
    () =>
      dimensions && {
        top: Math.round(dimensions.bottom),
        left: Math.round(dimensions.x),
      },
    [dimensions],
  )

  const width = useMemo(
    () => dimensions && { width: Math.round(dimensions.width) },
    [dimensions],
  )

  return { position, width }
}