feat: Tailwind UI 패키지 Storybook 환경 구축#357
Merged
Merged
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Tailwind fontSize 설정이 fontFamily를 지원하지 않는 한계를 플러그인으로 해결하여, text-glyph-* 클래스 사용 시 font-product 없이도 Product Sans가 자동 적용되도록 함 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
# Conflicts: # apps/web/src/app/[locale]/game/quiz/_components/CreateOrSolve/QuizTypeCard.tsx # apps/web/src/app/[locale]/game/quiz/_components/CreateOrSolve/SolveQuizConfirmDialog.tsx # apps/web/src/app/[locale]/game/quiz/create/_components/QuizCreateForm.tsx # apps/web/src/app/[locale]/game/quiz/solve/_components/done/CompleteAlertDialog.tsx # apps/web/src/app/[locale]/game/quiz/solve/_components/fail/FailAlertDialog.tsx # apps/web/src/app/[locale]/game/quiz/solve/_components/success/CorrectConfirmDialog.tsx # apps/web/src/app/[locale]/guild/_components/GuildPeopleList.tsx # apps/web/src/app/[locale]/guild/_components/SelectPersonaList.tsx # apps/web/src/app/[locale]/laboratory/_component/ConfirmDialog.tsx # apps/web/src/app/[locale]/laboratory/multi-merge/PersonaItem.tsx # apps/web/src/app/[locale]/landing/AvailablePetSection/AvailablePetSection.tsx # apps/web/src/app/[locale]/landing/ChoosePetSection/ChoosePetSection.tsx # apps/web/src/app/[locale]/landing/Footer/Footer.style.ts # apps/web/src/app/[locale]/landing/MainSection/MainSection.style.ts # apps/web/src/app/[locale]/landing/MainSection/MainSection.tsx # apps/web/src/app/[locale]/landing/MainSection/MainSlider.tsx # apps/web/src/app/[locale]/landing/RankingSection/MobileRankingTable.tsx # apps/web/src/app/[locale]/landing/RankingSection/RankingSection.tsx # apps/web/src/app/[locale]/mypage/(github-custom)/FarmPersonaSelect.tsx # apps/web/src/app/[locale]/mypage/(github-custom)/FarmType.tsx # apps/web/src/app/[locale]/mypage/(github-custom)/LinePersonaSelect.tsx # apps/web/src/app/[locale]/mypage/PersonaList.tsx # apps/web/src/app/[locale]/mypage/my-pet/_components/SelectPersonaList.tsx # apps/web/src/app/[locale]/page.tsx # apps/web/src/app/[locale]/shop/_auction/index.tsx # apps/web/src/app/[locale]/shop/_petGotcha/OnePet.tsx # apps/web/src/components/CardGame/FanDrawingGame/FanDrawingGame.tsx # apps/web/src/components/Guild/MemeberSlider.tsx
ui-panda Dialog API와 맞추기 위해 ui-tailwind Dialog에 누락된 서브컴포넌트와 prop을 추가하고, quiz 컴포넌트에서 참조하는 ConfirmDialog 컴포넌트를 생성하여 type-check 오류 해결 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
# Conflicts: # apps/web/src/app/[locale]/guild/_components/GuildPeopleList.tsx # apps/web/src/app/[locale]/guild/_components/SelectPersonaList.tsx # apps/web/src/app/[locale]/laboratory/multi-merge/PersonaItem.tsx # apps/web/src/app/[locale]/landing/MainSection/MainSlider.tsx # apps/web/src/app/[locale]/mypage/(github-custom)/FarmType.tsx # apps/web/src/app/[locale]/mypage/(github-custom)/LinePersonaSelect.tsx # apps/web/src/app/[locale]/mypage/my-pet/_components/SelectPersonaList.tsx # apps/web/src/app/[locale]/shop/_petGotcha/OnePet.tsx # apps/web/src/components/Guild/MemeberSlider.tsx
Stories files reference @storybook/react types which are not available during the library type-check. Excluding them follows the standard pattern of separating storybook config from library builds. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
💻 작업 내용
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 상태, AnchorButtonCheckbox: 기본/체크/비활성화 상태, 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 관련 의존성 및 스크립트 추가이전과 비교:
실행 방법:
pnpm --filter @gitanimals/ui-tailwind storybook # 또는 루트에서 pnpm sb:tailwind