@idbrnd/design-system 3.2.0 → 3.3.0

package/README.md

@@ -1,6 +1,6 @@
 # @idbrnd/design-system
 
-![Version](https://img.shields.io/badge/version-3.2.0-4B5FE1?style=flat-square)
+![Version](https://img.shields.io/badge/version-3.3.0-4B5FE1?style=flat-square)
 ![React](https://img.shields.io/badge/React-18.3.1-61DAFB?style=flat-square&logo=react&logoColor=white)
 ![Vite](https://img.shields.io/badge/Vite-7.3.0-646CFF?style=flat-square&logo=vite&logoColor=white)
 ![TypeScript](https://img.shields.io/badge/TypeScript-5.9.3-3178C6?style=flat-square&logo=typescript&logoColor=white)
@@ -40,6 +40,7 @@ export default function App() {
   - [OutlineButton](#outlinebutton)
   - [TextButton](#textbutton)
   - [WeakButton](#weakbutton)
+  - [TertiaryButton](#tertiarybutton)
 - [아이콘 버튼](#아이콘-버튼)
   - [BasicIconButton](#basiciconbutton)
   - [FillIconButton](#filliconbutton)
@@ -56,6 +57,7 @@ export default function App() {
   - [Toast](#toast)
   - [Snackbar](#snackbar)
   - [PushBadge](#pushbadge)
+  - [EmptyState](#emptystate)
   - [Tooltip](#tooltip)
 - [Select](#select)
 - [Dropdown](#dropdown)
@@ -161,6 +163,35 @@ import { WeakButton } from "@idbrnd/design-system";
 | `keepFocusOnClick` | `boolean`                                          | `false`      | 클릭 후 포커스 유지 |
 | `customStyle`      | `CSSProperties`                                    | —            | 추가 인라인 스타일  |
 
+### TertiaryButton
+
+아이콘 슬롯을 갖는 보조 버튼입니다. 다른 버튼과 달리 `widthType`이 없고, `leadingIcon` / `trailingIcon`으로 텍스트 앞뒤에 아이콘을 배치할 수 있습니다.
+
+```tsx
+import { TertiaryButton } from "@idbrnd/design-system";
+import { ChevronDownIcon, PlusIcon } from "@idbrnd/design-system";
+
+<TertiaryButton variant="fill">확인</TertiaryButton>
+<TertiaryButton variant="primary" leadingIcon={<PlusIcon size={16} />}>추가</TertiaryButton>
+<TertiaryButton variant="gray" size="small" trailingIcon={<ChevronDownIcon size={16} />}>더보기</TertiaryButton>
+```
+
+| Prop               | 타입                                                  | 기본값     | 설명                |
+| ------------------ | ----------------------------------------------------- | ---------- | ------------------- |
+| `variant`          | `"fill"` \| `"tinted"` \| `"gray"` \| `"primary"`     | `"fill"`   | 색상 변형           |
+| `size`             | `"small"` \| `"medium"` \| `"large"`                  | `"medium"` | 크기                |
+| `leadingIcon`      | `ReactNode`                                           | —          | 텍스트 앞 아이콘    |
+| `trailingIcon`     | `ReactNode`                                           | —          | 텍스트 뒤 아이콘    |
+| `loading`          | `boolean`                                             | `false`    | 로딩 스피너 표시    |
+| `disabled`         | `boolean`                                             | `false`    | 비활성화            |
+| `keepFocusOnClick` | `boolean`                                             | `false`    | 클릭 후 포커스 유지 |
+| `customStyle`      | `CSSProperties`                                       | —          | 추가 인라인 스타일  |
+
+유의사항:
+
+- `loading` 중에는 아이콘과 children 대신 스피너만 표시되며 클릭이 동작하지 않습니다.
+- 다른 버튼들과 달리 `widthType`이 없어 항상 콘텐츠 크기를 따릅니다.
+
 ---
 
 ## 아이콘 버튼
@@ -645,6 +676,64 @@ import { PushBadge } from "@idbrnd/design-system";
 | `maxCount`    | `number`                          | `999`      | `count`가 초과하면 `{maxCount}+`로 표시 |
 | `customStyle` | `CSSProperties`                   | —          | 추가 인라인 스타일                      |
 
+### EmptyState
+
+사용자가 특정 페이지에 처음 접속했을 때나 표시할 수 있는 데이터가 없을 때 노출하는 컴포넌트입니다.
+
+```tsx
+import { EmptyState, FillButton } from "@idbrnd/design-system";
+import { FolderIcon } from "@idbrnd/design-system";
+
+<EmptyState
+  size="medium"
+  visualContent={<FolderIcon size={36} />}
+  headingContent="등록된 프로젝트가 없습니다."
+  descriptionContent={"첫 번째 프로젝트를 생성하고\n모니터링을 시작해 보세요."}
+  buttonContent={
+    <FillButton variant="primary" size="xsmall">
+      프로젝트 생성
+    </FillButton>
+  }
+/>;
+```
+
+**텍스트만 사용 (위젯·테이블 내부)**
+
+```tsx
+<EmptyState
+  size="small"
+  headingContent="검색 결과가 없습니다."
+  descriptionContent="다른 키워드로 다시 검색해 보세요."
+/>
+```
+
+| Prop                 | 타입                                   | 기본값    | 설명                                                            |
+| -------------------- | -------------------------------------- | --------- | --------------------------------------------------------------- |
+| `size`               | `"large"` \| `"medium"` \| `"small"`   | `"small"` | 배치 구역의 크기·위계에 따른 사이즈                             |
+| `visualContent`      | `ReactNode`                            | —         | 상단 시각 요소. 일러스트·아이콘·이미지·임의 컴포넌트 모두 가능  |
+| `headingContent`     | `ReactNode`                            | —         | 타이틀. 상황을 짧게 요약하며 단일 행 권장                       |
+| `descriptionContent` | `ReactNode`                            | —         | 설명. 개행(`\n`)이 그대로 반영되며 줄 수 제한 없음              |
+| `buttonContent`      | `ReactNode`                            | —         | CTA 버튼 슬롯                                                   |
+| `customStyle`        | `CSSProperties`                        | —         | 루트에 적용할 추가 인라인 스타일                                |
+| `className`          | `string`                               | —         | 루트에 추가할 클래스명                                          |
+
+**size별 스펙**
+
+|                  | `large`                          | `medium`                         | `small`                           |
+| ---------------- | -------------------------------- | -------------------------------- | --------------------------------- |
+| 시각 요소 슬롯   | 80×80                            | 48×48                            | 32×32                             |
+| 타이틀           | `--text-heading-2-semibold`      | `--text-heading-2-semibold`      | `--text-body-2-normal-semibold`   |
+| 설명             | `--text-body-1-reading-regular`  | `--text-body-1-reading-regular`  | `--text-label-2-reading-regular`  |
+| 권장 버튼        | `FillButton` `assistive`/`small` | `FillButton` `assistive`/`xsmall`| `FillButton` `assistive`/`xsmall` |
+
+유의사항:
+
+- **네 슬롯 모두 넘긴 것만 렌더됩니다.** 넘기지 않으면 해당 영역과 인접 간격이 함께 사라지므로, 화면 상황에 맞게 가볍거나 묵직하게 조합할 수 있습니다.
+- 루트는 부모를 채우고(`width`/`height: 100%`) 콘텐츠를 중앙 정렬합니다. 상하 여백은 80px입니다.
+- 전체 화면 단위에는 `size="large"` 또는 `"medium"`에 시각 요소와 버튼을 함께 두어 액션을 유도하고, 카드·테이블 내부에는 `size="small"`로 컴팩트하게 노출하는 것을 권장합니다.
+- 텍스트는 `[상황 설명 + 해결책 제안]` 구조로 작성합니다. 설명은 두 줄 이내를 권장하지만 강제되지는 않습니다.
+- `visualContent`에 넣은 노드는 슬롯 크기에 맞춰 `max-width`/`max-height: 100%`가 적용됩니다.
+
 ### Tooltip
 
 트리거 엘리먼트에 마우스를 올리거나 클릭하면 말풍선 형태의 안내 텍스트를 표시하는 컴포넌트입니다. `trigger="always"`로 항상 표시되는 고정 안내 형태로도 사용할 수 있습니다.
@@ -1941,6 +2030,9 @@ import type {
   WeakButtonSize,
   WeakButtonVariant,
   WeakButtonWidthType,
+  TertiaryButtonProps,
+  TertiaryButtonSize,
+  TertiaryButtonVariant,
 
   // IconButton
   BasicIconButtonProps,
@@ -1961,6 +2053,11 @@ import type {
   SearchBarSize,
   SearchBarVariant,
 
+  // Textarea
+  TextareaProps,
+  TextareaSize,
+  TextareaVariant,
+
   // Control
   CheckBoxProps,
   CheckBoxVariant,
@@ -1980,6 +2077,8 @@ import type {
   SnackbarVariant,
   PushBadgeProps,
   PushBadgeVariant,
+  EmptyStateProps,
+  EmptyStateSize,
   ClipProps,
   CustomSpinnerProps,
   FadeSpinnerProps,
@@ -2015,6 +2114,17 @@ import type {
   DropdownType,
   DropdownAlign,
 
+  // Chip
+  ChipProps,
+  ChipVariant,
+  ChipSize,
+  ChipGroupProps,
+  ChipGroupType,
+  ChipGroupSize,
+  FilterChipProps,
+  FilterBarProps,
+  FilterBarSize,
+
   // SegmentedControl
   SegmentedControlProps,
   SegmentedControlVariant,

package/dist/components/Feedback/EmptyState/EmptyState.d.ts

@@ -0,0 +1,30 @@
+import type { CSSProperties, ReactNode } from 'react';
+export type EmptyStateSize = 'large' | 'medium' | 'small';
+export interface EmptyStateProps {
+    /** 배치 구역의 크기·위계에 따른 사이즈 */
+    size?: EmptyStateSize;
+    /**
+     * 상단 시각 요소 슬롯. 일러스트·아이콘·이미지·임의의 컴포넌트를 모두 받는다.
+     * 넘기지 않으면 영역 자체를 렌더하지 않는다.
+     */
+    visualContent?: ReactNode;
+    /**
+     * 타이틀. 상황을 짧게 요약하며 단일 행을 권장한다.
+     * 넘기지 않으면 영역 자체를 렌더하지 않는다.
+     */
+    headingContent?: ReactNode;
+    /**
+     * 설명. 개행(`\n`)이 그대로 반영되며, 줄 수는 제한하지 않는다 (가이드상 두 줄 권장).
+     * 넘기지 않으면 영역 자체를 렌더하지 않는다.
+     */
+    descriptionContent?: ReactNode;
+    /**
+     * CTA 버튼 슬롯. 소비처가 원하는 버튼 컴포넌트를 직접 넣는다.
+     * 넘기지 않으면 영역 자체를 렌더하지 않는다.
+     */
+    buttonContent?: ReactNode;
+    customStyle?: CSSProperties;
+    className?: string;
+}
+declare function EmptyState({ size, visualContent, headingContent, descriptionContent, buttonContent, customStyle, className }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
+export default EmptyState;

package/dist/index.d.ts

@@ -28,10 +28,12 @@ export { default as ToggleSwitch } from "./components/Control/ToggleSwitch/Toggl
 export type { CheckBoxProps, CheckBoxVariant, CheckBoxSize, CheckBoxDensity, } from "./components/Control/CheckBox/CheckBox";
 export type { RadioProps, RadioVariant, RadioSize, RadioDensity, } from "./components/Control/Radio/Radio";
 export type { ToggleSwitchProps, ToggleSwitchSize, } from "./components/Control/ToggleSwitch/ToggleSwitch";
+export { default as EmptyState } from "./components/Feedback/EmptyState/EmptyState";
 export { default as PushBadge } from "./components/Feedback/PushBadge/PushBadge";
 export { dismissToast, showToast } from "./components/Feedback/Toast/Toast";
 export { dismissSnackbar, showSnackbar, } from "./components/Feedback/Snackbar/Snackbar";
 export { default as Spinner, Clip, CustomSpinner, FadeSpinner, } from "./components/Spinner/Spinner";
+export type { EmptyStateProps, EmptyStateSize, } from "./components/Feedback/EmptyState/EmptyState";
 export type { PushBadgeProps, PushBadgeVariant, } from "./components/Feedback/PushBadge/PushBadge";
 export type { ToastShowOptions, ToastVariant, } from "./components/Feedback/Toast/Toast";
 export type { SnackbarShowOptions, SnackbarVariant, } from "./components/Feedback/Snackbar/Snackbar";