styles: 다크모드일 때 대시보드 톤 정리

[goodaseul]

Summary by CodeRabbit

• Style
  • Refined banner styling with improved padding, borders, and corner radius
  • Enhanced dark mode support for dashboard components, including banners and charts
  • Improved chart styling with updated axis label and tooltip appearance across themes
  • Updated button text color styling for better contrast in light and dark modes

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
stack-plus	Ready	Preview, Comment	Apr 29, 2026 1:04am

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 512f5499-bffc-40d9-9f53-70bbd3c43d36

📥 Commits

Reviewing files that changed from the base of the PR and between 0742b99 and f95a82f.

📒 Files selected for processing (7)

• src/app/(protected)/dashboard/_components/common/banner/Banner.tsx
• src/app/(protected)/dashboard/_components/common/banner/BannerTitle.tsx
• src/app/(protected)/dashboard/_components/record/RecordChart.tsx
• src/app/(protected)/dashboard/_components/record/RecordLineChart/RecordChartToggle.tsx
• src/app/(protected)/dashboard/_components/record/RecordLineChart/RecordChartView.tsx
• src/app/(protected)/record/_components/Pagination.tsx
• src/app/globals.css

---

📝 Walkthrough

Walkthrough

Banner components are simplified by removing variant styling logic and static padding/border classes. Chart components migrate to CSS variables for theme-aware styling. Global CSS rules are added for chart axis labels. A debug console log is introduced to pagination.

Changes

Cohort / File(s)	Summary
Banner Component Styling src/app/(protected)/dashboard/_components/common/banner/Banner.tsx, src/app/(protected)/dashboard/_components/common/banner/BannerTitle.tsx	Simplifies Banner styling with fixed padding/border classes and removes hover behavior. Removes variant prop from BannerTitle and eliminates conditional styling logic, replacing clsx dependency with static text color classes.
Record Chart Styling Updates src/app/(protected)/dashboard/_components/record/RecordChart.tsx, src/app/(protected)/dashboard/_components/record/RecordLineChart/RecordChartView.tsx	Updates Banner and BannerTitle usage by removing variant prop. Migrates chart tick labels and line stroke from hard-coded colors to CSS variables (--chart-text, --chart-line, --tooltip-bg) with dark-mode support.
Chart Button Styling src/app/(protected)/dashboard/_components/record/RecordLineChart/RecordChartToggle.tsx	Introduces clsx for composing Button className with shared text color styling (text-black dark:text-white) combined with existing conditional period styles.
Global Chart Styling src/app/globals.css	Adds global CSS rules for Recharts axis tick labels with light mode (fill: #6b7280) and dark mode (`fill: `#fff) styling.
Debug Logging src/app/(protected)/record/_components/Pagination.tsx	Introduces debug console.log output for totalItems and itemsPerPage on component render.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A banner simplified, its variants shed,
With CSS variables elegantly spread,
Dark modes and light modes in harmony blend,
The charts now shall theme without end!
~CodeRabbit's little themer

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch dev

---

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

_{Review rate limit: 0/1 reviews remaining, refill in 60 minutes.}

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