Radix 기반 ButtonGroup 도입을 통한 UI 일관성 확보 및 Tailwind 중복 제거

Context

대시보드 내 개별 버튼 배치로 인한 간격 및 보더의 불일치 발생. 반복적인 커스텀 스타일링 적용에 따른 유지보수 비용 증가와 UI 파편화 문제 직면.

Technical Solution

• Radix 및 Base UI Primitives 기반의 Wrapper 구조를 설계하여 논리적 단위로 버튼 그룹화
• 레이아웃과 동작 정의를 단일화하여 Table, Filter, Navigation 등 다양한 컴포넌트에서 재사용 가능한 구조 구축
• orientation 속성을 통한 Horizontal/Vertical 스택킹 제어로 사이드바 등 좁은 뷰포트 내 레이아웃 붕괴 방지
• 상태 변수와 조건부 스타일링을 결합한 Active State 관리로 UI와 애플리케이션 상태 간 동기화 유지
• 정해진 Role과 Focus State 적용을 통한 Keyboard Navigation 및 웹 접근성 표준 준수

Key Takeaway

단순한 시각적 그룹화를 넘어 공통 인터페이스 래퍼를 통해 스타일 중복을 제거하고 시스템 전반의 UI 일관성을 강제하는 설계 원칙의 중요성.