@stn-uiux/pub-ui-react

STN Pub 디자인 시스템의 공식 React 컴포넌트 라이브러리입니다.
엄격한 디자인 토큰 규격과 시맨틱 CSS를 기반으로 최적화된 엔터프라이즈 UI 컴포넌트를 제공합니다.

• 버전별 변경 이력: CHANGELOG.md
• CSS 및 디자인 토큰 패키지: @stn-uiux/pub-ui

설치 (Install)

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

빠른 시작 (Quick Start)

1) 테마 프로바이더 및 스타일 설정

애플리케이션 최상단(예: App.tsx 또는 main.tsx)에서 CSS를 import하고 StnProvider로 감싸줍니다:

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

export function App() {
  return (
    <StnProvider mode="dark" applyModeToDocument>
      <main>
        <StnButton variant="primary" size="md">
          실행
        </StnButton>
      </main>
    </StnProvider>
  )
}

StnProvider Props

| Prop | 타입 | 기본값 | 설명 | |------|------|--------|------| | mode | 'light' \| 'dark' | 'dark' | 다크/라이트 컬러 모드 (html[data-mode]) | | applyModeToDocument | boolean | true | true일 경우 <html> 태그에 data-mode 속성을 자동 적용 | | theme | string | undefined | 커스텀 테마 식별자 (html[data-theme]) | | useStn() | Hook | - | 하위 컴포넌트에서 { mode, setMode, theme, setTheme }를 조회/변경하는 훅 |

주요 컴포넌트 목록

| 분류 | 컴포넌트 | |------|----------| | 버튼 & 선택 | StnButton, StnToggleButton, StnSegmented | | 폼 입력 | StnTextField, StnDropdown, StnCheckbox, StnRadio, StnSwitch, StnSlider, StnDatePicker, StnDateRangeField | | 데이터 & 상태 | StnStatus (StnStatus.Severity 포함), StnTable, StnPagination, StnTree, StnProgressBar, StnLoadingSkeleton | | 배지 & 인디케이터 | StnBadge, StnChip | | 피드백 & 오버레이 | StnPopup, StnToast, StnEventBanner | | 레이아웃 & 네비게이션 | StnWidget, StnLayer, StnSideNavigation, StnHeaderTitle, StnBreadcrumb |

라이선스

Private & Proprietary — STN Design System