@gpters-internal/ui

How it Works

디자인 시스템의 양방향 동기화 구조

Overview

이 디자인 시스템은 중앙 저장소와 사용자 프로젝트 간에 양방향으로 동기화됩니다.

  • 일관성— 모든 프로젝트가 동일한 디자인 토큰과 컴포넌트를 사용
  • 자동 동기화— 수동 업데이트 없이 항상 최신 버전 유지
  • 협업— 어느 프로젝트에서든 컴포넌트를 만들면 전체에 공유
┌─────────────────────────────────────────────────────────────┐
│              conewarrior/design-system (중앙)               │
│                                                             │
│   components/    tokens.css    docs/                        │
│       │              │                                      │
│       ▼              ▼                                      │
│   npm publish    CDN (jsDelivr)                             │
│   @gpters-internal/ui    즉시 반영                           │
└───────────────────────┬─────────────────────────────────────┘
                        │
          ┌─────────────┴─────────────┐
          ▼                           ▲
     Downstream                   Upstream
   (자동 업데이트)               (자동 기여)
          │                           │
┌─────────┴───────────────────────────┴───────────────────────┐
│                      사용자 프로젝트                        │
│                                                             │
│  Dependabot → PR → Auto-merge        Write → Hook → GitHub  │
│  (새 버전 감지)                       (components/ 생성 시) │
└─────────────────────────────────────────────────────────────┘

배포 채널

npm 패키지 (@gpters-internal/ui)

Node.js 프로젝트 (Next.js, React, Vue 등)에서 사용합니다.

  • React 컴포넌트 (Button, Input 등)
  • tokens.css (CSS 변수)
  • TypeScript 타입 정의
bash
npm install @gpters-internal/ui

CDN (jsDelivr)

HTML/CSS 프로젝트, 빠른 프로토타이핑에서 사용합니다. tokens.css만 제공됩니다.

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/conewarrior/design-system/tokens.css">

Downstream: 중앙 → 프로젝트

새 버전이 배포되면 자동으로 사용자 프로젝트에 반영됩니다.

  1. 1
    npm publish
    버전 태그(v*)를 push하면 GitHub Actions가 자동으로 npm에 배포
  2. 2
    Dependabot 감지
    매일 09:00 (KST)에 새 버전을 체크하고 PR 생성
  3. 3
    Auto-merge
    CI 통과 시 minor/patch는 자동 머지, major는 수동 리뷰

Upstream: 프로젝트 → 중앙

프로젝트에서 컴포넌트를 만들면 자동으로 중앙 저장소에 기여됩니다.

  1. 1
    Write/Edit 감지
    Claude Code가 components/ 폴더에 파일을 생성하면 Hook 트리거
  2. 2
    auto-contribute.sh
    gh CLI 또는 GitHub API를 사용하여 design-system 저장소에 직접 커밋
  3. 3
    npm 배포
    커밋이 main에 반영되면 자동으로 새 버전 배포
gh CLI (권장) 또는 GITHUB_TOKEN 환경변수가 설정되어 있어야 합니다.

트러블슈팅