feat(dashboard): 히어로 + 스탯 타일에 TiltCard 적용

동기 부여된 모션만 — 히어로(maxTilt 8) + 4개 스탯 타일(maxTilt 6). 나머지 데이터 밀집/드롭존/리스트 섹션은 MetalCard 유지 (틸트 = unmotivated slop 회피).

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yun Chan 2026-07-22 00:51:30 +09:00
parent c8d8316cea
commit 32db25a74f

View file

@ -17,7 +17,7 @@ import {
Check,
Cpu,
} from 'lucide-react'
import { GradientWave, Led, MetalCard, PhosphorText, PhysicalButton, StatRing } from '@d3ro/ui/components/ds'
import { GradientWave, Led, MetalCard, PhosphorText, PhysicalButton, StatRing, TiltCard } from '@d3ro/ui/components/ds'
import { EmptyStateCard, HistoryEntryCard } from '../components/shared'
import { d3roPalette, d3roFontSans, d3roFontMono, d3roRadius, d3roTypo, typoSx } from '@d3ro/ui/theme'
import { useI18n } from '@d3ro/i18n'
@ -221,7 +221,7 @@ export function DashboardPage(): React.ReactElement {
return (
<Box sx={{ maxWidth: 980, mx: 'auto', p: 4, pt: 5, pb: 8 }}>
{/* ── 1. 히어로 카드 ─────────────────────────── */}
<MetalCard sx={{ p: 3.5 }}>
<TiltCard sx={{ p: 3.5 }}>
{/* 상단 라인: 라벨 / 날짜 / 시스템 칩 */}
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2.5 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
@ -305,12 +305,12 @@ export function DashboardPage(): React.ReactElement {
<Box sx={{ mt: 2.5, height: 56 }}>
<GradientWave audioLevel={audioLevel} idleAmplitude={0.3} barWidth={3} barGap={3} />
</Box>
</MetalCard>
</TiltCard>
{/* ── 2. 컬러 링 스탯 4타일 ───────────────────── */}
<Box ref={statsRef} sx={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 2, mt: 2.5 }}>
{statTiles.map((tile) => (
<MetalCard key={tile.label} sx={{ p: 2.5 }}>
<TiltCard key={tile.label} maxTilt={6} sx={{ p: 2.5 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
<StatRing color={tile.ring} size={52}>
{tile.icon}
@ -329,7 +329,7 @@ export function DashboardPage(): React.ReactElement {
</Box>
</Box>
</Box>
</MetalCard>
</TiltCard>
))}
</Box>