boottent-design 0.1.259 → 0.1.261

package/dist/design-system/ui/card-label.md

@@ -0,0 +1,56 @@
+# ui/card-label.md — boottent-design
+
+> [!WARNING]
+> **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
+> UI 프리미티브 — card-label.
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
+
+[← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
+
+## card-label
+
+> 카드 코너에 부착되는 레이블 컴포넌트입니다. 카드 유형별 색상 variant를 제공하며, 코너 탭 형태의 고정된 shape을 가집니다.
+
+### ✅ 언제 사용
+- PremiumCard의 "상위노출" 코너 레이블
+- EventCard의 "EVENT" 레이블
+- DdayCard의 D-day 카운트다운 레이블
+- TitleTagCard의 타이틀 태그 레이블
+
+### 🚫 주의
+- 위치(absolute top-0 right-0 등)는 소비 컴포넌트에서 className으로 지정하세요.
+- 로딩 스켈레톤 상태는 className으로 h-7 w-xx animate-pulse를 주입하세요.
+
+### Import
+```tsx
+import { /* ... */ } from "boottent-design/ui/card-label";
+```
+
+### Props
+```typescript
+export interface CardLabelProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardLabelVariants> {}
+```
+
+### Variants
+```javascript
+{
+      variant: {
+        default: "bg-grey-800 text-white",
+        titleTag: "bg-grey-800 text-white",
+        premiumCard: "bg-main-100 text-main-600",
+        event: "bg-yellow-300 text-red-400",
+        dDay: "bg-yellow-400 text-red-400",
+      },
+    }
+```
+
+### 예시
+```tsx
+<CardLabel className="absolute top-0 right-0">상위노출</CardLabel>
+<CardLabel variant="event" className="absolute top-0 right-0">EVENT</CardLabel>
+<CardLabel variant="dDay" className="absolute top-0 right-0">{tagLabel}</CardLabel>
+```
+
+### 🔗 관련 · 대안
+- Tag
+

package/dist/design-system/ui/card.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — card.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/checkbox.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — checkbox.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/circled-check-button.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — circled-check-button.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/command.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — command.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/dialog.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — dialog.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/dropdown-menu.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — dropdown-menu.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/file-uploader.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — file-uploader.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/form.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — form.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/highlight-text.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — highlight-text.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/icons.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — icons.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/image.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — image.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/input.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — input.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/label.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — label.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/month-picker.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — month-picker.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/multi-select.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — multi-select.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/navigation-menu.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — navigation-menu.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/popover.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — popover.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/portal.md

@@ -0,0 +1,64 @@
+# ui/portal.md — boottent-design
+
+> [!WARNING]
+> **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
+> UI 프리미티브 — portal.
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
+
+[← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
+
+## portal
+
+> 모달 · 다이얼로그 · 알럿 · 커스텀 오버레이를 명령형(imperative)으로 열고 닫는 포털 런타임입니다.
+상태를 직접 관리하지 않고 `usePortal()`의 `confirm`/`alert`/`dialog`/`custom`을 호출하면 됩니다.
+앱 루트에 `<PortalProvider />`를 한 번 mount 하면 됩니다. (토스트는 별도 시스템 `boottent-design/ui/toast` 를 사용하세요.)
+
+### ✅ 언제 사용
+- 삭제·결제 등 확인이 필요한 작업을 명령형으로 띄울 때 (`confirm`)
+- 단순 안내/경고를 단일 버튼으로 띄울 때 (`alert`)
+- 폼·상세 등 임의 콘텐츠를 헤더/푸터가 있는 다이얼로그로 띄울 때 (`dialog`)
+- 완전히 자유로운 레이아웃의 오버레이가 필요할 때 (`custom`)
+
+### 🚫 주의
+- 컴포넌트 트리 안에서 선언적으로 여닫는 단순 모달이면 `boottent-design/ui/dialog`(Radix Dialog)를 직접 쓰는 편이 낫습니다.
+- 앱 루트에 `<PortalProvider />`는 **정확히 한 번만** mount 하세요(중복 mount 시 오버레이가 두 번 렌더됩니다).
+- `forceMount: true` 오버레이는 사용자가 닫을 수 없으며, `forceClosePortal(id)`로만 닫힙니다.
+
+### Import
+```tsx
+import { /* ... */ } from "boottent-design/ui/portal";
+```
+
+### 예시
+```tsx
+// 1) 앱 루트(레이아웃)에 한 번 mount
+import { PortalProvider } from "boottent-design/ui/portal";
+// <PortalProvider />
+// 2) 어디서든 명령형으로 호출
+import { usePortal } from "boottent-design/ui/portal";
+function DeleteButton() {
+const { confirm } = usePortal();
+return (
+<button
+onClick={() =>
+confirm({
+title: "삭제하시겠어요?",
+description: "이 작업은 되돌릴 수 없습니다.",
+confirmText: "삭제",
+onConfirm: () => {
+// delete...
+},
+})
+}
+>
+삭제
+</button>
+);
+}
+```
+
+### 🔗 관련 · 대안
+- Dialog
+- AlertDialog
+- ui/toast (useToast)
+

package/dist/design-system/ui/progress.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — progress.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/radio-group.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — radio-group.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/scroll-area.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — scroll-area.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/select.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — select.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/separator.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — separator.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/simple-table.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — simple-table.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/skeleton.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — skeleton.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/slider.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — slider.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/switch.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — switch.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/symbols.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — symbols.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/tabs.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — tabs.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/tag.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — tag.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 
@@ -18,6 +18,7 @@
 
 ### 🚫 주의
 - 너무 많은 태그를 나열하면 가독성이 떨어질 수 있으니 중요도에 따라 색상을 구분하세요.
+- 카드 코너 레이블(상위노출·이벤트·D-day)은 `CardLabel` 컴포넌트를 사용하세요. Tag 에는 `ad` variant/size 가 없습니다.
 
 ### Import
 ```tsx
@@ -40,16 +41,14 @@ export interface TagProps extends React.HTMLAttributes<HTMLDivElement>, VariantP
       sm: "px-2 py-1 text-xs font-normal rounded-sm",
       md: "px-2.5 py-1 text-sm font-normal rounded-md",
       lg: "px-3.5 py-1.5 text-base font-medium rounded-lg",
-      ad: "absolute top-0 right-0 px-2.5 py-1 rounded-t-none rounded-br-none rounded-bl-xl text-sm font-normal",
     },
-    // shape : round, square, adCard
+    // shape : round, square
     shape: {
       square: "",
       round: "rounded-full",
     },
     // variant : solid과 outline을 결합하여 하나의 값으로 처리
     variant: {
-      ad: "bg-grey-800 text-white",
       "solid-primary-50": "bg-main-50 text-main-600",
       "solid-primary-100": "bg-main-100 text-main-600",
       "solid-primary-600": "bg-main-600 text-main-50",
@@ -77,3 +76,6 @@ export interface TagProps extends React.HTMLAttributes<HTMLDivElement>, VariantP
 <Tag variant="outline-secondary-200" icLeft={<Icon.Info />}>도움말</Tag>
 ```
 
+### 🔗 관련 · 대안
+- CardLabel
+

package/dist/design-system/ui/text.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — text.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/textarea.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — textarea.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/toast.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — toast.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 
@@ -50,7 +50,7 @@ type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 
 ### 예시
 ```tsx
-// 기본 토스트 구조
+// 1) 저수준 프리미티브로 직접 구성
 <ToastProvider>
 <Toast variant="black">
 <ToastTitle>제목</ToastTitle>
@@ -58,9 +58,15 @@ type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 </Toast>
 <ToastViewport />
 </ToastProvider>
+// 2) 권장: 명령형 훅으로 사용 (앱 루트에 <ToastManager /> 한 번 mount)
+import { ToastManager, useToast } from "boottent-design/ui/toast";
+// 루트: <ToastManager />
+const { toast } = useToast();
+toast({ description: "저장되었습니다.", variant: "black" });
 ```
 
 ### 🔗 관련 · 대안
 - Dialog
-- Alert
+- AlertDialog
+- ui/portal (usePortal)
 

package/dist/design-system/ui/toggle-group.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — toggle-group.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/toggle.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — toggle.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/ui/tooltip.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > UI 프리미티브 — tooltip.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 허브](../design-system.md) · [언제 무엇을 쓰나](../when-to-use.md)
 

package/dist/design-system/usage.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > 설치 · CSS 배포 모드 · 소비 규칙의 기계 생성 정본.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 디자인 시스템 허브](./design-system.md)
 

package/dist/design-system/when-to-use.md

@@ -3,7 +3,7 @@
 > [!WARNING]
 > **자동 생성된 파일 — 직접 수정 금지** (`yarn docs:gen` 으로 재생성)
 > 어떤 상황에 어떤 컴포넌트를 쓰는가 — 결정 가이드.
-> 버전: boottent-design v0.1.259 · 생성: 2026. 6. 11. 오후 5:57:42
+> 버전: boottent-design v0.1.261 · 생성: 2026. 6. 26. 오후 2:57:16
 
 [← 디자인 시스템 허브](./design-system.md)
 
@@ -14,7 +14,8 @@
 
 | 이럴 때 | 컴포넌트 |
 |---------|----------|
-| 정보나 폼을 담는 일반 모달 | [`dialog`](./ui/dialog.md) |
+| 명령형으로 모달·알럿·다이얼로그·커스텀 오버레이를 띄울 때(usePortal) | [`portal`](./ui/portal.md) |
+| 정보나 폼을 담는 일반 모달(선언형) | [`dialog`](./ui/dialog.md) |
 | 삭제 등 파괴적 작업을 확인받을 때 | [`alert-dialog`](./ui/alert-dialog.md) |
 | 특정 요소(앵커)에 붙는 보조 정보·메뉴 | [`popover`](./ui/popover.md) |
 | 호버 시 짧은 보조 설명 | [`tooltip`](./ui/tooltip.md) |
@@ -94,6 +95,7 @@
 | 프로필 이미지/이니셜 | [`avatar`](./ui/avatar.md) |
 | 상태·카운트 뱃지 | [`badge`](./ui/badge.md) |
 | 분류·키워드 태그 | [`tag`](./ui/tag.md) |
+| 카드 코너 레이블(상위노출·이벤트·D-day 등) | [`card-label`](./ui/card-label.md) |
 | 본문 텍스트 타이포 프리미티브 | [`text`](./ui/text.md) |
 | 검색어 등 부분 강조 텍스트 | [`highlight-text`](./ui/highlight-text.md) |
 | 최적화된 이미지 렌더 | [`image`](./ui/image.md) |
@@ -120,6 +122,7 @@
 | 이럴 때 | 컴포넌트 |
 |---------|----------|
 | 이벤트 카드 광고 | [`event-card`](./components/event-card.md) |
+| D-day 카운트다운 카드 광고 | [`dday-card`](./components/dday-card.md) |
 | 프리미엄 카드 광고 | [`premium-card`](./components/premium-card.md) |
 | 메인 배너 이미지 | [`main-banner-image`](./components/main-banner-image.md) |
 | 타이틀 태그 카드 | [`title-tag-card`](./components/title-tag-card.md) |