uyooglass

표면: 2
버튼: 4
배지 톤: 5
토큰: 60+

우유랩스 공용 디자인 시스템. 유리 표면(glass-*)·토큰·React 프리미티브를 한 패키지로 배포합니다.

정본은 uyoolabs/uyooglass 리포 하나입니다. 제품 리포(uyooauth · uyoopack)에서 재질 값을 직접 고치지 않습니다. 이 사이트는 그 패키지의 실제 소스로 렌더되므로, 여기 보이는 것이 곧 제품에 나오는 것입니다.

설치

npmjs 가 아니라 GitHub Packages 에 있습니다.

.npmrc

@uyoolabs:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_PACKAGES_TOKEN}

GITHUB_PACKAGES_TOKEN 은 read:packages 권한의 토큰입니다. 로컬 셸·Vercel·Railway 환경변수에 같은 이름으로 둡니다.

추가

pnpm add @uyoolabs/uyooglass          # latest
pnpm add @uyoolabs/uyooglass@dev      # main 최신 커밋

next.config.ts

// next.config.ts — 소스(.tsx)를 그대로 배포하므로 Next 가 트랜스파일한다.
const nextConfig: NextConfig = {
  transpilePackages: ["@uyoolabs/uyooglass"],
};

globals.css

/* globals.css — 두 줄이 전부다. 순서를 바꾸지 않는다. */
@import "tailwindcss";
@import "@uyoolabs/uyooglass/css";

루트 layout.tsx

import { PretendardFont } from "@uyoolabs/uyooglass/brand";
import { ThemeProvider } from "@uyoolabs/uyooglass/theme";

<html lang="ko" suppressHydrationWarning>
  <head><PretendardFont /></head>
  <body><ThemeProvider>{children}</ThemeProvider></body>
</html>

peer: react · react-dom ≥ 19, next ≥ 16, tailwindcss ≥ 4, next-themes. menu · avatar · ThemeToggle 을 쓸 때만 radix-ui · lucide-react.

가져오기

진입점별로 나뉘어 있습니다. 필요한 것만 가져옵니다.

import	무엇
@uyoolabs/uyooglass	cn · useMounted · formatDate · formatDateTime · formatRelative
@uyoolabs/uyooglass/ui	Card · Table · Badge · Stats · TabNav · Pagination · FormRow · 버튼·입력 클래스 상수
@uyoolabs/uyooglass/backdrop	UyooBackdrop
@uyoolabs/uyooglass/theme	ThemeProvider
@uyoolabs/uyooglass/theme-toggle	ThemeToggle (radix · lucide 필요)
@uyoolabs/uyooglass/menu	DropdownMenu* (radix)
@uyoolabs/uyooglass/avatar	Avatar* (radix)
@uyoolabs/uyooglass/brand	BrandLogo · PretendardFont · GoogleIcon · GitHubIcon
@uyoolabs/uyooglass/css	전체 CSS. 부분만 필요하면 css/tokens · css/tailwind · css/base · css/animations · css/components · css/backdrop · css/utilities

조판 규칙

두 제품이 같은 화면처럼 보이게 하는 최소 규칙입니다.

페이지: space-y-5 의 Card 나열입니다. h1 을 그리지 않습니다.
화면 이름: 상단 breadcrumb 이 맡습니다. 이 사이트의 헤더가 그 예입니다.
목록: Table 또는 glass-secondary 행(rowClass)입니다.
상태: Badge 5톤(neutral · success · warning · danger · info)입니다.
버튼·입력: 컴포넌트가 아니라 클래스 문자열입니다. Link 에도 그대로 붙습니다.
ID·날짜: mono 입니다. id · num 유틸리티를 씁니다.
문구: 사용자 문구는 합니다체입니다.

이름 규칙

접두어는 uyoo 와 glass 뿐입니다. 다른 이름을 새로 들이지 않습니다. CI 가 금지어를 검사합니다.