fix: UI 통일성 작업 (UI Uniform)

[james20140802]

fix: UI 통일성 작업 (UI Uniform)

개요

여러 AI를 혼용하면서 생긴 색상 혼재, 중복 컴포넌트, 스타일 불일치 문제를 해결했습니다.
겉으로 보이는 UI 변화보다는 코드 내부의 일관성 확보에 집중한 작업입니다.

---

주요 변경사항

🎨 디자인 토큰 시스템 구축

• tailwind.config.js에 color / typography / shadow / radius 토큰 정의
• text-gray-*, text-zinc-* 하드코딩 → text-label, text-label-sub, text-label-muted 토큰으로 교체
• bg-white, bg-gray-* → bg-surface, bg-surface-raised
• border-gray-*, border-zinc-* → border-border, border-dark-border
• dark:text-white, dark:text-zinc-100 → dark:text-label-invert

🧩 컴포넌트 정리

• SectionCard.tsx 삭제 → Card.tsx로 통일
• Card에 variant prop 추가 (default / raised / flat / ghost)
• Button에 loading prop 추가

📄 리팩토링된 파일 (21개)

• tailwind.config.js, app/globals.css, app/layout.tsx
• components/Navbar.tsx
• components/EntryCard.tsx
• components/ui/Card.tsx, Button.tsx
• components/ui/SectionCard.tsx (삭제)
• components/books/BookDetailContent.tsx, BookList.tsx
• components/comments/CommentBottomSheet.tsx
• components/profile/ProfileHeader.tsx, ProfileStats.tsx, ProfileBookshelf.tsx
• components/dashboard/WeeklyStreakSection.tsx, TodaySummarySection.tsx
• components/dashboard/InProgressBooksSection.tsx, SocialFeedItem.tsx
• app/protected/social/_components/SocialTab.tsx
• app/protected/profile/edit/page.tsx
• app/onboarding/_components/OnboardingForm.tsx

🔧 폼 컴포넌트 통일

• profile/edit 페이지의 raw <input>, <textarea> → Input, Textarea, FormGroup, FormLabel 공통 컴포넌트로 교체

---

스크린샷

겉으로 보이는 변화는 거의 없습니다. 코드 내부 정리 작업입니다.

---

다음 작업

• feat/ui-facelift 브랜치에서 실제 UI 개선 작업 예정

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
readiary	Ready	Preview, Comment	Mar 7, 2026 3:46am