sellmate-design-system-react 9.0.0-beta.104 → 9.0.0-beta.105

package/AGENTS.md

@@ -576,6 +576,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 부모-자식 계층을 들여쓰기로 보여준다 | `STree` | §3-7-7 — 폼 값으로 드롭다운에서 고르는 것이면 `SSelect` `type="tree"` |
 | 계층을 이루는 행들을 여러 열로 보여준다 (카테고리 > 상품 > 옵션) | `STreeTable` | §3-7-7 — 한 줄에 라벨 하나면 `STree` |
 | 표의 행마다 그 건의 상세를 펼쳐 보여준다 (한 행 = 한 건) | `STable` `renderExpansion` | §3-7-7 — 행끼리 계층이면 `STreeTable` |
+| 표의 같은 열 입력(수량·로트번호 등)을 키보드만으로 아래·위 행으로 넘기며 연속 입력한다 | `STable` 컬럼 `gridNav` | §3-4 — Enter 는 아래, Shift+Enter 는 위 |
 | 사용자가 순서를 드래그로 바꾸게 한다 | `SDraggableList` + `SDraggableItem` | §3-7-6 |
 | 날짜별 일정을 한 달치 격자로 펼쳐 보여준다 | `SCalendarBoard` | §3-7-4 |
 | 항목끼리 크기를 눈으로 견주게 한다 (채널별 매출·상품별 판매량) | `SBarChart` | 정확한 값을 읽어야 하면 `STable` — 그래프는 "어느 쪽이 큰가" 를 답하지 "얼마인가" 를 답하지 않는다 |
@@ -1133,6 +1134,24 @@ const columns: STableColumn[] = [
 ];
 ```
 
+#### 셀 안 입력을 Enter 로 아래 행으로 넘기기
+
+수량·로트번호처럼 **행마다 같은 열에 입력이 반복되는 표**에서 키보드만으로 연속 입력하려면 그 컬럼에 `gridNav` 를 준다. Tab 은 가로(같은 행의 다음 필드), `SNumberInput` 의 ↑↓ 는 값 증감이라 수직 이동 수단이 따로 필요하다.
+
+- **Enter 는 아래 행, Shift+Enter 는 위 행의 같은 열 입력으로 포커스를 옮긴다.** 직접 `onKeyDown` 이나 `data-*` 표식을 달지 않는다 — 한글 조합 중 Enter·열린 콤보박스·textarea 줄바꿈·비활성 행 처리가 `STable` 에 이미 들어 있다.
+- **`gridNav` 를 준 열의 입력만 Enter 를 가로챈다.** 주지 않은 열과 표 밖 필드의 Enter 는 그대로다 — `SForm` 안에서 Enter 로 제출된다. 이동을 켠 입력은 마지막 행에서도 제출되지 않는다.
+- **셀렉트·날짜 선택·체크박스, 그리고 자기 Enter 동작이 있는 입력(`SSearchInput` 처럼 Enter 로 검색·확정하는 것)의 열에는 주지 않는다.** Enter 가 이미 자기 뜻을 가진다.
+- **`gridNav` 를 준 열의 셀에는 입력이 하나여야 한다.** 한 셀에 입력이 둘이면(수량 + 단위 입력 등) 이동은 위·아래 행의 **첫 번째 입력**으로만 간다. 둘째 입력은 Enter 로 닿지 않으므로 Tab 으로 간다.
+- 이동 대상은 글자·숫자 입력(`SInput`·`SNumberInput`)뿐이다. 체크박스·라디오·비활성(`disabled`·`aria-disabled`)·읽기 전용 입력은 건너뛴다.
+- **화면에 그려진 행 사이만 이동한다.** `virtualScroll` 로 그려지지 않은 행으로는 넘어가지 않는다. 끝 행에서 Enter 를 눌러도 행이 추가되거나 다음 페이지로 넘어가지 않는다.
+- `renderCell` 로 `<td>` 를 직접 그리는 열에는 `gridNav` 가 적용되지 않는다. 그 열은 `render` 로 그린다.
+
+```tsx
+{ name: 'qty', label: '입고 수량', field: 'qty', width: 100, minWidth: 100, align: 'right',
+  contentType: 'control', gridNav: true,
+  render: (row: SRow) => <SNumberInput value={row.qty} onValueChange={v => setQty(row, v)} /> },
+```
+
 #### 정렬 가능한 컬럼
 
 **정렬 상태는 `STable` 이 갖지 않는다.** 컬럼에 `sortable: true` 를 주고, 페이지가 `sort` · `onSortChange` 로 상태를 들고 있는다.

package/dist/components/STable/STable.d.ts

@@ -132,6 +132,20 @@ interface STableColumnBase<TRow extends SRow = SRow> {
      * 임의의 `render` 결과라 컴포넌트가 알 수 없다. 그래서 열 단위로 받는다.
      */
     contentType?: 'text' | 'control';
+    /**
+     * 이 열의 입력(`SInput`·`SNumberInput`)에서 **Enter 로 아래 행, Shift+Enter 로 위 행**의 같은
+     * 입력으로 포커스를 옮긴다. 수량·로트번호처럼 행마다 같은 열에 입력이 반복되는 표에서 키보드만으로
+     * 연속 입력할 때 켠다. Tab 은 같은 행의 다음 필드로, ↑↓ 는 숫자 입력의 증감으로 그대로 남는다.
+     *
+     * - **이동을 켠 열의 입력만 Enter 를 가로챈다.** 그 열의 입력은 마지막 행에서도 폼을 제출하지 않고,
+     *   켜지 않은 열·표 밖 필드의 Enter 는 기존대로 제출된다.
+     * - **셀에는 입력이 하나여야 한다.** 둘이면 위·아래 행의 첫 번째 입력으로만 이동한다.
+     * - **셀렉트·날짜 선택·체크박스, 자기 Enter 동작이 있는 입력(`SSearchInput`)의 열에는 켜지 않는다.**
+     * - 비활성·읽기 전용 입력은 건너뛰고, 한글 조합 중 Enter 는 이동하지 않는다.
+     * - 화면에 그려진 행 사이만 이동한다 — `virtualScroll` 에서 그려지지 않은 행으로는 넘어가지 않는다.
+     * - `renderCell` 로 `<td>` 를 직접 그리는 열은 표식을 달 수 없어 대상이 아니다. `render` 를 쓴다.
+     */
+    gridNav?: boolean;
     /** 셀 커스텀 렌더 (React 확장) — `<td>` 안쪽 내용만 교체한다 */
     render?: (row: TRow, value: STableCellValue<TRow>) => ReactNode;
     /**