[UI] Popover[UI요소 만들기]

📌 팝오버(Popover) 컴포넌트란?

팝오버는 버튼이나 아이콘 같은 트리거 요소를 클릭했을 때, 해당 요소 주변에 부유하는 정보 박스(UI)를 표시하는 컴포넌트입니다. 툴팁보다 더 많은 정보를 담을 수 있고, 모달보다는 가볍고 비차단적인 특성을 가집니다.

---

🎯 주요 기능

• 트리거 기반 표시: 버튼 클릭 등 사용자 동작에 반응하여 열림/닫힘.
• 포지셔닝: 트리거 요소 근처에 동적으로 위치 (상, 하, 좌, 우 등).
• 비차단적 UI: 사용자의 흐름을 방해하지 않고 정보나 액션을 제공.
• 커스터마이징: 내부에 텍스트, 버튼, 폼 등 다양한 콘텐츠 삽입 가능.
• 외부 클릭 감지: 바깥 클릭 시 자동 닫힘 등 UX 고려 기능 포함.

❗️구현 내용

일반적인 구현

const MenuPopover = ({
  id,
  close,
  wrapperRef,
}: {
  id: string
  close: () => void
  wrapperRef: RefObject<HTMLElement>
}) => {
  const targetRef = useRef<HTMLUListElement>(null)
  const style = useStyleInView(wrapperRef, targetRef, menuPosition)
  return (
    <div className={cx('MenuPopover')} onClick={close}>
      <ul className={cx('menus')} onClick={e => e.stopPropagation()} ref={targetRef} style={style}>
        <li>#{id}</li>
        <li>스레드의 댓글</li>
        <li>메시지 전달</li>
        <li>나중을 위해 저장</li>
        <li>읽지 않음으로 표시</li>
        <li>삭제</li>
      </ul>
    </div>
  )
}

const ListItem = ({ id, title, index }: { id: string; title: string; index: number }) => {
  const buttonRef = useRef<HTMLButtonElement>(null)
  const [menuOpened, toggleMenu] = useState(false)
  const handleClickButton = () => toggleMenu(true)

  return (
    <li id={id} className={cx('list-item')}>
      #{index + 1}. {title}
      <button className={cx('popover-button')} onClick={handleClickButton} ref={buttonRef} />
      {menuOpened && (
        <MenuPopover id={index + 1 + ''} close={() => toggleMenu(false)} wrapperRef={buttonRef} />
      )}
    </li>
  )
}

• 내부에 popover 컴포넌트를 넣고, 클릭 이벤트를 관리하는 방법
• 쉽게 구현할 수 있다는 것이 장점이지만, 만약 ListItem에 overflow: hidden 스타일이 걸리게 된다면 팝오버요소가 가려질 수 있음

createPortal을 활용한 구현

const MenuPopover = ({
  id,
  close,
  wrapperRef,
}: {
  id: string
  close: () => void
  wrapperRef: RefObject<HTMLElement>
}) => {
  const targetRef = useRef<HTMLUListElement>(null)
  const style = useStyleInView(wrapperRef, targetRef, menuPosition, 'absolute')

  return createPortal(
    <div className={cx('MenuPopover')} onClick={close}>
      <ul className={cx('menus')} onClick={e => e.stopPropagation()} ref={targetRef} style={style}>
        <li>#{id}</li>
        <li>스레드의 댓글</li>
        <li>메시지 전달</li>
        <li>나중을 위해 저장</li>
        <li>읽지 않음으로 표시</li>
        <li>삭제</li>
      </ul>
    </div>,
    document.querySelector('#popoverRoot')!,
  )
}

• useStyleInView 훅을 수정하여, absolute 인 경우에도 화면상에 보일 수 있도록 수정

{
...
      const absoluteTop = -viewportRect.top + wrapperRect.top

      setStyle({
        [verticalKey]:
          verticalKey === 'top'
            ? absoluteTop + wrapperRect.height + +(position.top || 0)
            : viewportRect.height - absoluteTop + +(position.bottom || 0),
        [verticalKey === 'top' ? 'bottom' : 'top']: 'auto',
        [horizontalKey]:
          horizontalKey === 'left'
            ? wrapperRect.left - +(position.left || 0)
            : viewportRect.width - wrapperRect.right + +(position.right || 0),
        [horizontalKey === 'left' ? 'right' : 'left']: 'auto',
      })

    }
}

• absoluteTop : wrapperRect의 위치
  • verticalKey === top 인 경우 absoluteTop 에서 wrapperHeight 만큼 아래에서 아래로 보여줌
• createPortal을 활용해 팝오버를 외부에 렌더링 하기 때문에 부모요소의 스타일에도 자유로울 수 있는 장점