b820c789bb
- theme-vars.ts dark/light POPUP_THEME_VARS를 theme.ts RAW와 값 정합: v1 잔존 주황(#f25b29) -> 파랑(dark #3b82f6 / light #2563eb), --d3-bg-card, --d3-text-dimLabel 동기화. 팝업=렌더러 색상 충돌 해소. - DS 미사용 3종 제거: MetalDial, ButtonGroup, CrtDisplay + barrel export (렌더러 전체 import 0건 재검증) - StatRing RING_COLORS hex 10종 -> d3roPalette.gradient.wave/tag 토큰 (다크 고정 -> 테마 전환 대응) SKIP: theme-vars 평행 SSOT 구조 단일화, theme.ts amber 별칭 제거 (web/admin/site가 accent.amber 사용 -> 전체 치환 별도 wave) 정책: docs/REFACTOR_POLICY.md DP1, DP9
66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
// src/renderer/components/ds/StatRing.tsx
|
|
// v2 신규: 컬러 그라디언트 링 아이콘 — 스탯 타일의 원형 링 (레퍼런스 4타일 패턴)
|
|
|
|
import { Box } from '@mui/material'
|
|
import { d3roPalette } from '../../theme'
|
|
|
|
type RingColor = 'blue' | 'purple' | 'green' | 'orange' | 'red' | 'accent'
|
|
|
|
const RING_COLORS: Record<RingColor, { from: string; to: string; glow: string; icon: string }> = {
|
|
blue: { from: 'var(--d3-gradient-wave1)', to: 'var(--d3-gradient-wave2)', glow: d3roPalette.tag.blueBg, icon: d3roPalette.tag.blue },
|
|
purple: { from: 'var(--d3-gradient-wave3)', to: 'var(--d3-gradient-wave4)', glow: d3roPalette.tag.purpleBg, icon: d3roPalette.tag.purple },
|
|
green: { from: d3roPalette.tag.green, to: d3roPalette.tag.green, glow: d3roPalette.tag.greenGlow, icon: d3roPalette.tag.green },
|
|
orange: { from: d3roPalette.tag.orange, to: d3roPalette.tag.orange, glow: d3roPalette.tag.orangeGlow, icon: d3roPalette.tag.orange },
|
|
red: { from: d3roPalette.tag.red, to: d3roPalette.tag.red, glow: d3roPalette.tag.redGlow, icon: d3roPalette.tag.red },
|
|
accent: { from: 'var(--d3-accent-light)', to: 'var(--d3-accent-dark)', glow: 'var(--d3-accent-dim)', icon: d3roPalette.accent.light },
|
|
}
|
|
|
|
interface StatRingProps {
|
|
/** 링 색 (기본 blue) */
|
|
color?: RingColor
|
|
/** 외경 px (기본 56) */
|
|
size?: number
|
|
/** 링 두께 px (기본 2) */
|
|
thickness?: number
|
|
/** 중앙 아이콘/콘텐츠 */
|
|
children?: React.ReactNode
|
|
}
|
|
|
|
export function StatRing({
|
|
color = 'blue',
|
|
size = 56,
|
|
thickness = 2,
|
|
children,
|
|
}: StatRingProps): React.ReactElement {
|
|
const c = RING_COLORS[color]
|
|
return (
|
|
<Box
|
|
sx={{
|
|
width: size,
|
|
height: size,
|
|
borderRadius: '50%',
|
|
p: `${thickness}px`,
|
|
background: `conic-gradient(from 210deg, ${c.from}, ${c.to}, ${c.from})`,
|
|
boxShadow: `0 0 ${size / 3.5}px ${c.glow}`,
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: '100%',
|
|
height: '100%',
|
|
borderRadius: '50%',
|
|
bgcolor: d3roPalette.bg.crtGlass,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
color: c.icon,
|
|
}}
|
|
>
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|