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

package/AGENTS.md

@@ -1352,6 +1352,22 @@ const [selectedId, setSelectedId] = useState<string>();
 - **카드 안에 카드를 겹치지 않는다.** 섹션 안을 더 나눠야 하면 `SDivider` 로 끊거나(§3-6) 섹션을 둘로 분리한다.
 - 안쪽 여백은 `SSectionHeaderCard` 의 `padding` prop 으로 준다 — `p-sd-*` 를 직접 주지 않는다 (§2-2).
 
+**카드가 자기 안에서 확정하는 액션을 가지면 하단 버튼을 `children` 에 직접 두지 않는다.** 두 카드 모두 모달·드로어와 같은 하단 액션 영역을 갖는다 — 주 액션은 `button`, 보조 버튼은 `footerLeft` 로 넘긴다(§3-3-4 와 같은 규칙). 배경·상단 구분선·좌우 여백·양끝 분리가 컴포넌트 규칙대로 잡히고, 좌우 끝이 헤더·본문과 맞는다. `footerLeft` 는 슬롯이라 `SButton` 을 직접 배치하며 `size="md"` 를 명시한다(§3-5-2).
+
+```tsx
+{/* 섹션 안에서 바로 수정·저장하는 인라인 폼 섹션 (§4-4) */}
+<SSectionHeaderCard
+  title="배송지"
+  marker
+  footerLeft={<SButton color="neutral" outline size="md" label="취소" onClick={reset} />}
+  button={{ label: '저장', onClick: save }}
+>
+  <SKeyValueTable … />
+</SSectionHeaderCard>
+```
+
+**페이지 전체를 확정하는 액션은 카드 푸터가 아니라 페이지 하단에 둔다.** 카드 푸터는 **그 카드 안에서 닫히는 액션**의 자리다 — 여러 섹션을 한 번에 저장하는 버튼을 마지막 카드의 푸터에 넣으면 그 카드에만 걸리는 액션으로 읽힌다. 이때는 §4-4 처럼 카드 밖 하단 줄에 둔다.
+
 #### 3-7-9. SLinearProgress vs SCircleProgress
 
 | 판별 | 사용 |
@@ -1750,7 +1766,7 @@ export default function ProductCreatePage() {
   섹션 제목은 `title` prop 으로, 바디 여백은 `padding` prop 으로 준다.
 - **수정·삭제 버튼은 하단에 둔다.** 내용이 짧아 우측 상단에 두는 변형도 있으나 기본은 하단이다.
 - **상세 페이지도 `contentHeight="fill"` 이 기본이다**(§2-2). 섹션이 많아 페이지가 실제로 스크롤되는 화면에서만 `auto` + `scrollEndSpacing` 을 켠다.
-- **섹션마다 독립 인라인 폼이 있는 형태**도 상세 페이지의 변형이다. 섹션 안에서 바로 수정·저장하게 하는 화면인데, 이때 버튼 강조는 **섹션 단위가 아니라 페이지 단위로 판단한다** — §3-5-1 의 "`secondary` 연속 배치 금지"는 섹션이 다르면 적용되지 않는다.
+- **섹션마다 독립 인라인 폼이 있는 형태**도 상세 페이지의 변형이다. 섹션 안에서 바로 수정·저장하게 하는 화면인데, 이때 버튼 강조는 **섹션 단위가 아니라 페이지 단위로 판단한다** — §3-5-1 의 "`secondary` 연속 배치 금지"는 섹션이 다르면 적용되지 않는다. 그 섹션 안에서 닫히는 저장·취소는 `SSectionHeaderCard` 의 `button`·`footerLeft` 로 넘긴다 (§3-7-8). 아래 예처럼 **페이지 전체를 확정하는 버튼은 카드 밖 하단 줄**에 둔다 — 둘을 섞지 않는다.
 
 ```tsx
 import {
@@ -1827,6 +1843,14 @@ export default function ProductDetailPage() {
 | Prop (Body) | 용도 |
 | --- | --- |
 | `padding` | 안쪽 여백 — `'default'`(기본) / `'wide'` / `'none'`. 판정은 §2-2 "섹션·패널 안쪽 여백". `p-sd-*` 를 직접 주지 않는다 |
+| `background` | 본문 바탕 — `'frame'`(기본) / `'neutral'`. 판정은 §2-2 "본문 바탕 눌러앉히기" |
+
+| Prop (Footer) | 용도 |
+| --- | --- |
+| `button` | 하단 액션 영역 우측 주 액션 (§3-7-8) |
+| `footerLeft` | 하단 액션 영역 좌측 슬롯 — 보조 버튼. `SButton` 에 `size="md"` 를 명시한다 |
+
+둘 중 하나라도 주면 하단 액션 영역이 렌더된다. 회색 바탕 + 상단 구분선이며 좌우 끝은 헤더에 맞는다 — 배경·여백을 직접 주지 않는다.
 
 **한 페이지에 섹션 카드가 둘 이상이면 `marker` 를 켠다.** 점은 섹션을 서로 구분할 대상이 여럿일 때만 의미가 있어, 카드가 하나뿐인 페이지에서는 켜지 않는다. 한 페이지 안에서는 켜거나 끄거나 전부 같게 간다.
 
@@ -1841,7 +1865,7 @@ export default function ProductDetailPage() {
 </SSectionHeaderCard>
 ```
 
-본문 래퍼는 `className` 을 받지 않으므로(여백은 `padding` prop 으로만 받는다) 루트에서 내려 준다. 흔한 구성은 아니다 — 대부분은 `STable` 이 자기 안에서 스크롤하므로 여기까지 갈 일이 없다.
+본문 래퍼는 `className` 을 받지 않으므로(여백은 `padding` prop 으로만 받는다) 루트에서 내려 준다. **하단 액션 영역이 있으면 본문이 더 이상 마지막 자식이 아니다** — 그때는 `[&>div:nth-last-child(2)]` 로 겨눈다. 흔한 구성은 아니다 — 대부분은 `STable` 이 자기 안에서 스크롤하므로 여기까지 갈 일이 없다.
 
 ---
 
@@ -1892,7 +1916,7 @@ export default function ProductDetailPage() {
 - [ ] `SGhostButton` 의 `intent` 가 조작 성격과 맞는가 (되돌릴 수 없는 삭제만 `danger`, 진입·추가는 `action`, 나머지는 `default`)
 - [ ] 창을 띄울 때 §3-3-1 판별 순서를 따랐는가 (그 자체가 화면 → `SPopup` / 실행 여부만 확정 → `SModal.confirm` / 모달 안에서 작성 → `SActionModal`)
 - [ ] 작업용 모달을 `SActionModal` + `SModal.create` 로 만들었는가 (직접 오버레이 ❌)
-- [ ] 모달·드로어의 하단 버튼을 본문이 아니라 `button` · `footerLeft` prop 으로 넘겼는가 (§3-3-4)
+- [ ] 모달·드로어의 하단 버튼을 본문이 아니라 `button` · `footerLeft` prop 으로 넘겼는가 (§3-3-4), 카드 안에서 닫히는 액션도 같은 prop 으로 넘겼는가 (§3-7-8)
 - [ ] 앱 부트스트랩의 Provider 안쪽에 `<SModalOutlet />` 이 한 번 렌더되어 있는가 (§4-1 — 없으면 모달 안에서 앱 훅이 죽는다), 그 대신으로 모달 컴포넌트를 Provider 로 다시 감싸지 않았는가
 - [ ] 고른 컴포넌트를 §2-0 의 제 층에 놓았는가 (요소를 `SPage` 에 직접 놓지 않았는가, 블록을 `div` 로 감싸지 않았는가)
 - [ ] §2-0 포함 규칙을 지켰는가 (카드 안 카드 ❌, 표 셀 안 블록 ❌)

package/dist/components/SCard/README.md

@@ -9,4 +9,20 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `bordered?` | `boolean` | `false` | 테두리 표시 여부 |
+| `footerLeft?` | `ReactNode` | — | 하단 액션 영역 좌측 슬롯. 보조 버튼(취소·목록 등)이 오는 자리다. `footerLeft` 또는 `button` 중 하나라도 있으면 하단 액션 영역이 렌더된다. |
+| `button?` | `SFooterButton` | — | 하단 액션 영역 우측 주 액션 버튼 |
+| `footerClassName?` | `string` | — | 하단 액션 영역 클래스 |
 
+## Dependencies
+
+### Depends on
+
+- [SFooter](../SFooter)
+
+### Graph
+
+```mermaid
+graph TD;
+  SCard --> SFooter
+  style SCard fill:#f9f,stroke:#333,stroke-width:4px
+```

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

@@ -1,7 +1,22 @@
-import { type HTMLAttributes } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type SFooterButton } from '../SFooter';
 export interface SCardProps extends HTMLAttributes<HTMLDivElement> {
     /** 테두리 표시 여부 */
     bordered?: boolean;
+    /**
+     * 하단 액션 영역 좌측 슬롯. 보조 버튼(취소·목록 등)이 오는 자리다.
+     * `footerLeft` 또는 `button` 중 하나라도 있으면 하단 액션 영역이 렌더된다.
+     */
+    footerLeft?: ReactNode;
+    /** 하단 액션 영역 우측 주 액션 버튼 */
+    button?: SFooterButton;
+    /** 하단 액션 영역 클래스 */
+    footerClassName?: string;
 }
-/** SCard — sd-card 포팅. 라운드 8px, 흰 배경, 옵션 테두리. 콘텐츠는 라운드 경계에서 잘린다. */
+/**
+ * SCard — sd-card 포팅. 라운드 8px, 흰 배경, 옵션 테두리. 콘텐츠는 라운드 경계에서 잘린다.
+ *
+ * 하단 액션은 `children` 에 직접 두지 않고 `footerLeft`·`button` 으로 넘긴다 — 배경·구분선·여백과
+ * 양끝 분리가 컴포넌트 규칙대로 잡히는 자리다.
+ */
 export declare const SCard: import("react").ForwardRefExoticComponent<SCardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SFooter/README.md

@@ -42,8 +42,10 @@ export interface SFooterButton {
 ### Used by
 
  - [SActionModal](../SActionModal)
+ - [SCard](../SCard)
  - [SDrawer](../SDrawer)
  - [SPopup](../SPopup)
+ - [SSectionHeaderCard](../SSectionHeaderCard)
 
 ### Depends on
 
@@ -55,7 +57,9 @@ export interface SFooterButton {
 graph TD;
   SFooter --> SButton
   SActionModal --> SFooter
+  SCard --> SFooter
   SDrawer --> SFooter
   SPopup --> SFooter
+  SSectionHeaderCard --> SFooter
   style SFooter fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SFooter/SFooter.d.ts

@@ -11,7 +11,7 @@ export interface SFooterButton {
 }
 /**
  * @internal
- * 모달·드로어·팝업 하단 영역 공통 props.
+ * 모달·드로어·팝업·카드 하단 영역 공통 props.
  */
 export interface SFooterProps {
     /** 배경색 */
@@ -27,10 +27,11 @@ export interface SFooterProps {
     style?: CSSProperties;
 }
 /**
- * SFooter — overlay 계열 내부 전용 footer.
+ * SFooter — 오버레이·카드 내부 전용 footer.
  *
  * @internal
- * SActionModal/SConfirmModal/SDrawer/SPopup 의 하단 액션 영역만 공통화한다.
+ * SActionModal/SConfirmModal/SDrawer/SPopup 과 SCard/SSectionHeaderCard 의 하단 액션 영역만
+ * 공통화한다. 소비자는 호스트 컴포넌트의 `footerLeft`·`button` prop 으로만 닿는다 —
  * 패키지 public export 에 추가하지 말 것.
  */
 export declare function SFooter({ bg, left, button, children, className, leftClassName, style, }: SFooterProps): import("react").JSX.Element;

package/dist/components/SSectionHeaderCard/README.md

@@ -19,6 +19,9 @@
 | `headerClassName?` | `string` | — | 헤더 영역 클래스 |
 | `padding?` | `SSectionHeaderCardBodyPadding` | — | 바디 안쪽 여백. 기본은 `default`. 성격이 다른 요소가 세 종류 이상 섞인 영역에만 `wide`, 표를 가장자리까지 채울 때만 `none`. |
 | `background?` | `SSectionHeaderCardBodyBackground` | — | 본문 배경. 기본은 `frame` — 카드가 깐 흰 면을 그대로 쓴다. `neutral` 은 바탕을 한 단계 눌러앉혀, 흰 면 덩어리(표·리스트)가 여럿일 때 그것들이 **"면 위에 놓인 객체"로 읽히게** 한다. 위계를 한 단계 더 주고 싶을 때 고르는 선택지이며, **기본값이 틀린 것은 아니다** — 표·리스트는 테두리·라운드·헤더 줄과 간격을 이미 갖고 있어 흰 바탕에서도 경계가 읽힌다. 깔아도 **효과가 없는** 자리가 있다 — 덩어리가 가장자리까지 차는 경우(`padding="none"` 으로 표를 채우면 바탕이 완전히 가려진다), 덩어리에 회색 면이 섞인 경우(그 덩어리가 바탕에 묻힌다), 맨 텍스트나 폼 컨트롤만 있는 본문(떠오를 흰 면이 없다). |
+| `footerLeft?` | `ReactNode` | — | 하단 액션 영역 좌측 슬롯. 보조 버튼(취소·목록 등)이 오는 자리다. `footerLeft` 또는 `button` 중 하나라도 있으면 하단 액션 영역이 렌더된다. |
+| `button?` | `SFooterButton` | — | 하단 액션 영역 우측 주 액션 버튼 |
+| `footerClassName?` | `string` | — | 하단 액션 영역 클래스 |
 | `children?` | `SSectionHeaderCardChildren` | — | 바디 콘텐츠. 특정 컴포넌트 타입으로 제한하지 않습니다. |
 
 ## Types
@@ -58,6 +61,7 @@ export type SSectionHeaderCardChildren = ReactNode;
 ### Depends on
 
 - [SBadge](../SBadge)
+- [SFooter](../SFooter)
 - [SIcon](../SIcon)
 - [STooltip](../STooltip)
 
@@ -66,6 +70,7 @@ export type SSectionHeaderCardChildren = ReactNode;
 ```mermaid
 graph TD;
   SSectionHeaderCard --> SBadge
+  SSectionHeaderCard --> SFooter
   SSectionHeaderCard --> SIcon
   SSectionHeaderCard --> STooltip
   style SSectionHeaderCard fill:#f9f,stroke:#333,stroke-width:4px

package/dist/components/SSectionHeaderCard/SSectionHeaderCard.d.ts

@@ -1,4 +1,5 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
+import { type SFooterButton } from '../SFooter';
 export type SSectionHeaderCardBodyChildren = ReactNode;
 export type SSectionHeaderCardChildren = ReactNode;
 export type SSectionHeaderCardThickness = false | 'default' | 'accent';
@@ -42,6 +43,15 @@ export interface SSectionHeaderCardProps extends Omit<HTMLAttributes<HTMLDivElem
      * 맨 텍스트나 폼 컨트롤만 있는 본문(떠오를 흰 면이 없다).
      */
     background?: SSectionHeaderCardBodyBackground;
+    /**
+     * 하단 액션 영역 좌측 슬롯. 보조 버튼(취소·목록 등)이 오는 자리다.
+     * `footerLeft` 또는 `button` 중 하나라도 있으면 하단 액션 영역이 렌더된다.
+     */
+    footerLeft?: ReactNode;
+    /** 하단 액션 영역 우측 주 액션 버튼 */
+    button?: SFooterButton;
+    /** 하단 액션 영역 클래스 */
+    footerClassName?: string;
     /** 바디 콘텐츠. 특정 컴포넌트 타입으로 제한하지 않습니다. */
     children?: SSectionHeaderCardChildren;
 }

package/dist/components/SSelect/README.md

@@ -75,7 +75,6 @@ export type SSelectType = 'default' | 'multi' | 'default_depth' | 'multi_depth';
 
 ### Used by
 
- - [SChipFilter](../SChipFilter)
  - [SKeyValueTable](../SKeyValueTable)
  - [STable](../STable)
 
@@ -94,7 +93,6 @@ graph TD;
   SSelect --> SIcon
   SSelect --> SPortal
   SSelect --> SSearchInput
-  SChipFilter --> SSelect
   SKeyValueTable --> SSelect
   STable --> SSelect
   style SSelect fill:#f9f,stroke:#333,stroke-width:4px