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

package/dist/llms-full.txt

@@ -1161,6 +1161,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>
@@ -1669,24 +1688,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. 폼 페이지 (등록/수정)
 
@@ -1902,7 +1925,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'` 를 **명시**했는가 (생략하면 좌측이 된다)
@@ -3337,6 +3360,7 @@ export type SDateRangePickerSize = SFieldSize;
 | 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
 
@@ -6261,12 +6285,11 @@ export const STEPPER_SIZES = ['sm', 'lg'] as const;
 | `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` | — |  |
@@ -6282,7 +6305,7 @@ export const STEPPER_SIZES = ['sm', 'lg'] as const;
 |-------|------|-------------|
 | `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/llms.txt

@@ -1162,6 +1162,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>
@@ -1670,24 +1689,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. 폼 페이지 (등록/수정)
 
@@ -1903,7 +1926,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/dist/styles.css

@@ -767,6 +767,9 @@
   .my-auto {
     margin-block: auto;
   }
+  .my-sd-8 {
+    margin-block: var(--spacing-sd-8);
+  }
   .-mt-8 {
     margin-top: calc(var(--spacing) * -8);
   }
@@ -803,6 +806,9 @@
   .mt-\[var\(--cmp-guide-contents-gap\)\] {
     margin-top: var(--cmp-guide-contents-gap);
   }
+  .mt-auto {
+    margin-top: auto;
+  }
   .mt-sd-2 {
     margin-top: var(--spacing-sd-2);
   }
@@ -839,6 +845,9 @@
   .mb-\[24px\] {
     margin-bottom: 24px;
   }
+  .mb-auto {
+    margin-bottom: auto;
+  }
   .mb-sd-8 {
     margin-bottom: var(--spacing-sd-8);
   }
@@ -1020,9 +1029,6 @@
   .h-\[var\(--cmp-datepicker-calendar-day-dot-size\)\] {
     height: var(--cmp-datepicker-calendar-day-dot-size);
   }
-  .h-\[var\(--cmp-datepicker-calendar-header-divider-height\)\] {
-    height: var(--cmp-datepicker-calendar-header-divider-height);
-  }
   .h-\[var\(--cmp-datepicker-calendar-range-height\)\] {
     height: var(--cmp-datepicker-calendar-range-height);
   }
@@ -1053,6 +1059,9 @@
   .h-\[var\(--sys-size-control-md-height\)\] {
     height: var(--sys-size-control-md-height);
   }
+  .h-\[var\(--x\)\] {
+    height: var(--x);
+  }
   .h-auto {
     height: auto;
   }
@@ -1071,6 +1080,9 @@
   .h-sd-8 {
     height: var(--spacing-sd-8);
   }
+  .h-sd-20 {
+    height: var(--spacing-sd-20);
+  }
   .h-sd-32 {
     height: var(--spacing-sd-32);
   }
@@ -4496,6 +4508,11 @@
       transition-property: none;
     }
   }
+  .md\:h-sd-20 {
+    @media (width >= 48rem) {
+      height: var(--spacing-sd-20);
+    }
+  }
   .md\:p-4 {
     @media (width >= 48rem) {
       padding: calc(var(--spacing) * 4);

package/eslint/index.mjs

@@ -13,6 +13,7 @@ import requireLocaleNumber from "./rules/require-locale-number.mjs";
 import componentGroupGap from "./rules/component-group-gap.mjs";
 import fieldWidthGrade from "./rules/field-width-grade.mjs";
 import tableColumnWidth from "./rules/table-column-width.mjs";
+import dividerVerticalHeight from "./rules/divider-vertical-height.mjs";
 
 const PLUGIN_NAME = "sellmate";
 
@@ -28,6 +29,7 @@ const plugin = {
     "component-group-gap": componentGroupGap,
     "field-width-grade": fieldWidthGrade,
     "table-column-width": tableColumnWidth,
+    "divider-vertical-height": dividerVerticalHeight,
   },
 };
 
@@ -52,6 +54,8 @@ const recommended = [
       [`${PLUGIN_NAME}/no-off-scale-spacing`]: "error",
       // 생 <button>/<table> 은 디자인 시스템을 통째로 우회하는 것 (스타일 자유와 무관)
       [`${PLUGIN_NAME}/no-raw-html-control`]: "error",
+      // 세로 SDivider 에 className 으로 높이를 주면 self-stretch 가 무효가 되어 선이 위로 솟는다
+      [`${PLUGIN_NAME}/divider-vertical-height`]: "error",
 
       // 아래는 디자인 컨벤션 — 권고만 한다
       [`${PLUGIN_NAME}/prefer-typo-preset`]: "warn",

package/eslint/rules/divider-vertical-height.mjs

@@ -0,0 +1,137 @@
+/**
+ * 세로 `SDivider` 의 높이를 `className="h-*"` 로 주면 정렬이 조용히 깨지는 것을 잡는다.
+ *
+ * 세로 분할선의 기본값은 `h-auto ... self-stretch` 라, 높이를 주지 않으면 부모 줄 높이를
+ * 그대로 채운다. 그런데 `align-self: stretch` 는 **교차축 크기가 auto 일 때만** 늘리므로
+ * className 으로 높이가 정해지는 순간 stretch 가 무효가 되고 flex-start 처럼 줄 맨 위에
+ * 붙는다. tailwind-merge 는 `h-auto` 만 교체하고 `self-stretch` 는 남기므로 경고도 없다.
+ *
+ * 높이와 정렬은 같이 정해져야 하는 값이라 컴포넌트가 함께 맡는다 — `height` prop 을 쓴다.
+ *
+ *   <SDivider vertical height={20} />          // 높이 + self-center
+ *   <SDivider vertical className="h-sd-20" />  // 위로 솟는다
+ *
+ * 정렬을 **직접 지정한 경우**(`self-center` `self-start` `my-auto` …)는 알고 쓰는 것으로
+ * 보고 잡지 않는다.
+ *
+ * AGENTS.md §3-6.
+ */
+import { collectClassTokens, stripVariants, stripModifiers } from "../lib/class-names.mjs";
+
+/** 높이를 정하는 유틸리티인가 — `h-auto` 만 예외(기본값과 같아 stretch 가 살아 있다) */
+function heightUtil(util) {
+  const m = /^h-(.+)$/.exec(util);
+  if (!m || m[1] === "auto") return null;
+  return m[1];
+}
+
+/** 교차축 정렬을 이미 직접 지정했는가 */
+function alignsSelf(util) {
+  return /^self-/.test(util) || util === "my-auto" || util === "mt-auto" || util === "mb-auto";
+}
+
+/**
+ * 높이 유틸리티 값을 `height` prop 값으로 옮긴다. 옮길 수 없으면 null (수정 제안 없음).
+ *   h-sd-20        → {20}
+ *   h-[20px]       → {20}
+ *   h-[var(--x)]   → "var(--x)"
+ */
+function toHeightProp(value) {
+  const scaled = /^sd-(\d+)$/.exec(value);
+  if (scaled) return `{${scaled[1]}}`;
+  const arbitrary = /^\[(.+)\]$/.exec(value);
+  if (!arbitrary) return null;
+  const inner = arbitrary[1].replace(/_/g, " ");
+  const px = /^(\d+(?:\.\d+)?)px$/.exec(inner);
+  if (px) return `{${px[1]}}`;
+  if (inner.includes('"')) return null;
+  return `"${inner}"`;
+}
+
+const isClassAttr = (a) =>
+  a.type === "JSXAttribute" && (a.name?.name === "className" || a.name?.name === "class");
+
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "세로 SDivider 의 높이는 className 이 아니라 height prop 으로 지정",
+    },
+    schema: [],
+    messages: {
+      useHeightProp:
+        "세로 SDivider 의 높이는 `height` prop 으로 주세요{{suggestion}} — `className` 으로 주면 `align-self: stretch` 가 무효가 되어 선이 줄 맨 위에 붙습니다. (AGENTS.md §3-6)",
+    },
+    fixable: "code",
+  },
+
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        if (node.name.type !== "JSXIdentifier" || node.name.name !== "SDivider") return;
+
+        const attrs = node.attributes;
+        const named = (n) => attrs.find((a) => a.type === "JSXAttribute" && a.name?.name === n);
+
+        // 세로 분할선만 대상. `vertical={expr}` 처럼 값이 정적이지 않으면 판단하지 않는다.
+        const vertical = named("vertical");
+        if (!vertical) return;
+        if (vertical.value !== null && vertical.value?.expression?.value !== true) return;
+
+        // 이미 height prop 을 쓰고 있으면 컴포넌트가 정렬까지 맡는다
+        if (named("height")) return;
+
+        const classAttr = attrs.find(isClassAttr);
+        if (!classAttr) return;
+
+        const tokens = collectClassTokens(classAttr);
+        let height = null;
+        for (const { token } of tokens) {
+          const util = stripModifiers(stripVariants(token));
+          if (alignsSelf(util)) return; // 정렬을 직접 정했다 — 의도한 것으로 본다
+          // variant 가 붙은 높이(`md:h-sd-20`)는 prop 으로 옮길 수 없어 판단에서 뺀다
+          if (height === null && token === util) height = heightUtil(util);
+        }
+        if (height === null) return;
+
+        const propValue = toHeightProp(height);
+
+        context.report({
+          node,
+          messageId: "useHeightProp",
+          data: { suggestion: propValue ? ` (\`height=${propValue}\`)` : "" },
+          fix(fixer) {
+            if (!propValue) return null;
+            // className 이 통짜 문자열일 때만 안전하게 손댄다 (cn()·템플릿 리터럴은 제외)
+            const raw =
+              classAttr.value?.type === "Literal"
+                ? classAttr.value
+                : classAttr.value?.type === "JSXExpressionContainer" &&
+                    classAttr.value.expression.type === "Literal"
+                  ? classAttr.value.expression
+                  : null;
+            if (!raw || typeof raw.value !== "string") return null;
+
+            const rest = raw.value
+              .split(/\s+/)
+              .filter(Boolean)
+              .filter((t) => t !== `h-${height}`);
+            if (rest.length === raw.value.split(/\s+/).filter(Boolean).length) return null;
+
+            const fixes = [fixer.insertTextAfter(vertical, ` height=${propValue}`)];
+            if (rest.length > 0) {
+              fixes.push(fixer.replaceText(raw, `"${rest.join(" ")}"`));
+            } else {
+              // 속성만 지우면 공백이 두 칸 남는다 — 앞 공백까지 함께 지운다
+              const src = context.sourceCode ?? context.getSourceCode();
+              const [start, end] = classAttr.range;
+              const from = /\s/.test(src.text[start - 1]) ? start - 1 : start;
+              fixes.push(fixer.removeRange([from, end]));
+            }
+            return fixes;
+          },
+        });
+      },
+    };
+  },
+};

package/package.json

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