sellmate-design-system-react 9.0.0-beta.40 → 9.0.0-beta.41

package/dist/llms-full.txt

@@ -720,8 +720,8 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 
 - 작은 창이 아니라 **화면 하나가 통째로** 들어간다 — 검색 필터·테이블·페이지네이션이 그대로 있는 목록(`엑셀 파일 관리`), 헤더 카드·탭이 있는 상세(`이동 오더 상세`).
 - 상세를 팝업으로 여는 이유는 **목록을 떠나지 않고 여러 건을 번갈아 보기** 위해서다. 단 상세가 **항상** 팝업인 것은 아니고, 데이터 양이 많을 때 팝업을 쓴다.
-- 구조는 헤더(제목 중앙) + 본문이고 **푸터는 기본으로 없다**. 조회만 하는 팝업은 그대로 두고, **확정할 작업이 있을 때만 `useFooter` 로 푸터를 켜서 `submitButton` 에 `저장`** 을 둔다.
-- **본문 패딩은 `SPopup` 이 토큰으로 넣는다. 직접 주지 않는다** (`p-sd-*` 로 덮어쓰면 토큰이 바뀌어도 안 따라간다). 표를 가장자리까지 채우는 등 콘텐츠가 여백을 직접 다뤄야 할 때만 `noPadding` 으로 끈다.
+- 구조는 헤더(제목 중앙) + 본문이고 **푸터는 기본으로 없다**. 조회만 하는 팝업은 그대로 두고, **확정할 작업이 있을 때만 `showFooter` 로 푸터를 켜서 `submitButton` 에 `저장`** 을 둔다.
+- **본문 패딩은 `SPopup` 이 토큰으로 넣는다. 직접 주지 않는다** (`p-sd-*` 로 덮어쓰면 토큰이 바뀌어도 안 따라간다). 표를 가장자리까지 채우는 등 콘텐츠가 여백을 직접 다뤄야 할 때만 `padding="none"` 으로 끈다.
 - 그 밖에는 팝업 안도 일반 페이지와 같은 규칙(§4)을 따른다: 블록 간격 `gap-sd-12`, 표는 `SKeyValueTable` / `STable`.
 
 ```tsx
@@ -1303,7 +1303,7 @@ const columns: STableColumn[] = [
 - 모델은 항상 **첫 패널**(`SSplitter.Before`) 크기다. 사이드가 기준인 화면이면 사이드를 `Before` 에 둔다.
 - 앱 셸의 GNB 폭은 `SGnb` 가 소유한다. `SLayout`/`SGnb` 를 `SSplitter` 로 감싸지 않는다 — **GNB 폭을 끌 수 있게 하려면 `SGnb` 에 `resizable` 을 준다**(§4-1).
 
-**Quasar `q-splitter` 에서 옮겨올 때** — `unit` · `limits` · `emitImmediately` 는 이름과 뜻이 같고, 나머지는 아래처럼 바뀐다. `emitImmediately` 를 주지 않으면 **드래그를 놓는 순간 한 번만** `onValueChange` 가 온다.
+**Quasar `q-splitter` 에서 옮겨올 때** — `unit` · `limits` · `updateWhileDragging` 는 이름과 뜻이 같고, 나머지는 아래처럼 바뀐다. `updateWhileDragging` 를 주지 않으면 **드래그를 놓는 순간 한 번만** `onValueChange` 가 온다.
 
 | q-splitter | SSplitter |
 | --- | --- |
@@ -1458,12 +1458,12 @@ const [from, setFrom] = useState<string | null>(null);
 - **항목 하나의 속성을 나열하는 것은 목록이 아니다.** `라벨: 값` 이 세로로 쌓이는 것은 `SKeyValueTable` 이다 (§4-4).
 - `SList` 는 레이아웃만 담당한다. depth 별 단일 펼침이 필요하면 `SExpansionList` 다 (§3-7-7).
 - **`SList` 의 자식은 `SListItem` 을 권장한다.** 다른 자식도 그대로 렌더되지만, 펼치는 항목은 `SExpansionList` + `SExpansionItem` 이, 끌어서 순서를 바꾸는 항목은 `SDraggableList` + `SDraggableItem` 이 여닫힘·정렬 동작까지 함께 관리하므로 그쪽을 쓴다 (§3-7-7).
-- **항목 사이 구분선은 리스트가 알아서 그린다.** `SListItem`·`SExpansionItem`·`SDraggableItem` 셋 다 스스로 구분선을 그리지 않는다. `SList`·`SExpansionList`·`SDraggableList` 가 자식 **사이에** 구분선을 넣으므로 아이템에 `border-b` 를 직접 붙이지 않고, 켜는 prop 도 따로 없다. 마지막 항목 아래에는 선이 남지 않는다. 테두리형(`bordered`)은 테두리가 구분 역할을 하므로 리스트가 구분선을 빼고, `useGap` 으로 띄운다 — `useGap` 을 준 목록에도 구분선은 들어가지 않는다.
+- **항목 사이 구분선은 리스트가 알아서 그린다.** `SListItem`·`SExpansionItem`·`SDraggableItem` 셋 다 스스로 구분선을 그리지 않는다. `SList`·`SExpansionList`·`SDraggableList` 가 자식 **사이에** 구분선을 넣으므로 아이템에 `border-b` 를 직접 붙이지 않고, 켜는 prop 도 따로 없다. 마지막 항목 아래에는 선이 남지 않는다. 테두리형(`bordered`)은 테두리가 구분 역할을 하므로 리스트가 구분선을 빼고, `gap` 으로 띄운다 — `gap` 을 준 목록에도 구분선은 들어가지 않는다.
 - **`SListItem` 은 기본이 표시 전용이다.** 눌러서 이동·선택하게 하려면 `clickable` 을 준다 — hover·`selected`·`interaction="chevron"` 표현이 전부 여기에 딸려 있어서, `clickable` 없이 `selected` 만 주면 선택 표시가 나오지 않는다. `SExpansionList` 는 자식 아이템을 알아서 클릭 가능하게 만들어 이 함정을 막아 준다 — 선택 상태 자체는 앱이 든다 (§3-7-7).
 
 ```tsx
 ✅ <SList><SListItem title="일반 문의" />…</SList>              {/* 줄로 구분되는 목록 — 구분선은 자동 */}
-✅ <SList useGap><SListItem title="일반 문의" bordered />…</SList>  {/* 카드처럼 떨어진 목록 */}
+✅ <SList gap><SListItem title="일반 문의" bordered />…</SList>  {/* 카드처럼 떨어진 목록 */}
 ✅ <SListItem title="일반 문의" clickable selected onClick={…} />   {/* 눌러서 고르는 목록 */}
 ❌ <SList><SListItem title="일반 문의" className="border-b" />…</SList>  {/* 구분선을 직접 붙이지 않는다 */}
 ❌ <SList><><SListItem title="일반 문의" /><SListItem title="결제 문의" /></></SList>  {/* Fragment 로 묶으면 그 안쪽은 구분되지 않는다 */}
@@ -1609,6 +1609,7 @@ export default function AppShell({
   header?: SPageHeaderProps;
   scrollEndSpacing?: boolean;
   contentHeight?: SPageContentHeight;
+  contentWidth?: SPageContentWidth;
 }) {
   return (
     <SLayout type="box" header="fix">
@@ -1620,7 +1621,13 @@ export default function AppShell({
       {/* 콘텐츠 패딩은 SPage 가 토큰으로 넣는다 — p-sd-* 로 덮어쓰지 않는다 */}
       {/* 높이 모드는 페이지가 정한다 — 대부분 contentHeight="fill" 이다 (§2-2) */}
       {/* 스크롤 끝 여백도 SPage 가 넣는다. 페이지가 실제로 스크롤되는 화면에서만 켠다 */}
-      <SPage background="frame" scrollEndSpacing={scrollEndSpacing} contentHeight={contentHeight}>
+      {/* 가로 폭 모드도 페이지가 정한다 — 넓은 창에서 본문을 늘릴지 최소 폭으로 세울지 */}
+      <SPage
+        background="frame"
+        scrollEndSpacing={scrollEndSpacing}
+        contentHeight={contentHeight}
+        contentWidth={contentWidth}
+      >
         {children}
       </SPage>
     </SLayout>
@@ -1636,7 +1643,7 @@ export default function AppShell({
 
 **페이지 헤더 사용 규칙 — 이 앱에서는 값이 아니라 값의 일관성이 규칙이다.**
 
-- **`fix` 는 앱 전체에서 하나로 고정한다.** 어떤 페이지는 `fix`(높이 고정 바), 다른 페이지는 기본형으로 섞어 쓰지 않는다. 프로젝트에서 하나를 고르면(예: 전부 `fix`) 모든 페이지 헤더가 그 값을 쓴다.
+- **`variant` 는 필수이고, 앱 전체에서 하나로 고정한다.** 어떤 페이지는 `"bar"`(높이 고정 + 하단 구분선), 다른 페이지는 `"plain"`(최소 높이) 로 섞어 쓰지 않는다. 프로젝트에서 하나를 고르면(예: 전부 `"bar"`) 모든 페이지 헤더가 그 값을 쓴다. **기본값이 없는 것도 이 규칙 때문이다** — 기본값이 있으면 안 준 페이지만 조용히 다른 모양이 되어 메뉴를 옮길 때마다 제목 줄이 튄다. 셸을 한 번 감싸 쓰면 지정하는 자리는 `AppShell` 한 곳이다. `SLayout` 의 `header`(`"fix" | "full"`)와는 다른 축이다 — 그쪽은 상단바가 GNB 컬럼 안에 있는지 화면 전폭인지를 정한다.
 - **`slot`·`onBack` 도 페이지 성격이 실제로 다른 경우가 아니면 있는 대로 통일한다.** "목록 페이지엔 없고 상세·등록 페이지엔 있다"처럼 화면 종류에 따라 갈리는 것은 허용되지만, 같은 종류의 화면끼리는 임의로 넣었다 뺐다 하지 않는다.
 - **`slot` 은 `ReactNode` 를 그대로 받지만, 원칙은 `size="sm"` 버튼 위주로만 채운다.** `STextLink`·복잡한 커스텀 마크업을 슬롯에 넣지 않는다 — 그 이상이 필요하면 페이지 헤더가 아니라 §4-2 의 `STableBar` 처럼 본문 쪽 액션 자리를 쓴다.
 
@@ -1649,7 +1656,7 @@ const [scrolled, setScrolled] = useState(false);
 
 {/* 헤더는 자기 흰 면을 스스로 칠한다 — 감싸는 쪽은 본문이 놓일 면만 정하면 된다 */}
 <div className="flex h-full min-h-0 flex-col bg-[var(--sys-color-bg-frame)]">
-  <SPageHeader title="상품 목록" subText="판매 중인 상품을 관리합니다." scrolled={scrolled} />
+  <SPageHeader variant="plain" title="상품 목록" subText="판매 중인 상품을 관리합니다." scrolled={scrolled} />
   {/* 스크롤을 앱이 쥐므로 scrolled 도 앱이 넣는다 — 패딩은 SPage 가 없으니 여기서 준다 */}
   <div
     className="min-h-0 flex-1 overflow-auto p-sd-16"
@@ -1686,7 +1693,20 @@ import { SModalOutlet } from 'sellmate-design-system-react';
 
 **최소 너비는 `SLayout` 이 보장한다 — 앱이 `min-w-*` 를 직접 주지 않는다.** 창이 최소 너비(`SLAYOUT_MIN_WIDTH`, GNB 포함한 전체 기준)보다 좁아지면 GNB·상단바는 제자리에 남고 **`SPage` 안에만 가로 스크롤이 생긴다.** 문서(브라우저 창)에는 가로 스크롤이 생기지 않는다. 그래서 셸을 감싸는 요소에 `min-width` 나 `overflow-x` 를 걸지 않는다 — 걸면 창 전체가 스크롤되어 GNB 가 화면 밖으로 밀린다.
 
-**셸의 `SPage` 는 모든 페이지가 공유하므로, 페이지마다 달라지는 것은 페이지가 셸에 알려야 한다.** 위처럼 프레임 컴포넌트가 `contentHeight` · `scrollEndSpacing` 을 받아 그대로 넘긴다.
+**창이 최소 너비보다 넓을 때 본문을 어떻게 세울지는 `SPage` 의 `contentWidth` 가 정한다 — 폭을 직접 계산하지 않는다.** 넓은 모니터에서 본문이 끝까지 늘어나 성기어지는 화면이 있으므로 세 가지 중 하나를 고른다.
+
+| `contentWidth` | 넓은 창에서 | 쓰는 곳 |
+| --- | --- | --- |
+| `"full"` (기본) | 남는 폭을 본문이 다 쓴다 | 표·목록처럼 가로를 넓게 쓸수록 정보가 더 들어가는 화면 |
+| `"fixed"` | 최소 너비일 때의 본문 폭으로 고정, 왼쪽 정렬 (남는 폭은 오른쪽) | 시안 폭 그대로 세우되 왼쪽 기준을 유지할 화면 |
+| `"fixedCenter"` | 같은 폭으로 고정, 가운데 정렬 (남는 폭은 좌우) | 폼·상세처럼 가로를 넓게 써도 얻을 것이 없는 화면 |
+
+- **고정 폭에 숫자를 쓰지 않는다.** `max-w-*` 나 `mx-auto` 로 흉내 내면 GNB 폭·접힘이 반영되지 않아 시안과 어긋난다. 고정 폭은 "창이 최소 너비일 때의 본문 폭"이고 `SPage` 가 GNB 상태까지 반영해 계산한다.
+- **창이 최소 너비보다 좁아지면 세 모드가 모두 같다** — 남는 폭이 없으므로 위 문단대로 `SPage` 안에만 가로 스크롤이 생긴다.
+- 같은 열의 `SPageHeader` 는 자동으로 같은 폭·정렬을 따른다 — 제목 줄에 별도로 주지 않는다. 헤더의 흰 면·구분선은 늘 전폭이다.
+- **같은 종류의 화면끼리는 값을 통일한다** (헤더 `fix` 와 같은 이유). 목록 페이지마다 `full`·`fixedCenter` 가 섞이면 메뉴를 옮길 때마다 본문 폭이 튄다.
+
+**셸의 `SPage` 는 모든 페이지가 공유하므로, 페이지마다 달라지는 것은 페이지가 셸에 알려야 한다.** 위처럼 프레임 컴포넌트가 `contentHeight` · `scrollEndSpacing` · `contentWidth` 를 받아 그대로 넘긴다.
 
 **대부분의 페이지는 `contentHeight="fill"` 이다** — 본문이 창을 꽉 채우고 스크롤은 각 영역 안에서 일어나는 것이 표준이다(§2-2). 블록의 높이가 정해져 있고 그 높이가 창보다 커서 페이지 자체가 스크롤돼야 하는 화면에서만 `contentHeight="auto"`(기본값) + `scrollEndSpacing` 을 켠다.
 
@@ -1722,14 +1742,14 @@ import { SModalOutlet } from 'sellmate-design-system-react';
 </SLayout>
 ```
 
-**메뉴 목록과 함께 스크롤되면 안 되는 것은 `SGnb` 의 위아래 고정 슬롯에 둔다.** 레일과 메뉴에 각각 위(`railTop`·`menuTop`)와 아래(`railFooter`·`menuFooter`) 슬롯이 있다. 아이템이 많아 넘치면 **목록만 스크롤되고 이 슬롯들은 제자리에 남는다** — 메뉴 검색, 워크스페이스 전환, 계정 행처럼 항상 보여야 하는 것이 여기 온다. 레일 슬롯은 `useRail` 일 때만, 메뉴 슬롯은 깔 메뉴가 있을 때만 렌더된다.
+**메뉴 목록과 함께 스크롤되면 안 되는 것은 `SGnb` 의 위아래 고정 슬롯에 둔다.** 레일과 메뉴에 각각 위(`railTop`·`menuTop`)와 아래(`railFooter`·`menuFooter`) 슬롯이 있다. 아이템이 많아 넘치면 **목록만 스크롤되고 이 슬롯들은 제자리에 남는다** — 메뉴 검색, 워크스페이스 전환, 계정 행처럼 항상 보여야 하는 것이 여기 온다. 레일 슬롯은 `showRail` 일 때만, 메뉴 슬롯은 깔 메뉴가 있을 때만 렌더된다.
 
 **접으면 레일·메뉴가 통째로 빠져나가면서 그 슬롯들도 함께 사라진다.** 접힌 상태에서도 남겨야 할 것은 `foldedTop`·`foldedFooter` 로 따로 준다 — `header="fix"` 로 접혔을 때만 나타나며, 폭이 좁은 폴드 레일이므로 아이콘 버튼 하나 정도로 줄인다.
 
 ```tsx
 {/* 접히면 menuTop·menuFooter 가 함께 빠지므로, 폴드 레일에 남길 것만 foldedTop 으로 따로 준다 */}
 <SGnb
-  items={MENU} value={current} onValueChange={navigate} useRail
+  items={MENU} value={current} onValueChange={navigate} showRail
   menuTop={<SSearchInput value={keyword} onValueChange={setKeyword} placeholder="메뉴 검색" />}
   menuFooter={<AccountRow />}
   foldedTop={<SGhostButton icon="search" size="sm" ariaLabel="메뉴 검색" onClick={openSearch} />}
@@ -1792,7 +1812,7 @@ import { SModalOutlet } from 'sellmate-design-system-react';
   - **닫힘은 `onTooltipDismiss` 로 받아 `tooltip` 을 비워 둔다.** 같은 값을 계속 넘기는 동안에는 다시 뜨지 않고, **비웠다 다시 넘기면 문구가 같아도 새 안내로 뜬다** — 새 알림마다 같은 안내를 다시 띄우는 화면이 막히지 않는다.
   - 재노출 신호는 문구가 **없음 → 있음** 으로 바뀌는 것이다. 한 이벤트 핸들러 안에서 비웠다 곧바로 넣으면 렌더가 한 번으로 묶여 신호가 되지 않는다 — 닫을 때 비우고, 다시 필요할 때 넘긴다.
   - 컴포넌트가 아는 범위는 그 자리가 서 있는 동안뿐이다(새로고침하거나 GNB 를 접어 알림이 다른 자리로 옮겨 서면 새로 마운트된다). **그 사용자에게 두 번 다시 보이지 않아야 하면 앱이 닫힘을 저장해 두고 `tooltip` 을 넘기지 않는다.**
-- **`header="fix"` + `useRail` 에서 하위 메뉴가 없는 레일 아이템이 활성이면 메뉴 컬럼째 사라지므로 이 패널도 함께 빠진다.** 항상 보여야 하는 계정·알림이라면 그런 레일 리프를 두지 않는다 — 또는 `header="full"` 로 두면 상단바에 남는다(그런 레일 리프가 있으면 GNB 가 `header` 를 `full` 로 강제한다).
+- **`header="fix"` + `showRail` 에서 하위 메뉴가 없는 레일 아이템이 활성이면 메뉴 컬럼째 사라지므로 이 패널도 함께 빠진다.** 항상 보여야 하는 계정·알림이라면 그런 레일 리프를 두지 않는다 — 또는 `header="full"` 로 두면 상단바에 남는다(그런 레일 리프가 있으면 GNB 가 `header` 를 `full` 로 강제한다).
 
 ### 4-2. 목록 페이지 (필터 + 테이블)
 
@@ -1820,7 +1840,7 @@ import {
 const filterFields: SKeyValueField[][] = [
   [
     { name: 'status', label: '상태', type: 'select',
-      options: { options: STATUS_OPTIONS, emitValue: true } },
+      options: { options: STATUS_OPTIONS, valueAsPrimitive: true } },
     { name: 'keyword', label: '검색어', type: 'input',
       options: { placeholder: '상품명 / 상품코드' } },
   ],
@@ -1852,6 +1872,7 @@ export default function ProductListPage() {
   return (
     <AppShell
       header={{
+        variant: 'bar',
         title: '상품 목록',
         // 이 페이지의 주요 액션이 아니라 부가 액션 — slot 은 sm 버튼으로만 채운다
         slot: <SButton size="sm" color="neutral" outline label="이용 가이드" onClick={openGuide} />,
@@ -1894,7 +1915,7 @@ export default function ProductListPage() {
           selected={selected}
           onSelectedChange={setSelected}
           pagination={{ currentPage, lastPage }}
-          isLoading={isLoading}
+          loading={loading}
         />
       </div>
     </AppShell>
@@ -1910,7 +1931,7 @@ export default function ProductListPage() {
 
 ```tsx
 // 좁게 시작하고, 사용자가 바꾸는 밀도는 표가 알아서 들고 간다
-<STable dense useRowsPerPageSelect pagination={{ currentPage, lastPage }} />;
+<STable dense showRowsPerPageSelect pagination={{ currentPage, lastPage }} />;
 
 // 사용자가 고른 밀도를 다음 방문에도 남기려는 화면만 받아서 저장한다.
 // 저장한 값은 시작 밀도로만 돌려준다 — 되돌려 넣지 않는다
@@ -1919,7 +1940,7 @@ const [initialDense] = useState(() => loadPref('list.dense', true));
 <STable
   dense={initialDense}
   onDenseChange={next => savePref('list.dense', next)}
-  useRowsPerPageSelect
+  showRowsPerPageSelect
   pagination={{ currentPage, lastPage }}
 />;
 ```
@@ -1967,7 +1988,7 @@ const fields: SKeyValueField[][] = [
   ],
   [
     { name: 'category', label: '카테고리', required: true, type: 'select',
-      options: { options: CATEGORY_OPTIONS, emitValue: true,
+      options: { options: CATEGORY_OPTIONS, valueAsPrimitive: true,
         rules: [required('카테고리를 선택해 주세요.')] } },
     { name: 'price', label: '판매가', type: 'number-input' },
   ],
@@ -1982,9 +2003,9 @@ export default function ProductCreatePage() {
   const [values, setValues] = useState<Record<string, unknown>>({});
 
   return (
-    <AppShell header={{ title: '상품 등록', onBack: goBack }}>
+    <AppShell header={{ variant: 'bar', title: '상품 등록', onBack: goBack }}>
       <div className="flex flex-col gap-sd-12">
-        <SForm ref={formRef} formClass="flex flex-col gap-sd-12" onSubmit={save}>
+        <SForm ref={formRef} formClassName="flex flex-col gap-sd-12" onSubmit={save}>
           <SKeyValueTable
             fields={fields}
             values={values}
@@ -2045,7 +2066,7 @@ const priceFields: SKeyValueField[][] = [
 export default function ProductDetailPage() {
   return (
     // 목록에서 들어온 상세 페이지 — onBack 으로 뒤로가기를 준다
-    <AppShell header={{ fix: true, title: '클래식 셔츠', onBack: goList }}>
+    <AppShell header={{ variant: 'bar', title: '클래식 셔츠', onBack: goList }}>
       <div className="flex flex-col gap-sd-12">
         <SSectionHeaderCard title="기본 정보" marker thickness="accent">
           <SKeyValueTable fields={basicFields} values={product} />
@@ -2571,11 +2592,11 @@ export const BADGE_COLORS = [
 | `readOnly?` | `boolean` | `false` |  |
 | `rules?` | `Rule[]` | — |  |
 | `status?` | `SFieldStatus` | — |  |
-| `focused?` | `boolean` | — |  |
-| `hovered?` | `boolean` | — |  |
+| `focused?` | `boolean` | — | 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) |
+| `hovered?` | `boolean` | — | 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) |
 | `prefix?` | `ReactNode` | — | 입력 앞 슬롯 |
 | `suffix?` | `ReactNode` | — | 입력 뒤 슬롯 |
-| `inputClass?` | `string` | — |  |
+| `inputClassName?` | `string` | — |  |
 | `inputStyle?` | `CSSProperties` | — |  |
 | `label?` | `string` | — |  |
 | `labelWidth?` | `number \| string` | — |  |
@@ -3443,7 +3464,7 @@ export interface SChipFilterDatePreset {
 | `name?` | `string` | — |  |
 | `rules?` | `Rule[]` | — |  |
 | `error?` | `boolean` | — |  |
-| `useReset?` | `boolean` | `false` | 입력 초기화 버튼 표시 |
+| `showReset?` | `boolean` | `false` | 입력 초기화 버튼 표시 |
 | `maxCount?` | `number` | — | 최대 칩 개수 |
 | `metaPlacement?` | `SChipInputMetaPlacement` | `'end'` | 최대 개수·초기화 meta 위치 |
 | `duplicateLabel?` | `string` | — | 중복 에러 메시지 항목명 |
@@ -3562,7 +3583,7 @@ export type SCircleProgressType = 'primary' | 'inverse' | 'error' | 'complete' |
 | `persistent?` | `boolean` | `false` | 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 false** — 확인 모달은 잃을 입력이 없어 백드롭·ESC로 닫힌다 |
 | `type?` | `SConfirmModalType` | `'positive'` | 타입 (아이콘·메인버튼 색 결정) |
 | `modalTitle?` | `string` | `''` |  |
-| `titleClass?` | `string` | — | 제목 엘리먼트에 추가할 클래스 (sd-confirm-modal titleClass) |
+| `titleClassName?` | `string` | — | 제목 엘리먼트에 추가할 클래스 (sd-confirm-modal titleClassName) |
 | `topMessage?` | `string[]` | `[]` | 콘텐츠 박스 상단 메시지 목록 (각 항목이 한 줄, HTML 문자열 허용 — innerHTML 렌더링) |
 | `bottomMessage?` | `string[]` | `[]` | 콘텐츠 박스 하단 메시지 목록 (각 항목이 한 줄, HTML 문자열 허용 — innerHTML 렌더링) |
 | `tagLabel?` | `string` | — | tag 슬롯 기본 태그 레이블 (tagSlot 미지정 시) |
@@ -3573,8 +3594,8 @@ export type SCircleProgressType = 'primary' | 'inverse' | 'error' | 'complete' |
 | `tagSlot?` | `ReactNode` | — | 콘텐츠 박스 tag 위치 커스텀 콘텐츠 (미지정 시 tagLabel 기반 STag) |
 | `optionSlot?` | `ReactNode` | — | 콘텐츠 박스에서 태그 오른쪽 커스텀 콘텐츠 (미지정 시 slotLabel 텍스트) |
 | `contentSlot?` | `ReactNode` | — | 콘텐츠 박스 바로 아래에 통으로 들어가는 커스텀 콘텐츠 (전체 폭) |
-| `mainButtonLabel?` | `string` | `'확인'` | 메인 버튼 |
-| `mainButtonName?` | `SConfirmModalMainButton` | — | 확인 버튼 프리셋 (없으면 type에 따라 자동 결정) |
+| `mainButtonLabel?` | `string` | `'확인'` | 메인(확인) 버튼에 찍히는 글자 |
+| `mainButtonOutline?` | `boolean` | — | 메인 버튼을 아웃라인(테두리)으로 세울지. 지정하지 않으면 `type` 이 정한다 — positive·negative 는 채운 버튼, default 는 아웃라인. **색은 여기서 고르지 않는다.** `type` 이 정한다(positive=primary / negative=danger / default=neutral) — 아이콘·제목이 말하는 것과 버튼 색이 어긋나면 읽는 사람이 헷갈리므로 그 조합은 타입에서 막는다. 글자는 `mainButtonLabel` 이다. `type="default"` 에 `false` 를 주면 테두리 없는 흰 버튼이 된다(neutral 은 solid·outline 이 같은 흰 면이고 테두리 유무만 다르다). 확인 버튼이 눌러야 할 것으로 안 읽히므로 권하지 않는다. |
 | `subButtonLabel?` | `string` | — | 서브(취소) 버튼 |
 
 #### Events
@@ -3594,14 +3615,6 @@ export type SCircleProgressType = 'primary' | 'inverse' | 'error' | 'complete' |
 export type SConfirmModalType = 'positive' | 'negative' | 'default';
 ```
 
-### SConfirmModalMainButton
-
-```ts
-/** 확인 버튼 프리셋 (sd-confirm-modal ConfirmModalMainButton) */
-export type SConfirmModalMainButton =
-  'primary_md' | 'primary_outline_md' | 'danger_md' | 'danger_outline_md' | 'neutral_outline_md';
-```
-
 ## Dependencies
 
 ### Used by
@@ -3746,7 +3759,7 @@ export type SDatePickerSize = SFieldSize;
 | `placeholder?` | `string` | `'YYYY-MM-DD ~ YYYY-MM-DD'` |  |
 | `selectable?` | `[string, string]` | — |  |
 | `maxRange?` | `number` | — | 최대 선택 일수 |
-| `useTimePicker?` | `boolean` | `false` | 시간(시:분) 선택 푸터 사용 여부. true이면 value는 "YYYY-MM-DD HH:mm" 형식이 되고, 캘린더 하단에 시작·종료 시간 입력이 표시된다. |
+| `showTimePicker?` | `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%"` 로 두어 행 전체를 쓴다. |
@@ -3783,7 +3796,7 @@ export type SDatePickerSize = SFieldSize;
 | `value` | `SDateRangeValue` | — |  |
 | `selectable?` | `[string, string]` | — |  |
 | `maxRange?` | `number` | — |  |
-| `useTimePicker?` | `boolean` | `false` |  |
+| `showTimePicker?` | `boolean` | `false` |  |
 
 #### Events
 
@@ -4155,7 +4168,7 @@ export interface SDropdownButtonItem {
 | `maxHeight?` | `number \| string` | — |  |
 | `toolbar` | `SEditorToolbarItem[]` | — |  |
 | `bubbleMenu` | `SEditorToolbarItem[]` | — | 선택 영역 위에 뜨는 서식 판 — 편집할 수 있으면 언제나 뜬다 (SEditor 주석 참고) |
-| `editorClass?` | `string` | — |  |
+| `editorClassName?` | `string` | — |  |
 | `editorStyle?` | `CSSProperties` | — |  |
 
 #### Events
@@ -4199,10 +4212,10 @@ export interface SDropdownButtonItem {
 | `simple?` | `boolean` | `false` | **글자에 거는 서식만** 남긴다 — 목록·정렬·인용·코드·링크·이미지·구분선이 빠진다. 막대와 버블 메뉴 양쪽에 함께 걸린다 (한쪽에만 남으면 아무것도 막지 못한다). 받은 글의 문단 구조까지 작성자를 따라가면 곤란한 자리 — 좁은 칸의 메모·사유·짧은 안내문 — 에 쓴다. 반대로 서식이 아예 필요 없다면 `SEditor` 가 아니라 `STextarea` 다. |
 | `rules?` | `Rule[]` | — | 유효성 규칙 — blur 시 자동 검증 |
 | `status?` | `SFieldStatus` | — | 필드 상태 ('default' | 'pass' | 'error') |
-| `focused?` | `boolean` | — | 포커스 상태 (제어/반영) |
-| `hovered?` | `boolean` | — | 호버 상태 (제어/반영) |
+| `focused?` | `boolean` | — | 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) |
+| `hovered?` | `boolean` | — | 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) |
 | `name?` | `string` | — | 폼 전송용 name |
-| `editorClass?` | `string` | — | 편집 영역 className |
+| `editorClassName?` | `string` | — | 편집 영역 className |
 | `editorStyle?` | `CSSProperties` | — | 편집 영역 style |
 | `label?` | `string` | — |  |
 | `labelWidth?` | `number \| string` | — |  |
@@ -4450,8 +4463,8 @@ export interface SExpansionItemRenderState {
 | `error?` | `boolean` | `false` | 에러 상태 |
 | `errorMessage?` | `string` | `''` | 에러 메시지 |
 | `status?` | `SFieldStatus` | — | 필드 상태 — 'error' | 'pass' | 'default'. 'pass'면 초록 테두리 |
-| `focused?` | `boolean` | `false` | 포커스 상태 (제어/반영) |
-| `hovered?` | `boolean` | `false` | 호버 상태 (제어/반영) |
+| `focused?` | `boolean` | `false` | 포커스 상태를 밖에서 지정한다. 필드를 감싼 쪽이 포커스를 쥐고 있어(커스텀 트리거·복합 컨트롤) 필드 자신은 `:focus-within` 이 걸리지 않을 때 쓴다. 켜면 강조 테두리·링이 error/pass 보다 우선한다. |
+| `hovered?` | `boolean` | `false` | 호버 상태를 밖에서 지정한다. `focused` 와 같은 이유로 쓰며, 강조도 같다 — 실제 `:hover` 와 구분되지 않는 모양이어야 밖에서 흉내 낸 것이 티가 나지 않는다. |
 | `rules?` | `Rule[]` | — | 유효성 규칙 (검증은 컨트롤에서 수행, API 패리티) |
 | `hint?` | `string` | `''` | 하단 힌트 |
 | `disabled?` | `boolean` | `false` | 비활성 |
@@ -4538,11 +4551,11 @@ export type SFieldStatus = 'default' | 'pass' | 'error';
 | `value?` | `SFilePickerValue` | `null` |  |
 | `placeholder?` | `string` | `'Click to upload'` |  |
 | `disabled?` | `boolean` | `false` |  |
-| `focused?` | `boolean` | `false` | 포커스 상태 여부 |
-| `hovered?` | `boolean` | `false` | 호버 상태 여부 |
+| `focused?` | `boolean` | `false` | 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) |
+| `hovered?` | `boolean` | `false` | 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) |
 | `inline?` | `boolean` | `false` | 인라인 표시 — SField 테두리 박스만 사라지고 label/rules/hint 는 그대로 동작 |
 | `multiple?` | `boolean` | `false` |  |
-| `useMultipleListBox?` | `boolean` | `false` | multiple 파일 목록을 필드 아래 칩 대신, caret(▼) 클릭 시 열리는 리스트박스 카드로 표시 (바깥 클릭 시 닫힘) |
+| `showMultipleListBox?` | `boolean` | `false` | multiple 파일 목록을 필드 아래 칩 대신, caret(▼) 클릭 시 열리는 리스트박스 카드로 표시 (바깥 클릭 시 닫힘) |
 | `accept?` | `string` | — |  |
 | `maxFileSize?` | `number \| string` | — |  |
 | `maxTotalSize?` | `number \| string` | — |  |
@@ -4671,7 +4684,7 @@ export interface SFooterButton {
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `formClass?` | `string` | — | form 엘리먼트에 추가할 클래스 (sd-form formClass 대응) |
+| `formClassName?` | `string` | — | form 엘리먼트에 추가할 클래스 (sd-form formClassName 대응) |
 | `children?` | `ReactNode` | — |  |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
@@ -4794,16 +4807,16 @@ export type SGhostButtonIntent = 'default' | 'danger' | 'action' | 'subAction' |
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `type?` | `SGnbType` | — | 메뉴 스타일: box(라운드) / belt(풀폭 행). 미지정 시 SLayout 의 type 을 따른다. |
-| `header?` | `SGnbHeader` | — | 상단바 구조: fix(GNB 폭 고정) / full(레이아웃 전폭). 미지정 시 SLayout 의 header 를 따른다. 단, useRail 이고 레일에 children 없는 아이템이 있으면 메뉴 폭이 출렁이므로 full 로 강제된다. |
+| `header?` | `SGnbHeader` | — | 상단바 구조: fix(GNB 폭 고정) / full(레이아웃 전폭). 미지정 시 SLayout 의 header 를 따른다. 단, showRail 이고 레일에 children 없는 아이템이 있으면 메뉴 폭이 출렁이므로 full 로 강제된다. |
 | `color?` | `SGnbColor` | `'light'` | 색상 테마: light / dark |
-| `items` | `SGnbMenuItem[]` | — | 메뉴 트리 (depth1 → depth2 → depth3). useRail 이면 첫 depth 가 레일이 되고 그 children 이 depth1 이 된다. |
-| `useRail?` | `boolean` | — | 좌측 레일 사용 여부. 켜면 items 의 첫 depth 가 아이콘+라벨 버튼의 세로 레일로 서고, 선택된 레일 아이템의 children 이 오른쪽 메뉴 패널에 깔린다. 미지정 시 SLayout 의 useRail 을 따른다. children 없는 레일 아이템이 활성이면 메뉴 패널은 렌더되지 않고 레일만 남는다. |
+| `items` | `SGnbMenuItem[]` | — | 메뉴 트리 (depth1 → depth2 → depth3). showRail 이면 첫 depth 가 레일이 되고 그 children 이 depth1 이 된다. |
+| `showRail?` | `boolean` | — | 좌측 레일 사용 여부. 켜면 items 의 첫 depth 가 아이콘+라벨 버튼의 세로 레일로 서고, 선택된 레일 아이템의 children 이 오른쪽 메뉴 패널에 깔린다. 미지정 시 SLayout 의 showRail 을 따른다. children 없는 레일 아이템이 활성이면 메뉴 패널은 렌더되지 않고 레일만 남는다. |
 | `value?` | `string` | `''` | 현재 선택된 아이템 value |
 | `folded?` | `boolean` | — | 접힘(레일) 상태. 미지정 시 SLayout 의 folded 를 따른다. |
 | `logo?` | `ReactNode` | — | 상단바 로고 영역 (slot). header="full" 이면 폭이 140px 로 고정된다. |
 | `topContent?` | `ReactNode` | — | 상단바 로고 오른쪽 슬롯 (검색·액션 등). 로고와 16px 띄고 남는 폭을 모두 차지하므로 안에서 자유롭게 정렬한다. 상단바가 전폭인 header="full" 에서만 렌더된다 (fix 는 상단바가 좁은 GNB 컬럼 안이라 놓을 자리가 없다). |
-| `railTop?` | `ReactNode` | — | 레일 상단 고정 슬롯. 레일 아이템이 많아 넘치면 아이템 목록(ul)만 스크롤되고 이 슬롯은 레일 상단(상단바 바로 아래)에 붙어 고정된다. useRail 일 때만 렌더된다. |
-| `railFooter?` | `ReactNode` | — | 레일 하단 고정 슬롯. 레일 아이템이 많아 넘치면 아이템 목록(ul)만 스크롤되고 이 슬롯은 레일 하단에 붙어 고정된다. useRail 일 때만 렌더된다. |
+| `railTop?` | `ReactNode` | — | 레일 상단 고정 슬롯. 레일 아이템이 많아 넘치면 아이템 목록(ul)만 스크롤되고 이 슬롯은 레일 상단(상단바 바로 아래)에 붙어 고정된다. showRail 일 때만 렌더된다. |
+| `railFooter?` | `ReactNode` | — | 레일 하단 고정 슬롯. 레일 아이템이 많아 넘치면 아이템 목록(ul)만 스크롤되고 이 슬롯은 레일 하단에 붙어 고정된다. showRail 일 때만 렌더된다. |
 | `menuTop?` | `ReactNode` | — | 메뉴 상단 고정 슬롯. 메뉴 아이템이 많아 넘치면 메뉴 목록(ul)만 스크롤되고 이 슬롯은 메뉴 상단에 붙어 고정된다. 메뉴가 렌더될 때만(showMenu) 나타난다. |
 | `menuFooter?` | `ReactNode` | — | 메뉴 하단 고정 슬롯. 메뉴 아이템이 많아 넘치면 메뉴 목록(ul)만 스크롤되고 이 슬롯은 메뉴 하단에 붙어 고정된다. 메뉴가 렌더될 때만(showMenu) 나타난다. |
 | `foldedTop?` | `ReactNode` | — | 접힘(fix 레일) 상단 고정 슬롯. 접으면 본문이 빠져나가며 rail/menu top 도 사라지므로, 48px 폴드 레일 상단(상단바 바로 아래)에 붙는 별도 슬롯이다. header="fix" 로 접혔을 때만 나타난다. |
@@ -4811,7 +4824,7 @@ export type SGhostButtonIntent = 'default' | 'danger' | 'action' | 'subAction' |
 | `resizable?` | `boolean` | `false` | 메뉴 폭을 드래그로 조절할 수 있게 한다. 레일 폭은 고정이고 **메뉴 컬럼만** 늘고 준다. 조절선은 GNB 컬럼의 오른쪽 경계 전체다 — fix 는 상단바 높이까지, full 은 상단바가 전폭이라 본문 높이까지. 접혀 있거나 깔 메뉴가 없으면(레일 리프가 활성) 조절선이 나오지 않는다. |
 | `menuWidth?` | `number` | — | 메뉴 폭(px). 주면 controlled — onMenuWidthChange 로 직접 갱신해야 움직인다 |
 | `defaultMenuWidth?` | `number` | — | 메뉴 초기 폭(px). uncontrolled |
-| `system?` | `ReactNode` | — | system 슬롯(`SGnbSystem`). 놓이는 자리와 형태는 `header` 가 정한다. - fix : GNB 맨 아래 세로 판. 펼치면 메뉴 컬럼 바닥에, 접히면 `foldedFooter` 아래 레일 바닥에 여백 없이 붙는다. useRail 에서 메뉴가 없는 레일 아이템이 활성이면 메뉴 컬럼째 사라지므로 이 슬롯도 함께 빠진다. - full: 전폭 상단바 오른쪽 끝에 가로 한 줄로 선다. 상단바는 접어도 남으므로 조각들도 늘 남는다. 색·형태는 GNB 가 내려주므로 SGnbSystem 에 다시 넘기지 않아도 된다. |
+| `system?` | `ReactNode` | — | system 슬롯(`SGnbSystem`). 놓이는 자리와 형태는 `header` 가 정한다. - fix : GNB 맨 아래 세로 판. 펼치면 메뉴 컬럼 바닥에, 접히면 `foldedFooter` 아래 레일 바닥에 여백 없이 붙는다. showRail 에서 메뉴가 없는 레일 아이템이 활성이면 메뉴 컬럼째 사라지므로 이 슬롯도 함께 빠진다. - full: 전폭 상단바 오른쪽 끝에 가로 한 줄로 선다. 상단바는 접어도 남으므로 조각들도 늘 남는다. 색·형태는 GNB 가 내려주므로 SGnbSystem 에 다시 넘기지 않아도 된다. |
 | `ariaLabel?` | `string` | `'global navigation'` | 메뉴 landmark(nav) 의 접근성 레이블. 한 화면에 nav 가 여럿일 때 구분한다. |
 
 #### Events
@@ -4820,7 +4833,7 @@ export type SGhostButtonIntent = 'default' | 'danger' | 'action' | 'subAction' |
 |-------|------|-------------|
 | `onValueChange` | `(value: string) => void` | 선택 변경 (sdUpdate) |
 | `onRailChange` | `(value: string) => void` | 레일 선택 변경. 레일 아이템을 눌러 패널이 바뀔 때 알린다(선택 상태는 SGnb 가 자체 관리). |
-| `onFoldChange` | `(folded: boolean) => void` | 접힘 토글 (sdFoldChange) |
+| `onFoldedChange` | `(folded: boolean) => void` | 접힘 토글 (sdFoldChange) |
 | `onLauncherClick` | `() => void` | 앱런처(그리드) 버튼 클릭. 미지정 시 런처 버튼을 렌더하지 않는다. 접힘 레일(fix)에는 폴드 버튼만 남으므로 표시되지 않는다. |
 | `onMenuWidthChange` | `(width: number) => void` | 메뉴 폭이 확정될 때(드래그를 놓거나 방향키 조작). 드래그하는 동안에는 오지 않는다 |
 
@@ -5191,7 +5204,7 @@ export type SGuideMessage = string | SGuideMessage[];
 | `position?` | `string` | `'50% 50%'` | 이미지 정렬 위치 (object-position) |
 | `loading?` | `'lazy' \| 'eager'` | `'lazy'` | 브라우저 로딩 방식 |
 | `loadingShowDelay?` | `number` | `0` | 스피너를 띄우기까지 기다리는 시간(ms). 이 시간 안에 로드되면 스피너를 아예 그리지 않는다 — 캐시된 이미지에서 스피너가 한 프레임 번쩍이는 것을 막는다. |
-| `noSpinner?` | `boolean` | `false` | 로딩 중에도 스피너를 그리지 않는다 |
+| `showSpinner?` | `boolean` | `true` | 로딩 중 스피너를 그릴지. 끄면 `loadingSlot` 도 없을 때 로딩 표시가 아무것도 남지 않는다. |
 | `loadingSlot?` | `ReactNode` | — | 로딩 중 표시를 직접 지정한다 (기본: 스피너) |
 | `errorSlot?` | `ReactNode` | — | 실패·빈 상태 표시를 직접 지정한다 (기본: 빈 이미지 아이콘) |
 | `imgProps?` | `ImgHTMLAttributes<HTMLImageElement>` | — | 안쪽 `<img>` 로 넘길 네이티브 속성 (srcSet · sizes · crossOrigin · draggable 등) |
@@ -5248,9 +5261,9 @@ export const IMAGE_FITS = ['cover', 'contain', 'fill', 'none', 'scale-down'] as
 | `clearable?` | `boolean` | `false` | 지우기 버튼 |
 | `rules?` | `Rule[]` | — | 유효성 규칙 — blur 시 자동 검증 |
 | `status?` | `SFieldStatus` | — | 필드 상태 ('default' | 'pass' | 'error') |
-| `focused?` | `boolean` | — | 포커스 상태 (제어/반영) |
-| `hovered?` | `boolean` | — | 호버 상태 (제어/반영) |
-| `inputClass?` | `string` | — | 내부 input 요소 className |
+| `focused?` | `boolean` | — | 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) |
+| `hovered?` | `boolean` | — | 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) |
+| `inputClassName?` | `string` | — | 내부 input 요소 className |
 | `inputStyle?` | `CSSProperties` | — | 내부 input 요소 style |
 | `label?` | `string` | — |  |
 | `labelWidth?` | `number \| string` | — |  |
@@ -5433,7 +5446,7 @@ export type SKeyValueFieldValue = string | number | boolean | string[];
 |------|------|---------|-------------|
 | `type?` | `SLayoutType` | `'box'` | 메뉴 스타일: box(라운드) / belt(풀폭 행). 자식 SGnb 가 이 값을 따른다. |
 | `header?` | `SLayoutHeader` | `'fix'` | 레이아웃 구조: fix(가로 분할) / full(풀폭 상단바). 자식 SGnb·SPage 가 이 값을 따른다. |
-| `useRail?` | `boolean` | `false` | GNB 좌측 레일 사용 여부. 자식 SGnb 가 이 값을 따르고, 그만큼 넓어진 컬럼 폭을 되올린다. 레일에 children 없는 아이템이 있으면 SGnb 가 full 상단바를 요구하고, 이 레이아웃도 그에 맞춰 full 그리드로 선다. |
+| `showRail?` | `boolean` | `false` | GNB 좌측 레일 사용 여부. 자식 SGnb 가 이 값을 따르고, 그만큼 넓어진 컬럼 폭을 되올린다. 레일에 children 없는 아이템이 있으면 SGnb 가 full 상단바를 요구하고, 이 레이아웃도 그에 맞춰 full 그리드로 선다. |
 | `folded?` | `boolean` | — | GNB 접힘 상태 (controlled) |
 | `defaultFolded?` | `boolean` | `false` | GNB 초기 접힘 상태 (uncontrolled) |
 
@@ -5519,8 +5532,16 @@ export type SLinearProgressSize = 'xs' | 'sm' | 'md';
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `children?` | `ReactNode` | — | 리스트 컨테이너 내부에 렌더링할 내용 |
-| `useGap?` | `boolean` | `false` | 리스트 아이템 사이 gap 토큰 적용 여부 |
-| `usePadding?` | `boolean` | `false` | 리스트 컨테이너 padding 토큰 적용 여부 |
+| `gap?` | `boolean` | `false` | 리스트 아이템 사이 gap 토큰 적용 여부 |
+| `padding?` | `SListPadding` | `'none'` | 컨테이너 안쪽 여백. 기본은 `none` — 목록이 담긴 면이 이미 여백을 쥔 경우가 많다. 목록이 배경 위에 직접 얹혀 스스로 여백을 쥐어야 할 때만 `default`. |
+
+## Types
+
+### SListPadding
+
+```ts
+export type SListPadding = 'default' | 'none';
+```
 
 ## Dependencies
 
@@ -5658,7 +5679,7 @@ export interface SListItemRenderState {
 | `state?` | `SLoadingModalState` | `'loading'` | 상태 (loading: 스피너, error: 경고 아이콘) |
 | `progress?` | `number` | — | 진행률 (0–100) — 지정 시 determinate 스피너 |
 | `message?` | `string \| string[]` | — | 메시지 (없으면 state 기본값) |
-| `useButton?` | `boolean` | `false` | 하단 버튼 표시 |
+| `showButton?` | `boolean` | `false` | 하단 버튼 표시 |
 | `buttonLabel?` | `string` | — | 버튼 레이블 (없으면 state 기본값) |
 | `width?` | `number \| string` | `520` |  |
 | `height?` | `number \| string` | `320` |  |
@@ -5759,7 +5780,7 @@ SModal.confirm({
   .onCancel(() => {});
 ```
 
-**옵션 (`SConfirmOptions`)** — 선언형 `SConfirmModalProps` 에서 제어 흐름 props(`open`/`onOpenChange`/`onOk`/`onCancel`/`onClose`)를 제외한 전부. 주요 키: `type`, `modalTitle`, `topMessage`/`bottomMessage`, `mainButtonLabel`/`mainButtonName`, `subButtonLabel`, `tagSlot`/`optionSlot`/`contentSlot`, `persistent`.
+**옵션 (`SConfirmOptions`)** — 선언형 `SConfirmModalProps` 에서 제어 흐름 props(`open`/`onOpenChange`/`onOk`/`onCancel`/`onClose`)를 제외한 전부. 주요 키: `type`, `modalTitle`, `topMessage`/`bottomMessage`, `mainButtonLabel`/`mainButtonOutline`, `subButtonLabel`, `tagSlot`/`optionSlot`/`contentSlot`, `persistent`.
 
 ---
 
@@ -5984,12 +6005,12 @@ function OrderModal({ open, onOpenChange, onClose, modalRef, orderId }: OrderMod
 | `min?` | `number` | `Number.NEGATIVE_INFINITY` | 최솟값 |
 | `max?` | `number` | `Number.POSITIVE_INFINITY` | 최댓값 |
 | `step?` | `number` | `1` | 스텝 단위 |
-| `useButton?` | `boolean` | `false` | 증감 버튼 표시 |
-| `useDecimal?` | `boolean` | `false` | 소수점 입력 허용 |
+| `showButton?` | `boolean` | `false` | 증감 버튼 표시 |
+| `allowDecimal?` | `boolean` | `false` | 소수점 입력 허용 |
 | `maxDecimalLength?` | `number` | — | 소수점 이하 최대 자리수 |
 | `inputPrefix?` | `string` | `''` | 입력 앞 접두 텍스트 |
 | `inputSuffix?` | `string` | `''` | 입력 뒤 접미 텍스트 |
-| `inputClass?` | `string` | — | 네이티브 input className |
+| `inputClassName?` | `string` | — | 네이티브 input className |
 | `inputStyle?` | `CSSProperties` | — | 네이티브 input style |
 | `autoFocus?` | `boolean` | — | 마운트 시 자동 포커스 |
 | `name?` | `string` | — | 폼 연동 name |
@@ -5998,8 +6019,8 @@ function OrderModal({ open, onOpenChange, onClose, modalRef, orderId }: OrderMod
 | `readOnly?` | `boolean` | `false` |  |
 | `rules?` | `Rule[]` | — | 유효성 규칙 — blur 시 검증 |
 | `status?` | `SFieldStatus` | — |  |
-| `focused?` | `boolean` | — |  |
-| `hovered?` | `boolean` | — |  |
+| `focused?` | `boolean` | — | 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) |
+| `hovered?` | `boolean` | — | 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) |
 | `label?` | `string` | — |  |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
@@ -6097,10 +6118,10 @@ export type SNumberInputSize = SFieldSize;
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `title` | `string` | — | 타이틀 (필수) |
-| `subText?` | `string` | — | 서브 텍스트. fix=true 면 타이틀 오른쪽에, fix=false(기본) 면 타이틀 아래에 놓인다. |
-| `fix?` | `boolean` | `false` | true: 높이 56 고정 + 하단 구분선, 서브 텍스트가 타이틀과 같은 줄. false(기본): 최소 높이 66(상하 패딩 20/16 안에서 타이틀 한 줄 높이로 결정) + 구분선 없음, 서브 텍스트가 타이틀 아래로 내려간다. 배경은 두 베리에이션 모두 흰 면이다. |
+| `subText?` | `string` | — | 서브 텍스트. `bar` 면 타이틀 오른쪽에, `plain` 이면 타이틀 아래에 놓인다. |
+| `variant` | `SPageHeaderVariant` | — | 제목 영역의 모양 — **필수다.** - `plain`: 최소 높이(상하 패딩 안에서 타이틀 한 줄 높이로 결정) + 구분선 없음, 서브 텍스트가 타이틀 아래로 내려간다. - `bar`: 높이 고정 + 하단 구분선, 서브 텍스트가 타이틀과 같은 줄. 기본값을 두지 않는 이유는 이 값이 **앱 전체에서 하나로 고정돼야 하는 값**이기 때문이다. 기본값이 있으면 안 준 페이지만 조용히 다른 모양이 되어, 메뉴를 옮길 때 제목 줄의 높이와 구분선이 페이지마다 튄다. 셸을 한 번 감싸 쓰면(§4-1 AppShell) 지정하는 자리도 한 곳이다. 배경은 두 베리에이션 모두 흰 면이다. `SLayout` 의 `header`(`'fix' | 'full'`)와는 다른 축이다 — 그쪽은 상단바가 GNB 컬럼 안에 있는지 화면 전폭인지를 정한다. |
 | `slot?` | `ReactNode` | — | 오른쪽 끝 커스텀 슬롯. 가이드 링크·액션 버튼 등 페이지마다 다른 것이 온다. |
-| `scrolled?` | `boolean` | — | 아래 콘텐츠가 스크롤을 시작했는지. fix=false 일 때만 의미가 있다: 스크롤이 시작되면 그림자(floating)가 들어가 스크롤되는 콘텐츠 위에 뜬 것처럼 보인다. 배경은 흰 면 그대로다 — scrolled 가 더하는 것은 그림자뿐이다. `SLayout` 안에 놓았으면 **주지 않는다** — 같은 열의 `SPage` 가 자기 스크롤 상태를 올려 자동으로 들어온다. 스크롤 컨테이너를 앱이 직접 쥔 단독 배치에서만 `onScroll` 에서 준다. |
+| `scrolled?` | `boolean` | — | 아래 콘텐츠가 스크롤을 시작했는지. `plain` 일 때만 의미가 있다: 스크롤이 시작되면 그림자(floating)가 들어가 스크롤되는 콘텐츠 위에 뜬 것처럼 보인다. 배경은 흰 면 그대로다 — scrolled 가 더하는 것은 그림자뿐이다. `SLayout` 안에 놓았으면 **주지 않는다** — 같은 열의 `SPage` 가 자기 스크롤 상태를 올려 자동으로 들어온다. 스크롤 컨테이너를 앱이 직접 쥔 단독 배치에서만 `onScroll` 에서 준다. |
 
 #### Events
 
@@ -6118,9 +6139,16 @@ export type SNumberInputSize = SFieldSize;
 | `scrollEndSpacing?` | `boolean` | `false` | 스크롤 끝 여백. 마지막 항목이 창 하단에 붙어 "여기서 끝"이 안 읽히는 것을 막는다. **기본은 꺼져 있다.** 페이지 스크롤 자체가 예외이기 때문이다 — 대부분의 화면은 본문이 창을 꽉 채우고 스크롤은 각 영역 안에서 일어난다. 여백을 조건 없이 붙이면 내용이 화면에 거의 딱 맞는 페이지까지 그 여백 때문에 스크롤되게 만든다. 페이지가 실제로 스크롤되는 화면(`contentHeight="auto"` + 내용이 창보다 김)에서만 켠다. 페이지네이션처럼 끝을 알려주는 것이 이미 있으면 켜지 않는다. |
 | `overlayScrollbar?` | `boolean` | `false` | true면 네이티브 스크롤바를 숨기고 SPage 위에 오버레이 스크롤바를 얹는다. 스크롤바가 레이아웃 폭을 차지하지 않아 내부 콘텐츠 폭이 줄어들지 않는다. |
 | `contentHeight?` | `SPageContentHeight` | `'auto'` | 본문 높이 모드. 기본은 `auto` — 콘텐츠가 흐르고 넘치면 페이지가 스크롤한다. `fill` 은 본문이 남은 높이를 정확히 채우고 페이지는 스크롤하지 않는다. 표가 자기 안에서 스크롤하고 페이지네이션이 하단에 고정되는 목록 화면용이다. 본문 루트에 `h-full` 이 먹으므로 `<div className="flex h-full min-h-0 flex-col">` + `<STable className="min-h-0 flex-1" />` 구성이 성립한다. `fill` 에서는 페이지가 스크롤하지 않으므로 `scrollEndSpacing` 이 무시된다. |
+| `contentWidth?` | `SPageContentWidth` | `'full'` | 본문 가로 폭 모드. 기본은 `full` — 창이 넓어지면 본문도 같이 넓어진다(반응형). `fixed`·`fixedCenter` 는 본문을 **레이아웃 최소 폭일 때의 폭**으로 고정한다. 최소 폭 기준으로 그린 시안이 넓은 모니터에서 늘어나 성기어지는 것을 막는 모드다. 남는 폭은 `fixed` 면 오른쪽에, `fixedCenter` 면 좌우로 나뉘어 페이지 배경으로 남는다. 고정 폭은 GNB 폭·접힘을 반영해 저절로 따라오므로 앱이 숫자를 쓸 일은 없다. 창이 최소 폭보다 좁아지면 세 모드가 모두 같다 — 남는 폭이 없어 규칙이 꺼지고, 모자란 몫을 지금까지처럼 이 영역이 가로 스크롤로 삼킨다. 같은 열에 `SPageHeader` 가 있으면 헤더도 같은 폭·정렬을 따른다(제목과 본문의 좌우 끝이 맞는다). `SLayout` 밖에서는 기준이 될 최소 폭이 없으므로 무시된다. |
 
 ## Types
 
+### SPageHeaderVariant
+
+```ts
+export type SPageHeaderVariant = (typeof PAGE_HEADER_VARIANTS)[number];
+```
+
 ### SPageBackground
 
 ```ts
@@ -6133,6 +6161,24 @@ export type SPageBackground = (typeof PAGE_BACKGROUNDS)[number];
 export type SPageContentHeight = (typeof PAGE_CONTENT_HEIGHTS)[number];
 ```
 
+### SPageContentWidth
+
+```ts
+export type SPageContentWidth = (typeof PAGE_CONTENT_WIDTHS)[number];
+```
+
+### PAGE_HEADER_VARIANTS
+
+```ts
+/**
+ * 페이지 제목 영역의 모양 — 문서와 디자인이 부르는 이름을 그대로 쓴다.
+ * 기본값은 없다. 앱 전체에서 하나로 고정할 값이라 `SPageHeader` 가 매번 지정하게 한다.
+ * - plain: 최소 높이(상하 패딩 안에서 타이틀 한 줄), 구분선 없음, 서브 텍스트가 타이틀 아래
+ * - bar:   높이 고정 + 하단 구분선, 서브 텍스트가 타이틀과 같은 줄
+ */
+export const PAGE_HEADER_VARIANTS = ['plain', 'bar'] as const;
+```
+
 ### PAGE_BACKGROUNDS
 
 ```ts
@@ -6157,6 +6203,20 @@ export const PAGE_BACKGROUNDS = ['frame', 'neutral', 'screen'] as const;
 export const PAGE_CONTENT_HEIGHTS = ['auto', 'fill'] as const;
 ```
 
+### PAGE_CONTENT_WIDTHS
+
+```ts
+/**
+ * 본문 가로 폭 모드 — 창이 레이아웃 최소 폭보다 **넓을 때** 본문이 어떻게 설지.
+ * - full:        남는 폭을 본문이 다 쓴다 (반응형)
+ * - fixed:       창이 최소 폭일 때의 본문 폭 그대로 고정하고 왼쪽에 붙인다
+ * - fixedCenter: 같은 폭으로 고정하고 가운데 놓는다
+ *
+ * 창이 최소 폭보다 좁아지면 세 모드가 모두 같다 — 모자란 몫은 SPage 가 가로 스크롤로 삼킨다.
+ */
+export const PAGE_CONTENT_WIDTHS = ['full', 'fixed', 'fixedCenter'] as const;
+```
+
 ## Dependencies
 
 ### Used by
@@ -6283,10 +6343,10 @@ export type SPopoverType = 'default' | 'danger' | 'warning' | 'accent';
 |------|------|---------|-------------|
 | `popupTitle?` | `string` | `''` | 헤더 제목 |
 | `type?` | `SPopupType` | `'default'` | 타입 (헤더 색상) |
-| `useFooter?` | `boolean` | `false` | 하단 footer 표시 여부 |
+| `showFooter?` | `boolean` | `false` | 하단 footer 표시 여부 |
 | `submitButton?` | `SPopupSubmitButton` | — | 확인 버튼 설정 |
 | `footerLeft?` | `ReactNode` | — | footer 좌측 영역 |
-| `noPadding?` | `boolean` | `false` | 본문 기본 패딩을 없앱니다. 표를 가장자리까지 채우는 등 본문이 직접 여백을 다룰 때만 사용합니다. |
+| `padding?` | `SPopupBodyPadding` | `'default'` | 본문 안쪽 여백. 기본은 `default` — 표를 가장자리까지 채우는 등 본문이 여백을 직접 다룰 때만 `none`. (`SList` 의 `padding` 과 같은 이름이지만 기본값이 반대다 — 각 면의 성격이 다르다) |
 | `children?` | `ReactNode` | — | 본문 |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
@@ -6316,6 +6376,12 @@ export interface SPopupSubmitButton {
 }
 ```
 
+### SPopupBodyPadding
+
+```ts
+export type SPopupBodyPadding = 'default' | 'none';
+```
+
 ## Dependencies
 
 ### Depends on
@@ -6647,9 +6713,9 @@ export const SCROLL_AREA_AXES = ['vertical', 'horizontal', 'both'] as const;
 | `clearable?` | `boolean` | `false` | 지우기 버튼 — 값이 있을 때만 나타난다 |
 | `disabled?` | `boolean` | `false` | 비활성 |
 | `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. 미지정 시 부모 폭을 채운다. |
-| `focused?` | `boolean` | — | 포커스 상태 (제어/반영) |
-| `hovered?` | `boolean` | — | 호버 상태 (제어/반영) |
-| `inputClass?` | `string` | — | 내부 input 요소 className |
+| `focused?` | `boolean` | — | 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) |
+| `hovered?` | `boolean` | — | 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) |
+| `inputClassName?` | `string` | — | 내부 input 요소 className |
 | `inputStyle?` | `CSSProperties` | — | 내부 input 요소 style |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
@@ -6768,13 +6834,13 @@ export type SSectionHeaderCardChildren = ReactNode;
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `value?` | `(string \| number \| SSelectOption) \| (string \| number \| SSelectOption)[] \| null` | — | 선택 값. multi 타입이면 배열. emitValue=false(기본) 라운드트립을 위해 SSelectOption 객체도 허용 |
-| `emitValue?` | `boolean` | `false` | true면 SSelectOption 대신 원시값(string|number) 방출 |
+| `value?` | `(string \| number \| SSelectOption) \| (string \| number \| SSelectOption)[] \| null` | — | 선택 값. multi 타입이면 배열. 기본(valueAsPrimitive=false) 라운드트립을 위해 SSelectOption 객체도 허용 |
+| `valueAsPrimitive?` | `boolean` | `false` | `value`·`onValueChange` 가 옵션 객체 대신 원시값(string|number)을 주고받는다. **기본값 `false`(옵션 객체)는 유지한다** — 원본(sd-select) 호환 때문이고, 뒤집으면 이 값을 주지 않던 화면이 조용히 다른 모양의 값을 받게 되어 타입으로도 잡히지 않는다. 새로 쓰는 화면은 켜는 쪽이 다루기 쉽다 — 서버로 보내는 것도, 폼 상태에 담는 것도 결국 값 하나이기 때문이다. |
 | `name?` | `string` | — | 폼 연동용 name 속성 |
 | `options?` | `SSelectOption[]` | `[]` | 옵션 목록 (children으로 계층 표현) |
 | `type?` | `SSelectType` | `'default'` | 타입: default | multi | default_depth | multi_depth |
-| `useSearch?` | `boolean` | `false` | 검색 입력 사용 |
-| `useSelectAll?` | `boolean` | `false` | 전체선택 옵션 사용 (multi 전용) |
+| `showSearch?` | `boolean` | `false` | 검색 입력 사용 |
+| `showSelectAll?` | `boolean` | `false` | 전체선택 옵션 사용 (multi 전용) |
 | `allSelectedLabel?` | `string` | `'전체'` | 전체선택 레이블 |
 | `placeholder?` | `string` | `'선택'` | placeholder |
 | `disabled?` | `boolean` | `false` | 비활성 |
@@ -6802,7 +6868,7 @@ export type SSectionHeaderCardChildren = ReactNode;
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onValueChange` | `(value: any) => void` | 값 변경 (sdUpdate). emitValue=false(기본)면 SSelectOption(들), true면 원시값 |
+| `onValueChange` | `(value: any) => void` | 값 변경. 기본은 SSelectOption(들)이 오고, `valueAsPrimitive` 면 원시값이 온다 |
 | `onOpenChange` | `(open: boolean) => void` | 열림/닫힘 변경 (sdDropDownShow) |
 
 #### Methods (ref)
@@ -6863,7 +6929,7 @@ export type SSelectType = 'default' | 'multi' | 'default_depth' | 'multi_depth';
 | `defaultValue?` | `number` | — | 첫 패널 초기 크기. uncontrolled. 기본은 '%' 면 50, 'px' 면 240 |
 | `unit?` | `SSplitterUnit` | `'%'` | 모델·limits 를 읽는 단위 |
 | `limits?` | `readonly [number, number]` | — | [최소, 최대]. 생략하면 '%' 는 [10, 90], 'px' 는 [50, Infinity] |
-| `emitImmediately?` | `boolean` | `false` | 드래그하는 동안에도 onValueChange 를 계속 보낸다 |
+| `updateWhileDragging?` | `boolean` | `false` | 드래그하는 동안에도 `onValueChange` 를 계속 보낸다. 기본은 놓는 순간 한 번만 — 미리보기는 컴포넌트가 내부에서 그리므로, 값을 저장하는 쪽이 프레임마다 불릴 이유가 없다. 패널 크기에 맞춰 밖의 무언가를 실시간으로 다시 그려야 할 때만 켠다. |
 | `vertical?` | `boolean` | `false` | true면 패널을 위아래로 쌓는다 (Quasar q-splitter 의 horizontal 에 해당) |
 | `disabled?` | `boolean` | `false` | true면 크기를 바꿀 수 없다. 커서도 구분선도 나오지 않는다 |
 | `dividerClassName?` | `string` | — | 구분선에 얹을 클래스 |
@@ -6874,7 +6940,7 @@ export type SSelectType = 'default' | 'multi' | 'default_depth' | 'multi_depth';
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onValueChange` | `(value: number) => void` | 크기가 확정될 때. emitImmediately 가 아니면 드래그를 놓는 순간 한 번만 온다 |
+| `onValueChange` | `(value: number) => void` | 크기가 확정될 때. `updateWhileDragging` 이 아니면 드래그를 놓는 순간 한 번만 온다 |
 
 ## Types
 
@@ -6975,7 +7041,6 @@ export const STEPPER_SIZES = ['sm', 'lg'] as const;
 | `value?` | `boolean` | `false` | on/off 상태 |
 | `leftLabel?` | `string` | — | 스위치 좌측 라벨 |
 | `rightLabel?` | `string` | — | 스위치 우측 라벨 |
-| `label?` | `string` | — |  |
 | `disabled?` | `boolean` | `false` | 비활성 |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
@@ -7231,20 +7296,19 @@ export interface SSystemActionButtonMenuOption {
 | `resizable?` | `boolean` | `false` | 컬럼 너비 조절 |
 | `width?` | `string` | — |  |
 | `height?` | `string` | — |  |
-| `stickyHeader?` | `boolean` | — |  |
 | `stickyColumn?` | `STableStickyColumn` | — | 고정할 좌/우 컬럼 수 |
 | `radius?` | `'default' \| 'useTop' \| 'full'` | `'default'` | border-radius 제어 |
 | `bordered?` | `boolean` | `true` | 바깥 테두리. 기본은 `true`. `SSectionHeaderCard` 의 `padding="none"` 안에 넣어 카드 가장자리까지 채울 때 `false` 로 끈다 — 카드가 이미 바깥 테두리를 그리므로, 켜 두면 1px 두 개가 나란히 놓여 그 변만 2px 로 보인다. 페이지네이션 바의 테두리와 1px 겹침(`-mt-px`)도 함께 꺼진다. 본문 테두리가 없으면 겹칠 대상이 없어, 그대로 두면 페이지네이션만 테두리를 갖고 1px 어긋난다. |
-| `noDataLabel?` | `string` | `'데이터가 없습니다.'` |  |
-| `noDataSlot?` | `ReactNode` | — | 데이터가 없을 때 body 영역 전체를 대체하는 슬롯. 지정하면 `noDataLabel` 대신 이 콘텐츠가 헤더 아래 영역을 채우며, 버튼 등 인터랙션도 동작한다. |
-| `isLoading?` | `boolean` | `false` |  |
+| `emptyLabel?` | `string` | `'데이터가 없습니다.'` |  |
+| `emptySlot?` | `ReactNode` | — | 데이터가 없을 때 body 영역 전체를 대체하는 슬롯. 지정하면 `emptyLabel` 대신 이 콘텐츠가 헤더 아래 영역을 채우며, 버튼 등 인터랙션도 동작한다. |
+| `loading?` | `boolean` | `false` |  |
 | `dense?` | `boolean` | `false` | 행 높이를 좁게 (세로 여백만 줄인다 — 좌우 패딩은 그대로). **시작 밀도이자 밀도 토글의 스위치다.** 켜면 하단 바 우측에 `좁게 보기` · `넓게 보기` 토글이 붙는다 — 페이지네이션이 없으면 이 바를 토글만 담아 그린다. 누른 뒤의 밀도는 테이블이 내부 상태로 들고 가므로 `onDenseChange` 를 받지 않아도 토글은 동작하고, 넓게 본 뒤에도 토글은 그대로 남는다(붙일지는 이 prop 이 정한다). 이 prop 값이 바뀌면 내부 밀도도 그 값으로 맞춰진다. |
-| `noHover?` | `boolean` | `false` | true면 행에 마우스를 올려도 hover 배경(grey_05)을 표시하지 않는다 |
+| `hoverable?` | `boolean` | `true` | true면 행에 마우스를 올려도 hover 배경(grey_05)을 표시하지 않는다 |
 | `pagination?` | `STablePagination` | — | 페이지네이션 (있으면 하단 표시) |
-| `useInternalPagination?` | `boolean` | `false` | 테이블 내부에서 페이지네이션을 직접 관리 (rows를 내부 슬라이싱) |
-| `useRowsPerPageSelect?` | `boolean` | `false` | 페이지당 행 수 셀렉트 표시 |
+| `internalPagination?` | `boolean` | `false` | 테이블 내부에서 페이지네이션을 직접 관리 (rows를 내부 슬라이싱) |
+| `showRowsPerPageSelect?` | `boolean` | `false` | 페이지당 행 수 셀렉트 표시 |
 | `rowsPerPageOption?` | `SSelectOption[]` | `DEFAULT_ROWS_PER_PAGE_OPTION` |  |
-| `useVirtualScroll?` | `boolean` | `false` | 가상 스크롤 |
+| `virtualScroll?` | `boolean` | `false` | 가상 스크롤 |
 | `rowHeight?` | `number` | — |  |
 | `virtualBuffer?` | `number` | `5` |  |
 | `virtualEndThreshold?` | `number` | `10` |  |
@@ -7271,7 +7335,7 @@ export interface SSystemActionButtonMenuOption {
 |--------|------|-------------|
 | `isRowSelected` | `(row: SRow) => boolean` | 행 선택 여부 |
 | `getIsAllChecked` | `(rows: SRow[]) => boolean \| null` | 주어진 행들의 전체 선택 상태 (true/false/null=indeterminate) |
-| `getPaginationInfo` | `<union 2종>` | 내부 페이지네이션 정보 (useInternalPagination 아니면 null) |
+| `getPaginationInfo` | `<union 2종>` | 내부 페이지네이션 정보 (internalPagination 아니면 null) |
 | `getStickyStyle` | `(colIdx: number) => CSSProperties` | 컬럼 sticky 스타일 (CSS 변수 + 고정폭) |
 | `setRowCount` | `(count: number) => void` | 가상 스크롤 총 행 수 설정 |
 | `updateRowSelect` | `(row: SRow) => void` | 단일 행 선택 토글 (sd-table updateRowSelect) — onSelectedChange 발생 |
@@ -7405,7 +7469,7 @@ export type STableColumnField = string | ((row: SRow) => any);
 |------|------|---------|-------------|
 | `value` | `string` | — | 현재 선택된 탭 value |
 | `tabs` | `STabOption[]` | — | 탭 옵션 목록 |
-| `isSub?` | `boolean` | `false` | 서브 탭(밑줄형) 스타일 |
+| `sub?` | `boolean` | `false` | 서브 탭(밑줄형) 스타일 |
 | `vertical?` | `boolean` | `false` | 세로 배치 (sub 전용 — main 폴더형은 항상 가로) |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
@@ -7539,7 +7603,7 @@ export const TAG_COLORS = [
 | `icon?` | `SIconName` | — | 좌측 아이콘 |
 | `iconColor?` | `SColor` | — | 좌측 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상 |
 | `iconRotate?` | `0 \| 90 \| 180 \| 270` | — | 좌측 아이콘 회전 각도. 같은 아이콘을 방향만 바꿔 쓸 때 (`SIcon` 의 `rotate` 로 그대로 간다) |
-| `labelClass?` | `string` | — | 레이블 span에 추가할 클래스 |
+| `labelClassName?` | `string` | — | 레이블 span에 추가할 클래스 |
 | `rightArrow?` | `STextLinkArrow` | `'none'` | 우측 화살표 |
 | `rightArrowRotate?` | `0 \| 90 \| 180 \| 270` | — | 우측 화살표 회전 각도. 같은 화살표를 방향만 바꿔 쓸 때 (`SIcon` 의 `rotate` 로 그대로 간다) |
 | `underline?` | `boolean` | `false` | 밑줄 여부 |
@@ -7599,9 +7663,9 @@ export type STextLinkSize = 'sm' | 'md' | 'lg';
 | `rows?` | `number` | `3` | 행 수 |
 | `rules?` | `Rule[]` | — | 유효성 규칙 — blur 시 자동 검증 |
 | `status?` | `SFieldStatus` | — | 필드 상태 ('default' | 'pass' | 'error') |
-| `focused?` | `boolean` | — | 포커스 상태 (제어/반영) |
-| `hovered?` | `boolean` | — | 호버 상태 (제어/반영) |
-| `textareaClass?` | `string` | — | 내부 textarea 요소 className |
+| `focused?` | `boolean` | — | 포커스 상태를 밖에서 지정한다 — 강조 테두리·링이 즉시 걸린다 (SField 로 그대로 넘어간다) |
+| `hovered?` | `boolean` | — | 호버 상태를 밖에서 지정한다 — 강조는 `focused` 와 같다 (SField 로 그대로 넘어간다) |
+| `textareaClassName?` | `string` | — | 내부 textarea 요소 className |
 | `textareaStyle?` | `CSSProperties` | — | 내부 textarea 요소 style |
 | `label?` | `string` | — |  |
 | `labelWidth?` | `number \| string` | — |  |
@@ -7657,7 +7721,7 @@ export type STextLinkSize = 'sm' | 'md' | 'lg';
 | `placeholder?` | `string` | `'00:00'` |  |
 | `disabled?` | `boolean` | `false` |  |
 | `clearable?` | `boolean` | `false` |  |
-| `useMeridiem?` | `boolean` | — | 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. |
+| `showMeridiem?` | `boolean` | — | 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. |
 | `minuteStep?` | `number` | `1` |  |
 | `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. |
 | `name?` | `string` | — |  |
@@ -7730,7 +7794,7 @@ export type STimePickerSize = 'sm' | 'md';
 | `placeholder?` | `string` | `'00:00 ~ 23:59'` |  |
 | `disabled?` | `boolean` | `false` |  |
 | `clearable?` | `boolean` | `false` |  |
-| `useMeridiem?` | `boolean` | — | 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. |
+| `showMeridiem?` | `boolean` | — | 오전/오후 선택 표시 여부. 지정하지 않으면 type="midday"일 때만 켜집니다. |
 | `minuteStep?` | `number` | `1` |  |
 | `rangeOrder?` | `STimeRangePickerRangeOrder` | `'strict'` | 범위 순서 정책. strict는 시작 시간이 종료 시간보다 늦어지지 않도록 보정합니다. |
 | `width?` | `SFieldWidth` | — | 컨트롤 너비 — 폭 등급(`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) · 숫자=px · CSS 길이. 등급은 `--cmp-field-width-*` 토큰으로 풀리므로 토큰이 바뀌면 화면이 따라간다. 값 길이에 상한이 없으면 `"100%"` 로 두어 행 전체를 쓴다. |
@@ -7838,7 +7902,7 @@ export type STimeRangePickerRangeOrder = 'strict' | 'allow-cross-day';
 | `link?` | `string` | — | 우측 링크 URL |
 | `linkLabel?` | `string` | — | 링크 레이블 (없으면 URL) |
 | `buttonLabel?` | `string` | — | 우측 버튼 레이블 |
-| `useClose?` | `boolean` | `false` | 닫기 버튼 표시 |
+| `showClose?` | `boolean` | `false` | 닫기 버튼 표시 |
 | `type?` | `SToastType` | `'default'` | 타입(색상/프리셋) |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
@@ -7936,7 +8000,7 @@ export type SToggleSize = 'xs' | 'sm';
 | `placement?` | `STooltipPlacement` | `'top'` | 표시 방향 |
 | `sideOffset?` | `number` | `8` | 앵커와의 간격(px) |
 | `tooltipType?` | `STooltipType` | `'default'` | 배경/텍스트 색상 타입 |
-| `useClose?` | `boolean` | `false` | 우측 상단 닫기 버튼. 켜면 자동 닫힘이 비활성화되고 X(또는 hide())로만 닫힘 (hover·click 공통, `trigger='none'` 에서는 무시) |
+| `showClose?` | `boolean` | `false` | 우측 상단 닫기 버튼. 켜면 자동 닫힘이 비활성화되고 X(또는 hide())로만 닫힘 (hover·click 공통, `trigger='none'` 에서는 무시) |
 | `disabled?` | `boolean` | `false` | 비활성 — 트리거만 렌더하고 툴팁을 열지 않음 |
 | `children?` | `ReactNode` | — | 커스텀 트리거. 없으면 아이콘 트리거를 렌더 |
 | `icon?` | `SIconName` | `'helpOutline'` | 기본(아이콘) 트리거 설정 |
@@ -8013,9 +8077,9 @@ export type STooltipType = 'default' | 'danger' | 'warning' | 'accent';
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `node` | `STreeNode` | — | 렌더링할 노드 |
-| `depth?` | `number` | `1` | 중첩 단계 |
-| `isLast?` | `boolean` | `true` | 마지막 자식 여부 |
-| `ancestorLast?` | `boolean[]` | `[]` | 상위 depth 별 마지막 자식 여부 |
+| `depth?` | `number` | `1` | 중첩 단계. 연결선의 들여쓰기 폭을 정한다. |
+| `last?` | `boolean` | `true` | 마지막 자식 여부. 연결선을 이 아이템에서 끊을지 결정한다. |
+| `ancestorLast?` | `boolean[]` | `[]` | 상위 depth 별 마지막 자식 여부. 조상 쪽 연결선을 어디까지 잇는지 정한다. |
 | `expanded?` | `boolean` | `false` | 펼침 상태 |
 | `selected?` | `boolean` | `false` | 선택 상태 |
 | `guideline?` | `boolean` | `true` | depth 연결선 표시 여부 |
@@ -8046,7 +8110,7 @@ export type STooltipType = 'default' | 'danger' | 'warning' | 'accent';
 | `defaultExpandedIds?` | `string[]` | — | 비제어 펼침 초기값 |
 | `selectable?` | `boolean` | `true` | 체크박스 표시 여부 |
 | `size?` | `STreeSize` | `'sm'` | 타이포그래피 크기 |
-| `useAll?` | `boolean` | `false` | 체크박스 사용 시 최상단 전체 선택 아이템 표시 여부 |
+| `showSelectAll?` | `boolean` | `false` | 체크박스 사용 시 최상단 전체 선택 아이템 표시 여부 |
 | `guideline?` | `boolean` | `true` | depth 연결선 표시 여부 |
 | `border?` | `boolean` | `true` | 아이템 하단 border 표시 여부 |
 | `cascadeSelection?` | `boolean` | `true` | 부모 선택 시 하위 노드까지 함께 토글 |