[WIP] Segmenting `Overlay`

[sungik-choi]

Description

Note 먼저 디자이너와 논의 후, 디자인 시스템에 컴포넌트 스펙이 추가되어야합니다.

Overlay 컴포넌트를 애플리케이션의 다양한 유즈케이스별로 세분화합니다.

Reasons for suggestion

• 현재 Overlay 의 내부 컨텐츠는 단순히 '내부에 무엇이든 들어갈 수 있다' 로만 정의되어있습니다.
• 이러한 유연성이 새로운 컴포넌트 추가에 있어 좋은 부분도 있으나, 추상화 수준이 너무 낮기 때문에 사용처에서 별도로 구현해주어야할 부분이 너무 많습니다.
  • Button 의 클릭 핸들러에 Overlay 의 onShow 핸들러를 연결해주는 등

Proposed solution

Note 먼저 디자이너와 논의 필요

• Select: 버튼으로 트리거하고, 리스트 중 무언가를 선택함 -> 선택한 요소가 버튼에 나타남
• New / Hover card: 트리거에 마우스를 호버하면 오버레이가 나타남 (e.g. 매니저 오버레이)
• New / Menu: 버튼으로 트리거하고, 리스트를 선택할 수 있음. 하지만 선택한 요소가 버튼에 나타나지 않음 (e.g. 계정 오버레이, 유저챗 보류 선택기 등)
• Popover: 버튼으로 트리거하고, Rich content를 가짐 (e.g. 오버레이 내부에 TextField가 들어있거나 하는 경우, 위지윅의 Plugin)

---

• 컨텍스트를 사용, ListItem 을 Overlay 아이템으로서 선언적으로 잘 사용할 수 있도록 (키보드 네비게이션 등)
  • https://react-spectrum.adobe.com/react-spectrum/ListBox.html 참고

References

• https://www.radix-ui.com/docs/primitives/components/popover#popover 등