aurum-glass-design-system

v0.3.0

Published

a month ago

Luxury glassmorphism React design system — 40+ components, gold theme, dark-first, TypeScript, styled-components

Aurum Glass Design System

럭셔리 글래스모피즘 React 디자인 시스템 · A luxury glassmorphism React design system

소개 · Overview

Aurum Glass는 금(金) 테마와 글래스모피즘 미학을 결합한 React 디자인 시스템입니다.
다크 퍼스트(dark-first) 설계, 완전한 TypeScript 지원, styled-components 기반으로 만들어졌습니다.

Aurum Glass is a dark-first React design system combining gold (aurum) aesthetics with glassmorphism — frosted glass surfaces, animated gold accents, and a consistent token system built for financial and luxury product interfaces.

특징 · Features

🪟 Glassmorphism — backdrop-filter blur 표면, 금색 hairline, 조도 기반 테두리
✨ 40+ 컴포넌트 — Layout → Typography → Forms → Overlays → Navigation → Form Extended
🎨 2가지 테마 — aurumTheme (다크 골드) · obsidianTheme (딥 블랙)
🔒 TypeScript 6.0 — 모든 Props/컴포넌트 완전 타입 안전
🌲 Tree-shaking — sideEffects: false, ESM + CJS 듀얼 번들
♿ 접근성 — WAI-ARIA 역할, 키보드 네비게이션, focus-visible 링
📱 모바일 지원 — BottomNav의 env(safe-area-inset-bottom), 터치 이벤트
📋 Form 통합 — react-hook-form + zod 스키마 검증
📅 DatePicker — date-fns 기반, 한국어 로케일 기본값
🚀 Virtual Scroll — @tanstack/react-virtual로 1만 개 옵션도 60fps

설치 · Installation

# npm
npm install aurum-glass-design-system

# yarn
yarn add aurum-glass-design-system

# pnpm
pnpm add aurum-glass-design-system

Peer Dependencies

npm install react react-dom styled-components

| Package | Version | |---|---| | react | ≥ 18.0.0 | | react-dom | ≥ 18.0.0 | | styled-components | ≥ 6.0.0 |

빠른 시작 · Quick Start

1. 테마 프로바이더 설정

// src/main.tsx (or _app.tsx)
import React from 'react';
import ReactDOM from 'react-dom/client';
import { AurumThemeProvider, GlobalStyle } from 'aurum-glass-design-system';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <AurumThemeProvider>
    <GlobalStyle />
    <App />
  </AurumThemeProvider>
);

2. 컴포넌트 사용

import {
  Button,
  Card,
  Input,
  Badge,
  Tabs,
  Modal,
} from 'aurum-glass-design-system';

export function Demo() {
  const [open, setOpen] = React.useState(false);

  return (
    <Card elevation="base" tone="gold">
      <Card.Header>
        <Badge tone="gold" variant="subtle">Phase 6</Badge>
        <span>Aurum Vault</span>
      </Card.Header>
      <Card.Body>
        <Input label="Vault Name" placeholder="Enter name…" />
        <Button variant="primary" onClick={() => setOpen(true)}>
          Open Modal
        </Button>
      </Card.Body>

      <Modal isOpen={open} onClose={() => setOpen(false)}>
        <Modal.Header>Confirm</Modal.Header>
        <Modal.Body>Ready to deploy?</Modal.Body>
        <Modal.Footer>
          <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
          <Button variant="primary">Deploy</Button>
        </Modal.Footer>
      </Modal>
    </Card>
  );
}

3. Form + Zod 검증

import { z } from 'zod';
import { Form, useForm, Input, Button } from 'aurum-glass-design-system';

const schema = z.object({
  email: z.string().email('유효한 이메일을 입력하세요'),
  password: z.string().min(8, '8자 이상이어야 합니다'),
});

export function LoginForm() {
  const form = useForm({ schema, defaultValues: { email: '', password: '' } });

  return (
    <Form form={form} onSubmit={(data) => console.log(data)}>
      <Form.Field name="email" label="Email" required>
        <Input {...form.register('email')} type="email" />
      </Form.Field>
      <Form.Field name="password" label="Password" required>
        <Input {...form.register('password')} type="password" />
      </Form.Field>
      <Form.Actions>
        <Button type="submit" variant="primary">로그인</Button>
      </Form.Actions>
    </Form>
  );
}

4. DatePicker (한국어)

import { DatePicker } from 'aurum-glass-design-system';

export function DateDemo() {
  const [date, setDate] = React.useState<Date | null>(null);

  return (
    <DatePicker
      value={date}
      onChange={setDate}
      placeholder="날짜 선택"
      clearable
    />
  );
}

컴포넌트 목록 · Component List

Phase 2 — Layout & Typography

| Component | Description | |---|---| | Box | 기본 레이아웃 박스 · CSS 토큰 prop 지원 | | Stack | 수직/수평 스택 레이아웃 | | Flex | Flexbox 래퍼 | | Grid | CSS Grid 래퍼 | | Container | 최대 너비 컨테이너 (5단계) | | Divider | 구분선 (horizontal/vertical, 3 variants) | | Heading | h1–h6 Typography | | Text | 본문 텍스트 (size/weight/tone) |

Phase 3 — Forms & Display

| Component | Description | |---|---| | Button | 4 variants · 3 sizes · loading · icon slots | | IconButton | 3 shapes · 3 variants | | Input | Label/hint/error · adornments · 4 variants | | Card | Header/Body/Footer/Media · 3 elevations · gold tone | | Badge | 6 tones · dot · pulse animation | | Avatar | 5 sizes · 6 variants · status · Avatar.Group | | Switch | 3 sizes · CSS-only checked state | | Checkbox | Indeterminate · Checkbox.Group |

Phase 4 — Overlays & Feedback

| Component | Description | |---|---| | Modal | Portal · 12px backdrop blur · focus trap · ESC | | ToastProvider + useToast | 5 tones · progress bar · hover pause | | BottomSheet | Portal · slide-up · grabber | | Alert | Inline · left accent bar · 5 tones | | Tooltip | 4 placements · arrow · shortcut chip | | Spinner | 5 sizes · Aurum dual-ring variant | | Skeleton | Shimmer · gold reflection · text/circle/block | | Progress | Linear (indeterminate) + Progress.Circular (SVG) |

Phase 5 — Navigation

| Component | Description | |---|---| | Tabs | 3 variants · animated indicator · keyboard nav | | NavBar | Sticky · scroll-driven blur · brand/links/actions | | BottomNav | Fixed · safe-area · gold active accent · badge | | Drawer | Portal · left/right slide · Header/Section/List/Item/Footer | | Menu | Portal floating · Arrow/Enter/Esc keyboard nav | | Pagination | Ellipsis · gold active page | | Stepper | Horizontal/vertical · done/active/pending · gold connectors | | Breadcrumb | Default/pill · separator · home icon |

Phase 6 — Form Extended

| Component | Description | |---|---| | Textarea | 4 variants · autoSize · char counter | | Radio + RadioGroup | 4 variants (default/glass/gradient/card) · 3 sizes | | Slider | Gold thumb · tooltip · marks · pointer events | | SearchBar | Debounce · highlight · grouped dropdown | | Select | Virtual scroll · multi-select · searchable · chips | | FileUpload | Dropzone · button · avatar · file list with progress | | Form + useForm | react-hook-form + zod integration | | DatePicker | date-fns · Korean locale · month/year picker |

테마 커스터마이징 · Theme Customization

import { AurumThemeProvider, aurumTheme, obsidianTheme } from 'aurum-glass-design-system';

// 다크 골드 (기본값)
<AurumThemeProvider theme={aurumTheme}>...</AurumThemeProvider>

// 딥 블랙
<AurumThemeProvider theme={obsidianTheme}>...</AurumThemeProvider>

// 커스텀 테마
const myTheme = {
  ...aurumTheme,
  colors: {
    ...aurumTheme.colors,
    textGold: '#FFD700',
  },
};
<AurumThemeProvider theme={myTheme}>...</AurumThemeProvider>

디자인 토큰 · Design Tokens

import {
  spacing,    // 0–10 (4px–128px)
  fontFamily, // display · sans · mono
  fontSize,   // 12–128
  radius,     // xs · sm · md · lg · xl · full
  shadow,     // sm · md · lg · xl · goldGlow
  blur,       // sm · md · lg
  zIndex,     // dropdown · sticky · overlay · modal · toast
} from 'aurum-glass-design-system';

브라우저 지원 · Browser Support

| Browser | Version | |---|---| | Chrome | ≥ 88 | | Firefox | ≥ 90 | | Safari | ≥ 14 | | Edge | ≥ 88 |

backdrop-filter 지원 필요. Safari ≥ 14, Chrome ≥ 76, Firefox ≥ 103.