@trustbadge/design-tokens
v0.3.0
Published
TrustBadge design tokens + BadgeFrame React components — Official Futurism (15 frame styles, 4 design asset slots, light/dark theme)
Maintainers
retrustReadme
@trustbadge/design-tokens
TrustBadge 디자인 토큰 + BadgeFrame React 컴포넌트.
15종 프레임 · 4 tier · 4종 디자인 자산 슬롯 · 라이트/다크 모드.
공식 검증·지갑·대시보드 페이지가 사용하는 동일한 컴포넌트입니다.
Install
npm install @trustbadge/design-tokens
# 또는
pnpm add @trustbadge/design-tokenspeer dependencies: react ≥18, react-dom ≥18
Next.js 사용자 — transpilePackages 추가
소스(.tsx)를 그대로 노출하므로 번들러가 직접 컴파일하도록 설정:
// next.config.ts
const config = {
transpilePackages: ['@trustbadge/design-tokens'],
};
export default config;Quick Start
import { BadgeFrame } from '@trustbadge/design-tokens/badge-frames';
export function Preview() {
return (
<BadgeFrame
style="diploma" // 15종 중
tier="gold" // bronze | silver | gold | platinum
theme="dark" // dark | light
size={320}
name="ESG 우수 파트너 인증서"
issuer="주식회사 ABC"
serial="A1B2C3D4"
/>
);
}디자인 자산 4종 합성 (v3)
발급기관이 한 번만 등록한 자산을 SVG 슬롯에 자동 합성합니다.
<BadgeFrame
style="diploma" tier="gold" theme="dark" size={320}
name={badge.name}
issuer={badge.issuerName}
// 발급기관 로고 (상단 영역)
issuerLogo="https://cdn.example.com/logo.png"
// 후원사 로고 (하단 가로 정렬, 최대 5개)
sponsorLogos={[
{ url: "https://.../google.png", label: "Google" },
{ url: "https://.../microsoft.png", label: "Microsoft" },
]}
// 날인/서명 (본문 아래 좌·우)
signature={{ url: "https://.../ceo-signature.png", label: "대표이사" }}
secondarySignature={{ url: "https://.../dean-signature.png", label: "교무처장" }}
// 배경 워터마크 (중앙 큰 이미지, 투명도 조절)
watermark={{ url: "https://.../seal-pattern.png", opacity: 0.06, scale: 1.0 }}
/>BadgeFrame Props
| Prop | Type | 비고 |
|------|------|-----|
| style | 'engraved'\|'hexagon'\|'shield'\|'ring'\|'document'\|'national-emblem'\|'diploma'\|'edict'\|'proclamation'\|'decree'\|'medal-certificate'\|'university-diploma'\|'academic-honor'\|'license-certificate'\|'audit-report' | 15종 |
| tier | 'bronze'\|'silver'\|'gold'\|'platinum' | 등급 색조 |
| theme | 'dark'\|'light' | 미지정 시 useTheme() 자동 감지 |
| size | number | 픽셀 (정사각 또는 prop-ratio) |
| name, issuer, serial | string | 본문 표시 텍스트 |
| emblem | string (URL) | 기존 이미지 슬롯 — BadgeClass.imageUrl |
| issuerLogo | string (URL) | v3 자산 — 발급기관 로고 |
| sponsorLogos | { url, label? }[] | v3 자산 — 최대 5개 |
| signature | { url, label? } | v3 자산 — 본문 날인 |
| secondarySignature | { url, label? } | v3 자산 — 보조 날인 |
| watermark | { url, opacity?, scale? } | v3 자산 — 배경 워터마크 |
모든 자산 props 는 optional — 미설정 시 기존 디자인 그대로.
테마 토글 통합
import { ThemeToggle, useTheme } from '@trustbadge/design-tokens/theme';
function App() {
const theme = useTheme(); // 'dark' | 'light' — html[data-theme] 추적
return (
<>
<ThemeToggle size="sm" />
<BadgeFrame theme={theme} ... />
</>
);
}useTheme() 는 <html data-theme="…"> 속성을 MutationObserver 로 감시 — 토글 즉시 반영.
CSS 토큰
스타일을 함께 가져올 수 있습니다:
import '@trustbadge/design-tokens/base.css'; // 3-tier 디자인 토큰 + 다크/라이트 모드
import '@trustbadge/design-tokens/fonts.css'; // Fraunces / Inter / Pretendard / JetBrains Mono미리보기 (서버 사이드 PNG)
폼 저장 직전 OG-suitable 1200×630 PNG 가 필요하면 TrustBadge REST API:
POST https://api.badge.retrust.world/api/v1/og/preview
X-API-Key: tb_...
Content-Type: application/json
{
"badgeName": "...",
"issuerName": "...",
"frameStyle": "DIPLOMA",
"tier": "GOLD",
"imageUrl": null,
"designAssets": { /* 위 4종 */ }
}
→ 200 image/png (1200×630)발급 후 OG 와 100% 일치. 월간 발급 한도(quota) 에 카운트되지 않음. 자세한 명세: https://api.badge.retrust.world/api/docs
참조
- 통합 가이드 (v3): https://github.com/retrust-org/TrustBadge/blob/main/docs/integration/trustflow-onboarding.md
- 공개 docs 사이트: https://docs.badge.retrust.world
- Swagger UI: https://api.badge.retrust.world/api/docs
라이선스
Apache-2.0 © RE Trust Co., Ltd.