WIP: 인스트루먼트 UI 시도 (DS 컴포넌트 + CRT 셰이더)
- DS 컴포넌트: CrtDisplay, InstrumentPanel, Led, PhysicalButton, MetalCard, PhosphorText - Dashboard: CRT WebGL 셰이더 + 물리 버튼 + LED 클러스터 - 사이드바: 72px 미니 네비게이션 - 문제: SSOT 위반(매직넘버 41곳), 시안 A 정체성 부족, 모달/팝업 방치 - 다음: 디자인 근본 재설계 필요
This commit is contained in:
Yun Chan
parent
3f4d0c5828
commit
85d626b922
13 changed files with 930 additions and 746 deletions
|
|
@ -1,23 +1,14 @@
|
|||
// src/renderer/components/AppLayout.tsx
|
||||
// 08-design-system.md SSOT 적용. 앰버 악센트, LED, 다크 카드.
|
||||
// 시안 A+B 융합: 인스트루먼트 섀시 사이드바 + 콘텐츠 영역
|
||||
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
Box,
|
||||
Drawer,
|
||||
List,
|
||||
ListItemButton,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
Divider,
|
||||
Typography
|
||||
} from '@mui/material'
|
||||
import { Box, Typography, Tooltip } from '@mui/material'
|
||||
import DashboardIcon from '@mui/icons-material/Dashboard'
|
||||
import HistoryIcon from '@mui/icons-material/History'
|
||||
import MenuBookIcon from '@mui/icons-material/MenuBook'
|
||||
import ExtensionIcon from '@mui/icons-material/Extension'
|
||||
import SettingsIcon from '@mui/icons-material/Settings'
|
||||
import { d3roPalette, d3roFontMono } from '../theme'
|
||||
import { Led } from './ds'
|
||||
import { DashboardPage } from '../pages/DashboardPage'
|
||||
import { HistoryPage } from '../pages/HistoryPage'
|
||||
import { DictionaryPage } from '../pages/DictionaryPage'
|
||||
|
|
@ -27,13 +18,11 @@ import { StatusBar } from './StatusBar'
|
|||
|
||||
type Route = 'dashboard' | 'history' | 'dictionary' | 'commands'
|
||||
|
||||
const DRAWER_WIDTH = 240
|
||||
|
||||
const NAV_ITEMS: Array<{ route: Route; label: string; icon: React.ReactElement }> = [
|
||||
{ route: 'dashboard', label: 'Dashboard', icon: <DashboardIcon /> },
|
||||
{ route: 'history', label: 'History', icon: <HistoryIcon /> },
|
||||
{ route: 'dictionary', label: 'Dictionary', icon: <MenuBookIcon /> },
|
||||
{ route: 'commands', label: 'Commands', icon: <ExtensionIcon /> }
|
||||
{ route: 'dashboard', label: 'DASH', icon: <DashboardIcon sx={{ fontSize: 20 }} /> },
|
||||
{ route: 'history', label: 'HIST', icon: <HistoryIcon sx={{ fontSize: 20 }} /> },
|
||||
{ route: 'dictionary', label: 'DICT', icon: <MenuBookIcon sx={{ fontSize: 20 }} /> },
|
||||
{ route: 'commands', label: 'CMD', icon: <ExtensionIcon sx={{ fontSize: 20 }} /> },
|
||||
]
|
||||
|
||||
export function AppLayout(): React.ReactElement {
|
||||
|
|
@ -41,132 +30,126 @@ export function AppLayout(): React.ReactElement {
|
|||
const [settingsOpen, setSettingsOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', height: '100vh', flexDirection: 'column' }}>
|
||||
<Box sx={{ display: 'flex', height: '100vh', flexDirection: 'column', bgcolor: '#19191b' }}>
|
||||
<Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
|
||||
{/* Sidebar Drawer */}
|
||||
<Drawer
|
||||
variant="permanent"
|
||||
{/* ── 사이드바: 인스트루먼트 섀시 스타일 ─── */}
|
||||
<Box
|
||||
sx={{
|
||||
width: DRAWER_WIDTH,
|
||||
width: 72,
|
||||
flexShrink: 0,
|
||||
'& .MuiDrawer-paper': {
|
||||
width: DRAWER_WIDTH,
|
||||
boxSizing: 'border-box'
|
||||
}
|
||||
bgcolor: '#1e1f21',
|
||||
borderRight: '1px solid rgba(255,255,255,0.04)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
py: 2,
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
{/* Header — 앰버 악센트 로고 */}
|
||||
<Box sx={{ p: 2.5, display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||||
{/* LED indicator */}
|
||||
<Box
|
||||
sx={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: '50%',
|
||||
bgcolor: d3roPalette.accent.amber,
|
||||
boxShadow: `0 0 6px ${d3roPalette.accent.amberGlow}, 0 0 16px ${d3roPalette.accent.amberDim}`,
|
||||
animation: 'led-pulse 1.5s ease-in-out infinite',
|
||||
'@keyframes led-pulse': {
|
||||
'0%, 100%': { opacity: 1 },
|
||||
'50%': { opacity: 0.5 },
|
||||
},
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
{/* 로고 LED */}
|
||||
<Box sx={{ mb: 2, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}>
|
||||
<Led color="amber" pulse size={10} />
|
||||
<Typography
|
||||
variant="h6"
|
||||
noWrap
|
||||
sx={{
|
||||
fontSize: '8px',
|
||||
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
|
||||
letterSpacing: '1.5px',
|
||||
color: '#5c2615',
|
||||
fontWeight: 700,
|
||||
fontSize: '14px',
|
||||
letterSpacing: '0.05em',
|
||||
color: d3roPalette.text.primary,
|
||||
}}
|
||||
>
|
||||
D3RO VOICE
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
fontFamily: d3roFontMono,
|
||||
fontSize: '10px',
|
||||
color: d3roPalette.text.label,
|
||||
letterSpacing: '0.05em',
|
||||
}}
|
||||
>
|
||||
v1.0
|
||||
D3RO
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Divider sx={{ borderColor: d3roPalette.border.subtle }} />
|
||||
|
||||
{/* Navigation label */}
|
||||
<Typography
|
||||
sx={{
|
||||
px: 2.5,
|
||||
pt: 2,
|
||||
pb: 1,
|
||||
fontSize: '11px',
|
||||
fontWeight: 600,
|
||||
letterSpacing: '0.1em',
|
||||
textTransform: 'uppercase',
|
||||
color: d3roPalette.text.label,
|
||||
}}
|
||||
>
|
||||
Navigation
|
||||
</Typography>
|
||||
|
||||
<List sx={{ flex: 1, pt: 0 }}>
|
||||
{NAV_ITEMS.map((item) => (
|
||||
<ListItemButton
|
||||
key={item.route}
|
||||
selected={currentRoute === item.route}
|
||||
onClick={() => setCurrentRoute(item.route)}
|
||||
sx={{ my: 0.5 }}
|
||||
>
|
||||
<ListItemIcon
|
||||
{/* 네비게이션 버튼 */}
|
||||
{NAV_ITEMS.map((item) => {
|
||||
const isActive = currentRoute === item.route
|
||||
return (
|
||||
<Tooltip key={item.route} title={item.label} placement="right" arrow>
|
||||
<Box
|
||||
onClick={() => setCurrentRoute(item.route)}
|
||||
sx={{
|
||||
minWidth: 36,
|
||||
color: currentRoute === item.route
|
||||
? d3roPalette.accent.amber
|
||||
: d3roPalette.text.label,
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: '8px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 0.5,
|
||||
cursor: 'pointer',
|
||||
bgcolor: isActive ? '#242528' : 'transparent',
|
||||
boxShadow: isActive
|
||||
? 'inset 0 2px 6px rgba(0,0,0,0.8), inset 0 0 0 1px #000'
|
||||
: '0 2px 4px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.06)',
|
||||
color: isActive ? '#f25b29' : '#77797c',
|
||||
transition: 'all 0.05s linear',
|
||||
transform: isActive ? 'translateY(1px)' : 'none',
|
||||
'&:active': {
|
||||
transform: 'translateY(2px)',
|
||||
boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.6)',
|
||||
},
|
||||
'&:hover': {
|
||||
color: isActive ? '#f25b29' : '#aaa',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{item.icon}
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={item.label}
|
||||
primaryTypographyProps={{
|
||||
fontSize: '14px',
|
||||
fontWeight: currentRoute === item.route ? 600 : 400,
|
||||
}}
|
||||
/>
|
||||
</ListItemButton>
|
||||
))}
|
||||
</List>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: '7px',
|
||||
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '0.5px',
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
)
|
||||
})}
|
||||
|
||||
<Divider sx={{ borderColor: d3roPalette.border.subtle }} />
|
||||
{/* 스페이서 */}
|
||||
<Box sx={{ flex: 1 }} />
|
||||
|
||||
{/* Bottom settings */}
|
||||
<List sx={{ pb: 1 }}>
|
||||
<ListItemButton sx={{ my: 0.5 }} onClick={() => setSettingsOpen(true)}>
|
||||
<ListItemIcon sx={{ minWidth: 36, color: d3roPalette.text.label }}>
|
||||
<SettingsIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Settings"
|
||||
primaryTypographyProps={{ fontSize: '14px' }}
|
||||
/>
|
||||
</ListItemButton>
|
||||
</List>
|
||||
</Drawer>
|
||||
{/* Settings */}
|
||||
<Tooltip title="SETTINGS" placement="right" arrow>
|
||||
<Box
|
||||
onClick={() => setSettingsOpen(true)}
|
||||
sx={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: '8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
color: '#77797c',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.06)',
|
||||
transition: 'all 0.05s linear',
|
||||
'&:active': {
|
||||
transform: 'translateY(2px)',
|
||||
boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.6)',
|
||||
},
|
||||
'&:hover': { color: '#aaa' },
|
||||
}}
|
||||
>
|
||||
<SettingsIcon sx={{ fontSize: 20 }} />
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
|
||||
{/* Content Area */}
|
||||
{/* ── 콘텐츠 영역 ────────────────────────── */}
|
||||
<Box
|
||||
component="main"
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
overflow: 'auto',
|
||||
bgcolor: d3roPalette.bg.app,
|
||||
bgcolor: '#19191b',
|
||||
// 미묘한 방사형 비네팅 (시안 A 배경)
|
||||
background: 'radial-gradient(circle at 50% 30%, #252628 0%, #19191b 70%)',
|
||||
}}
|
||||
>
|
||||
{currentRoute === 'dashboard' && <DashboardPage />}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue