프로젝트 상세Zen UI✕

React 개발자를 위한 미니멀한 Headless UI 라이브러리

2025. 03 · 3주 | 4인 팀 (FE 4)

담당 역할

Tabs 컴포넌트 구현
Storybook 문서화

기술 스택

TypeScriptReactContext APIStorybook
Headless UI Tabs 컴포넌트

Headless UI Tabs 컴포넌트

  • 컴파운드 컴포넌트 패턴 및 Context API로 구현
  • Polymorphic Component로 동적 요소 렌더링
  • 제어/비제어 방식 동시 지원
  • vertical/horizontal 방향 옵션 지원
  • ARIA Tabs Pattern 기반 키보드 접근성 구현
01

라이브러리 빌드 시 CSS 번들링 문제 해결

문제 상황

빌드 결과물에 CSS가 포함되지 않는 문제

사용자가 기본 스타일을 선택적으로 사용할 수 있도록 바닐라 CSS를 제공하려 했으나, 패키지 설치 후 스타일이 적용되지 않는 문제 발생

Vite library mode는 CSS를 JS 번들에 포함하지 않고 별도 파일로 분리하는 것이 의도된 동작임을 확인

CSS 자동 주입 플러그인 적용 시 스타일 오버라이딩 불가 문제

CSS를 JS에 자동 주입하는 플러그인을 적용한 후 스타일은 적용됐으나, 사용자가 직접 스타일을 재정의할 수 없는 문제 발생

해결 및 결과

CSS를 별도 파일로 분리하여 export

  • Vite 공식 권장 방식인 CSS 별도 파일 export로 변경
  • 사용자가 필요 시 직접 import하는 방식으로 전환

기본 스타일 제공과 커스터마이징 동시 지원

기본 스타일 사용을 원하는 경우 CSS 파일을 import하여 적용 가능
import하지 않으면 스타일 없이 Headless UI로 사용 가능