@simplysm/angular 14.0.48 → 14.0.51

package/docs/ui-navigation/sd-sidebar-user.md

@@ -0,0 +1,43 @@
+# `SdSidebarUser`
+
+사이드바 하단 사용자 영역 컴포넌트. 사용자 정보를 표시하고, 선택적으로 드롭다운 메뉴를 제공한다.
+
+```typescript
+@Component({ selector: "sd-sidebar-user", ... })
+export class SdSidebarUser
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `userMenu` | input | `SdSidebarUserMenu \| undefined` | 사용자 메뉴 정보. `title`이 있으면 메뉴 버튼 표시 |
+
+## Related Types
+
+### `SdSidebarUserMenu`
+
+```typescript
+interface SdSidebarUserMenu {
+  title: string;
+  menus: {
+    title: string;
+    onClick: () => void;
+  }[];
+}
+```
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `title` | `string` | 메뉴 버튼 라벨 |
+| `menus` | `{ title: string; onClick: () => void }[]` | 드롭다운 메뉴 항목 목록 |
+
+## Usage
+
+```html
+<sd-sidebar-user
+  [userMenu]="{ title: '홍길동', menus: [{ title: '로그아웃', onClick: logout }] }"
+>
+  <span>홍길동</span>
+</sd-sidebar-user>
+```

package/docs/ui-navigation/sd-tab.md

@@ -0,0 +1,51 @@
+# `SdTab`
+
+탭 컨테이너 컴포넌트. 선택된 값을 `value` model로 보관한다.
+
+```typescript
+@Component({ selector: "sd-tab" })
+class SdTab<T> {
+  value = model<T>();
+}
+```
+
+> **CRITICAL — 역할 범위**
+> `sd-tab`/`sd-tab-item`은 **상단의 탭 선택 UI만** 담당한다. 내부 뷰(패널) 전환 기능은 **없다**.
+> `sd-tab-item`의 `<ng-content>`는 **탭 라벨 전용**이다. 이 안에 시트/폼/상세 등 뷰 콘텐츠를 넣지 않는다.
+> 뷰 콘텐츠는 `sd-tab` **바깥**에서 선택된 `value`를 기준으로 `@if` / `@switch`로 제어한다.
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `value` | model | `T \| undefined` | 선택된 탭 값 (two-way) |
+
+## Related Types
+
+### `SdTabItem`
+
+탭 항목 컴포넌트. 자신의 `value`가 부모 `SdTab.value`와 같으면 선택 상태가 된다.
+
+```typescript
+@Component({ selector: "sd-tab-item" })
+class SdTabItem<T> {
+  value = input.required<T>();
+}
+```
+
+## Usage
+
+```html
+<!-- ✅ 올바른 사용: 탭은 선택 UI, 뷰는 @if로 제어 -->
+<sd-tab [(value)]="tab">
+  <sd-tab-item [value]="'list'">목록</sd-tab-item>
+  <sd-tab-item [value]="'detail'">상세</sd-tab-item>
+</sd-tab>
+
+@if (tab() === "list") {
+  <sd-sheet ...></sd-sheet>
+}
+@if (tab() === "detail") {
+  <app-detail ...></app-detail>
+}
+```

package/docs/ui-navigation/sd-topbar-container.md

@@ -0,0 +1,97 @@
+# `SdTopbarContainer`
+
+탑바 컨테이너.
+
+```typescript
+@Component({ selector: "sd-topbar-container" })
+class SdTopbarContainer { }
+```
+
+## Related Types
+
+### `SdTopbar`
+
+탑바 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-topbar" })
+class SdTopbar { }
+```
+
+### `SdTopbarMenu`
+
+탑바 메뉴 항목.
+
+```typescript
+@Component({ selector: "sd-topbar-menu" })
+class SdTopbarMenu {
+  menus = input<SdMenu[]>([]);
+  getMenuIsSelectedFn = input<(menu: SdMenu) => boolean>();
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `menus` | `SdMenu[]` | `[]` | 메뉴 항목 |
+| `getMenuIsSelectedFn` | `((menu) => boolean) \| undefined` | `undefined` | 커스텀 메뉴 선택 여부 함수 |
+
+### `SdTopbarUser`
+
+탑바 사용자 영역 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-topbar-user" })
+class SdTopbarUser {
+  menus = input.required<SdTopbarUserMenu[]>();
+}
+```
+
+## Usage
+
+### topbar 내부 슬롯 활용
+
+```html
+<sd-topbar-container>
+  @if (viewType() === "page") {
+    <sd-topbar>
+      <h4>{{ viewTitle() }}</h4>
+      <sd-button [size]="'sm'" [theme]="'link-info'" (click)="onRefreshButtonClick()">
+        <ng-icon [svg]="icons.tablerRefresh" />
+        새로고침
+        <small>(Ctrl+Alt+L)</small>
+      </sd-button>
+    </sd-topbar>
+  }
+  <!-- 메인 콘텐츠 -->
+</sd-topbar-container>
+```
+
+페이지/모달/control 뷰에서 **재사용**되는 화면은 topbar를 page 뷰에서만 렌더한다. `@if (viewType() === "page")` 조건을 사용한다.
+
+### 실사용 예
+
+- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — topbar + 새로고침 버튼 + 단축키 힌트
+- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — topbar 내 저장·등록 버튼 추가
+- [crud-list.md §11 확장 G: 엑셀 업로드/다운로드](../recipes/crud-list.md#11-확장-g-엑셀-업로드다운로드) — topbar 내 엑셀 버튼 추가
+- [crud-detail.md §3 최소 뼈대: 읽기 전용 상세 폼](../recipes/crud-detail.md#3-최소-뼈대-읽기-전용-상세-폼) — topbar 조건 없이 렌더 (page 뷰 전용)
+- [crud-detail.md §5 확장 A: 편집/저장](../recipes/crud-detail.md#5-확장-a-편집저장) — topbar 내 저장 버튼 추가
+- [crud-detail.md §7 확장 C: modal 뷰](../recipes/crud-detail.md#7-확장-c-modal-뷰) — `@if (viewType() === "page")` 조건부 렌더
+
+## `SdPagination`
+
+페이지네이션 컴포넌트.
+
+```typescript
+@Component({ selector: "sd-pagination" })
+class SdPagination {
+  currentPage = model(0);
+  totalPageCount = input(0, { transform: numberAttribute });
+  visiblePageCount = input(10, { transform: numberAttribute });
+}
+```
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `currentPage` | `number` | `0` | 현재 페이지 (0-based, two-way) |
+| `totalPageCount` | `number` | `0` | 총 페이지 수 |
+| `visiblePageCount` | `number` | `10` | 한 번에 표시할 페이지 수 |

package/docs/ui-navigation/sd-topbar-menu.md

@@ -0,0 +1,23 @@
+# `SdTopbarMenu`
+
+탑바 메뉴 컴포넌트. `SdMenu[]` 트리를 드롭다운 방식으로 렌더링한다.
+
+```typescript
+@Component({ selector: "sd-topbar-menu", ... })
+export class SdTopbarMenu
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `menus` | input | `SdMenu[]` | 메뉴 트리 (기본값: `[]`) |
+| `getMenuIsSelectedFn` | input | `(menu: SdMenu) => boolean \| undefined` | 메뉴 선택 여부 커스텀 함수 |
+
+## Usage
+
+```html
+<sd-topbar>
+  <sd-topbar-menu [menus]="sdAppStructure.usableMenus()" />
+</sd-topbar>
+```

package/docs/ui-navigation/sd-topbar-user.md

@@ -0,0 +1,38 @@
+# `SdTopbarUser`
+
+탑바 사용자 영역 컴포넌트. 사용자 이름을 버튼으로 표시하고, 클릭 시 드롭다운 메뉴를 제공한다.
+
+```typescript
+@Component({ selector: "sd-topbar-user", ... })
+export class SdTopbarUser
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `menus` | input (required) | `SdTopbarUserMenu[]` | 드롭다운 메뉴 항목 목록 |
+
+## Related Types
+
+### `SdTopbarUserMenu`
+
+```typescript
+interface SdTopbarUserMenu {
+  title: string;
+  onClick: () => void;
+}
+```
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `title` | `string` | 메뉴 항목 텍스트 |
+| `onClick` | `() => void` | 클릭 핸들러 |
+
+## Usage
+
+```html
+<sd-topbar-user [menus]="[{ title: '내 정보', onClick: goToProfile }, { title: '로그아웃', onClick: logout }]">
+  홍길동
+</sd-topbar-user>
+```

package/docs/ui-navigation/sd-topbar.md

@@ -0,0 +1,30 @@
+# `SdTopbar`
+
+탑바 컴포넌트. `SdTopbarContainer` 내부에서 사용하며, 사이드바 토글 버튼과 콘텐츠 슬롯을 제공한다.
+
+```typescript
+@Component({ selector: "sd-topbar", ... })
+export class SdTopbar
+```
+
+`SdSidebarContainer`가 상위에 있으면 자동으로 사이드바 토글 버튼을 표시한다.
+
+### 실사용 예
+
+- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — `<h4>` 타이틀 + 새로고침 버튼 + `<small>` 단축키 힌트
+- [crud-list.md §5 확장 A: inline 편집/저장](../recipes/crud-list.md#5-확장-a-inline-편집저장) — 저장·등록 버튼 추가
+- [crud-detail.md §3 최소 뼈대: 읽기 전용 상세 폼](../recipes/crud-detail.md#3-최소-뼈대-읽기-전용-상세-폼) — `<h4>` 타이틀 + 새로고침 버튼
+- [crud-detail.md §7 확장 C: modal 뷰](../recipes/crud-detail.md#7-확장-c-modal-뷰) — `@if (viewType() === "page")` 조건부 렌더
+
+## Usage
+
+```html
+<sd-topbar-container>
+  <sd-topbar>
+    <h1>앱 타이틀</h1>
+    <sd-topbar-menu [menus]="menus()" />
+    <sd-topbar-user [menus]="userMenus()" />
+  </sd-topbar>
+  ...
+</sd-topbar-container>
+```

package/docs/ui-overlay/sd-busy-container.md

@@ -0,0 +1,69 @@
+# `SdBusyContainer`
+
+busy 상태(로딩 중) 표시 컨테이너 컴포넌트. `busy` 입력이 `true`일 때 스크린 오버레이와 인디케이터를 표시한다.
+
+```typescript
+@Component({ selector: "sd-busy-container", ... })
+export class SdBusyContainer
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `busy` | input | `boolean` | busy 상태 (기본값: `false`) |
+| `type` | input | `SdBusyType` | 인디케이터 유형. 미지정 시 `SdBusyProvider.type()` 값 사용 |
+
+글로벌 busy 표시는 [`SdBusyProvider`](../providers/sd-busy-provider.md)를 통해 관리한다.
+
+## Usage
+
+```html
+<!-- 컴포넌트 로컬 busy -->
+<sd-busy-container [busy]="busyCount() > 0">
+  <!-- 콘텐츠 -->
+</sd-busy-container>
+```
+
+### busyCount 카운트 패턴
+
+비동기 작업마다 카운트를 증감하여 동시 요청을 안전하게 처리한다:
+
+```typescript
+busyCount = signal(0);
+
+async _refresh(): Promise<void> {
+  this.busyCount.update((v) => v + 1);
+  await this._sdToast.try(async () => {
+    // ... 비동기 작업
+  });
+  this.busyCount.update((v) => v - 1);
+}
+```
+
+```html
+<sd-busy-container [busy]="busyCount() > 0">
+```
+
+### busyMessage 선택적 패턴
+
+긴 작업(엑셀 업로드 등) 시에만 사용. 기본적으로는 메시지 없이 인디케이터만 표시한다:
+
+```typescript
+busyMessage = signal<string | undefined>(undefined);
+
+// 긴 작업 시
+this.busyMessage.set("엑셀 업로드 중...");
+// ... 작업 완료 후
+this.busyMessage.set(undefined);
+```
+
+```html
+<sd-busy-container [busy]="busyCount() > 0" [message]="busyMessage()">
+```
+
+### 실사용 예
+
+- [crud-list.md §3 최소 뼈대: 조회 전용 page](../recipes/crud-list.md#3-최소-뼈대-조회-전용-page) — busyCount 기본 패턴
+- [crud-list.md §11 확장 G: 엑셀 업로드/다운로드](../recipes/crud-list.md#11-확장-g-엑셀-업로드다운로드) — busyMessage 패턴
+- [crud-detail.md §3 최소 뼈대: 읽기 전용 상세 폼](../recipes/crud-detail.md#3-최소-뼈대-읽기-전용-상세-폼) — busyCount 기본 패턴

package/docs/ui-overlay/sd-confirm-modal.md

@@ -0,0 +1,30 @@
+# `SdConfirmModal`
+
+범용 확인 모달. `SdModalContentDef<boolean>`을 구현한다.
+메시지를 표시하고 확인/취소한다. 확인 시 `true` 반환, 취소 시 `undefined` 반환.
+
+```typescript
+@Component({ selector: "sd-confirm-modal", ... })
+export class SdConfirmModal implements SdModalContentDef<boolean>
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `message` | input (required) | `string` | 표시할 메시지 (HTML 허용) |
+| `initialized` | property | `Signal<boolean>` | 항상 `true` (SdModalContentDef 요구사항) |
+| `close` | output | `boolean \| undefined` | 확인: `true`, 취소: `undefined` |
+
+## Usage
+
+```typescript
+const confirmed = await this._sdModal.showAsync({
+  title: "삭제 확인",
+  type: SdConfirmModal,
+  inputs: { message: "정말 삭제하시겠습니까?" },
+});
+if (confirmed) {
+  await this._delete();
+}
+```

package/docs/ui-overlay/sd-dropdown.md

@@ -0,0 +1,40 @@
+# `SdDropdown`
+
+드롭다운 트리거 컴포넌트. 클릭 또는 키보드로 `SdDropdownPopup`을 열고 닫는다.
+
+```typescript
+@Component({ selector: "sd-dropdown", ... })
+export class SdDropdown
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `open` | model | `boolean` | 팝업 열림 상태 (기본값: `false`) |
+| `disabled` | input | `boolean` | 비활성화 (기본값: `false`) |
+
+## Related Types
+
+### `SdDropdownPopup`
+
+```typescript
+@Component({ selector: "sd-dropdown-popup", ... })
+export class SdDropdownPopup
+```
+
+드롭다운 팝업 영역. `SdDropdown` 내부에서만 사용한다.
+
+## Usage
+
+```html
+<sd-dropdown>
+  <sd-button>메뉴 열기</sd-button>
+  <sd-dropdown-popup>
+    <sd-list>
+      <sd-list-item (click)="onAction1()">동작 1</sd-list-item>
+      <sd-list-item (click)="onAction2()">동작 2</sd-list-item>
+    </sd-list>
+  </sd-dropdown-popup>
+</sd-dropdown>
+```

package/docs/ui-overlay/sd-modal.md

@@ -0,0 +1,34 @@
+# `SdModal`
+
+모달 래퍼 컴포넌트. `SdModalProvider.showAsync()`에 의해 프로그래밍 방식으로 생성된다. 직접 템플릿에 배치하지 않는다.
+
+```typescript
+@Component({ selector: "sd-modal", ... })
+export class SdModal
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `open` | model | `boolean` | 열림 상태 (기본값: `false`) |
+| `key` | input | `string \| undefined` | 설정 저장 키 (크기/위치 저장) |
+| `title` | input | `string` | 모달 제목 (기본값: `""`) |
+| `hideHeader` | input | `boolean` | 헤더 숨김 (기본값: `false`) |
+| `hideCloseButton` | input | `boolean` | 닫기 버튼 숨김 (기본값: `false`) |
+| `headerStyle` | input | `string \| undefined` | 헤더 인라인 스타일 |
+| `useCloseByBackdrop` | input | `boolean` | 배경 클릭으로 닫기 (기본값: `true`) |
+| `useCloseByEscapeKey` | input | `boolean` | ESC 키로 닫기 (기본값: `true`) |
+| `float` | input | `boolean` | 플로팅 모달 (backdrop 없음) (기본값: `false`) |
+| `fill` | input | `boolean` | 전체 화면 채우기 (기본값: `false`) |
+| `resizable` | input | `boolean` | 크기 조절 가능 (기본값: `false`) |
+| `movable` | input | `boolean` | 이동 가능 (기본값: `false`) |
+| `position` | input | `"bottom-right" \| "top-right" \| undefined` | 초기 위치 |
+| `minHeightPx` | input | `number \| undefined` | 최소 높이 |
+| `minWidthPx` | input | `number \| undefined` | 최소 너비 |
+| `heightPx` | input | `number \| undefined` | 초기 높이 |
+| `widthPx` | input | `number \| undefined` | 초기 너비 |
+| `actionTplRef` | input | `TemplateRef<any> \| undefined` | 헤더 액션 영역 템플릿 |
+| `closeRequest` | output | `void` | 닫기 요청 (배경 클릭, ESC, X 버튼) |
+
+모달 컴포넌트를 직접 사용하는 대신 [`SdModalProvider`](../providers/sd-modal-provider.md)를 사용한다.

package/docs/ui-overlay/sd-prompt-modal.md

@@ -0,0 +1,30 @@
+# `SdPromptModal`
+
+범용 프롬프트 입력 모달. `SdModalContentDef<string>`을 구현한다.
+메시지를 표시하고 텍스트 입력 후 확인/취소한다. 확인 시 입력값 반환, 취소 시 `undefined` 반환.
+
+```typescript
+@Component({ selector: "sd-prompt-modal", ... })
+export class SdPromptModal implements SdModalContentDef<string>
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `message` | input (required) | `string` | 표시할 메시지 (HTML 허용) |
+| `initialized` | property | `Signal<boolean>` | 항상 `true` (SdModalContentDef 요구사항) |
+| `close` | output | `string \| undefined` | 확인: 입력값, 취소: `undefined` |
+
+## Usage
+
+```typescript
+const name = await this._sdModal.showAsync({
+  title: "이름 입력",
+  type: SdPromptModal,
+  inputs: { message: "새 항목의 이름을 입력하세요." },
+});
+if (name != null) {
+  // 입력한 이름 사용
+}
+```

package/docs/ui-overlay/sd-toast.md

@@ -0,0 +1,35 @@
+# `SdToast`
+
+토스트 개별 항목 컴포넌트. `SdToastProvider`에 의해 프로그래밍 방식으로 생성된다.
+
+```typescript
+@Component({ selector: "sd-toast", ... })
+export class SdToast
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `open` | model | `boolean` | 열림 상태 (기본값: `false`) |
+| `useProgress` | input | `boolean` | 진행률 바 표시 (기본값: `false`) |
+| `theme` | input | `SdToastTheme` | 색상 테마 (기본값: `"info"`) |
+| `progress` | model | `number` | 진행률 (0~100, 기본값: `0`) |
+| `message` | model | `string \| undefined` | 메시지 텍스트 |
+
+직접 사용하는 대신 [`SdToastProvider`](../providers/sd-toast-provider.md)를 사용한다.
+
+## Related Types
+
+### `SdToastContainer`
+
+```typescript
+@Component({ selector: "sd-toast-container", ... })
+export class SdToastContainer
+```
+
+토스트 컨테이너. `SdToastProvider`에 의해 자동 생성된다.
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `overlap` | input | `boolean` | 중복 표시 방지 (기본값: `false`) |

package/docs/ui-visual/sd-barcode.md

@@ -0,0 +1,36 @@
+# `SdBarcode`
+
+바코드 생성 컴포넌트. bwip-js 라이브러리를 사용하여 SVG 바코드를 렌더링한다.
+
+```typescript
+@Component({ selector: "sd-barcode", ... })
+export class SdBarcode
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `type` | input (required) | `BarcodeType` | 바코드 종류 |
+| `value` | input | `string \| undefined` | 바코드에 인코딩할 텍스트 |
+
+## Related Types
+
+### `BarcodeType`
+
+bwip-js가 지원하는 바코드 형식 문자열 union type. 주요 값:
+
+- `"code128"` — Code 128
+- `"code39"` — Code 39
+- `"ean13"` — EAN-13
+- `"qrcode"` — QR Code
+- `"datamatrix"` — Data Matrix
+
+(전체 목록은 bwip-js 문서 참조)
+
+## Usage
+
+```html
+<sd-barcode [type]="'code128'" [value]="item.barcode" />
+<sd-barcode [type]="'qrcode'" [value]="item.qrUrl" />
+```

package/docs/ui-visual/sd-calendar.md

@@ -0,0 +1,34 @@
+# `SdCalendar`
+
+월별 달력 컴포넌트. `items`를 날짜 기준으로 분류하여 각 날짜 셀에 표시한다.
+
+```typescript
+@Component({ selector: "sd-calendar", ... })
+export class SdCalendar<T>
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `items` | input (required) | `T[]` | 표시할 항목 배열 |
+| `getItemDateFn` | input (required) | `(item: T, index: number) => DateOnly` | 각 항목의 날짜를 반환하는 함수 |
+| `yearMonth` | input | `DateOnly` | 표시할 연월 (기본값: 현재 월의 1일) |
+| `weekStartDay` | input | `number` | 주 시작 요일 (0=일, 1=월, 기본값: `0`) |
+| `minDaysInFirstWeek` | input | `number` | 첫 주 최소 날짜 수 (기본값: `1`) |
+
+콘텐츠 템플릿: `ng-template[itemOf]`로 날짜별 항목을 렌더링한다 (`SdItemOfTemplateContext<T>` 타입).
+
+## Usage
+
+```html
+<sd-calendar
+  [items]="schedules()"
+  [getItemDateFn]="getScheduleDate"
+  [(yearMonth)]="currentMonth"
+>
+  <ng-template itemOf let-item>
+    <div class="tx-sm">{{ item.title }}</div>
+  </ng-template>
+</sd-calendar>
+```

package/docs/ui-visual/sd-echarts.md

@@ -0,0 +1,32 @@
+# `SdEcharts`
+
+Apache ECharts 차트 래퍼 컴포넌트. 호스트 요소의 크기 변경을 감지하여 자동으로 차트를 리사이즈한다.
+
+```typescript
+@Component({ selector: "sd-echarts", ... })
+export class SdEcharts
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `option` | input (required) | `echarts.EChartsOption` | ECharts 옵션 객체 |
+| `notMerge` | input | `boolean` | `setOption` 호출 시 전체 교체 여부 (기본값: `false`) |
+| `loading` | input | `boolean` | 로딩 오버레이 표시 (기본값: `false`) |
+
+SVG 렌더러를 사용하며 (`renderer: "svg"`), `afterNextRender`에서 초기화된다.
+
+## Usage
+
+```html
+<sd-echarts [option]="chartOption()" style="height: 300px" />
+```
+
+```typescript
+chartOption = computed<echarts.EChartsOption>(() => ({
+  xAxis: { type: "category", data: this.labels() },
+  yAxis: { type: "value" },
+  series: [{ type: "bar", data: this.values() }],
+}));
+```

package/docs/ui-visual/sd-label.md

@@ -0,0 +1,24 @@
+# `SdLabel`
+
+인라인 라벨 컴포넌트. 테마 색상 또는 커스텀 배경색을 적용한다.
+
+```typescript
+@Component({ selector: "sd-label", ... })
+export class SdLabel
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `theme` | input | `"primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger" \| "gray" \| "blue-gray" \| undefined` | 색상 테마 (미지정 시 `gray-darker`) |
+| `color` | input | `string \| undefined` | 커스텀 배경색 (CSS 색상값) |
+| `clickable` | input | `boolean` | 클릭 가능 여부 (기본값: `false`) |
+
+## Usage
+
+```html
+<sd-label [theme]="'success'">완료</sd-label>
+<sd-label [theme]="'danger'">오류</sd-label>
+<sd-label [color]="'#ff6600'">커스텀</sd-label>
+```

package/docs/ui-visual/sd-note.md

@@ -0,0 +1,23 @@
+# `SdNote`
+
+알림 메시지 블록 컴포넌트. 배경 색상으로 중요도를 표현한다.
+
+```typescript
+@Component({ selector: "sd-note", ... })
+export class SdNote
+```
+
+## Members
+
+| Member | Kind | Type | Description |
+|--------|------|------|-------------|
+| `theme` | input | `"primary" \| "secondary" \| "info" \| "success" \| "warning" \| "danger" \| "gray" \| "blue-gray" \| undefined` | 색상 테마 |
+| `size` | input | `"sm" \| "lg" \| undefined` | 크기 |
+| `inset` | input | `boolean` | 인셋 스타일 (기본값: `false`) |
+
+## Usage
+
+```html
+<sd-note [theme]="'warning'">저장하지 않은 변경사항이 있습니다.</sd-note>
+<sd-note [theme]="'info'">Ctrl+S로 저장할 수 있습니다.</sd-note>
+```