@stn-uiux/pub-ui

STN Pub design system package — tokens, component specs (TypeScript), and CSS entry points for product HTML and React apps.

• 레이어 구조 (Pub 기본 패키지 vs React vs DS 사이트): docs/STN-Pub-아키텍처.md
• 개발자 설치 가이드: docs/개발자-설치.md
• 버전별 변경 이력 (소비 앱용): CHANGELOG.md

설치 (Install)

별도의 토큰이나 .npmrc 설정 없이 공식 NPM 레지스트리에서 바로 설치할 수 있습니다:

npm install @stn-uiux/pub-ui @stn-uiux/pub-ui-react

기본 사용법 (Quick Start)

1) 스타일 불러오기

애플리케이션의 최상단(예: main.tsx 또는 App.tsx)에 스타일 CSS를 import합니다:

import '@stn-uiux/pub-ui/styles.css'

2) React 컴포넌트 사용

import { StnButton, StnTable } from '@stn-uiux/pub-ui-react'

export function MyPage() {
  return (
    <StnButton variant="primary" size="md">
      확인
    </StnButton>
  )
}

package.json exports

| Export 경로 | 설명 / 실제 파일 | |---|---| | @stn-uiux/pub-ui | 메인 카탈로그 및 타입 스펙 (./dist/index.js) | | @stn-uiux/pub-ui/components | 컴포넌트 목록 및 정의 메타데이터 (./dist/components.js) | | @stn-uiux/pub-ui/data | 디자인 토큰 및 스펙 데이터셋 모음 (./dist/data/index.js) | | @stn-uiux/pub-ui/data/* | 개별 스펙 모듈 (./dist/data/*.js) | | @stn-uiux/pub-ui/styles.css | 전체 디자인 시스템 CSS 번들 (./styles/style-pub.css) | | @stn-uiux/pub-ui/assets/svg/* | 시스템 SVG 아이콘 에셋 |

Structure

packages/stn-pub-ui/
  bin/            # CLI 툴 (stn-pub-ui.mjs)
  src/
    data/         # stn*.ts 토큰 테이블, 스펙 정의, 플레이그라운드 설정
    styles/       # 컴포넌트 및 레이아웃 CSS 번들
    components.ts # STN_UI_CATALOG 카탈로그 정의
    index.ts      # Public API 진입점
  styles/         # 빌드/배포 대상 CSS 파일 및 토큰 모음

Pub HTML (순수 HTML/퍼블리싱 환경)

• packages/stn-pub-ui/styles/style-pub.css를 참조하여 순수 HTML 환경에서도 동일한 클래스로 디자인 시스템을 적용할 수 있습니다.
• 토큰 변경 시 npm run generate:tokens로 토큰 CSS를 동기화합니다.