Phase 8: SSOT 리팩토링 + HotkeyRecordModal + Dashboard 재작성
- 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
This commit is contained in:
Yun Chan
parent
f41fc277e3
commit
28371a9d1a
19 changed files with 1879 additions and 403 deletions
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
import { useRef, useEffect, useCallback } from 'react'
|
||||
import { Box } from '@mui/material'
|
||||
import { d3roPalette, d3roFontMono } from '../../theme'
|
||||
|
||||
// ── WebGL 유틸 ─────────────────────────────────────────
|
||||
|
||||
|
|
@ -218,7 +219,7 @@ export function CrtDisplay({
|
|||
sx={{
|
||||
position: 'relative',
|
||||
height,
|
||||
bgcolor: '#1a1a1c',
|
||||
bgcolor: d3roPalette.bg.crtBezel,
|
||||
borderRadius: '8px',
|
||||
boxShadow: 'inset 0 4px 12px rgba(0,0,0,0.9), inset 0 0 0 1px #000, 0 1px 1px rgba(255,255,255,0.1)',
|
||||
overflow: 'hidden',
|
||||
|
|
@ -230,7 +231,7 @@ export function CrtDisplay({
|
|||
position: 'absolute',
|
||||
inset: '2px',
|
||||
borderRadius: '6px',
|
||||
bgcolor: '#050605',
|
||||
bgcolor: d3roPalette.bg.crtGlass,
|
||||
overflow: 'hidden',
|
||||
boxShadow: 'inset 0 0 20px rgba(0,0,0,0.8)',
|
||||
}}
|
||||
|
|
@ -261,10 +262,10 @@ export function CrtDisplay({
|
|||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
color: '#f25b29',
|
||||
color: d3roPalette.accent.amber,
|
||||
textShadow: '0 0 6px rgba(242, 91, 41, 0.4)',
|
||||
pointerEvents: 'none',
|
||||
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
|
||||
fontFamily: d3roFontMono,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
// 시안 A: 메탈 섀시 컨테이너 — 노이즈 텍스처, 각인 텍스트, 물리적 존재감
|
||||
|
||||
import { Box, Typography } from '@mui/material'
|
||||
import { d3roPalette, d3roFontMono } from '../../theme'
|
||||
|
||||
interface InstrumentPanelProps {
|
||||
children: React.ReactNode
|
||||
|
|
@ -23,11 +24,11 @@ export function InstrumentPanel({
|
|||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
bgcolor: '#242528',
|
||||
bgcolor: d3roPalette.bg.chassis,
|
||||
borderRadius: '24px',
|
||||
p: 3,
|
||||
boxShadow:
|
||||
'0 60px 100px -20px rgba(0,0,0,0.8), 0 12px 0 #111112, 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)',
|
||||
`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: '""',
|
||||
|
|
@ -62,10 +63,10 @@ function Engraving({ children, sx }: { children: string; sx: Record<string, unkn
|
|||
position: 'absolute',
|
||||
fontSize: '9px',
|
||||
letterSpacing: '1.5px',
|
||||
color: '#1a1a1c',
|
||||
color: d3roPalette.text.engraving,
|
||||
textShadow: '0 1px 0 rgba(255,255,255,0.08)',
|
||||
fontWeight: 700,
|
||||
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
|
||||
fontFamily: d3roFontMono,
|
||||
zIndex: 2,
|
||||
userSelect: 'none',
|
||||
...sx,
|
||||
|
|
|
|||
|
|
@ -2,15 +2,16 @@
|
|||
// 시안 A: LED 인디케이터 — 물리적 LED, 활성 시 glow + pulse
|
||||
|
||||
import { Box } from '@mui/material'
|
||||
import { d3roPalette } from '../../theme'
|
||||
|
||||
type LedColor = 'amber' | 'green' | 'red' | 'orange' | 'off'
|
||||
|
||||
const LED_COLORS: Record<LedColor, { bg: string; glow: string }> = {
|
||||
amber: { bg: '#f25b29', glow: 'rgba(242, 91, 41, 0.6)' },
|
||||
green: { bg: '#22c55e', glow: 'rgba(34, 197, 94, 0.6)' },
|
||||
red: { bg: '#ef4444', glow: 'rgba(239, 68, 68, 0.6)' },
|
||||
orange: { bg: '#f59e0b', glow: 'rgba(245, 158, 11, 0.6)' },
|
||||
off: { bg: '#111', glow: 'transparent' },
|
||||
amber: { bg: d3roPalette.accent.amber, glow: d3roPalette.accent.amberGlow },
|
||||
green: { bg: d3roPalette.tag.green, glow: d3roPalette.tag.greenGlow },
|
||||
red: { bg: d3roPalette.tag.red, glow: d3roPalette.tag.redGlow },
|
||||
orange: { bg: d3roPalette.tag.orange, glow: d3roPalette.tag.orangeGlow },
|
||||
off: { bg: d3roPalette.led.off, glow: 'transparent' },
|
||||
}
|
||||
|
||||
interface LedProps {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
// 시안 A+B 융합: 메탈 카드 컨테이너 — 섀시 느낌의 인셋 패널
|
||||
|
||||
import { Box } from '@mui/material'
|
||||
import { d3roPalette } from '../../theme'
|
||||
|
||||
interface MetalCardProps {
|
||||
children: React.ReactNode
|
||||
|
|
@ -12,15 +13,15 @@ export function MetalCard({ children, inset = false }: MetalCardProps): React.Re
|
|||
return (
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: inset ? '#1b1c1e' : '#242427',
|
||||
bgcolor: inset ? d3roPalette.bg.inset : d3roPalette.bg.card,
|
||||
borderRadius: inset ? '12px' : '22px',
|
||||
borderTop: inset ? 'none' : '1px solid rgba(255,255,255,0.04)',
|
||||
borderTop: inset ? 'none' : `1px solid ${d3roPalette.border.subtle}`,
|
||||
boxShadow: inset
|
||||
? 'inset 0 2px 6px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.05)'
|
||||
: '0 8px 30px rgba(0,0,0,0.3)',
|
||||
p: inset ? '6px' : 3,
|
||||
transition: 'background-color 0.2s ease',
|
||||
'&:hover': inset ? {} : { bgcolor: '#2a2a2d' },
|
||||
'&:hover': inset ? {} : { bgcolor: d3roPalette.bg.cardHover },
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -2,14 +2,15 @@
|
|||
// 시안 A: 인광 텍스트 — 앰버 glow, 모노 폰트, CRT 느낌
|
||||
|
||||
import { Typography, type TypographyProps } from '@mui/material'
|
||||
import { d3roPalette, d3roFontMono } from '../../theme'
|
||||
|
||||
type PhosphorVariant = 'hero' | 'value' | 'label' | 'dim'
|
||||
|
||||
const VARIANTS: Record<PhosphorVariant, { fontSize: string; color: string; glow: string; fontWeight: number }> = {
|
||||
hero: { fontSize: '42px', color: '#f25b29', glow: 'rgba(242, 91, 41, 0.4)', fontWeight: 300 },
|
||||
value: { fontSize: '20px', color: '#f25b29', glow: 'rgba(242, 91, 41, 0.3)', fontWeight: 400 },
|
||||
label: { fontSize: '10px', color: '#5c2615', glow: 'none', fontWeight: 700 },
|
||||
dim: { fontSize: '10px', color: '#77797c', glow: 'none', fontWeight: 400 },
|
||||
hero: { fontSize: '42px', color: d3roPalette.accent.amber, glow: 'rgba(242, 91, 41, 0.4)', fontWeight: 300 },
|
||||
value: { fontSize: '20px', color: d3roPalette.accent.amber, glow: 'rgba(242, 91, 41, 0.3)', fontWeight: 400 },
|
||||
label: { fontSize: '10px', color: d3roPalette.text.dimLabel, glow: 'none', fontWeight: 700 },
|
||||
dim: { fontSize: '10px', color: d3roPalette.text.inactive, glow: 'none', fontWeight: 400 },
|
||||
}
|
||||
|
||||
interface PhosphorTextProps extends Omit<TypographyProps, 'variant'> {
|
||||
|
|
@ -23,7 +24,7 @@ export function PhosphorText({ variant = 'value', sx, ...props }: PhosphorTextPr
|
|||
<Typography
|
||||
{...props}
|
||||
sx={{
|
||||
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
|
||||
fontFamily: d3roFontMono,
|
||||
fontSize: v.fontSize,
|
||||
fontWeight: v.fontWeight,
|
||||
color: v.color,
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
// 시안 A: 물리 버튼 — 돌출 그림자, 눌림 피드백, 선택 상태
|
||||
|
||||
import { Button, type ButtonProps } from '@mui/material'
|
||||
import { d3roPalette, d3roFontMono } from '../../theme'
|
||||
|
||||
interface PhysicalButtonProps extends Omit<ButtonProps, 'variant'> {
|
||||
selected?: boolean
|
||||
|
|
@ -13,11 +14,11 @@ export function PhysicalButton({ selected = false, sx, ...props }: PhysicalButto
|
|||
{...props}
|
||||
sx={{
|
||||
height: 44,
|
||||
bgcolor: selected ? '#1a1a1c' : '#242528',
|
||||
bgcolor: selected ? d3roPalette.bg.crtBezel : d3roPalette.bg.chassis,
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
color: selected ? '#f25b29' : '#77797c',
|
||||
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
|
||||
color: selected ? d3roPalette.accent.amber : d3roPalette.text.inactive,
|
||||
fontFamily: d3roFontMono,
|
||||
fontSize: '12px',
|
||||
fontWeight: 600,
|
||||
cursor: 'pointer',
|
||||
|
|
@ -31,7 +32,7 @@ export function PhysicalButton({ selected = false, sx, ...props }: PhysicalButto
|
|||
boxShadow: '0 1px 2px rgba(0,0,0,0.4), inset 0 2px 4px rgba(0,0,0,0.3)',
|
||||
},
|
||||
'&:hover': {
|
||||
bgcolor: selected ? '#1a1a1c' : '#2a2b2e',
|
||||
bgcolor: selected ? d3roPalette.bg.crtBezel : d3roPalette.bg.cardHover,
|
||||
},
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.5px',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue