28371a9d1a
- d3roPalette 11개 토큰 추가 (sidebar, chassis, inactive 등) - DS 컴포넌트 6개 + 페이지 5개 매직넘버 → 팔레트 참조 (0개 잔여) - HotkeyRecordModal 신규: 커스텀 핫키 녹화 모달 - SettingsModal 재작성: 음성 모드 3개(받아쓰기/Agent/원터치) + 핫키 변경 - DashboardPage 재작성: Hero + 통계 4카드 + CRT 서비스 상태 + 히스토리 날짜 그룹핑 - recording-tip 색상 수정: #1F5DF2(파란) → #f25b29(앰버) - 설계 문서: phase-8.md, speakly-settings-ui.md
78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
// src/renderer/components/ds/InstrumentPanel.tsx
|
|
// 시안 A: 메탈 섀시 컨테이너 — 노이즈 텍스처, 각인 텍스트, 물리적 존재감
|
|
|
|
import { Box, Typography } from '@mui/material'
|
|
import { d3roPalette, d3roFontMono } from '../../theme'
|
|
|
|
interface InstrumentPanelProps {
|
|
children: React.ReactNode
|
|
/** 상단 좌측 각인 */
|
|
engravingLeft?: string
|
|
/** 상단 우측 각인 */
|
|
engravingRight?: string
|
|
/** 하단 중앙 각인 */
|
|
engravingBottom?: string
|
|
}
|
|
|
|
export function InstrumentPanel({
|
|
children,
|
|
engravingLeft = 'D3RO-VOICE SYS.',
|
|
engravingRight = 'MOD-01 / TERMINAL',
|
|
engravingBottom = 'LOCAL AI VOICE ASSISTANT',
|
|
}: InstrumentPanelProps): React.ReactElement {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
position: 'relative',
|
|
bgcolor: d3roPalette.bg.chassis,
|
|
borderRadius: '24px',
|
|
p: 3,
|
|
boxShadow:
|
|
`0 60px 100px -20px rgba(0,0,0,0.8), 0 12px 0 ${d3roPalette.led.off}, 0 13px 4px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -1px 2px rgba(0,0,0,0.4)`,
|
|
// 메탈 노이즈는 CSS로 시뮬레이션
|
|
'&::before': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
inset: 0,
|
|
borderRadius: '24px',
|
|
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
|
|
opacity: 0.04,
|
|
mixBlendMode: 'overlay',
|
|
pointerEvents: 'none',
|
|
zIndex: 1,
|
|
},
|
|
}}
|
|
>
|
|
{/* 각인 텍스트 */}
|
|
<Engraving sx={{ top: 12, left: 24 }}>{engravingLeft}</Engraving>
|
|
<Engraving sx={{ top: 12, right: 24 }}>{engravingRight}</Engraving>
|
|
<Engraving sx={{ bottom: 12, left: '50%', transform: 'translateX(-50%)' }}>{engravingBottom}</Engraving>
|
|
|
|
{/* 콘텐츠 (z-index 5로 노이즈 위) */}
|
|
<Box sx={{ position: 'relative', zIndex: 5 }}>
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
function Engraving({ children, sx }: { children: string; sx: Record<string, unknown> }): React.ReactElement {
|
|
return (
|
|
<Typography
|
|
sx={{
|
|
position: 'absolute',
|
|
fontSize: '9px',
|
|
letterSpacing: '1.5px',
|
|
color: d3roPalette.text.engraving,
|
|
textShadow: '0 1px 0 rgba(255,255,255,0.08)',
|
|
fontWeight: 700,
|
|
fontFamily: d3roFontMono,
|
|
zIndex: 2,
|
|
userSelect: 'none',
|
|
...sx,
|
|
}}
|
|
>
|
|
{children}
|
|
</Typography>
|
|
)
|
|
}
|