feat: Tailwind UI 패키지 Storybook 환경 구축

[sumi-0011]

💻 작업 내용

Tailwind CSS 기반 UI 패키지(@gitanimals/ui-tailwind)에 Storybook 개발 환경을 구축했습니다.

Storybook 설정 추가:

• .storybook/main.ts: Vite 기반 Storybook 설정, path alias 지원
• .storybook/preview.ts: 기본 프리뷰 설정 및 다크 테마 배경 설정
• .storybook/globals.css: Tailwind 디렉티브 및 Storybook 전용 스타일

컴포넌트 스토리 작성 (5개):

• Button: Primary/Secondary variant, S/M/L 사이즈, Disabled 상태, AnchorButton
• Checkbox: 기본/체크/비활성화 상태, Label 연동 예제
• Dialog: 사이즈 variant(default/large/screen), 닫기 버튼 토글, Header/Footer 구성
• Select: 기본 사용법, 비활성화, 에러 상태, FormField 통합
• TextField: 사이즈 variant, 비활성화/에러 상태, Label/HelperText 연동

패키지 설정:

• postcss.config.js: Tailwind CSS PostCSS 플러그인 설정
• tailwind.config.ts: Storybook 경로 content 설정 추가
• package.json: Storybook 관련 의존성 및 스크립트 추가

이전과 비교:

• 이전: Tailwind UI 컴포넌트만 존재하고 시각적 테스트 환경 없음
• 현재: Storybook에서 모든 컴포넌트를 인터랙티브하게 확인하고 문서화 가능

실행 방법:

pnpm --filter @gitanimals/ui-tailwind storybook
# 또는 루트에서
pnpm sb:tailwind

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}