sellmate-design-system-react 9.0.0-beta.17 → 9.0.0-beta.18

package/AGENTS.md

@@ -865,6 +865,7 @@ const columns: STableColumn[] = [
 - **값과 헤더를 따로 계산해 큰 쪽을 쓴다.** `contentType: 'control'` 은 `<td>` 에만 적용되고 `<th>` 는 항상 텍스트 패딩이라, 짧은 컨트롤 + 긴 헤더 조합에서 헤더가 잘린다.
 - 값에 따라 폭이 달라지는 요소(`STag` 라벨, 라벨 있는 버튼)는 **가장 긴 값** 기준으로 잡는다. `판매중` 에 맞춰두면 `판매중지 요청` 에서 잘린다.
 - **정렬 가능한 헤더(`sortable`)는 아이콘 버튼 + 간격만큼 `+20px` 더 든다.** `helpText` 를 함께 달면 그만큼 또 더한다.
+- **`editable` · `navigable` 표식과 `required` 표시(`*`) 도 각각 폭을 먹는다.** 헤더에 붙는 것이 늘수록 **라벨이 먼저 잘리므로**, 붙인 열은 폭을 함께 넓힌다.
 - **계산값은 픽셀 단위까지 맞추면 어긋난다** — 서브픽셀 반올림 때문이다. 여유 8px 을 얹고 8 단위로 올림한다.
 - 좌우 패딩은 `STable` 이 토큰으로 넣으므로 직접 주지 않는다. 그만큼을 뺀 나머지가 요소 몫이라는 점만 계산에 넣는다.
 
@@ -973,6 +974,33 @@ const columns: STableColumn[] = [
 - 긴 문장을 넣는 자리가 아니다. 한 줄에 한 가지 사실만 담고, 그 이상은 페이지 상단 안내(`SCallout`)로 뺀다.
 - 아이콘도 폭을 먹는다 — 헤더 폭 계산에 넣는다.
 
+#### 헤더에 붙는 것들의 순서 · 열을 어떻게 다루는지 알리는 표식
+
+헤더 라벨 뒤에 붙는 것은 네 가지고, **순서는 `STable` 이 고정한다.** 소비 앱이 바꾸는 것이 아니다.
+
+```text
+라벨 [helpText ?] [editable] [navigable] [required *] [sortable 정렬버튼]
+```
+
+**`editable` 은 값을 직접 고칠 수 있는 열, `navigable` 은 눌러서 다른 화면으로 넘어가는 열에 준다.** 둘 다 **표식일 뿐 버튼이 아니다** — 아이콘·크기·색은 컴포넌트가 고정하고 클릭은 받지 않는다.
+
+```tsx
+const columns: STableColumn[] = [
+  { name: 'name', label: '상품명', field: 'name', width: 200,
+    navigable: true,
+    render: (row: SRow) => <STextLink label={row.name} onClick={() => goDetail(row.id)} /> },
+  { name: 'stock', label: '재고', field: 'stock', width: 160, contentType: 'control',
+    editable: true, required: true,
+    render: (row: SRow) => <SNumberInput value={row.stock} width="100%" /> },
+];
+```
+
+- **실제로 그렇게 동작하는 열에만 켠다.** 표식만 켜고 셀은 텍스트 그대로 두면, 고칠 수 있다고 해 놓고 고칠 방법이 없고 넘어갈 수 있다고 해 놓고 누를 것이 없다. `editable` 이면 셀에 입력 컨트롤이, `navigable` 이면 셀에 링크·클릭이 있어야 한다.
+- **표식으로 동작을 대신하지 않는다.** 고치는 UI 도 넘어가는 동작도 셀(`column.render`) 몫이다.
+- **`renderHeader` 로 헤더를 통째로 교체하면 표식도 `required` 도 그려지지 않는다** — 헤더 전체가 소비 앱 책임이 되므로 순서·크기·색을 손으로 맞추게 된다.
+
+**값을 반드시 채워야 하는 열에는 `column.required`** 를 준다 — 라벨 뒤에 `*` 가 붙는다. `SKeyValueTable` 의 `field.required` 와 같은 것이다. **읽기 전용 열에 붙이지 않는다** — 표시만 있고 채울 방법이 없어 사용자가 막힌다.
+
 ### 3-5. 버튼류
 
 | 상황 | 사용 |
@@ -1222,6 +1250,22 @@ const columns: STableColumn[] = [
 
 `SDateRangePicker` 가 한 등급씩 위인 것은 값이 `YYYY-MM-DD ~ YYYY-MM-DD` 로 두 배가 넘기 때문이다. 같은 이유로 `STimeRangePicker` 의 오전/오후 모드도 sm 에서 한 등급 위를 쓴다 — 그 모드의 최소 폭이 md 등급을 이미 넘어, 그대로 두면 하한이 상한을 넘어 상한이 무력해진다.
 
+`SDatePicker` 만 이 상한을 `maxWidth` 로 덮을 수 있다 — 등급을 주면 그 등급이 상한이 되고, `width="100%" maxWidth="100%"` 면 부모 폭을 그대로 채운다. **폭이 이미 좁게 정해진 자리(팝오버·좁은 카드)에서만 쓴다.** 폼·표 행에서는 쓰지 않는다 — 거기서 상한을 풀면 4~10글자짜리 값이 행 전체를 차지한다.
+
+##### 값을 지울 수 있게 하려면 `clearable`
+
+`SSelect` · `SDatePicker` · `SDateRangePicker` · `STimePicker` · `STimeRangePicker` 가 같은 규칙으로 갖는다. 값이 있을 때만 지우기 버튼이 나타나고, 누르면 **`onValueChange` 로 `null` 이 온다** (빈 문자열이 아니다). 받는 쪽 상태도 `null` 을 담을 수 있어야 한다.
+
+```tsx
+const [from, setFrom] = useState<string | null>(null);
+
+<SDatePicker label="시작일" clearable value={from} onValueChange={setFrom} />;
+```
+
+- **조회 조건(필터)에는 켠다.** 한 번 고른 날짜를 되돌릴 방법이 없으면 전체 조회로 돌아가려고 새로고침하게 된다.
+- **필수 입력 필드에는 켜지 않는다.** 지우면 다시 고르기 전까지 폼이 통과하지 못한다 — 지울 수 있어야 하는 값이면 애초에 필수가 아니다.
+- `disabled` 이면 지우기 버튼도 함께 사라진다. 끈 필드를 지울 수 있으면 안 되기 때문이다.
+
 #### 3-7-5. SField 를 직접 쓰는 경우
 
 **거의 없다.** `SInput`·`SNumberInput`·`STextarea`·`SSelect`·날짜/시간 피커는 이미 내부에서 `SField` 를 쓰고 있어서 `label`·`required`·에러 표시를 자기 prop 으로 받는다. 그 위에 `SField` 를 한 겹 더 감싸면 라벨이 두 번 나온다.
@@ -1584,6 +1628,29 @@ export default function ProductListPage() {
 }
 ```
 
+#### 한 화면에 더 많은 행을 — `dense` 와 밀도 토글
+
+행 높이를 줄이는 것은 `dense` 다. 세로 여백만 줄고 좌우 패딩은 그대로라, 값이 잘리지 않으면서 한 화면에 들어가는 행 수가 늘어난다.
+
+**어느 쪽이 편한지는 화면이 아니라 사용자가 안다.** 그래서 목록 페이지는 밀도를 고정하지 말고 `useDensityToggle` 로 고를 수 있게 둔다 — 페이지네이션 바 우측(rows per page 셀렉트 왼쪽)에 `좁게 보기` · `넓게 보기` 링크가 붙는다.
+
+```tsx
+// 사용자가 고른 밀도는 다음 방문에도 남는 것이 자연스럽다 — 저장은 페이지 몫이다
+const [dense, setDense] = useState(() => loadPref('list.dense', true));
+
+<STable
+  dense={dense}
+  onDenseChange={next => { setDense(next); savePref('list.dense', next); }}
+  useDensityToggle
+  useRowsPerPageSelect
+  pagination={{ currentPage, lastPage }}
+/>;
+```
+
+- **밀도는 `STable` 이 갖지 않는다.** `dense` 가 곧 현재 상태이고, `onDenseChange` 없이 `useDensityToggle` 만 켜면 눌러도 아무 일도 일어나지 않는다.
+- **토글은 페이지네이션이 있을 때만 나타난다** — 사는 곳이 그 바이기 때문이다. 페이지네이션 없는 표에서 밀도를 고르게 하려면 `STableBar` 쪽에 직접 둔다.
+- 라벨과 아이콘은 현재 상태가 아니라 **누르면 되는 상태**를 가리킨다. `dense` 면 `넓게 보기` 다.
+
 ### 4-3. 폼 페이지 (등록/수정)
 
 구조: **페이지 제목(`AppShell` 의 `header` prop) → `SForm` + `SKeyValueTable` → 하단 버튼**
@@ -1790,6 +1857,7 @@ export default function ProductDetailPage() {
 - [ ] 필터·폼·상세 정보를 `SKeyValueTable` 로 만들었는가 (컨트롤을 `div` 로 나열하지 않았는가). 필터를 `SChipFilter` 로 했다면 §3-7-11 의 판정을 거쳤는가
 - [ ] 섹션 구분에 `SSectionHeaderCard` 를 썼는가 (직접 만든 카드가 아니라)
 - [ ] 목록의 주요 액션이 `STableBar` 의 `rightActions` 에 있는가 (페이지 제목 줄이 아니라)
+- [ ] 목록 페이지 표에 `useDensityToggle` 로 밀도를 고를 수 있게 뒀는가, `onDenseChange` 를 함께 줬는가 (§4-2 — 핸들러 없이 켜면 눌러도 아무 일도 없다)
 - [ ] 상태 표시에 `STag size="sm"` 을 썼는가
 - [ ] 테이블에서 양을 나타내는 컬럼(금액·수량·개수 등)이 전부 `align: 'right'` 인가
 - [ ] 번호·코드·전화번호·일자 컬럼에 `align: 'center'` 를 **명시**했는가 (생략하면 좌측이 된다)
@@ -1797,9 +1865,11 @@ export default function ProductDetailPage() {
 - [ ] **모든 컬럼에 폭을 명시**했는가, px 로만 줬는가 (`%`·`clamp()` ❌), `autoWidth` 는 스페이서 열 하나뿐인가 (§3-4)
 - [ ] 컨트롤(`STag`·`SButton`·`SSelect`·`SInput` …)이 들어가는 컬럼이 `resizable` 이면 `minWidth` 도 줬는가 (§3-4 — 폭이 모자라면 요소가 잘려 못 쓴다)
 - [ ] 정렬 가능한 열에 `sortable` 을 줬는가 (`renderHeader` 로 직접 만들지 않았는가), 정렬 상태를 페이지가 들고 있는가 (§3-4)
+- [ ] `editable` · `navigable` 표식을 켠 열이 **셀에서도 실제로 그렇게 동작하는가** (입력 컨트롤 · 링크가 있는가), 표식을 붙인 열의 폭을 함께 넓혔는가 (§3-4)
 - [ ] 금액·수량 등 양을 나타내는 숫자에 빠짐없이 `toLocaleString()` 을 썼는가 (번호·코드는 제외)
 - [ ] 날짜를 `YYYY-MM-DD` 로 표기했는가 (`toLocaleDateString()` ❌, §1-4)
 - [ ] 필드 폭을 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`)으로 줬는가 — px 직접 지정 ❌ (§4-3)
+- [ ] 조회 조건으로 쓰는 셀렉트·날짜·시간 피커에 `clearable` 을 줬는가, 그 상태가 `null` 을 담을 수 있는가 (§3-7-4 — 필수 입력 필드에는 켜지 않는다)
 - [ ] `SKeyValueTable` 의 짧은 행에 `tdColSpan` 을 주어 전체 열 수를 채웠는가 (§4-3 — 안 채우면 그 구간의 행 구분선이 끊긴다)
 - [ ] 하단 버튼이 양끝 분리(`justify-between`)이고, 되돌리기가 왼쪽 끝 · 실행이 오른쪽 끝인가
 - [ ] 페이지에 `color="primary"` 채움 버튼이 **1개뿐**인가 (`danger` 채움도 1개, `SDropdownButton` 포함)

package/dist/components/SChipFilter/README.md

@@ -24,7 +24,7 @@
 |-------|------|-------------|
 | `onValueChange` | `(value: SChipFilterValueMap) => void` | 전체 값 변경 — 편집 중인 값이 바뀔 때마다(선택할 때마다) 호출된다. 실제 검색 실행은 onSearch를 쓴다 |
 | `onFilterChange` | `(detail: SChipFilterChangeDetail) => void` | 개별 필터 값 변경 |
-| `onSearch` | `(value: SChipFilterValueMap) => void` | 실제 검색을 실행할 시점 — 편집 팝오버의 "검색" 버튼을 누르거나 팝오버가 닫힐 때(바깥 클릭·Esc·다른 칩으로 전환 포함) 그 시점의 전체 값 맵과 함께 호출된다. 팝오버가 없는 필드(인라인 date 프리셋·custom, clearable ×, 검색 초기화)는 값이 바뀌는 즉시 호출된다. dirty 체크가 기본 적용되어 있어 — 마지막으로 실제 검색이 실행된 값 맵과 비교해 하나라도 달라진 게 없으면(예: 팝오버를 열었다 아무것도 안 바꾸고 닫는 경우) 호출되지 않는다. fields를 그룹으로 넘겼다면 rule을 만족하지 못한 그룹이 있는 동안엔 onSearch가 호출되지 않는다 — 해당 그룹의 경고 툴팁은 이 시점과 무관하게 값이 비어 있는 동안 항상 실시간으로 떠 있다(별도로 validate()를 호출할 필요 없음) |
+| `onSearch` | `(value: SChipFilterValueMap) => void` | 실제 검색을 실행할 시점 — 편집 팝오버의 "검색" 버튼을 누르거나 팝오버가 닫힐 때(바깥 클릭·Esc·다른 칩으로 전환 포함) 그 시점의 전체 값 맵과 함께 호출된다. 팝오버가 없는 필드(인라인 date 프리셋·custom, clearable ×, 검색 초기화)는 값이 바뀌는 즉시 호출된다. keyword 필터에서 Enter 로 키워드를 추가할 때도 그 즉시 호출된다 — 팝오버는 열린 채라 키워드를 이어서 더 넣을 수 있고, 넣을 때마다 조회가 갱신된다. dirty 체크가 기본 적용되어 있어 — 마지막으로 실제 검색이 실행된 값 맵과 비교해 하나라도 달라진 게 없으면(예: 팝오버를 열었다 아무것도 안 바꾸고 닫는 경우) 호출되지 않는다. fields를 그룹으로 넘겼다면 rule을 만족하지 못한 그룹이 있는 동안엔 onSearch가 호출되지 않는다 — 해당 그룹의 경고 툴팁은 이 시점과 무관하게 값이 비어 있는 동안 항상 실시간으로 떠 있다(별도로 validate()를 호출할 필요 없음) |
 | `onActiveKeysChange` | `(keys: string[]) => void` | 노출 필터 key 변경(칩 추가·제거) — 비제어 방식에서도 참고용으로 호출된다. activeKeys를 직접 제어할 때는 이 값을 그대로 activeKeys에 반영해야 한다 |
 | `onReset` | `() => void` | "검색 초기화" 클릭 — 모든 필드가 기본값(또는 null)으로 리셋된 뒤 호출된다 |
 | `onAddFilter` | `(key: string) => void` | "필터 추가" 목록에서 항목을 골랐을 때 — activeKeys를 직접 제어 중이면 이 콜백에서 (또는 onActiveKeysChange에서) key를 activeKeys에 추가해줘야 칩이 실제로 나타난다. activeKeys를 넘기지 않았다면(비제어) 별도 처리 없이도 컴포넌트가 알아서 칩을 노출한다 |
@@ -138,6 +138,11 @@ export interface SChipFilterKeywordField extends SChipFilterOptionsField {
   type: 'keyword';
   /** 입력 placeholder */
   placeholder?: string;
+  /** 입력 방식. 기본 'tag' — Enter 로 하나씩 추가한다.
+   *  'csv' 는 쉼표도 구분자로 인정해, 쉼표를 치거나 쉼표가 섞인 텍스트를 붙여넣으면 그 자리에서
+   *  여러 개로 쪼개져 목록에 쌓인다(엑셀에서 복사한 코드 목록을 한 번에 넣는 용도).
+   *  쌓이는 목록도 값 형태도 'tag' 와 같다 — 구분자만 늘어난다. */
+  input?: SChipFilterKeywordInput;
   /** 검색조건(포함/일치) 토글 표시 여부 */
   matchModes?: boolean;
   /** matchModes 활성 시 "미포함"까지 포함해 3개(포함/일치/미포함)로 노출할지.
@@ -180,6 +185,7 @@ export interface SChipFilterCustomField extends SChipFilterFieldBase {
   render?: (ctx: {
     value: SChipFilterValue;
     disabled?: boolean;
+    /** 속한 그룹이 rule을 위반하는 동안 true — 직접 그린 노드에도 경고 표시를 맞추라는 신호다 */
     warning?: boolean;
     onValueChange: (value: SChipFilterValue) => void;
   }) => ReactNode;
@@ -229,6 +235,13 @@ export interface SChipFilterOptionsField extends SChipFilterFieldBase {
 }
 ```
 
+### SChipFilterKeywordInput
+
+```ts
+/** keyword 필드의 입력 방식 — 무엇을 키워드 하나의 끝으로 볼지 */
+export type SChipFilterKeywordInput = 'tag' | 'csv';
+```
+
 ### SChipFilterPresetsField
 
 ```ts
@@ -264,8 +277,6 @@ export interface SChipFilterFieldBase {
    *  마운트(또는 "필터 추가"로 활성화) 시 이 값이 자동으로 채워진다. required인데 지정하지 않으면
    *  타입별 내장 기본값(single: 첫 번째 옵션, date: 오늘 날짜)을 대신 쓴다 */
   defaultValue?: SChipFilterValue;
-  /** 경고 테두리 표시. 바 전체를 잠그는 SChipFilterProps.disabled와 달리 이 필터에만 적용된다 */
-  warning?: boolean;
   /** 이 필터만 비활성. 바에 남아 있되 팝오버가 열리지 않고 clearable도 눌리지 않는다.
    *  바 전체를 잠그려면 SChipFilterProps.disabled를 쓴다 — 둘은 OR로 합쳐진다 */
   disabled?: boolean;

package/dist/components/SChipFilter/SChipFilter.d.ts

@@ -54,8 +54,6 @@ export interface SChipFilterFieldBase {
      *  마운트(또는 "필터 추가"로 활성화) 시 이 값이 자동으로 채워진다. required인데 지정하지 않으면
      *  타입별 내장 기본값(single: 첫 번째 옵션, date: 오늘 날짜)을 대신 쓴다 */
     defaultValue?: SChipFilterValue;
-    /** 경고 테두리 표시. 바 전체를 잠그는 SChipFilterProps.disabled와 달리 이 필터에만 적용된다 */
-    warning?: boolean;
     /** 이 필터만 비활성. 바에 남아 있되 팝오버가 열리지 않고 clearable도 눌리지 않는다.
      *  바 전체를 잠그려면 SChipFilterProps.disabled를 쓴다 — 둘은 OR로 합쳐진다 */
     disabled?: boolean;
@@ -83,11 +81,18 @@ export interface SChipFilterSingleField extends SChipFilterOptionsField {
 export interface SChipFilterMultiField extends SChipFilterOptionsField {
     type: 'multi';
 }
+/** keyword 필드의 입력 방식 — 무엇을 키워드 하나의 끝으로 볼지 */
+export type SChipFilterKeywordInput = 'tag' | 'csv';
 /** 키워드를 입력해 누적한다. options는 입력 중 후보로만 뜬다 */
 export interface SChipFilterKeywordField extends SChipFilterOptionsField {
     type: 'keyword';
     /** 입력 placeholder */
     placeholder?: string;
+    /** 입력 방식. 기본 'tag' — Enter 로 하나씩 추가한다.
+     *  'csv' 는 쉼표도 구분자로 인정해, 쉼표를 치거나 쉼표가 섞인 텍스트를 붙여넣으면 그 자리에서
+     *  여러 개로 쪼개져 목록에 쌓인다(엑셀에서 복사한 코드 목록을 한 번에 넣는 용도).
+     *  쌓이는 목록도 값 형태도 'tag' 와 같다 — 구분자만 늘어난다. */
+    input?: SChipFilterKeywordInput;
     /** 검색조건(포함/일치) 토글 표시 여부 */
     matchModes?: boolean;
     /** matchModes 활성 시 "미포함"까지 포함해 3개(포함/일치/미포함)로 노출할지.
@@ -115,6 +120,7 @@ export interface SChipFilterCustomField extends SChipFilterFieldBase {
     render?: (ctx: {
         value: SChipFilterValue;
         disabled?: boolean;
+        /** 속한 그룹이 rule을 위반하는 동안 true — 직접 그린 노드에도 경고 표시를 맞추라는 신호다 */
         warning?: boolean;
         onValueChange: (value: SChipFilterValue) => void;
     }) => ReactNode;
@@ -173,7 +179,8 @@ export interface SChipFilterProps {
     onFilterChange?: (detail: SChipFilterChangeDetail) => void;
     /** 실제 검색을 실행할 시점 — 편집 팝오버의 "검색" 버튼을 누르거나 팝오버가 닫힐 때(바깥 클릭·Esc·다른
      *  칩으로 전환 포함) 그 시점의 전체 값 맵과 함께 호출된다. 팝오버가 없는 필드(인라인 date 프리셋·custom,
-     *  clearable ×, 검색 초기화)는 값이 바뀌는 즉시 호출된다. dirty 체크가 기본 적용되어 있어 — 마지막으로
+     *  clearable ×, 검색 초기화)는 값이 바뀌는 즉시 호출된다. keyword 필터에서 Enter 로 키워드를 추가할 때도
+     *  그 즉시 호출된다 — 팝오버는 열린 채라 키워드를 이어서 더 넣을 수 있고, 넣을 때마다 조회가 갱신된다. dirty 체크가 기본 적용되어 있어 — 마지막으로
      *  실제 검색이 실행된 값 맵과 비교해 하나라도 달라진 게 없으면(예: 팝오버를 열었다 아무것도 안 바꾸고
      *  닫는 경우) 호출되지 않는다. fields를 그룹으로 넘겼다면 rule을 만족하지 못한 그룹이 있는 동안엔
      *  onSearch가 호출되지 않는다 — 해당 그룹의 경고 툴팁은 이 시점과 무관하게 값이 비어 있는 동안 항상

package/dist/components/SChipFilter/index.d.ts

@@ -1 +1 @@
-export { SChipFilter, type SChipFilterChangeDetail, type SChipFilterCustomField, type SChipFilterDateField, type SChipFilterDatePreset, type SChipFilterField, type SChipFilterFieldBase, type SChipFilterGroup, type SChipFilterGroupRule, type SChipFilterHandle, type SChipFilterKeywordField, type SChipFilterKeywordValue, type SChipFilterMatchMode, type SChipFilterMultiField, type SChipFilterOption, type SChipFilterOptionValue, type SChipFilterOptionsField, type SChipFilterPeriodField, type SChipFilterPresetsField, type SChipFilterProps, type SChipFilterSingleField, type SChipFilterType, type SChipFilterValue, type SChipFilterValueMap, } from './SChipFilter';
+export { SChipFilter, type SChipFilterChangeDetail, type SChipFilterCustomField, type SChipFilterDateField, type SChipFilterDatePreset, type SChipFilterField, type SChipFilterFieldBase, type SChipFilterGroup, type SChipFilterGroupRule, type SChipFilterHandle, type SChipFilterKeywordField, type SChipFilterKeywordInput, type SChipFilterKeywordValue, type SChipFilterMatchMode, type SChipFilterMultiField, type SChipFilterOption, type SChipFilterOptionValue, type SChipFilterOptionsField, type SChipFilterPeriodField, type SChipFilterPresetsField, type SChipFilterProps, type SChipFilterSingleField, type SChipFilterType, type SChipFilterValue, type SChipFilterValueMap, } from './SChipFilter';

package/dist/components/SDatePicker/README.md

@@ -33,7 +33,9 @@
 | `placeholder?` | `string` | — |  |
 | `selectable?` | `[string, string]` | — | 선택 가능 범위 [시작, 종료] |
 | `disabled?` | `boolean` | `false` |  |
+| `clearable?` | `boolean` | `false` | 선택값 지우기 버튼. 값이 있을 때만 나타나고, 누르면 `onValueChange` 로 `null` 이 온다. **필수 입력 필드에는 켜지 않는다** — 지우면 다시 고르기 전까지 폼이 통과하지 못한다. `STimePicker` · `STimeRangePicker` · `SSelect` 의 `clearable` 과 같은 규칙이다. |
 | `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. |
+| `maxWidth?` | `SFieldWidth` | — | 컨트롤 최대 너비 — 폭 등급 · 숫자=px · CSS 길이. 지정하지 않으면 값 길이(`YYYY-MM-DD`)에 맞춘 내장 상한(`size='md'` → `lg`, `'sm'` → `md`)이 걸려, `width="100%"` 를 받아도 행 전체로 늘어나지 않는다. 팝오버처럼 폭이 이미 좁게 정해진 자리에서 그 폭을 그대로 채워야 하면 `width="100%"` 와 함께 `maxWidth="100%"` 를 준다. `0` 은 상한을 아예 걸지 않는다 — 부모보다 넓어지는 것까지 허용해야 할 때만 쓴다. |
 | `name?` | `string` | — |  |
 | `rules?` | `Rule[]` | — |  |
 | `status?` | `SFieldStatus` | — |  |
@@ -55,7 +57,7 @@
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onValueChange` | `(value: string) => void` | 선택 변경 (sdUpdate) |
+| `onValueChange` | `(value: string \| null) => void` | 선택 변경 (sdUpdate). `clearable` 로 지우면 `null` 이 온다 |
 | `onViewChange` | `(view: { year: number; month: number }) => void` | 보이는 연·월 변경 (sdViewChange) |
 
 ### SDatePickerYearListbox
@@ -101,6 +103,7 @@ export type SDatePickerSize = SFieldSize;
 
 - [SCalendar](../SCalendar)
 - [SField](../SField)
+- [SGhostButton](../SGhostButton)
 - [SIcon](../SIcon)
 
 ### Graph
@@ -109,6 +112,7 @@ export type SDatePickerSize = SFieldSize;
 graph TD;
   SDatePicker --> SCalendar
   SDatePicker --> SField
+  SDatePicker --> SGhostButton
   SDatePicker --> SIcon
   SChipFilter --> SDatePicker
   SKeyValueTable --> SDatePicker

package/dist/components/SDatePicker/SDatePicker.d.ts

@@ -10,8 +10,8 @@ export type SDatePickerMode = 'date' | 'month' | 'year';
 export interface SDatePickerProps {
     /** 선택 값 (date: YYYY-MM-DD, month: YYYY-MM, year: YYYY) */
     value?: string | null;
-    /** 선택 변경 (sdUpdate) */
-    onValueChange?: (value: string) => void;
+    /** 선택 변경 (sdUpdate). `clearable` 로 지우면 `null` 이 온다 */
+    onValueChange?: (value: string | null) => void;
     /** 보이는 연·월 변경 (sdViewChange) */
     onViewChange?: (view: {
         year: number;
@@ -24,12 +24,29 @@ export interface SDatePickerProps {
     /** 선택 가능 범위 [시작, 종료] */
     selectable?: [string, string];
     disabled?: boolean;
+    /**
+     * 선택값 지우기 버튼. 값이 있을 때만 나타나고, 누르면 `onValueChange` 로 `null` 이 온다.
+     *
+     * **필수 입력 필드에는 켜지 않는다** — 지우면 다시 고르기 전까지 폼이 통과하지 못한다.
+     * `STimePicker` · `STimeRangePicker` · `SSelect` 의 `clearable` 과 같은 규칙이다.
+     */
+    clearable?: boolean;
     /**
      * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
      * 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다.
      * 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다.
      */
     width?: SFieldWidth;
+    /**
+     * 컨트롤 최대 너비 — 폭 등급 · 숫자=px · CSS 길이. 지정하지 않으면 값 길이(`YYYY-MM-DD`)에 맞춘
+     * 내장 상한(`size='md'` → `lg`, `'sm'` → `md`)이 걸려, `width="100%"` 를 받아도 행 전체로
+     * 늘어나지 않는다.
+     *
+     * 팝오버처럼 폭이 이미 좁게 정해진 자리에서 그 폭을 그대로 채워야 하면 `width="100%"` 와 함께
+     * `maxWidth="100%"` 를 준다. `0` 은 상한을 아예 걸지 않는다 — 부모보다 넓어지는 것까지 허용해야
+     * 할 때만 쓴다.
+     */
+    maxWidth?: SFieldWidth;
     name?: string;
     rules?: Rule[];
     status?: SFieldStatus;
@@ -78,4 +95,4 @@ export interface SDatePickerMonthListboxProps {
  * 자체 트리거/팝오버 없이 연도+월 리스트만 필요한 커스텀 조합에 재사용한다. */
 export declare function SDatePickerMonthListbox({ value, anchorYear, selectable, onValueChange, onMonthSelect, className, style, }: SDatePickerMonthListboxProps): import("react").JSX.Element;
 /** SDatePicker — sd-date-picker 포팅. SField + SPopover(SCalendar). */
-export declare function SDatePicker({ value, onValueChange, onViewChange, mode, size, placeholder, selectable, disabled, width, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDatePickerProps): import("react").JSX.Element;
+export declare function SDatePicker({ value, onValueChange, onViewChange, mode, size, placeholder, selectable, disabled, clearable, width, maxWidth, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDatePickerProps): import("react").JSX.Element;

package/dist/components/SDateRangePicker/README.md

@@ -15,6 +15,7 @@
 | `maxRange?` | `number` | — | 최대 선택 일수 |
 | `useTimePicker?` | `boolean` | `false` | 시간(시:분) 선택 푸터 사용 여부. true이면 value는 "YYYY-MM-DD HH:mm" 형식이 되고, 캘린더 하단에 시작·종료 시간 입력이 표시된다. |
 | `disabled?` | `boolean` | `false` |  |
+| `clearable?` | `boolean` | `false` | 선택값 지우기 버튼. 값이 있을 때만 나타나고, 누르면 `onValueChange` 로 `null` 이 온다. **필수 입력 필드에는 켜지 않는다** — 지우면 다시 고르기 전까지 폼이 통과하지 못한다. `SDatePicker` · `STimePicker` · `SSelect` 의 `clearable` 과 같은 규칙이다. |
 | `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. |
 | `name?` | `string` | — |  |
 | `rules?` | `Rule[]` | — |  |
@@ -37,7 +38,7 @@
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onValueChange` | `(range: SDateRangeValue) => void` | 선택 변경 (sdUpdate) — [start, end] |
+| `onValueChange` | `(range: SDateRangeValue) => void` | 선택 변경 (sdUpdate) — [start, end]. `clearable` 로 지우면 `null` 이 온다 |
 | `onViewChange` | `(view: { year: number; month: number }) => void` | 보이는 연·월 변경 (sdViewChange) |
 
 ### SRangeCalendar

package/dist/components/SDateRangePicker/SDateRangePicker.d.ts

@@ -9,7 +9,7 @@ export type SDateRangeValue = [string, string] | null;
 export type SDateRangePickerSize = SFieldSize;
 export interface SDateRangePickerProps {
     value?: SDateRangeValue;
-    /** 선택 변경 (sdUpdate) — [start, end] */
+    /** 선택 변경 (sdUpdate) — [start, end]. `clearable` 로 지우면 `null` 이 온다 */
     onValueChange?: (range: SDateRangeValue) => void;
     /** 보이는 연·월 변경 (sdViewChange) */
     onViewChange?: (view: {
@@ -27,6 +27,13 @@ export interface SDateRangePickerProps {
      */
     useTimePicker?: boolean;
     disabled?: boolean;
+    /**
+     * 선택값 지우기 버튼. 값이 있을 때만 나타나고, 누르면 `onValueChange` 로 `null` 이 온다.
+     *
+     * **필수 입력 필드에는 켜지 않는다** — 지우면 다시 고르기 전까지 폼이 통과하지 못한다.
+     * `SDatePicker` · `STimePicker` · `SSelect` 의 `clearable` 과 같은 규칙이다.
+     */
+    clearable?: boolean;
     /**
      * 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이.
      * 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다.
@@ -67,4 +74,4 @@ export interface SRangeCalendarProps {
  *  캘린더 그리드만 필요한 커스텀 조합(예: 다른 트리거에 팝오버로 얹는 경우)에 재사용한다. */
 export declare function RangeCalendar({ value, selectable, maxRange, useTimePicker, onSelect, onPendingStartChange, onViewChange, }: SRangeCalendarProps): import("react").JSX.Element;
 /** SDateRangePicker — sd-date-range-picker 포팅. SField + SPopover(범위 캘린더). */
-export declare function SDateRangePicker({ value, onValueChange, onViewChange, size, placeholder, selectable, maxRange, useTimePicker, disabled, width, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDateRangePickerProps): import("react").JSX.Element;
+export declare function SDateRangePicker({ value, onValueChange, onViewChange, size, placeholder, selectable, maxRange, useTimePicker, disabled, clearable, width, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDateRangePickerProps): import("react").JSX.Element;

package/dist/components/SDivider/README.md

@@ -17,6 +17,7 @@
  - [SCalendar](../SCalendar)
  - [SDateRangePicker](../SDateRangePicker)
  - [SList](../SList)
+ - [STable](../STable)
  - [STableBar](../STableBar)
 
 ### Graph
@@ -26,6 +27,7 @@ graph TD;
   SCalendar --> SDivider
   SDateRangePicker --> SDivider
   SList --> SDivider
+  STable --> SDivider
   STableBar --> SDivider
   style SDivider fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SGhostButton/README.md

@@ -49,6 +49,7 @@ export type SGhostButtonIntent = 'default' | 'danger' | 'action' | 'subAction' |
  - [SCalendar](../SCalendar)
  - [SChip](../SChip)
  - [SChipFilter](../SChipFilter)
+ - [SDatePicker](../SDatePicker)
  - [SDateRangePicker](../SDateRangePicker)
  - [SFilePicker](../SFilePicker)
  - [SGnb](../SGnb)
@@ -81,6 +82,7 @@ graph TD;
   SCalendar --> SGhostButton
   SChip --> SGhostButton
   SChipFilter --> SGhostButton
+  SDatePicker --> SGhostButton
   SDateRangePicker --> SGhostButton
   SFilePicker --> SGhostButton
   SGnb --> SGhostButton

package/dist/components/SIcon/SIcon.d.ts

@@ -17,6 +17,6 @@ export interface SIconProps {
 }
 /**
  * SIcon — sd-icon 포팅.
- * 94개 SVG(icons.gen.tsx)를 currentColor 기반으로 렌더한다.
+ * icons.gen.tsx 의 SVG 를 currentColor 기반으로 렌더한다.
  */
 export declare const SIcon: import("react").ForwardRefExoticComponent<SIconProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/SIcon/icons.gen.d.ts

@@ -39,6 +39,7 @@ export declare const ICONS: {
     readonly clockFill: (p: IconRenderProps) => import("react").JSX.Element;
     readonly clockOutline: (p: IconRenderProps) => import("react").JSX.Element;
     readonly close: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly company: (p: IconRenderProps) => import("react").JSX.Element;
     readonly copy: (p: IconRenderProps) => import("react").JSX.Element;
     readonly coupon: (p: IconRenderProps) => import("react").JSX.Element;
     readonly dashboard: (p: IconRenderProps) => import("react").JSX.Element;
@@ -76,6 +77,7 @@ export declare const ICONS: {
     readonly reset: (p: IconRenderProps) => import("react").JSX.Element;
     readonly robot: (p: IconRenderProps) => import("react").JSX.Element;
     readonly row: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly rowDense: (p: IconRenderProps) => import("react").JSX.Element;
     readonly save: (p: IconRenderProps) => import("react").JSX.Element;
     readonly search: (p: IconRenderProps) => import("react").JSX.Element;
     readonly send: (p: IconRenderProps) => import("react").JSX.Element;

package/dist/components/STable/README.md

@@ -24,11 +24,12 @@
 | `noDataLabel?` | `string` | `'데이터가 없습니다.'` |  |
 | `noDataSlot?` | `ReactNode` | — | 데이터가 없을 때 body 영역 전체를 대체하는 슬롯. 지정하면 `noDataLabel` 대신 이 콘텐츠가 헤더 아래 영역을 채우며, 버튼 등 인터랙션도 동작한다. |
 | `isLoading?` | `boolean` | `false` |  |
-| `dense?` | `boolean` | `false` |  |
+| `dense?` | `boolean` | `false` | 행 높이를 좁게 (세로 여백만 줄인다 — 좌우 패딩은 그대로) |
 | `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` | — |  |
@@ -44,6 +45,7 @@
 |-------|------|-------------|
 | `onSelectedChange` | `(rows: SRow[]) => void` |  |
 | `onSortChange` | `(sort: STableSort \| null) => void` | 정렬 헤더 클릭 (`asc → desc → 해제` 3단). 해제되면 `null` 이 온다. 다중 정렬은 1차 안에서 지원하지 않는다. |
+| `onDenseChange` | `(dense: boolean) => void` | 밀도 변경 (`useDensityToggle` 로 띄운 토글을 눌렀을 때). 컴포넌트는 밀도 상태를 갖지 않는다 — `dense` 가 곧 현재 상태이고, 그 진실은 페이지에 있다. 사용자가 고른 밀도를 다음 방문까지 기억해 두는 것(로컬 저장 등)도 페이지 몫이다. |
 | `onPageChange` | `(page: number) => void` |  |
 | `onRowsPerPageChange` | `(perPage: number) => void` |  |
 | `onVirtualUpdate` | `(range: { from: number; to: number }) => void` |  |
@@ -126,10 +128,12 @@ export type STableColumnField = string | ((row: SRow) => any);
 
 - [SCheckbox](../SCheckbox)
 - [SCircleProgress](../SCircleProgress)
+- [SDivider](../SDivider)
 - [SGhostButton](../SGhostButton)
 - [SIcon](../SIcon)
 - [SPagination](../SPagination)
 - [SSelect](../SSelect)
+- [STextLink](../STextLink)
 - [STooltip](../STooltip)
 
 ### Graph
@@ -138,10 +142,12 @@ export type STableColumnField = string | ((row: SRow) => any);
 graph TD;
   STable --> SCheckbox
   STable --> SCircleProgress
+  STable --> SDivider
   STable --> SGhostButton
   STable --> SIcon
   STable --> SPagination
   STable --> SSelect
+  STable --> STextLink
   STable --> STooltip
   style STable fill:#f9f,stroke:#333,stroke-width:4px
 ```

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

@@ -1,6 +1,4 @@
 import { type CSSProperties, type ReactNode } from 'react';
-import { type SColor } from '../../lib/color';
-import { type SIconName } from '../SIcon';
 import { type SSelectOption } from '../SSelect';
 export type SRow = Record<string, any>;
 /** `STableColumn.renderCell`에 전달되는 컨텍스트 */
@@ -53,9 +51,6 @@ interface STableColumnBase {
     /** 표시 포맷 */
     format?: (value: any, row: SRow) => string;
     visible?: boolean;
-    icon?: SIconName;
-    /** 헤더 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상 */
-    iconColor?: SColor;
     /**
      * 헤더 라벨 뒤 도움말 툴팁 (각 항목이 한 줄). `SKeyValueTable` 의 `field.helpText` 와 같은 역할 —
      * 라벨만으로 뜻이 통하지 않는 컬럼의 산출 기준·단위를 설명한다.
@@ -63,6 +58,30 @@ interface STableColumnBase {
      * `renderHeader` 로 헤더를 통째로 교체하면 그리지 않는다 (헤더 전체가 소비 앱 책임).
      */
     helpText?: string[];
+    /**
+     * 라벨 뒤 필수 표시(`*`). `SKeyValueTable` 의 `field.required` 와 같은 규칙 —
+     * 그 열의 값을 반드시 채워야 하는 입력 열에만 쓴다.
+     *
+     * `renderHeader` 로 헤더를 통째로 교체하면 그리지 않는다 (헤더 전체가 소비 앱 책임).
+     */
+    required?: boolean;
+    /**
+     * 셀 값을 직접 고칠 수 있는 열. 라벨 뒤에 `pageEdit` 표식이 붙는다.
+     *
+     * **표식일 뿐 버튼이 아니다** — 실제로 고치는 UI 는 셀(`render`)이 그린다. 표식만 켜 두면
+     * 고칠 수 있다고 해 놓고 고칠 방법이 없는 열이 된다.
+     *
+     * `renderHeader` 로 헤더를 통째로 교체하면 그리지 않는다 (헤더 전체가 소비 앱 책임).
+     */
+    editable?: boolean;
+    /**
+     * 셀을 눌러 다른 화면으로 넘어가는 열. 라벨 뒤에 `pageMove` 표식이 붙는다.
+     *
+     * **표식일 뿐 버튼이 아니다** — 넘어가는 것은 셀(`render`)의 링크·클릭이 한다.
+     *
+     * `renderHeader` 로 헤더를 통째로 교체하면 그리지 않는다 (헤더 전체가 소비 앱 책임).
+     */
+    navigable?: boolean;
     /**
      * 정렬 가능한 열인지. 켜면 헤더 라벨 뒤에 정렬 버튼이 붙는다 — 누르는 곳은 그 버튼뿐이고
      * 헤더 셀 전체가 클릭 영역이 되지는 않는다.
@@ -199,7 +218,14 @@ export interface STableProps {
      */
     noDataSlot?: ReactNode;
     isLoading?: boolean;
+    /** 행 높이를 좁게 (세로 여백만 줄인다 — 좌우 패딩은 그대로) */
     dense?: boolean;
+    /**
+     * 밀도 변경 (`useDensityToggle` 로 띄운 토글을 눌렀을 때). 컴포넌트는 밀도 상태를 갖지 않는다 —
+     * `dense` 가 곧 현재 상태이고, 그 진실은 페이지에 있다. 사용자가 고른 밀도를 다음 방문까지
+     * 기억해 두는 것(로컬 저장 등)도 페이지 몫이다.
+     */
+    onDenseChange?: (dense: boolean) => void;
     /** true면 행에 마우스를 올려도 hover 배경(grey_05)을 표시하지 않는다 */
     noHover?: boolean;
     /** 페이지네이션 (있으면 하단 표시) */
@@ -209,6 +235,14 @@ export interface STableProps {
     useInternalPagination?: boolean;
     /** 페이지당 행 수 셀렉트 표시 */
     useRowsPerPageSelect?: boolean;
+    /**
+     * 페이지네이션 바에 밀도 토글(`좁게 보기` · `넓게 보기`) 표시.
+     *
+     * **페이지네이션이 있을 때만 나타난다** — 토글이 사는 곳이 그 바이기 때문이다.
+     * `onDenseChange` 와 함께 준다. 밀도는 컴포넌트가 갖지 않으므로, 핸들러 없이 켜면 눌러도
+     * 아무 일도 일어나지 않는다.
+     */
+    useDensityToggle?: boolean;
     rowsPerPageOption?: SSelectOption[];
     onRowsPerPageChange?: (perPage: number) => void;
     /** 가상 스크롤 */

package/dist/components/STextLink/README.md

@@ -11,6 +11,7 @@
 | `label?` | `string` | `''` | 레이블 |
 | `icon?` | `SIconName` | — | 좌측 아이콘 |
 | `iconColor?` | `SColor` | — | 좌측 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상 |
+| `iconRotate?` | `0 \| 90 \| 180 \| 270` | — | 좌측 아이콘 회전 각도. 같은 아이콘을 방향만 바꿔 쓸 때 (`SIcon` 의 `rotate` 로 그대로 간다) |
 | `labelClass?` | `string` | — | 레이블 span에 추가할 클래스 |
 | `rightArrow?` | `STextLinkArrow` | `'none'` | 우측 화살표 |
 | `underline?` | `boolean` | `false` | 밑줄 여부 |
@@ -45,6 +46,7 @@ export type STextLinkSize = 'sm' | 'md' | 'lg';
  - [SChipFilter](../SChipFilter)
  - [SChipInput](../SChipInput)
  - [SPopover](../SPopover)
+ - [STable](../STable)
 
 ### Depends on
 
@@ -60,5 +62,6 @@ graph TD;
   SChipFilter --> STextLink
   SChipInput --> STextLink
   SPopover --> STextLink
+  STable --> STextLink
   style STextLink fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/STextLink/STextLink.d.ts

@@ -10,6 +10,8 @@ export interface STextLinkProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'o
     icon?: SIconName;
     /** 좌측 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상 */
     iconColor?: SColor;
+    /** 좌측 아이콘 회전 각도. 같은 아이콘을 방향만 바꿔 쓸 때 (`SIcon` 의 `rotate` 로 그대로 간다) */
+    iconRotate?: 0 | 90 | 180 | 270;
     /** 레이블 span에 추가할 클래스 */
     labelClass?: string;
     /** 우측 화살표 */