@idbrnd/design-system 4.5.0 → 4.6.0

package/README.md

@@ -1,6 +1,6 @@
 # @idbrnd/design-system
 
-![Version](https://img.shields.io/static/v1?label=version&message=4.5.0&color=blue&style=flat-square) <!-- x-release-please-version -->
+![Version](https://img.shields.io/static/v1?label=version&message=4.6.0&color=blue&style=flat-square) <!-- x-release-please-version -->
 ![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)
@@ -60,6 +60,7 @@ export default function App() {
   - [EmptyState](#emptystate)
   - [Tooltip](#tooltip)
   - [Modal](#modal)
+  - [Popup](#popup)
 - [Select](#select)
 - [Dropdown](#dropdown)
 - [DatePicker](#datepicker)
@@ -907,6 +908,98 @@ const [open, setOpen] = useState(false);
 - `closeOnDimClick`은 기본값이 `false`입니다. 딤에서 누르기 시작해 모달 내부로 드래그하다 놓는 경우는 닫기로 처리하지 않습니다(누르기·떼기가 모두 딤 위에서 일어나야 함).
 - `navBar={false}`로 헤더 전체를 숨길 수 있고, `actionSlot`/`mainAction`/`subAction`을 모두 생략하면 액션 영역 자체가 렌더링되지 않습니다.
 - 닫힐 때 150ms 페이드+스케일 애니메이션 후 언마운트되며, `prefers-reduced-motion: reduce` 환경에서는 애니메이션이 비활성화됩니다.
+- 열릴 때 다이얼로그로 옮겨간 포커스는 닫힐 때 열리기 직전에 포커스가 있던 요소(보통 트리거 버튼)로 되돌립니다. 액션 핸들러가 이미 포커스를 다른 곳으로 옮겼다면 덮어쓰지 않습니다. 트리거가 `react-modal` 같은 다른 모달 안에 있어도 그 모달의 ESC·포커스 트랩이 끊기지 않습니다.
+
+---
+
+### Popup
+
+간단한 경고나 짧은 메시지로 사용자의 즉각적인 확인을 받아야 할 때 화면 중앙에 노출되는 컴포넌트입니다. 제목·본문·액션 버튼(최대 2개)의 단순한 구조만 제공하며, 서비스 이탈·데이터 삭제처럼 치명적인 확인이 필요한 경우에 사용을 권장합니다. 이미지·리스트 같은 복잡한 콘텐츠는 `Modal`을 사용하세요. `open`/`onClose`로 제어하는 controlled 컴포넌트이며, `document.body`에 포털로 렌더링됩니다.
+
+```tsx
+import { useState } from "react";
+import { Popup, FillButton } from "@idbrnd/design-system";
+
+const [open, setOpen] = useState(false);
+
+<FillButton variant="error" onClick={() => setOpen(true)}>삭제</FillButton>
+<Popup
+  open={open}
+  onClose={() => setOpen(false)}
+  heading="정말 삭제하시겠어요?"
+  body="삭제한 항목은 복구할 수 없습니다."
+  mainAction={{ label: "삭제", onClick: handleDelete, variant: "error" }}
+  subAction={{ label: "취소", onClick: () => setOpen(false) }}
+/>;
+```
+
+**platform / variant 조합**
+
+```tsx
+{/* text: 액션을 TextButton 으로 우측 정렬 */}
+<Popup open={open} onClose={onClose} variant="text" heading="..." body="..." mainAction={...} subAction={...} />
+
+{/* mobile: 버튼 large, basic 액션은 동일 너비로 분할 */}
+<Popup open={open} onClose={onClose} platform="mobile" heading="..." body="..." mainAction={...} subAction={...} />
+```
+
+**액션 영역 직접 구성**
+
+```tsx
+<Popup
+  open={open}
+  onClose={onClose}
+  heading="담당자 지정이 필요한 사용자가 있습니다."
+  actionSlot={
+    <div style={{ display: "flex", flexDirection: "column", gap: 12, width: "100%" }}>
+      <FillButton widthType="fixed" onClick={handleAssignAll}>모두 담당자로 지정하고 발송</FillButton>
+      <OutlineButton widthType="fixed" onClick={handleOnlyManagers}>기존 담당자에게만 발송</OutlineButton>
+    </div>
+  }
+/>
+```
+
+| Prop              | 타입                      | 기본값    | 설명                                                                 |
+| ----------------- | ------------------------- | --------- | -------------------------------------------------------------------- |
+| `open`            | `boolean`                 | —         | **(필수)** 팝업 표시 여부 (controlled)                                 |
+| `onClose`         | `() => void`              | —         | **(필수)** ESC 키·딤 클릭으로 닫힐 때 호출                             |
+| `platform`        | `"web"` \| `"mobile"`     | `"web"`   | 크기 프리셋 — `mobile`은 버튼 large, basic 액션을 동일 너비로 분할     |
+| `variant`         | `"basic"` \| `"text"`     | `"basic"` | 액션 버튼 형태 — `basic`은 Fill/Outline 버튼, `text`는 TextButton 우측 정렬 |
+| `heading`         | `ReactNode`               | —         | 타이틀 (`body`와 둘 중 하나는 필수)                                    |
+| `body`            | `ReactNode`               | —         | 본문 (`heading`과 둘 중 하나는 필수)                                   |
+| `mainAction`      | `PopupAction`             | —         | 메인 액션 — 우측 배치, 시각적 위계 최상위                              |
+| `subAction`       | `PopupAction`             | —         | 서브 액션 — 메인 액션 좌측 배치                                        |
+| `actionSlot`      | `ReactNode`               | —         | 지정 시 `mainAction`/`subAction` 대신 액션 영역을 통째로 교체           |
+| `closeOnEsc`      | `boolean`                 | `true`    | ESC 키로 닫기 허용                                                    |
+| `closeOnDimClick` | `boolean`                 | `false`   | 딤 클릭으로 닫기 허용                                                 |
+| `customStyle`     | `CSSProperties`           | —         | 다이얼로그 루트에 적용할 추가 인라인 스타일                            |
+| `className`       | `string`                  | —         | 다이얼로그 루트에 추가할 클래스명                                      |
+
+**`PopupAction`**
+
+| 필드       | 타입                      | 설명                                                                     |
+| ---------- | ------------------------- | ------------------------------------------------------------------------ |
+| `label`    | `string`                  | **(필수)** 버튼 레이블                                                   |
+| `onClick`  | `() => void`              | **(필수)** 클릭 콜백                                                     |
+| `variant`  | `"primary"` \| `"error"`  | 메인 액션 색상 — 데이터 삭제 등 파괴적 행동 확인에는 `error`(빨강). 서브 액션에는 적용되지 않음 |
+| `loading`  | `boolean`                 | 로딩 스피너 표시 여부                                                    |
+| `disabled` | `boolean`                 | 비활성화 여부                                                            |
+
+**버튼 매핑**
+
+| `variant` | `subAction`               | `mainAction`         |
+| --------- | ------------------------- | -------------------- |
+| `basic`   | `OutlineButton` secondary | `FillButton` primary/error |
+| `text`    | `TextButton` assistive    | `TextButton` primary |
+
+유의사항:
+
+- `heading`과 `body` 중 하나는 반드시 넘겨야 합니다. 둘 다 없으면 개발 모드에서 `console.warn`이 출력됩니다(렌더는 막지 않음).
+- 액션을 클릭해도 자동으로 닫히지 않습니다. `Modal`과 마찬가지로 호출자가 `onClick`에서 `onClose`를 호출하며, 비동기 액션은 `loading` 후 닫는 흐름을 그대로 쓸 수 있습니다.
+- 너비는 콘텐츠에 맞춰 320~440px 범위에서 결정됩니다(`calc(100vw - 32px)` 이내).
+- 배경 스크롤 차단, 중첩 스택, "ESC는 최상단 오버레이만 닫힘"은 `Modal`과 같은 공용 로직을 사용합니다. `Modal` 위에 `Popup`을 띄우는 중첩도 지원합니다.
+- 열릴 때 다이얼로그로 옮겨간 포커스는 닫힐 때 열리기 직전에 포커스가 있던 요소(보통 트리거 버튼)로 되돌립니다. 액션 핸들러가 이미 포커스를 다른 곳으로 옮겼다면 덮어쓰지 않습니다. 트리거가 `react-modal` 같은 다른 모달 안에 있어도 그 모달의 ESC·포커스 트랩이 끊기지 않습니다.
+- 닫힐 때 150ms 페이드 애니메이션 후 언마운트되며, `prefers-reduced-motion: reduce` 환경에서는 애니메이션이 비활성화됩니다.
 
 ---
 
@@ -2314,7 +2407,7 @@ import { Spinner, CustomSpinner, Clip, FadeSpinner } from "@idbrnd/design-system
 
 ## 아이콘
 
-피그마에서 추출한 SVG 아이콘이 React 컴포넌트로 제공됩니다. 현재 **194개** 아이콘이 포함되어 있습니다.
+피그마에서 추출한 SVG 아이콘이 React 컴포넌트로 제공됩니다.
 
 ### 개별 컴포넌트 import (권장)
 
@@ -2369,11 +2462,11 @@ const icon: IconName = "search";
 | -------------------------------------- | ---------------------------------------- |
 | 단어 구분은 `-`                        | `chevron-down`, `circle-check-fill`      |
 | fill 변형은 `-fill` 접미사             | `bell-fill`, `setting-fill`              |
-| 고정 색상 아이콘은 `dashboard-` 접두사 | `dashboard-map`, `dashboard-heart-pulse` |
+| 대시보드 아이콘은 `dashboard-` 접두사  | `dashboard-map`, `dashboard-heart-pulse` |
 
-### 고정 색상 아이콘 (dashboard-\*)
+### 고정 색상 아이콘
 
-피그마 원본 색상(`#171719` + `#4A71FF`)이 하드코딩된 아이콘입니다. `color` prop을 넘겨도 색상이 바뀌지 않습니다.
+피그마 원본 색상이 하드코딩된 아이콘입니다. `dashboard-*`는 `#171719`와 `#4A71FF`를, `ai-sparkle`과 `ai-sparkle-fill`은 `#4A71FF`에서 `#0099FF`로 이어지는 그라디언트를 사용합니다. `color` prop을 넘겨도 색상이 바뀌지 않습니다.
 
 | 아이콘 이름                    | 컴포넌트명                      |
 | ------------------------------ | ------------------------------- |
@@ -2388,6 +2481,9 @@ const icon: IconName = "search";
 | `dashboard-heart-pulse`        | `DashboardHeartPulseIcon`       |
 | `dashboard-live-monitor`       | `DashboardLiveMonitorIcon`      |
 | `dashboard-graph`              | `DashboardGraphIcon`            |
+| `dashboard-system`             | `DashboardSystemIcon`           |
+| `ai-sparkle`                   | `AiSparkleIcon`                 |
+| `ai-sparkle-fill`              | `AiSparkleFillIcon`             |
 
 ---
 

package/dist/components/Feedback/shared/useRestoreFocus.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from "react";
+export declare function useRestoreFocus(open: boolean, dialogRef: RefObject<HTMLElement>): void;

package/dist/icons/generated/AiSparkleFillIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../Icon.types";
+declare const AiSparkleFillIcon: ({ size, color, style, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default AiSparkleFillIcon;

package/dist/icons/generated/AiSparkleIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../Icon.types";
+declare const AiSparkleIcon: ({ size, color, style, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default AiSparkleIcon;

package/dist/icons/generated/ListFilterIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../Icon.types";
+declare const ListFilterIcon: ({ size, color, style, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default ListFilterIcon;

package/dist/icons/generated/OpenInPhoneIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../Icon.types";
+declare const OpenInPhoneIcon: ({ size, color, style, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default OpenInPhoneIcon;

package/dist/icons/generated/PencilFillIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../Icon.types";
+declare const PencilFillIcon: ({ size, color, style, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default PencilFillIcon;

package/dist/icons/generated/PencilIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../Icon.types";
+declare const PencilIcon: ({ size, color, style, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default PencilIcon;

package/dist/icons/generated/SirenIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../Icon.types";
+declare const SirenIcon: ({ size, color, style, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default SirenIcon;

package/dist/icons/generated/SparkleFillIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../Icon.types";
+declare const SparkleFillIcon: ({ size, color, style, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default SparkleFillIcon;

package/dist/icons/generated/SparkleIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../Icon.types";
+declare const SparkleIcon: ({ size, color, style, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default SparkleIcon;

package/dist/icons/generated/TicketIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../Icon.types";
+declare const TicketIcon: ({ size, color, style, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default TicketIcon;

package/dist/icons/generated/index.d.ts

@@ -1,5 +1,7 @@
 export { default as AiBrainFillIcon } from "./AiBrainFillIcon";
 export { default as AiBrainIcon } from "./AiBrainIcon";
+export { default as AiSparkleFillIcon } from "./AiSparkleFillIcon";
+export { default as AiSparkleIcon } from "./AiSparkleIcon";
 export { default as ArrowDownIcon } from "./ArrowDownIcon";
 export { default as ArrowDownThickIcon } from "./ArrowDownThickIcon";
 export { default as ArrowTurnDownRightIcon } from "./ArrowTurnDownRightIcon";
@@ -135,6 +137,7 @@ export { default as IntervalUpDownIcon } from "./IntervalUpDownIcon";
 export { default as LineHorizontalIcon } from "./LineHorizontalIcon";
 export { default as LineHorizontalThickIcon } from "./LineHorizontalThickIcon";
 export { default as LinkIcon } from "./LinkIcon";
+export { default as ListFilterIcon } from "./ListFilterIcon";
 export { default as ListIcon } from "./ListIcon";
 export { default as LoadingIcon } from "./LoadingIcon";
 export { default as LockFillIcon } from "./LockFillIcon";
@@ -151,6 +154,9 @@ export { default as MoreVerticalIcon } from "./MoreVerticalIcon";
 export { default as MoreVerticalTightIcon } from "./MoreVerticalTightIcon";
 export { default as OctagonAlertFillIcon } from "./OctagonAlertFillIcon";
 export { default as OctagonAlertIcon } from "./OctagonAlertIcon";
+export { default as OpenInPhoneIcon } from "./OpenInPhoneIcon";
+export { default as PencilFillIcon } from "./PencilFillIcon";
+export { default as PencilIcon } from "./PencilIcon";
 export { default as PersonContentFillIcon } from "./PersonContentFillIcon";
 export { default as PersonContentIcon } from "./PersonContentIcon";
 export { default as PersonFillIcon } from "./PersonFillIcon";
@@ -173,9 +179,12 @@ export { default as SettingFillIcon } from "./SettingFillIcon";
 export { default as SettingIcon } from "./SettingIcon";
 export { default as ShareFillIcon } from "./ShareFillIcon";
 export { default as ShareIcon } from "./ShareIcon";
+export { default as SirenIcon } from "./SirenIcon";
 export { default as SmileFillIcon } from "./SmileFillIcon";
 export { default as SmileIcon } from "./SmileIcon";
 export { default as SoundIcon } from "./SoundIcon";
+export { default as SparkleFillIcon } from "./SparkleFillIcon";
+export { default as SparkleIcon } from "./SparkleIcon";
 export { default as SquareCheckIcon } from "./SquareCheckIcon";
 export { default as SquareMoreIcon } from "./SquareMoreIcon";
 export { default as TemplateFillIcon } from "./TemplateFillIcon";
@@ -183,6 +192,7 @@ export { default as TemplateIcon } from "./TemplateIcon";
 export { default as TextFormatIcon } from "./TextFormatIcon";
 export { default as ThermometerIcon } from "./ThermometerIcon";
 export { default as ThumbnailIcon } from "./ThumbnailIcon";
+export { default as TicketIcon } from "./TicketIcon";
 export { default as TrashIcon } from "./TrashIcon";
 export { default as TriangleExclamationFillIcon } from "./TriangleExclamationFillIcon";
 export { default as TriangleExclamationIcon } from "./TriangleExclamationIcon";

package/dist/icons/iconMap.d.ts

@@ -1,6 +1,8 @@
 export declare const iconMap: {
     readonly "ai-brain-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "ai-brain": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly "ai-sparkle-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly "ai-sparkle": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "arrow-down": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "arrow-down-thick": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "arrow-turn-down-right": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
@@ -136,6 +138,7 @@ export declare const iconMap: {
     readonly "line-horizontal": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "line-horizontal-thick": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly link: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly "list-filter": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly list: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly loading: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "lock-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
@@ -152,6 +155,9 @@ export declare const iconMap: {
     readonly "more-vertical-tight": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "octagon-alert-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "octagon-alert": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly "open-in-phone": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly "pencil-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly pencil: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "person-content-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "person-content": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "person-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
@@ -174,9 +180,12 @@ export declare const iconMap: {
     readonly setting: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "share-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly share: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly siren: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "smile-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly smile: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly sound: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly "sparkle-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly sparkle: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "square-check": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "square-more": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "template-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
@@ -184,6 +193,7 @@ export declare const iconMap: {
     readonly "text-format": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly thermometer: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly thumbnail: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly ticket: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly trash: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "triangle-exclamation-fill": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "triangle-exclamation": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;