[디자인 시스템 어떻게 만들었어요?(2)] Radix Primitives와 Panda CSS로 유연하고 단단한 컴포넌트 만들기
프론트엔드
[디자인 시스템 어떻게 만들었어요?(2)] Radix Primitives와 Panda CSS로 유연하고 단단한 컴포넌트 만들기
두줄요약
Radix Primitives로 접근성과 확장성을 확보하고, Panda CSS로 상태 기반 스타일링을 선언적으로 구성했습니다. 또한 styled-components의 한계를 고려해 Zero-runtime CSS-in-TS로 전환하고 토큰 배포 전략도 정비했습니다.
핵심 내용
- Radix Primitives로 접근성, 키보드 내비게이션, 포커스 관리 같은 복잡한 로직을 위임하고 컴포넌트 확장성과 유연성 확보
- Panda CSS의 슬롯 레시피와 상태 기반 data attribute를 활용해 스타일 분기와 선언적 상태 관리를 구성
- styled-components의 런타임 오버헤드와 RSC 호환성 한계를 고려해 Zero-runtime CSS-in-TS인 Panda CSS로 전환
- 토큰 라이브러리를 환경별 데이터 구조로 제공하고, 라이브러리 배포 방식도 서비스 환경에 맞게 검토