0009. 떠오르는 면은 Radix Popover로 만든다

This content is not available in your language yet.

상태: 채택
날짜: 2026-09-28
관련: src/renderer/src/ui/Popover.tsx, 0010-orca-status-bar-design.md

맥락

상태 표시줄의 Claude 사용량을 누르면 상세 사용량이 위로 떠오르게 하려 한다. 트리거에 붙어 뜨는 면은 이것이 처음이다. 지금까지 떠오르는 것은 화면 가운데의 대화상자(ui/Modal.tsx)와 OS가 그리는 네이티브 메뉴뿐이었다.

트리거에 붙어 뜨는 면은 대화상자보다 할 일이 많다. 트리거 위치를 따라가고, 창 끝에서 넘치면 방향을 바꾸고, 바깥 클릭과 Esc로 닫히고, 열릴 때와 닫힐 때 초점을 옮겨야 한다.

결정

@radix-ui/react-popover를 들여 ui/Popover.tsx로 감싸 쓴다. 겉모양은 Popover.module.css로 입힌다. 다른 Radix 부품은 쓸 곳이 생길 때 따로 판단한다.

근거 / 검토한 대안

직접 구현한다. 의존성이 늘지 않는다. 그러나 위치 계산, 넘침 처리, 바깥 클릭, 초점 이동을 모두 직접 짜야 하고, 떠오르는 면이 늘 때마다 같은 코드를 다시 쓰게 된다.
채택안: Radix Popover가 위치 계산(side, align, collisionPadding), 넘침 처리, 바깥 클릭과 Esc, 초점 관리를 맡는다. 스타일이 없는 부품이라 Belloga의 CSS 체계를 그대로 쓸 수 있다. 가져오는 Orca 코드도 Radix를 쓰고 있어 위치 값(side, sideOffset, collisionPadding)을 그대로 옮길 수 있다.

결과

의존성이 하나 늘었다(@radix-ui/react-popover와 그 하위 패키지 33개).
Radix는 내용을 Portal로 그리지만 React 이벤트는 트리거 쪽 트리로 올라간다. 그래서 떠오른 면 안의 우클릭이 바깥 요소의 우클릭 메뉴를 열 수 있다. PopoverContent가 제외 속성을 붙이고, 바깥 요소는 lib/contextMenuTarget.ts로 걸러야 한다.