sellmate-design-system-react 9.0.0-beta.83 → 9.0.0-beta.86

package/dist/llms-full.txt

@@ -1426,6 +1426,7 @@ tableRef.current.scrollToRow(row);                  // 복원
 | **`default`**(기본) | `#888888` | **대부분** — 닫기, 복사, 드래그, 펼치기, 행 삭제 |
 | `action` | `#025497` | 진입·추가처럼 **의미 있는 조작** — 편집 모드 진입, 항목 추가, 행 수정 |
 | `subAction` | `#5CB0F3` | `action` 다음 계층 — `action`·`default` 사이의 중의적 의미 + 부분 강조 |
+| `complete` | `#00973C` | **완료**를 나타내는 조작 — 완료 처리(`check`) 등 |
 | `danger` | `#E30000` | **되돌릴 수 없는 삭제** |
 | `inverse` | `#FFFFFF` | 어두운 배경 위 (GNB 접기 등) |
 
@@ -3365,14 +3366,17 @@ export default function SalesDashboardPage() {
             <SCard key={s.label} bordered className="flex flex-col gap-sd-4 p-sd-16">
               <span className="typo-body-sm-default text-fg-secondary">{s.label}</span>
               {/* 카드 안의 메인 수치는 typo-heading-xl — 제목에는 쓰지 않는다 (§2-1) */}
-              <span className="typo-heading-xl">
+              <span className="typo-heading-xl text-right">
                 {s.value.toLocaleString()}
                 {s.unit}
               </span>
-              {/* 증감은 숫자 앞 부호와 색으로 함께 말한다 — 색만으로 뜻을 싣지 않는다 */}
-              <span className="typo-body-sm-default text-fg-tertiary">
+              {/* 증감은 숫자 앞 부호와 색으로 함께 말한다 — 색만으로 뜻을 싣지 않는다.
+                  문장 안 강조라 굵기는 typo-body-sm-medium 프리셋으로 준다 (§2-1) */}
+              <span className="typo-body-sm-default text-right text-fg-tertiary">
                 전기간 대비{' '}
-                <span className={s.change >= 0 ? 'text-fg-success' : 'text-fg-danger'}>
+                <span
+                  className={`typo-body-sm-medium ${s.change >= 0 ? 'text-fg-success' : 'text-fg-danger'}`}
+                >
                   {s.change >= 0 ? '+' : ''}
                   {s.change.toLocaleString()}%
                 </span>
@@ -3383,16 +3387,20 @@ export default function SalesDashboardPage() {
 
         {/* 차트는 섹션 카드에 담는다. 차트 이름은 카드의 title 이 맡으므로 차트의 title 은 주지 않는다 —
             둘 다 주면 제목이 두 줄이 된다. 단위(unit)는 차트가 오른쪽 위에 적는다.
-            한 페이지에 섹션 카드가 여럿이라 marker 를 켠다 (§4-5) */}
+            한 페이지 안의 카드 헤더(titleSize·배경)는 전부 같게 간다 (§4-5) */}
         {/* 날짜순 흐름이라 선 — 순서가 있는 항목의 추이 (§3-0 B). 항목(날짜)이 많아 한 줄을 다 쓴다 */}
-        <SSectionHeaderCard title="일별 매출" marker>
+        <SSectionHeaderCard
+          title="일별 매출"
+          titleSize="sm"
+          headerClassName="bg-bg-neutralBright!"
+          padding="none"
+        >
           <SLineChart
             categories={daily.categories}
             series={[{ name: '매출', data: daily.data }]}
             unit="원"
             area
             showLegend={false}
-            height={280}
             formatValue={won}
             // 차트는 "어느 쪽이 큰가" 까지만 답한다 — 정확한 값은 그날의 주문 목록에서 본다
             onPointClick={p => navigate(`/orders?date=${daily.dates[p.categoryIndex]}`)}
@@ -3401,26 +3409,36 @@ export default function SalesDashboardPage() {
 
         <div className="grid grid-cols-2 gap-sd-12">
           {/* 합계는 도넛 구멍이 아니라 카드 subtitle 에 적는다 (§3-0 B) */}
-          <SSectionHeaderCard title="판매처별 비중" marker subtitle={`합계 ${won(channelTotal)}`}>
+          <SSectionHeaderCard
+            title="판매처별 비중"
+            titleSize="sm"
+            subtitle={`합계 ${won(channelTotal)}`}
+            padding="none"
+            headerClassName="bg-bg-neutralBright!"
+          >
             <SDonutChart
               data={channelShare}
               legendPosition="bottom"
               formatValue={won}
               // 그림은 폭만큼의 정사각형이다 — 칸을 다 채우면 옆 카드보다 훨씬 길어지므로
               // 화면 고유 치수로 폭을 묶는다 (§1-2)
-              className="mx-auto max-w-[280px]"
+              className="mx-auto max-w-[310px]"
             />
           </SSectionHeaderCard>
 
           {/* 항목끼리 크기를 견주므로 막대. 상품명이 길어 가로 막대로 눕힌다 */}
-          <SSectionHeaderCard title="상품별 판매량 TOP 5" marker>
+          <SSectionHeaderCard
+            title="상품별 판매량 TOP 5"
+            titleSize="sm"
+            padding="none"
+            headerClassName="bg-bg-neutralBright!"
+          >
             <SBarChart
               categories={topProducts.categories}
               series={[{ name: '판매량', data: topProducts.data }]}
               unit="개"
               direction="horizontal"
               showLegend={false}
-              height={320}
               formatValue={v => `${v.toLocaleString()}개`}
             />
           </SSectionHeaderCard>
@@ -5457,7 +5475,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 | typo-field-sm-bold | 12px | 700 | 20px |
 | typo-field-md-default | 14px | 400 | 24px |
 | typo-field-md-medium | 14px | 500 | 24px |
-| typo-field-md-bold | 14px | 700 | 24px |
+| typo-field-md-bold | 14px | 600 | 24px |
 | typo-field-lg-default | 16px | 400 | 26px |
 | typo-field-lg-medium | 16px | 500 | 26px |
 | typo-field-lg-bold | 16px | 700 | 26px |
@@ -8513,7 +8531,8 @@ export type SGhostButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
 ### SGhostButtonIntent
 
 ```ts
-export type SGhostButtonIntent = 'default' | 'danger' | 'action' | 'subAction' | 'inverse';
+export type SGhostButtonIntent =
+  'default' | 'danger' | 'action' | 'subAction' | 'complete' | 'inverse';
 ```
 
 ## Dependencies
@@ -10897,6 +10916,7 @@ export type SRadioValue = string | number | boolean;
 | `value?` | `string \| number \| null` | — | 현재 선택 값 |
 | `size?` | `SRadioButtonSize` | `'sm'` | 크기 |
 | `disabled?` | `boolean` | `false` | 전체 비활성 |
+| `readOnly?` | `boolean` | `false` | 읽기 전용. 선택 값을 보여주기만 하고 바꿀 수 없다. 모든 버튼이 readOnly 배경, 선택된 버튼만 readOnly 테두리·기본 글자색으로 구분하고 선택되지 않은 버튼의 글자는 disabled 색이다. 포커스·툴팁은 유지된다. `disabled`(그룹·옵션)가 함께 오면 disabled 가 우선한다. |
 | `name?` | `string` | — | input name 속성 |
 | `showTooltip?` | `boolean` | `false` | 옵션 호버 시 툴팁 노출. 문구는 옵션별 `tooltip` 으로 주며, 문구가 없는 옵션은 툴팁을 띄우지 않는다. 툴팁 타입은 `accent` 고정이다. |
 | `className?` | `string` | — |  |

package/dist/llms.txt

@@ -1427,6 +1427,7 @@ tableRef.current.scrollToRow(row);                  // 복원
 | **`default`**(기본) | `#888888` | **대부분** — 닫기, 복사, 드래그, 펼치기, 행 삭제 |
 | `action` | `#025497` | 진입·추가처럼 **의미 있는 조작** — 편집 모드 진입, 항목 추가, 행 수정 |
 | `subAction` | `#5CB0F3` | `action` 다음 계층 — `action`·`default` 사이의 중의적 의미 + 부분 강조 |
+| `complete` | `#00973C` | **완료**를 나타내는 조작 — 완료 처리(`check`) 등 |
 | `danger` | `#E30000` | **되돌릴 수 없는 삭제** |
 | `inverse` | `#FFFFFF` | 어두운 배경 위 (GNB 접기 등) |
 
@@ -3366,14 +3367,17 @@ export default function SalesDashboardPage() {
             <SCard key={s.label} bordered className="flex flex-col gap-sd-4 p-sd-16">
               <span className="typo-body-sm-default text-fg-secondary">{s.label}</span>
               {/* 카드 안의 메인 수치는 typo-heading-xl — 제목에는 쓰지 않는다 (§2-1) */}
-              <span className="typo-heading-xl">
+              <span className="typo-heading-xl text-right">
                 {s.value.toLocaleString()}
                 {s.unit}
               </span>
-              {/* 증감은 숫자 앞 부호와 색으로 함께 말한다 — 색만으로 뜻을 싣지 않는다 */}
-              <span className="typo-body-sm-default text-fg-tertiary">
+              {/* 증감은 숫자 앞 부호와 색으로 함께 말한다 — 색만으로 뜻을 싣지 않는다.
+                  문장 안 강조라 굵기는 typo-body-sm-medium 프리셋으로 준다 (§2-1) */}
+              <span className="typo-body-sm-default text-right text-fg-tertiary">
                 전기간 대비{' '}
-                <span className={s.change >= 0 ? 'text-fg-success' : 'text-fg-danger'}>
+                <span
+                  className={`typo-body-sm-medium ${s.change >= 0 ? 'text-fg-success' : 'text-fg-danger'}`}
+                >
                   {s.change >= 0 ? '+' : ''}
                   {s.change.toLocaleString()}%
                 </span>
@@ -3384,16 +3388,20 @@ export default function SalesDashboardPage() {
 
         {/* 차트는 섹션 카드에 담는다. 차트 이름은 카드의 title 이 맡으므로 차트의 title 은 주지 않는다 —
             둘 다 주면 제목이 두 줄이 된다. 단위(unit)는 차트가 오른쪽 위에 적는다.
-            한 페이지에 섹션 카드가 여럿이라 marker 를 켠다 (§4-5) */}
+            한 페이지 안의 카드 헤더(titleSize·배경)는 전부 같게 간다 (§4-5) */}
         {/* 날짜순 흐름이라 선 — 순서가 있는 항목의 추이 (§3-0 B). 항목(날짜)이 많아 한 줄을 다 쓴다 */}
-        <SSectionHeaderCard title="일별 매출" marker>
+        <SSectionHeaderCard
+          title="일별 매출"
+          titleSize="sm"
+          headerClassName="bg-bg-neutralBright!"
+          padding="none"
+        >
           <SLineChart
             categories={daily.categories}
             series={[{ name: '매출', data: daily.data }]}
             unit="원"
             area
             showLegend={false}
-            height={280}
             formatValue={won}
             // 차트는 "어느 쪽이 큰가" 까지만 답한다 — 정확한 값은 그날의 주문 목록에서 본다
             onPointClick={p => navigate(`/orders?date=${daily.dates[p.categoryIndex]}`)}
@@ -3402,26 +3410,36 @@ export default function SalesDashboardPage() {
 
         <div className="grid grid-cols-2 gap-sd-12">
           {/* 합계는 도넛 구멍이 아니라 카드 subtitle 에 적는다 (§3-0 B) */}
-          <SSectionHeaderCard title="판매처별 비중" marker subtitle={`합계 ${won(channelTotal)}`}>
+          <SSectionHeaderCard
+            title="판매처별 비중"
+            titleSize="sm"
+            subtitle={`합계 ${won(channelTotal)}`}
+            padding="none"
+            headerClassName="bg-bg-neutralBright!"
+          >
             <SDonutChart
               data={channelShare}
               legendPosition="bottom"
               formatValue={won}
               // 그림은 폭만큼의 정사각형이다 — 칸을 다 채우면 옆 카드보다 훨씬 길어지므로
               // 화면 고유 치수로 폭을 묶는다 (§1-2)
-              className="mx-auto max-w-[280px]"
+              className="mx-auto max-w-[310px]"
             />
           </SSectionHeaderCard>
 
           {/* 항목끼리 크기를 견주므로 막대. 상품명이 길어 가로 막대로 눕힌다 */}
-          <SSectionHeaderCard title="상품별 판매량 TOP 5" marker>
+          <SSectionHeaderCard
+            title="상품별 판매량 TOP 5"
+            titleSize="sm"
+            padding="none"
+            headerClassName="bg-bg-neutralBright!"
+          >
             <SBarChart
               categories={topProducts.categories}
               series={[{ name: '판매량', data: topProducts.data }]}
               unit="개"
               direction="horizontal"
               showLegend={false}
-              height={320}
               formatValue={v => `${v.toLocaleString()}개`}
             />
           </SSectionHeaderCard>
@@ -5458,7 +5476,7 @@ Tailwind 유틸리티는 아래 스케일에 있는 값만 사용한다. 리터
 | typo-field-sm-bold | 12px | 700 | 20px |
 | typo-field-md-default | 14px | 400 | 24px |
 | typo-field-md-medium | 14px | 500 | 24px |
-| typo-field-md-bold | 14px | 700 | 24px |
+| typo-field-md-bold | 14px | 600 | 24px |
 | typo-field-lg-default | 16px | 400 | 26px |
 | typo-field-lg-medium | 16px | 500 | 26px |
 | typo-field-lg-bold | 16px | 700 | 26px |

package/dist/styles.css

@@ -1520,8 +1520,8 @@
   .w-sd-8 {
     width: var(--spacing-sd-8);
   }
-  .max-w-\[280px\] {
-    max-width: 280px;
+  .max-w-\[310px\] {
+    max-width: 310px;
   }
   .max-w-\[360px\] {
     max-width: 360px;
@@ -3210,6 +3210,9 @@
   .bg-bg-neutralBright {
     background-color: var(--color-bg-neutralBright);
   }
+  .bg-bg-neutralBright\! {
+    background-color: var(--color-bg-neutralBright) !important;
+  }
   .bg-bg-neutralLight {
     background-color: var(--color-bg-neutralLight);
   }
@@ -7650,6 +7653,8 @@
   --cmp-ghostButton-group-gap: 4px;
   --cmp-ghostButton-subAction-content: #5CB0F3;
   --cmp-ghostButton-subAction-hover-bg: #5CB0F3;
+  --cmp-ghostButton-complete-content: #00973C;
+  --cmp-ghostButton-complete-hover-bg: #12B553;
   --cmp-textLink-sm-gap: 4px;
   --cmp-textLink-sm-icon: 16px;
   --cmp-textLink-md-gap: 8px;
@@ -7744,10 +7749,12 @@
   --cmp-radioButton-border-default: #CCCCCC;
   --cmp-radioButton-border-select: #0075FF;
   --cmp-radioButton-border-disabled: #CCCCCC;
+  --cmp-radioButton-border-readOnly: #AAAAAA;
   --cmp-radioButton-bg-default: #FFFFFF;
   --cmp-radioButton-bg-hover: #0075FF;
   --cmp-radioButton-bg-select: #FFFFFF;
   --cmp-radioButton-bg-disabled: #E1E1E1;
+  --cmp-radioButton-bg-readOnly: #EEEEEE;
   --cmp-radioButton-content-default: #555555;
   --cmp-radioButton-content-hover: #FFFFFF;
   --cmp-radioButton-content-select: #0075FF;
@@ -9309,7 +9316,7 @@
   .typo-field-md-bold {
     font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
     font-size: 14px;
-    font-weight: 700;
+    font-weight: 600;
     line-height: 24px;
   }
   .typo-field-lg-default {

package/dist/theme.css

@@ -651,6 +651,8 @@
   --cmp-ghostButton-group-gap: 4px;
   --cmp-ghostButton-subAction-content: #5CB0F3;
   --cmp-ghostButton-subAction-hover-bg: #5CB0F3;
+  --cmp-ghostButton-complete-content: #00973C;
+  --cmp-ghostButton-complete-hover-bg: #12B553;
   --cmp-textLink-sm-gap: 4px;
   --cmp-textLink-sm-icon: 16px;
   --cmp-textLink-md-gap: 8px;
@@ -745,10 +747,12 @@
   --cmp-radioButton-border-default: #CCCCCC;
   --cmp-radioButton-border-select: #0075FF;
   --cmp-radioButton-border-disabled: #CCCCCC;
+  --cmp-radioButton-border-readOnly: #AAAAAA;
   --cmp-radioButton-bg-default: #FFFFFF;
   --cmp-radioButton-bg-hover: #0075FF;
   --cmp-radioButton-bg-select: #FFFFFF;
   --cmp-radioButton-bg-disabled: #E1E1E1;
+  --cmp-radioButton-bg-readOnly: #EEEEEE;
   --cmp-radioButton-content-default: #555555;
   --cmp-radioButton-content-hover: #FFFFFF;
   --cmp-radioButton-content-select: #0075FF;
@@ -2329,7 +2333,7 @@
   .typo-field-md-bold {
     font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
     font-size: 14px;
-    font-weight: 700;
+    font-weight: 600;
     line-height: 24px;
   }
   .typo-field-lg-default {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "9.0.0-beta.83",
+  "version": "9.0.0-beta.86",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [