feat(dashboard): 히어로 + 스탯 타일에 TiltCard 적용
동기 부여된 모션만 — 히어로(maxTilt 8) + 4개 스탯 타일(maxTilt 6). 나머지 데이터 밀집/드롭존/리스트 섹션은 MetalCard 유지 (틸트 = unmotivated slop 회피). Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
c8d8316cea
commit
32db25a74f
1 changed files with 5 additions and 5 deletions
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue