sellmate-design-system-react 9.0.0-beta.109 → 9.0.0-beta.111

package/AGENTS.md

@@ -860,7 +860,9 @@ SModal.create({ component: OrderModal, componentProps: { orderId } })
 
 **`button` 은 `SButton` 의 prop 을 그대로 받는다** — `icon`·`rightIcon`·`outline`·`disabled` 등을 함께 넘길 수 있다. 단 **`size` 는 타입에 없다**: 버튼 크기는 놓이는 자리가 정하므로(§3-5-2) 푸터가 준다. 모달·드로어·팝업의 푸터는 **언제나 `md`** 라 받을 것이 없다 — 크기를 고를 수 있는 것은 카드 둘뿐이다(§3-7-8 `footerSize`). **`color` 는 주지 않는 것이 기본**이다 — 주지 않으면 주 액션 규칙대로 `primary` 가 되고, 그 버튼이 파괴적 액션일 때만 §3-5-3 에 따라 `danger` 를 준다. 카드(§3-7-8)의 `button` 도 같다.
 
-**확인 모달은 확인 버튼 하나로 세우는 것이 기본이다 — `subButtonLabel` 을 주지 않는다.** 비워 두면 서브 버튼이 아예 서지 않는다. 답하지 않고 나가는 길은 **X 버튼이 이미 맡고**(늘 서 있다), `persistent` 를 켜지 않았으면 백드롭·ESC 로도 닫힌다(§3-3-5).
+**`type` 은 모달이 말하는 성격으로 고른다.** `positive` 는 알림, `negative` 는 되돌릴 수 없거나 위험한 일의 확인, `complete` 는 작업·절차가 **끝났음**(등록·처리 완료), `default` 는 중립 확인이다. 아이콘과 확인 버튼 색은 `type` 이 정하므로 앱이 따로 고르지 않는다 — 저장·변경 같은 단순 알림은 `positive`, 상품 등록·주문 처리처럼 한 건의 작업이나 절차가 마무리됐음을 알릴 때는 `complete` 다.
+
+**확인 모달은 확인 버튼 하나로 세우는 것이 기본이다 — `subButtonLabel` 을 주지 않는다.** 비워 두면 서브 버튼이 아예 서지 않는다. 답하지 않고 나가는 길은 **X 버튼이 이미 맡고**(늘 서 있다), `persistent` 를 켜지 않았으면 백드롭으로, `closeOnEscape` 를 끄지 않았으면 ESC 로도 닫힌다(§3-3-5).
 
 **서브 버튼은 `onCancel` 이 닫는 것 말고 따로 할 일이 있을 때만 둔다.** 눌러도 창만 닫힌다면 X 와 똑같은 일을 하는 버튼이 하나 더 서는 것이라, 어느 것을 눌러야 하는지가 오히려 흐려진다. **되묻는 모달이라고 예외가 아니다** — "삭제할까요?" 에 답하지 않고 나가는 것은 X 로 충분하다.
 
@@ -873,6 +875,8 @@ SModal.create({ component: OrderModal, componentProps: { orderId } })
      mainButtonLabel: '자동 취소', subButtonLabel: '수동 처리' })
      .onOk(() => cancelShortOrders()).onCancel(() => openManualFlow())
      // 서브가 창을 닫는 것이 아니라 다른 흐름을 시작한다
+✅ SModal.confirm({ type: 'complete', modalTitle: '상품 등록이 완료되었습니다', mainButtonLabel: '확인' })
+     // 한 건의 작업·절차가 끝났음을 알린다 — 저장·변경 같은 단순 알림은 'positive'
 
 ❌ SModal.confirm({ …, mainButtonLabel: '삭제', subButtonLabel: '취소' }).onCancel(() => {})
    // 눌러도 닫히기만 한다 — X 가 이미 하는 일
@@ -888,28 +892,32 @@ SModal.create({ component: OrderModal, componentProps: { orderId } })
 
 **모달 안에서도 앱의 훅을 그냥 쓴다 — 단, 앱 루트에 `SModalOutlet` 이 있어야 한다 (§4-1).** outlet 이 있으면 명령형 모달이 앱 렌더 트리의 자식으로 그려지므로 `useQuery`·`useNavigate`·`useTheme` 같은 Context 기반 훅이 페이지에서와 똑같이 동작한다. **모달 컴포넌트를 Provider 로 다시 감싸지 않는다.** outlet 없이 띄우면 모달이 별도 React 루트로 떠서 Provider 가 하나도 닿지 않고, `No QueryClient set` 처럼 모달을 여는 순간에만 터진다.
 
-#### 3-3-5. 닫기 경로 — `persistent` 기본값은 컴포넌트마다 다르다
+#### 3-3-5. 닫기 경로 — `persistent`(백드롭)와 `closeOnEscape`(ESC)는 따로 제어한다
 
-**입력을 담는 모달은 백드롭 클릭·ESC 로 닫히지 않는 것이 기본**이다. 닫기 시도는 흔들림(shake)으로만 반응한다. 작성 중인 내용을 실수로 잃지 않게 하기 위한 것이다. 반면 `SConfirmModal` 은 잃을 입력이 없으므로 **백드롭·ESC 로 닫히는 것이 기본**이다.
+**`persistent` 는 백드롭(바깥) 클릭만, `closeOnEscape` 는 ESC 만 제어한다.** 두 prop 은 서로 영향을 주지 않는다. **ESC 는 로딩 모달을 뺀 모든 모달·드로어에서 기본으로 닫힌다**(`closeOnEscape` 기본 `true`, `SLoadingModal` 만 `false`). **입력을 담는 모달은 백드롭 클릭으로 닫히지 않는 것이 기본**이다 — 닫기 시도는 흔들림(shake)으로만 반응한다. 작성 중인 내용을 실수로 잃지 않게 하기 위한 것이다. 반면 `SConfirmModal` 은 잃을 입력이 없으므로 **백드롭으로도 닫히는 것이 기본**이다.
 
-| | `persistent` 기본값 | 기본 닫기 경로 | 백드롭·ESC |
-| --- | --- | --- | --- |
-| `SActionModal` · `SLoadingModal` | `true` | X 버튼, 모달 안의 버튼 | 막힘 (흔들림) |
-| ↳ `SActionModal` 에 `showClose={false}` | `true` | **모달 안의 버튼만** | 막힘 (흔들림) |
-| `SDrawer` | `true` | X 버튼, footer 버튼 | 막힘 (흔들림) |
-| `SConfirmModal` | `false` | X 버튼, 확인 버튼 | **닫힌다** |
-| `SPopover` · `STooltip` · `SSelect` 등 floating | — | 바깥 클릭·ESC | **막지 않는다** — 이 규칙의 대상이 아니다 |
+| | `persistent` 기본값 | `closeOnEscape` 기본값 | 기본 닫기 경로 | 백드롭 | ESC |
+| --- | --- | --- | --- | --- | --- |
+| `SActionModal` | `true` | `true` | X 버튼, 모달 안의 버튼, ESC | 막힘 (흔들림) | **닫힌다** |
+| `SLoadingModal` | `true` | **`false`** | (error 상태) X 버튼, 모달 안의 버튼 | 막힘 (흔들림) | 막힘 (흔들림) |
+| ↳ `SActionModal` 에 `showClose={false}` | `true` | `true` | 모달 안의 버튼, ESC | 막힘 (흔들림) | **닫힌다** |
+| `SDrawer` | `true` | `true` | X 버튼, footer 버튼, ESC | 막힘 (흔들림) | **닫힌다** |
+| `SConfirmModal` | `false` | `true` | X 버튼, 확인 버튼, 백드롭, ESC | **닫힌다** | **닫힌다** |
+| `SPopover` · `STooltip` · `SSelect` 등 floating | — | — | 바깥 클릭·ESC | **막지 않는다** — 이 규칙의 대상이 아니다 | **막지 않는다** |
+
+`SLoadingModal`(과 `SModal.loading()`)은 로딩 중 임의로 닫히지 않게 `persistent` 가 `true`, `closeOnEscape` 가 `false` 가 기본이다. error 상태에서는 모달 안의 버튼이 필수로 서므로 갇히지 않는다.
 
 따라서 다음을 지킨다.
 
 - **닫을 수단을 반드시 하나는 둔다.** X 버튼은 기본으로 서 있으므로, 이 규칙이 걸리는 것은 `SActionModal` 에 `showClose={false}` 를 준 경우다. 그때 `button` 도 `footerLeft` 도 없으면 사용자가 모달을 닫을 방법이 없다 — 백드롭이 더 이상 탈출구가 아니기 때문이다. 개발 중 콘솔 경고가 뜬다.
-- **`SActionModal` 의 `showClose={false}` 는 액션을 끝내야만 나갈 수 있는 모달에만.** 필수 약관 동의, 필수 정보 입력처럼 **중간에 빠져나가면 앱이 정의되지 않은 상태로 남는 경우**로 한정한다. 그 외에는 기본값(X 가 있는 상태)을 그대로 둔다 — "집중시키고 싶다"는 이유로 X 를 없애지 않는다. `persistent` 기본값(true)과 합쳐져 나가는 길이 버튼 하나뿐이 되므로, 그 버튼은 **비활성 상태로 시작하더라도 사용자가 스스로 풀 수 있는 조건**이어야 한다(동의 체크 등). 서버 응답을 기다려야 푸는 조건이면 실패 시 사용자가 갇힌다.
-- **기본값과 같은 `persistent` 를 직접 주지 않는다.** 중복이다.
+- **`SActionModal` 의 `showClose={false}` 는 액션을 끝내야만 나갈 수 있는 모달에만, `closeOnEscape={false}` 와 함께.** 필수 약관 동의, 필수 정보 입력처럼 **중간에 빠져나가면 앱이 정의되지 않은 상태로 남는 경우**로 한정한다. 그 외에는 기본값(X 가 있는 상태)을 그대로 둔다 — "집중시키고 싶다"는 이유로 X 를 없애지 않는다. `persistent` 기본값(true)으로 백드롭이 막혀 있고 ESC 는 `closeOnEscape` 기본값(true)이라 열려 있다 — 필수 액션이면 `closeOnEscape={false}` 도 함께 줘서 ESC 로 빠져나가지 못하게 한다. 그러면 나가는 길이 버튼 하나뿐이 되므로 그 버튼은 **비활성 상태로 시작하더라도 사용자가 스스로 풀 수 있는 조건**이어야 한다(동의 체크 등). 서버 응답을 기다려야 푸는 조건이면 실패 시 사용자가 갇힌다.
+- **기본값과 같은 `persistent`·`closeOnEscape` 를 직접 주지 않는다.** 중복이다.
+- **`closeOnEscape={false}` 는 ESC 한 번으로 빠져나가면 안 되는 흐름에만.** 입력 중 ESC 로 내용을 잃으면 안 되는 긴 폼이나, 반드시 버튼으로 답을 받아야 하는 확인처럼 한정한다. 그 외에는 기본값(ESC 로 닫힘)을 그대로 둔다. `persistent` 와 `closeOnEscape={false}` 를 함께 켜면 백드롭·ESC 가 모두 막히므로, X 나 모달 안의 버튼 같은 나가는 길이 반드시 있어야 한다 — `SActionModal` 에서 `showClose={false}` 까지 겹치면 `button`·`footerLeft` 가 없을 때 개발 중 콘솔 경고가 뜬다.
 - **`SActionModal`·`SDrawer` 에 `persistent={false}` 는 잃을 입력이 없을 때만.** 단순 알림처럼 임의로 닫혀도 아무것도 사라지지 않는 경우로 한정한다.
 - **`SConfirmModal` 에 `persistent` 를 켜는 것은 반드시 답을 받아야 할 때만.** 되돌릴 수 없는 파괴적 작업의 확인처럼, 임의로 닫히면 안 되는 경우로 한정한다.
-- **`SConfirmModal` 에 `persistent` 와 `mainButtonDisabled` 를 함께 켜면 나가는 길이 X 하나만 남는다.** 갇히지는 않지만(X 는 늘 서 있다) 확인이 왜 잠겼는지가 화면에 없으면 막다른 길로 읽힌다 — 잠근 이유를 `bottomMessage` 나 `contentSlot` 에 함께 둔다(§3-3-4).
+- **`SConfirmModal` 에 `persistent`·`closeOnEscape={false}` 와 `mainButtonDisabled` 를 함께 켜면 나가는 길이 X 하나만 남는다.** 갇히지는 않지만(X 는 늘 서 있다) 확인이 왜 잠겼는지가 화면에 없으면 막다른 길로 읽힌다 — 잠근 이유를 `bottomMessage` 나 `contentSlot` 에 함께 둔다(§3-3-4).
 
-작성 중인 내용이 있을 때 닫기를 시도하면 이탈 안내를 띄우는 것은 **소비 앱 몫**이다. 디자인 시스템은 dirty 상태를 알지 못하므로 백드롭·ESC 를 일괄 차단할 뿐이다. 안내가 필요하면 앱이 자체 dirty 판정 후 `SModal.confirm` 으로 띄운다.
+작성 중인 내용이 있을 때 닫기를 시도하면 이탈 안내를 띄우는 것은 **소비 앱 몫**이다. 디자인 시스템은 dirty 상태를 알지 못하므로 백드롭만 일괄 차단하고 ESC 는 열려 있다. ESC 로 닫힐 때도 안내가 필요하면 앱이 `onOpenChange` 에서 자체 dirty 판정 후 닫지 않고 `SModal.confirm` 으로 띄운다.
 
 #### 3-3-6. 전역 로딩 오버레이 — `loading`
 
@@ -2237,6 +2245,29 @@ const [selectedId, setSelectedId] = useState<string>();
    </STooltip>
 ```
 
+#### 3-7-13. 숫자 — SNumberInput 의 min·max 는 검증 경계다
+
+`min`·`max` 는 `<input type="number">` 의 그것과 같다 — **값을 고쳐 쓰지 않는 검증 경계**다. 범위를 벗어나면 blur·제출 시 에러 상태가 서고, 사용자가 친 값은 그대로 남아 앱의 범위 가드에 도달한다.
+
+- **문구를 앱이 대지 않아도 된다.** `rules` 도 `SForm` 도 없는 화면에서 `min`·`max` 만 주면 DS 가 「1~99 사이로 입력해 주세요.」 같은 기본 안내를 자동으로 붙인다. 범위 이탈이 아무 표시 없이 지나가는 경로가 없다.
+- **화면의 말로 바꾸려면 `rules` 를 준다.** 「우선순위는 1부터」처럼 그 화면에서만 통하는 문구가 있으면 `rules` 가 DS 기본 문구를 이긴다. 앱이 직접 준 `errorMessage` 도 마찬가지다.
+- **`SForm` 안에서는 범위 이탈이 제출을 막는다.** `rules` 를 따로 걸지 않아도 그렇다 — 네이티브 폼과 같다.
+- **빈 칸(`null`)은 범위 판정 대상이 아니다.** 필수 입력은 `min` 이 아니라 `rules` 로 막는다.
+- **경계로 붙여도 사용자가 놀라지 않는 값에서만 `clampOnBlur` 를 켠다.** 켜면 blur 시 값이 경계로 **말없이 바뀌고** `onValueChange` 로 되쏘아진다 — 그래서 앱의 범위 가드에는 범위 밖 값이 도달하지 않는다. 재고 조정 수량처럼 보정이 자연스러운 자리에만 쓰고, 업무 규칙(최소 주문 수량·우선순위 시작값)에는 쓰지 않는다.
+- 스테퍼(`showButton`)와 위/아래 화살표는 `clampOnBlur` 와 무관하게 언제나 `min`·`max` 를 한계로 삼는다.
+
+```tsx
+✅ <SNumberInput label="우선순위" min={1} max={99} value={v} onValueChange={setV} />
+   {/* 0 을 넣고 blur 하면 0 이 남고 에러가 선다 — 저장 가드의 v < 1 이 그대로 걸린다 */}
+
+✅ <SNumberInput label="우선순위" min={1} max={99} value={v} onValueChange={setV}
+     rules={[v => (typeof v === 'number' && (v < 1 || v > 99) ? '우선순위는 1부터 99까지입니다.' : true)]} />
+   {/* 문구만 화면의 말로 바꾼다 */}
+
+❌ <SNumberInput label="우선순위" min={1} clampOnBlur value={v} onValueChange={setV} />
+   {/* 0 이 1 로 바뀐 뒤 도착하므로 저장 직전의 v < 1 가드는 영원히 걸리지 않는다 */}
+```
+
 #### 3-7-14. 로고 — SLogo
 
 셀메이트·서비스 로고는 `<svg>` 를 직접 붙이지 않고 `SLogo` 를 쓴다. **`SIcon` 과 같은 손맛(`name`·`size`·`color`)이지만 두 가지가 다르다.**
@@ -2268,29 +2299,6 @@ const [selectedId, setSelectedId] = useState<string>();
 ❌ <SLogo color="grey_45" />                               {/* 물러날 이유가 없으면 브랜드 색 그대로 둔다 */}
 ```
 
-#### 3-7-13. 숫자 — SNumberInput 의 min·max 는 검증 경계다
-
-`min`·`max` 는 `<input type="number">` 의 그것과 같다 — **값을 고쳐 쓰지 않는 검증 경계**다. 범위를 벗어나면 blur·제출 시 에러 상태가 서고, 사용자가 친 값은 그대로 남아 앱의 범위 가드에 도달한다.
-
-- **문구를 앱이 대지 않아도 된다.** `rules` 도 `SForm` 도 없는 화면에서 `min`·`max` 만 주면 DS 가 「1~99 사이로 입력해 주세요.」 같은 기본 안내를 자동으로 붙인다. 범위 이탈이 아무 표시 없이 지나가는 경로가 없다.
-- **화면의 말로 바꾸려면 `rules` 를 준다.** 「우선순위는 1부터」처럼 그 화면에서만 통하는 문구가 있으면 `rules` 가 DS 기본 문구를 이긴다. 앱이 직접 준 `errorMessage` 도 마찬가지다.
-- **`SForm` 안에서는 범위 이탈이 제출을 막는다.** `rules` 를 따로 걸지 않아도 그렇다 — 네이티브 폼과 같다.
-- **빈 칸(`null`)은 범위 판정 대상이 아니다.** 필수 입력은 `min` 이 아니라 `rules` 로 막는다.
-- **경계로 붙여도 사용자가 놀라지 않는 값에서만 `clampOnBlur` 를 켠다.** 켜면 blur 시 값이 경계로 **말없이 바뀌고** `onValueChange` 로 되쏘아진다 — 그래서 앱의 범위 가드에는 범위 밖 값이 도달하지 않는다. 재고 조정 수량처럼 보정이 자연스러운 자리에만 쓰고, 업무 규칙(최소 주문 수량·우선순위 시작값)에는 쓰지 않는다.
-- 스테퍼(`showButton`)와 위/아래 화살표는 `clampOnBlur` 와 무관하게 언제나 `min`·`max` 를 한계로 삼는다.
-
-```tsx
-✅ <SNumberInput label="우선순위" min={1} max={99} value={v} onValueChange={setV} />
-   {/* 0 을 넣고 blur 하면 0 이 남고 에러가 선다 — 저장 가드의 v < 1 이 그대로 걸린다 */}
-
-✅ <SNumberInput label="우선순위" min={1} max={99} value={v} onValueChange={setV}
-     rules={[v => (typeof v === 'number' && (v < 1 || v > 99) ? '우선순위는 1부터 99까지입니다.' : true)]} />
-   {/* 문구만 화면의 말로 바꾼다 */}
-
-❌ <SNumberInput label="우선순위" min={1} clampOnBlur value={v} onValueChange={setV} />
-   {/* 0 이 1 로 바뀐 뒤 도착하므로 저장 직전의 v < 1 가드는 영원히 걸리지 않는다 */}
-```
-
 #### 3-7-15. 로딩 중 자리 — SSkeleton vs SLoadingContainer vs SCircleProgress
 
 | 판별 | 사용 |
@@ -4047,7 +4055,7 @@ function SettingsTab({
 - **푸터는 고정하고 단계 본문만 스크롤한다.** 카드를 `flex h-full flex-col` 로 두고 본문을 `SScrollArea axis="vertical" overlayScrollbar` + `min-h-0 flex-1` 로 잇는다. `SCard` 는 기본이 `h-fit` 이라 이 사슬을 빠뜨리면 2단계처럼 내용이 긴 단계에서 카드가 자라 푸터가 화면 밖으로 밀린다 — 짧은 첫 단계에서는 드러나지 않아 놓치기 쉽다.
 - 검증 결과처럼 일부가 빠지는 단계는 **무엇이 빠지는지 먼저 말한다** — 표 위 `SCallout type="danger"` 에 건수와 처리 방법을 적는다.
 - **완료 단계는 결과 안내다** — 성공 아이콘(`SIcon`, `--sys-color-fg-success`) · 제목(`typo-heading-sm`) · 건수 설명(`typo-body-sm-default` + `text-fg-secondary`)을 본문 가운데에 세로로 쌓는다. 건너뛴 것이 있으면 그 건수도 다시 적는다. 프레임이 이미 카드라 **결과를 카드로 한 번 더 두르지 않는다**(§2-0). 세로 가운데에 놓으려면 본문 쌓기 상자에 `min-h-full`, 결과 블록에 `flex-1 justify-center` 를 준다 — `h-full` 은 기댈 높이가 없어 듣지 않는다.
-- **모달 안에서도 같은 구성이다.** `SActionModal` 본문 맨 위에 스텝퍼를 두고, 이전은 `footerLeft`, 다음은 `button` 으로 넘긴다 — 모달 푸터도 같은 API 다. 그만두기는 모달의 닫기(X)가 맡는다. 단계를 오가며 입력이 쌓이지만 `SActionModal` 은 기본이 바깥 클릭·ESC 로 닫히지 않으므로(§3-3-5) `persistent` 를 따로 주지 않는다.
+- **모달 안에서도 같은 구성이다.** `SActionModal` 본문 맨 위에 스텝퍼를 두고, 이전은 `footerLeft`, 다음은 `button` 으로 넘긴다 — 모달 푸터도 같은 API 다. 그만두기는 모달의 닫기(X)가 맡는다. 단계를 오가며 입력이 쌓이지만 `SActionModal` 은 기본이 바깥 클릭으로 닫히지 않으므로(§3-3-5) `persistent` 를 따로 주지 않는다.
 
 <!-- recipe:src/recipes/ProductBulkUploadPage.tsx — 아래 코드 블록은 이 파일에서 생성된다(scripts/gen-recipes.mjs). 여기를 고치지 말고 파일을 고친다 -->
 ```tsx
@@ -5064,7 +5072,7 @@ function TemplatePanel({ onPick }: { onPick: (body: string) => void }) {
 - **모달·드로어의 푸터 버튼은 `SForm` 밖에 그려진다.** 본문의 `SForm` 은 푸터의 `type="submit"` 을 받지 못하므로, 저장 버튼에서 **`SForm` 의 ref `validate()`** 로 검증하고 실패하면 `focusFirstInvalid()` 로 첫 필드에 보낸다. 페이지의 카드 푸터(§4-11)는 `SForm` 이 카드를 감싸므로 submit 이 닿는다 — 이 차이를 섞지 않는다.
 - **`button` 은 눌러도 닫지 않는다.** 저장이 끝난 뒤에 모달은 `modalRef.ok()`, 드로어는 닫기 상태로 닫는다. 목록 갱신은 `SModal.create(...).onOk()` 에서 한다.
 - **푸터는 `md` 고정**이고 `footerLeft` 슬롯 버튼에도 `size="md"` 를 명시한다 (§3-5-2). 등록 모달의 취소는 `footerLeft`, 드로어의 삭제(한 건의 파괴 액션)는 `footerLeft` 에 `danger outline` 이다 (§3-5-3).
-- **닫기 경로는 기본값 그대로다.** `SActionModal`·`SDrawer` 는 입력을 담으므로 바깥 클릭·ESC 로 닫히지 않는 것이 기본이다 (§3-3-5) — `persistent` 를 주지 않는다.
+- **닫기 경로는 기본값 그대로다.** `SActionModal`·`SDrawer` 는 입력을 담으므로 바깥 클릭으로 닫히지 않는 것이 기본이다 (§3-3-5) — `persistent` 를 주지 않는다. ESC 는 기본으로 닫히며 `closeOnEscape` 도 주지 않는다.
 - **드로어는 본문 여백을 넣지 않는다** — 모달은 여백 토큰을 스스로 넣지만, 드로어는 회색 바탕(토큰)만 깔고 여백은 담는 쪽이 준다. 직접 만든 영역 규칙(§2-2)으로 준다. 흰 표·카드가 회색 바탕 위에 놓여 경계가 읽힌다.
 - **모달 높이는 주지 않는다** (§3-3-1) — 내용이 정하고 85% 에서 멈춘다. **그때 스크롤되는 것은 본문이 아니라 표다** — 본문 바로 아래 `flex h-full min-h-0 flex-col` 상자를 두고 표에 `min-h-0 flex-1` 을 준다. 그러면 단계형 모달의 2단계처럼 표가 길어져도 스텝퍼·안내·푸터는 제자리에 있고 표가 남은 높이를 채운다. 건너뛸 행 수처럼 표에 대한 한 줄 상태는 표 바로 위 `SContextAlert` 다 (§3-2-1).
 - **모달 안 단계형은 페이지 단계형(§4-11 가로형)과 같은 구성이다** — 본문 맨 위 가운데 스텝퍼, 이전은 `footerLeft`, 다음·실행은 `button`, 그만두기는 닫기(X). 단계마다 바뀌는 `button` 은 `SActionModalProps['button']` 으로 타입을 붙인다.
@@ -5244,8 +5252,8 @@ export default function ProductOverlayPage() {
 
 /**
  * 상세 드로어 — 목록을 보면서 한 건을 고친다.
- * 레이어라 어디서 띄워도 레이아웃에 영향이 없다 (§2-0). 닫기 경로는 X 와 푸터뿐이다 — 입력을 담으므로
- * 바깥 클릭·ESC 로 닫히지 않는 것이 기본이고 그대로 둔다 (§3-3-5)
+ * 레이어라 어디서 띄워도 레이아웃에 영향이 없다 (§2-0). 닫기 경로는 X·푸터·ESC 다 — 입력을 담으므로
+ * 바깥 클릭으로 닫히지 않는 것이 기본이고 그대로 둔다 (§3-3-5)
  */
 function ProductDrawer({ product, onClose }: { product: Product; onClose: () => void }) {
   const [values, setValues] = useState<Values>(product);

package/README.md

@@ -158,14 +158,14 @@ outlet 이 있으면 모달이 앱 렌더 트리의 자식으로 그려져 **Que
 
 컴포넌트 조합·간격·타이포 등 **화면을 만들 때 지켜야 할 규칙**은 패키지에 함께 배포됩니다.
 
-| 파일                                                                         | 용도                                                                     |
-| ---------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
-| `node_modules/sellmate-design-system-react/AGENTS.md`                        | 사람이 읽는 사용 규칙서                                                  |
-| `node_modules/sellmate-design-system-react/dist/llms.txt`                    | **AI 가 항상 읽는 문서** — 규칙 + 토큰 어휘 + 컴포넌트 인덱스 (약 32KB)  |
-| `node_modules/sellmate-design-system-react/dist/components/<이름>/README.md` | 컴포넌트별 Props/Events — 쓸 컴포넌트만 골라서 읽습니다                  |
-| `node_modules/sellmate-design-system-react/dist/llms-full.txt`               | 위 둘을 한 파일에 합친 판본 (약 106KB) — 단일 파일만 물릴 수 있는 도구용 |
-
-Props 를 `llms.txt` 에서 뺀 이유: 전체 컴포넌트 Props 가 분량의 70% 를 차지하는데,
+| 파일                                                                         | 용도                                                          |
+| ---------------------------------------------------------------------------- | ------------------------------------------------------------- |
+| `node_modules/sellmate-design-system-react/AGENTS.md`                        | 사람이 읽는 사용 규칙서                                       |
+| `node_modules/sellmate-design-system-react/dist/llms.txt`                    | **AI 가 항상 읽는 문서** — AGENTS.md 전문 + 토큰 어휘         |
+| `node_modules/sellmate-design-system-react/dist/components/<이름>/README.md` | 컴포넌트별 Props/Events — 쓸 컴포넌트만 골라서 읽습니다       |
+| `node_modules/sellmate-design-system-react/dist/llms-full.txt`               | 위 둘을 한 파일에 합친 판본 — 단일 파일만 물릴 수 있는 도구용 |
+
+Props 를 `llms.txt` 에서 뺀 이유: 전체 컴포넌트 Props 가 규칙만큼 큰 분량을 차지하는데,
 prop 오류는 TypeScript 가 잡아주지만 **디자인 규칙은 아무도 잡아주지 않습니다.**
 한정된 컨텍스트를 규칙에 쓰고, Props 는 필요한 것만 정확히 읽게 하는 편이 낫습니다.
 

package/dist/components/SActionModal/README.md

@@ -9,12 +9,13 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `open?` | `boolean` | — |  |
-| `persistent?` | `boolean` | — | 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 true** |
+| `persistent?` | `boolean` | — | 백드롭 클릭으로 안 닫히고 흔들림. **기본값 true** |
+| `closeOnEscape?` | `boolean` | — | ESC 로 닫는다. **기본값 true** — false 면 ESC 로 안 닫히고 흔들림 |
 | `showClose?` | `boolean` | `true` | 우측 상단 닫기(X) 버튼. **기본값 true** `false` 는 **액션을 끝내야만 나갈 수 있는 모달**에만 준다 — 필수 약관 동의, 필수 정보 입력처럼 중간에 빠져나가면 앱이 정의되지 않은 상태로 남는 경우다. `persistent` 기본값(true)과 겹치면 나가는 길이 모달 안의 버튼 하나뿐이 되므로, `button` 이나 `footerLeft` 로 그 길을 반드시 둔다. |
 | `modalTitle?` | `string` | `''` |  |
-| `description?` | `ReactNode` | — | 제목 오른쪽에 붙는 보조 설명 (sd-action-modal 의 header-sub-title 슬롯). 문자열이면 서브텍스트 스타일로 렌더하고, 노드를 넘기면 그대로 배치한다. |
+| `description?` | `ReactNode` | — | 제목 오른쪽에 붙는 보조 설명. 문자열이면 서브텍스트 스타일로 렌더하고, 노드를 넘기면 그대로 배치한다. |
 | `button?` | `SFooterButton` | — | 하단 액션 버튼 (주 액션 1개). 의도적으로 단수다 — 보조 버튼(취소·삭제 등)은 `footerLeft` 슬롯에 직접 배치한다. |
-| `footerLeft?` | `ReactNode` | — | footer 좌측 영역 (sd-action-modal 의 bottom-sub-content 슬롯). 보조 버튼이나 안내 문구를 넣는다. 버튼을 하나 더 쓰고 싶을 때 여기에 SButton 을 넣는다. |
+| `footerLeft?` | `ReactNode` | — | footer 좌측 영역. 보조 버튼이나 안내 문구를 넣는다. 버튼을 하나 더 쓰고 싶을 때 여기에 SButton 을 넣는다. |
 | `width?` | `number \| string` | — |  |
 | `height?` | `number \| string` | — |  |
 | `children?` | `ReactNode` | — |  |
@@ -24,7 +25,7 @@
 | Event | Type | Description |
 |-------|------|-------------|
 | `onOpenChange` | `(open: boolean) => void` |  |
-| `onClose` | `() => void` | 닫기(X) 버튼 클릭 (sdClose) |
+| `onClose` | `() => void` | 닫기(X) 버튼 클릭 |
 
 ## Dependencies
 

package/dist/components/SActionModal/SActionModal.d.ts

@@ -3,10 +3,12 @@ import { type SFooterButton } from '../SFooter';
 export interface SActionModalProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    /** 닫기(X) 버튼 클릭 (sdClose) */
+    /** 닫기(X) 버튼 클릭 */
     onClose?: () => void;
-    /** 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 true** */
+    /** 백드롭 클릭으로 안 닫히고 흔들림. **기본값 true** */
     persistent?: boolean;
+    /** ESC 로 닫는다. **기본값 true** — false 면 ESC 로 안 닫히고 흔들림 */
+    closeOnEscape?: boolean;
     /**
      * 우측 상단 닫기(X) 버튼. **기본값 true**
      *
@@ -17,7 +19,7 @@ export interface SActionModalProps {
     showClose?: boolean;
     modalTitle?: string;
     /**
-     * 제목 오른쪽에 붙는 보조 설명 (sd-action-modal 의 header-sub-title 슬롯).
+     * 제목 오른쪽에 붙는 보조 설명.
      * 문자열이면 서브텍스트 스타일로 렌더하고, 노드를 넘기면 그대로 배치한다.
      */
     description?: ReactNode;
@@ -27,7 +29,7 @@ export interface SActionModalProps {
      */
     button?: SFooterButton;
     /**
-     * footer 좌측 영역 (sd-action-modal 의 bottom-sub-content 슬롯).
+     * footer 좌측 영역.
      * 보조 버튼이나 안내 문구를 넣는다. 버튼을 하나 더 쓰고 싶을 때 여기에 SButton 을 넣는다.
      */
     footerLeft?: ReactNode;
@@ -36,7 +38,7 @@ export interface SActionModalProps {
     children?: ReactNode;
 }
 /**
- * SActionModal — sd-action-modal 포팅. 헤더(제목·닫기) + 본문 + 하단 액션 버튼.
+ * SActionModal — 헤더(제목·닫기) + 본문 + 하단 액션 버튼.
  *
  * 액션 버튼은 `button.onClick` 만 호출하고 모달을 닫지 않는다. 본문에서 API 를 호출하는 경우가
  * 많아 성공 여부에 따라 닫힘 시점이 달라지므로, 닫는 책임은 사용하는 쪽에 둔다.
@@ -44,4 +46,4 @@ export interface SActionModalProps {
  * `button` 은 의도적으로 단수다. 주 액션은 오른쪽에 하나만 두고, 보조 버튼은 `footerLeft` 슬롯에
  * 소비자가 직접 배치한다. (buttons 배열 API 를 추가하지 말 것)
  */
-export declare function SActionModal({ open, onOpenChange, onClose, persistent, modalTitle, description, button, footerLeft, showClose, width, height, children, }: SActionModalProps): import("react").JSX.Element;
+export declare function SActionModal({ open, onOpenChange, onClose, persistent, closeOnEscape, modalTitle, description, button, footerLeft, showClose, width, height, children, }: SActionModalProps): import("react").JSX.Element;

package/dist/components/SBadge/SBadge.d.ts

@@ -6,7 +6,7 @@ export interface SBadgeProps extends HTMLAttributes<HTMLSpanElement> {
     color?: SBadgeColor;
 }
 /**
- * SBadge — sd-badge 포팅. 색상 점(dot) 인디케이터.
+ * SBadge — 색상 점(dot) 인디케이터.
  * 색상은 컴포넌트 토큰 `--cmp-badge-<color>` 를 참조한다.
  */
 export declare const SBadge: import("react").ForwardRefExoticComponent<SBadgeProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/SBarcodeInput/README.md

@@ -45,7 +45,7 @@
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onValueChange` | `(value: string) => void` | 값 변경 (sdUpdate) |
+| `onValueChange` | `(value: string) => void` | 값 변경 |
 | `onFocus` | `() => void` |  |
 | `onBlur` | `() => void` |  |
 

package/dist/components/SBarcodeInput/SBarcodeInput.d.ts

@@ -8,7 +8,7 @@ import { type SFieldWidth } from '../../lib/field-width';
 export type SBarcodeInputSize = SFieldSize;
 export interface SBarcodeInputProps {
     value?: string | number | null;
-    /** 값 변경 (sdUpdate) */
+    /** 값 변경 */
     onValueChange?: (value: string) => void;
     onFocus?: () => void;
     onBlur?: () => void;
@@ -66,5 +66,5 @@ export interface SBarcodeInputProps {
     className?: string;
     style?: CSSProperties;
 }
-/** SBarcodeInput — sd-barcode-input 포팅. 바코드용 노란 배경 입력 + prefix/suffix + clearable. */
+/** SBarcodeInput — 바코드용 노란 배경 입력 + prefix/suffix + clearable. */
 export declare const SBarcodeInput: import("react").ForwardRefExoticComponent<SBarcodeInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/SButton/SButton.d.ts

@@ -40,8 +40,7 @@ export interface SButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElemen
     shape?: SButtonShape;
 }
 /**
- * SButton — sd-button 포팅.
- * color(7) × tone(3) × outline × 5개 사이즈 × shape(3), 아이콘(icon/rightIcon), 컴포넌트 토큰(--cmp-button-*) 기반.
- * 텍스트는 label(문자열)로만 받는다. 이벤트: sdClick → 네이티브 onClick.
+ * SButton — color(7) × tone(3) × outline × 5개 사이즈 × shape(3), 아이콘(icon/rightIcon), 컴포넌트 토큰(--cmp-button-*) 기반.
+ * 텍스트는 label(문자열)로만 받는다.
  */
 export declare const SButton: import("react").ForwardRefExoticComponent<SButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/SCalendar/README.md

@@ -19,8 +19,8 @@
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onValueChange` | `(date: string) => void` | 선택 변경 (sdUpdate) |
-| `onViewChange` | `(v: { year: number; month: number }) => void` | 보이는 연·월 변경 (sdViewChange) |
+| `onValueChange` | `(date: string) => void` | 선택 변경 |
+| `onViewChange` | `(v: { year: number; month: number }) => void` | 보이는 연·월 변경 |
 
 ## Types
 

package/dist/components/SCalendar/SCalendar.d.ts

@@ -9,13 +9,13 @@ export interface SCalendarEventGroup {
 export interface SCalendarProps {
     /** 선택 날짜 (YYYY-MM-DD) */
     value?: string | null;
-    /** 선택 변경 (sdUpdate) */
+    /** 선택 변경 */
     onValueChange?: (date: string) => void;
     /** 선택 가능 범위 [시작, 종료] (빈 문자열이면 제한 없음) */
     selectable?: [string, string];
     /** 이벤트 그룹 (날짜별 점) */
     events?: SCalendarEventGroup[];
-    /** 보이는 연·월 변경 (sdViewChange) */
+    /** 보이는 연·월 변경 */
     onViewChange?: (v: {
         year: number;
         month: number;
@@ -25,5 +25,5 @@ export interface SCalendarProps {
     className?: string;
     style?: CSSProperties;
 }
-/** SCalendar — sd-calendar 포팅. 월 그리드 + 이벤트 점 + 범례. */
+/** SCalendar — 월 그리드 + 이벤트 점 + 범례. */
 export declare function SCalendar({ value, onValueChange, selectable, events, onViewChange, elevated, className, style, }: SCalendarProps): import("react").JSX.Element;

package/dist/components/SCalendarBoard/CalendarDayCard.d.ts

@@ -2,6 +2,12 @@ import { type HTMLAttributes, type MouseEvent, type ReactNode } from 'react';
 import type { CalendarBoardSegment } from './calendar-board-layout';
 import { type SCalendarBoardDayColor } from './calendarBoard.config';
 import type { SCalendarBoardEvent } from './types';
+/** 이 칸의 오른쪽·아래 격자선과 오른쪽 아래 교차점 중 경계 오버레이를 얹을 곳 */
+export interface CalendarDayBorderOverlay {
+    right: boolean;
+    bottom: boolean;
+    corner: boolean;
+}
 /**
  * 달력의 날짜 한 칸 (SCalendarBoard 내부 조립 요소).
  * 위에 날짜 숫자가 서고, 그 아래로 일정 막대가 줄 단위로 얹힌다.
@@ -20,6 +26,8 @@ export declare const CalendarDayCard: import("react").ForwardRefExoticComponent<
     selectable: boolean;
     /** 칸 배경 */
     color: SCalendarBoardDayColor;
+    /** 이웃 칸과 맞닿은 격자선에 얹을 경계 오버레이 — 판이 이웃 칸 색까지 보고 정한다 */
+    borderOverlay?: CalendarDayBorderOverlay;
     /**
      * **이 칸에서 시작하는** 일정 막대. 여러 날에 걸친 일정은 시작 칸이 그리고 오른쪽 칸 위로 뻗는다 —
      * 지나가는 칸은 자기 줄을 비워 두므로(배치 계산이 이미 잡아 둔다) 겹치지 않는다.

package/dist/components/SCallout/SCallout.d.ts

@@ -26,9 +26,8 @@ export interface SCalloutProps {
     style?: CSSProperties;
 }
 /**
- * SCallout — sd-callout 포팅.
- * default/white/danger 타입, 중첩 리스트(불릿은 span으로 렌더), danger는 좌측 타이틀 표시(showTitle 로 끌 수 있다).
+ * SCallout — default/white/danger 타입, 중첩 리스트(불릿은 span으로 렌더), danger는 좌측 타이틀 표시(showTitle 로 끌 수 있다).
  * 색상은 `--cmp-callout-*` 토큰 참조(white 만 예외 — SURFACE 주석 참고).
- * message 각 항목은 sanitizeInlineHtml 로 살균한 뒤 innerHTML 로 렌더한다 (원본 sd-callout 과 동일).
+ * message 각 항목은 sanitizeInlineHtml 로 살균한 뒤 innerHTML 로 렌더한다.
  */
 export declare const SCallout: import("react").ForwardRefExoticComponent<SCalloutProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SCard/SCard.d.ts

@@ -23,7 +23,7 @@ export interface SCardProps extends HTMLAttributes<HTMLDivElement> {
     footerClassName?: string;
 }
 /**
- * SCard — sd-card 포팅. 라운드 8px, 흰 배경, 옵션 테두리. 콘텐츠는 라운드 경계에서 잘린다.
+ * SCard — 라운드 8px, 흰 배경, 옵션 테두리. 콘텐츠는 라운드 경계에서 잘린다.
  *
  * 하단 액션은 `children` 에 직접 두지 않고 `footerLeft`·`button` 으로 넘긴다 — 배경·구분선·여백과
  * 양끝 분리가 컴포넌트 규칙대로 잡히는 자리다.

package/dist/components/SCheckbox/README.md

@@ -21,7 +21,7 @@
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onValueChange` | `(value: boolean \| unknown[]) => void` | 값 변경 (sdUpdate) |
+| `onValueChange` | `(value: boolean \| unknown[]) => void` | 값 변경 |
 
 ## Types
 

package/dist/components/SCheckbox/SCheckbox.d.ts

@@ -5,7 +5,7 @@ export interface SCheckboxProps {
     value?: SCheckboxValue;
     /** 배열(그룹) 모드에서 이 체크박스의 값 */
     val?: unknown;
-    /** 값 변경 (sdUpdate) */
+    /** 값 변경 */
     onValueChange?: (value: boolean | unknown[]) => void;
     /** 라벨 */
     label?: string;
@@ -25,7 +25,7 @@ export interface SCheckboxProps {
     style?: CSSProperties;
 }
 /**
- * SCheckbox — sd-checkbox 포팅 (Radix SCheckbox).
+ * SCheckbox — Radix Checkbox 기반.
  * boolean(단일)·배열(그룹, val 필요)·null(indeterminate) 지원, inverse 스타일.
  */
 export declare function SCheckbox({ value, val, onValueChange, label, ariaLabel, disabled, inverse, className, style, }: SCheckboxProps): import("react").JSX.Element;

package/dist/components/SChip/README.md

@@ -24,10 +24,10 @@
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onValueChange` | `(value: string) => void` | 편집 완료 (sdUpdate) |
-| `onRemove` | `() => void` | 삭제 (sdRemove) |
-| `onFocus` | `() => void` | 편집 진입 (sdFocus) |
-| `onBlur` | `() => void` | 편집 이탈 (sdBlur) |
+| `onValueChange` | `(value: string) => void` | 편집 완료 |
+| `onRemove` | `() => void` | 삭제 |
+| `onFocus` | `() => void` | 편집 진입 |
+| `onBlur` | `() => void` | 편집 이탈 |
 
 #### Methods (ref)
 

package/dist/components/SChip/SChip.d.ts

@@ -25,18 +25,18 @@ export interface SChipProps {
     placeholder?: string;
     /** 유효성 규칙 */
     rules?: Rule[];
-    /** 편집 완료 (sdUpdate) */
+    /** 편집 완료 */
     onValueChange?: (value: string) => void;
-    /** 삭제 (sdRemove) */
+    /** 삭제 */
     onRemove?: () => void;
-    /** 편집 진입 (sdFocus) */
+    /** 편집 진입 */
     onFocus?: () => void;
-    /** 편집 이탈 (sdBlur) */
+    /** 편집 이탈 */
     onBlur?: () => void;
     className?: string;
     style?: CSSProperties;
 }
-/** ref로 노출되는 UX 메서드 (sd-chip @Method sdFocus/sdGetNativeElement 대응) */
+/** ref로 노출되는 UX 메서드 */
 export interface SChipHandle {
     /** 편집 input에 포커스합니다. */
     focus: () => void;

package/dist/components/SChipInput/README.md

@@ -48,8 +48,8 @@
 
 | Event | Type | Description |
 |-------|------|-------------|
-| `onValueChange` | `(values: string[]) => void` | 값 변경 (sdUpdate) — 전체 배열 |
-| `onInput` | `(value: string) => void` | 입력 중 문자열 변경 (sdInput) |
+| `onValueChange` | `(values: string[]) => void` | 값 변경 — 전체 배열 |
+| `onInput` | `(value: string) => void` | 입력 중 문자열 변경 |
 | `onFocus` | `() => void` |  |
 | `onBlur` | `() => void` |  |
 

package/dist/components/SChipInput/SChipInput.d.ts

@@ -7,7 +7,7 @@ import { type STooltipProps } from '../STooltip';
 import { type SFieldWidth } from '../../lib/field-width';
 export type SChipInputSize = SFieldSize;
 export type SChipInputMetaPlacement = 'end' | 'inline';
-/** ref로 노출되는 UX 메서드 (sd-chip-input @Method sdFocus 대응) */
+/** ref로 노출되는 UX 메서드 */
 export interface SChipInputHandle {
     /** 입력 필드에 포커스를 이동합니다. */
     focus: () => void;
@@ -15,9 +15,9 @@ export interface SChipInputHandle {
 export interface SChipInputProps {
     /** 칩 값 목록 */
     values?: string[];
-    /** 값 변경 (sdUpdate) — 전체 배열 */
+    /** 값 변경 — 전체 배열 */
     onValueChange?: (values: string[]) => void;
-    /** 입력 중 문자열 변경 (sdInput) */
+    /** 입력 중 문자열 변경 */
     onInput?: (value: string) => void;
     onFocus?: () => void;
     onBlur?: () => void;
@@ -109,5 +109,5 @@ export interface SChipInputProps {
     className?: string;
     style?: CSSProperties;
 }
-/** SChipInput — sd-chip-input 포팅. 칩 목록 + 입력 + 자동완성/추천 드롭다운 + 초기화. */
+/** SChipInput — 칩 목록 + 입력 + 자동완성/추천 드롭다운 + 초기화. */
 export declare const SChipInput: import("react").ForwardRefExoticComponent<SChipInputProps & import("react").RefAttributes<SChipInputHandle>>;

package/dist/components/SCircleProgress/SCircleProgress.d.ts

@@ -28,5 +28,5 @@ export interface SCircleProgressProps {
     className?: string;
     style?: CSSProperties;
 }
-/** SCircleProgress — sd-circle-progress 포팅. determinate=진행률 arc, indeterminate=스피너. */
+/** SCircleProgress — determinate=진행률 arc, indeterminate=스피너. */
 export declare const SCircleProgress: import("react").ForwardRefExoticComponent<SCircleProgressProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SConfirmModal/README.md

@@ -9,14 +9,15 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `open?` | `boolean` | — |  |
-| `persistent?` | `boolean` | `false` | 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 false** — 확인 모달은 잃을 입력이 없어 백드롭·ESC로 닫힌다 |
-| `type?` | `SConfirmModalType` | `'positive'` | 타입 (아이콘·메인버튼 색 결정) |
+| `persistent?` | `boolean` | `false` | 백드롭 클릭으로 안 닫히고 흔들림. **기본값 false** — 확인 모달은 잃을 입력이 없어 백드롭으로 닫힌다 |
+| `closeOnEscape?` | `boolean` | `true` | ESC 로 닫는다. **기본값 true** — false 면 ESC 로 안 닫히고 흔들림 |
+| `type?` | `SConfirmModalType` | `'positive'` | 타입 (아이콘·메인버튼 색 결정). positive=알림 · negative=위험 · complete=작업·절차의 끝(완료) · default=중립 |
 | `modalTitle?` | `string` | `''` |  |
-| `titleClassName?` | `string` | — | 제목 엘리먼트에 추가할 클래스 (sd-confirm-modal titleClassName) |
+| `titleClassName?` | `string` | — | 제목 엘리먼트에 추가할 클래스 |
 | `topMessage?` | `string[]` | `[]` | 콘텐츠 박스 상단 메시지 목록 (각 항목이 한 줄, HTML 문자열 허용 — innerHTML 렌더링) |
 | `bottomMessage?` | `string[]` | `[]` | 콘텐츠 박스 하단 메시지 목록 (각 항목이 한 줄, HTML 문자열 허용 — innerHTML 렌더링) |
 | `tagLabel?` | `string` | — | tag 슬롯 기본 태그 레이블 (tagSlot 미지정 시) |
-| `tagShape?` | `STagShape` | `'square'` | 태그 프리셋 (shape/size/color) — sd-confirm-modal tagPreset 대응 |
+| `tagShape?` | `STagShape` | `'square'` | 태그 프리셋 (shape/size/color) |
 | `tagSize?` | `STagSize` | `'sm'` |  |
 | `tagColor?` | `STagColor` | `'grey'` |  |
 | `slotLabel?` | `string` | — | 콘텐츠 박스에서 태그 오른쪽에 오는 텍스트 (optionSlot 미지정 시) |
@@ -24,25 +25,25 @@
 | `optionSlot?` | `ReactNode` | — | 콘텐츠 박스에서 태그 오른쪽 커스텀 콘텐츠 (미지정 시 slotLabel 텍스트) |
 | `contentSlot?` | `ReactNode` | — | 콘텐츠 박스 바로 아래에 통으로 들어가는 커스텀 콘텐츠 (전체 폭) |
 | `mainButtonLabel?` | `string` | — | 메인(확인) 버튼에 찍히는 글자. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "확인")를 쓴다 |
-| `mainButtonOutline?` | `boolean` | — | 메인 버튼을 아웃라인(테두리)으로 세울지. 지정하지 않으면 `type` 이 정한다 — positive·negative 는 채운 버튼, default 는 아웃라인. **색은 여기서 고르지 않는다.** `type` 이 정한다(positive=primary / negative=danger / default=neutral) — 아이콘·제목이 말하는 것과 버튼 색이 어긋나면 읽는 사람이 헷갈리므로 그 조합은 타입에서 막는다. 글자는 `mainButtonLabel` 이다. `type="default"` 에 `false` 를 주면 테두리 없는 흰 버튼이 된다(neutral 은 solid·outline 이 같은 흰 면이고 테두리 유무만 다르다). 확인 버튼이 눌러야 할 것으로 안 읽히므로 권하지 않는다. |
+| `mainButtonOutline?` | `boolean` | — | 메인 버튼을 아웃라인(테두리)으로 세울지. 지정하지 않으면 `type` 이 정한다 — positive·negative 는 채운 버튼, complete·default 는 아웃라인. **색은 여기서 고르지 않는다.** `type` 이 정한다(positive=primary / negative=danger / complete=neutral / default=neutral) — 아이콘·제목이 말하는 것과 버튼 색이 어긋나면 읽는 사람이 헷갈리므로 그 조합은 타입에서 막는다. 글자는 `mainButtonLabel` 이다. `type="default"`·`"complete"` 에 `false` 를 주면 테두리 없는 흰 버튼이 된다(neutral 은 solid·outline 이 같은 흰 면이고 테두리 유무만 다르다). 확인 버튼이 눌러야 할 것으로 안 읽히므로 권하지 않는다. |
 | `mainButtonDisabled?` | `boolean` | `false` | 메인 버튼을 눌리지 않게 한다. **기본값 `false`.** 모달 안에서 **아직 확정할 수 없을 때** 쓴다 — 동의 체크를 아직 안 했거나, `contentSlot` 의 입력이 덜 찼거나, 확인 뒤에 나갈 요청이 이미 나가는 중일 때. **왜 못 누르는지는 화면이 말해야 한다.** 흐려진 버튼만 남으면 사용자는 고장으로 읽는다 — 못 채운 것을 `bottomMessage` 나 `contentSlot` 안에서 함께 보인다. 서브(취소) 버튼은 따라 잠기지 않는다. 확정하지 못하는 상태일수록 **나가는 길은 열려 있어야** 하기 때문이다. 그래서 서브 버튼을 막는 prop 은 두지 않는다. |
-| `subButtonLabel?` | `string` | — | 서브 버튼에 찍히는 글자. **주지 않는 것이 기본이다** — 비어 있으면 버튼이 아예 서지 않고 확인 하나만 남는다. **`onCancel` 이 닫는 것 말고 따로 할 일이 있을 때만 준다.** 눌러도 창만 닫힌다면 X 버튼이 이미 그 일을 하므로(X 는 늘 서 있고, `persistent` 를 켜지 않았으면 백드롭·ESC 로도 닫힌다) 같은 일을 하는 버튼을 하나 더 세우지 않는다. 되묻는 모달이라고 해서 예외가 아니다 — "삭제할까요?" 에 답하지 않고 나가는 것은 X 로 충분하다. 그래서 서브 버튼이 설 자리는 **확인과 대등한 두 번째 선택지**다. 그때 글자는 `취소`·`닫기` 가 아니라 그 버튼이 하는 일의 이름이 된다. ```tsx ✅ { mainButtonLabel: '자동 취소', subButtonLabel: '수동 처리' } // 두 갈래를 고르게 한다 ❌ { mainButtonLabel: '삭제', subButtonLabel: '취소' } // X 가 이미 하는 일 ``` |
+| `subButtonLabel?` | `string` | — | 서브 버튼에 찍히는 글자. **주지 않는 것이 기본이다** — 비어 있으면 버튼이 아예 서지 않고 확인 하나만 남는다. **`onCancel` 이 닫는 것 말고 따로 할 일이 있을 때만 준다.** 눌러도 창만 닫힌다면 X 버튼이 이미 그 일을 하므로(X 는 늘 서 있고, `persistent` 를 켜지 않았으면 백드롭으로, `closeOnEscape` 를 끄지 않았으면 ESC 로도 닫힌다) 같은 일을 하는 버튼을 하나 더 세우지 않는다. 되묻는 모달이라고 해서 예외가 아니다 — "삭제할까요?" 에 답하지 않고 나가는 것은 X 로 충분하다. 그래서 서브 버튼이 설 자리는 **확인과 대등한 두 번째 선택지**다. 그때 글자는 `취소`·`닫기` 가 아니라 그 버튼이 하는 일의 이름이 된다. ```tsx ✅ { mainButtonLabel: '자동 취소', subButtonLabel: '수동 처리' } // 두 갈래를 고르게 한다 ❌ { mainButtonLabel: '삭제', subButtonLabel: '취소' } // X 가 이미 하는 일 ``` |
 
 #### Events
 
 | Event | Type | Description |
 |-------|------|-------------|
 | `onOpenChange` | `(open: boolean) => void` |  |
-| `onOk` | `() => void` | 확인 버튼 클릭 (sdOk) |
+| `onOk` | `() => void` | 확인 버튼 클릭 |
 | `onCancel` | `() => void` |  |
-| `onClose` | `() => void` | 닫기(X) 버튼 클릭 (sdClose) |
+| `onClose` | `() => void` | 닫기(X) 버튼 클릭 |
 
 ## Types
 
 ### SConfirmModalType
 
 ```ts
-export type SConfirmModalType = 'positive' | 'negative' | 'default';
+export type SConfirmModalType = 'positive' | 'negative' | 'complete' | 'default';
 ```
 
 ## Dependencies