refactor: PandaCSS에서 Tailwind CSS로 스타일링 시스템 마이그레이션

[sumi-0011]

💻 작업 내용

PandaCSS 기반 스타일링 시스템을 Tailwind CSS로 마이그레이션했습니다. 이를 통해 번들 사이즈 최적화와 더 나은 개발자 경험을 제공합니다.

주요 변경사항:

1. 새로운 Tailwind UI 패키지 생성 (packages/ui/tailwind)

• Radix UI 기반 shadcn/ui 스타일 컴포넌트 라이브러리 구축
• 주요 UI 컴포넌트: Button, Dialog, Select, Accordion, Checkbox, Dropdown Menu, Tooltip 등
• 커스텀 컴포넌트: Banner, GameCard, SearchBar, SplitText 애니메이션
• 디자인 토큰 시스템 통합 (colors, typography, screens, keyframes, zIndex)
• cn() 유틸리티 및 Tailwind 프리셋 제공

2. Web 앱 Tailwind 설정 마이그레이션 (apps/web)

• tailwind.config.ts, postcss.config.mjs 설정 추가
• 기존 PandaCSS styled-system import를 Tailwind 클래스로 전환
• 240개 이상의 컴포넌트 파일에서 스타일 코드 변환

3. 마이그레이션된 주요 페이지/컴포넌트

• Landing 페이지: MainSection, AvailablePetSection, ChoosePetSection, HavePetWaySection, Footer
• Guild 시스템: GuildCard, GuildDetail, GuildSetting, MemberCard 등
• Quiz 게임: QuizTypeCard, QuizCreateForm, SolvingQuizSection, AlertDialog들
• Laboratory: MergeSlots, PetGrid, SelectionSummary, LaboratoryLayout
• Event 페이지: Christmas, Halloween 이벤트 컴포넌트들
• 공통 컴포넌트: TextArea, Select, Tabs, Slider, SortSelect 등

4. 코드 최적화

• @gitanimals/ui-panda 참조 제거 및 @gitanimals/ui-tailwind로 교체
• Dialog 컴포넌트 수정 및 버그 픽스
• Custom token error 수정

이전 → 현재:

• 스타일링: PandaCSS css(), styled() → Tailwind CSS 유틸리티 클래스
• 컴포넌트: @gitanimals/ui-panda → @gitanimals/ui-tailwind
• 빌드 설정: PandaCSS 코드젠 → PostCSS + Tailwind

삭제된 코드:

• 불필요한 PandaCSS 스타일 정의 파일들 (.style.ts 파일 대폭 간소화)
• 약 7,295줄 삭제, 5,926줄 추가 (순 -1,369줄 감소)

📸 스크린샷

UI 변경 없음 - 기능적으로 동일하게 유지되며 내부 스타일링 시스템만 변경됨

[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.}