sellmate-design-system-react 9.0.0-beta.97 → 9.0.0-beta.99

package/AGENTS.md

@@ -1343,6 +1343,7 @@ tableRef.current.scrollToRow(row);                  // 복원
 | 본문 속 이동 링크 | `STextLink` |
 | 메인 액션 + 부가 메뉴 | `SDropdownButton` |
 | **GNB system 패널의 한 줄 액션** | **`SSystemActionButton`** — 행 전체가 버튼인 표면형 (아래 3-5-7) |
+| **본문·목록 사이에 끼어 서는 작은 부가 버튼** (추천 질문·출처 바로가기) | **`SButton pill color="neutral" outline`** (아래 3-5-6) |
 
 #### 3-5-1. 채움 버튼은 페이지당 개수 제한이 있다
 
@@ -1374,6 +1375,7 @@ tableRef.current.scrollToRow(row);                  // 복원
 
 | 위치 | size |
 | --- | --- |
+| **본문 텍스트 사이**에 끼워 서는 버튼 (출처 번호·문장 속 바로가기) | `xxs` |
 | 테이블 **행 내부** 인라인 액션 | `xs` |
 | 화면·목록 액션 (툴바, `STableBar`) | `sm` |
 | **모달·드로어·팝업 푸터** | `md` (고정) |
@@ -1384,6 +1386,8 @@ tableRef.current.scrollToRow(row);                  // 복원
 
 `lg` 는 현재 사용처가 없다. 페이지 골격에서 쓰지 않는다.
 
+**`xxs` 는 본문 텍스트 사이에만 쓴다.** 높이가 본문 줄 높이와 같아 문장 속에 끼워도 줄이 벌어지지 않는 크기다. 목록·툴바·표 행처럼 버튼끼리 서는 자리에서는 누르기에 작으니 `xs` 이상을 쓴다. 문장 속 알약이면 `pill` 과 함께 준다.
+
 **푸터 버튼의 크기는 버튼이 아니라 푸터가 정한다.** 모달·드로어·팝업은 예외가 없어 타입에 `size` 가 없고, 카드 둘(`SCard`·`SSectionHeaderCard`)만 `footerSize` 로 고른다 — 자세한 기준은 §3-7-8. **`footerLeft` 슬롯에 직접 배치하는 `SButton` 은 그 푸터와 같은 크기를 명시한다**(모달이면 `size="md"`, `footerSize="sm"` 인 카드면 `size="sm"`). 슬롯까지는 타입이 못 막으므로 어긋나면 좌우 버튼 높이가 갈린다.
 
 #### 3-5-3. 파괴적 액션의 채움 / outline
@@ -1484,6 +1488,7 @@ tableRef.current.scrollToRow(row);                  // 복원
 - 라벨은 **동사(+목적어)** — `저장` · `적치 지시` · `송장 재출력`
 - 완료된 작업 버튼은 제거하지 않고 **`disabled` 로 남긴다.** 자리가 사라지면 행 높이가 흔들린다.
 - **모달 보조 액션은 `color="neutral" outline`** 이 표준이다.
+- **`pill` 은 본문·목록 사이에 끼어 서는 작은 부가 버튼에만 준다** — 추천 질문·출처 바로가기처럼 누르면 동작하는 알약. 보통 `color="neutral" outline` 과 함께 쓰고, 크기는 목록 사이면 `xs`, 문장 속이면 `xxs` 다(§3-5-2). 화면의 주 액션·폼 제출·하단 버튼은 모서리를 바꾸지 않는다. 값·필터 토큰이면 `SChip`, 누를 수 없는 표시면 `STag` 다. 알약 모양을 `className="rounded-full"` 로 직접 만들지 않는다.
 
 **하단 버튼 배치 (모든 화면 공통)** — 그룹을 모아 정렬하지 않고 **양끝으로 벌린다**(`justify-between`).
 

package/dist/components/SButton/README.md

@@ -10,10 +10,11 @@
 |------|------|---------|-------------|
 | `color?` | `SButtonColor` | `'primary'` | 색상 — sd-button preset의 색 계열 |
 | `outline?` | `boolean` | `false` | 아웃라인(테두리) 스타일. primary·neutral·danger 만 지원 (secondary 는 무시) |
-| `size?` | `SButtonSize` | `'sm'` | 크기 |
+| `size?` | `SButtonSize` | `'sm'` | 크기. 놓이는 위치가 정한다(AGENTS.md §3-5-2). `xxs` 는 본문 텍스트 사이에 끼워 서는 버튼 전용 — 높이가 본문 줄 높이와 같아 줄이 벌어지지 않는다. 버튼끼리 서는 자리에서는 `xs` 이상을 쓴다. |
 | `icon?` | `SIconName` | — | 레이블 왼쪽 아이콘 |
 | `rightIcon?` | `SIconName` | — | 레이블 오른쪽 아이콘 |
 | `label?` | `string` | — | 버튼 텍스트 (문자열만 — 아이콘은 icon/rightIcon 사용) |
+| `pill?` | `boolean` | `false` | 모서리를 완전히 둥글게(알약 모양). 색·크기·아이콘은 그대로다. 본문·목록 사이에 끼어 서는 **누르면 동작하는 작은 부가 버튼**에 쓴다 — 출처 배지·추천 질문처럼. 보통 `color="neutral" outline` 과 함께 쓴다(흰 면 + 옅은 테두리). 화면의 주 액션·폼 제출 버튼은 모서리를 바꾸지 않는다. 값·필터 토큰이면 `SChip`, 누를 수 없는 표시면 `STag` 다. |
 
 ## Types
 
@@ -46,7 +47,7 @@ export const BUTTON_COLORS = ['primary', 'secondary', 'neutral', 'danger'] as co
 ### BUTTON_SIZES
 
 ```ts
-export const BUTTON_SIZES = ['xs', 'sm', 'md', 'lg'] as const;
+export const BUTTON_SIZES = ['xxs', 'xs', 'sm', 'md', 'lg'] as const;
 ```
 
 ## Dependencies

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

@@ -6,7 +6,10 @@ export interface SButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElemen
     color?: SButtonColor;
     /** 아웃라인(테두리) 스타일. primary·neutral·danger 만 지원 (secondary 는 무시) */
     outline?: boolean;
-    /** 크기 */
+    /**
+     * 크기. 놓이는 위치가 정한다(AGENTS.md §3-5-2). `xxs` 는 본문 텍스트 사이에 끼워 서는 버튼 전용 —
+     * 높이가 본문 줄 높이와 같아 줄이 벌어지지 않는다. 버튼끼리 서는 자리에서는 `xs` 이상을 쓴다.
+     */
     size?: SButtonSize;
     /** 레이블 왼쪽 아이콘 */
     icon?: SIconName;
@@ -14,10 +17,18 @@ export interface SButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElemen
     rightIcon?: SIconName;
     /** 버튼 텍스트 (문자열만 — 아이콘은 icon/rightIcon 사용) */
     label?: string;
+    /**
+     * 모서리를 완전히 둥글게(알약 모양). 색·크기·아이콘은 그대로다.
+     *
+     * 본문·목록 사이에 끼어 서는 **누르면 동작하는 작은 부가 버튼**에 쓴다 — 출처 배지·추천 질문처럼.
+     * 보통 `color="neutral" outline` 과 함께 쓴다(흰 면 + 옅은 테두리). 화면의 주 액션·폼 제출 버튼은
+     * 모서리를 바꾸지 않는다. 값·필터 토큰이면 `SChip`, 누를 수 없는 표시면 `STag` 다.
+     */
+    pill?: boolean;
 }
 /**
  * SButton — sd-button 포팅.
- * color(4) × outline × 4개 사이즈, 아이콘(icon/rightIcon), 컴포넌트 토큰(--cmp-button-*) 기반.
+ * color(4) × outline × 5개 사이즈, 아이콘(icon/rightIcon), pill 모양, 컴포넌트 토큰(--cmp-button-*) 기반.
  * 텍스트는 label(문자열)로만 받는다. 이벤트: sdClick → 네이티브 onClick.
  */
 export declare const SButton: import("react").ForwardRefExoticComponent<SButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -7,7 +7,7 @@
  * 색상은 theme.css의 `--cmp-button-*` CSS 변수를 참조한다.
  */
 export declare const BUTTON_COLORS: readonly ["primary", "secondary", "neutral", "danger"];
-export declare const BUTTON_SIZES: readonly ["xs", "sm", "md", "lg"];
+export declare const BUTTON_SIZES: readonly ["xxs", "xs", "sm", "md", "lg"];
 export type SButtonColor = (typeof BUTTON_COLORS)[number];
 export type SButtonSize = (typeof BUTTON_SIZES)[number];
 interface PresetColors {
@@ -32,6 +32,8 @@ export declare const BUTTON_SIZE_CONFIG: Record<SButtonSize, {
     fontWeight: number;
     radius: string;
     minWidth: number;
+    /** 라벨 글자만 내리는 위 여백 — 글꼴 상자가 버튼 안에 반 픽셀로 놓이는 크기의 보정 (xxs) */
+    labelOffsetTop?: string;
 }>;
 export declare const BUTTON_FOCUS_RING = "var(--sys-color-border-accent)";
 export declare const BUTTON_DISABLED_BG = "var(--cmp-button-bg-disabled, #E1E1E1)";

package/dist/index.cjs

@@ -4153,7 +4153,7 @@ var SBadge = /* @__PURE__ */ react.forwardRef(function SBadge2({ color = "blue",
 
 // src/components/SButton/button.config.ts
 var BUTTON_COLORS = ["primary", "secondary", "neutral", "danger"];
-var BUTTON_SIZES = ["xs", "sm", "md", "lg"];
+var BUTTON_SIZES = ["xxs", "xs", "sm", "md", "lg"];
 var V = (path) => `var(--cmp-button-${path})`;
 function buttonPreset(color, outline) {
   switch (color) {
@@ -4204,6 +4204,25 @@ function buttonPreset(color, outline) {
   }
 }
 var BUTTON_SIZE_CONFIG = {
+  /**
+   * 본문 텍스트 사이에 끼워 서는 버튼 — 높이가 본문 줄 높이(12px/20px)와 같아 줄이 벌어지지 않는다.
+   * 버튼 xxs 컴포넌트 토큰(--cmp-button-xxs-*)이 아직 없어 공용 토큰으로 둔다. 디자인팀이 내면 바꾼다.
+   */
+  xxs: {
+    height: "var(--spacing-sd-20)",
+    paddingX: "var(--spacing-sd-6)",
+    gap: "var(--spacing-sd-4)",
+    iconSize: "var(--cmp-button-xs-icon)",
+    iconOnlyWidth: "var(--spacing-sd-20)",
+    fontSize: 11,
+    fontWeight: 500,
+    radius: "var(--cmp-button-radius-sm)",
+    // 번호 하나·짧은 낱말이 그대로 서야 해서 최소 폭을 두지 않는다
+    minWidth: 0,
+    // 11px 글자의 글꼴 상자(13px)가 안쪽 높이(18px)에 반 픽셀 자리로 놓이고, Pretendard 는 위가 넓어
+    // 한글이 0.8px 위로 쏠린다. 라벨에 위 여백 1px 을 줘 0.5px 내린다 — 글자 크기·높이를 바꾸면 다시 잰다
+    labelOffsetTop: "1px"
+  },
   xs: {
     height: "var(--cmp-button-xs-height)",
     paddingX: "var(--cmp-button-xs-paddingX)",
@@ -4261,6 +4280,7 @@ var SButton = /* @__PURE__ */ react.forwardRef(function SButton2({
   icon,
   rightIcon,
   label,
+  pill = false,
   className,
   style,
   type = "button",
@@ -4291,7 +4311,8 @@ var SButton = /* @__PURE__ */ react.forwardRef(function SButton2({
     "minHeight": s.height,
     "minWidth": iconOnly ? s.iconOnlyWidth : hasLabel ? s.minWidth : void 0,
     "padding": iconOnly ? 0 : `0 ${s.paddingX}`,
-    "borderRadius": s.radius,
+    // 버튼 전용 pill 반경 토큰이 아직 없어 공용 반경을 쓴다
+    "borderRadius": pill ? "var(--radius-full)" : s.radius,
     "gap": s.gap,
     "fontSize": s.fontSize,
     "fontWeight": s.fontWeight,
@@ -4316,7 +4337,14 @@ var SButton = /* @__PURE__ */ react.forwardRef(function SButton2({
       ...props,
       children: [
         iconNode,
-        hasLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center", children: label }),
+        hasLabel && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "inline-flex items-center justify-center",
+            style: s.labelOffsetTop ? { paddingTop: s.labelOffsetTop } : void 0,
+            children: label
+          }
+        ),
         rightIconNode
       ]
     }