yunchan/d3ro-voice
1
0
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions

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

Browse source 
동기 부여된 모션만 — 히어로(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
1 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
apps/desktop/src/renderer/pages/DashboardPage.tsx
View file

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