@stn-uiux/pub-ui-react 0.1.50 → 0.1.52

package/CHANGELOG.md

@@ -4,6 +4,60 @@ All notable changes to `@stn-uiux/pub-ui` and `@stn-uiux/pub-ui-react` will be d
 
 ---
 
+## [0.1.52] - 2026-09-21
+
+### ⚠️ Developer Action Required (개발자 조치 사항)
+1. **패키지 업데이트**:
+   ```bash
+   npm install @stn-uiux/pub-ui-react@0.1.52
+   ```
+
+### Added (추가)
+- **`StnSideNavigation.Item` 알림 아이콘 표준화**:
+  - 알림 메뉴 항목에 `icon={<StnIcon name="line/bell" size={20} />}` 기본 적용
+
+### Fixed (버그 수정)
+- `StnSideNavigation` 코드 생성기에서 알림 아이콘 누락 버그 해결
+- `ComponentsTableDoc` 내 `EquipmentRow` 타입 참조 누락 해결
+
+---
+
+## [0.1.51] - 2026-09-21
+
+### ⚠️ Developer Action Required (개발자 조치 사항)
+1. **패키지 업데이트**:
+   ```bash
+   npm install @stn-uiux/pub-ui-react@0.1.51
+   ```
+
+### Added (추가)
+- 공식 패키지 문서(README) 개편: 테마 설정(`StnProvider`) 및 카테고리별 주요 컴포넌트 일람 제공
+
+### Changed (변경 및 개선)
+- 내부 개발 메모 및 미완성 항목 섹션 정리로 문서 완성도 향상
+
+---
+
+## [0.1.50] - 2026-09-21
+
+### ⚠️ Developer Action Required (개발자 조치 사항)
+1. **패키지 업데이트**:
+   ```bash
+   npm install @stn-uiux/pub-ui-react@0.1.50
+   ```
+
+### Added (추가)
+- **StnTable 고급 인터랙션 기능 및 속성 추가**:
+  - `resizable`: 테이블 헤더 열 리사이징 기능
+  - `onColumnResize`: 열 너비 조절 콜백 `(name, newWidth) => void`
+  - `draggable`: 헤더 열 드래그 앤 드롭 이동 기능
+  - `onColumnReorder`: 열 순서 변경 콜백 `(sourceName, targetName, position) => void`
+  - `trackVisited`: 행 클릭 시 직전 방문 행을 자동 추적하여 `.is-visited` 스타일 부여
+  - `<StnTable.Row>` 상태 prop: `selected`, `visited`, `highlighted`, `rowId` 지원
+- **공식 NPM(npmjs.com) 전환 지원**: 공개 배포 규격 반영
+
+---
+
 ## [0.1.49] - 2026-09-18
 
 ### ⚠️ Developer Action Required (개발자 조치 사항)

package/README.md

@@ -1,75 +1,66 @@
 # @stn-uiux/pub-ui-react
 
-**얇은 React 레이어** — `props` → Pub HTML **클래스 문자열**만 조합합니다.  
-스타일·토큰·규칙은 **`@stn-uiux/pub-ui` CSS**가 담당합니다.
+STN Pub 디자인 시스템의 공식 **React 컴포넌트 라이브러리**입니다.  
+엄격한 디자인 토큰 규격과 시맨틱 CSS를 기반으로 최적화된 엔터프라이즈 UI 컴포넌트를 제공합니다.
 
-**전체 레이어 구조:** [docs/STN-Pub-아키텍처.md](../../docs/STN-Pub-아키텍처.md)
+- **버전별 변경 이력:** [CHANGELOG.md](./CHANGELOG.md)
+- **CSS 및 디자인 토큰 패키지:** `@stn-uiux/pub-ui`
 
-**버전별 변경:** [CHANGELOG.md](./CHANGELOG.md) (`@stn-uiux/pub-ui`와 동일 버전)
+---
 
-## 사용
+## 설치 (Install)
+
+```bash
+npm install @stn-uiux/pub-ui @stn-uiux/pub-ui-react
+```
+
+---
+
+## 빠른 시작 (Quick Start)
+
+### 1) 테마 프로바이더 및 스타일 설정
+
+애플리케이션 최상단(예: `App.tsx` 또는 `main.tsx`)에서 CSS를 import하고 `StnProvider`로 감싸줍니다:
 
 ```tsx
 import '@stn-uiux/pub-ui/styles.css'
-import {
-  StnProvider,
-  StnButton,
-  StnPagination,
-  StnPopup,
-  StnTable,
-} from '@stn-uiux/pub-ui-react'
+import { StnProvider, StnButton, StnTable } from '@stn-uiux/pub-ui-react'
 
 export function App() {
   return (
-    <StnProvider theme="light" applyThemeToDocument>
-      {/* routes */}
+    <StnProvider theme="dark" applyThemeToDocument>
+      <main>
+        <StnButton variant="primary" size="md">
+          실행
+        </StnButton>
+      </main>
     </StnProvider>
   )
 }
 ```
 
-| `StnProvider` | 설명 |
-|----------------|------|
-| `theme` | `'light'` \| `'dark'` — Pub `data-theme` |
-| `applyThemeToDocument` | `true`면 `document.documentElement`에 테마 (제품 앱). `false`면 자식 래퍼만 |
-| `useStn()` | 하위에서 현재 theme 읽기 (선택) |
-
-## 화면·컴포넌트 scaffold (`help`)
-
-```bash
-npx @stn-uiux/pub-ui-react help
-# 1. 컴포넌트 · 2. 패턴 · 3. 레이아웃 → 선택 → src/pages/*.tsx 생성
-```
-
-(`npx @stn-uiux/pub-ui help` 도 동일 — 엔진은 `@stn-uiux/pub-ui`)
-
-DS 레포: `npm run pub-ui-react:help`
-
-## 컴포넌트 (카탈로그 대응)
+### StnProvider Props
 
-| React | Pub / 스펙 | 비고 |
-|--------|------------|------|
-| `StnLayer` / `.Background`…`.Modal` | `stn-pub-elev-{0-4}` · Infomap roles | background→content→header→dim→modal · L1 widget만 shadow 기본 |
-| `StnButton` | `.stn-btn` (+ `--primary` · `--medium` · `--icon` · `__label` …) | 레이블 생략 + `icon` = icon-only · **aria-label 필수** |
-| `StnPagination` | `.stn-pub-pagination` | Infomap paging · `stn-pub-pagination.css` |
-| `StnPopup` | `.stn-pub-pop-stack` + `.layer_pop.stn-pub-pop` | portal → `StnLayer.Dim`/`Modal` · `open` / `onClose` |
-| `StnTable` | `.stn-table` 셸 | `stnPubTable` — `Grid`/`Head`/`Body`/`Row`/`Th`/`Td`/`ThCheck`/`TdCheck`/`Sort` |
-| `StnTree` | `.stn-pub-tree` | Infomap folder structure · `stnPubTree` — root/folder/server · guide lines |
-| `StnWidget` | `.ds-widget-item` · `none-bg` | `stnPubWidget` — `background` surface \| none · `kind` |
-| `StnSystemMonitorBadge` · `StnThemeToggle` | `.stn-pub-header-chip--monitor` · `.stn-pub-header-chip--theme` | `stnPubIndicator` |
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `theme` | `'light' \| 'dark'` | `'dark'` | 적용할 디자인 시스템 테마 모드 |
+| `applyThemeToDocument` | `boolean` | `false` | `true`일 경우 `<html>` 태그에 `data-theme` 속성을 자동 적용 |
+| `useStn()` | Hook | - | 하위 컴포넌트에서 현재 테마 상태를 조회하는 훅 |
 
-### 아직 React 래퍼 없음
 
-- **GNB** (`.stn-gnb`, 알림센터) — 마크업·상태가 커서 partial/별도 패키지 검토
-- 페이지 크기 select 등 일부 테이블 footer 컨트롤
+## 주요 컴포넌트 목록
 
-## 예시
+| 분류 | 컴포넌트 |
+|------|----------|
+| **버튼 & 선택** | `StnButton`, `StnToggleButton`, `StnSegmented` |
+| **폼 입력** | `StnTextField`, `StnDropdown`, `StnCheckbox`, `StnRadio`, `StnSwitch`, `StnSlider`, `StnDatePicker`, `StnDateRangeField` |
+| **데이터 & 상태** | `StnTable`, `StnPagination`, `StnTree`, `StnProgressBar`, `StnLoadingSkeleton` |
+| **배지 & 인디케이터** | `StnBadge`, `StnChip`, `StnSeverityBadge`, `StnSeverityFilter`, `StnSystemChip` |
+| **피드백 & 오버레이** | `StnPopup`, `StnToast`, `StnEventBanner` |
+| **레이아웃 & 네비게이션** | `StnWidget`, `StnLayer`, `StnSideNavigation`, `StnHeaderTitle`, `StnBreadcrumb` |
 
-DS 사이트 **Components → React 시작하기** (`/stn-design/components/react-example`) · **Patterns → Widget** (`/stn-design/pattern/widget`)에 라이브 예시가 있습니다.
+---
 
-## 새 컴포넌트 추가 절차
+## 라이선스
 
-1. `@stn-uiux/pub-ui`의 `stnPub*.ts` + Pub HTML에서 **클래스 규칙** 확인  
-2. `packages/stn-pub-ui-react/src/Stn*.tsx` — `forwardRef` + `cn()` 로 클래스 조합  
-3. `src/index.ts` export  
-4. DS **React 시작하기** 문서에 한 줄 예시
+Private & Proprietary — STN Design System

package/dist/index.d.ts

@@ -619,6 +619,9 @@ declare const StnTableSort: react.ForwardRefExoticComponent<ButtonHTMLAttributes
     /** 프레스 면 고정 — `.is-pressed` (문서·마우스 다운과 동일) */
     pressed?: boolean;
 } & react.RefAttributes<HTMLButtonElement>>;
+type StnTableRowActionsProps = HTMLAttributes<HTMLDivElement>;
+/** Row Actions — 행 호버 시 우측 끝에 나타나는 액션 버튼 그룹 컨테이너 */
+declare const StnTableRowActions: react.ForwardRefExoticComponent<StnTableRowActionsProps & react.RefAttributes<HTMLDivElement>>;
 type StnTableCompound = typeof StnTableBase & {
     Grid: typeof StnTableGrid;
     Head: typeof StnTableHead;
@@ -629,6 +632,7 @@ type StnTableCompound = typeof StnTableBase & {
     ThCheck: typeof StnTableThCheck;
     TdCheck: typeof StnTableTdCheck;
     Sort: typeof StnTableSort;
+    RowActions: typeof StnTableRowActions;
 };
 /**
  * Pub list table shell — Infomap Figma thead/tbody (node 40000042:209510).

package/dist/index.js

@@ -1491,6 +1491,9 @@ var StnTableSort = forwardRef9(function StnTableSort2({ label, sort = "none", pr
     }
   );
 });
+var StnTableRowActions = forwardRef9(function StnTableRowActions2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx14("div", { ref, className: cn("stn-table__row-actions", className), ...rest, children });
+});
 var StnTable = StnTableBase;
 StnTable.Grid = StnTableGrid;
 StnTable.Head = StnTableHead;
@@ -1501,6 +1504,7 @@ StnTable.Td = StnTableTd;
 StnTable.ThCheck = StnTableThCheck;
 StnTable.TdCheck = StnTableTdCheck;
 StnTable.Sort = StnTableSort;
+StnTable.RowActions = StnTableRowActions;
 
 // src/components/StnTree.tsx
 import {