sellmate-design-system-react 9.0.0-beta.88 → 9.0.0-beta.89

package/dist/llms-full.txt

@@ -1968,7 +1968,9 @@ const [from, setFrom] = useState<string | null>(null);
 - **하위 행은 각 행의 `children` 에 같은 모양으로 넣는다.** 필드 이름이 다르면 `childrenKey` 로 알려 준다. 평평한 목록에 `parentId` 를 달아 넘기지 않는다 — 계층으로 바꿔서 넘긴다.
 - **펼침 버튼·들여쓰기는 컴포넌트가 그린다.** 기본은 보이는 첫 컬럼이고 `treeColumn` 으로 옮긴다. 그 컬럼은 왼쪽 정렬로 두고, 셀 내용은 `render`·`format` 으로 바꾼다 — `renderCell` 은 펼침 버튼을 넣을 자리가 없어 에러가 난다.
 - **셀 병합은 가로(`colSpan`)만 한다.** 트리 컬럼이 아닌 컬럼은 `renderCell` 로 `<td>` 를 바꿀 수 있고, 한 행 안에서 끝나는 `colSpan` 은 접고 펴도 그대로다. **`rowSpan` 으로 세로 병합하지 않는다** — 행이 접히면 사라진 행 몫까지 병합이 남아 아래 행의 칸을 덮고, 덮인 행의 칸은 옆 컬럼으로 밀려난다. 부모와 하위 행에 같은 값이 반복되면 부모 행에만 쓰고 하위 행은 비워 둔다.
-- **행 클릭은 펼침이 아니다.** 펼침 버튼만 펼치고 접는다. 행 클릭(`onRowClick`)은 상세 열기 같은 자기 일을 그대로 한다.
+- **펼침 영역은 트리 컬럼 셀 전체다.** 하위 행이 있는 행은 펼침 버튼뿐 아니라 그 셀 어디를 눌러도 접고 편다. 다른 셀을 누르면 행 클릭(`onRowClick`)이다 — 트리 컬럼 셀을 누른 것은 행 클릭으로 가지 않는다.
+- **펼침 모션은 컴포넌트가 넣는다.** 펼쳐서 새로 보이게 된 행이 위에서 내려오며 나타나고(접을 때는 바로 사라진다), 모션을 줄인 환경에서는 꺼진다. 행에 애니메이션 클래스를 직접 붙이지 않는다.
+- **트리 컬럼에 링크·버튼을 넣어도 된다.** 셀 안의 링크·버튼·입력을 누르면 그 동작만 일어나고 펼침은 일어나지 않는다 — `stopPropagation` 을 직접 넣지 않는다. 상품명을 상세 링크로 거는 것처럼 쓴다.
 - **선택은 계층을 따른다.** 부모를 고르면 접힌 하위 행까지 함께 골라지고, 일부만 골라진 부모는 "일부 선택"으로 그려진다. 하위 행이 모두 골라지면 부모도 `selected` 에 들어간다 — 처리 대상이 잎 행뿐이면 받은 목록에서 하위 행이 없는 행만 걸러 쓴다.
 - **가로로 스크롤되는 표는 트리 컬럼을 왼쪽에 고정한다**(`stickyColumn={{ left: 1 }}`, 트리 컬럼이 첫 컬럼일 때). 스크롤로 들여쓰기가 밀려나면 어느 행이 누구의 하위인지 읽히지 않는다. 체크박스 열은 `selectable` 이면 늘 고정되므로 개수에 넣지 않는다.
 - **컬럼 폭 조절(`resizable`)은 `STable` 과 달리 기본으로 켜져 있다.** 폭이 고정이어야 하는 표만 `resizable={false}` 로 끈다.
@@ -10938,7 +10940,7 @@ export type SRadioValue = string | number | boolean;
 | `value?` | `string \| number \| null` | — | 현재 선택 값 |
 | `size?` | `SRadioButtonSize` | `'sm'` | 크기 |
 | `disabled?` | `boolean` | `false` | 전체 비활성 |
-| `readOnly?` | `boolean` | `false` | 읽기 전용. 선택 값을 보여주기만 하고 바꿀 수 없다. 모든 버튼이 readOnly 배경, 선택된 버튼만 readOnly 테두리·기본 글자색으로 구분하고 선택되지 않은 버튼의 글자는 disabled 색이다. 포커스·툴팁은 유지된다. `disabled`(그룹·옵션)가 함께 오면 disabled 가 우선한다. |
+| `readOnly?` | `boolean` | `false` | 읽기 전용. 선택 값을 보여주기만 하고 바꿀 수 없다. 모든 버튼이 readOnly 배경, 선택된 버튼만 readOnly 테두리·기본 글자색으로 구분하고 선택되지 않은 버튼은 글자가 disabled 색이고 반투명하게 흐려진다. 포커스·툴팁은 유지된다. `disabled`(그룹·옵션)가 함께 오면 disabled 가 우선한다. |
 | `name?` | `string` | — | input name 속성 |
 | `showTooltip?` | `boolean` | `false` | 옵션 호버 시 툴팁 노출. 문구는 옵션별 `tooltip` 으로 주며, 문구가 없는 옵션은 툴팁을 띄우지 않는다. 툴팁 타입은 `accent` 고정이다. |
 | `className?` | `string` | — |  |
@@ -11827,6 +11829,7 @@ export interface SSystemActionButtonMenuOption {
 | `contextMenuItems?` | `STableContextMenuItem[]` | — | 드래그 선택에서 **행을 오른쪽 클릭했을 때** 커서 자리에 뜨는 메뉴의 항목. 주지 않거나 비면 메뉴가 뜨지 않고 브라우저 기본 메뉴가 나온다. **`dragSelectable` 에서만 동작한다** — 체크박스 모드에서는 무시된다. 고르지 않은 행에서 누르면 **그 행만 고른 뒤** 열린다. 메뉴가 다룰 대상과 화면에 칠해진 것이 어긋나지 않게 하기 위함이다. 잠긴 행(`isRowSelectable`) 위에서는 열리지 않는다 — 고를 수 없는 행을 대상으로 삼을 수 없기 때문이다. |
 | `isRowSelectable?` | `(row: TRow) => boolean` | — | 이 행을 고를 수 있는가. 주지 않으면 모든 행을 고를 수 있다. 고를 수 없는 행은 체크박스가 잠기고, **전체 선택·Shift 구간 선택의 셈에서도 빠진다** — 잠긴 행이 셈에 남으면 "전부 선택됨"에 닿지 못해 헤더 체크박스가 해제 방향으로 가지 못한다. 목록에서 지워 버리는 것과 다르다. 실패 0건인 차수처럼 **자리는 보여야 하지만 대상이 될 수는 없는 행**에 쓴다. 아예 대상이 아니라면 `rows` 에서 거르는 편이 낫다. 잠금은 그리기 시점의 판정일 뿐이라, 이미 `selected` 에 든 행이 나중에 잠겨도 DS 가 빼지 않는다(제어 상태를 말없이 바꾸지 않는다). 다만 헤더의 전체 해제로는 걷어낼 수 있다. |
 | `isRowIndeterminate?` | `(row: TRow) => boolean` | — | 이 행의 체크박스를 "일부 선택"(indeterminate)으로 그리는가. 주지 않으면 그리지 않는다. **표시만 바꾼다** — 선택 상태(`selected`)와 클릭 동작은 그대로다. 일부 선택된 행을 누르면 선택되지 않은 행을 누른 것과 같이 `selected` 에 더해진다. 선택된 행(`selected` 에 든 행)은 이 값과 무관하게 체크로 그린다. 하위 행을 가진 행처럼 **"아래가 일부만 골라졌다"를 행 스스로 말해야 하는 표**에 쓴다. 계층 선택을 통째로 맡기려면 `STreeTable` 을 쓴다 — 이 prop 은 그 표가 쓰는 통로다. |
+| `rowClassName?` | `(row: TRow) => string \| undefined` | — | 행(`<tr>`)에 더할 클래스. 행마다 다른 클래스를 줄 수 있다. 색·여백은 여기서 주지 않는다 — 셀이 배경을 칠하므로 행 배경은 보이지 않고, 여백은 토큰이 정한다. 행 전체에 걸리는 모션처럼 **셀 단위로는 줄 수 없는 것**만 쓴다. 셀 하나의 모양은 컬럼의 `tdClass` 다. |
 | `selected?` | `TRow[]` | `[]` |  |
 | `sort?` | `STableSort \| null` | `null` | 정렬 상태 (controlled). `null`·미지정이면 정렬 없음. 컴포넌트는 정렬 상태를 갖지 않는다 — 서버 정렬이면 이 값이 곧 조회 조건이고, 뒤로가기·새로고침·링크 공유로 복원돼야 하므로 진실은 URL·store 쪽에 있어야 한다. 행을 실제로 정렬하는 것도 소비 앱 몫이다 (`STable` 은 받은 순서대로 그린다). |
 | `resizable?` | `boolean` | `false` | 컬럼 너비 조절 |
@@ -12813,7 +12816,7 @@ export interface STreeItemRenderState {
 | `rows?` | `TRow[]` | `[]` | 최상위 행. 하위 행은 각 행의 `childrenKey` 필드에 같은 모양으로 넣는다. 펼친 행만 표에 그려진다. 나머지 prop(`columns` · `selectable` · `sort` · `stickyColumn` · `virtualScroll` …)은 `STable` 과 같다. `STable` 처럼 행을 직접 정렬하지 않고 받은 순서대로 그리므로, 정렬하려면 소비 앱이 **형제끼리** 정렬해 넘긴다. 그리는 행이 펼침에 따라 늘고 줄므로, 컬럼의 `renderCell` 로 **`rowSpan` 세로 병합을 하지 않는다** — 행이 접히면 사라진 행 몫까지 병합이 남아 아래 행의 칸을 덮는다. 한 행 안의 `colSpan` 은 된다. |
 | `childrenKey?` | `string` | `'children'` | 하위 행 배열이 든 필드 |
 | `resizable?` | `boolean` | `true` | 컬럼 폭 조절. **`STable` 과 달리 기본이 `true` 다** — 깊이에 따라 트리 컬럼이 필요로 하는 폭이 달라 화면마다 맞는 폭을 미리 정하기 어렵다. 폭이 고정이어야 하는 표만 `false` 로 끈다. 켜 두면 트리 컬럼에 `minWidth` 를 준다. 하한이 없으면 들여쓰기보다 좁게 줄어 깊은 행의 이름이 통째로 가려진다. |
-| `treeColumn?` | `string` | — | 펼침 버튼과 들여쓰기가 붙는 컬럼의 `name`. 주지 않으면 보이는 첫 컬럼이다. 이 컬럼에는 `renderCell` 을 쓰지 않는다 — `<td>` 를 통째로 바꾸면 펼침 버튼을 넣을 자리가 없다. 셀 내용은 `render` · `format` 으로 바꾼다. 들여쓰기가 왼쪽에서 쌓이므로 `align` 은 왼쪽으로 둔다. |
+| `treeColumn?` | `string` | — | 펼침 버튼과 들여쓰기가 붙는 컬럼의 `name`. 주지 않으면 보이는 첫 컬럼이다. 하위 행이 있는 행은 **이 셀 전체가 펼침 영역**이다 — 어디를 눌러도 접고 펴고, 행 클릭(`onRowClick`)으로는 가지 않는다. 셀 안에 넣은 링크·버튼·입력은 자기 동작만 하고 펼침은 일어나지 않는다. 이 컬럼에는 `renderCell` 을 쓰지 않는다 — `<td>` 를 통째로 바꾸면 펼침 버튼을 넣을 자리가 없다. 셀 내용은 `render` · `format` 으로 바꾼다. 들여쓰기가 왼쪽에서 쌓이므로 `align` 은 왼쪽으로 둔다. |
 | `expandedKeys?` | `STreeTableKey[]` | — | 펼친 행의 키 목록 (controlled) |
 | `defaultExpandedKeys?` | `STreeTableKey[]` | — | 비제어 펼침 초기값. 주지 않으면 하위 행이 있는 최상위 행이 펼쳐진 채로 시작한다 (`STree` 와 같다) |
 | `selected?` | `TRow[]` | `[]` | 고른 행 (controlled). 접혀서 보이지 않는 행도 들어 있을 수 있다. 선택은 계층을 따른다. 부모를 고르면 하위 행이 모두 함께 골라지고, 하위 행이 일부만 골라진 부모는 체크박스가 "일부 선택"으로 그려진다. 하위 행이 모두 골라지면 부모도 골라진 것으로 친다 — `onSelectedChange` 로 오는 목록에 부모가 들어간다. 고를 수 없는 행(`isRowSelectable`)과 그 아래는 함께 골라지지 않는다. |

package/dist/llms.txt

@@ -1969,7 +1969,9 @@ const [from, setFrom] = useState<string | null>(null);
 - **하위 행은 각 행의 `children` 에 같은 모양으로 넣는다.** 필드 이름이 다르면 `childrenKey` 로 알려 준다. 평평한 목록에 `parentId` 를 달아 넘기지 않는다 — 계층으로 바꿔서 넘긴다.
 - **펼침 버튼·들여쓰기는 컴포넌트가 그린다.** 기본은 보이는 첫 컬럼이고 `treeColumn` 으로 옮긴다. 그 컬럼은 왼쪽 정렬로 두고, 셀 내용은 `render`·`format` 으로 바꾼다 — `renderCell` 은 펼침 버튼을 넣을 자리가 없어 에러가 난다.
 - **셀 병합은 가로(`colSpan`)만 한다.** 트리 컬럼이 아닌 컬럼은 `renderCell` 로 `<td>` 를 바꿀 수 있고, 한 행 안에서 끝나는 `colSpan` 은 접고 펴도 그대로다. **`rowSpan` 으로 세로 병합하지 않는다** — 행이 접히면 사라진 행 몫까지 병합이 남아 아래 행의 칸을 덮고, 덮인 행의 칸은 옆 컬럼으로 밀려난다. 부모와 하위 행에 같은 값이 반복되면 부모 행에만 쓰고 하위 행은 비워 둔다.
-- **행 클릭은 펼침이 아니다.** 펼침 버튼만 펼치고 접는다. 행 클릭(`onRowClick`)은 상세 열기 같은 자기 일을 그대로 한다.
+- **펼침 영역은 트리 컬럼 셀 전체다.** 하위 행이 있는 행은 펼침 버튼뿐 아니라 그 셀 어디를 눌러도 접고 편다. 다른 셀을 누르면 행 클릭(`onRowClick`)이다 — 트리 컬럼 셀을 누른 것은 행 클릭으로 가지 않는다.
+- **펼침 모션은 컴포넌트가 넣는다.** 펼쳐서 새로 보이게 된 행이 위에서 내려오며 나타나고(접을 때는 바로 사라진다), 모션을 줄인 환경에서는 꺼진다. 행에 애니메이션 클래스를 직접 붙이지 않는다.
+- **트리 컬럼에 링크·버튼을 넣어도 된다.** 셀 안의 링크·버튼·입력을 누르면 그 동작만 일어나고 펼침은 일어나지 않는다 — `stopPropagation` 을 직접 넣지 않는다. 상품명을 상세 링크로 거는 것처럼 쓴다.
 - **선택은 계층을 따른다.** 부모를 고르면 접힌 하위 행까지 함께 골라지고, 일부만 골라진 부모는 "일부 선택"으로 그려진다. 하위 행이 모두 골라지면 부모도 `selected` 에 들어간다 — 처리 대상이 잎 행뿐이면 받은 목록에서 하위 행이 없는 행만 걸러 쓴다.
 - **가로로 스크롤되는 표는 트리 컬럼을 왼쪽에 고정한다**(`stickyColumn={{ left: 1 }}`, 트리 컬럼이 첫 컬럼일 때). 스크롤로 들여쓰기가 밀려나면 어느 행이 누구의 하위인지 읽히지 않는다. 체크박스 열은 `selectable` 이면 늘 고정되므로 개수에 넣지 않는다.
 - **컬럼 폭 조절(`resizable`)은 `STable` 과 달리 기본으로 켜져 있다.** 폭이 고정이어야 하는 표만 `resizable={false}` 로 끈다.

package/dist/styles.css

@@ -425,6 +425,7 @@
     --animate-floating-out-bottom: floating-out-bottom 0.15s ease-in forwards;
     --animate-floating-out-left: floating-out-left 0.15s ease-in forwards;
     --animate-floating-out-right: floating-out-right 0.15s ease-in forwards;
+    --animate-table-row-in: floating-in-bottom 0.15s ease-out;
     --animate-skeleton-wave: skeleton-wave 1.5s linear 0.5s infinite;
     --animate-skeleton-pulse: skeleton-pulse 1.5s ease-in-out 0.5s infinite;
     --animate-skeleton-fade: skeleton-fade 1.5s linear 0.5s infinite;
@@ -5762,6 +5763,11 @@
       scrollbar-color: var(--color-grey-45) var(--color-white);
     }
   }
+  .motion-safe\:animate-table-row-in {
+    @media (prefers-reduced-motion: no-preference) {
+      animation: var(--animate-table-row-in);
+    }
+  }
   .motion-reduce\:hidden {
     @media (prefers-reduced-motion: reduce) {
       display: none;

package/dist/theme.css

@@ -2470,6 +2470,12 @@
   --animate-floating-out-left: floating-out-left 0.15s ease-in forwards;
   --animate-floating-out-right: floating-out-right 0.15s ease-in forwards;
 
+  /* 표 행 펼침 (STreeTable) — 여러 행을 연달아 열고 닫는 반복 조작이라 툴팁(0.35s)·STree(0.2s)보다 짧게 둔다.
+     0.1s 아래로 내리면 움직임이 보이지 않아 깜빡임처럼 읽힌다.
+     모양은 아래로 열리는 floating 과 같다 (위에서 4px 내려오며 나타남) */
+  --animate-table-row-in: floating-in-bottom 0.15s ease-out;
+  /* 접을 때는 모션 없이 바로 뺀다. 사라지는 모션을 넣으면 그 동안 아래 행이 기다렸다 올라와 굼떠 보인다 */
+
   /* 스켈레톤 (Quasar QSkeleton 포팅). 속도는 SSkeleton 이 animation-duration 으로 덮어쓴다 */
   --animate-skeleton-wave: skeleton-wave 1.5s linear 0.5s infinite;
   --animate-skeleton-pulse: skeleton-pulse 1.5s ease-in-out 0.5s infinite;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "9.0.0-beta.88",
+  "version": "9.0.0-beta.89",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [