[260406] TIL

Today I Learned (2026-04-06)

콤보박스 만들기

• Radix Popover와 cmdk를 조합해 검색 가능한 콤보박스를 구현했다.
• PopoverContent의 side, align, sideOffset으로 표시 위치를 조절하고, onInteractOutside로 외부 인터랙션을 다룰 수 있었다.
• 선택값, 검색어, 필터링된 옵션, 열림 상태를 훅으로 분리하니 트리거와 팝오버 콘텐츠의 책임이 더 명확해졌다.

코드 정리

• 콤보박스의 상태 관리 로직은 useCombobox 훅으로 분리하고, 화면 요소는 Trigger와 PopoverContent 컴포넌트로 나눴다.
• 옵션 크기별 클래스처럼 반복되는 값은 객체 상수로 관리해 조건문을 줄였다.
• ComboboxOption, ComboboxStyle 타입을 따로 두니 props 구조가 더 명확해졌다.