sellmate-design-system-react 9.0.0-beta.21 → 9.0.0-beta.22

package/AGENTS.md

@@ -1153,6 +1153,25 @@ const columns: STableColumn[] = [
 
 `SSplitter` 의 구분선은 평소 자리만 잡고 칠해지지 않다가, 경계에 커서를 올리거나 포커스를 주면 그때 드러난다 — 조절 가능한 자리라는 신호다. **항상 보이는 선이 필요하면 `SDivider` 를 쓴다.** 선 색·두께·주변 여백은 토큰이 정하므로 직접 주지 않는다.
 
+**세로 구분선의 길이는 `height` prop 으로 준다 — `className` 의 `h-*` 로 주지 않는다.**
+
+```tsx
+// 줄 높이를 그대로 채운다 (기본)
+<div className="flex items-center gap-sd-8">
+  <span>총 주문 3건</span>
+  <SDivider vertical />
+  <span>총 품목 12건</span>
+</div>
+
+// 양옆 글자보다 짧은 선이 필요할 때만 길이를 정한다
+<SDivider vertical height={20} />
+
+// 하지 말 것 — 선이 줄 맨 위에 붙는다
+<SDivider vertical className="h-sd-20" />
+```
+
+길이를 주지 않으면 `align-self: stretch` 로 부모 줄 높이를 채우는데, `stretch` 는 높이가 `auto` 일 때만 늘린다. `className` 으로 높이를 정하면 `stretch` 가 조용히 무효가 되어 선이 위로 솟는다. `height` 는 길이와 교차축 가운데 정렬을 함께 적용하므로 이 함정이 없다 — 위·아래 정렬이 필요하면 `className="self-start"` 처럼 명시한다. (`sellmate/divider-vertical-height` 규칙이 잡는다.)
+
 ```tsx
 <SSplitter defaultValue={30} limits={[20, 60]}>
   <SSplitter.Before>내비게이션</SSplitter.Before>
@@ -1661,24 +1680,28 @@ export default function ProductListPage() {
 
 행 높이를 줄이는 것은 `dense` 다. 세로 여백만 줄고 좌우 패딩은 그대로라, 값이 잘리지 않으면서 한 화면에 들어가는 행 수가 늘어난다.
 
-**어느 쪽이 편한지는 화면이 아니라 사용자가 안다.** 그래서 목록 페이지는 밀도를 고정하지 말고 `useDensityToggle` 로 고를 수 있게 둔다 — 페이지네이션 바 우측(rows per page 셀렉트 왼쪽)에 `좁게 보기` · `넓게 보기` 링크가 붙는다.
+**어느 쪽이 편한지는 화면이 아니라 사용자가 안다.** 그래서 `dense` 는 밀도를 고정하는 스위치가 아니라 **시작 밀도이자 밀도 토글의 스위치**다 — 켜면 하단 바 우측(rows per page 셀렉트 왼쪽)에 `좁게 보기` · `넓게 보기` 링크가 붙는다. 켜고 끄는 별도 prop 은 없다.
 
 ```tsx
-// 사용자가 고른 밀도는 다음 방문에도 남는 것이 자연스럽다 — 저장은 페이지 몫이다
-const [dense, setDense] = useState(() => loadPref('list.dense', true));
+// 좁게 시작하고, 사용자가 바꾸는 밀도는 표가 알아서 들고 간다
+<STable dense useRowsPerPageSelect pagination={{ currentPage, lastPage }} />;
+
+// 사용자가 고른 밀도를 다음 방문에도 남기려는 화면만 받아서 저장한다.
+// 저장한 값은 시작 밀도로만 돌려준다 — 되돌려 넣지 않는다
+const [initialDense] = useState(() => loadPref('list.dense', true));
 
 <STable
-  dense={dense}
-  onDenseChange={next => { setDense(next); savePref('list.dense', next); }}
-  useDensityToggle
+  dense={initialDense}
+  onDenseChange={next => savePref('list.dense', next)}
   useRowsPerPageSelect
   pagination={{ currentPage, lastPage }}
 />;
 ```
 
-- **밀도는 `STable` 이 갖지 않는다.** `dense` 가 곧 현재 상태이고, `onDenseChange` 없이 `useDensityToggle` 만 켜면 눌러도 아무 일도 일어나지 않는다.
-- **토글은 페이지네이션이 있을 때만 나타난다** — 사는 곳이 그 바이기 때문이다. 페이지네이션 없는 표에서 밀도를 고르게 하려면 `STableBar` 쪽에 직접 둔다.
-- 라벨과 아이콘은 현재 상태가 아니라 **누르면 되는 상태**를 가리킨다. `dense` 면 `넓게 보기` 다.
+- **누른 뒤의 밀도는 `STable` 이 내부 상태로 들고 간다.** `onDenseChange` 없이도 토글은 동작한다. 저장이 필요한 화면만 받아서 저장하면 된다.
+- **`dense` 에 `onDenseChange` 값을 되돌려 넣지 않는다.** 토글을 붙일지는 이 prop 이 정하므로, 넓게 본 순간 `dense` 가 `false` 가 되면 토글이 사라져 다시 좁힐 길이 없다. prop 값을 바꿔 넘기는 것은 외부 버튼 등으로 밀도를 **되돌릴 때**만 쓴다 — 내부 밀도가 그 값으로 맞춰진다.
+- **`dense` 면 페이지네이션이 없어도 토글이 나온다** — 하단 바를 토글만 담아 그린다. `dense` 가 아니면 토글도 없다.
+- 라벨과 아이콘은 현재 상태가 아니라 **누르면 되는 상태**를 가리킨다. 좁게 보고 있으면 `넓게 보기` 다.
 
 ### 4-3. 폼 페이지 (등록/수정)
 
@@ -1894,7 +1917,7 @@ export default function ProductDetailPage() {
 - [ ] 필터·폼·상세 정보를 `SKeyValueTable` 로 만들었는가 (컨트롤을 `div` 로 나열하지 않았는가). 필터를 `SChipFilter` 로 했다면 §3-7-11 의 판정을 거쳤는가
 - [ ] 섹션 구분에 `SSectionHeaderCard` 를 썼는가 (직접 만든 카드가 아니라)
 - [ ] 목록의 주요 액션이 `STableBar` 의 `rightActions` 에 있는가 (페이지 제목 줄이 아니라)
-- [ ] 목록 페이지 표에 `useDensityToggle` 로 밀도를 고를 수 있게 뒀는가, `onDenseChange` 를 함께 줬는가 (§4-2 — 핸들러 없이 켜면 눌러도 아무 일도 없다)
+- [ ] 목록 페이지 표에 `dense` 로 밀도 토글을 띄웠는가, 그 값을 `onDenseChange` 결과로 되돌려 넣지는 않았는가 (§4-2 — 되돌려 넣으면 넓게 본 순간 토글이 사라진다)
 - [ ] 상태 표시에 `STag size="sm"` 을 썼는가
 - [ ] 테이블에서 양을 나타내는 컬럼(금액·수량·개수 등)이 전부 `align: 'right'` 인가
 - [ ] 번호·코드·전화번호·일자 컬럼에 `align: 'center'` 를 **명시**했는가 (생략하면 좌측이 된다)

package/README.md

@@ -178,17 +178,18 @@ export default [
 
 **`error` 는 "지키지 않으면 깨지는 것" 에만 씁니다.** 앱 화면을 Tailwind 로 자유롭게 만드는 것은 정상이고, 디자인 시스템이 그 자유까지 막지 않습니다. 나머지는 권고(`warn`)입니다.
 
-| 규칙                             | 기본      | 검출 대상                                                                                                                                                                                               |
-| -------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `sellmate/no-off-scale-spacing`  | **error** | 스케일 밖 디자인 시스템 간격 (`gap-sd-13`) — Tailwind v4 에서 **조용히 무시되어** 스타일이 사라진다                                                                                                     |
-| `sellmate/no-raw-html-control`   | **error** | 대응 컴포넌트가 있는 생 HTML (`<button>` `<input>` `<select>` `<textarea>` `<table>` `<form>` `<dialog>` `<hr>` `<details>` `<progress>`), `alert()`/`confirm()` — 디자인 시스템을 통째로 우회하는 경우 |
-| `sellmate/prefer-typo-preset`    | warn      | `text-14 font-bold` 같은 낱개 조합 → `typo-*` 프리셋                                                                                                                                                    |
-| `sellmate/component-group-gap`   | warn      | 같은 컴포넌트를 나열할 때의 그룹 간격 — 배열 방향에 따라 값이 다르다(체크박스 가로 24 / 세로 8)                                                                                                         |
-| `sellmate/table-numeric-align`   | warn      | 수량 컬럼(금액·수량 등)에 `align: 'right'` 누락 — **`--fix` 로 자동 교정**                                                                                                                              |
-| `sellmate/require-locale-number` | warn      | 수량 컬럼의 `toLocaleString()` 누락 — 세 자리 콤마                                                                                                                                                      |
-| `sellmate/field-width-grade`     | warn      | 필드 폭이 `maxLength`(스키마 상한)와 어긋남 — 등급 미지정 · 등급 밖 폭 · 상한 대비 과부족 · 등급 px 직접 지정(**`--fix` 로 등급 이름 치환**)                                                            |
-| `sellmate/table-column-width`    | warn      | 컬럼 폭 미지정(기본 120px 이 조용히 들어감) · px 아닌 폭(`%` `clamp()`) · 값을 그리는 열의 `autoWidth` 오용                                                                                             |
-| `sellmate/no-arbitrary-class`    | **off**   | 토큰이 있는 속성(색·타이포·간격·모서리)의 임의 값 — `text-[14px]`, `bg-[#eee]`. 앱 고유 화면에는 정당한 사용이 많아 기본값은 끕니다                                                                     |
+| 규칙                               | 기본      | 검출 대상                                                                                                                                                                                               |
+| ---------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `sellmate/no-off-scale-spacing`    | **error** | 스케일 밖 디자인 시스템 간격 (`gap-sd-13`) — Tailwind v4 에서 **조용히 무시되어** 스타일이 사라진다                                                                                                     |
+| `sellmate/no-raw-html-control`     | **error** | 대응 컴포넌트가 있는 생 HTML (`<button>` `<input>` `<select>` `<textarea>` `<table>` `<form>` `<dialog>` `<hr>` `<details>` `<progress>`), `alert()`/`confirm()` — 디자인 시스템을 통째로 우회하는 경우 |
+| `sellmate/divider-vertical-height` | **error** | 세로 `SDivider` 의 높이를 `className="h-*"` 로 준 경우 — `align-self: stretch` 가 무효가 되어 선이 줄 맨 위에 붙는다. `height` prop 으로 준다(**`--fix` 로 치환**)                                      |
+| `sellmate/prefer-typo-preset`      | warn      | `text-14 font-bold` 같은 낱개 조합 → `typo-*` 프리셋                                                                                                                                                    |
+| `sellmate/component-group-gap`     | warn      | 같은 컴포넌트를 나열할 때의 그룹 간격 — 배열 방향에 따라 값이 다르다(체크박스 가로 24 / 세로 8)                                                                                                         |
+| `sellmate/table-numeric-align`     | warn      | 수량 컬럼(금액·수량 등)에 `align: 'right'` 누락 — **`--fix` 로 자동 교정**                                                                                                                              |
+| `sellmate/require-locale-number`   | warn      | 수량 컬럼의 `toLocaleString()` 누락 — 세 자리 콤마                                                                                                                                                      |
+| `sellmate/field-width-grade`       | warn      | 필드 폭이 `maxLength`(스키마 상한)와 어긋남 — 등급 미지정 · 등급 밖 폭 · 상한 대비 과부족 · 등급 px 직접 지정(**`--fix` 로 등급 이름 치환**)                                                            |
+| `sellmate/table-column-width`      | warn      | 컬럼 폭 미지정(기본 120px 이 조용히 들어감) · px 아닌 폭(`%` `clamp()`) · 값을 그리는 열의 `autoWidth` 오용                                                                                             |
+| `sellmate/no-arbitrary-class`      | **off**   | 토큰이 있는 속성(색·타이포·간격·모서리)의 임의 값 — `text-[14px]`, `bg-[#eee]`. 앱 고유 화면에는 정당한 사용이 많아 기본값은 끕니다                                                                     |
 
 `className` 뿐 아니라 `cn()`/`clsx()` 인자, 템플릿 리터럴, 객체 키 안까지 검사합니다.
 
@@ -286,9 +287,9 @@ export default [
 한글은 전각이라 영숫자의 약 두 배를 먹으므로 **두 기준 사이에는 아무것도 보고하지 않습니다** —
 영숫자로 채워도 넘칠 때만 "좁다", 한글로 채워도 남을 때만 "넓다" 로 판정합니다.
 
-| 등급 | `SInput` (sm) | `SInput` (md) | `SNumberInput` (sm) | `SNumberInput` (sm, `useButton`) |
-| ---- | ------------- | ------------- | ------------------- | -------------------------------- |
-| `xs` | —             | —             | 영숫자 8            | 영숫자 2                         |
+| 등급 | `SInput` (sm)       | `SInput` (md)       | `SNumberInput` (sm) | `SNumberInput` (sm, `useButton`) |
+| ---- | ------------------- | ------------------- | ------------------- | -------------------------------- |
+| `xs` | —                   | —                   | 영숫자 8            | 영숫자 2                         |
 | `sm` | 영숫자 14 / 한글 7  | 영숫자 11 / 한글 6  | 영숫자 14           | 영숫자 8                         |
 | `md` | 영숫자 20 / 한글 11 | 영숫자 16 / 한글 9  | 영숫자 20           | 영숫자 14                        |
 | `lg` | 영숫자 32 / 한글 17 | 영숫자 26 / 한글 14 | 영숫자 32           | 영숫자 26                        |

package/dist/components/SDivider/README.md

@@ -9,6 +9,7 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `vertical?` | `boolean` | `false` | true면 수직 분할선, false면 수평 분할선 |
+| `height?` | `number \| string` | — | 수직 분할선의 길이. 숫자는 px, 문자열은 CSS 값(토큰 var 참조 등)으로 쓴다. 주지 않으면 `align-self: stretch` 로 부모 줄 높이를 그대로 채운다. 값을 주면 그 높이로 고정하고 교차축 가운데(`self-center`)에 맞춘다 — `align-self: stretch` 는 높이가 auto 일 때만 늘리므로, 높이를 정하는 순간 정렬을 함께 정해야 한다. 그래서 높이는 `className="h-*"` 가 아니라 이 prop 으로 준다. 수평 분할선에는 적용되지 않는다 (두께는 1px 로 고정). |
 
 ## Dependencies
 

package/dist/components/SDivider/SDivider.d.ts

@@ -2,6 +2,17 @@ import { type HTMLAttributes } from 'react';
 export interface SDividerProps extends HTMLAttributes<HTMLHRElement> {
     /** true면 수직 분할선, false면 수평 분할선 */
     vertical?: boolean;
+    /**
+     * 수직 분할선의 길이. 숫자는 px, 문자열은 CSS 값(토큰 var 참조 등)으로 쓴다.
+     *
+     * 주지 않으면 `align-self: stretch` 로 부모 줄 높이를 그대로 채운다. 값을 주면
+     * 그 높이로 고정하고 교차축 가운데(`self-center`)에 맞춘다 — `align-self: stretch`
+     * 는 높이가 auto 일 때만 늘리므로, 높이를 정하는 순간 정렬을 함께 정해야 한다.
+     * 그래서 높이는 `className="h-*"` 가 아니라 이 prop 으로 준다.
+     *
+     * 수평 분할선에는 적용되지 않는다 (두께는 1px 로 고정).
+     */
+    height?: number | string;
 }
 /** SDivider — sd-divider 포팅. 색상은 `--sys-color-divider-default`. */
 export declare const SDivider: import("react").ForwardRefExoticComponent<SDividerProps & import("react").RefAttributes<HTMLHRElement>>;

package/dist/components/STable/README.md

@@ -24,12 +24,11 @@
 | `noDataLabel?` | `string` | `'데이터가 없습니다.'` |  |
 | `noDataSlot?` | `ReactNode` | — | 데이터가 없을 때 body 영역 전체를 대체하는 슬롯. 지정하면 `noDataLabel` 대신 이 콘텐츠가 헤더 아래 영역을 채우며, 버튼 등 인터랙션도 동작한다. |
 | `isLoading?` | `boolean` | `false` |  |
-| `dense?` | `boolean` | `false` | 행 높이를 좁게 (세로 여백만 줄인다 — 좌우 패딩은 그대로) |
+| `dense?` | `boolean` | `false` | 행 높이를 좁게 (세로 여백만 줄인다 — 좌우 패딩은 그대로). **시작 밀도이자 밀도 토글의 스위치다.** 켜면 하단 바 우측에 `좁게 보기` · `넓게 보기` 토글이 붙는다 — 페이지네이션이 없으면 이 바를 토글만 담아 그린다. 누른 뒤의 밀도는 테이블이 내부 상태로 들고 가므로 `onDenseChange` 를 받지 않아도 토글은 동작하고, 넓게 본 뒤에도 토글은 그대로 남는다(붙일지는 이 prop 이 정한다). 이 prop 값이 바뀌면 내부 밀도도 그 값으로 맞춰진다. |
 | `noHover?` | `boolean` | `false` | true면 행에 마우스를 올려도 hover 배경(grey_05)을 표시하지 않는다 |
 | `pagination?` | `STablePagination` | — | 페이지네이션 (있으면 하단 표시) |
 | `useInternalPagination?` | `boolean` | `false` | 테이블 내부에서 페이지네이션을 직접 관리 (rows를 내부 슬라이싱) |
 | `useRowsPerPageSelect?` | `boolean` | `false` | 페이지당 행 수 셀렉트 표시 |
-| `useDensityToggle?` | `boolean` | `false` | 페이지네이션 바에 밀도 토글(`좁게 보기` · `넓게 보기`) 표시. **페이지네이션이 있을 때만 나타난다** — 토글이 사는 곳이 그 바이기 때문이다. `onDenseChange` 와 함께 준다. 밀도는 컴포넌트가 갖지 않으므로, 핸들러 없이 켜면 눌러도 아무 일도 일어나지 않는다. |
 | `rowsPerPageOption?` | `SSelectOption[]` | `DEFAULT_ROWS_PER_PAGE_OPTION` |  |
 | `useVirtualScroll?` | `boolean` | `false` | 가상 스크롤 |
 | `rowHeight?` | `number` | — |  |
@@ -45,7 +44,7 @@
 |-------|------|-------------|
 | `onSelectedChange` | `(rows: SRow[]) => void` |  |
 | `onSortChange` | `(sort: STableSort \| null) => void` | 정렬 헤더 클릭 (`asc → desc → 해제` 3단). 해제되면 `null` 이 온다. 다중 정렬은 1차 안에서 지원하지 않는다. |
-| `onDenseChange` | `(dense: boolean) => void` | 밀도 변경 (`useDensityToggle` 로 띄운 토글을 눌렀을 때). 컴포넌트는 밀도 상태를 갖지 않는다 — `dense` 가 곧 현재 상태이고, 그 진실은 페이지에 있다. 사용자가 고른 밀도를 다음 방문까지 기억해 두는 것(로컬 저장 등)도 페이지 몫이다. |
+| `onDenseChange` | `(dense: boolean) => void` | 밀도 변경 (하단 바의 밀도 토글을 눌렀을 때). 표시는 테이블이 알아서 바꾸므로 받지 않아도 되고, 사용자가 고른 밀도를 다음 방문까지 기억해 두려는(로컬 저장 등) 페이지만 받으면 된다. |
 | `onPageChange` | `(page: number) => void` |  |
 | `onRowsPerPageChange` | `(perPage: number) => void` |  |
 | `onVirtualUpdate` | `(range: { from: number; to: number }) => void` |  |

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

@@ -218,12 +218,20 @@ export interface STableProps {
      */
     noDataSlot?: ReactNode;
     isLoading?: boolean;
-    /** 행 높이를 좁게 (세로 여백만 줄인다 — 좌우 패딩은 그대로) */
+    /**
+     * 행 높이를 좁게 (세로 여백만 줄인다 — 좌우 패딩은 그대로).
+     *
+     * **시작 밀도이자 밀도 토글의 스위치다.** 켜면 하단 바 우측에 `좁게 보기` · `넓게 보기` 토글이
+     * 붙는다 — 페이지네이션이 없으면 이 바를 토글만 담아 그린다.
+     *
+     * 누른 뒤의 밀도는 테이블이 내부 상태로 들고 가므로 `onDenseChange` 를 받지 않아도 토글은
+     * 동작하고, 넓게 본 뒤에도 토글은 그대로 남는다(붙일지는 이 prop 이 정한다). 이 prop 값이
+     * 바뀌면 내부 밀도도 그 값으로 맞춰진다.
+     */
     dense?: boolean;
     /**
-     * 밀도 변경 (`useDensityToggle` 로 띄운 토글을 눌렀을 때). 컴포넌트는 밀도 상태를 갖지 않는다 —
-     * `dense` 가 곧 현재 상태이고, 그 진실은 페이지에 있다. 사용자가 고른 밀도를 다음 방문까지
-     * 기억해 두는 것(로컬 저장 등)도 페이지 몫이다.
+     * 밀도 변경 (하단 바의 밀도 토글을 눌렀을 때). 표시는 테이블이 알아서 바꾸므로 받지 않아도 되고,
+     * 사용자가 고른 밀도를 다음 방문까지 기억해 두려는(로컬 저장 등) 페이지만 받으면 된다.
      */
     onDenseChange?: (dense: boolean) => void;
     /** true면 행에 마우스를 올려도 hover 배경(grey_05)을 표시하지 않는다 */
@@ -235,14 +243,6 @@ export interface STableProps {
     useInternalPagination?: boolean;
     /** 페이지당 행 수 셀렉트 표시 */
     useRowsPerPageSelect?: boolean;
-    /**
-     * 페이지네이션 바에 밀도 토글(`좁게 보기` · `넓게 보기`) 표시.
-     *
-     * **페이지네이션이 있을 때만 나타난다** — 토글이 사는 곳이 그 바이기 때문이다.
-     * `onDenseChange` 와 함께 준다. 밀도는 컴포넌트가 갖지 않으므로, 핸들러 없이 켜면 눌러도
-     * 아무 일도 일어나지 않는다.
-     */
-    useDensityToggle?: boolean;
     rowsPerPageOption?: SSelectOption[];
     onRowsPerPageChange?: (perPage: number) => void;
     /** 가상 스크롤 */

package/dist/index.cjs

@@ -3972,7 +3972,8 @@ var SDraggableItemImpl = /* @__PURE__ */ react.forwardRef(function SDraggableIte
   ] });
 });
 var SDraggableItem2 = /* @__PURE__ */ withDisplayName(SDraggableItemImpl, "SDraggableItem");
-var SDivider = /* @__PURE__ */ react.forwardRef(function SDivider2({ vertical = false, className, style, ...rest }, ref) {
+var SDivider = /* @__PURE__ */ react.forwardRef(function SDivider2({ vertical = false, height, className, style, ...rest }, ref) {
+  const fixedHeight = vertical && height !== void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "hr",
     {
@@ -3980,10 +3981,14 @@ var SDivider = /* @__PURE__ */ react.forwardRef(function SDivider2({ vertical =
       "aria-orientation": vertical ? "vertical" : "horizontal",
       className: cn(
         "shrink-0 border-0",
-        vertical ? "inline-block h-auto w-px self-stretch" : "block h-px w-full",
+        vertical ? cn("inline-block w-px", fixedHeight ? "self-center" : "h-auto self-stretch") : "block h-px w-full",
         className
       ),
-      style: { backgroundColor: "var(--sys-color-divider-default, #E1E1E1)", ...style },
+      style: {
+        backgroundColor: "var(--sys-color-divider-default, #E1E1E1)",
+        ...fixedHeight ? { height: typeof height === "number" ? `${height}px` : height } : null,
+        ...style
+      },
       ...rest
     }
   );
@@ -11341,7 +11346,6 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
   onPageChange,
   useInternalPagination = false,
   useRowsPerPageSelect = false,
-  useDensityToggle = false,
   rowsPerPageOption = DEFAULT_ROWS_PER_PAGE_OPTION,
   onRowsPerPageChange,
   useVirtualScroll = false,
@@ -11357,10 +11361,18 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
 }, ref) {
   const autoId = react.useId();
   const resolvedTableId = tableId ?? autoId;
+  const [innerDense, setInnerDense] = react.useState(dense);
+  react.useEffect(() => {
+    setInnerDense(dense);
+  }, [dense]);
+  const changeDense = (next) => {
+    setInnerDense(next);
+    onDenseChange?.(next);
+  };
   const visibleCols = react.useMemo(() => columns.filter((c) => c.visible !== false), [columns]);
   const stickyLeft = stickyColumn?.left ?? 0;
   const stickyRight = stickyColumn?.right ?? 0;
-  const effectiveRowHeight = rowHeight ?? (dense ? DENSE_ROW_HEIGHT : DEFAULT_ROW_HEIGHT);
+  const effectiveRowHeight = rowHeight ?? (innerDense ? DENSE_ROW_HEIGHT : DEFAULT_ROW_HEIGHT);
   const colSignature = react.useMemo(
     () => visibleCols.map((c) => `${c.name}:${c.width ?? ""}:${c.autoWidth ? 1 : 0}`).join("|"),
     [visibleCols]
@@ -11590,9 +11602,9 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
     else onSelectedChange?.([...selected, row]);
   };
   const radiusClass = radius === "full" ? "rounded-none" : radius === "useTop" ? "rounded-b-[var(--cmp-table-radius)] rounded-t-none" : "rounded-[var(--cmp-table-radius)]";
-  const cellPadY = dense ? "var(--cmp-table-body-paddingY-dense)" : "var(--cmp-table-body-paddingY-default)";
+  const cellPadY = innerDense ? "var(--cmp-table-body-paddingY-dense)" : "var(--cmp-table-body-paddingY-default)";
   const cellPadXOf = (col) => col.contentType === "control" ? "var(--cmp-table-body-paddingX-default)" : "var(--cmp-table-body-paddingX-wide)";
-  const rowH = dense ? "var(--cmp-table-body-dense-height)" : "var(--cmp-table-body-default-height)";
+  const rowH = innerDense ? "var(--cmp-table-body-dense-height)" : "var(--cmp-table-body-default-height)";
   const totalColSpan = visibleCols.length + (selectable ? 1 : 0);
   const stickyInfo = (i) => {
     const isLeft = i < stickyLeft;
@@ -11944,10 +11956,11 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
             ]
           }
         ),
-        showPagination && // 원본 sd-table__pagination: 테이블 하단에 이어붙는 회색 바(높이 48px, margin-top:-1px로 테두리 겹침).
+        (showPagination || dense) && // 원본 sd-table__pagination: 테이블 하단에 이어붙는 회색 바(높이 48px, margin-top:-1px로 테두리 겹침).
         // SPagination은 전체 폭 기준 중앙, rows-per-page SSelect는 우측에 absolute 배치해 중앙 정렬을 유지한다.
         // 루트 높이가 확정된 경우(테이블이 남은 영역을 채우는 배치) 페이지네이션 바가
         // 눌리지 않도록 shrink-0으로 48px를 보장한다.
+        // 페이지네이션이 없어도 dense 면 이 바를 그린다 — 밀도 토글이 사는 곳이 여기다.
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -11957,22 +11970,20 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
               bordered && "-mt-px border border-solid border-[color:var(--cmp-table-border-color)]"
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SPagination, { currentPage: displayPage, lastPage, onPageChange: changePage }),
-              (useDensityToggle || useRowsPerPageSelect) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-[10px] top-1/2 flex -translate-y-1/2 items-center gap-[12px]", children: [
-                useDensityToggle && // 라벨·아이콘은 현재 밀도가 아니라 **누르면 되는 상태**를 가리킨다 (dense 면 "넓게 보기").
-                // row·rowDense 는 세로 막대라 90도 돌려 가로 행으로 쓴다.
-                /* @__PURE__ */ jsxRuntime.jsx(
+              showPagination && /* @__PURE__ */ jsxRuntime.jsx(SPagination, { currentPage: displayPage, lastPage, onPageChange: changePage }),
+              (dense || useRowsPerPageSelect) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-[10px] top-1/2 flex -translate-y-1/2 items-center gap-[12px]", children: [
+                dense && /* @__PURE__ */ jsxRuntime.jsx(
                   STextLink,
                   {
                     size: "sm",
-                    icon: dense ? "row" : "rowDense",
+                    icon: innerDense ? "row" : "rowDense",
                     iconRotate: 90,
                     iconColor: "var(--sys-color-fg-quaternary)",
-                    label: dense ? "\uB113\uAC8C \uBCF4\uAE30" : "\uC881\uAC8C \uBCF4\uAE30",
-                    onClick: () => onDenseChange?.(!dense)
+                    label: innerDense ? "\uB113\uAC8C \uBCF4\uAE30" : "\uC881\uAC8C \uBCF4\uAE30",
+                    onClick: () => changeDense(!innerDense)
                   }
                 ),
-                useDensityToggle && useRowsPerPageSelect && /* @__PURE__ */ jsxRuntime.jsx(SDivider, { vertical: true, className: "my-[6px]" }),
+                dense && useRowsPerPageSelect && /* @__PURE__ */ jsxRuntime.jsx(SDivider, { vertical: true, className: "my-[6px]" }),
                 useRowsPerPageSelect && /* @__PURE__ */ jsxRuntime.jsx(
                   SSelect2,
                   {
@@ -12035,7 +12046,7 @@ var STableBar = /* @__PURE__ */ react.forwardRef(function STableBar2({ total, se
             SDivider,
             {
               vertical: true,
-              className: "h-[var(--cmp-table-bar-divider-height)] self-center",
+              height: "var(--cmp-table-bar-divider-height)",
               style: { backgroundColor: "var(--cmp-table-border-color)" }
             }
           ),
@@ -12960,13 +12971,7 @@ function SCalendar({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SDivider,
-            {
-              vertical: true,
-              className: "h-[var(--cmp-datepicker-calendar-header-divider-height)] self-center"
-            }
-          ),
+          /* @__PURE__ */ jsxRuntime.jsx(SDivider, { vertical: true, height: "var(--cmp-datepicker-calendar-header-divider-height)" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-[var(--cmp-datepicker-calendar-gap)]", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               SGhostButton,