d3ro-voice/packages/ui/src/components/ds/PhosphorText.tsx

'use client'

// src/renderer/components/ds/PhosphorText.tsx
// v2 "Midnight Glass": 클린 타이포그래피 — 산세리프(Pretendard) 기반.
// 헤드라인/수치는 프라이머리 화이트, 메타/라벨류만 모노+대문자 유지.

import { Typography, type TypographyProps } from '@mui/material'
import { d3roPalette, d3roFontSans, d3roFontMono, d3roTypo } from '../../theme'

type PhosphorVariant =
  | 'hero' | 'title' | 'value' | 'heading'
  | 'body' | 'compact' | 'small'
  | 'meta' | 'label' | 'dim'
  | 'engrave' | 'micro' | 'nano'

interface VariantDef {
  fontSize: string
  color: string
  fontWeight: number
  letterSpacing: string
  lineHeight: number
  textTransform?: 'uppercase' | 'none'
  mono?: boolean
}

const VARIANTS: Record<PhosphorVariant, VariantDef> = {
  hero:    { fontSize: d3roTypo.hero.size,    color: d3roPalette.text.primary,   fontWeight: d3roTypo.hero.weight,    letterSpacing: d3roTypo.hero.spacing,    lineHeight: d3roTypo.hero.line },
  title:   { fontSize: d3roTypo.title.size,   color: d3roPalette.text.primary,   fontWeight: d3roTypo.title.weight,   letterSpacing: d3roTypo.title.spacing,   lineHeight: d3roTypo.title.line },
  value:   { fontSize: d3roTypo.value.size,   color: d3roPalette.text.primary,   fontWeight: d3roTypo.value.weight,   letterSpacing: d3roTypo.value.spacing,   lineHeight: d3roTypo.value.line },
  heading: { fontSize: d3roTypo.heading.size, color: d3roPalette.text.primary,   fontWeight: d3roTypo.heading.weight, letterSpacing: d3roTypo.heading.spacing, lineHeight: d3roTypo.heading.line },
  body:    { fontSize: d3roTypo.body.size,    color: d3roPalette.text.secondary, fontWeight: d3roTypo.body.weight,    letterSpacing: d3roTypo.body.spacing,    lineHeight: d3roTypo.body.line },
  compact: { fontSize: d3roTypo.compact.size, color: d3roPalette.text.primary,   fontWeight: d3roTypo.compact.weight,  letterSpacing: d3roTypo.compact.spacing, lineHeight: d3roTypo.compact.line },
  small:   { fontSize: d3roTypo.small.size,   color: d3roPalette.text.inactive,  fontWeight: d3roTypo.small.weight,   letterSpacing: d3roTypo.small.spacing,   lineHeight: d3roTypo.small.line },
  meta:    { fontSize: d3roTypo.meta.size,    color: d3roPalette.text.inactive,  fontWeight: d3roTypo.meta.weight,    letterSpacing: d3roTypo.meta.spacing,    lineHeight: d3roTypo.meta.line, textTransform: 'uppercase', mono: true },
  label:   { fontSize: d3roTypo.label.size,   color: d3roPalette.text.label,     fontWeight: d3roTypo.label.weight,   letterSpacing: d3roTypo.label.spacing,   lineHeight: d3roTypo.label.line, textTransform: 'uppercase' },
  dim:     { fontSize: d3roTypo.label.size,   color: d3roPalette.text.inactive,  fontWeight: d3roTypo.body.weight,    letterSpacing: d3roTypo.label.spacing,   lineHeight: d3roTypo.label.line },
  engrave: { fontSize: d3roTypo.engrave.size, color: d3roPalette.text.dimLabel,  fontWeight: d3roTypo.engrave.weight, letterSpacing: d3roTypo.engrave.spacing, lineHeight: d3roTypo.engrave.line, textTransform: 'uppercase', mono: true },
  micro:   { fontSize: d3roTypo.micro.size,   color: d3roPalette.text.dimLabel,  fontWeight: d3roTypo.micro.weight,   letterSpacing: d3roTypo.micro.spacing,   lineHeight: d3roTypo.micro.line, textTransform: 'uppercase', mono: true },
  nano:    { fontSize: d3roTypo.nano.size,    color: d3roPalette.text.inactive,  fontWeight: d3roTypo.nano.weight,    letterSpacing: d3roTypo.nano.spacing,   lineHeight: d3roTypo.nano.line, textTransform: 'uppercase', mono: true },
}

interface PhosphorTextProps extends Omit<TypographyProps, 'variant'> {
  variant?: PhosphorVariant
}

export function PhosphorText({ variant = 'value', component = 'span', sx, ...props }: PhosphorTextProps): React.ReactElement {
  const v = VARIANTS[variant]

  return (
    <Typography
      component={component}
      {...props}
      sx={{
        fontFamily: v.mono ? d3roFontMono : d3roFontSans,
        fontSize: v.fontSize,
        fontWeight: v.fontWeight,
        color: v.color,
        letterSpacing: v.letterSpacing,
        lineHeight: v.lineHeight,
        fontVariantNumeric: 'tabular-nums',
        textTransform: v.textTransform ?? 'none',
        ...sx,
      }}
    />
  )
}