프로젝트 상세Zen UI✕
담당 역할
Tabs 컴포넌트 구현
Storybook 문서화
기술 스택
TypeScriptReactContext APIStorybook
주요 기능

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로 사용 가능
import하지 않으면 스타일 없이 Headless UI로 사용 가능