# JENNIFER UI > **JENNIFER UI - 엔터프라이즈 Vue.js 컴포넌트 라이브러리** > Jennifer APM 시스템에서 사용되는 재사용 가능한 UI 컴포넌트들을 제공합니다. Vue 3 Composition API와 TypeScript를 기반으로 구축되었습니다. **Version:** 0.1.166+ | **Framework:** Vue 3 | **TypeScript:** Full Support --- ## PART 1: 기본 UI 컴포넌트 (@jennifersoft/vue-components-v2) ### Quick Start ```bash # 설치 npm install @jennifersoft/vue-components-v2 ``` ## Typography ### File: typography/typography.md # Typography 타이포그래피를 정의하는 목적은 일관성 있는 디자인을 구축하고, 글을 쉽게 읽을 수 있게 하며, 시각적으로 구분되는 계층을 만들고 브랜드 아이덴티티를 강화하며, 디자인 작업을 더욱 효율적으로 관리하는 데 있습니다. ## Display

Display Large

Display Medium

Display Small

```vue ``` ## Headline

Headline Large

Headline Medium

Headline Small

```vue ``` ## Title

Title Large

Title Medium

Title Small

```vue ``` ## Body

Body Large

Body Medium

Body Small

Body XSmall

Body Tiny

```vue ``` ## SourceCode

Source Code Large

Source Code Medium

Source Code Small

Source Code tiny

```vue ``` ## Icons ### File: icons/icons.md # Icons 공통으로 사용하는 아이콘 집합입니다. ## Simple Usage ```vue ```

## Props | Prop 이름 | 타입 | 필수 여부 | 기본값 | 설명 | | --------- | ----------- | --------- | ------ | ---------------- | | icon | `IconTypes` | Yes | - | 표시할 아이콘 타입 | | width | `number` | No | `24` | 아이콘 너비(px) | | height | `number` | No | `24` | 아이콘 높이(px) | ## Icon + color 상위 엘리먼트의 컬러 속성을 따라갑니다. ```vue ```

### File: icons/icons-alphabet.md # Icons Aalphabet 알파벳 순서로 정렬하여 표시합니다. ## A

## B

## C

## D

## E

## F

## G

## H

## I

## J

## K

## L

## M

## N

## O

## P

## Q

## R

## S

## T

## U

## V

## W

## X

## Y

## Z

## FormInput ### File: form-input/buttons.md # Buttons Button은 아이콘과 결합된 형태로 사용됩니다. ## Type

```vue ``` ## Props | Prop | 타입 | 필수 | 기본값 | 설명 | | -------------- | -------------------------------------------------------------------- | ---- | ----------------- | ----------------------- | | `type` | `'primary-filled'` \| `'primary-text'` \| `'outlined'` \| `'text'` \| `'error-filled'` \| `'error-text'` | - | `'primary-filled'` | 버튼 스타일 유형 | | `shape` | `'rect'` \| `'circle'` | - | `'rect'` | 버튼 모양 | | `text` | `string` | - | - | 버튼 라벨 텍스트 | | `leadingIcon` | `IconTypes` | - | - | 선행 아이콘 | | `trailingIcon` | `IconTypes` | - | - | 후행 아이콘 | | `size` | `'mini'` \| `'small'` \| `'medium'` \| `'large'` | - | - | 버튼 크기 | | `disabled` | `boolean` | - | `false` | 비활성화 여부 | ## disabled

```vue ``` ## Size

```vue ``` ## Without Icon

```vue ``` ## With LeadingIcon

```vue ``` ## With TrailingIcon

```vue ``` ## With LeadingIcon, TrailingIcon

```vue ``` ## Icon Only

```vue ``` ### File: form-input/copy-button.md # CopyButton 복사 기능을 제공하는 버튼 컴포넌트입니다. 텍스트를 클립보드에 복사하고 시각적 피드백을 제공합니다. ## 기본 사용법

```vue ``` ## Props | 속성 | 타입 | 기본값 | 설명 | | -------------- | ----------------------------- | -------- | -------------------- | | `textToCopy` | `string` | - | 복사할 텍스트 내용 | | `type` | `'text' \| 'outlined'` | `'text'` | 버튼 스타일 유형 | | `config` | `'icon' \| 'label' \| 'both'` | `'icon'` | 버튼 표시 방식 | | `tooltipProps` | `Omit` | - | 툴팁 속성(텍스트 제외) | 그 외 `Btn` 컴포넌트의 모든 속성을 지원합니다. (leadingIcon, trailingIcon, text 제외) ## 버튼 표시 방식 (config) CopyButton은 세 가지 표시 방식을 지원합니다: - `icon`: 아이콘만 표시 (기본값) - `label`: 텍스트만 표시 - `both`: 아이콘과 텍스트 모두 표시 ```vue ``` ## 다국어 지원 CopyButton은 provide/inject 패턴을 사용하여 다국어를 지원합니다. 애플리케이션의 루트에서 다음과 같이 텍스트를 주입할 수 있습니다: ```typescript // main.ts 또는 앱 진입점 app.provide('copyButtonTexts', { copy: i18n.t('copy'), copied: i18n.t('copied'), copyToClipboard: i18n.t('copyToClipboard'), }); ``` 주입하지 않으면 기본값으로 영어 텍스트가 사용됩니다. ## 예제

## 작동 방식 1. 버튼을 클릭하면 지정된 텍스트가 클립보드에 복사됩니다. 2. 복사 후 버튼 아이콘이 체크 아이콘으로 변경됩니다. 3. 툴팁 텍스트도 "복사됨" 메시지로 변경됩니다. 4. 3초 후 원래 상태로 돌아갑니다. ### File: form-input/select-button.md # SelectButton ## Basic

```vue ``` ## Props | Prop | 타입 | 필수 | 기본값 | 설명 | | ------------ | ------------------------------------------------------------------------------------- | ---- | ---------- | -------------------- | | `modelValue` | `string` \| `number` \| `null` | - | `null` | 선택된 값 | | `items` | `{ icon?: IconTypes; label?: string; value: string \| number; tooltip?: TooltipProps; }[]` | ✓ | - | 버튼 항목 목록 | | `size` | `'large' \| 'medium' \| 'small'` | - | `'medium'` | 컴포넌트 크기 | | `disabled` | `boolean` | - | `false` | 비활성화 여부 | ## Size

```vue ``` ## disabled

```vue ``` ## Icon + Tooltip

```vue ``` ### File: form-input/float-label.md # FloatLabel InputText 의 라벨을 표시합니다. ## Basic input이 활성화되면 라벨 표시가 활성화 됩니다.

label

```vue ``` ## Props | Prop | 타입 | 필수 | 기본값 | 설명 | | ---------- | --------------------- | ---- | ------- | ----------------------- | | `position` | `'over'` \| `'on'` | - | `'over'`| 라벨 표시 위치 | | `fixed` | `boolean` | - | `false` | 라벨 고정 여부 | ## Fixed `:fixed="true"` 를 추가하면 라벨 표시가 고정됩니다.

label

```vue ``` ## Size `:fixed="true" position="over"`

Large Label

Medium Label

Small Label

```vue ``` ## Size `:fixed="true" position="on"`

Large Label

Medium Label

Small Label

```vue ``` ### File: form-input/input-group.md # InputGroup - InputText 와 다른 컴포넌트, 아이콘을 조합형으로 사용할 수 있습니다 ## Basic

홈페이지

.com

```vue ``` ## Props | Prop | 타입 | 필수 | 기본값 | 설명 | | ---------- | ---------------------------------------------- | ---- | ------ | ------------- | | `size` | `'large' \| 'medium' \| 'small'` | - | - | 컴포넌트 크기 | | `disabled` | `boolean` | - | `false`| 비활성화 여부 | ## FloatLabel

홈페이지

jennifersoft

.com

jennifersoft

```vue ``` ## Button

```vue ``` ## Checkbox

```vue ``` ### File: form-input/input-affix.md # InputAffix - [InputText](../form-input/input-text) 와 다른 컴포넌트, 아이콘을 조합형으로 사용할 수 있습니다 - [InputGroup](../form-input/input-group) 와 다른점은 [InputText](../form-input/input-text) 의 보더를 표시하지 않고 부모 노드의 보더를 표시합니다 ## prefix(icon) + suffix(icon)

```vue ``` ## Props | Prop | 타입 | 필수 | 기본값 | 설명 | | ---------- | ---------------------------------------------- | ---- | ------- | -------------------- | | `invalid` | `boolean` | - | `false` | 에러 스타일 표시 | | `readonly` | `boolean` | - | `false` | 읽기 전용 | | `size` | `'large'` \| `'medium'` \| `'small'` | - | - | 컴포넌트 크기 | | `disabled` | `boolean` | - | `false` | 비활성화 여부 | ## prefix(icon) + suffix(icon) + label

Label

Please enter a guide description

```vue ``` ## When invalid

Label

Please enter a guide description

```vue ``` ### File: form-input/input-search.md # InputSearch InputSearch 는 사용자가 키워드를 입력하여 원하는 정보를 빠르게 찾을 수 있도록 돕는 컴포넌트입니다. 텍스트 필드가 항상 노출된 형태와, 버튼 클릭 시 Input가 확장되어 노출되는 형태 두 가지 타입으로 제공됩니다. [InputAffix](../form-input/input-affix) 를 사용해서 구현 했습니다 ## Basic

```vue ``` ## Props | Prop | 타입 | 필수 | 기본값 | 설명 | | ------------ | ----------------------------------------------------------------------------- | ---- | ------------ | -------------------------------- | | `modelValue` | `string \| undefined` | - | `undefined` | 입력 값 | | `placeholder`| `string` | - | `'Search'` | 플레이스홀더 텍스트 | | `type` | `'outlined'` \| `'plain'` | - | `'outlined'` | 표시 타입 | | `minimal` | `boolean` | - | `false` | 버튼 클릭 시에만 확장되는 모드 | | `size` | `'large' \| 'medium' \| 'small'` | - | - | 컴포넌트 크기 | | `disabled` | `boolean` | - | `false` | 비활성화 여부 | ## Size

large

medium

small

```vue ``` ## Type

outlined

plain

```vue ``` ## Type + minimal

outlined

plain

```vue ``` ## disable

outlined

plain

outlined(minimal)

plain(minimal)

### File: form-input/input-text.md # InputText - InputText 는 텍스트 입력 도구인 Input을 확장하여 구현 했습니다. ## Basic

```vue ``` ## Props | Prop | 타입 | 필수 | 기본값 | 설명 | | ------------ | ----------------------------------- | ---- | -------- | ------------------------ | | `modelValue` | `string` | - | `''` | 입력 값 | | `invalid` | `boolean` | - | `false` | 유효성 오류 스타일 표시 | | `readonly` | `boolean` | - | `false` | 읽기 전용 | | `required` | `boolean` | - | `false` | 필수 상태 표시 | | `placeholder`| `string` | - | - | 플레이스홀더 텍스트 | | `textAlign` | `'left'` \| `'right'` | - | `'left'` | 텍스트 정렬 | | `size` | `'large'` \| `'medium'` \| `'small'` | - | - | 입력 크기 | | `disabled` | `boolean` | - | `false` | 비활성화 여부 | ## States

inactive

required

readonly

invalid

disable

```vue ``` ## Size

Large

Medium

Small

```vue ``` ## textAlign textAlign 속성을 설정하여 텍스트 정렬 방식을 설정할 수 있습니다.

```vue ``` ## label

Label

```vue ``` ## message

Please enter a guide description

```vue ``` ## label + message

Label

Please enter a guide description

Label

Please enter a guide description

```vue ``` ## input - when invalid(true)

Label

Please enter a guide description

```vue ``` ### File: form-input/input-textarea.md # InputTextarea - InputTextarea 는 여러 줄의 텍스트를 입력하기 위한 컴포넌트입니다. - `InputText` 와 동일한 디자인 시스템/상태 클래스를 사용하며, 태그만 `

` 로 구현된 버전입니다.

const basicValue = ref("");
const requiredValue = ref("required text");
const readonlyValue = ref("readonly text");
const invalidValue = ref("invalid text");
const disabledValue = ref("disabled text");

const autoResizeText = ref('첫 줄\n두 번째 줄\n세 번째 줄');
</script>

## Basic

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputTextarea } from '@jennifersoft/vue-components-v2';

const basicValue = ref('');
</script>

<template>
    <InputTextarea
        v-model="basicValue"
        class="w-full"
        placeholder="Enter multi-line text"
    />
</template>
```

## Props

| Prop          | 타입                                 | 필수 | 기본값  | 설명                                                        |
| ------------- | ------------------------------------ | ---- | ------- | ----------------------------------------------------------- |
| `modelValue`  | `string`                             | -    | `''`    | 입력 값                                                     |
| `invalid`     | `boolean`                            | -    | `false` | 유효성 오류 스타일 표시                                     |
| `readonly`    | `boolean`                            | -    | `false` | 읽기 전용                                                   |
| `required`    | `boolean`                            | -    | `false` | 필수 상태 표시                                              |
| `placeholder` | `string`                             | -    | `''`    | 플레이스홀더 텍스트                                         |
| `size`        | `'large'` \| `'medium'` \| `'small'` | -    | -       | 입력 크기                                                   |
| `disabled`    | `boolean`                            | -    | `false` | 비활성화 여부                                               |
| `autoResize`  | `boolean`                            | -    | `false` | 내용에 따라 높이 자동 조절 (true일 때 수동 resize 비활성화) |
| `autoResize`  | `boolean`                            | -    | `false` | 내용에 따라 높이 자동 조절                                  |

-   `size`, `invalid`, `readonly`, `required`, `disabled` 등에 따른 시각적 상태는 `InputText` 와 동일합니다.

## Resize & rows

-   `InputTextarea` 는 기본적으로 CSS 로 높이를 제어합니다.
    -   `min-height`가 설정되어 있고, `resize: vertical` 상태입니다.
-   `autoResize` props 를 `true` 로 주면 **내용 길이에 따라 높이를 자동으로 조절**하며, 이때는 브라우저의 수동 resize 핸들은 표시되지 않습니다.
-   수동 resize 를 허용하고 싶다면 `autoResize` 를 사용하지 않고 기본 동작( `resize: vertical` )을 그대로 사용하면 됩니다.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputTextarea } from '@jennifersoft/vue-components-v2';

const autoResizeText = ref('첫 줄\n두 번째 줄\n세 번째 줄');
</script>

<template>
    <div class="flex flex-col gap-4 w-[640px]">
        
        <InputTextarea
            v-model="autoResizeText"
            class="w-full"
            auto-resize
            placeholder="멀티라인 텍스트를 입력하면 높이가 자동으로 늘어납니다."
        />
    </div>
</template>
```

## States

<div class="components-example">
    <div class="flex flex-col gap-4 w-[640px]">
        <div class="flex items-start gap-4">
            <label class="w-32 font-bold">inactive</label>
            <InputTextarea
                v-model="basicValue"
                class="w-full"
                placeholder="Enter description"
            />
        </div>
        <div class="flex items-start gap-4">
            <label class="w-32 font-bold">required</label>
            <InputTextarea
                v-model="requiredValue"
                class="w-full"
                :required="true"
                placeholder="Required textarea"
            />
        </div>
        <div class="flex items-start gap-4">
            <label class="w-32 font-bold">readonly</label>
            <InputTextarea
                v-model="readonlyValue"
                class="w-full"
                :readonly="true"
            />
        </div>
        <div class="flex items-start gap-4">
            <label class="w-32 font-bold">invalid</label>
            <InputTextarea
                v-model="invalidValue"
                class="w-full"
                :invalid="true"
            />
        </div>
        <div class="flex items-start gap-4">
            <label class="w-32 font-bold">disabled</label>
            <InputTextarea
                v-model="disabledValue"
                class="w-full"
                :disabled="true"
            />
        </div>
    </div>
</div>

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputTextarea } from '@jennifersoft/vue-components-v2';

const basicValue = ref('');
const requiredValue = ref('required text');
const readonlyValue = ref('readonly text');
const invalidValue = ref('invalid text');
const disabledValue = ref('disabled text');
</script>

<template>
    <div class="flex flex-col gap-4 w-[640px]">
        <div class="flex items-start gap-4">
            <label class="w-32 font-bold">inactive</label>
            <InputTextarea
                v-model="basicValue"
                class="w-full"
                placeholder="Enter description"
            />
        </div>
        <div class="flex items-start gap-4">
            <label class="w-32 font-bold">required</label>
            <InputTextarea
                v-model="requiredValue"
                class="w-full"
                :required="true"
                placeholder="Required textarea"
            />
        </div>
        <div class="flex items-start gap-4">
            <label class="w-32 font-bold">readonly</label>
            <InputTextarea
                v-model="readonlyValue"
                class="w-full"
                :readonly="true"
            />
        </div>
        <div class="flex items-start gap-4">
            <label class="w-32 font-bold">invalid</label>
            <InputTextarea
                v-model="invalidValue"
                class="w-full"
                :invalid="true"
            />
        </div>
        <div class="flex items-start gap-4">
            <label class="w-32 font-bold">disabled</label>
            <InputTextarea
                v-model="disabledValue"
                class="w-full"
                :disabled="true"
            />
        </div>
    </div>
</template>
```

### File: form-input/input-number.md

# InputNumber

-   InputNumber 는 텍스트 입력 도구인 Input을 확장하여 구현 했습니다.
-   [InputText](./input-text.md) 는 문자열을 입력받는 도구이며, InputNumber 는 숫자를 입력받는 도구입니다.
-   ↑, ↓ 커서로 값을 증가, 감소 할 수 있습니다.

const numberValue = ref(10000);
const numberValue1 = ref(10);
const numberValue2 = ref(101);
const numberValue3 = ref(10);

</script>

## Basic

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputNumber } from '@jennifersoft/vue-components-v2';
const numberValue = ref(10000);
</script>
<template>
    <input-number v-model="numberValue" />
</template>
```

## Props

| Prop          | 타입                                  | 필수 | 기본값                    | 설명                                 |
| ------------- | ------------------------------------- | ---- | ------------------------- | ------------------------------------ |
| `modelValue`  | `number`                              | -    | `0`                       | 입력 값                              |
| `min`         | `number`                              | -    | `Number.MIN_SAFE_INTEGER` | 최소값                               |
| `max`         | `number`                              | -    | `Number.MAX_SAFE_INTEGER` | 최대값                               |
| `readonly`    | `boolean`                             | -    | `false`                   | 읽기 전용                            |
| `required`    | `boolean`                             | -    | `false`                   | 필수 상태 표시                       |
| `textAlign`   | `'left'` \| `'right'`                | -    | `'left'`                  | 텍스트 정렬                          |
| `onArrowUp`   | `(event: KeyboardEvent) => number`    | -    | -                         | ↑ 키 입력 시 값 증가 로직 커스터마이즈 |
| `onArrowDown` | `(event: KeyboardEvent) => number`    | -    | -                         | ↓ 키 입력 시 값 감소 로직 커스터마이즈 |
| `size`        | `'large'` \| `'medium'` \| `'small'` | -    | -                         | 입력 크기                            |
| `disabled`    | `boolean`                             | -    | `false`                   | 비활성화 여부                        |

## Size

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputNumber } from '@jennifersoft/vue-components-v2';
const numberValue1 = ref(10);
</script>
<template>
    <input-number v-model="numberValue1" size="large" />
    <input-number v-model="numberValue1" size="medium" />
    <input-number v-model="numberValue1" size="small" />
</template>
```

## min, max

설정한 min, max 값을 벗어나면 빨간색으로 표시됩니다.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputNumber } from '@jennifersoft/vue-components-v2';
const numberValue2 = ref(101);
</script>
<template>
    <input-number v-model="numberValue2" :min="0" :max="100" />
</template>
```

## textAlign

textAlign 속성을 설정하여 정렬 방식을 설정할 수 있습니다.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputNumber } from '@jennifersoft/vue-components-v2';
const numberValue3 = ref(10);
</script>
<template>
    <input-number v-model="numberValue3" :text-align="'right'" />
</template>
```

## InputAffix

[InputAffix](./input-affix.md)와 결합하여 단위 표시 가능합니다.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputNumber, InputAffix } from '@jennifersoft/vue-components-v2';
const numberValue3 = ref(10);
</script>
<template>
    <input-affix class="w-24">
        <input-number
            v-model="numberValue3"
            :min="0"
            :max="100"
            :text-align="'right'"
        />
        <span>ms</span>
    </input-affix>
    <input-affix class="w-24">
        <input-number
            v-model="numberValue3"
            :min="0"
            :max="100"
            :text-align="'right'"
        />
        <span>%</span>
    </input-affix>
</template>
```

## InputGroup + InputAffix

[InputGroup](./input-group.md)과 [InputAffix](./input-affix.md)를 결합하여 라벨과 단위 표시 가능합니다.

<div class="components-example">
    <input-group>
        <input-group-addon> 최소응답시간 </input-group-addon>
        <input-affix class="w-24">
            <input-number v-model="numberValue3" :min="0" :max="100" :text-align="'right'" />
            <span>ms</span>
        </input-affix>
    </input-group>  
</div>

```vue
<script setup lang="ts">
import { ref } from 'vue';
import {
    InputNumber,
    InputAffix,
    InputGroup,
    InputGroupAddon,
} from '@jennifersoft/vue-components-v2';
const numberValue3 = ref(10);
</script>
<template>
    <input-group>
        <input-group-addon> 최소응답시간 </input-group-addon>
        <input-affix class="w-24">
            <input-number
                v-model="numberValue3"
                :min="0"
                :max="100"
                :text-align="'right'"
            />
            <span>ms</span>
        </input-affix>
    </input-group>
</template>
```

### File: form-input/input-date.md

# InputDate

[InputAffix](../form-input/input-affix) 컴포넌트를 확장하여 날짜 입력 기능을 제공합니다.
시간이 표시되는`YYYY-MM-DD HH:mm` 의 값에 키보드의 ←, → 커서로 위치를 설정한 후 ↑, ↓ 커서로 시간을 변경할 수 있습니다.

const textValue1 = ref('');
const textValue2 = ref('');
const textValue3 = ref('');
const textValue4 = ref('');
const textValue5 = ref('');
const textValue6 = ref('');

const invalid = ref(true);

const startTime1 = ref(Date.now() - 1000 * 60 * 5);
const endTime1 = ref(Date.now());

const startTime2 = ref(Date.now() - 1000 * 60 * 5);
const endTime2 = ref(Date.now());

const startTime3 = ref(Date.now() - 1000 * 60 * 5);
const endTime3 = ref(Date.now());

const startTime4 = ref(Date.now() - 1000 * 60 * 5);
const endTime4 = ref(Date.now());

const startTime5 = ref(Date.now() - 1000 * 60 * 5);
const endTime5 = ref(Date.now());

const startTime6 = ref(Date.now() - 1000 * 60 * 60 );
const endTime6 = ref(Date.now());

const startTime7 = ref(Date.now() - 1000 * 60 * 60 * 24);
const endTime7 = ref(Date.now());

const startTime8 = ref(Date.now() - 1000 * 60 * 5);
const endTime8 = ref(Date.now());

const items = [
    {
        label: '최근 5분',
        value: 5 * 60 * 1000,
    },
    {
        label: '최근 15분',
        value: 15 * 60 * 1000,
    },
    {
        label: '최근 30분',
        value: 30 * 60 * 1000,
    },
    {
        label: '최근 1시간',
        value: 60 * 60 * 1000,
    },
    {
        label: '최근 4시간',
        value: 4 * 60 * 60 * 1000,
    },
    {
        label: '최근 1일',
        value: 24 * 60 * 60 * 1000,
    },
    {
        label: '최근 1주',
        value: 7 * 24 * 60 * 60 * 1000,
    },
];

const hours = [
    {
        label: '최근 1시간',
        value: 60 * 60 * 1000,
    },
    {
        label: '최근 2시간',
        value: 2 * 60 * 60 * 1000,
    },
    {
        label: '최근 3시간',
        value: 3 * 60 * 60 * 1000,
    },
    {
        label: '최근 4시간',
        value: 4 * 60 * 60 * 1000,
    },
    {
        label: '최근 5시간',
        value: 5 * 60 * 60 * 1000,
    },
    {
        label: '최근 6시간',
        value: 6 * 60 * 60 * 1000,
    }
];

const days = [
    {
        label: '최근 1일',
        value: 24 * 60 * 60 * 1000,
    },
    {
        label: '최근 2일',
        value: 2 * 24 * 60 * 60 * 1000,
    },
    {
        label: '최근 3일',
        value: 3 * 24 * 60 * 60 * 1000,
    },
    {
        label: '최근 4일',
        value: 4 * 24 * 60 * 60 * 1000,
    },
];

const inputDateRef = ref();
const ONE_HOUR = 60 * 60 * 1000;
const invalidTextFormatTooltip = {
    text: '유효하지 않은 날짜형식입니다',
    placement: 'top-left',
};

const maxTimeRangeOverTooltip = {
    text: '최대 조회 가능 시간은 1시간입니다',
    placement: 'top-left',
};

const invalidTimeRangeTooltip = {
    text: '시작시간이 종료시간 보다 뒤에 있습니다.',
    placement: 'top-left',
}
</script>

## Basic

:invalid-text-format-tooltip 를 이용하여 [Tooltip](../overlay/tooltip) 도 표현이 가능합니다

<div class="components-example">
    <input-date
        v-model:start-time="startTime1"
        v-model:end-time="endTime1"
        @update:time-range="
            ({ startTime, endTime }) =>
                console.log(new Date(startTime), new Date(endTime))
        "
        :items="items"
        :invalid-text-format-tooltip="invalidTextFormatTooltip"
    />
</div>

```vue
<script setup lang="ts">
import { InputDate } from '@jennifersoft/vue-components-v2';
const startTime1 = ref(Date.now() - 1000 * 60 * 5);
const endTime1 = ref(Date.now());
const items = [
    {
        label: '최근 5분',
        value: 5 * 60 * 1000,
    },
    {
        label: '최근 15분',
        value: 15 * 60 * 1000,
    },
    {
        label: '최근 30분',
        value: 30 * 60 * 1000,
    },
    {
        label: '최근 1시간',
        value: 60 * 60 * 1000,
    },
    {
        label: '최근 4시간',
        value: 4 * 60 * 60 * 1000,
    },
    {
        label: '최근 1일',
        value: 24 * 60 * 60 * 1000,
    },
    {
        label: '최근 1주',
        value: 7 * 24 * 60 * 60 * 1000,
    },
];

const maxTimeRangeOverTooltip = {
    text: '최대 조회 가능 시간은 1시간입니다',
    placement: 'top',
};
</script>
<template>
    <input-date
        v-model:start-time="startTime1"
        v-model:end-time="endTime1"
        @update:time-range="
            ({ startTime, endTime }) =>
                console.log(new Date(startTime), new Date(endTime))
        "
        :items="items"
        :invalid-text-format-tooltip="invalidTextFormatTooltip"
    />
</template>
```

## Props

| Prop                         | 타입                                              | 기본값                      | 설명                                       |
| ---------------------------- | ------------------------------------------------- | --------------------------- | ------------------------------------------ |
| `timeZoneOffset`             | `number`                                          | `9 * 60 * 60 * 1000`        | 타임존 오프셋(ms)                          |
| `items`                      | `{ label: string; value: number }[]`              | `[]`                        | 빠른 선택 preset 목록                      |
| `dateFormat`                 | `'YYYY-MM-DD HH:mm' \| 'YYYY-MM-DD HH' \| 'YYYY-MM-DD'` | `'YYYY-MM-DD HH:mm'`        | 표시/입력 포맷                             |
| `updateEndTimeOnInteraction` | `boolean`                                         | `true`                      | 상호작용 시 endTime을 현재 시각으로 갱신   |
| `overlayStyle`               | `Partial<CSSStyleDeclaration>`                    | -                           | 오버레이 스타일                            |
| `maxTimeRange`               | `number`                                          | `Number.MAX_SAFE_INTEGER`   | 최대 조회 가능 시간(ms)                    |
| `invalidTextFormatTooltip`   | `TooltipProps`                                    | -                           | 잘못된 형식 시 툴팁                        |
| `maxTimeRangeOverTooltip`    | `TooltipProps`                                    | -                           | 최대 범위 초과 시 툴팁                     |
| `invalidTimeRangeTooltip`    | `TooltipProps`                                    | -                           | 시작/종료 순서 오류 시 툴팁                |
| `size`                       | `'large' \| 'medium' \| 'small'`              | -                           | 입력 크기                                  |
| `disabled`                   | `boolean`                                         | `false`                     | 비활성화 여부                              |

## Size

```vue
<script setup lang="ts">
import { InputDate } from '@jennifersoft/vue-components-v2';
const startTime2 = ref(Date.now() - 1000 * 60 * 5);
const endTime2 = ref(Date.now());
const startTime3 = ref(Date.now() - 1000 * 60 * 5);
const endTime3 = ref(Date.now());
const startTime4 = ref(Date.now() - 1000 * 60 * 5);
const endTime4 = ref(Date.now());
const items = [
    {
        label: '최근 5분',
        value: 5 * 60 * 1000,
    },
    {
        label: '최근 15분',
        value: 15 * 60 * 1000,
    },
    {
        label: '최근 30분',
        value: 30 * 60 * 1000,
    },
    {
        label: '최근 1시간',
        value: 60 * 60 * 1000,
    },
    {
        label: '최근 4시간',
        value: 4 * 60 * 60 * 1000,
    },
    {
        label: '최근 1일',
        value: 24 * 60 * 60 * 1000,
    },
    {
        label: '최근 1주',
        value: 7 * 24 * 60 * 60 * 1000,
    },
];
</script>
<template>
    <input-date
        v-model:start-time="startTime2"
        v-model:end-time="endTime2"
        size="small"
        :items="items"
    />
    <input-date
        v-model:start-time="startTime3"
        v-model:end-time="endTime3"
        size="medium"
        :items="items"
    />
    <input-date
        v-model:start-time="startTime4"
        v-model:end-time="endTime4"
        size="large"
        :items="items"
    />
</template>
```

## date-format

```vue
<script setup lang="ts">
import { InputDate } from '@jennifersoft/vue-components-v2';
const items = [
    {
        label: '최근 5분',
        value: 5 * 60 * 1000,
    },
    {
        label: '최근 15분',
        value: 15 * 60 * 1000,
    },
    {
        label: '최근 30분',
        value: 30 * 60 * 1000,
    },
    {
        label: '최근 1시간',
        value: 60 * 60 * 1000,
    },
    {
        label: '최근 4시간',
        value: 4 * 60 * 60 * 1000,
    },
    {
        label: '최근 1일',
        value: 24 * 60 * 60 * 1000,
    },
    {
        label: '최근 1주',
        value: 7 * 24 * 60 * 60 * 1000,
    },
];

const startTime6 = ref(Date.now() - 1000 * 60 * 60 );
const endTime6 = ref(Date.now());

const startTime7 = ref(Date.now() - 1000 * 60 * 60 * 24);
const endTime7 = ref(Date.now());
<template>
    <div class="flex flex-col">
        <input-date v-model:start-time="startTime5" v-model:end-time="endTime5"  :items="items" date-format="YYYY-MM-DD HH:mm" />
        <input-date v-model:start-time="startTime6" v-model:end-time="endTime6"  :items="hours" date-format="YYYY-MM-DD HH" />
        <input-date v-model:start-time="startTime7" v-model:end-time="endTime7"  :items="days" date-format="YYYY-MM-DD" />
    </div>
</template>
```

## max-time-range

:max-time-range를 초과하는 간격이 설정되면 invalid 표시가 표현됩니다 :max-time-range-over-tooltip 를 이용하여 [Tooltip](../overlay/tooltip) 도 표현이 가능합니다

<div class="components-example">
    <input-date
        v-model:start-time="startTime1"
        v-model:end-time="endTime1"
        :max-time-range="ONE_HOUR"
        @update:time-range="
            ({ startTime, endTime }) =>
                console.log(new Date(startTime), new Date(endTime))
        "
        :items="items"
        :max-time-range-over-tooltip="maxTimeRangeOverTooltip"
        :invalid-text-format-tooltip="invalidTextFormatTooltip"
        :invalid-time-range-tooltip="invalidTimeRangeTooltip"
    />

</div>

```vue
<script setup lang="ts">
import { InputDate } from '@jennifersoft/vue-components-v2';
const invalidTextFormatTooltip = {
    text: '유효하지 않은 날짜형식입니다',
    placement: 'top-left',
};

const maxTimeRangeOverTooltip = {
    text: '최대 조회 가능 시간은 1시간입니다',
    placement: 'top-left',
};

const invalidTimeRangeTooltip = {
    text: '시작시간이 종료시간 보다 뒤에 있습니다.',
    placement: 'top-left',
}

## HelpContent 사용

```vue
<script setup lang="ts">
import { InputDate, Chip } from '@jennifersoft/vue-components-v2';
const startTime8 = ref(Date.now() - 1000 * 60 * 5);
const endTime8 = ref(Date.now());
const inputDateRef = ref();
</script>
<template>
    <input-date
        ref="inputDateRef"
        v-model:start-time="startTime8"
        v-model:end-time="endTime8"
        :use-help-content="true"
        :items="items"
    >
        <template #help>
            <span class="typo-body-medium mb-4">
                이렇게 조회할 수 있어요.
            </span>
            <div class="flex gap-3">
                <chip
                    text="45m"
                    size="small"
                    @click="
                        inputDateRef.changeTimeRangeAndClose(45 * 60 * 1000)
                    "
                />
                <chip
                    text="1h"
                    size="small"
                    @click="
                        inputDateRef.changeTimeRangeAndClose(60 * 60 * 1000)
                    "
                />
                <chip
                    text="1d"
                    size="small"
                    @click="
                        inputDateRef.changeTimeRangeAndClose(
                            24 * 60 * 60 * 1000
                        )
                    "
                />
                <chip
                    text="1w"
                    size="small"
                    @click="
                        inputDateRef.changeTimeRangeAndClose(
                            7 * 24 * 60 * 60 * 1000
                        )
                    "
                />
            </div>
        </template>
    </input-date>
</template>
```

## API

### Props

| Prop                         | Type                                                    | Default                      | Description                                                  |
| ---------------------------- | ------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------ |
| `startTime` (v-model)        | `number`                                                | `Date.now() - 5 * 60 * 1000` | 시작 시간(타임스탬프, ms). v-model로 사용.                   |
| `endTime` (v-model)          | `number`                                                | `Date.now()`                 | 종료 시간(타임스탬프, ms). v-model로 사용.                   |
| `timeZoneOffset`             | `number`                                                | `9 * 60 * 60 * 1000`         | 타임존 오프셋(ms). 기본값은 KST(한국).                       |
| `items`                      | `{ label: string; value: number }[]`                    | `[]`                         | 빠른 선택을 위한 기간 preset 목록.                           |
| `dateFormat`                 | `'YYYY-MM-DD HH:mm' \| 'YYYY-MM-DD HH' \| 'YYYY-MM-DD'` | `'YYYY-MM-DD HH:mm'`         | 날짜/시간 표시 및 입력 포맷.                                 |
| `updateEndTimeOnInteraction` | `boolean`                                               | `true`                       | preset/키보드 조작 시 endTime을 현재 시각으로 갱신할지 여부. |
| `overlayStyle`               | `Partial<CSSStyleDeclaration>`                          | -                            | 오버레이 스타일 커스텀.                                      |
| `maxTimeRange`               | `number`                                                | -                            | 최대 조회 가능 시간 범위(ms). 설정 시 범위 초과 시 검증.     |
| `invalidTextFormatTooltip`   | `TooltipProps`                                          | -                            | 잘못된 날짜 형식 입력 시 표시할 툴팁 설정.                   |
| `maxTimeRangeOverTooltip`    | `TooltipProps`                                          | -                            | 최대 시간 범위 초과 시 표시할 툴팁 설정.                     |
| `size`                       | `'large' \| 'medium' \| 'small'`                        | `'medium'`                   | 인풋 크기.                                                   |
| `disabled`                   | `boolean`                                               | `false`                      | 비활성화 여부.                                               |

### v-model

| Name      | Type   | Description   |
| --------- | ------ | ------------- |
| startTime | number | 시작 시간(ms) |
| endTime   | number | 종료 시간(ms) |

### Emits

| Event              | Payload                                  | Description                |
| ------------------ | ---------------------------------------- | -------------------------- |
| `update:timeRange` | `{ startTime: number, endTime: number }` | 시간 범위가 변경될 때 발생 |

### Expose

| Method                    | Description                              |
| ------------------------- | ---------------------------------------- |
| `changeTimeRangeAndClose` | 특정 기간(ms)을 선택하고 오버레이를 닫음 |

### File: form-input/checkbox.md

# Checkbox

-   체크박스는 사용자가 여러 개의 옵션 중에서 하나 이상을 선택할 수 있도록 하는 인터페이스 요소입니다.
-   체크박스를 통해 사용자는 개별적인 항목을 활성화하거나 비활성화할 수 있으며, 각 항목을 클릭하면 해당 옵션이 선택되거나 해제됩니다.
-   체크박스는 보통 리스트나 폼에서 여러 선택지를 제공할 때 사용되며, 선택된 항목 옆에 체크 표시가 나타나 사용자가 선택 상태를 쉽게 확인할 수 있습니다.

const pizzaValues = ref([]);

const checked1 = ref(true);
const checked2 = ref(false);
const checked2_1 = ref(true);
const checked3 = ref(true);
const checked4 = ref(true);
</script>

## Group

<div class="components-example">
    <div class="flex items-center gap-2">
        <checkbox v-model="pizzaValues" name="pizza" value="Cheese"/>
        <label>
            Cheese
        </label>
    </div>
    <div class="flex items-center gap-2">
        <checkbox v-model="pizzaValues" name="pizza" value="Potato"/>
        <label>
            Potato
        </label>
    </div>
    <div class="flex items-center gap-2">
        <checkbox v-model="pizzaValues" name="pizza" value="Bulgogi"/>
        <label>
            Bulgogi
        </label>
    </div>
    <div class="flex items-center gap-2">
        <checkbox v-model="pizzaValues" name="pizza" value="Pepperoni"/>
        <label>
            Pepperoni
        </label>
    </div>
</div>

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { Checkbox } from '@jennifersoft/vue-components-v2';
const pizzaValues = ref([]);
</script>
<template>
    <div>
        <div class="flex items-center gap-2">
            <checkbox v-model="pizzaValues" name="pizza" value="Cheese" />
            <label> Cheese </label>
        </div>
        <div class="flex items-center gap-2">
            <checkbox v-model="pizzaValues" name="pizza" value="Potato" />
            <label> Potato </label>
        </div>
        <div class="flex items-center gap-2">
            <checkbox v-model="pizzaValues" name="pizza" value="Bulgogi" />
            <label> Bulgogi </label>
        </div>
        <div class="flex items-center gap-2">
            <checkbox v-model="pizzaValues" name="pizza" value="Pepperoni" />
            <label> Pepperoni </label>
        </div>
    </div>
</template>
```

## Props

| Prop           | 타입                                   | 필수 | 기본값  | 설명                                            |
| -------------- | -------------------------------------- | ---- | ------- | ----------------------------------------------- |
| `modelValue`   | `boolean` \| `Array<string | number>`  | -    | -       | 체크 상태 또는 다중 선택 값                    |
| `name`         | `string`                                | -    | -       | 네이티브 input의 name                          |
| `value`        | `string` \| `number`                    | -    | -       | 체크박스 값 (배열 v-model 사용 시 필수)        |
| `indeterminate`| `boolean`                               | -    | `false` | 부분 선택 상태 표시                            |
| `disabled`     | `boolean`                               | -    | `false` | 비활성화 여부                                   |

## default

```vue
<script setup lang="ts">
import { Checkbox } from '@jennifersoft/vue-components-v2';
const checked = ref(true);
</script>
<template>
    <checkbox v-model="checked" />
</template>
```

## indeterminate

```vue
<script setup lang="ts">
import { Checkbox } from '@jennifersoft/vue-components-v2';
const checked = ref(false);
const checked2 = ref(true);
</script>
<template>
    <checkbox v-model="checked" indeterminate />
    <checkbox v-model="checked2" indeterminate />
</template>
```

## disabled

```vue
<script setup lang="ts">
import { Checkbox } from '@jennifersoft/vue-components-v2';
const checked = ref(true);
</script>
<template>
    <checkbox v-model="checked" disabled />
    <checkbox v-model="checked" indeterminate disabled />
</template>
```

### File: form-input/radio-button.md

# Radio

- 라디오 버튼은 사용자가 여러 개의 옵션 중 하나만 선택할 수 있도록 하는 인터페이스 요소입니다.
- 라디오 버튼을 통해 사용자는 주어진 선택지 중에서 단 하나의 옵션을 선택할 수 있으며, 하나의 옵션을 선택하면 다른 옵션은 자동으로 해제됩니다.

const pizzaValue = ref("Cheese");

const defaultValue = ref("true");
const disabledValue = ref("true");
</script>

## Group

<div class="components-example">
    <div class="flex items-center gap-2">
        <radio-button v-model="pizzaValue" name="pizza" value="Cheese"/>
        <label>
            Cheese
        </label>
    </div>
    <div class="flex items-center gap-2">
        <radio-button v-model="pizzaValue" name="pizza" value="Potato"/>
        <label>
            Potato
        </label>
    </div>
    <div class="flex items-center gap-2">
        <radio-button v-model="pizzaValue" name="pizza" value="Bulgogi"/>
        <label>
            Bulgogi
        </label>
    </div>
    <div class="flex items-center gap-2">
        <radio-button v-model="pizzaValue" name="pizza" value="Pepperoni"/>
        <label>
            Pepperoni
        </label>
    </div>
</div>

```vue
<script setup lang="ts">
import { ref } from "vue";
import { RadioButton } from "@jennifersoft/vue-components-v2";
const pizzaValue = ref("Cheese");
</script>
<template>
    <div>
        <div class="flex items-center gap-2">
            <radio-button v-model="pizzaValue" name="pizza" value="Cheese"/>
            <label>
                Cheese
            </label>
        </div>
        <div class="flex items-center gap-2">
            <radio-button v-model="pizzaValue" name="pizza" value="Potato"/>
            <label>
                Potato
            </label>
        </div>
        <div class="flex items-center gap-2">
            <radio-button v-model="pizzaValue" name="pizza" value="Bulgogi"/>
            <label>
                Bulgogi
            </label>
        </div>
        <div class="flex items-center gap-2">
            <radio-button v-model="pizzaValue" name="pizza" value="Pepperoni"/>
            <label>
                Pepperoni
            </label>
        </div>
        
    </div>
    
</template>
```

## Props

| Prop         | 타입                         | 필수 | 기본값  | 설명                      |
| ------------ | ---------------------------- | ---- | ------- | ------------------------- |
| `modelValue` | `string` \| `number`         | ✓    | -       | 선택된 값                 |
| `name`       | `string`                      | ✓    | -       | 네이티브 input의 name     |
| `value`      | `string` \| `number`         | ✓    | -       | 라디오 버튼의 값          |
| `disabled`   | `boolean`                     | -    | `false` | 비활성화 여부             |

## States

<div class="components-example">
    <div class="flex flex-col items-center flex-gap-2">
        <label>
            Default
        </label>
        <radio-button v-model="defaultValue" name="default" value="true" />
        <radio-button v-model="defaultValue" name="default" value="false" />
    </div>
    <div class="flex flex-col items-center flex-gap-2">
        <label>
            Disabled
        </label>
        <radio-button v-model="disabledValue" name="disable" value="false" :disabled="true" />
        <radio-button v-model="disabledValue" name="disable" value="true" :disabled="true"/>
    </div>
</div>

```vue
<script setup lang="ts">
import { ref } from "vue";
import { RadioButton } from "@jennifersoft/vue-components-v2";
const defaultValue = ref("true");
const disabledValue = ref("true");
</script>
<template>
    <div>
        <div class="flex flex-col items-center flex-gap-2">
            <label>
                Default
            </label>
            <radio-button v-model="defaultValue" name="default" value="true" />
            <radio-button v-model="defaultValue" name="default" value="false" />
        </div>
        <div class="flex flex-col items-center flex-gap-2">
            <label>
                Disabled
            </label>
            <radio-button v-model="disabledValue" name="disable" value="true" :disabled="true"/>
            <radio-button v-model="disabledValue" name="disable" value="false" :disabled="true" />
        </div>
    </div>
    
</template>
```

### File: form-input/toggle-switch.md

# ToggleSwitch

ToggleSwitch는 단일 항목의 상태를 켜거나 끕니다.

const checked = ref(false);
const checked1 = ref(false);
const checked2 = ref(false);
const checked3 = ref(true);
const checked4 = ref(true);

const checkedSize1 = ref(false);
const checkedSize2 = ref(false);
const checkedSize3 = ref(false);

const iconChecked1 = ref(false);
const iconChecked2 = ref(false);
const iconChecked3 = ref(false);

const colorChecked1 = ref(true);
const colorChecked2 = ref(true);
const colorChecked3 = ref(true);

</script>

## Basic

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { ToggleSwitch } from '@jennifersoft/vue-components-v2';
const checked = ref(false);
</script>
<template>
    <toggle-switch v-model="checked" />
</template>
```

## Props

| Prop         | 타입                                           | 필수 | 기본값   | 설명                  |
| ------------ | ---------------------------------------------- | ---- | -------- | --------------------- |
| `modelValue` | `boolean`                                      | -    | `false`  | 토글 상태             |
| `offIcon`    | `IconTypes`                                    | -    | -        | OFF 상태 아이콘       |
| `onIcon`     | `IconTypes`                                    | -    | -        | ON 상태 아이콘        |
| `size`       | `'large' \| 'medium' \| 'small'`            | -    | -        | 컴포넌트 크기         |
| `disabled`   | `boolean`                                      | -    | `false`  | 비활성화 여부         |

## Size

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { ToggleSwitch } from '@jennifersoft/vue-components-v2';
const checkedSize1 = ref(false);
const checkedSize2 = ref(false);
const checkedSize3 = ref(false);
</script>
<template>
    <toggle-switch size="large" v-model="checkedSize1" />
    <toggle-switch size="medium" v-model="checkedSize2" />
    <toggle-switch size="small" v-model="checkedSize3" />
</template>
```

## Disabled

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { ToggleSwitch } from '@jennifersoft/vue-components-v2';
const checked1 = ref(false);
const checked2 = ref(false);
const checked3 = ref(true);
const checked4 = ref(true);
</script>
<template>
    <div class="flex flex-col gap-2">
        <div class="flex items-center h-12">
            <label class="w-16 font-bold">Off</label>
            <toggle-switch v-model="checked1" />
            <toggle-switch :disabled="true" v-model="checked2" />
        </div>
        <div class="flex items-center h-12">
            <label class="w-16 font-bold">On</label>
            <toggle-switch v-model="checked3" />
            <toggle-switch :disabled="true" v-model="checked4" />
        </div>
    </div>
</template>
```

## Icon

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { ToggleSwitch, ICON_TYPE } from '@jennifersoft/vue-components-v2';
const iconChecked1 = ref(false);
const iconChecked2 = ref(false);
const iconChecked3 = ref(false);
</script>
<template>
    <toggle-switch
        size="large"
        :on-icon="ICON_TYPE.lock"
        :off-icon="ICON_TYPE.unlock"
        v-model="iconChecked1"
    />
    <toggle-switch
        size="medium"
        :on-icon="ICON_TYPE.lock"
        :off-icon="ICON_TYPE.unlock"
        v-model="iconChecked2"
    />
    <toggle-switch
        size="small"
        :on-icon="ICON_TYPE.lock"
        :off-icon="ICON_TYPE.unlock"
        v-model="iconChecked3"
    />
</template>
```

## Colors

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { ToggleSwitch, ICON_TYPE } from '@jennifersoft/vue-components-v2';
const colorChecked1 = ref(true);
const colorChecked2 = ref(true);
const colorChecked3 = ref(true);
</script>
<template>
    <toggle-switch
        size="medium"
        v-model="colorChecked1"
        :style="{ '--custom-switch-color': '#92D8FF' }"
    />
    <toggle-switch
        size="medium"
        v-model="colorChecked2"
        :style="{ '--custom-switch-color': '#40CE7C' }"
    />
    <toggle-switch
        size="medium"
        v-model="colorChecked3"
        :style="{ '--custom-switch-color': '##9668FD' }"
    />
</template>
```

### File: form-input/auto-refresh.md

# AutoRefresh

설정한 주기에 맞춰 화면의 데이터를 자동으로 새로고침할 수 있도록 도와주는 컴포넌트입니다.
필요 시 즉시 새로고침을 실행해 최신 상태를 빠르게 반영할 수 있습니다.

const status = ref<AutoRefreshStatus>('running');
    const type = ref<'outlined' | 'ghost'>('outlined');
    const size = ref<'small' | 'medium' | 'large'>('medium');
    const interval = ref(10000);
    const intervalInput = ref('10');
    const refreshCount= ref(0)
    const refreshOnMount = ref(false);

const lastRefreshTime = ref('');

const statusOptions = [
        { label: 'loading', value: 'loading' },
        { label: 'running', value: 'running' },
        { label: 'paused', value: 'paused' },
        { label: 'retrying', value: 'retrying' },
        { label: 'failed', value: 'failed' },
    ];

const typeOptions = [
        { label: 'outlined', value: 'outlined' },
        { label: 'ghost', value: 'ghost' },
    ];

const sizeOptions = [
        { label: 'small', value: 'small' },
        { label: 'medium', value: 'medium' },
        { label: 'large', value: 'large' },
    ];

const label = {
        loading: '불러오는 중...',
        running: '자동 새로고침',
        paused: '자동 새로고침',
        retrying: '새로고침 재시도 중...',
        failed: '새로고침이 실패했습니다.',
    };

const tooltip = {
        refresh: { content: '새로고침' },
        resume: { content: '재개' },
        pause: { content: '일시정지' },
    };

const handleRefresh = () => {
        console.log('새로고침 일어남')
    };
    const handleRefreshExample = () => {
        lastRefreshTime.value = new Date().toLocaleTimeString();
        refreshCount.value++;

status.value = 'loading'

setTimeout(() => { status.value = 'running' }, 2000)
    };

const handleIntervalChange = (val: string) => {
        const num = parseInt(val, 10);
        if (!isNaN(num) && num > 0) {
            interval.value = num * 1000;
        }
    };
</script>

## Interactive Playground

아래에서 각 props를 직접 조작하며 컴포넌트를 테스트해보세요.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import {
    AutoRefresh,
    AutoRefreshStatus,
} from '@jennifersoft/vue-components-v2';

const status = ref<AutoRefreshStatus>('running');

const label = {
    loading: '불러오는 중...',
    running: '자동 새로고침',
    paused: '자동 새로고침',
    retrying: '새로고침 재시도 중...',
    failed: '새로고침이 실패했습니다.',
};

const tooltip = {
    refresh: { content: '새로고침' },
    resume: { content: '재개' },
    pause: { content: '일시정지' },
};

const handleRefresh = () => {
    console.log('새로고침 실행');
};
</script>

<template>
    <AutoRefresh
        :status="status"
        type="outlined"
        size="medium"
        :label="label"
        :tooltip="tooltip"
        :interval="10000"
        @update:status="(v) => (status = v)"
        @refresh="handleRefresh"
    />
</template>
```

## Props

| Prop             | 타입                                                           | 필수 | 기본값       | 설명                         |
| ---------------- | -------------------------------------------------------------- | ---- | ------------ | ---------------------------- |
| `status`         | `'loading' \| 'running' \| 'paused' \| 'retrying' \| 'failed'` | ✓    | -            | 컴포넌트 상태                |
| `type`           | `'outlined' \| 'ghost'`                                        | -    | `'outlined'` | 외곽선 스타일                |
| `size`           | `'small' \| 'medium' \| 'large'`                               | -    | `'medium'`   | 컴포넌트 크기                |
| `label`          | `{ loading, running, paused, retrying, failed: string }`       | ✓    | -            | 각 상태별 표시 텍스트        |
| `tooltip`        | `{ refresh, resume, pause: TooltipProps }`                     | ✓    | -            | 각 버튼별 툴팁 설정          |
| `interval`       | `number`                                                       | -    | `10000`      | 새로고침 주기 (ms)           |
| `refreshOnMount` | `boolean`                                                      | -    | `false`      | 마운트 시 즉시 새로고침 여부 |

## Events

| Event           | Payload                 | 설명                                 |
| --------------- | ----------------------- | ------------------------------------ |
| `update:status` | `'running' \| 'paused'` | 토글 버튼 클릭 시 status 동기화      |
| `refresh`       | -                       | 새로고침 버튼 클릭 또는 주기 도달 시 |

## Exposed

`ref`를 통해 컴포넌트 인스턴스에 접근하면 다음 값들을 사용할 수 있습니다.

| Name            | 타입                  | 설명                             |
| --------------- | --------------------- | -------------------------------- |
| `progress`      | `ComputedRef<number>` | 현재 진행률 (0~100)              |
| `remainingTime` | `Ref<number>`         | 다음 새로고침까지 남은 시간 (ms) |

## 상태별 동작

| 상태       | 타이머 | 프로그레스 | interval 텍스트 | 설명                                     |
| ---------- | ------ | ---------- | --------------- | ---------------------------------------- |
| `loading`  | ❌     | ✅ (100%)  | (빈 문자열)     | 로딩 중 (새로고침 아이콘 회전)           |
| `running`  | ✅     | ✅         | `10s`, `1m40s`  | 정상 동작 중                             |
| `paused`   | ❌     | ❌         | `OFF`           | 사용자가 일시정지                        |
| `retrying` | ✅     | ✅         | (빈 문자열)     | 새로고침 재시도 중 (running과 동일 동작) |
| `failed`   | ❌     | ❌         | (빈 문자열)     | 새로고침 실패                            |

## 부가 기능

### 타이머 일시정지/재개

-   **pause**: 타이머가 일시정지되며, 남은 시간이 유지됩니다.
-   **resume**: 일시정지된 시점부터 타이머가 재개됩니다.

### 탭 비활성화 처리

브라우저 탭이 비활성화되면 타이머가 자동으로 일시정지됩니다. (`running`, `retrying` 상태)
탭이 다시 활성화되면 타이머가 재개되지만, **사용자가 직접 pause한 경우에는 자동으로 재개되지 않습니다.**

### 배경 프로그레스

`running` 및 `retrying` 상태에서는 다음 새로고침까지 남은 시간을 배경색이 차오르는 형태로 시각화합니다.

### 남은 시간 카운트다운

`running` 상태에서는 다음 새로고침까지 **남은 시간**이 실시간으로 표시됩니다:

-   `10s` → `9s` → `8s` → ... → `1s` → (새로고침)
-   `1m40s` → `1m39s` → ... → `1m0s` → `59s` → ...

---

## Size

<div class="components-example flex flex-col gap-2">
    <AutoRefresh
        status="running"
        size="small"
        :label="label"
        :tooltip="tooltip"
        :interval="10000"
        @update:status="(v) => (status = v)"
        @refresh="handleRefresh"
    />
    <AutoRefresh
        status="running"
        size="medium"
        :label="label"
        :tooltip="tooltip"
        :interval="10000"
        @update:status="(v) => (status = v)"
        @refresh="handleRefresh"
    />
    <AutoRefresh
        status="running"
        size="large"
        :label="label"
        :tooltip="tooltip"
        :interval="10000"
        @update:status="(v) => (status = v)"
        @refresh="handleRefresh"
    />
</div>

## Type

<div class="components-example flex gap-4">
    <AutoRefresh
        status="running"
        type="outlined"
        size="medium"
        :label="label"
        :tooltip="tooltip"
        :interval="10000"
        @update:status="(v) => (status = v)"
        @refresh="handleRefresh"
    />
    <AutoRefresh
        status="running"
        type="ghost"
        size="medium"
        :label="label"
        :tooltip="tooltip"
        :interval="10000"
        @update:status="(v) => (status = v)"
        @refresh="handleRefresh"
    />
</div>

## Status

<div class="components-example flex flex-col gap-2">
    <div class="flex items-center gap-4">
        <span class="w-20 font-medium">running</span>
        <AutoRefresh status="running" size="medium" :label="label" :tooltip="tooltip" :interval="10000" @update:status="(v) => (status = v)" @refresh="handleRefresh" />
    </div>
    <div class="flex items-center gap-4">
        <span class="w-20 font-medium">paused</span>
        <AutoRefresh status="paused" size="medium" :label="label" :tooltip="tooltip" :interval="10000" @update:status="(v) => (status = v)" @refresh="handleRefresh" />
    </div>
    <div class="flex items-center gap-4">
        <span class="w-20 font-medium">retrying</span>
        <AutoRefresh status="retrying" size="medium" :label="label" :tooltip="tooltip" :interval="10000" />
    </div>
    <div class="flex items-center gap-4">
        <span class="w-20 font-medium">failed</span>
        <AutoRefresh status="failed" size="medium" :label="label" :tooltip="tooltip" :interval="10000" @refresh="handleRefresh" />
    </div>
</div>

## Callout

### File: callout/callout.md

# Callout 컴포넌트

`Callout` 컴포넌트는 사용자에게 중요한 정보, 경고, 에러 등을 시각적으로 눈에 띄게 알리기 위한 컴포넌트입니다. 다양한 테마와 스타일을 지원하여 여러 상황에 맞게 사용할 수 있습니다.

## 기본 사용법

```vue
<template>
    <callout
        icon="info"
        type="filled"
        theme="info"
        title="정보 알림"
        description="여기에 추가 정보를 넣을 수 있습니다."
    />
</template>

## Props

| Prop          | 타입                                                               | 필수 | 기본값       | 설명                                                                                     |
| ------------- | ------------------------------------------------------------------ | ---- | ------------ | ---------------------------------------------------------------------------------------- |
| `icon`        | `IconTypes`                                                        | -    | -            | 표시할 아이콘. `@/icons`에서 제공되는 아이콘 타입을 사용합니다.                          |
| `type`        | `'filled'` \| `'outlined'`                                         | -    | `'filled'`   | 배경 스타일. `filled`는 배경색이 있고, `outlined`는 테두리만 있습니다.                   |
| `title`       | `string`                                                           | ✓    | -            | Callout의 제목. HTML을 포함할 수 있습니다.                                               |
| `description` | `string`                                                           | -    | -            | 추가 설명 텍스트. 이 값이 제공되면 verbose 모드로 표시됩니다. HTML을 포함할 수 있습니다. |
| `theme`       | `'primary'` \| `'info'` \| `'success'` \| `'warning'` \| `'error'` | -    | `'primary'`  | 컬러 테마. 상황에 맞는 색상을 선택할 수 있습니다.                                        |

## 표시 모드

Callout 컴포넌트는 내부적으로 두 가지 표시 모드를 지원합니다:

-   **Compact 모드**: `description`이 제공되지 않을 때 사용됩니다. 아이콘과 제목만 표시됩니다.
-   **Verbose 모드**: `description`이 제공될 때 사용됩니다. 아이콘, 제목, 그리고 추가 설명이 표시됩니다.

## 테마

다음 테마가 지원됩니다:

-   **primary**: 기본 브랜드 색상을 사용합니다.
-   **info**: 정보 제공 목적으로 사용됩니다 (회색 계열).
-   **success**: 성공 또는 긍정적인 메시지에 사용됩니다 (녹색 계열).
-   **warning**: 주의가 필요한 메시지에 사용됩니다 (주황색 계열).
-   **error**: 오류 또는 중요한 경고에 사용됩니다 (빨간색 계열).

## 스타일 타입

각 테마는 두 가지 스타일로 표시할 수 있습니다:

-   **filled**: 배경색이 적용된 스타일입니다.
-   **outlined**: 테두리만 있는 스타일입니다.

## 슬롯

컴포넌트 내에 커스텀 콘텐츠를 추가하려면 기본 슬롯을 사용할 수 있습니다.

## 사용 예시

<h3>Success 테마</h3>
  <callout
    :icon="ICON_TYPE.check"
    type="filled"
    theme="success"
    title="Success - Filled - Compact"
    description="작업이 성공적으로 완료되었습니다. 계속 진행하세요.">
    <div class="custom-content">
      <Btn type="outlined" text="확인"/>
    </div>
  </callout>

<h3>Warning 테마</h3>
  <callout
    :icon="ICON_TYPE.caution"
    type="filled"
    theme="warning"
    title="Warning - Filled - Compact"
    description="이 작업은 되돌릴 수 없습니다. 진행하기 전에 데이터를 백업하세요.">
    <div class="custom-content">
      <Btn type="outlined" text="이해했습니다"/>
    </div>
  </callout>

<h3>Error 테마</h3>
  <callout
    :icon="ICON_TYPE.cancel"
    type="filled"
    theme="error"
    title="Error - Filled - Compact"
    description="연결에 실패했습니다. 네트워크 상태를 확인하고 다시 시도해주세요.">
    <div class="custom-content">
      <Btn type="outlined" text="재시도"/>
    </div>
  </callout>

<h3>Primary 테마</h3>
  <callout
    :icon="ICON_TYPE.info"
    type="filled"
    theme="primary"
    title="Primary - Filled - Compact"
    description="중요한 정보입니다. <a href='#'>여기</a>를 클릭하여 자세한 내용을 확인하세요.">
    <div class="custom-content">
      <Btn type="outlined" text="자세히 보기"/>
    </div>
  </callout>

<callout
    :icon="ICON_TYPE.info"
    type="outlined"
    theme="primary"
    title="Primary - Outlined - Compact"
    description="문서 링크입니다. <a href='#'>여기</a>를 클릭하여 자세한 문서를 참조하세요.">

</div>

## Card

### File: card/checkbox-card.md

# CheckboxCard

일반적인 체크박스보다 더 직관적이고 시각적으로 풍부한 선택 경험을 제공하는 카드형 선택 컴포넌트입니다.
각 CheckboxCard는 제목, 설명, 선택 상태를 포함할 수 있으며, 선택 항목의 의미를 보다 명확히 전달하기 위해 추가적인 콘텐츠를 포함할 수 있습니다.

const pizzaValues = ref([]);

const checked1 = ref(true);
const checked2 = ref(true);
const checked3 = ref(true);
const checked4 = ref(true);
</script>

## Title

## Props

| Prop          | 타입                                     | 필수 | 기본값  | 설명                                             |
| ------------- | ---------------------------------------- | ---- | ------- | ------------------------------------------------ |
| `modelValue`  | `boolean` \| `Array<string | number>`    | -    | -       | 체크 상태 또는 다중 선택 값                      |
| `title`       | `string`                                  | ✓    | -       | 카드 제목                                        |
| `description` | `string`                                  | -    | -       | 설명 텍스트                                      |
| `name`        | `string`                                  | -    | -       | 네이티브 input의 name                            |
| `value`       | `string` \| `number`                      | ✓    | -       | 체크/선택 시 사용할 값                           |
| `disabled`    | `boolean`                                 | -    | `false` | 비활성화 여부                                    |

## Title + Description

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { CheckboxCard } from '@jennifersoft/vue-components-v2';
const pizzaValues = ref([]);
</script>
<template>
    <div class="flex flex-col gap-2">
        <div class="flex items-center gap-2">
            <checkbox-card
                class="w-60"
                v-model="pizzaValues"
                name="pizza"
                value="Cheese"
                title="Cheese Pizza"
                description="풍부한 모짜렐라 치즈가 듬뿍 올라가 부드럽고 고소한 맛이 일품인 피자의 기본 중의 기본"
            />
            <checkbox-card
                class="w-60"
                v-model="pizzaValues"
                name="pizza"
                value="Potato"
                title="Potato Pizza"
                description="담백한 감자 토핑과 베이컨이 어우러져 포만감이 높고 아이들에게도 인기 많은 한국적 피자"
            />
        </div>
        <div class="flex items-center gap-2">
            <checkbox-card
                class="w-60"
                v-model="pizzaValues"
                name="pizza"
                value="Bulgogi"
                title="Bulgogi Pizza"
                description="달콤한 양념의 한국식 불고기와 채소가 조화롭게 어우러져 한국인의 입맛에 딱 맞는 퓨전 피자"
            />
            <checkbox-card
                class="w-60"
                v-model="pizzaValues"
                name="pizza"
                value="Pepperoni"
                title="Pepperoni Pizza"
                description="얇게 썬 매콤한 페퍼로니 소시지가 특징으로, 고소한 치즈와 함께 클래식한 미국식 피자의 대표주자"
            />
        </div>
    </div>
</template>
```

## disabled

### File: card/radio-button-card.md

# RadioButtonCard

일반적인 라디오 버튼보다 더 직관적이고 시각적으로 풍부한 선택 경험을 제공하는 카드형 선택 컴포넌트입니다.
각 RadioButtonCard는 제목, 설명, 선택 상태를 포함할 수 있으며, 선택 항목의 의미를 보다 명확히 전달하기 위해 추가적인 콘텐츠를 포함할 수 있습니다.

const pizzaValue = ref("Cheese");

const defaultValue = ref("true");
const disabledValue = ref("true");
</script>

## Title

## Props

| Prop          | 타입                        | 필수 | 기본값  | 설명                      |
| ------------- | --------------------------- | ---- | ------- | ------------------------- |
| `modelValue`  | `string` \| `number`        | ✓    | -       | 선택된 값                 |
| `title`       | `string`                    | ✓    | -       | 카드 제목                 |
| `description` | `string`                    | -    | -       | 설명 텍스트               |
| `name`        | `string`                    | ✓    | -       | 네이티브 input의 name     |
| `value`       | `string` \| `number`        | ✓    | -       | 라디오 선택 시 사용할 값  |
| `disabled`    | `boolean`                   | -    | `false` | 비활성화 여부             |

## Title + Description

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { CheckboxCard } from '@jennifersoft/vue-components-v2';
const pizzaValue = ref('Cheese');
</script>
<template>
    <div class="flex flex-col gap-2">
        <div class="flex items-center gap-2">
            <radio-button-card
                class="w-60"
                v-model="pizzaValue"
                name="pizza"
                value="Cheese"
                title="Cheese Pizza"
                description="풍부한 모짜렐라 치즈가 듬뿍 올라가 부드럽고 고소한 맛이 일품인 피자의 기본 중의 기본"
            />
            <radio-button-card
                class="w-60"
                v-model="pizzaValue"
                name="pizza"
                value="Potato"
                title="Potato Pizza"
                description="담백한 감자 토핑과 베이컨이 어우러져 포만감이 높고 아이들에게도 인기 많은 한국적 피자"
            />
        </div>
        <div class="flex items-center gap-2">
            <radio-button-card
                class="w-60"
                v-model="pizzaValue"
                name="pizza"
                value="Bulgogi"
                title="Bulgogi Pizza"
                description="달콤한 양념의 한국식 불고기와 채소가 조화롭게 어우러져 한국인의 입맛에 딱 맞는 퓨전 피자"
            />
            <radio-button-card
                class="w-60"
                v-model="pizzaValue"
                name="pizza"
                value="Pepperoni"
                title="Pepperoni Pizza"
                description="얇게 썬 매콤한 페퍼로니 소시지가 특징으로, 고소한 치즈와 함께 클래식한 미국식 피자의 대표주자"
            />
        </div>
    </div>
</template>
```

## disabled

## Overlay

### File: overlay/content-dialog.md

# ContentDialog

const treeData = ref([
    {
        label: 'RnD 대시보드 모음',
        dashboard_ids: ['dashboard_id1', 'dashboard_id2', 'dashboard_id3'],
        isOpen: true,
        id: 'id1',
        children: [
            {
                label: 'David 대시보드',
                id: 'id2',
                isOpen: true,
                children: [
                    {
                        label: '기술지원',
                        id: 'id3',
                        isOpen: true,
                        dashboard_ids: [
                            'dashboard_id4',
                            'dashboard_id5',
                            'dashboard_id6',
                        ],
                        children: [
                            {
                                label: '싸이웰 시스템',
                                id: 'id4',
                                dashboard_ids: ['dashboard_id7'],
                            },
                            {
                                label: '지티플러스',
                                id: 'id5',
                                dashboard_ids: ['dashboard_id8'],
                            },
                            {
                                label: '이인티그레이션',
                                id: 'id6',
                                dashboard_ids: ['dashboard_id9'],
                            },
                        ],
                    },
                ],
            },
            {
                label: 'Aiden 대시보드',
                id: 'id7',
                children: [
                    {
                        label: '기술지원',
                        id: 'id8',
                        dashboard_ids: [
                            'dashboard_id10',
                            'dashboard_id11',
                            'dashboard_id12',
                        ],
                    },
                ],
            },
        ],
    },
]);

const dialog1 = ref(false);
const dialog2 = ref(false);
const dialog3 = ref(false);

const fileName = ref('');
const selectedId = ref('id3');

const showDialog1 = () => {
    dialog1.value = true;
}

const hideDialog1 = () => {
    dialog1.value = false;
}

const showDialog2 = () => {
    dialog2.value = true;
}

const hideDialog2 = () => {
    dialog2.value = false;
}

const showDialog3 = () => {
    dialog3.value = true;
}

const hideDialog3 = () => {
    dialog3.value = false;
}

</script>

## Basic

```vue
<script setup lang="ts">
import { ref } from 'vue';
import {
    Btn,
    OverlayMask,
    ContentDialog,
    Tree,
    InputText,
} from '@jennifersoft/vue-components-v2';

const dialog1 = ref(false);
const dialog2 = ref(false);
const dialog3 = ref(false);

const fileName = ref('');
const selectedId = ref('id3');

const showDialog1 = () => {
    dialog1.value = true;
};

const hideDialog1 = () => {
    dialog1.value = false;
};

const showDialog2 = () => {
    dialog2.value = true;
};

const hideDialog2 = () => {
    dialog2.value = false;
};

const showDialog3 = () => {
    dialog3.value = true;
};

const hideDialog3 = () => {
    dialog3.value = false;
};
</script>

<template>
    <div>
        <btn type="outlined" text="새폴더" @click="showDialog1" />
        <btn type="outlined" text="트리" @click="showDialog2" />
        <btn type="outlined" text="트리(Footer)" @click="showDialog3" />
        <overlay-mask v-if="dialog1 | dialog2 | dialog3">
            <content-dialog v-if="dialog1" @close="hideDialog1">
                <template v-slot:title> 새 폴더 만들기 </template>
                <template v-slot:body>
                    <input-text
                        class="w-full"
                        v-model="fileName"
                        :placeholder="'새 폴더'"
                    />
                </template>
                <template v-slot:footer>
                    <div class="flex flex-row justify-between w-full">
                        <div></div>
                        <div class="flex flex-row gap-2">
                            <btn
                                type="outlined"
                                text="취소"
                                @click="hideDialog1()"
                            />
                            <btn
                                type="primary-filled"
                                text="추가"
                                @click="hideDialog1()"
                            />
                        </div>
                    </div>
                </template>
            </content-dialog>
            <content-dialog v-if="dialog2" @close="hideDialog2">
                <template v-slot:title> 폴더 트리 </template>
                <template v-slot:body>
                    <tree
                        :nodes="treeData"
                        v-model="selectedId"
                        tree-type="folder"
                        class="h-[20rem]"
                    />
                </template>
            </content-dialog>
            <content-dialog v-if="dialog3" @close="hideDialog3">
                <template v-slot:title> 폴더 트리 </template>
                <template v-slot:body>
                    <tree
                        :nodes="treeData"
                        v-model="selectedId"
                        tree-type="folder"
                        class="h-[20rem]"
                    />
                </template>
                <template v-slot:footer>
                    <div class="flex flex-row justify-between w-full">
                        <div>
                            <btn
                                type="outlined"
                                text="이번에만 적용"
                                @click="hideDialog3()"
                            />
                        </div>
                        <div class="flex flex-row gap-2">
                            <btn
                                type="outlined"
                                text="취소"
                                @click="hideDialog3()"
                            />
                            <btn
                                type="primary-filled"
                                text="추가"
                </template>
            </content-dialog>
        </overlay-mask>
    </div>
</template>
```

## Props

이 컴포넌트는 Props를 받지 않습니다.

## API

### Event

| Name    | Parameter | Description                                        |
| ------- | --------- | -------------------------------------------------- |
| `close` | `void`    | 상단 우측에 닫기 버튼을 클릭했을때 실행되는 이벤트 |

### File: overlay/confirm-dialog.md

# Confirm Dialog

Confirm Dialog 은 사용자의 중요한 결정을 요구하는 경우에 사용되며, OverlayMask를 사용하여 모달 방식으로 동작합니다.

const showSaveDialog = ref(false);
const showDeleteDialog = ref(false);
const showNoIconDialog = ref(false);

const showSaveConfirm = () => {
    showSaveDialog.value = true;
}

const hideSaveConfirm = () => {
    showSaveDialog.value = false;
}

const showDeleteConfirm = () => {
    showDeleteDialog.value = true;
}

const hideDeleteConfirm = () => {
    showDeleteDialog.value = false;
}

const showNoIconConfirm = () => {
    showNoIconDialog.value = true;
}

const hideNoIconConfirm = () => {
    showNoIconDialog.value = false;
}

</script>

## Basic

<div class="components-example">
  <btn type="outlined" text="저장" @click=showSaveConfirm() />
  <btn type="error-filled" text="삭제" @click=showDeleteConfirm() />
  <btn type="outlined" text="no-icon" @click=showNoIconConfirm() />
  <overlay-mask v-if="showSaveDialog">
        <confirm-dialog
            :icon-props="{ icon: ICON_TYPE.caution3, type: 'default' }"
            @close="hideSaveConfirm()"
        >
            <template v-slot:title> Confirmation </template>
            <template v-slot:message>
                <div>편집중인 대시보드의 차트, 상단바 정보가 삭제됩니다.</div>
                <div>정말로 새로운 대시보드로 구성 하시겠습니까?</div>
            </template>
            <template v-slot:footer>
                <btn type="outlined" text="취소" @click="hideSaveConfirm()" />
                <btn
                    type="primary-filled"
                    text="적용"
                    @click="hideSaveConfirm()"
                />
            </template>
        </confirm-dialog>
    </overlay-mask>
    <overlay-mask v-if="showDeleteDialog">
        <confirm-dialog
            :icon-props="{ icon: ICON_TYPE.cancel, type: 'error' }"
            @close="hideDeleteConfirm()"
        >
            <template v-slot:title> Confirmation </template>
            <template v-slot:message>
                <div>정말 삭제하시겠습니까?</div>
                <div>대시보드가 삭제되면 복구할 수 없습니다.</div>
            </template>
            <template v-slot:footer>
                <btn type="outlined" text="취소" @click="hideDeleteConfirm()" />
                <btn
                    type="error-filled"
                    text="적용"
                    @click="hideDeleteConfirm()"
                />
            </template>
        </confirm-dialog>
    </overlay-mask>
    <overlay-mask v-if="showNoIconDialog">
        <confirm-dialog @close="hideNoIconConfirm()">
            <template v-slot:title> Confirmation </template>
            <template v-slot:message>
                <div>정말 삭제하시겠습니까?</div>
                <div>대시보드가 삭제되면 복구할 수 없습니다.</div>
            </template>
            <template v-slot:footer>
                <btn type="outlined" text="취소" @click="hideNoIconConfirm()" />
                <btn type="outlined" text="적용" @click="hideNoIconConfirm()" />
            </template>
        </confirm-dialog>
    </overlay-mask>
</div>

```vue
<script setup lang="ts">
import {
    Btn,
    ICON_TYPE,
    OverlayMask,
    ConfirmDialog,
} from '@jennifersoft/vue-components-v2';
const showSaveDialog = ref(false);
const showDeleteDialog = ref(false);
const showNoIconDialog = ref(false);

const showSaveConfirm = () => {
    showSaveDialog.value = true;
};

const hideSaveConfirm = () => {
    showSaveDialog.value = false;
};

const showDeleteConfirm = () => {
    showDeleteDialog.value = true;
};

const hideDeleteConfirm = () => {
    showDeleteDialog.value = false;
};

const showNoIconConfirm = () => {
    showNoIconDialog.value = true;
};

const hideNoIconConfirm = () => {
    showNoIconDialog.value = false;
};
</script>
<template>
    <overlay-mask v-if="showSaveDialog">
        <confirm-dialog
            :icon-props="{ icon: ICON_TYPE.caution3, type: 'default' }"
            @close="hideSaveConfirm()"
        >
            <template v-slot:title> Confirmation </template>
            <template v-slot:message>
                <div>편집중인 대시보드의 차트, 상단바 정보가 삭제됩니다.</div>
                <div>정말로 새로운 대시보드로 구성 하시겠습니까?</div>
            </template>
            <template v-slot:footer>
                <btn type="outlined" text="취소" @click="hideSaveConfirm()" />
                <btn
                    type="primary-filled"
                    text="적용"
                    @click="hideSaveConfirm()"
                />
            </template>
        </confirm-dialog>
    </overlay-mask>
    <overlay-mask v-if="showDeleteDialog">
        <confirm-dialog
            :icon-props="{ icon: ICON_TYPE.cancel, type: 'error' }"
            @close="hideDeleteConfirm()"
        >
            <template v-slot:title> Confirmation </template>
            <template v-slot:message>
                <div>정말 삭제하시겠습니까?</div>
                <div>대시보드가 삭제되면 복구할 수 없습니다.</div>
            </template>
            <template v-slot:footer>
                <btn type="outlined" text="취소" @click="hideDeleteConfirm()" />
                <btn
                    type="error-filled"
                    text="적용"
                    @click="hideDeleteConfirm()"
                />
            </template>
        </confirm-dialog>
    </overlay-mask>
    <confirm-dialog @close="hideNoIconConfirm()">
            <template v-slot:title> Confirmation </template>
            <template v-slot:message>
                <div>정말 삭제하시겠습니까?</div>
                <div>대시보드가 삭제되면 복구할 수 없습니다.</div>
            </template>
            <template v-slot:footer>
                <btn type="outlined" text="취소" @click="hideNoIconConfirm()" />
                <btn type="outlined" text="적용" @click="hideNoIconConfirm()" />
            </template>
        </confirm-dialog>
    </overlay-mask>
</template>
```

## Props

| 이름      | 타입                                                                         | 기본값 | 설명                        |
| --------- | ---------------------------------------------------------------------------- | ------ | --------------------------- |
| iconProps | `{ icon: IconTypes; type?: 'default' \| 'primary' \| 'warning' \| 'error' }` | -      | 다이얼로그 상단 아이콘 설정 |

### File: overlay/overlay-mask.md

# OverlayMask

화면 전체를 덮는 마스크 레이어로, 다이얼로그/드로어 등 오버레이 컴포넌트 표시 시 배경을 차폐하고 포커스를 고정하는 데 사용합니다.

const show = ref(false);
</script>

## Basic

</div>

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { OverlayMask, Btn } from '@jennifersoft/vue-components-v2';

const show = ref(false);
</script>

<OverlayMask v-if="show" @click.self="show = false">
        <div
            style="background: var(--surface-200); padding: 16px; border-radius: 8px; box-shadow: var(--box-shadow-500);"
        >
            <div class="typo-body-medium mb-3">오버레이 안의 콘텐츠</div>
            <Btn type="outlined" text="닫기" @click="show = false" />
        </div>
    </OverlayMask>
</template>
```

## Props

이 컴포넌트는 Props를 받지 않습니다.

## Slots

-   **default**: 마스크 중앙에 표시할 콘텐츠를 전달합니다.

## 참고

-   내부적으로 `v-z-index` 디렉티브를 사용해 오버레이 레이어 순서를 관리합니다.
-   스타일 클래스 `.js-overlay-mask`는 전체 화면 고정, 중앙 정렬, 반투명 배경(`--overlay-black-600`)을 적용합니다.

### File: overlay/drawer.md

# Drawer

Drawer는 화면 측면에서 슬라이드 형태로 등장하는 패널입니다. 주로 설정, 필터 등의 추가 UI 요소를 제공하기 위해 활용되며, 메인 화면의 공간을 효율적으로 사용하면서도 필요한 정보를 사용자에게 전달할 수 있습니다.

const showLeftDrawer = ref(false);
const showRightDrawer = ref(false);

const showLeft = () => {
    showLeftDrawer.value = true;
};

const hideLeft = () => {
    showLeftDrawer.value = false;
};

const showRight = () => {
    showRightDrawer.value = true;
};

const hideRight = () => {
    showRightDrawer.value = false;
};

</script>

## Basic

<btn type="outlined" :leading-icon="ICON_TYPE.arrowLeft" @click="showLeft" />
<btn type="outlined" :leading-icon="ICON_TYPE.arrowRight" @click="showRight" />
<drawer v-model:isOpen="showLeftDrawer" @close="hideLeft" direction="left">
왼쪽 Drawer
</drawer>
<drawer
v-model:isOpen="showRightDrawer"
@close="hideRight"
direction="right" >
오른쪽 Drawer
</drawer>

</div>

```vue
<script setup lang="ts">
import { ref, computed } from 'vue';
import { Btn, ICON_TYPE, Drawer } from '@jennifersoft/vue-components-v2';

const showLeftDrawer = ref(false);
const showRightDrawer = ref(false);

const showLeft = () => {
    showLeftDrawer.value = true;
};

const hideLeft = () => {
    showLeftDrawer.value = false;
};

const showRight = () => {
    showRightDrawer.value = true;
};

const hideRight = () => {
    showRightDrawer.value = false;
};
</script>
<template>
    <btn
        type="outlined"
        :leading-icon="ICON_TYPE.arrowLeft"
        @click="showLeft"
    />
    <btn
        type="outlined"
        :leading-icon="ICON_TYPE.arrowRight"
        @click="showRight"
    />

<drawer v-model:isOpen="showLeftDrawer" @close="hideLeft" direction="left">
        왼쪽 Drawer
    </drawer>
    <drawer
        v-model:isOpen="showRightDrawer"
        @close="hideRight"
        direction="right"
    >
        오른쪽 Drawer
    </drawer>
</template>
```

## Props

| 이름      | 타입                    | 기본값   | 설명                         |
| --------- | ----------------------- | -------- | ---------------------------- |
| direction | `'left'` \| `'right'`   | `'left'` | 드로어가 열리는 방향(좌/우) |

## v-model

| 이름   | 타입      | 기본값  | 설명               |
| ------ | --------- | ------- | ------------------ |
| isOpen | `boolean` | `false` | 드로어 열림 상태값 |

## 이벤트

| 이름   | 파라미터 | 설명           |
| ------ | -------- | -------------- |
| close  | `void`   | 드로어 닫기 요청 |

### File: overlay/tooltip.md

# Tooltip

툴팁은 사용자 인터페이스에서 특정 요소에 마우스를 올리거나 포커스를 맞췄을 때 나타나는 작은 설명창입니다. 툴팁은 해당 요소의 기능, 용도 또는 추가 정보를 간결하게 전달하는 역할을 합니다.

## Deprecated

-   이 컴포넌트(`Tooltip`)는 더 이상 사용되지 않습니다.
-   대신 `v-tooltip` 디렉티브를 사용해 주세요.
-   기존 컴포넌트는 한시적으로 유지될 수 있으나 향후 제거될 수 있습니다.

const tooltipMessage = ref('툴팁(Tooltip)은 사용자 인터페이스에서 특정 요소에 마우스를 올리거나 포커스를 맞췄을 때 나타나는 작은 설명창입니다. 툴팁은 해당 요소의 기능, 용도 또는 추가 정보를 간결하게 전달하는 역할을 합니다.')
</script>

## Basic

```vue
<template>
    <tooltip text="This is a tooltip" placement="top">
        <btn type="outlined" text="Hover me" />
    </tooltip>
</template>

## Props

| 이름            | 타입                                                                                                                                                                                           | 기본값  | 설명                                               |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------- |
| text            | `string`                                                                                                                                                                                       | `''`    | 툴팁에 표시할 텍스트                               |
| placement       | `'top'` \| `'top-left'` \| `'top-right'` \| `'bottom'` \| `'bottom-left'` \| `'bottom-right'` \| `'left'` \| `'right'` \| `'left-top'` \| `'left-bottom'` \| `'right-top'` \| `'right-bottom'` | `'top'` | 툴팁이 표시될 위치                                 |
| maxWidth        | `number`                                                                                                                                                                                       | `264`   | 툴팁의 최대 너비(px)                               |
| offset          | `{ x?: number; y?: number }`                                                                                                                                                                   | -       | 툴팁 위치에 추가 적용할 x/y 오프셋                 |
| overlayStyle    | `Partial<CSSStyleDeclaration>`                                                                                                                                                                 | -       | 툴팁 팝업(레이어) 영역에 적용할 인라인 스타일 객체 |
| tooltipBoxStyle | `Partial<CSSStyleDeclaration>`                                                                                                                                                                 | -       | 툴팁 박스(컨테이너)에 적용할 인라인 스타일 객체    |

## 다양한 위치의 툴팁

```vue
<script setup>
import { Btn, Tooltip } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <div class="flex flex-col gap-8">
        <div class="flex flex-row gap-8">
            <tooltip :text="tooltipMessage" placement="top-left">
                <btn type="outlined" text="TL" />
            </tooltip>
            <tooltip :text="tooltipMessage" placement="top">
                <btn type="outlined" text="Top" />
            </tooltip>
            <tooltip :text="tooltipMessage" placement="top-right">
                <btn type="outlined" text="TR" />
            </tooltip>
        </div>
        <div class="flex flex-row gap-8">
            <tooltip :text="tooltipMessage" placement="left-top">
                <btn type="outlined" text="LR" />
            </tooltip>
            <div> </div>
            <tooltip :text="tooltipMessage" placement="right-top">
                <btn type="outlined" text="RT" />
            </tooltip>
        </div>
        <div class="flex flex-row gap-8">
            <tooltip :text="tooltipMessage" placement="left">
                <btn type="outlined" text="Left" />
            </tooltip>
            <div> </div>
            <tooltip :text="tooltipMessage" placement="right">
                <btn type="outlined" text="Right" />
            </tooltip>
        </div>
        <div class="flex flex-row gap-8">
            <tooltip :text="tooltipMessage" placement="left-bottom">
                <btn type="outlined" text="LB" />
            </tooltip>
            <div> </div>
            <tooltip :text="tooltipMessage" placement="right-bottom">
                <btn type="outlined" text="RB" />
            </tooltip>
        </div>
        <div class="flex flex-row gap-8">
            <tooltip :text="tooltipMessage" placement="bottom-left">
                <btn type="outlined" text="BL" />
            </tooltip>
            <tooltip :text="tooltipMessage" placement="bottom">
                <btn type="outlined" text="Bottom" />
            </tooltip>
            <tooltip :text="tooltipMessage" placement="bottom-right">
                <btn type="outlined" text="BR" />
            </tooltip>
        </div>
    </div>
</templage>
```

## Props

| 이름            | 타입                                                                                                                                                                   | 기본값           | 설명                                               |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | -------------------------------------------------- |
| text            | string                                                                                                                                                                 | ''               | 툴팁에 표시할 텍스트                               |
| placement       | 'top' \| 'top-left' \| 'top-right' \| 'bottom' \| 'bottom-left' \| 'bottom-right' \| 'left' \| 'right' \| 'left-top' \| 'left-bottom' \| 'right-top' \| 'right-bottom' | 'top'            | 툴팁이 표시될 위치                                 |
| maxWidth        | number                                                                                                                                                                 | 264              | 툴팁의 최대 너비(px)                               |
| offset          | `{ x?: number; y?: number }`                                                                                                                                           | `{ x: 0, y: 0 }` | 툴팁 위치에 추가 적용할 x/y 오프셋                 |
| overlayStyle    | `Partial<CSSStyleDeclaration>`                                                                                                                                         | -                | 툴팁 팝업(레이어) 영역에 적용할 인라인 스타일 객체 |
| tooltipBoxStyle | `Partial<CSSStyleDeclaration>`                                                                                                                                         | -                | 툴팁 박스(컨테이너)에 적용할 인라인 스타일 객체    |

### File: overlay/v-tooltip.md

# v-tooltip 디렉티브

v-tooltip은 DOM 구조에 제약 없이 툴팁 기능을 손쉽게 추가할 수 있도록 설계된 Vue 디렉티브입니다.

## 기본 사용법

v-tooltip 디렉티브는 툴팁에 표시할 텍스트와 옵션을 포함하는 객체를 값으로 받습니다.
※ 주의사항: Vue app 최상단에 v-tooltip 디렉티브를 전역 등록해야합니다. 그렇지 못하는 경우 ensureOverlayDirectives composable을 호출해야합니다.

```vue
<template>
    <Btn
        v-tooltip="{ text: 'This is a tooltip', placement: 'top' }"
        type="outlined"
        text="Hover me"
    />
</template>

## 다양한 위치의 툴팁

`placement` 옵션을 사용하여 툴팁의 위치를 자유롭게 지정할 수 있습니다.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { Btn, vTooltip } from '@jennifersoft/vue-components-v2';
const tooltipMessage = ref('...'); // 툴팁 메시지
</script>
<template>
    <div class="flex flex-col gap-8">
        <div class="flex flex-row gap-8">
            <Btn
                v-tooltip="{ text: tooltipMessage, placement: 'top-left' }"
                type="outlined"
                text="Top-Left"
            />
            <Btn
                v-tooltip="{ text: tooltipMessage, placement: 'top' }"
                type="outlined"
                text="Top"
            />
            <Btn
                v-tooltip="{ text: tooltipMessage, placement: 'top-right' }"
                type="outlined"
                text="Top-Right"
            />
        </div>
        
    </div>
</template>
```

## API

v-tooltip 디렉티브에 전달하는 객체(`binding.value`)의 속성은 다음과 같습니다.

| 이름             | 타입                           | 기본값                         | 설명                                               |
| ---------------- | ------------------------------ | ------------------------------ | -------------------------------------------------- |
| text             | `string`                       | -                              | **(필수)** 툴팁에 표시할 텍스트                    |
| placement        | `'top' \| 'top-left' \| ...`   | `'top'`                        | 툴팁이 표시될 위치                                 |
| maxWidth         | `number`                       | `264`                          | 툴팁의 최대 너비(px)                               |
| offset           | `{ x?: number; y?: number }`   | `{ x: 0, y: 0 }`               | 툴팁 위치에 추가 적용할 x/y 오프셋                 |
| overlayStyle     | `Partial<CSSStyleDeclaration>` | `{}`                           | 툴팁 팝업(레이어) 영역에 적용할 인라인 스타일 객체 |
| tooltipBoxStyle  | `Partial<CSSStyleDeclaration>` | `{}`                           | 툴팁 박스(컨테이너)에 적용할 인라인 스타일 객체     |

### 상세 설명

-   **text**: 툴팁에 표시할 문자열입니다. 필수 항목입니다.
-   **placement**: 툴팁이 표시될 위치를 지정합니다. 총 12가지 위치(`top`, `top-left`, `top-right`, `bottom`, `bottom-left`, `bottom-right`, `left`, `left-top`, `left-bottom`, `right`, `right-top`, `right-bottom`)를 지원합니다.
-   **maxWidth**: 툴팁의 최대 너비를 픽셀 단위로 지정합니다.
-   **offset**: 툴팁 위치에 추가 적용할 x/y 오프셋을 지정합니다.
-   **overlayStyle**: 툴팁 팝업(레이어) 영역에 직접 인라인 스타일을 적용할 수 있는 `CSSStyleDeclaration`의 부분 집합 객체입니다. 예를 들어, `{ backgroundColor: 'blue', color: 'white' }`와 같이 사용할 수 있습니다.

## `overlayStyle` 사용법

`overlayStyle` 옵션을 사용하여 툴팁의 배경색, 글자색 등 다양한 스타일을 직접 지정할 수 있습니다.

```vue
<template>
    <Btn
        v-tooltip="{
            text: '커스텀 툴팁',
            placement: 'top',
            overlayStyle: {
                backgroundColor: 'skyblue',
                color: 'lightgreen',
                border: '3px solid pink',
                padding: '8px 12px',
            },
        }"
        type="outlined"
        text="Styled Tooltip"
    />
</template>

## 사용 사례

`v-tooltip`은 다음과 같은 상황에서 특히 유용합니다:

1.  기존 컴포넌트나 엘리먼트의 DOM 구조를 절대 변경하면 안 되는 경우
2.  CSS `selector` (e.g., `first-child`, `last-child`) 스타일에 영향을 주지 않고 툴팁을 추가해야 하는 경우
3.  메뉴 아이템, 버튼 등 정교한 스타일링이 적용된 여러 요소에 일관되게 툴팁을 적용할 때

### File: overlay/popover.md

# Popover

사용자에게 추가 정보나 확인을 요청하는 팝오버 컴포넌트입니다.
`title`, `content` props로 기본 스타일을 적용하거나, 슬롯을 통해 자유롭게 커스터마이징할 수 있습니다.

const anchorRef = ref<HTMLElement | null>(null);

const title = ref('제목');
    const content = ref('이 팝오버는 추가 정보를 제공하거나 사용자에게 확인을 요청할 때 사용됩니다.');
    const leftButtonText = ref('확인');
    const rightButtonText = ref('취소');
    const showTitle = ref(true);
    const showContent = ref(true);
    const showLeftButton = ref(true);
    const showRightButton = ref(true);
    const showArrow = ref(true);
    const buttonAlign = ref<'left' | 'right'>('left');

const placement = ref<PopoverPlacement>('top');

const placementOptions = [
        { label: 'top', value: 'top' },
        { label: 'top-left', value: 'top-left' },
        { label: 'top-right', value: 'top-right' },
        { label: 'bottom', value: 'bottom' },
        { label: 'bottom-left', value: 'bottom-left' },
        { label: 'bottom-right', value: 'bottom-right' },
        { label: 'left', value: 'left' },
        { label: 'left-top', value: 'left-top' },
        { label: 'left-bottom', value: 'left-bottom' },
        { label: 'right', value: 'right' },
        { label: 'right-top', value: 'right-top' },
        { label: 'right-bottom', value: 'right-bottom' },
    ];

const buttonAlignOptions = [
        { label: 'left', value: 'left' },
        { label: 'right', value: 'right' },
    ];

const leftButton = computed(() => {
        if (!showLeftButton.value) return undefined;
        return {
            text: leftButtonText.value,
            onClick: () => console.log('Left clicked'),
        };
    });

const rightButton = computed(() => {
        if (!showRightButton.value) return undefined;
        return {
            text: rightButtonText.value,
            onClick: () => console.log('Right clicked'),
        };
    });

const handleClose = () => {
        console.log('Popover closed');
    };
</script>

## Interactive Playground

아래에서 각 props를 직접 조작하며 컴포넌트를 테스트해보세요.

<div class="components-example flex flex-col gap-4">
    <div class="flex flex-col gap-3 p-4 border border-gray-200 rounded-lg">
        <div class="font-bold text-lg">Props 설정</div>
        <div class="flex items-center gap-4">
            <label class="w-32 font-medium">placement</label>
            <Dropdown v-model="placement" :items="placementOptions" size="small" style="width: 140px;" />
        </div>
        <div class="flex items-center gap-4">
            <label class="w-32 font-medium">buttonAlign</label>
            <Dropdown v-model="buttonAlign" :items="buttonAlignOptions" size="small" style="width: 140px;" />
        </div>
        <div class="flex items-center gap-4">
            <label class="w-32 font-medium">title</label>
            <Checkbox v-model="showTitle" size="small" />
            <InputText v-model="title" size="small" style="width: 200px;" :disabled="!showTitle" />
        </div>
        <div class="flex items-center gap-4">
            <label class="w-32 font-medium">content</label>
            <Checkbox v-model="showContent" size="small" />
            <InputText v-model="content" size="small" style="width: 300px;" :disabled="!showContent" />
        </div>
        <div class="flex items-center gap-4">
            <label class="w-32 font-medium">leftButton</label>
            <Checkbox v-model="showLeftButton" size="small" />
            <InputText v-model="leftButtonText" size="small" style="width: 120px;" :disabled="!showLeftButton" />
        </div>
        <div class="flex items-center gap-4">
            <label class="w-32 font-medium">rightButton</label>
            <Checkbox v-model="showRightButton" size="small" />
            <InputText v-model="rightButtonText" size="small" style="width: 120px;" :disabled="!showRightButton" />
        </div>
        <div class="flex items-center gap-4">
            <label class="w-32 font-medium">showArrow</label>
            <Checkbox v-model="showArrow" size="small" />
        </div>
    </div>
    <div class="flex flex-col gap-3 p-4 border border-gray-200 rounded-lg">
        <div class="font-bold text-lg">미리보기</div>
        <div class="text-sm text-gray-600 mb-2">버튼에 마우스를 올려보세요</div>
        <div class="flex justify-center items-center p-8">
            <Btn
                ref="anchorRef"
                text="Hover me"
                type="primary-filled"
            />
        </div>
        <Popover
            v-model:anchor="anchorRef"
            :title="showTitle ? title : undefined"
            :content="showContent ? content : undefined"
            :show-arrow="showArrow"
            :left-button="leftButton"
            :right-button="rightButton"
            :placement="placement"
            :buttom-align="buttonAlign"
            @close="handleClose"
        />
    </div>
</div>

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { Popover, Btn } from '@jennifersoft/vue-components-v2';

const anchorRef = ref<HTMLElement | null>(null);
</script>

<template>
    <Btn ref="anchorRef" text="Hover me" type="primary-filled" />
    <Popover
        v-model:anchor="anchorRef"
        title="제목"
        content="팝오버 내용입니다."
        :left-button="{ text: '확인', onClick: () => console.log('확인') }"
        :right-button="{ text: '취소', onClick: () => console.log('취소') }"
        placement="bottom"
    />
</template>
```

## Props

| Prop             | 타입                                                                                                                                | 필수 | 기본값     | 설명                                                     |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ---- | ---------- | -------------------------------------------------------- |
| `v-model:anchor` | `HTMLElement \| ComponentPublicInstance \| null`                                                                                    | ✓    | `null`     | 기준 요소 (hover 시 자동으로 팝오버 표시)                |
| `title`          | `string`                                                                                                                            | -    | -          | 팝오버 제목 (기본 스타일 적용)                           |
| `content`        | `string`                                                                                                                            | -    | -          | 팝오버 내용 (기본 스타일 적용)                           |
| `leftButton`     | `{ text: string; type?: ButtonType; onClick?: () => void }`                                                                         | -    | -          | 왼쪽 버튼                                                |
| `rightButton`    | `{ text: string; type?: ButtonType; onClick?: () => void }`                                                                         | -    | -          | 오른쪽 버튼                                              |
| `placement`      | `'top' \| 'top-left' \| 'top-right' \| 'bottom' \| 'bottom-left' \| 'bottom-right' \| 'left' \| 'left-top' \| 'left-bottom' \| ...` | -    | `'bottom'` | 팝오버 위치                                              |
| `offset`         | `{ x?: number; y?: number }`                                                                                                        | -    | -          | 위치 오프셋                                              |
| `overlayStyle`   | `Record<string, string>`                                                                                                            | -    | -          | 팝오버 컨테이너 스타일                                   |
| `showArrow`      | `boolean`                                                                                                                           | -    | `true`     | 화살표 표시 여부                                         |
| `hideDelay`      | `number`                                                                                                                            | -    | `100`      | 마우스가 벗어난 후 팝오버가 사라지기까지의 지연 시간(ms) |
| `buttomAlign`    | `'left' \| 'right'`                                                                                                                 | -    | `'left'`   | 버튼 정렬 방향                                           |

## Events

| Event   | Payload | 설명                                 |
| ------- | ------- | ------------------------------------ |
| `close` | -       | 팝오버가 닫힐 때 (버튼 클릭 시) 발생 |

## Slots

`title`, `content` props 대신 슬롯을 사용하면 완전히 커스터마이징할 수 있습니다.

| Slot      | 설명                                              |
| --------- | ------------------------------------------------- |
| `title`   | 제목 영역 커스터마이징 (`title` prop 대신 사용)   |
| `content` | 내용 영역 커스터마이징 (`content` prop 대신 사용) |

### 슬롯 사용 예시

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { Popover, Btn, StatusIndicator } from '@jennifersoft/vue-components-v2';

const anchorRef = ref<HTMLElement | null>(null);
</script>

<template>
    <Btn ref="anchorRef" text="Hover me" type="primary-filled" />
    <Popover v-model:anchor="anchorRef" placement="top-left" :hide-delay="0">
        <template #title>
            <div class="flex items-center gap-1">
                <span>Established</span>
                <StatusIndicator color="error" size="small">
                    False
                </StatusIndicator>
            </div>
        </template>
        <template #content>
            <div class="flex flex-col gap-1">
                <div class="flex flex-col">
                    <span style="color: var(--red-800);">
                        InitialNamesAccepted
                    </span>
                    <span style="color: var(--gray-600);">
                        ReplicaSet "nerver-create-pod-585c6597" has timed out
                        progressing.
                    </span>
                </div>
                <span style="color: var(--gray-500); font-size: 0.75rem;">
                    2025-08-27 05:03:59
                </span>
            </div>
        </template>
    </Popover>
</template>
```

### File: overlay/v-z-index.md

# v-z-index 디렉티브

v-z-index는 오버레이 컴포넌트(모달, 다이얼로그, 툴팁 등)의 z-index 값을 일관되고 체계적으로 관리할 수 있도록 설계된 Vue 디렉티브입니다. 이 디렉티브는 미리 정의된 z-index 맵을 사용하여 엘리먼트의 z-index 값을 설정합니다.

## 기본 사용법

v-z-index 디렉티브는 z-index 맵에 정의된 키 값을 받아 해당하는 z-index 값을 엘리먼트에 적용합니다.
※ 주의사항: Vue app 최상단에 v-z-index 디렉티브를 전역 등록해야합니다. 그렇지 못하는 경우 ensureOverlayDirectives composable을 호출해야합니다.

```vue
<template>
    <div v-z-index="BASE_Z_INDEX_KEY.MODAL">
        
    </div>
</template>

## z-index 맵 구성하기

애플리케이션에서 사용할 z-index 맵은 다음과 같이 구성할 수 있습니다:

```typescript
// zIndex.config.ts
import {
    createZIndexMap,
    BASE_Z_INDEX_KEY,
} from '@jennifersoft/vue-components-v2';

export const Z_INDEX_KEY = {
    LICENSE: 'license',
    ...BASE_Z_INDEX_KEY, // 기본 제공되는 키 값 (TOOLTIP, MENU, DIALOG, MODAL, DRAWER)
    POPUP: 'popup',
    NAVIGATION_BAR: 'navigationBar',
    NAVIGATION_PANEL: 'navigationPanel',
} as const;
export type ZIndexMap = (typeof Z_INDEX_KEY)[keyof typeof Z_INDEX_KEY];

export const zIndexMap = createZIndexMap(Z_INDEX_KEY);
```

## 전역 등록

v-z-index 디렉티브를 애플리케이션 전역에서 사용하려면 다음과 같이 등록합니다:

```typescript
// index.ts 또는 main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { createZIndexDirective } from '@jennifersoft/vue-components-v2';
import { zIndexMap } from '@container/layer/zIndex.config';

const app = createApp(App);
app.directive('z-index', createZIndexDirective(zIndexMap));
app.mount('#app');
```

## API

### 디렉티브 값 (binding.value)

v-z-index 디렉티브는 다음과 같은 값을 받을 수 있습니다:

| 타입     | 설명                      |
| -------- | ------------------------- |
| `string` | z-index 맵에 정의된 키 값 |

### createZIndexDirective 함수

| 매개변수 | 타입            | 설명                        |
| -------- | --------------- | --------------------------- |
| zMap     | `BaseZIndexMap` | z-index 값이 정의된 맵 객체 |

### createZIndexMap 함수

| 매개변수 | 타입                     | 설명                     |
| -------- | ------------------------ | ------------------------ |
| keyMap   | `Record<string, string>` | z-index 키가 정의된 객체 |

## 작동 방식

1. `createZIndexMap` 함수는 키 맵을 받아 각 키에 대한 z-index 값을 계산합니다.
2. 키 맵의 순서에 따라 z-index 값이 할당되며, 객체에서 위에 정의된 키일수록 더 높은 z-index 값을 가집니다.
3. 기본 z-index 값은 10000부터 시작하여 각 키마다 1000씩 증가합니다.
4. `createZIndexDirective` 함수는 z-index 맵을 받아 Vue 디렉티브를 생성합니다.
5. 디렉티브가 적용된 엘리먼트는 마운트 및 업데이트 시 해당하는 z-index 값이 style 속성으로 설정됩니다.

## 실제 사용 예시

<div class="components-example">
    <div class="z-index-demo">
        <div 
            v-z-index="BASE_Z_INDEX_KEY.DRAWER" 
            class="z-index-box drawer"
        >
            DRAWER
        </div>
        <div 
            v-z-index="BASE_Z_INDEX_KEY.MODAL" 
            class="z-index-box modal"
        >
            MODAL
        </div>
        <div 
            v-z-index="BASE_Z_INDEX_KEY.DIALOG" 
            class="z-index-box dialog"
        >
            DIALOG
        </div>
        <div 
            v-z-index="BASE_Z_INDEX_KEY.MENU" 
            class="z-index-box menu"
        >
            MENU
        </div>
        <div 
            v-z-index="BASE_Z_INDEX_KEY.TOOLTIP" 
            class="z-index-box tooltip"
        >
            TOOLTIP
        </div>
    </div>
</div>

.z-index-box {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 80px;
    border: 2px solid #333;
    font-weight: bold;
    color: white;
    
}

.drawer {
    background-color: var(--gray-600);
    left: 80px;
    top: 20px;
}

.modal {
    background-color: var(--gray-500);
    left: 160px;
    top: 40px;
}

.dialog {
    
    background-color: var(--gray-400);
    left: 240px;
    top: 60px;
}

.menu {
    
    background-color: var(--gray-300);
    left: 320px;
    top: 80px;
}

.tooltip {
    background-color: var(--gray-200);
    left: 400px;
    top: 100px;
}
</style>

```vue
<template>
    
    <div class="z-index-demo">
        <div v-z-index="BASE_Z_INDEX_KEY.DRAWER" class="z-index-box drawer">
            DRAWER
        </div>
        <div v-z-index="BASE_Z_INDEX_KEY.MODAL" class="z-index-box modal">
            MODAL
        </div>
        <div v-z-index="BASE_Z_INDEX_KEY.DIALOG" class="z-index-box dialog">
            DIALOG
        </div>
        <div v-z-index="BASE_Z_INDEX_KEY.MENU" class="z-index-box menu">
            MENU
        </div>
        <div v-z-index="BASE_Z_INDEX_KEY.TOOLTIP" class="z-index-box tooltip">
            TOOLTIP
        </div>
    </div>
</template>

.drawer {
    background-color: var(--gray-600);
    left: 80px;
    top: 20px;
}

.modal {
    background-color: var(--gray-500);
    left: 160px;
    top: 40px;
}

.dialog {
    background-color: var(--gray-400);
    left: 240px;
    top: 60px;
}

.menu {
    background-color: var(--gray-300);
    left: 320px;
    top: 80px;
}

.tooltip {
    background-color: var(--gray-200);
    left: 400px;
    top: 100px;
}
</style>
```

## 디렉티브 중첩 사용

v-z-index가 이미 내부에 적용된 컴포넌트에 외부에서 다시 v-z-index를 적용하면 외부에서 적용한 값이 우선합니다. 이를 활용하면 기존 컴포넌트의 z-index 값을 재정의할 수 있습니다.

예를 들어, OverlayMask 컴포넌트는 내부적으로 이미 v-z-index="BASE_Z_INDEX_KEY.MASK"가 적용되어 있지만, 외부에서 다른 z-index 값을 적용하면 외부 값이 우선합니다.

<div class="example-container">
    <OverlayMask class="mask-default">
        기본 OverlayMask (MASK z-index)
    </OverlayMask>
    <OverlayMask
        v-z-index="BASE_Z_INDEX_KEY.DIALOG"
        class="mask-overridden"
    >
        재정의된 OverlayMask (DIALOG z-index)
    </OverlayMask>
</div>

.mask-default,
.mask-overridden {
    position: absolute;
    width: auto;
    height: auto;
    padding: 1rem;
    color: white;
    font-weight: bold;
    border: 2px solid #333;
    white-space: nowrap;
}

.mask-default {
    background-color: rgba(0, 0, 0, 0.7);
    left: 50px;
    top: 30px;
}

.mask-overridden {
    background-color: rgba(46, 139, 87, 1);
    left: 150px;
    top: 70px;
}
</style>

```vue
<template>
    <div class="example-container">
        <OverlayMask class="mask-default">
            기본 OverlayMask (MASK z-index)
        </OverlayMask>

<OverlayMask
            v-z-index="BASE_Z_INDEX_KEY.DIALOG"
            class="mask-overridden"
        >
            재정의된 OverlayMask (DIALOG z-index)
        </OverlayMask>
    </div>
</template>

.mask-default,
.mask-overridden {
    position: absolute;
    color: white;
    font-weight: bold;
    border: 2px solid #333;
    white-space: nowrap;
}

.mask-default {
    background-color: rgba(0, 0, 0, 0.7);
    left: 50px;
    top: 30px;
}

.mask-overridden {
    background-color: rgba(46, 139, 87, 0.8);
    left: 150px;
    top: 70px;
}
</style>
```

이 예제에서:

1. 첫 번째 OverlayMask는 내부적으로 적용된 `BASE_Z_INDEX_KEY.MASK` 값을 사용합니다 (z-index: 10000).
2. 두 번째 OverlayMask는 외부에서 `BASE_Z_INDEX_KEY.DIALOG` 값을 적용하여 내부 값을 재정의합니다 (z-index: 13000).

이런 방식은 다음과 같은 상황에서 유용합니다:

1. 기존 컴포넌트 라이브러리의 컴포넌트를 사용하면서 z-index를 재정의해야 하는 경우
2. 동적으로 컴포넌트의 중첩 순서를 변경해야 하는 경우
3. 특정 화면에서만 컴포넌트의 z-index 값을 일시적으로 변경해야 하는 경우

## 유의사항

1. v-z-index 디렉티브를 사용하기 전에 반드시 z-index 맵을 구성하고 디렉티브를 최상위 파일에 등록해야 합니다.
2. 최상위 파일에 등록하더라도, 파일에서 직접 vZIndex.ts를 import 하면 기본 z-index 값만 적용됩니다.
3. 존재하지 않는 키 값을 사용하면 콘솔에 경고 메시지가 출력되고 z-index가 적용되지 않습니다.
4. z-index 맵의 키 순서는 중요합니다. 객체에서 위에 정의된 키일수록 더 높은 z-index 값을 가집니다.
5. 컴포넌트에 이미 v-z-index가 적용되어 있는 경우, 외부에서 다시 v-z-index를 적용하면 외부 값이 우선합니다.

### File: overlay/toast.md

# Toast

토스트는 사용자에게 작업 결과나 시스템 상태에 대한 간결한 메시지를 사용자의 흐름을 방해하지 않는 선에서 빠르게 전달하는 컴포넌트입니다.
여러 개의 토스트 메시지는 겹치지 않고 화면에 스택 형태로 표시되며, 자동으로 사라지거나, 사용자의 직접 조작으로 닫을 수 있습니다.

const isVisible1 = ref(false);
const isVisible2 = ref(false);
const isVisible3 = ref(false);
const isVisible4 = ref(false);
const isVisible5 = ref(false);
const isVisible6 = ref(false);
const isVisibleTopRight = ref(false);
const isVisibleTopLeft = ref(false);
const isVisibleBottomRight = ref(false);
const isVisibleBottomLeft = ref(false);

const isVisibleCustomElement = ref(false);

</script>

## Basic

<div class="components-example">
    <btn
        type="outlined"
        text="Click Default"
        @click="() => (isVisible1 = true)"
    />
    <btn
        type="outlined"
        text="Click MultiLine"
        @click="() => (isVisible2 = true)"
    />
    <btn
        type="outlined"
        text="Click Title"
        @click="() => (isVisible3 = true)"
    />
    <toast-wrapper>
        <toast v-if="isVisible1" @close="isVisible1 = false" :life-time="3000">
            새로운 폴더를 생성했습니다
        </toast>
        <toast v-if="isVisible2" @close="isVisible2 = false" :life-time="3000">
            토스트는 사용자에게 작업 결과나 시스템 상태에 대한 간결한 메시지를
            사용자의 흐름을 방해하지 않는 선에서 빠르게 전달하는 컴포넌트입니다
        </toast>
        <toast v-if="isVisible3" @close="isVisible3 = false" :life-time="3000">
            <template #title> 라이선스 키 만료 </template>
            <template #default>
                현재 라이선스 키가 만료되어 이용할 수 없습니다. 관리자에게
                문의하세요
            </template>
        </toast>
    </toast-wrapper>

</div>

````vue
<template>
    <btn
        type="outlined"
        text="Click Default"
        @click="() => (isVisible1 = true)"
    />
    <btn
        type="outlined"
        text="Click MultiLine"
        @click="() => (isVisible2 = true)"
    />
    <btn
        type="outlined"
        text="Click Title"
        @click="() => (isVisible3 = true)"
    />

<toast-wrapper>
        <toast v-if="isVisible1" @close="isVisible1 = false" :life-time="3000">
            새로운 폴더를 생성했습니다
        </toast>
        <toast v-if="isVisible2" @close="isVisible2 = false" :life-time="3000">
            토스트는 사용자에게 작업 결과나 시스템 상태에 대한 간결한 메시지를
            사용자의 흐름을 방해하지 않는 선에서 빠르게 전달하는 컴포넌트입니다
        </toast>
        <toast v-if="isVisible3" @close="isVisible3 = false" :life-time="3000">
            <template #title> 라이선스 키 만료 </template>
            <template #default>
                현재 라이선스 키가 만료되어 이용할 수 없습니다. 관리자에게
                문의하세요
            </template>
        </toast>
    </toast-wrapper>
</template>

const isVisible1 = ref(false);
const isVisible2 = ref(false);
const isVisible3 = ref(false);
</script>

## Props | 이름 | 타입 | 기본값 | 설명 | | ------------ |
-------------------------------------------------------------------- |
-------------- | ---------------------------------------------- | | type |
`'default'` \| `'success'` \| `'warning'` \| `'error'` | `'default'` | 토스트
상태(아이콘/색상) | | icon | `IconTypes` | - | 상태별 기본 아이콘 대신 사용할
커스텀 아이콘 | | position | `'top-left'` \| `'top-right'` \| `'bottom-left'` \|
`'bottom-right'` | `'bottom-right'` | 토스트가 표시될 화면 위치 | | lifeTime |
`number` | `0` | 자동 닫힘 시간(ms). 0이면 자동으로 닫히지 않음 | | showCloseBtn
| `boolean` | `true` | 닫기(×) 버튼 표시 여부 | ## Type 상태값을 아이콘으로
표시할 수 있습니다

<div class="components-example">
    <btn
        type="outlined"
        text="Click Success"
        @click="() => (isVisible4 = true)"
    />
    <btn
        type="outlined"
        text="Click Warning"
        @click="() => (isVisible5 = true)"
    />
    <btn
        type="outlined"
        text="Click Error"
        @click="() => (isVisible6 = true)"
    />
    <toast-wrapper>
        <toast v-if="isVisible4" @close="isVisible4 = false" :life-time="3000" type="success">
            <template #title> 용량 한도에 근접했습니다</template>
            <template #default>
                <p>
                현재 사용중인 저장공간이 90%를 초과 했습니다
                정리가 필요할 수 있어요 <span class="text-[--primary-800] underline">정리하기</span>
                </p>
            </template>
        </toast>
    </toast-wrapper>
    <toast-wrapper>
        <toast v-if="isVisible5" @close="isVisible5 = false" :life-time="3000" type="warning">
            <template #title> 용량 한도에 근접했습니다</template>
            <template #default>
                <p>
                현재 사용중인 저장공간이 90%를 초과 했습니다
                정리가 필요할 수 있어요 <span class="text-[--primary-800] underline">정리하기</span>
                </p>
            </template>
        </toast>
    </toast-wrapper>
    <toast-wrapper>
        <toast v-if="isVisible6" @close="isVisible6 = false" :life-time="3000" type="error">
            <template #title> 용량 한도에 근접했습니다</template>
            <template #default>
                <p>
                현재 사용중인 저장공간이 90%를 초과 했습니다
                정리가 필요할 수 있어요 <span class="text-[--primary-800] underline">정리하기</span>
                </p>
            </template>
        </toast>
    </toast-wrapper>

</div>

```vue
<template>
    <btn
        type="outlined"
        text="Click Success"
        @click="() => (isVisible4 = true)"
    />
    <btn
        type="outlined"
        text="Click Warning"
        @click="() => (isVisible5 = true)"
    />
    <btn
        type="outlined"
        text="Click Error"
        @click="() => (isVisible6 = true)"
    />
    <toast-wrapper>
        <toast
            v-if="isVisible4"
            @close="isVisible4 = false"
            :life-time="3000"
            type="success"
        >
            <template #title> 용량 한도에 근접했습니다</template>
            <template #default>
                <p>
                    현재 사용중인 저장공간이 90%를 초과 했습니다 정리가 필요할
                    수 있어요
                    <span class="text-[--primary-800] underline">정리하기</span>
                </p>
            </template>
        </toast>
    </toast-wrapper>
    <toast-wrapper>
        <toast
            v-if="isVisible5"
            @close="isVisible5 = false"
            :life-time="3000"
            type="warning"
        >
            <template #title> 용량 한도에 근접했습니다</template>
            <template #default>
                <p>
                    현재 사용중인 저장공간이 90%를 초과 했습니다 정리가 필요할
                    수 있어요
                    <span class="text-[--primary-800] underline">정리하기</span>
                </p>
            </template>
        </toast>
    </toast-wrapper>
    <toast-wrapper>
        <toast
            v-if="isVisible6"
            @close="isVisible6 = false"
            :life-time="3000"
            type="error"
        >
            <template #title> 용량 한도에 근접했습니다</template>
            <template #default>
                <p>
                    현재 사용중인 저장공간이 90%를 초과 했습니다 정리가 필요할
                    수 있어요
                    <span class="text-[--primary-800] underline">정리하기</span>
                </p>
            </template>
        </toast>
    </toast-wrapper>
</template>

const isVisible4 = ref(false);
const isVisible5 = ref(false);
const isVisible6 = ref(false);
</script>
````

## 다양한 위치의 토스트

<div class="components-example">
    <btn type="outlined" text="Top Right" @click="() => (isVisibleTopRight = true)" />
    <btn type="outlined" text="Top Left" @click="() => (isVisibleTopLeft = true)" />
    <btn type="outlined" text="Bottom Right" @click="() => (isVisibleBottomRight = true)" />
    <btn type="outlined" text="Bottom Left" @click="() => (isVisibleBottomLeft = true)" />
    <toast-wrapper>
        <toast v-if="isVisibleTopRight" @close="isVisibleTopRight = false" :life-time="2000" position="top-right">
            Top Right 위치의 토스트입니다.
        </toast>
        <toast v-if="isVisibleTopLeft" @close="isVisibleTopLeft = false" :life-time="2000" position="top-left">
            Top Left 위치의 토스트입니다.
        </toast>
        <toast v-if="isVisibleBottomRight" @close="isVisibleBottomRight = false" :life-time="2000" position="bottom-right">
            Bottom Right 위치의 토스트입니다.
        </toast>
        <toast v-if="isVisibleBottomLeft" @close="isVisibleBottomLeft = false" :life-time="2000" position="bottom-left">
            Bottom Left 위치의 토스트입니다.
        </toast>
    </toast-wrapper>
</div>

```vue
<template>
    <btn
        type="outlined"
        text="Top Right"
        @click="() => (isVisibleTopRight = true)"
    />
    <btn
        type="outlined"
        text="Top Left"
        @click="() => (isVisibleTopLeft = true)"
    />
    <btn
        type="outlined"
        text="Bottom Right"
        @click="() => (isVisibleBottomRight = true)"
    />
    <btn
        type="outlined"
        text="Bottom Left"
        @click="() => (isVisibleBottomLeft = true)"
    />
    <toast-wrapper>
        <toast
            v-if="isVisibleTopRight"
            @close="isVisibleTopRight = false"
            :life-time="2000"
            position="top-right"
        >
            Top Right 위치의 토스트입니다.
        </toast>
        <toast
            v-if="isVisibleTopLeft"
            @close="isVisibleTopLeft = false"
            :life-time="2000"
            position="top-left"
        >
            Top Left 위치의 토스트입니다.
        </toast>
        <toast
            v-if="isVisibleBottomRight"
            @close="isVisibleBottomRight = false"
            :life-time="2000"
            position="bottom-right"
        >
            Bottom Right 위치의 토스트입니다.
        </toast>
        <toast
            v-if="isVisibleBottomLeft"
            @close="isVisibleBottomLeft = false"
            :life-time="2000"
            position="bottom-left"
        >
            Bottom Left 위치의 토스트입니다.
        </toast>
    </toast-wrapper>
</template>

const isVisibleTopRight = ref(false);
const isVisibleTopLeft = ref(false);
const isVisibleBottomRight = ref(false);
const isVisibleBottomLeft = ref(false);
</script>
```

## Custom Element

<div class="components-example">
    <btn type="outlined" text="Click" @click="() => (isVisibleCustomElement = true)" />
    <toast-wrapper>
        <toast v-if="isVisibleCustomElement" @close="isVisibleCustomElement = false" :life-time="0" :show-close-btn=false>
            <template #title> 업데이트가 준비되었습니다</template>
            <template #default>
                <div class="flex flex-col gap-4">
                    <p>
                    이번 업데이트에서는 새로운 사용자 정의 대시보드 기능이 추가되어, 원하는 형태로 대시보드를 구성하고 저장할 수 있게 되었습니다
                    </p>
                    <div class="flex gap-2">
                        <btn type="outlined" text="다음에" />
                        <btn type="primary-filled" text="업데이트" />
                    </div>
                </div>
            </template>
        </toast>
    </toast-wrapper>

</div>

```vue
<template>
    <div>
        <btn
            type="outlined"
            text="Click"
            @click="() => (isVisibleCustomElement = true)"
        />
        <toast-wrapper>
            <toast
                v-if="isVisibleCustomElement"
                @close="isVisibleCustomElement = false"
                :life-time="3000"
                :show-close-btn="false"
            >
                <template #title> 업데이트가 준비되었습니다</template>
                <template #default>
                    <div class="flex flex-col gap-4">
                        <p>
                            이번 업데이트에서는 새로운 사용자 정의 대시보드
                            기능이 추가되어, 원하는 형태로 대시보드를 구성하고
                            저장할 수 있게 되었습니다
                        </p>
                        <div class="flex gap-2">
                            <btn type="outlined" text="다음에" />
                            <btn type="primary-filled" text="업데이트" />
                        </div>
                    </div>
                </template>
            </toast>
        </toast-wrapper>
    </div>
</template>

const isVisibleCustomElement = ref(false);
</script>
```

## API

### Props

| 이름         | 타입                                                         | 기본값         | 설명                                                 |
| ------------ | ------------------------------------------------------------ | -------------- | ---------------------------------------------------- |
| type         | 'default' \| 'success' \| 'warning' \| 'error'               | 'default'      | 토스트의 상태(아이콘/색상)                           |
| icon         | `IconTypes`                                                  | -              | 상태별 기본 아이콘 대신 사용할 커스텀 아이콘         |
| position     | 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' | 'bottom-right' | 토스트가 표시될 화면 위치                            |
| lifeTime     | number                                                       | 0              | 자동으로 닫히는 시간(ms). 0이면 자동으로 닫히지 않음 |
| showCloseBtn | boolean                                                      | true           | 닫기(×) 버튼 표시 여부                               |

### 슬롯

-   `#title`: 토스트 상단에 제목을 표시할 때 사용합니다.
-   기본 슬롯: 토스트의 본문 메시지를 표시합니다.

### 이벤트

-   `@close`: 토스트가 닫힐 때 발생합니다.

### 상세 설명

-   **type**: 토스트의 상태에 따라 아이콘과 색상이 달라집니다.  
    `'success'`는 성공, `'warning'`은 경고, `'error'`는 오류, `'default'`는 일반 메시지에 사용합니다.
-   **position**: 여러 개의 토스트가 동시에 표시될 때, 화면의 어느 위치에 쌓일지 결정합니다.
-   **lifeTime**: 지정한 시간(ms) 후 자동으로 토스트가 사라집니다. 0이면 자동으로 닫히지 않고, 사용자가 직접 닫아야 합니다.
-   **showCloseBtn**: 닫기 버튼(×)의 표시 여부를 제어합니다.
-   **슬롯**:
    -   `#title` 슬롯을 사용하면 제목을 강조할 수 있습니다.
    -   기본 슬롯에는 메시지 본문을 작성합니다.
-   **@close 이벤트**: 토스트가 닫힐 때 실행할 동작을 지정할 수 있습니다.

## Menu

### File: menu/menu.md

# Menu

const index1 = ref(-1);
const index2 = ref(-1);
const index3 = ref(-1);
const index4 = ref(-1);
const index5 = ref(-1);

const items = [
      { label: "One", value: 1 },
      { label: "Two", value: 2 },
      { label: "Three", value: 3 },
      { label: "Four", value: 4 },
      { label: "Five", value: 5 },
      { label: "Six", value: 6 },
    ];

const items1 = ref(JSON.parse(JSON.stringify(items)));
const items2 = ref(JSON.parse(JSON.stringify(items)));
const items3 = ref(JSON.parse(JSON.stringify(items)));
const items4 = ref(JSON.parse(JSON.stringify(items)));
const items5 = ref(JSON.parse(JSON.stringify(items)));

const trailingLabelItems = ref([
      { label: "UnDo", value: "UnDo", trailingLabel: "⌘+Z"},
      { label: "Search", value: "Search", trailingLabel: "⌘+F"},
      { label: "Copy", value: "Copy", trailingLabel: "⌘+C"},
      { label: "Paste", value: "Paste", trailingLabel: "⌘+V"},

]);

const iconItems = [
      { label: "One", value: 1, leadingIcon: ICON_TYPE.cluster },
      { label: "Two", value: 2, leadingIcon: ICON_TYPE.nodes },
      { label: "Three", value: 3, leadingIcon: ICON_TYPE.storage },
      { label: "Four", value: 4, leadingIcon: ICON_TYPE.deployment },
      { label: "Five", value: 5, leadingIcon: ICON_TYPE.replicaset },
      { label: "Six", value: 6, leadingIcon: ICON_TYPE.server },
    ];

const errorTextItems =  [
      { label: "One", value: 1, leadingIcon: ICON_TYPE.cluster },
      { label: "Two", value: 2, leadingIcon: ICON_TYPE.nodes },
      { label: "Delete", value: 3, leadingIcon: ICON_TYPE.storage , type: 'error-text', leadingBadge: { text: '일일' },}
];

const disabledItems =  [{ label: "One", value: 1, leadingIcon: ICON_TYPE.cluster },
      { label: "Two", value: 2, leadingIcon: ICON_TYPE.nodes },
      { label: "Disabled", value: 3, leadingIcon: ICON_TYPE.storage, disabled: true }
];

const items1OnGroup =  [
      { label: "New", value: "New", leadingIcon: ICON_TYPE.add },
      { label: "Search", value: "Search", leadingIcon: ICON_TYPE.search },
];

const items2OnGroup =  [
      { label: "Settings", value: "Settings", leadingIcon: ICON_TYPE.settings },
      { label: "Logout", value: "Logout", leadingIcon: ICON_TYPE.external },
];

const hierarchyItems = ref([
    { label: "One", value: 1},
    { label: "Two", value: 2},
    { label: "Three", value: 3,
        items: [
            { label: "Three-One", value: 31},
            { label: "Three-Two",  value: 32, items: [
                                { label: "Three-Two-One", value: 331},
                                { label: "Three-Two-Two", value: 332},
                                { label: "Three-Two-Three",  value: 323}
                            ]},
            { label: "Three-Three", value: 33, items: [
                    { label: "Three-Three-One", value: 331},
                    { label: "Three-Three-Two", value: 332},
                    { label: "Three-Three-Three", value: 333}
                ] }
        ] },
]);

const items10 = ref([
      { label: "One", value: 1 },
      { label: "Two", value: 2 },
      { label: "Three", value: 3 },
      { label: "Four", value: 4 },
      { label: "Five", value: 5 },
      { label: "Six", value: 6 },
      { label: "Seven", value: 7 },
      { label: "Eight", value: 8 },
      { label: "Nine", value: 9 },
      { label: "Ten", value: 1 },
]);

const badgeItems = ref([
    {
        label: '호출건수',
        value: 'hitCount',
        leadingBadge: { text: '시간당' },
        leadingIcon: ICON_TYPE.daemonset,
    },
    {
        label: '방문자수',
        value: 'visitCount',
        leadingBadge: { text: '일일' },
        leadingIcon: ICON_TYPE.user,
    },
    {
        label: '동시사용자수',
        value: 'concurrentUser',
        leadingBadge: { text: '시간당' },
        leadingIcon: ICON_TYPE.cluster,
    },
]);

const tooltipItems = ref([
    {
        label: '호출건수',
        value: 'hitCount',
        tooltip: {
            text: '호출건수 입니다',
            placement: 'right',
        },
    },
    {
        label: '방문자수',
        value: 'visitCount',
        tooltip: {
            text: '방문자수 입니다',
            placement: 'right',
        },
    },
    {
        label: '동시사용자수',
        value: 'concurrentUser',
        tooltip: {
            text: '동시사용자수 입니다',
            placement: 'right',
        },
    },
]);

const selectedValue = ref(1);
const onClickIndex = (index: number) => {
}
</script>

## Type (default)

<div class="components-example">
    <menu-box class="w-48">
        <menu-container v-model=selectedValue :items="items1"  @select:index="(index) => console.log('select:index', index)"/>
    </menu-box>
</div>

```vue
<script setup lang="ts">
import { MenuContainer, MenuBox } from '@jennifersoft/vue-components-v2';
import { ref } from 'vue';

const items = [
    { label: 'One', value: 1 },
    { label: 'Two', value: 2 },
    { label: 'Three', value: 3 },
    { label: 'Four', value: 4 },
    { label: 'Five', value: 5 },
    { label: 'Six', value: 6 },
];
const selectedValue = ref(1);
</script>
<template>
    <menu-box class="w-48">
        <menu-container
            v-model="selectedValue"
            :items="items"
            @select:index="(index) => console.log('select:index', index)"
        />
    </menu-box>
</template>
```

## Props

| 이름              | 타입                         | 필수 여부 | 기본값      | 설명                         |
| ----------------- | ---------------------------- | --------- | ----------- | ---------------------------- |
| items             | `Array<MenuItem>`            | Yes       | -           | 메뉴 항목 배열               |
| menuType          | `'default'` \| `'checkmark'` | No        | `'default'` | 메뉴 스타일 타입             |
| highlightOnSelect | `boolean`                    | No        | -           | 선택 시 항목 하이라이트 여부 |

### Item 타입 정의

메뉴 `items`는 다음과 같은 형태를 갖습니다. 중첩 메뉴를 위해 `items`(동일 타입 배열)를 선택적으로 포함할 수 있습니다.

```ts
type MenuItemValue = string | number | boolean;

type MenuItem = {
    value: MenuItemValue;
    label: string;
    leadingIcon?: IconTypes;
    leadingBadge?: BadgeProps;
    trailingBadge?: BadgeProps;
    trailingLabel?: string;
    type?: 'text' | 'error-text';
    disabled?: boolean;
    tooltip?: TooltipProps;
    items?: MenuItem[]; // 서브 메뉴 (선택)
};
```

## v-model

| 이름   | 타입                                  | 기본값 | 설명                             |
| ------ | ------------------------------------- | ------ | -------------------------------- |
| (기본) | `string \| number \| boolean \| null` | `null` | 선택된 값(항목의 `value`) 바인딩 |

## 이벤트

| 이름         | 파라미터        | 설명                          |
| ------------ | --------------- | ----------------------------- |
| select:index | `index: number` | 항목 클릭 시 해당 인덱스 전달 |

## Type (default) with header

<div class="components-example">
    <menu-box class="w-48">
        <menu-container :items="items2"  >
          <template #header>
            <span>Header</span>
          </template>
        </menu-container>
    </menu-box>
</div>

```vue
<script setup lang="ts">
import { MenuContainer, MenuBox } from '@jennifersoft/vue-components-v2';
import { ref } from 'vue';

const items = [
    { label: 'One', value: 1 },
    { label: 'Two', value: 2 },
    { label: 'Three', value: 3 },
    { label: 'Four', value: 4 },
    { label: 'Five', value: 5 },
    { label: 'Six', value: 6 },
];
</script>
<template>
    <menu-box class="w-48">
        <menu-container :items="items2">
            <template #header>
                <span>Header</span>
            </template>
        </menu-container>
    </menu-box>
</template>
```

## Type (default) with trailingLabel

```vue
<script setup lang="ts">
import { MenuContainer, MenuBox } from '@jennifersoft/vue-components-v2';
import { ref } from 'vue';

const trailingLabelItems = ref([
    { label: 'UnDo', value: 'UnDo', trailingLabel: '⌘+Z' },
    { label: 'Search', value: 'Search', trailingLabel: '⌘+F' },
    { label: 'Copy', value: 'Copy', trailingLabel: '⌘+C' },
    { label: 'Paste', value: 'Paste', trailingLabel: '⌘+V' },
]);
</script>
<template>
    <menu-box class="w-48">
        <menu-container :items="trailingLabelItems" />
    </menu-box>
</template>
```

## Type (default) with submenu

```vue
<script setup lang="ts">
import { MenuContainer, MenuBox } from '@jennifersoft/vue-components-v2';
import { ref } from 'vue';

const hierarchyItems = ref([
    { label: 'One', value: 1 },
    { label: 'Two', value: 2 },
    {
        label: 'Three',
        value: 3,
        items: [
            { label: 'Three-One', value: 31 },
            {
                label: 'Three-Two',
                value: 32,
                items: [
                    { label: 'Three-Two-One', value: 331 },
                    { label: 'Three-Two-Two', value: 332 },
                    { label: 'Three-Two-Three', value: 323 },
                ],
            },
            {
                label: 'Three-Three',
                value: 33,
                items: [
                    { label: 'Three-Three-One', value: 331 },
                    { label: 'Three-Three-Two', value: 332 },
                    { label: 'Three-Three-Three', value: 333 },
                ],
            },
        ],
    },
]);
</script>
<template>
    <menu-box class="w-48">
        <menu-container :items="hierarchyItems" />
    </menu-box>
</template>
```

## Type (default) with scroll

```vue
<script setup lang="ts">
import { MenuContainer, MenuBox } from '@jennifersoft/vue-components-v2';

## Type (default) with leading-icon

```vue
<script setup lang="ts">
import {
    MenuContainer,
    MenuBox,
    ICON_TYPE,
} from '@jennifersoft/vue-components-v2';
import { ref } from 'vue';

const iconItems = [
    { label: 'One', value: 1, leadingIcon: ICON_TYPE.cluster },
    { label: 'Two', value: 2, leadingIcon: ICON_TYPE.nodes },
    { label: 'Three', value: 3, leadingIcon: ICON_TYPE.storage },
    { label: 'Four', value: 4, leadingIcon: ICON_TYPE.deployment },
    { label: 'Five', value: 5, leadingIcon: ICON_TYPE.replicaset },
    { label: 'Six', value: 6, leadingIcon: ICON_TYPE.server },
];
</script>
<template>
    <menu-box class="w-48">
        <menu-container :items="items" />
    </menu-box>
</template>
```

## Type (default) with error-text

```vue
<script setup lang="ts">
import {
    MenuContainer,
    MenuBox,
    ICON_TYPE,
} from '@jennifersoft/vue-components-v2';
import { ref } from 'vue';

const errorTextItems = [
    { label: 'One', value: 1, leadingIcon: ICON_TYPE.cluster },
    { label: 'Two', value: 2, leadingIcon: ICON_TYPE.nodes },
    {
        label: 'Delete',
        value: 3,
        leadingIcon: ICON_TYPE.storage,
        leadingBadge: { text: '일일' },
        type: 'error-text',
    },
];
</script>
<template>
    <menu-box class="w-48">
        <menu-container :items="errorTextItems" />
    </menu-box>
</template>
```

## Type (default) with disabled

```vue
<script setup lang="ts">
import {
    MenuContainer,
    MenuBox,
    ICON_TYPE,
} from '@jennifersoft/vue-components-v2';
import { ref } from 'vue';

const disabledItems = [
    { label: 'One', value: 1, leadingIcon: ICON_TYPE.cluster },
    { label: 'Two', value: 2, leadingIcon: ICON_TYPE.nodes },
    {
        label: 'Disabled',
        value: 3,
        leadingIcon: ICON_TYPE.storage,
        disabled: true,
    },
];
</script>
<template>
    <menu-box class="w-48">
        <menu-container :items="disabledItems" />
    </menu-box>
</template>
```

## Type (default) with group, header

<div class="components-example">
    <menu-box class="w-48">
        <menu-container :items="items1OnGroup">
            <template #header>
                <span>Documents</span>
            </template>
        </menu-container>
        <menu-container :items="items2OnGroup">
            <template #header>
                <span>Profile</span>
            </template>
        </menu-container>
    </menu-box>
</div>

```vue
<script setup lang="ts">
import {
    ICON_TYPE,
    MenuContainer,
    MenuBox,
} from '@jennifersoft/vue-components-v2';
import { ref } from 'vue';

const items1OnGroup = [
    { label: 'New', value: 'New', leadingIcon: ICON_TYPE.add },
    { label: 'Search', value: 'Search', leadingIcon: ICON_TYPE.search },
];

const items2OnGroup = [
    { label: 'Settings', value: 'Settings', leadingIcon: ICON_TYPE.settings },
    { label: 'Logout', value: 'Logout', leadingIcon: ICON_TYPE.external },
];
</script>
<template>
    <menu-box class="w-48">
        <menu-container :items="items1OnGroup">
            <template #header>
                <span>Documents</span>
            </template>
        </menu-container>
        <menu-container :items="items2OnGroup">
            <template #header>
                <span>Profile</span>
            </template>
        </menu-container>
    </menu-box>
</template>
```

## Type (default) with badge, leading-icon

<div class="components-example">
    <menu-box class="w-48">
        <menu-container  :items="badgeItems">
            <template #header>
                <span>Domain A</span>
            </template>
        </menu-container>
        <menu-container  :items="badgeItems">
            <template #header>
                <span>Domain B</span>
            </template>
        </menu-container>
    </menu-box>
</div>

```vue
<script setup lang="ts">
const badgeItems = ref([
    {
        label: '호출건수',
        value: 'hitCount',
        leadingBadge: { text: '시간당' },
        leadingIcon: ICON_TYPE.daemonset,
    },
    {
        label: '방문자수',
        value: 'visitCount',
        leadingBadge: { text: '일일' },
        leadingIcon: ICON_TYPE.user,
    },
    {
        label: '동시사용자수',
        value: 'concurrentUser',
        leadingBadge: { text: '시간당' },
        leadingIcon: ICON_TYPE.cluster,
    },
]);
</script>
<template>
    <menu-box class="w-48">
        <menu-container :items="badgeItems">
            <template #header>
                <span>Domain A</span>
            </template>
        </menu-container>
        <menu-container :items="badgeItems">
            <template #header>
                <span>Domain B</span>
            </template>
        </menu-container>
    </menu-box>
</template>
```

## Type (default) with tooltip

```vue
<script setup lang="ts">
const tooltipItems = ref([
    {
        label: '호출건수',
        value: 'hitCount',
        tooltip: {
            text: '호출건수 입니다',
            placement: 'right',
        },
    },
    {
        label: '방문자수',
        value: 'visitCount',
        tooltip: {
            text: '방문자수 입니다',
            placement: 'right',
        },
    },
    {
        label: '동시사용자수',
        value: 'concurrentUser',
        tooltip: {
            text: '동시사용자수 입니다',
            placement: 'right',
        },
    },
]);
</script>
<template>
    <menu-box class="w-48">
        <menu-container :items="tooltipItems" />
    </menu-box>
</template>
```

## Type (checkmark)

```vue
<script setup lang="ts">
import { MenuContainer, MenuBox } from '@jennifersoft/vue-components-v2';
import { ref } from 'vue';

const items = [
    { label: 'One', value: 1 },
    { label: 'Two', value: 2 },
    { label: 'Three', value: 3 },
    { label: 'Four', value: 4 },
    { label: 'Five', value: 5 },
    { label: 'Six', value: 6 },
];
const selectedValue = ref(1);
</script>
<template>
    <menu-box class="w-48">
        <menu-container
            menu-type="checkmark"
            v-model="selectedValue"
            :items="items"
        />
    </menu-box>
</template>
```

### File: menu/multi-menu.md

# MultiMenu

const items1 = ref(JSON.parse(JSON.stringify(items)));
const items2 = ref(JSON.parse(JSON.stringify(items)));

const checkedList1 = ref([]);
const checkedList2 = ref([]);

</script>

## Type (checkbox)

<div class="components-example">
    <menu-box class="w-48">
        <multi-menu-container menu-type="checkbox" v-model="checkedList1" :items="items1" @select:index="(index) => console.log(index)" />
    </menu-box>
</div>

```vue
<script setup lang="ts">
import { MultiMenuContainer, MenuBox } from "@jennifersoft/vue-components-v2";

const items1 = [
    { label: "One", value: 1 },
    { label: "Two", value: 2 },
    { label: "Three", value: 3 },
    { label: "Four", value: 4 },
    { label: "Five", value: 5 },
    { label: "Six", value: 6 },
];
const checkedList1 = ref([]);
</script>
<template>
  <menu-box class="w-48">
      <multi-menu-container menu-type="checkbox" v-model="checkedList1" :items="items1" @select:index="(index) => console.log(index)" />
  </menu-box>
</template>
```

## Props

| 이름    | 타입                         | 필수 여부 | 기본값       | 설명                     |
| ------- | ---------------------------- | --------- | ------------ | ------------------------ |
| items   | `Array<MenuItem>`            | Yes       | -            | 메뉴 항목 배열           |
| menuType| `'checkbox'` \| `'switch'` | No        | `'checkbox'` | 메뉴 타입(선택 방식)     |

## v-model

| 이름   | 타입                                         | 기본값 | 설명                       |
| ------ | -------------------------------------------- | ------ | -------------------------- |
| (기본) | `Array<string \| number \| boolean>`        | `[]`   | 선택된 값 목록 바인딩       |

## 이벤트

### Item 타입 정의

```ts
type MenuItemValue = string | number | boolean;

## Type (switch)

```vue
<script setup lang="ts">
import { MenuContainer, MenuBox } from "@jennifersoft/vue-components-v2";
import { ref } from "vue";

const items2 = [
    { label: "One", value: 1 },
    { label: "Two", value: 2 },
    { label: "Three", value: 3 },
    { label: "Four", value: 4 },
    { label: "Five", value: 5 },
    { label: "Six", value: 6 },
];
const checkedList2 = ref([]);
</script>
<template>
  <menu-box class="w-48">
      <multi-menu-container menu-type="switch" v-model="checkedList2" :items="items2" />
  </menu-box>
</template>
```

### File: menu/dropdown.md

# Dropdown

const items = [
      { label: "One", value: 1 },
      { label: "Two", value: 2, tooltip: { text: "기본 툴팁 예시입니다." } },
      { label: "Three", value: 3, tooltip: { text: "툴팁 위치를 지정할 수 있습니다.", placement: "right" } },
      { label: "Four", value: 4, tooltip: { text: "툴팁의 최대 너비를 지정할 수 있습니다. 내용이 길어지면 자동으로 줄바꿈됩니다.", maxWidth: 200 } },
      { label: "Five", value: 5, tooltip: { text: "툴팁 스타일을 직접 지정할 수 있습니다.", overlayStyle: { color: 'skyblue' } } },
      { label: "Six", value: 6 },
    ];

const simpleItems = [
    { label: 'One', value: 1 },
    { label: 'Two', value: 2 },
    { label: 'Three', value: 3 },
    { label: 'Four', value: 4 },
    { label: 'Five', value: 5 },
    { label: 'Six', value: 6 },
];

const chartItems = [
    {
        label: '시계열 차트',
        value: 'time-series',
        leadingIcon: ICON_TYPE.lineChart,
        leadingBadge: { text: '최근 10분' }
    },
    {
        label: '스피드바 차트',
        value: 'speedbar',
        leadingIcon: ICON_TYPE.speedBar,
        leadingBadge: { text: '스냅샷' }
    },
];

const selectedItemValue = ref();

const selectedMetric = ref('TPS');
const metrics = 
[
    {
        "label": "액티브 APM 에이전트 수",
        "value": "ACTIVE_APM_AGENT_COUNT"
    },
    {
        "label": "액티브 DB Connection 수",
        "value": "ACTIVE_DB_CONNECTION_COUNT"
    },
    {
        "label": "액티브 서비스 수",
        "value": "ACTIVE_SERVICE_COUNT"
    },
    {
        "label": "Bad Response 액티브 서비스 수",
        "value": "BAD_RESPONSE_ACTIVE_SERVICE_COUNT"
    },
    {
        "label": "Configured DB Connection 수",
        "value": "CONFIGURED_DB_CONNECTION_COUNT"
    },
    {
        "label": "CPU Limit (mCores)",
        "value": "CPU_LIMIT"
    },
    {
        "label": "CPU Request (mCores)",
        "value": "CPU_REQUEST"
    },
    {
        "label": "CPU Usage (mCores)",
        "value": "CPU_USAGE"
    },
    {
        "label": "CPU Usage by Limit (%)",
        "value": "CPU_USAGE_PERCENT_BY_LIMIT"
    },
    {
        "label": "CPU Usage by Request (%)",
        "value": "CPU_USAGE_PERCENT_BY_REQUEST"
    },
    {
        "label": "External Call 시간 (ms)",
        "value": "EXTERNAL_CALL_TIME_MS"
    },
    {
        "label": "트랜잭션당 External Call 시간 (ms)",
        "value": "EXTERNAL_CALL_TIME_PER_TRANSACTION_MS"
    },
    {
        "label": "Fetch 시간 (ms)",
        "value": "FETCH_TIME_MS"
    },
    {
        "label": "트랜잭션당 Fetch 시간 (ms)",
        "value": "FETCH_TIME_PER_TRANSACTION_MS"
    },
    {
        "label": "Idle DB Connection 수",
        "value": "IDLE_DB_CONNECTION_COUNT"
    },
    {
        "label": "Memory Limit (Bytes)",
        "value": "MEMORY_LIMIT"
    },
    {
        "label": "Memory Request (Bytes)",
        "value": "MEMORY_REQUEST"
    },
    {
        "label": "Memory RSS (Bytes)",
        "value": "MEMORY_RSS"
    },
    {
        "label": "Memory Usage (Bytes)",
        "value": "MEMORY_USAGE"
    },
    {
        "label": "Memory Usage by Limit (%)",
        "value": "MEMORY_USAGE_PERCENT_BY_LIMIT"
    },
    {
        "label": "Memory Usage by Request (%)",
        "value": "MEMORY_USAGE_PERCENT_BY_REQUEST"
    },
    {
        "label": "Memory Working Set (Bytes)",
        "value": "MEMORY_WORKING_SET"
    },
    {
        "label": "Memory Working Set by Limit (%)",
        "value": "MEMORY_WORKING_SET_PERCENT_BY_LIMIT"
    },
    {
        "label": "Memory Working Set by Request (%)",
        "value": "MEMORY_WORKING_SET_PERCENT_BY_REQUEST"
    },
    {
        "label": "트랜잭션당 Method 시간 (ms)",
        "value": "METHOD_TIME_PER_TRANSACTION_MS"
    },
    {
        "label": "Network Rx (Bytes/s)",
        "value": "NETWORK_RX"
    },
    {
        "label": "Network Tx (Bytes/s)",
        "value": "NETWORK_TX"
    },
    {
        "label": "Network Rx Dropped (Packets/s)",
        "value": "PACKET_DROP_RX"
    },
    {
        "label": "Network Tx Dropped (Packets/s)",
        "value": "PACKET_DROP_TX"
    },
    {
        "label": "Pod 수",
        "value": "POD_COUNT"
    },
    {
        "label": "응답시간 (ms)",
        "value": "RESPONSE_TIME_MS"
    },
    {
        "label": "SQL 시간 (ms)",
        "value": "SQL_TIME_MS"
    },
    {
        "label": "트랜잭션당 SQL 시간 (ms)",
        "value": "SQL_TIME_PER_TRANSACTION_MS"
    },
    {
        "label": "TPS",
        "value": "TPS"
    },
    {
        "label": "Volume Capacity (Bytes)",
        "value": "VOLUME_CAPACITY"
    },
    {
        "label": "Volume Usage (Bytes)",
        "value": "VOLUME_USAGE"
    }
]

</script>

## Basic

Dropdown은 선택한 아이템의 양방향 바인딩을 위해 v-model 로 함께 사용됩니다.
선택된 값이 없다면 placeholder의 내용이 표시됩니다.
Dropdown을 선택하면 [Menu](./menu) 가 표시됩니다.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { Dropdown } from '@jennifersoft/vue-components-v2';

const selectedItemValue = ref();
const items1 = [
    { label: 'One', value: 1 },
    { label: 'Two', value: 2, tooltip: { text: '기본 툴팁 예시입니다.' } },
    {
        label: 'Three',
        value: 3,
        tooltip: {
            text: '툴팁 위치를 지정할 수 있습니다.',
            placement: 'right',
        },
    },
    {
        label: 'Four',
        value: 4,
        tooltip: {
            text: '툴팁의 최대 너비를 지정할 수 있습니다. 내용이 길어지면 자동으로 줄바꿈됩니다.',
            maxWidth: 200,
        },
    },
    {
        label: 'Five',
        value: 5,
        tooltip: {
            text: '툴팁 스타일을 직접 지정할 수 있습니다.',
            overlayStyle: { color: 'skyblue' },
        },
    },
    { label: 'Six', value: 6 },
];
</script>
<template>
    <dropdown
        class="w-40"
        v-model="selectedItemValue"
        :items="items1"
        placeholder="Select a item"
    />
</template>
```

## Props

| 이름                        | 타입                                                                                                                                                                                           | 기본값       | 설명                                                     |
| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | -------------------------------------------------------- |
| items                       | `Array<TOption>`                                                                                                                                                                               | (필수)       | 드롭다운에 표시할 항목 목록                              |
| v-model / selected-value    | `string \| number \| boolean \| null`                                                                                                                                                          | `null`       | 선택된 값(양방향 바인딩)                                 |
| placeholder                 | `string`                                                                                                                                                                                       | `''`         | 선택된 값이 없을 때 표시할 텍스트                        |
| size                        | `'large'` \| `'medium'` \| `'small'`                                                                                                                                                           | `'medium'`   | 드롭다운 버튼 및 목록의 크기                             |
| dropdown-type               | `'contained'` \| `'outlined'`                                                                                                                                                                  | `'outlined'` | 드롭다운 스타일                                          |
| menu-type                   | `'default'` \| `'checkbox'` \| `'radio'`                                                                                                                                                       | `'default'`  | 메뉴 컨테이너 타입                                       |
| disabled                    | `boolean`                                                                                                                                                                                      | `false`      | 비활성화 여부                                            |
| visible-rows                | `number`                                                                                                                                                                                       | `9.35`       | 표시할 최대 행 개수(스크롤 발생)                         |
| overlay-style               | `Partial<CSSStyleDeclaration>`                                                                                                                                                                 | -            | 드롭다운 팝업(리스트) 영역에 적용할 인라인 스타일 객체   |
| close-when-position-changed | `boolean`                                                                                                                                                                                      | `false`      | 버튼 위치 변경 시 자동으로 닫힘                          |
| z-index-key                 | `'toast'` \| `'tooltip'` \| `'menu'` \| `'dialog'` \| `'modal'` \| `'drawer'` \| `'mask'`                                                                                                      | `'menu'`     | 팝업 레이어의 z-index 그룹 키                            |
| label-tooltip-placement     | `'top'` \| `'top-left'` \| `'top-right'` \| `'bottom'` \| `'bottom-left'` \| `'bottom-right'` \| `'left'` \| `'right'` \| `'left-top'` \| `'left-bottom'` \| `'right-top'` \| `'right-bottom'` | -            | 드롭다운 라벨에 표시할 툴팁의 위치 (설정 시 툴팁 활성화) |

## metrics

아이템이 많은 드롭다운에서 선택된 아이템이 하단에 위치한 경우, 드롭다운을 열 때 해당 아이템으로 자동 스크롤됩니다.

```vue
<script setup lang="ts">
import { Dropdown } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <dropdown class="w-80" v-model="selectedMetric" :items="metrics" />
</template>
```

## Type (contained)

Contained 타입은 입력 컨테이너에 테두리 및 배경색이 없으며 상태에 따라 배경색이 나타납니다. Outlined 타입은 입력 컨테이너에 테두리가 있으며 테두리 옵션을 변경할 수 있습니다.

```vue
<script setup lang="ts">
import { Dropdown } from '@jennifersoft/vue-components-v2';

const items2 = [
    { label: 'One', value: 1 },
    { label: 'Two', value: 2 },
    { label: 'Three', value: 3 },
    { label: 'Four', value: 4 },
    { label: 'Five', value: 5 },
    { label: 'Six', value: 6 },
];
</script>
<template>
    <dropdown
        class="w-40"
        :items="items2"
        dropdown-type="contained"
        placeholder="Select a item"
    />
</template>
```

## Size (large, medium, small)

사이즈는 (large, medium, small) 3가지가 있습니다. 디폴트 사이즈는 medium 입니다.

```vue
<script setup lang="ts">
import { Dropdown } from '@jennifersoft/vue-components-v2';

const items3 = [
    { label: 'One', value: 1 },
    { label: 'Two', value: 2 },
    { label: 'Three', value: 3 },
    { label: 'Four', value: 4 },
    { label: 'Five', value: 5 },
    { label: 'Six', value: 6 },
];
</script>
<template>
    <dropdown class="w-40" :items="items3" size="large" placeholder="large" />
    <dropdown class="w-40" :items="items3" size="medium" placeholder="medium" />
    <dropdown class="w-40" :items="items3" size="small" placeholder="small" />
</template>
```

## disabled

```vue
<script setup lang="ts">
import { Dropdown } from '@jennifersoft/vue-components-v2';

const items4 = [
    { label: 'One', value: 1 },
    { label: 'Two', value: 2 },
    { label: 'Three', value: 3 },
    { label: 'Four', value: 4 },
    { label: 'Five', value: 5 },
    { label: 'Six', value: 6 },
];
</script>
<template>
    <dropdown
        class="w-40"
        :items="items4"
        :disabled="true"
        placeholder="disabled"
    />
    <dropdown
        class="w-40"
        :items="items4"
        :disabled="true"
        dropdown-type="contained"
        placeholder="contained"
    />
</template>
```

## 고정 (badge, icon)

고정된 badge, icon과 결합하여 사용할 수 있습니다.

```vue
<script setup lang="ts">
import { Dropdown, ICON_TYPE, SvgIcon } from '@jennifersoft/vue-components-v2';

const items5 = [
    { label: 'One', value: 1 },
    { label: 'Two', value: 2 },
    { label: 'Three', value: 3 },
    { label: 'Four', value: 4 },
    { label: 'Five', value: 5 },
    { label: 'Six', value: 6 },
];
</script>
<template>
    <dropdown class="w-56" :items="items5" placeholder="Select a item">
        <template v-slot:left>
            <svg-icon :icon="ICON_TYPE.search" />
            <badge :text="'5m'" />
        </template>
    </dropdown>
    <dropdown class="w-56" :items="items5" placeholder="Select a item">
        <template v-slot:right>
            <badge :text="'5m'" />
        </template>
    </dropdown>
</template>
```

## 선택된 Item (badge, icon)

선택된 Item의 badge, icon과 결합하여 사용할 수 있습니다.

## labelTooltipPlacement

`labelTooltipPlacement` prop을 설정하면 드롭다운 라벨에 마우스를 올렸을 때 툴팁이 표시됩니다. 선택된 항목의 전체 텍스트나 placeholder를 툴팁으로 확인할 수 있습니다.

</div>

```vue
<script setup lang="ts">
import { Dropdown } from '@jennifersoft/vue-components-v2';
const simpleItems = [
    { label: 'One', value: 1 },
    { label: 'Two', value: 2 },
    { label: 'Three', value: 3 },
    { label: 'Four', value: 4 },
    { label: 'Five', value: 5 },
    { label: 'Six', value: 6 },
];
</script>
<template>
    
    <dropdown
        class="w-40"
        :items="simpleItems"
        placeholder="Select item"
        label-tooltip-placement="bottom-left"
    />
</template>
```

### 지원하는 placement 값

-   `top`, `top-left`, `top-right`
-   `bottom`, `bottom-left`, `bottom-right`
-   `left`, `left-top`, `left-bottom`
-   `right`, `right-top`, `right-bottom`

## API

| 이름                        | 타입                                                                                                                                                                   | 기본값     | 설명                                                     |
| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -------------------------------------------------------- |
| items                       | Array<{ label: string, value: string\|number, leadingIcon?: IconTypes, leadingBadge?: BadgeProps, tooltip?: TooltipProps }>                                            | (필수)     | 드롭다운에 표시할 항목 목록                              |
| v-model / selected-value    | string \| number                                                                                                                                                       | -          | 선택된 값(양방향 바인딩 지원)                            |
| placeholder                 | string                                                                                                                                                                 | ''         | 선택된 값이 없을 때 표시할 텍스트                        |
| size                        | 'large' \| 'medium' \| 'small'                                                                                                                                         | 'medium'   | 드롭다운 버튼 및 목록의 크기                             |
| dropdown-type               | 'contained' \| 'outlined'                                                                                                                                              | 'outlined' | 드롭다운 스타일                                          |
| menu-type                   | 'default' \| 'checkbox' \| 'radio' (SingleMenuType)                                                                                                                    | 'default'  | 메뉴 컨테이너 타입                                       |
| disabled                    | boolean                                                                                                                                                                | false      | 비활성화 여부                                            |
| visible-rows                | number                                                                                                                                                                 | 9.35       | 표시할 최대 행 개수(스크롤 발생)                         |
| overlay-style               | `Partial<CSSStyleDeclaration>`                                                                                                                                         | -          | 드롭다운 팝업(리스트) 영역에 적용할 인라인 스타일 객체   |
| close-when-position-changed | boolean                                                                                                                                                                | false      | 버튼 위치 변경 시 자동으로 닫힘                          |
| z-index-key                 | 'toast' \| 'tooltip' \| 'menu' \| 'dialog' \| 'modal' \| 'drawer' \| 'mask'                                                                                            | 'menu'     | 팝업 레이어의 z-index 그룹 키                            |
| label-tooltip-placement     | 'top' \| 'top-left' \| 'top-right' \| 'bottom' \| 'bottom-left' \| 'bottom-right' \| 'left' \| 'left-top' \| 'left-bottom' \| 'right' \| 'right-top' \| 'right-bottom' | -          | 드롭다운 라벨에 표시할 툴팁의 위치 (설정 시 툴팁 활성화) |

### 슬롯

-   `left`: 버튼 왼쪽에 아이콘, 뱃지 등 커스텀 요소를 넣을 수 있습니다.
-   `right`: 버튼 오른쪽에 커스텀 요소를 넣을 수 있습니다.

### 이벤트

-   `@onchange`: 항목을 선택했을 때 선택된 item 객체를 반환합니다.
-   `@unfold`: 드롭다운이 열리거나 닫힐 때(열림 여부 boolean 반환)

### 상세 설명

-   **items**: `{ label, value }` 형태의 객체 배열이어야 하며, value와 label은 필수입니다.
-   **v-model/selectedValue**: 선택된 값을 바인딩합니다. 값이 없으면 placeholder가 표시됩니다.
-   **size**: 드롭다운의 크기를 지정합니다. (large, medium, small)
-   **dropdown-type**: 스타일을 지정합니다. contained는 배경색, outlined는 테두리 스타일입니다.
-   **visible-rows**: 목록의 최대 표시 행 수를 지정하면, 초과 시 스크롤이 생깁니다.
-   **overlayStyle**: 드롭다운 팝업(리스트) 영역에 인라인 스타일을 직접 지정할 수 있습니다.

### File: menu/multi-dropdown.md

# MultiDropdown

const items = [
    {
        label: 'argo-rollouts',
        value: 'argo-rollouts',
        tooltip: {
            text: 'argo-rollouts',
            placement: 'right',
        },
    },
    {
        label: 'argocd',
        value: 'argocd',
        tooltip: {
            text: 'argocd',
            placement: 'right',
        },
    },
    {
        label: 'default',
        value: 'default',
        tooltip: {
            text: 'default',
            placement: 'right',
        },
    },
    {
        label: 'java-demo',
        value: 'java-demo',
        tooltip: {
            text: 'java-demo',
            placement: 'right',
        },
    },
    {
        label: 'jennifer',
        value: 'jennifer',
        tooltip: {
            text: 'jennifer',
            placement: 'right',
        },
    },
    {
        label: 'kube-node-lease',
        value: 'kube-node-lease',
        tooltip: {
            text: 'kube-node-lease',
            placement: 'right',
        },
    },
    {
        label: 'kube-public',
        value: 'kube-public',
        tooltip: {
            text: 'kube-public',
            placement: 'right',
        },
    },
    {
        label: 'newrelic',
        value: 'newrelic',
        tooltip: {
            text: 'newrelic',
            placement: 'right',
        },
    },
    {
        label: 'prometheus',
        value: 'prometheus',
        tooltip: {
            text: 'prometheus',
            placement: 'right',
        },
    },
    {
        label: 'observability',
        value: 'observability',
        tooltip: {
            text: 'observability',
            placement: 'right',
        },
    },
    {
        label: 'sample-ns',
        value: 'sample-ns',
        tooltip: {
            text: 'sample-ns',
            placement: 'right',
        },
    },
];

const checkedValues = ref([]);

const search = ref();

const filteredItems = computed(() => {
    const searchKeyword = search.value;

return (searchKeyword === undefined || searchKeyword === '')? items : items.filter((item) => item.label.includes(search.value));
})

const clearChecked = () => {
    checkedValues.value = [];
}

</script>

## Basic

MultiDropdown은 선택한 아이템의 양방향 바인딩을 위해 v-model 로 함께 사용됩니다.
선택된 값이 없다면 label-when-no-checked의 내용이 표시됩니다.
MultiDropdown을 선택하면 [MultiMenu](./multi-menu) 가 표시됩니다.

```vue
<script setup lang="ts">
import { MultiDropdown } from '@jennifersoft/vue-components-v2';

const checkedValues = ref([]);
</script>
<template>
    <multi-dropdown
        class="w-60"
        v-model="checkedValues"
        :items="items"
        label-when-no-checked="선택된 Item 없음"
    />
</template>
```

## Props

| 이름                     | 타입                                                                                                                                                                   | 기본값   | 설명                                                   |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------ |
| items                    | `Array<{ label: string, value: PropertyKey, tooltip?: TooltipProps }>`                                                                                                | (필수)   | 드롭다운에 표시할 항목 목록                            |
| labelWhenNoChecked       | `string`                                                                                                                                                               | (필수)   | 선택값이 없을 때 라벨에 표시할 텍스트                  |
| dropdownType             | `'outlined'` \| `'contained'`                                                                                                                                          | `'outlined'` | 드롭다운 스타일                                        |
| visibleRows              | `number`                                                                                                                                                               | `10`     | 표시할 최대 행 개수(스크롤 발생)                       |
| overlayStyle             | `Partial<CSSStyleDeclaration>`                                                                                                                                         | -        | 드롭다운 팝업(리스트) 영역에 적용할 인라인 스타일 객체 |
| closeWhenPositionChanged | `boolean`                                                                                                                                                              | `false`  | 버튼 위치 변경 시 자동으로 닫힘                        |
| zIndexKey                | `'toast'` \| `'tooltip'` \| `'menu'` \| `'dialog'` \| `'modal'` \| `'drawer'` \| `'mask'`                                                                            | `'menu'` | 팝업 레이어의 z-index 그룹 키                          |
| labelTooltipPlacement    | `'top'` \| `'top-left'` \| `'top-right'` \| `'bottom'` \| `'bottom-left'` \| `'bottom-right'` \| `'left'` \| `'left-top'` \| `'left-bottom'` \| `'right'` \| `'right-top'` \| `'right-bottom'` | -        | 라벨에 표시할 툴팁 위치                                |
| size                     | `'large'` \| `'medium'` \| `'small'`                                                                                                                                  | -        | 컴포넌트 크기                                          |
| disabled                 | `boolean`                                                                                                                                                              | `false`  | 비활성화 여부                                          |

## v-model

| 이름     | 타입            | 기본값 | 설명                        |
| -------- | --------------- | ------ | --------------------------- |
| (기본)   | `PropertyKey[]` | `[]`   | 선택된 값들의 배열(양방향) |

## 이벤트

| 이름  | 파라미터 | 설명             |
| ----- | -------- | ---------------- |
| close | `void`   | 드롭다운 닫힘 이벤트 |

## 쿠버네티스 사용 예시

쿠버네티스에서 네임스페이스를 선택할때 사용 예시입니다
[FloatLabel](../form-input/float-label) 도 같이 사용 했습니다

<div class="components-example">
    <float-label :fixed="true" position="on">
        <multi-dropdown class="w-60" id="namespace" v-model="checkedValues" :items="filteredItems"  label-when-no-checked="모든 네임스페이스" >
            <template #left>
                <svg-icon
                    :width="18"
                    :height="18"
                    :icon="ICON_TYPE.guid"
                />
            </template>
            <template #top-of-menu-container>
                <empty-menu-container>
                    <btn
                        type="text"
                        text="네임스페이스 선택 초기화"
                        @click="clearChecked()"
                    />
                </empty-menu-container>
                <empty-menu-container>
                    <input-search
                        class="w-full"
                        type="plain"
                        v-model="search"
                        placeholder="네임스페이스 검색"
                    />
                </empty-menu-container>
            </template>
        </multi-dropdown>
        <label for="namespace">네임스페이스</label>
    </float-label>
</div>

```vue
<script setup lang="ts">
import {
    Btn,
    MultiDropdown,
    EmptyMenuContainer,
    Badge,
    InputSearch,
    ICON_TYPE,
    SvgIcon,
    FloatLabel,
} from '@jennifersoft/vue-components-v2';

const checkedValues = ref([]);

const search = ref();

const filteredItems = computed(() => {
    const searchKeyword = search.value;

return searchKeyword === undefined || searchKeyword === ''
        ? items
        : items.filter((item) => item.label.includes(search.value));
});

const clearChecked = () => {
    checkedValues.value = [];
};
</script>
<template>
    <float-label :fixed="true" position="on">
        <multi-dropdown
            class="w-60"
            id="namespace"
            v-model="checkedValues"
            :items="filteredItems"
            label-when-no-checked="모든 네임스페이스"
        >
            <template #left>
                <svg-icon :width="18" :height="18" :icon="ICON_TYPE.guid" />
            </template>
            <template #top-of-menu-container>
                <empty-menu-container>
                    <btn
                        type="text"
                        text="네임스페이스 선택 초기화"
                        @click="clearChecked()"
                    />
                </empty-menu-container>
                <empty-menu-container>
                    <input-search
                        class="w-full"
                        type="plain"
                        v-model="search"
                        placeholder="네임스페이스 검색"
                    />
                </empty-menu-container>
            </template>
        </multi-dropdown>
        <label for="namespace">네임스페이스</label>
    </float-label>
</template>
```

### File: menu/filter-multi-dropdown.md

# FilterMultiDropdown

const sampleItems = [
    {
        label: '딸기',
        value: 'strawberry',
    },
    {
        label: '딸기우유',
        value: 'strawberry_milk',
    },
    {
        label: '딸기케이크',
        value: 'strawberry_cake',
    },
    {
        label: '딸기아이스크림',
        value: 'strawberry_ice',
    },
    {
        label: '딸기초코',
        value: 'strawberry_choco',
    },
    {
        label: '딸기초코우유',
        value: 'strawberry_choco_milk',
    },
    {
        label: '딸기초코케이크',
        value: 'strawberry_choco_cake',
    },
    {
        label: '딸기초코아이스크림',
        value: 'strawberry_choco_ice',
        disabled: true,
    },
    {
        label: '딸기바나나',
        value: 'strawberry_banana',
    },
    {
        label: '딸기바나나우유',
        value: 'strawberry_banana_milk',
    },
    {
        label: '딸기바나나케이크',
        value: 'strawberry_banana_cake',
    },
    {
        label: '딸기바나나아이스크림',
        value: 'strawberry_banana_ice',
    },
    {
        label: '사과주스',
        value: 'apple_juice',
    },
    {
        label: '사과파이',
        value: 'apple_pie',
    },
    {
        label: '사과잼',
        value: 'apple_jam',
    },
];

## 기본 사용법

FilterMultiDropdown은 필터링 기능이 추가된 다중 선택 드롭다운 컴포넌트입니다. 사용자는 검색어를 입력하여 목록을 필터링할 수 있으며, 여러 항목을 선택할 수 있습니다. 선택된 항목은 드롭다운 버튼에 표시됩니다.

```vue
<script setup lang="ts">
import { ref, computed } from 'vue';
import {
    FilterMultiDropdown,
    ICON_TYPE,
} from '@jennifersoft/vue-components-v2';

const sampleItems = [
    { label: '딸기', value: 'strawberry' },
    { label: '딸기우유', value: 'strawberry_milk' },
    { label: '딸기케이크', value: 'strawberry_cake' },
    { label: '딸기아이스크림', value: 'strawberry_ice' },
    { label: '초코', value: 'choco' },
    { label: '초코우유', value: 'choco_milk' },
    { label: '초코케이크', value: 'choco_cake' },
    { label: '초코아이스크림', value: 'choco_ice', disabled: true },
    { label: '바나나', value: 'banana' },
    { label: '바나나우유', value: 'banana_milk' },
    { label: '바나나케이크', value: 'banana_cake' },
    { label: '바나나아이스크림', value: 'banana_ice' },
    { label: '사과주스', value: 'apple_juice' },
    { label: '사과파이', value: 'apple_pie' },
    { label: '사과잼', value: 'apple_jam' },
];

const selectedItems = ref([]);
const isOpen = ref(false);
const searchKeyword = ref('');
const filteredItems = computed(() => {
    if (!searchKeyword.value) return sampleItems;
    return sampleItems.filter((item) =>
        item.label.toLowerCase().includes(searchKeyword.value.toLowerCase())
    );
});
</script>
<template>
    <filter-multi-dropdown
        v-model:selected-list="selectedItems"
        v-model:open="isOpen"
        v-model:search-keyword="searchKeyword"
        :list="filteredItems"
        title="과일 선택"
        :text="{
            selectAllItemLabel: '전체 선택',
            whenFilterEmpty: '과일을 선택하세요',
            noResult: '검색 결과가 없습니다',
        }"
        :leading-icon="ICON_TYPE.search"
    />
</template>
```

## Props

| 이름        | 타입                                                                        | 기본값        | 설명                                      |
| ----------- | --------------------------------------------------------------------------- | ------------- | ----------------------------------------- |
| list        | `Array<{ label: string, value: PropertyKey, disabled?: boolean }>`          | `[]`          | 드롭다운 메뉴에 표시할 항목 목록          |
| title       | `string`                                                                    | `undefined`   | 드롭다운 라벨 (선택사항)                  |
| text        | `{ selectAllItemLabel: string, whenFilterEmpty: string, noResult: string, noList: string }` | -             | 텍스트 라벨 설정 객체                     |
| leadingIcon | `IconTypes`                                                                 | `undefined`   | 입력 필드 왼쪽에 표시할 아이콘 (선택사항) |
| type        | `'outlined' \| 'contained'`                                                 | -             | 입력 박스 스타일(외곽선/채움)             |
| visibleRows | `number`                                                                    | `9.35`        | 드롭다운 메뉴에 표시할 최대 행 수         |
| size        | `'large' \| 'medium' \| 'small'`                                           | `'medium'`    | 컴포넌트 크기                             |
| disabled    | `boolean`                                                                   | `false`       | 비활성화 여부                             |
| zIndexKey   | `'toast' \| 'tooltip' \| 'menu' \| 'dialog' \| 'modal' \| 'drawer' \| 'mask'` | `'menu'`      | 팝업 레이어의 z-index 그룹 키             |

## 타입(Type) 스타일

Outlined(기본)와 Contained(배경 채움) 두 가지 스타일을 지원합니다.

```vue
<script setup lang="ts">
import { ref, computed } from 'vue';
import { FilterMultiDropdown, ICON_TYPE } from '@jennifersoft/vue-components-v2';

const sampleItems = [
    { label: '딸기', value: 'strawberry' },
    { label: '딸기우유', value: 'strawberry_milk' },
    // ...
];

const selectedItemsTypeOutlined = ref([]);
const selectedItemsTypeContained = ref([]);
const isOpenTypeOutlined = ref(false);
const isOpenTypeContained = ref(false);
const searchKeywordTypeOutlined = ref('');
const searchKeywordTypeContained = ref('');

## v-model

| 이름          | 타입            | 기본값  | 설명                      |
| ------------- | --------------- | ------- | ------------------------- |
| open          | `boolean`       | `false` | 드롭다운 메뉴의 열림 상태 |
| selectedList  | `PropertyKey[]` | `[]`    | 선택된 항목 값들의 배열   |
| searchKeyword | `string`        | `''`    | 현재 검색 키워드          |

## 이벤트

| 이름                 | 파라미터        | 설명                         |
| -------------------- | --------------- | ---------------------------- |
| update:selectedList  | `PropertyKey[]` | 선택된 항목이 변경될 때 발생 |
| update:searchKeyword | `string`        | 검색 키워드가 변경될 때 발생 |

## 검색 및 필터링 기능

FilterMultiDropdown은 사용자가 검색어를 입력하면 목록을 실시간으로 필터링합니다. 필터링된 목록에 대해 전체 선택 옵션도 제공됩니다.

```vue
<script setup lang="ts">
import { ref, computed } from 'vue';
import {
    FilterMultiDropdown,
    FloatLabel,
    ICON_TYPE,
} from '@jennifersoft/vue-components-v2';

const selectedItems = ref([]);
const isOpen = ref(false);
const searchKeyword = ref('');

// 샘플 아이템 목록
const sampleItems = [
    { label: '딸기', value: 'strawberry' },
    { label: '딸기우유', value: 'strawberry_milk' },
    { label: '초코', value: 'choco' },
    { label: '초코우유', value: 'choco_milk' },
    /* ... 그 외 여러 항목들 */
];

const filteredItems = computed(() => {
    if (!searchKeyword.value) return sampleItems;
    return sampleItems.filter((item) =>
        item.label.toLowerCase().includes(searchKeyword.value.toLowerCase())
    );
});
</script>
<template>
    <float-label fixed position="on">
        <filter-multi-dropdown
            v-model:selected-list="selectedItems"
            v-model:open="isOpen"
            v-model:search-keyword="searchKeyword"
            :list="filteredItems"
            title="과일 필터"
            :text="{
                selectAllItemLabel: '모든 과일 선택',
                whenFilterEmpty: '과일 필터링하기',
                noResult: '검색 결과가 없습니다',
            }"
            :leading-icon="ICON_TYPE.filter"
        />
        <label>과일 필터</label>
    </float-label>
</template>
```

## 빈 리스트 처리

FilterMultiDropdown은 리스트가 비어 있을 때 적절한 메시지를 표시합니다. 검색어가 있는 경우는 "검색 결과가 없습니다"라는 메시지가, 검색어가 없는 경우는 리스트가 비어 있다는 것을 알립니다.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import {
    FilterMultiDropdown,
    ICON_TYPE,
} from '@jennifersoft/vue-components-v2';

const emptySelectedItems = ref([]);
const isEmptyOpen = ref(false);
const emptySearchKeyword = ref('');
</script>
<template>
    <filter-multi-dropdown
        v-model:selected-list="emptySelectedItems"
        v-model:open="isEmptyOpen"
        v-model:search-keyword="emptySearchKeyword"
        :list="[]"
        title="빈 리스트 예시"
        :text="{
            selectAllItemLabel: '전체 선택',
            whenFilterEmpty: '항목이 없습니다',
            noResult: '검색 결과가 없습니다',
            noList: '리스트가 없습니다',
        }"
        :leading-icon="ICON_TYPE.list"
    />
</template>
```

## 크기(Size) 설정 예시

FilterMultiDropdown 컴포넌트는 'small', 'medium', 'large' 세 가지 크기 옵션을 지원합니다. 기본값은 'medium'입니다.

```vue
<script setup lang="ts">
import { ref, computed } from 'vue';
import {
    FilterMultiDropdown,
    ICON_TYPE,
} from '@jennifersoft/vue-components-v2';

const selectedItems = ref([]);
const isOpen = ref(false);
const searchKeyword = ref('');

// 샘플 아이템 목록
const sampleItems = [
    /* 아이템 목록 */
];

const filteredItems = computed(() => {
    if (!searchKeyword.value) return sampleItems;
    return sampleItems.filter((item) =>
        item.label.toLowerCase().includes(searchKeyword.value.toLowerCase())
    );
});
</script>
<template>
    <filter-multi-dropdown
        v-model:selected-list="selectedItems"
        v-model:open="isOpen"
        v-model:search-keyword="searchKeyword"
        :list="filteredItems"
        title="과일 선택"
        size="large"
        :text="{
            selectAllItemLabel: '전체 선택',
            whenFilterEmpty: '과일을 선택하세요',
            noResult: '검색 결과가 없습니다',
        }"
        :leading-icon="ICON_TYPE.search"
    />
</template>
```

### 접근성

| 키                  | 기능                                                           |
| ------------------- | -------------------------------------------------------------- |
| 방향키 ↑ / ↓        | 메뉴 항목 포커스를 한 단계씩 이동                              |
| Alt + ↑ / Alt + ↓   | 메뉴 항목 포커스를 5개씩 이동 (macOS에서는 Option 키)          |
| Ctrl + ↑ / Ctrl + ↓ | 가장 처음 / 마지막 메뉴 항목으로 이동 (macOS에서는 Command 키) |
| Home                | 가장 처음 메뉴 항목으로 이동                                   |
| End                 | 가장 마지막 메뉴 항목으로 이동                                 |
| Enter               | 현재 포커스된 메뉴 항목 선택 또는 선택 해제                    |
| Escape              | 드롭다운 메뉴 닫기                                             |

### File: menu/filter-single-dropdown.md

# FilterSingleDropdown

// Type examples (outlined/contained)
const selectedItemValueTypeOutlined = ref(null);
const selectedItemValueTypeContained = ref(null);
const isOpenTypeOutlined = ref(false);
const isOpenTypeContained = ref(false);
const searchKeywordTypeOutlined = ref('');
const searchKeywordTypeContained = ref('');
const filteredItemsTypeOutlined = computed(() => {
    if (!searchKeywordTypeOutlined.value) return sampleItems;
    return sampleItems.filter(item =>
        item.label.toLowerCase().includes(searchKeywordTypeOutlined.value.toLowerCase())
    );
});
const filteredItemsTypeContained = computed(() => {
    if (!searchKeywordTypeContained.value) return sampleItems;
    return sampleItems.filter(item =>
        item.label.toLowerCase().includes(searchKeywordTypeContained.value.toLowerCase())
    );
});

</script>

## 기본 사용법

FilterSingleDropdown은 필터링 기능이 추가된 단일 선택 드롭다운 컴포넌트입니다. 사용자는 검색어를 입력하여 목록을 필터링할 수 있으며, 하나의 항목만 선택할 수 있습니다. 선택된 항목은 드롭다운 버튼에 표시됩니다.

```vue
<script setup lang="ts">
import { ref, computed } from 'vue';
import {
    FilterSingleDropdown,
    ICON_TYPE,
} from '@jennifersoft/vue-components-v2';

const selectedItemValue = ref(null);
const isOpen = ref(false);
const searchKeyword = ref('');
const filteredItems = computed(() => {
    if (!searchKeyword.value) return sampleItems;
    return sampleItems.filter((item) =>
        item.label.toLowerCase().includes(searchKeyword.value.toLowerCase())
    );
});
</script>
<template>
    <filter-single-dropdown
        v-model:selected-item-value="selectedItemValue"
        v-model:open="isOpen"
        v-model:search-keyword="searchKeyword"
        :list="filteredItems"
        title="과일 선택"
        :text="{
            whenFilterEmpty: '과일을 선택하세요',
            noResult: '검색 결과가 없습니다',
            noList: '목록이 없습니다',
        }"
        :leading-icon="ICON_TYPE.search"
    />
</template>
```

## Props

| 이름            | 타입                                                               | 기본값        | 설명                                      |
| --------------- | ------------------------------------------------------------------ | ------------- | ----------------------------------------- |
| list            | `Array<{ label: string, value: PropertyKey, disabled?: boolean }>` | `[]`          | 드롭다운 메뉴에 표시할 항목 목록          |
| title           | `string`                                                           | `undefined`   | 드롭다운 라벨 (선택사항)                  |
| text            | `{ whenFilterEmpty: string, noResult: string, noList: string }`    | -             | 텍스트 라벨 설정 객체                     |
| leadingIcon     | `IconTypes`                                                        | `undefined`   | 입력 필드 왼쪽에 표시할 아이콘 (선택사항) |
| type            | `'outlined' \| 'contained'`                                        | `'outlined'`  | 입력 박스 스타일(외곽선/채움)             |
| visibleRows     | `number`                                                           | `9.35`        | 드롭다운 메뉴에 표시할 최대 행 수         |
| size            | `'large' \| 'medium' \| 'small'`                                   | `'medium'`    | 컴포넌트 크기                             |
| disabled        | `boolean`                                                          | `false`       | 비활성화 여부                             |
| zIndexKey       | `'toast' \| 'tooltip' \| 'menu' \| 'dialog' \| 'modal' \| 'drawer' \| 'mask'` | `'menu'`      | 팝업 레이어의 z-index 그룹 키             |
| closeWhenSelect | `boolean`                                                          | `true`        | 항목 선택 시 드롭다운 자동 닫힘           |

## v-model

| 이름              | 타입                  | 기본값  | 설명                      |
| ----------------- | --------------------- | ------- | ------------------------- |
| open              | `boolean`             | `false` | 드롭다운 메뉴의 열림 상태 |
| selectedItemValue | `PropertyKey \| null` | `null`  | 선택된 항목의 값          |
| searchKeyword     | `string`              | `''`    | 현재 검색 키워드          |

## 이벤트

| 이름                   | 파라미터        | 설명                         |
| ---------------------- | --------------- | ---------------------------- |
| update:selectedItemValue | `PropertyKey`   | 선택된 항목이 변경될 때 발생 |
| update:searchKeyword   | `string`        | 검색 키워드가 변경될 때 발생 |

## 검색 및 필터링 기능

FilterSingleDropdown은 사용자가 검색어를 입력하면 목록을 실시간으로 필터링합니다. 필터링된 목록에서 사용자는 원하는 항목을 선택할 수 있습니다.

```vue
<script setup lang="ts">
import { ref, computed } from 'vue';
import {
    FilterSingleDropdown,
    FloatLabel,
    ICON_TYPE,
} from '@jennifersoft/vue-components-v2';

const selectedItemValue = ref('strawberry_banana_ice');
const isOpen = ref(false);
const searchKeyword = ref('');

const filteredItems = computed(() => {
    if (!searchKeyword.value) return sampleItems;
    return sampleItems.filter((item) =>
        item.label.toLowerCase().includes(searchKeyword.value.toLowerCase())
    );
});
</script>
<template>
    <float-label fixed position="on">
        <filter-single-dropdown
            v-model:selected-item-value="selectedItemValue"
            v-model:open="isOpen"
            v-model:search-keyword="searchKeyword"
            :list="filteredItems"
            title="과일 필터"
            :text="{
                whenFilterEmpty: '과일 필터링하기',
                noResult: '검색 결과가 없습니다',
                noList: '목록이 없습니다',
            }"
            :leading-icon="ICON_TYPE.filter"
        />
        <label>과일 필터</label>
    </float-label>
</template>
```

## 빈 리스트 처리

FilterSingleDropdown은 리스트가 비어 있을 때 적절한 메시지를 표시합니다. 검색어가 있는 경우는 "검색 결과가 없습니다"라는 메시지가, 검색어가 없는 경우는 리스트가 비어 있다는 것을 알립니다.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import {
    FilterSingleDropdown,
    ICON_TYPE,
} from '@jennifersoft/vue-components-v2';

const emptySelectedItemValue = ref(null);
const isEmptyOpen = ref(false);
const emptySearchKeyword = ref('');
</script>
<template>
    <filter-single-dropdown
        v-model:selected-item-value="emptySelectedItemValue"
        v-model:open="isEmptyOpen"
        v-model:search-keyword="emptySearchKeyword"
        :list="[]"
        title="빈 리스트 예시"
        :text="{
            whenFilterEmpty: '항목이 없습니다',
            noResult: '검색 결과가 없습니다',
            noList: '리스트가 없습니다',
        }"
        :leading-icon="ICON_TYPE.list"
    />
</template>
```

## 크기(Size) 설정 예시

FilterSingleDropdown 컴포넌트는 'small', 'medium', 'large' 세 가지 크기 옵션을 지원합니다. 기본값은 'medium'입니다.

```vue
<script setup lang="ts">
import { ref, computed } from 'vue';
import {
    FilterSingleDropdown,
    ICON_TYPE,
} from '@jennifersoft/vue-components-v2';

const selectedItemValue = ref(null);
const isOpen = ref(false);
const searchKeyword = ref('');

// 샘플 아이템 목록
const sampleItems = [
    /* 아이템 목록 */
];

const filteredItems = computed(() => {
    if (!searchKeyword.value) return sampleItems;
    return sampleItems.filter((item) =>
        item.label.toLowerCase().includes(searchKeyword.value.toLowerCase())
    );
});
</script>
<template>
    <filter-single-dropdown
        v-model:selected-item-value="selectedItemValue"
        v-model:open="isOpen"
        v-model:search-keyword="searchKeyword"
        :list="filteredItems"
        title="과일 선택"
        size="large"
        :text="{
            whenFilterEmpty: '과일을 선택하세요',
            noResult: '검색 결과가 없습니다',
            noList: '목록이 없습니다',
        }"
        :leading-icon="ICON_TYPE.search"
    />
</template>
```

## 타입(Type) 스타일

Outlined(기본)와 Contained(배경 채움) 두 가지 스타일을 지원합니다.

```vue
<script setup lang="ts">
import { ref, computed } from 'vue';
import {
    FilterSingleDropdown,
    ICON_TYPE,
} from '@jennifersoft/vue-components-v2';

const sampleItems = [
    { label: '딸기', value: 'strawberry' },
    { label: '딸기우유', value: 'strawberry_milk' },
    // ...
];

const selectedItemValueTypeOutlined = ref(null);
const selectedItemValueTypeContained = ref(null);
const isOpenTypeOutlined = ref(false);
const isOpenTypeContained = ref(false);
const searchKeywordTypeOutlined = ref('');
const searchKeywordTypeContained = ref('');

### 접근성

| 키                  | 기능                                                           |
| ------------------- | -------------------------------------------------------------- |
| 방향키 ↑ / ↓        | 메뉴 항목 포커스를 한 단계씩 이동                              |
| Alt + ↑ / Alt + ↓   | 메뉴 항목 포커스를 5개씩 이동 (macOS에서는 Option 키)          |
| Ctrl + ↑ / Ctrl + ↓ | 가장 처음 / 마지막 메뉴 항목으로 이동 (macOS에서는 Command 키) |
| Home                | 가장 처음 메뉴 항목으로 이동                                   |
| End                 | 가장 마지막 메뉴 항목으로 이동                                 |
| Enter               | 현재 포커스된 메뉴 항목 선택                                   |
| Escape              | 드롭다운 메뉴 닫기                                             |

## Data

### File: data/tree.md

# Tree

Tree 컴포넌트는 디렉터리, 조직도, 분류 체계 등 계층적인 구조의 데이터를 표현할 때 사용합니다.
사용자는 각 노드를 확장하거나 축소하고, 선택할 수 있어 구조를 직관적으로 탐색할 수 있습니다.

const customIconTreeData = ref([
    {
        label: 'ryan',
        isOpen: true,
        id: 'id1',
        icon: ICON_TYPE.domainGroup,
        children: [
            {
                label: 'ryan-dash',
                id: 'id2',
                icon: ICON_TYPE.domain,
            },
            {
                label: 'ryan-k8s-1011',
                id: 'id3',
                icon: ICON_TYPE.domain,
            },
            {
                label: 'ryan-k8s-1012',
                id: 'id4',
                icon: ICON_TYPE.domain,
            },
            {
                label: 'ryan-k8s-1013',
                id: 'id5',
                icon: ICON_TYPE.domain,
            },
            {
                label: 'ryan-k8s-1014',
                id: 'id6',
                icon: ICON_TYPE.domain,
            },
        ],
    },
    {
        label: 'Total',
        isOpen: true,
        id: 'id7',
        icon: ICON_TYPE.domainGroup,
        children: [
            {
                label: 'jennifer',
                id: 'id8',
                icon: ICON_TYPE.domainGroup,
                children: [
                    {
                        label: 'autodeploy',
                        id: 'id8-1',
                        icon: ICON_TYPE.domain,
                    },
                    {
                        label: 'webflux',
                        id: 'id8-2',
                        icon: ICON_TYPE.domain,
                    },
                ],
            },
            {
                label: 'infra',
                id: 'id10',
                icon: ICON_TYPE.domainGroup,
                children: [
                    {
                        label: 'simula',
                        id: 'id11',
                        icon: ICON_TYPE.domain,
                    },
                    {
                        label: 'ENV_TEST',
                        id: 'id12',
                        icon: ICON_TYPE.domain,
                    },
                    {
                        label: 'Jennifer5',
                        id: 'id13',
                        icon: ICON_TYPE.domain,
                    },
                ],
            },
            {
                label: 'Demian',
                id: 'id20',
                icon: ICON_TYPE.domainGroup,
                children: [
                    {
                        label: 'Demian background',
                        id: 'id21',
                        icon: ICON_TYPE.domain,
                    },
                    {
                        label: 'Demian collector',
                        id: 'id22',
                        icon: ICON_TYPE.domain,
                    },
                    {
                        label: 'Demian console',
                        id: 'id23',
                        icon: ICON_TYPE.domain,
                    },
                ],
            },
        ],
    },
]);

const selectedId = ref('id3');

</script>

## Tree

```vue
<script setup lang="ts">
import { ref, computed } from 'vue';
import { Tree } from '@jennifersoft/vue-components-v2';

## Props

| Prop 이름 | 타입                                  | 필수 여부 | 기본값      | 설명                  |
| --------- | ------------------------------------- | --------- | ----------- | --------------------- |
| nodes     | `TreeNodeData[]`                      | Yes       | -           | 트리 노드 데이터 배열 |
| treeType  | `'default'` \| `'folder'` \| `'icon'` | No        | `'default'` | 트리 표시 타입        |

## v-model

| 이름   | 타입             | 기본값 | 설명                    |
| ------ | ---------------- | ------ | ----------------------- |
| (기본) | `string \| null` | `null` | 선택된 노드의 id 바인딩 |

## 이벤트

| 이벤트 이름 | 파라미터             | 설명              |
| ----------- | -------------------- | ----------------- |
| node-click  | `node: TreeNodeData` | 노드 클릭 시 발생 |

## Icon Tree

```vue
<script setup lang="ts">
import { ref, computed } from 'vue';
import { Tree } from '@jennifersoft/vue-components-v2';
import { ICON_TYPE } from '@jennifersoft/vue-components-v2';

## Folder Tree

```vue
<script setup lang="ts">
import { ref, computed } from 'vue';
import { Tree } from '@jennifersoft/vue-components-v2';

## Misc

### File: misc/chips.md

# Chips

const colorChecked1 = ref(true);
const colorChecked2 = ref(true);
const colorChecked3 = ref(true);
</script>

## 기본

### Default

<div class="components-example">
  <chip text="default"  />
  <chip> default-slot </chip>
</div>

```vue
<script setup lang="ts">
import { Chip, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <chip text="default" />
    <chip> default-slot </chip>
</template>
```

## Props

| 이름       | 타입                                        | 기본값  | 설명                 |
| ---------- | ------------------------------------------- | ------- | -------------------- |
| text       | `string`                                    | -       | 칩에 표시할 텍스트   |
| useToggle  | `boolean`                                   | `false` | 클릭 시 토글 사용 여부 |
| selected   | `boolean`                                   | `false` | 선택 상태            |
| readonly   | `boolean`                                   | -       | 읽기 전용 여부        |
| size       | `'large'` \| `'medium'` \| `'small'`            | -       | 컴포넌트 크기         |
| disabled   | `boolean`                                   | `false` | 비활성화 여부         |

### Size

<div class="components-example">
     <div class="flex flex-col items-center gap-2">
         <div class="flex items-center h-12 gap-2">
            <span>Large</span>
            <chip text="Default" size="large">
                <template v-slot:left>
                    <btn
                        size="medium"
                        shape="circle"
                        type="text"
                        :leading-icon="ICON_TYPE.arrowBack"
                        @click.stop
                    />
                </template>
                <template v-slot:right>
                    <btn
                        size="medium"
                        shape="circle"
                        type="text"
                        :leading-icon="ICON_TYPE.arrowDropDown"
                        @click.stop
                    />
                </template>
            </chip>
        </div>
        <div class="flex items-center h-12 gap-2">
            <span>Medium</span>
            <chip text="Default" size="medium">
                <template v-slot:left>
                    <btn
                        size="small"
                        shape="circle"
                        type="text"
                        :leading-icon="ICON_TYPE.arrowBack"
                        @click.stop
                    />
                </template>
                <template v-slot:right>
                    <btn
                        size="small"
                        shape="circle"
                        type="text"
                        :leading-icon="ICON_TYPE.arrowDropDown"
                        @click.stop
                    />
                </template>
            </chip>
        </div>
        <div class="flex items-center h-12 gap-2">
            <span>Small</span>
            <chip text="Default" size="small">
                <template v-slot:left>
                    <btn
                        size="mini"
                        shape="circle"
                        type="text"
                        :leading-icon="ICON_TYPE.arrowBack"
                        @click.stop
                    />
                </template>
                <template v-slot:right>
                    <btn
                        size="mini"
                        shape="circle"
                        type="text"
                        :leading-icon="ICON_TYPE.arrowDropDown"
                        @click.stop
                    />
                </template>
            </chip>
        </div>
    </div>
</div>

```vue
<script setup lang="ts">
import { Chip, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <div class="flex flex-col items-center gap-2">
        <div class="flex items-center h-12 gap-2">
            <span>Large</span>
            <chip text="Default" size="large">
                <template v-slot:left>
                    <btn
                        size="medium"
                        shape="circle"
                        type="text"
                        :leading-icon="ICON_TYPE.arrowBack"
                        @click.stop
                    />
                </template>
                <template v-slot:right>
                    <btn
                        size="medium"
                        shape="circle"
                        type="text"
                        :leading-icon="ICON_TYPE.arrowDropDown"
                        @click.stop
                    />
                </template>
            </chip>
        </div>
        <div class="flex items-center h-12 gap-2">
            <span>Medium</span>
            <chip text="Default" size="medium">
                <template v-slot:left>
                    <btn
                        size="small"
                        shape="circle"
                        type="text"
                        :leading-icon="ICON_TYPE.arrowBack"
                        @click.stop
                    />
                </template>
                <template v-slot:right>
                    <btn
                        size="small"
                        shape="circle"
                        type="text"
                        :leading-icon="ICON_TYPE.arrowDropDown"
                        @click.stop
                    />
                </template>
            </chip>
        </div>
        <div class="flex items-center h-12 gap-2">
            <span>Small</span>
            <chip text="Default" size="small">
                <template v-slot:left>
                    <btn
                        size="mini"
                        shape="circle"
                        type="text"
                        :leading-icon="ICON_TYPE.arrowBack"
                        @click.stop
                    />
                </template>
                <template v-slot:right>
                    <btn
                        size="mini"
                        shape="circle"
                        type="text"
                        :leading-icon="ICON_TYPE.arrowDropDown"
                        @click.stop
                    />
                </template>
            </chip>
        </div>
    </div>
</template>
```

## Filter, Disabled

태그나 단어등 콘텐츠를 필터링하는데 사용합니다. 토글 버튼이나 체크박스의 대안으로 사용할 수 있습니다.

### 기본

```vue
<script setup lang="ts">
import {
    Btn,
    Chip,
    ICON_TYPE,
    BadgeDigit,
} from '@jennifersoft/vue-components-v2';
</script>
<template>
    <chip :text="'Chip'" />
    <chip :text="'Chip selected'" :selected="true" />
    <chip :text="'Chip disabled'" :disabled="true" />
</template>
```

### 구성

</div>

```vue
<script setup lang="ts">
import { Chip, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <chip :text="'Filter Chip'">
        <template v-slot:left>
            <btn
                size="small"
                shape="circle"
                type="text"
                :leading-icon="ICON_TYPE.check"
                @click.stop
            />
        </template>
    </chip>
    <chip :text="'Filter Chip'">
        <template v-slot:right>
            <btn
                size="small"
                shape="circle"
                type="text"
                :leading-icon="ICON_TYPE.arrowDropDown"
                @click.stop
            />
        </template>
    </chip>
    <chip :text="'Filter Chip'">
        <template v-slot:left>
            <btn
                size="small"
                shape="circle"
                type="text"
                :leading-icon="ICON_TYPE.arrowBack"
                @click.stop
            />
            <btn
                size="small"
                shape="circle"
                type="text"
                :leading-icon="ICON_TYPE.check"
                @click.stop
            />
        </template>
        <template v-slot:right>
            <btn
                size="small"
                shape="circle"
                type="text"
                :leading-icon="ICON_TYPE.arrowDropDown"
                @click.stop
            />
        </template>
    </chip>
    <chip :text="'Filter Chip'">
        <template v-slot:left>
            <badge-digit color="blue" :value="10" />
        </template>
    </chip>
</template>
```

## 성능 브라우저

성능 브라우저에서 조회 조건을 remove, off 로 변경 할 수 있습니다.

```vue
<script setup lang="ts">
import { Chip, ICON_TYPE, ToggleSwitch } from '@jennifersoft/vue-components-v2';
const colorChecked1 = ref(true);
const colorChecked2 = ref(true);
const colorChecked3 = ref(true);
</script>
<template>
    <chip :text="'CPU Usage'">
        <template v-slot:left>
            <toggle-switch
                size="small"
                v-model="colorChecked1"
                :style="{ '--custom-switch-color': '#497EFF' }"
                @click.stop
            />
        </template>
        <template v-slot:right>
            <btn
                size="small"
                shape="circle"
                type="text"
                :leading-icon="ICON_TYPE.arrowDownward"
                @click.stop
            />
            <btn
                size="small"
                shape="circle"
                type="text"
                :leading-icon="ICON_TYPE.close"
                @click.stop
            />
        </template>
    </chip>
    <chip :text="'CPU Request'">
        <template v-slot:left>
            <toggle-switch
                size="small"
                v-model="colorChecked2"
                :style="{ '--custom-switch-color': '#92D8FF' }"
                @click.stop
            />
        </template>
        <template v-slot:right>
            <btn
                size="small"
                shape="circle"
                type="text"
                :leading-icon="ICON_TYPE.arrowDownward"
                @click.stop
            />
            <btn
                size="small"
                shape="circle"
                type="text"
                :leading-icon="ICON_TYPE.close"
                @click.stop
            />
        </template>
    </chip>
    <chip :text="'Memory Usage'">
        <template v-slot:left>
            <toggle-switch
                size="small"
                v-model="colorChecked3"
                :style="{ '--custom-switch-color': '#CC48DD' }"
                @click.stop
            />
        </template>
        <template v-slot:right>
            <btn
                size="small"
                shape="circle"
                type="text"
                :leading-icon="ICON_TYPE.arrowDownward"
                @click.stop
            />
            <btn
                size="small"
                shape="circle"
                type="text"
                :leading-icon="ICON_TYPE.close"
                @click.stop
            />
        </template>
    </chip>
</template>
```

### File: misc/badge.md

# Badge

</script>

## Basic

```vue
<script setup lang="ts">
import { Badge, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <badge :text="'Pod'" />
    <badge :text="'Pod'" :leading-icon="ICON_TYPE.pod" />
    <badge :text="'Pod'" :trailing-icon="ICON_TYPE.pod" />
    <badge
        :text="'Pod'"
        :leading-icon="ICON_TYPE.pod"
        :trailing-icon="ICON_TYPE.pod"
    />
</template>
```

## Props

## Size

```vue
<script setup lang="ts">
import { Badge, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <badge size="large" :text="'Pod'" :leading-icon="ICON_TYPE.pod" />
    <badge size="medium" :text="'Pod'" :leading-icon="ICON_TYPE.pod" />
    <badge size="small" :text="'Pod'" :leading-icon="ICON_TYPE.pod" />
</template>
```

## Color

```vue
<script setup lang="ts">
import { Badge, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <badge color="gray" text="gray" :leading-icon="ICON_TYPE.pod" />
    <badge color="red" text="red" :leading-icon="ICON_TYPE.pod" />
    <badge color="green" text="green" :leading-icon="ICON_TYPE.pod" />
    <badge color="blue" text="blue" :leading-icon="ICON_TYPE.pod" />
    <badge color="purple" text="purple" :leading-icon="ICON_TYPE.pod" />
    <badge color="pink" text="pink" :leading-icon="ICON_TYPE.pod" />
    <badge color="orange" text="orange" :leading-icon="ICON_TYPE.pod" />
    <badge color="teal" text="teal" :leading-icon="ICON_TYPE.pod" />
    <badge color="skyblue" text="skyblue" :leading-icon="ICON_TYPE.pod" />
    <badge color="inverted" text="inverted" :leading-icon="ICON_TYPE.pod" />
    <badge color="gray-light" text="gray-light" :leading-icon="ICON_TYPE.pod" />
    <badge color="red-light" text="red-light" :leading-icon="ICON_TYPE.pod" />
    <badge
        color="green-light"
        text="green-light"
        :leading-icon="ICON_TYPE.pod"
    />
    <badge color="blue-light" text="blue-light" :leading-icon="ICON_TYPE.pod" />
    <badge
        color="purple-light"
        text="purple-light"
        :leading-icon="ICON_TYPE.pod"
    />
    <badge color="pink-light" text="pink-light" :leading-icon="ICON_TYPE.pod" />
    <badge
        color="orange-light"
        text="orange-light"
        :leading-icon="ICON_TYPE.pod"
    />
    <badge color="teal-light" text="teal-light" :leading-icon="ICON_TYPE.pod" />
    <badge
        color="skyblue-light"
        text="skyblue-light"
        :leading-icon="ICON_TYPE.pod"
    />
    <badge
        color="inverted-light"
        text="inverted-light"
        :leading-icon="ICON_TYPE.pod"
    />
</template>
```

### File: misc/badge-digit.md

# BadgeDigit

</script>

## Basic

```vue
<script setup lang="ts">
    import { BadgeDigit } from "@jennifersoft/vue-components-v2";
</script>
<template>
    <badge-digit :value="10"/>
</template>
```

## Props

## 1, 10, 100, 1000...

```vue
<script setup lang="ts">
    import { BadgeDigit } from "@jennifersoft/vue-components-v2";
</script>
<template>
    <badge-digit :value="1"/>
    <badge-digit :value="10"/>
    <badge-digit :value="100"/>
    <badge-digit :value="1000"/>
    <badge-digit :value="10000"/>
    <badge-digit :value="100000"/>
</template>
```

## Color

```vue
<script setup lang="ts">
    import { BadgeDigit } from "@jennifersoft/vue-components-v2";
</script>
<template>
    <badge-digit color='gray' :value="10" />
    <badge-digit color='red' :value="10" />
    <badge-digit color='green'  :value="10" />
    <badge-digit color='blue'  :value="10" />
    <badge-digit color='purple'  :value="10" />
    <badge-digit color='pink'  :value="10" />
    <badge-digit color='orange'  :value="10" />
    <badge-digit color='teal'  :value="10" />
    <badge-digit color='skyblue'  :value="10" />
    <badge-digit color='inverted'  :value="10" />
    <badge-digit color='gray-light'  :value="10" />
    <badge-digit color='red-light'  :value="10" />
    <badge-digit color='green-light'  :value="10" />
    <badge-digit color='blue-light'  :value="10" />
    <badge-digit color='purple-light'  :value="10" />
    <badge-digit color='pink-light'  :value="10" />
    <badge-digit color='orange-light'  :value="10" />
    <badge-digit color='teal-light'  :value="10" />
    <badge-digit color='skyblue-light'  :value="10" />
    <badge-digit color='inverted-light'  :value="10" />
</template>
```

### File: misc/badge-dot.md

# BadgeDot

</script>

## Basic

```vue
<script setup lang="ts">
    import { BadgeDot } from "@jennifersoft/vue-components-v2";
</script>
<template>
    <badge-dot />
</template>
```

## Props

## Color

```vue
<script setup lang="ts">
    import { BadgeDigit } from "@jennifersoft/vue-components-v2";
</script>
<template>
    <badge-dot color='gray'  />
    <badge-dot color='red'  />
    <badge-dot color='green'   />
    <badge-dot color='blue'   />
    <badge-dot color='purple'   />
    <badge-dot color='pink'   />
    <badge-dot color='orange'   />
    <badge-dot color='teal'   />
    <badge-dot color='skyblue'   />
    <badge-dot color='inverted'   />
    <badge-dot color='gray-light'   />
    <badge-dot color='red-light'   />
    <badge-dot color='green-light'   />
    <badge-dot color='blue-light'   />
    <badge-dot color='purple-light' />
    <badge-dot color='pink-light' />
    <badge-dot color='orange-light' />
    <badge-dot color='teal-light'  />
    <badge-dot color='skyblue-light'  />
    <badge-dot color='inverted-light' />
</template>
```

### File: misc/progress-button.md

# ProgressButton

const intervalId = setInterval(() => {
    animateRatio.value += 0.01;
    if (animateRatio.value > 1) {
        animateRatio.value = 0;
    }
}, 100);

onUnmounted(() => {
    clearInterval(intervalId);
});
const stopAnimate = () => {
    clearInterval(intervalId);
};
</script>

## Basic

```vue
<script setup lang="ts">
import { ProgressButton } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <progress-button ratio="0.46" />
</template>
```

## Props

| 이름     | 타입                                        | 기본값     | 설명                           |
| -------- | ------------------------------------------- | ---------- | ------------------------------ |
| type     | `'circle'`                                  | `'circle'` | 진행 표시 유형                  |
| ratio    | `number`                                    | `0`        | 진행 비율 (0 ~ 1 사이)          |
| size     | `'large'` \| `'medium'` \| `'small'`            | -          | 컴포넌트 크기                   |
| disabled | `boolean`                                   | `false`    | 비활성화 여부                   |

## Size

```vue
<script setup lang="ts">
import { ProgressButton } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <progress-button ratio="0.46" size="large" />
    <progress-button ratio="0.46" size="medium" />
    <progress-button ratio="0.46" size="small" />
</template>
```

## Animate (can stop by clicking)

```vue
<script setup lang="ts">
import { ProgressButton } from '@jennifersoft/vue-components-v2';
import { ref, onUnmounted } from 'vue';
const animateRatio = ref(0);

const intervalId = setInterval(() => {
    animateRatio.value += 0.01;
    if (animateRatio.value > 1) {
        animateRatio.value = 0;
    }
}, 100);

onUnmounted(() => {
    clearInterval(intervalId);
});

const stopAnimate = () => {
    clearInterval(intervalId);
};
</script>
<template>
    <progress-button :ratio="animateRatio" @click="stopAnimate" />
</template>
```

### File: misc/progress-circle.md

# Progress Circle

-   조회 기간이 오래 걸리는 조회 화면에서 사용자가 대기 상태를 알 수 있도록 도와주는 컴포넌트

const animateRatio = ref(0);

const intervalId = setInterval(() => {
    animateRatio.value += 0.01;
    if (animateRatio.value > 1) {
        animateRatio.value = 0;
    }
}, 100);

onUnmounted(() => {
    clearInterval(intervalId);
});
</script>

## Basic

```vue
<script setup lang="ts">
import { ProgressCircle } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <progress-circle ratio="0.46" class="w-20 h-20" />
</template>
```

## Props

| 이름  | 타입     | 기본값 | 설명                   |
| ----- | -------- | ------ | ---------------------- |
| ratio | `number` | `0`    | 진행 비율 (0 ~ 1 사이) |

## Animate

```vue
<script setup lang="ts">
import { ref, onUnmounted } from 'vue';
import { ProgressCircle } from '@jennifersoft/vue-components-v2';
const animateRatio = ref(0);

const intervalId = setInterval(() => {
    animateRatio.value += 0.01;
    if (animateRatio.value > 1) {
        animateRatio.value = 0;
    }
}, 100);

onUnmounted(() => {
    clearInterval(intervalId);
});
</script>
<template>
    <progress-circle :ratio="animateRatio" class="w-20 h-20" />
</template>
```

### File: misc/progress-indicator.md

# Progress Indicator

-   분석화면에서 로딩 상태를 표시하는 컴포넌트
<script setup lang="ts">
import { ProgressIndicator } from '@jennifersoft/vue-components-v2';
</script>

## Basic

<div class="components-example">
    <div class="w-[400px] h-10 relative">
        <progress-indicator />
        <div class="absolute top-0 left-0 w-full h-full text-center text-sm" >
            Loading...
        </div>
    </div>
</div>

## Props

이 컴포넌트는 Props를 받지 않습니다.

```vue
<script setup lang="ts">
import { ProgressIndicator } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <progress-indicator />
    <div class="absolute top-0 left-0 w-full h-full text-center text-sm">
        Loading...
    </div>
</template>
```

### File: misc/spinner.md

# Spinner

-   데이터 로딩, 작업 진행 중 등의 대기 상태를 사용자에게 시각적으로 표시하는 컴포넌트
-   원형으로 회전하는 애니메이션을 통해 진행 중인 상태를 나타냄

const customColor = ref('var(--red-700)');
const customDuration = ref('2000ms');
</script>

## Basic

```vue
<script setup lang="ts">
import { Spinner } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <Spinner />
</template>
```

## Props

| Prop        | Type                                            | Default                    | Description                    |
| ----------- | ----------------------------------------------- | -------------------------- | ------------------------------ |
| color       | `string`                                        | `var(--overlay-primary-900)`| 스피너의 색상                  |
| circleColor | `string`                                        | -                          | 배경 원의 색상(테마에 따라 사용) |
| duration    | `string`                                        | `'1.5s'`                   | 애니메이션 시간 (예: '1.5s')    |
| size        | `'mini'` \| `'small'` \| `'medium'` \| `'large'` | `'medium'`                 | 스피너 크기                    |

## Sizes

-   Spinner는 mini, small, medium, large 네 가지 크기로 제공됩니다

```vue
<template>
    <div class="flex items-center space-x-4">
        <Spinner size="mini" />
        <Spinner size="small" />
        <Spinner size="medium" />
        <Spinner size="large" />
    </div>
</template>
```

## Custom Color

-   Spinner의 색상을 변경할 수 있습니다

```vue
<template>
    <div class="flex items-center space-x-4">
        <Spinner color="var(--primary-700)" />
        <Spinner color="var(--red-700)" />
        <Spinner color="var(--green-700)" />
    </div>
</template>
```

## Custom Animation Duration

-   Spinner의 애니메이션 속도를 조절할 수 있습니다 (기본값: 1.5s)

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { Spinner } from '@jennifersoft/vue-components-v2';

const customDuration = ref('2000ms'); // 2 seconds
</script>
<template>
    <div class="flex items-center space-x-4">
        <div class="flex flex-col items-center">
            <span>Fast (500ms)</span>
            <Spinner :duration="'0.5s'" />
        </div>
        <div class="flex flex-col items-center">
            <span>Default (1.5s)</span>
            <Spinner :duration="'1.5s'" />
        </div>
        <div class="flex flex-col items-center">
            <span>Slow (2000ms)</span>
            <Spinner :duration="customDuration" />
        </div>
    </div>
</template>
```

<div class="components-example flex items-center space-x-4">
    <div class="flex flex-col items-center">
        <span>Fast (500ms)</span>
        <Spinner :duration="'0.5s'" />
    </div>
    <div class="flex flex-col items-center">
        <span>Default (1.5s)</span>
        <Spinner :duration="'1.5s'" />
    </div>
    <div class="flex flex-col items-center">
        <span>Slow (2000ms)</span>
        <Spinner :duration="customDuration" />
    </div>
</div>

### File: misc/progress-spinner.md

# Progress Spinner

Progress Spinner는 진행 상태를 원형 애니메이션으로 표시하는 컴포넌트입니다. 로딩 상태를 표시하거나 특정 작업의 진행률을 시각적으로 나타낼 때 사용합니다.

// 애니메이션용 진행률 상태 관리
const baseProgress = ref(0);
const smallProgress = ref(0);
const mediumProgress = ref(0);
const largeProgress = ref(0);
const colorProgress = ref(0);
const exampleProgress = ref(0);
let timers = [];

// 랜덤하게 진행률 증가 함수
const increaseProgress = (progressRef) => {
    // 랜덤하게 1~5% 증가
    progressRef.value += Math.random() * 0.05;
    
    // 100%를 넘으면 다시 0으로 리셋
    if (progressRef.value >= 1) {
        progressRef.value = 0;
    }
};

onMounted(() => {
    // 각 예제별 타이머 설정
    timers.push(setInterval(() => increaseProgress(baseProgress), 100));
    timers.push(setInterval(() => increaseProgress(smallProgress), 80));
    timers.push(setInterval(() => increaseProgress(mediumProgress), 120));
    timers.push(setInterval(() => increaseProgress(largeProgress), 140));
    timers.push(setInterval(() => increaseProgress(colorProgress), 110));
    timers.push(setInterval(() => increaseProgress(exampleProgress), 130));
});

onBeforeUnmount(() => {
    // 모든 타이머 정리
    timers.forEach(timer => clearInterval(timer));
});
</script>

## 기본 사용법

```vue
<template>
    <ProgressSpinner />
</template>

## Props

| 속성            | 타입     | 기본값                       | 설명                                 |
| --------------- | -------- | ---------------------------- | ------------------------------------ |
| `progressRatio` | `number` | `0`                          | 진행률을 나타내는 값 (0 ~ 1 사이)    |
| `color`         | `string` | `var(--overlay-primary-900)` | 진행 표시기의 색상                   |
| `circleColor`   | `string` | `var(--overlay-primary-100)` | 배경 원의 색상                       |
| `duration`      | `string` | `1.5s`                       | 애니메이션 지속 시간                 |
| `size`          | `string` | `medium`                     | 컴포넌트 크기 (small, medium, large) |

## 진행률 표시하기

`progressRatio` 속성을 사용하여 0부터 1 사이의 값으로 진행률을 표시할 수 있습니다:

```vue
<template>
    <ProgressSpinner :progressRatio="0.75" />
</template>
```

위 예제는 원형의 75%가 채워진 상태를 보여줍니다.

## 크기 옵션

Progress Spinner는 세 가지 크기를 지원합니다:

-   `small`: 24px
-   `medium`: 32px (기본값)
-   `large`: 48px

```vue
<template>
    <ProgressSpinner size="small" />
    <ProgressSpinner />
    
    <ProgressSpinner size="large" />
</template>
```

## 색상 변경하기

기본 색상을 변경하려면 `color`와 `circleColor` 속성을 사용합니다:

```vue
<template>
    <ProgressSpinner
        color="var(--primary-700)"
        circleColor="var(--overlay-200)"
    />
</template>
```

## 동작 원리

Progress Spinner는 SVG 요소를 사용하여 원형 진행률을 표시합니다. `stroke-dasharray`와 `stroke-dashoffset` 속성을 활용하여 원의 일부분만 표시함으로써 진행률을 시각화합니다.

진행률은 다음과 같이 계산됩니다:

1. 원의 둘레(circumference)를 계산합니다: `2 * π * 반지름`
2. `progressRatio` 값(0~1)에 따라 stroke-dasharray 속성을 설정합니다
3. 이를 통해 원의 특정 부분만 표시되도록 합니다

## 예제: 로딩 상태와 진행률 표시

```vue
<template>
    <div>
        
        <div>
            <h3>로딩 중: {{ Math.round(autoProgress * 100) }}%</h3>
            <ProgressSpinner :progressRatio="autoProgress" />
        </div>

<div>
            <h3>다운로드 진행률: {{ Math.round(progress * 100) }}%</h3>
            <ProgressSpinner :progressRatio="progress" />
        </div>
    </div>
</template>

const progress = ref(0.35); // 35% 진행 고정값
const autoProgress = ref(0); // 자동 진행률
let timer = null;

// 랜덤하게 진행률 증가 함수
const increaseProgress = () => {
    // 랜덤하게 1~5% 증가
    autoProgress.value += Math.random() * 0.05;
    
    // 100%를 넘으면 다시 0으로 리셋
    if (autoProgress.value >= 1) {
        autoProgress.value = 0;
    }
};

onMounted(() => {
    // 100ms마다 진행률 업데이트
    timer = setInterval(increaseProgress, 100);
});

onUnmounted(() => {
    // 컴포넌트 해제 시 타이머 정리
    clearInterval(timer);
});
</script>
```

## 예제: 현재 상태

아래는 이 페이지의 모든 예시 스피너들의 현재 진행률을 한눈에 보여줍니다:

<div class="components-example">
    <div class="grid grid-cols-2 gap-4">
        <div class="flex flex-col items-center">
            <p>기본: {{ Math.round(baseProgress * 100) }}%</p>
            <ProgressSpinner :progressRatio="baseProgress" />
        </div>
        <div class="flex flex-col items-center">
            <p>작은: {{ Math.round(smallProgress * 100) }}%</p>
            <ProgressSpinner size="small" :progressRatio="smallProgress" />
        </div>
        <div class="flex flex-col items-center">
            <p>중간: {{ Math.round(mediumProgress * 100) }}%</p>
            <ProgressSpinner :progressRatio="mediumProgress" />
        </div>
        <div class="flex flex-col items-center">
            <p>큰: {{ Math.round(largeProgress * 100) }}%</p>
            <ProgressSpinner size="large" :progressRatio="largeProgress" />
        </div>
        <div class="flex flex-col items-center">
            <p>색상: {{ Math.round(colorProgress * 100) }}%</p>
            <ProgressSpinner :progressRatio="colorProgress" color="var(--primary-700)" circleColor="var(--overlay-200)" />
        </div>
        <div class="flex flex-col items-center">
            <p>고정값: 75%</p>
            <ProgressSpinner :progressRatio="0.75" />
        </div>
    </div>
</div>

## 접근성

Progress Spinner 컴포넌트는 `role="progressbar"` 속성을 포함하여 스크린 리더 등의 접근성 도구에서 적절하게 인식됩니다.

### File: misc/skeleton.md

# Skeleton

-   데이터 로딩 중에 UI 레이아웃을 미리 표시하는 플레이스홀더 컴포넌트
-   실제 콘텐츠가 로드되기 전에 화면 구조를 유지하여 사용자 경험 향상
-   펄스 애니메이션으로 로딩 상태를 시각적으로 표시
-   라인별 스켈레톤 효과로 텍스트가 여러 줄일 때 각 줄마다 스켈레톤 표시

const loading = ref(true);
const toggleLoading = () => {
    loading.value = !loading.value;
};

const exampleWidth = ref('120px');
const exampleHeight = ref('24px');
</script>

## Basic

```vue
<script setup lang="ts">
import { Skeleton } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <Skeleton width="120px" height="24px" />
</template>
```

## Props

| Prop      | Type             | Default    | Description                                |
| --------- | ---------------- | ---------- | ------------------------------------------ |
| loading   | `boolean`        | `true`     | 스켈레톤 로딩 상태 활성화 여부             |
| radius    | `string\|number` | `'0.5rem'` | 스켈레톤 테두리 반경                       |
| width     | `string\|number` | -          | 인라인 모드에서 너비 (자식 있는 경우 무시) |
| minWidth  | `string\|number` | -          | 최소 너비                                  |
| maxWidth  | `string\|number` | -          | 최대 너비                                  |
| height    | `string\|number` | -          | 높이                                       |
| minHeight | `string\|number` | `'1rem'`   | 최소 높이 (height가 지정된 경우 무시)      |
| maxHeight | `string\|number` | -          | 최대 높이                                  |

## Toggle Loading

-   `loading` prop으로 로딩 상태를 제어할 수 있습니다

<div class="components-example">
    <Btn
        :type="loading ? 'primary-filled' : 'outlined'"
        :text="loading ? '로딩 중지' : '로딩 시작'"
        @click="toggleLoading"
    />
    <div>
        <Skeleton :loading="loading">
            <div>로딩 중지 시 이 내용이 표시됩니다.</div>
        </Skeleton>
    </div>
</div>

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { Skeleton } from '@jennifersoft/vue-components-v2';

const loading = ref(true);
const toggleLoading = () => {
    loading.value = !loading.value;
};
</script>
<template>
    <div class="space-y-4">
        <Btn
            :type="loading ? 'primary-filled' : 'outlined'"
            :text="loading ? '로딩 중지' : '로딩 시작'"
            @click="toggleLoading"
        />
        <div>
            <Skeleton :loading="loading" width="120px" height="24px" />
        </div>
    </div>
</template>
```

## Inline Mode (No Children)

-   자식 요소 없이 사용하면 인라인 모드로 작동합니다
-   `width`, `height`, `radius` 등의 속성으로 스타일을 직접 제어할 수 있습니다

```vue
<template>
    <div class="space-y-4">
        <div class="flex items-center space-x-4">
            <Skeleton width="60px" height="60px" radius="50%" />
            <div class="flex gap-2">
                <Skeleton width="120px" height="20px" />
                <Skeleton width="80px" height="16px" />
            </div>
        </div>
    </div>
</template>
```

## With Children

-   자식 요소가 있을 경우, 로딩 상태에서는 자식 요소를 숨기고 스켈레톤 효과를 표시합니다
-   로딩이 완료되면 자동으로 실제 콘텐츠가 표시됩니다
-   자식 요소의 DOM 구조와 레이아웃을 유지합니다

<div class="components-example flex gap-2">
    <button @click="toggleLoading" class="px-3 py-1 border rounded">
        {{ loading ? '로딩 중지' : '로딩 시작' }}
    </button>
    <Skeleton :loading="loading">
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Pellentesque felis tellus, efficitur id convallis a, viverra
            eget libero. Nam magna erat, fringilla sed commodo sed,
            aliquet nec magna.
        </div>
    </Skeleton>
    <div>
        <Skeleton :loading="loading">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Pellentesque felis tellus, efficitur id convallis a, viverra
            eget libero. Nam magna erat, fringilla sed commodo sed,
            aliquet nec magna.
        </Skeleton>
    </div>
</div>

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { Skeleton } from '@jennifersoft/vue-components-v2';

## Card Example

-   카드 레이아웃에 적용한 예시입니다

<div class="components-example space-y-4">
    <button @click="toggleLoading" class="px-3 py-1 border rounded">
        {{ loading ? '로딩 중지' : '로딩 시작' }}
    </button>
    <div class="flex space-x-4">
        <div class="w-64 p-4 border rounded">
            <Skeleton :loading="loading">
                <div class="aspect-video bg-blue-100 mb-4 rounded"></div>
            </Skeleton>
            <div class="space-y-2 text-sm">
                <Skeleton :loading="loading">
                    <h3 class="text-lg font-bold">카드 제목</h3>
                </Skeleton>
                <Skeleton :loading="loading">
                    <p class="text-sm">
                    카드 설명 텍스트입니다. 로딩이 완료되면 표시됩니다.
                    </p>
                </Skeleton>
            </div>
        </div>
    </div>
</div>

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { Skeleton } from '@jennifersoft/vue-components-v2';

## 동작 방식

Skeleton 컴포넌트는 두 가지 주요 모드로 동작합니다:

### 인라인 텍스트 모드

-   텍스트 콘텐츠를 감쌀 때 적용됩니다 (예: `<p>`, `<span>` 등의 텍스트)
-   **라인별 스켈레톤 효과**: 텍스트가 여러 줄일 경우 각 줄마다 개별 스켈레톤이 표시됩니다
-   `line-height: 0`, `box-decoration-break: clone` 속성을 통해 라인별 효과 구현
-   원래 텍스트의 줄바꿈, 폰트 크기, 간격이 그대로 유지됩니다

### 엘리먼트 래핑 모드

-   요소나 컴포넌트를 감쌀 때 적용됩니다 (예: `<div>`, `<img>` 등)
-   원본 DOM 구조를 유지하면서 스켈레톤 효과만 적용합니다
-   로딩 중에는 자식 요소의 가시성만 숨기고(visibility: hidden) 레이아웃은 유지
-   `inert` 속성과 `aria-busy` 속성으로 접근성 보장 및 인터랙션 차단

둘 다 다음과 같은 공통 기능을 제공합니다:

-   로딩 상태에서 원본 콘텐츠와 동일한 크기와 모양 유지
-   펄스 애니메이션으로 로딩 중임을 시각적으로 표시
-   사용자 상호작용 차단 (pointer-events: none)

## Custom Radius

-   `radius` prop으로 테두리 반경을 조절할 수 있습니다

```vue
<template>
    <div class="flex space-x-4">
        <Skeleton width="80px" height="80px" radius="4px" />
        <Skeleton width="80px" height="80px" radius="8px" />
        <Skeleton width="80px" height="80px" radius="16px" />
        <Skeleton width="80px" height="80px" radius="40px" />
    </div>
</template>
```

## Legend

### File: legend/legend.md

# Legend

`Legend`는 차트나 리스트 등에서 색상과 라벨을 함께 보여주는 범례 컴포넌트입니다.

// 데모용 데이터와 상태
 const legendItems = [
     { key: 'cpu', label: 'CPU', color: '#22C55E' },
     { key: 'memory', label: 'Memory', color: '#3B82F6' },
     { key: 'disk', label: 'Disk', color: '#F97316' },
 ];
 const selected = ref('');

const toggleSelect = (key: string) => {
     selected.value = selected.value === key ? '' : key;
 };

const getStatus = (key: string) => {
     if (!selected.value) return 'default';
     return selected.value === key ? 'active' : 'inactive';
 };
 </script>

## Props

### 타입별 Props 제약

-   **static**: `type: 'static' | undefined`, `status: 'default'` 고정
-   **interactive**: `type: 'interactive'`, `status: 'default' | 'active' | 'inactive'`

## Usage

### Static

<div class="components-example">
     <Legend label="CPU" color="#4F46E5" />
 </div>
 
 ```vue
 <Legend label="CPU" color="#4F46E5" />
 ```

### Interactive (상태별)

<div class="components-example flex gap-4 items-start">
     <Legend type="interactive" status="default" label="CPU" color="#22C55E" />
     <Legend type="interactive" status="active" label="Memory" color="#3B82F6" />
     <Legend type="interactive" status="inactive" label="Disk" color="#F97316" />
 </div>
 
 ```vue
 <Legend type="interactive" status="default" label="CPU" color="#22C55E" />
 <Legend type="interactive" status="active" label="Memory" color="#3B82F6" />
 <Legend type="interactive" status="inactive" label="Disk" color="#F97316" />
 ```

### Interactive 상태 전환 예시

선택된 항목만 `active`, 나머지는 `inactive`, 선택이 없으면 모두 `default`로 표시되는 예시입니다. 같은 항목을 다시 클릭하면 선택이 해제되어 모두 `default` 상태로 돌아갑니다.

<div class="components-example flex flex-col gap-4">
    
    <div class="bg-[var(--gray-200)] px-3 py-2 rounded typo-body-large">selected: {{ selected || 'none' }}</div>
    <div class="flex gap-4 items-start">
        <div
            v-for="item in legendItems"
            :key="item.key"
            class="inline-flex"
            @click="toggleSelect(item.key)"
        >
            <Legend
                type="interactive"
                :status="getStatus(item.key)"
                :label="item.label"
                :color="item.color"
            />
        </div>
    </div>
    
 </div>

```vue
<template>
    <div class="flex gap-4 items-start">
        <div>selected: {{ selected || 'none' }}</div>
        <div
            v-for="item in legendItems"
            :key="item.key"
            class="inline-flex"
            @click="toggleSelect(item.key)"
        >
            <Legend
                type="interactive"
                :status="getStatus(item.key)"
                :label="item.label"
                :color="item.color"
            />
        </div>
    </div>
</template>

const legendItems = [
    { key: 'cpu', label: 'CPU', color: '#22C55E' },
    { key: 'mem', label: 'Memory', color: '#3B82F6' },
    { key: 'disk', label: 'Disk', color: '#F97316' },
];
const selected = ref('');

const toggleSelect = (key: string) => {
    selected.value = selected.value === key ? '' : key;
};

const getStatus = (key: string) => {
    if (!selected.value) return 'default';
    return selected.value === key ? 'active' : 'inactive';
};
</script>
```

## Status Indicator

### File: status-indicator/index.md

# StatusIndicator

`StatusIndicator`는 상태를 시각적으로 표시하는 데 사용되는 컴포넌트입니다.

## Props

## Usage

### Default

<div class="components-example">
    <StatusIndicator color="blue">Running</StatusIndicator>
</div>

```vue
<StatusIndicator color="blue">Running</StatusIndicator>
```

### Fill

<div class="components-example">
    <StatusIndicator type="fill" color="blue">Running</StatusIndicator>
</div>

```vue
<StatusIndicator type="fill" color="blue">Running</StatusIndicator>
```

### Dot

`dot` 타입은 텍스트 왼쪽에 색상 점을 표시합니다.

<div class="components-example">
    <StatusIndicator type="dot" color="blue">Running</StatusIndicator>
</div>

```vue
<StatusIndicator type="dot" color="blue">Running</StatusIndicator>
```

## Examples

### Default

<div class="components-example flex-col gap-4 items-start pl-10">
    
    <div class="flex gap-3">
        <StatusIndicator size="small" color="blue">Blue</StatusIndicator>
        <StatusIndicator size="small" color="red">Red</StatusIndicator>
        <StatusIndicator size="small" color="orange">Orange</StatusIndicator>
        <StatusIndicator size="small" color="yellow">Yellow</StatusIndicator>
        <StatusIndicator size="small" color="green">Green</StatusIndicator>
    </div>
    
    <div class="flex gap-3">
        <StatusIndicator size="medium" color="blue">Blue</StatusIndicator>
        <StatusIndicator size="medium" color="red">Red</StatusIndicator>
        <StatusIndicator size="medium" color="orange">Orange</StatusIndicator>
        <StatusIndicator size="medium" color="yellow">Yellow</StatusIndicator>
        <StatusIndicator size="medium" color="green">Green</StatusIndicator>
    </div>
    
    <div class="flex gap-3">
        <StatusIndicator size="large" color="blue">Blue</StatusIndicator>
        <StatusIndicator size="large" color="red">Red</StatusIndicator>
        <StatusIndicator size="large" color="orange">Orange</StatusIndicator>
        <StatusIndicator size="large" color="yellow">Yellow</StatusIndicator>
        <StatusIndicator size="large" color="green">Green</StatusIndicator>
    </div>
</div>

### Fill

<div class="components-example flex-col gap-4 items-start pl-10">
    
    <div class="flex gap-3">
        <StatusIndicator type="fill" size="small" color="blue">Blue</StatusIndicator>
        <StatusIndicator type="fill" size="small" color="red">Red</StatusIndicator>
        <StatusIndicator type="fill" size="small" color="orange">Orange</StatusIndicator>
        <StatusIndicator type="fill" size="small" color="yellow">Yellow</StatusIndicator>
        <StatusIndicator type="fill" size="small" color="green">Green</StatusIndicator>
    </div>
    
    <div class="flex gap-3">
        <StatusIndicator type="fill" size="medium" color="blue">Blue</StatusIndicator>
        <StatusIndicator type="fill" size="medium" color="red">Red</StatusIndicator>
        <StatusIndicator type="fill" size="medium" color="orange">Orange</StatusIndicator>
        <StatusIndicator type="fill" size="medium" color="yellow">Yellow</StatusIndicator>
        <StatusIndicator type="fill" size="medium" color="green">Green</StatusIndicator>
    </div>
    
    <div class="flex gap-3">
        <StatusIndicator type="fill" size="large" color="blue">Blue</StatusIndicator>
        <StatusIndicator type="fill" size="large" color="red">Red</StatusIndicator>
        <StatusIndicator type="fill" size="large" color="orange">Orange</StatusIndicator>
        <StatusIndicator type="fill" size="large" color="yellow">Yellow</StatusIndicator>
        <StatusIndicator type="fill" size="large" color="green">Green</StatusIndicator>
    </div>
</div>

### Dot

<div class="components-example flex-col gap-4 items-start pl-10">
    
    <div class="flex gap-3">
        <StatusIndicator type="dot" size="small" color="blue">Blue</StatusIndicator>
        <StatusIndicator type="dot" size="small" color="red">Red</StatusIndicator>
        <StatusIndicator type="dot" size="small" color="orange">Orange</StatusIndicator>
        <StatusIndicator type="dot" size="small" color="yellow">Yellow</StatusIndicator>
        <StatusIndicator type="dot" size="small" color="green">Green</StatusIndicator>
    </div>
    
    <div class="flex gap-3">
        <StatusIndicator type="dot" size="medium" color="blue">Blue</StatusIndicator>
        <StatusIndicator type="dot" size="medium" color="red">Red</StatusIndicator>
        <StatusIndicator type="dot" size="medium" color="orange">Orange</StatusIndicator>
        <StatusIndicator type="dot" size="medium" color="yellow">Yellow</StatusIndicator>
        <StatusIndicator type="dot" size="medium" color="green">Green</StatusIndicator>
    </div>
    
    <div class="flex gap-3">
        <StatusIndicator type="dot" size="large" color="blue">Blue</StatusIndicator>
        <StatusIndicator type="dot" size="large" color="red">Red</StatusIndicator>
        <StatusIndicator type="dot" size="large" color="orange">Orange</StatusIndicator>
        <StatusIndicator type="dot" size="large" color="yellow">Yellow</StatusIndicator>
        <StatusIndicator type="dot" size="large" color="green">Green</StatusIndicator>
    </div>
</div>

## Tab

### File: tab/tabs.md

# Tabs

탭(Tabs) 컴포넌트는 사용자가 키보드나 마우스를 사용하여 여러 개의 콘텐츠 패널 중 하나를 선택하고 전환할 수 있도록 하는 요소입니다.
각 탭은 특정 패널을 대표하며, 클릭 또는 선택 시 해당 패널의 내용이 표시됩니다.

const tabs = [
    { tabKey: 'tab1', label: 'Tab 1', tooltip: { text: '툴팁 내용' } },
    { tabKey: 'tab2', label: 'Tab 2 Tab 2 Tab 2', tooltip: { text: '툴팁 내용' } },
    { tabKey: 'tab3', label: 'Tab 3', icon: ICON_TYPE.pod, tooltip: { text: '툴팁 내용' } },
    { tabKey: 'tab4', label: 'Tab 4', badgeContent: 10, tooltip: { text: '툴팁 내용' } },
    { tabKey: 'tab5', label: 'Tab 5', badgeContent: 10, icon: ICON_TYPE.pod, tooltip: { text: '툴팁 내용' } },
    {
        tabKey: 'tab6',
        label: 'Tab 6',
        disabled: true,
        badgeContent: 10,
        icon: ICON_TYPE.pod,
        tooltip: { text: '툴팁 내용' },
    },
];
const activeTab = ref('tab1');

const handleSelectTab = (key) => {
    activeTab.value = key;
    console.log('Tab selected:', key);
};
const handleFocusTab = (key) => {
    console.log('Tab focused:', key);
};
</script>

## 기본 사용법

```vue
<template>
    <tabs
        :active-tab="activeTab"
        :tabs="tabs"
        @select:tab="handleSelectTab"
        @focus:tab="handleFocusTab"
    />
    <div>{{ activeTab }}</div>
</template>

const tabs = [
    { tabKey: 'tab1', label: 'Tab 1', tooltip: { text: '툴팁 내용' } },
    {
        tabKey: 'tab2',
        label: 'Tab 2 Tab 2 Tab 2',
        tooltip: { text: '툴팁 내용' },
    },
    {
        tabKey: 'tab3',
        label: 'Tab 3',
        icon: ICON_TYPE.pod,
        tooltip: { text: '툴팁 내용' },
    },
    {
        tabKey: 'tab4',
        label: 'Tab 4',
        badgeContent: 10,
        tooltip: { text: '툴팁 내용' },
    },
    {
        tabKey: 'tab5',
        label: 'Tab 5',
        badgeContent: 10,
        icon: ICON_TYPE.pod,
        tooltip: { text: '툴팁 내용' },
    },
    {
        tabKey: 'tab6',
        label: 'Tab 6',
        disabled: true,
        badgeContent: 10,
        icon: ICON_TYPE.pod,
    },
];
const activeTab = ref('tab1');

const handleSelectTab = (key) => {
    activeTab.value = key;
};
const handleFocusTab = (key) => {
    console.log('Tab focused:', key);
};
</script>
```

## Props

### Tabs 컴포넌트

| Prop 이름     | 타입                         | 필수 여부 | 기본값   | 설명                                            |
| ------------- | ---------------------------- | --------- | -------- | ----------------------------------------------- |
| activeTab     | `string \| number \| symbol` | Yes       | -        | 현재 선택된 탭의 키                             |
| tabs          | `TabItem[]`                  | Yes       | -        | 탭 아이템 배열                                  |
| tabIdentifier | `string`                     | No        | `'tabs'` | 탭의 고유 키를 생성할 때 사용되는 접두사 식별자 |

tabIdentifier 는 tabs props가 변경되었지만 tab key가 그대로 유지되는 경우 indicator가 제대로 작동하지 않거나 Tab 컴포넌트 자체가 제대로 업데이트 되지 않는 현상을 방지하기 위한 추가 식별자입니다. Tabs 컴포넌트에서는 기본값이 `'tabs'` 입니다.

### TabItem 인터페이스

| 속성         | 타입                         | 필수 여부 | 설명                  |
| ------------ | ---------------------------- | --------- | --------------------- |
| tabKey       | `string \| number \| symbol` | Yes       | 탭을 식별하는 고유 키 |
| label        | `string`                     | Yes       | 탭에 표시될 텍스트    |
| disabled     | `boolean`                    | No        | 탭 비활성화 여부      |
| tooltip      | `TooltipProps`               | No        | 탭에 표시될 툴팁      |
| icon         | `IconTypes`                  | No        | 탭에 표시될 아이콘    |
| badgeContent | `number`                     | No        | 배지에 표시될 숫자    |
| contextKey   | `any`                        | No        | 탭의 컨텍스트 키      |

## Example

<div style="margin-top: 24px">{{ activeTab }}</div>

## Events

| 이벤트 이름 | 파라미터                             | 설명                      |
| ----------- | ------------------------------------ | ------------------------- |
| select:tab  | `tabKey: string \| number \| symbol` | 탭이 선택되었을 때 발생   |
| focus:tab   | `tabKey: string \| number \| symbol` | 탭이 포커스되었을 때 발생 |

## 접근성

-   키보드 탐색이 지원됩니다
-   비활성화된 탭은 `disabled` 속성이 적용됩니다

## Tab Contraction

Tabs는 고수준 편의 래퍼(Tabs 컴포넌트) 외에도, 더 유연한 조합형 API를 제공합니다. 이 계약을 `TabContraction`이라고 하며, 아래 세 부분으로 구성됩니다.

- **[TabList]**
- **[Tab]**
- **[contextKey]**

### TabList

- **개요**
  - `Tab` 항목을 감싸는 리스트 컨테이너입니다.
  - 키보드 내비게이션, 인디케이터(Primary) 등을 관리합니다.

#### Props

| Prop 이름   | 타입                                                              | 필수 여부 | 기본값        | 설명                       |
| ----------- | ----------------------------------------------------------------- | --------- | ------------- | -------------------------- |
| selectedKey | `string \| number \| symbol`                                      | Yes       | -             | 현재 선택된 탭의 키        |
| contextKey  | `string \| InjectionKey<TabContraction['context']>`               | No        | `'tabContext'`| 탭 그룹 컨텍스트 키        |
| type        | `'primary' \| 'secondary'`                                        | No        | `'primary'`   | 탭 리스트 스타일           |

#### Events

| 이벤트 이름 | 파라미터                            | 설명                    |
| ----------- | ----------------------------------- | ----------------------- |
| select:tab  | `tabKey: string \| number \| symbol` | 탭이 선택되었을 때 발생 |
| focus:tab   | `tabKey: string \| number \| symbol` | 탭이 포커스되었을 때    |

### Tab

#### Props

| Prop 이름    | 타입                                                              | 필수 여부 | 기본값 | 설명           |
| ------------ | ----------------------------------------------------------------- | --------- | ------ | ---------------- |
| contextKey   | `string \| InjectionKey<TabContraction['context']>`               | No        | -      | 탭 컨텍스트 키   |
| tabKey       | `string \| number \| symbol`                                      | Yes       | -      | 탭 고유 키       |
| label        | `string`                                                           | Yes       | -      | 탭 라벨          |
| disabled     | `boolean`                                                          | No        | `false`| 비활성화 여부    |
| tooltip      | `TooltipProps`                                                     | No        | -      | 툴팁             |
| icon         | `IconTypes`                                                        | No        | -      | 아이콘           |
| badgeContent | `number`                                                           | No        | -      | 배지 숫자        |

### contextKey

- 동일 화면에 서로 다른 탭 그룹이 공존할 때 상호 간섭을 막기 위해 사용합니다.
- `const contextKey = Symbol('tabContext')` 형태로 정의 후 `TabList`와 각 `Tab`에 동일하게 전달하세요.

### Context API

| 이름        | 타입                                                      | 설명                        |
| ----------- | --------------------------------------------------------- | --------------------------- |
| selectedKey | `Ref<string \| number \| symbol>`                         | 현재 선택된 탭 키           |
| focusedKey  | `Ref<string \| number \| symbol \| null>`                 | 현재 포커스된 탭 키         |
| tabElemMap  | `Map<string \| number \| symbol, HTMLElement>`            | 탭 키와 엘리먼트 매핑       |
| tabOrder    | `(string \| number \| symbol)[]`                          | 탭 렌더링 및 탐색 순서      |
| selectTab   | `(key: string \| number \| symbol) => void`               | 지정 키를 선택              |
| focusTab    | `(key: string \| number \| symbol) => void`               | 지정 키로 포커스 이동       |
| register    | `(key: string \| number \| symbol, el: HTMLElement) => void` | 탭 요소 등록           |

### Tabs 래퍼와의 관계

- `Tabs` 컴포넌트는 위의 `TabList` + `Tab`을 조합하여 사용하기 쉬운 고수준 래퍼입니다.
- `tabIdentifier`는 `tabs` 배열이 갱신될 때 인디케이터/렌더링 동기화를 돕는 보조 식별자입니다.

### 예시: 조합형 사용(Primary)

```vue
<template>
  <tab-list
    :selected-key="active"
    :context-key="contextKey"
    @select:tab="onSelect"
    @focus:tab="onFocus"
  >
    <tab :context-key="contextKey" tab-key="tab1" label="Tab 1" />
    <tab :context-key="contextKey" tab-key="tab2" label="Tab 2" />
    <tab :context-key="contextKey" tab-key="tab3" label="Tab 3" />
  </tab-list>
</template>

const contextKey = Symbol('tabContext');
const active = ref('tab1');

const onSelect = (key: string | number | symbol) => {
  active.value = key as any;
};
const onFocus = (key: string | number | symbol) => {
  console.log('focus', key);
};
</script>

### File: tab/secondary.md

# Secondary Tabs

Secondary Tabs 컴포넌트는 2차 메뉴나 서브 탐색에 사용되는 인터페이스 요소입니다. Primary Tabs와 달리 배경색이 있고 더 컴팩트한 디자인을 가지고 있습니다.

const tabs = [
    { tabKey: 'tab1', label: 'Tab 1', tooltip: { text: '툴팁 내용' } },
    { tabKey: 'tab2', label: 'Tab 2 Tab 2 Tab 2', tooltip: { text: '툴팁 내용' } },
    { tabKey: 'tab3', label: 'Tab 3', icon: ICON_TYPE.pod, tooltip: { text: '툴팁 내용' } },
    { tabKey: 'tab4', label: 'Tab 4', badgeContent: 10, tooltip: { text: '툴팁 내용' } },
    { tabKey: 'tab5', label: 'Tab 5', badgeContent: 10, icon: ICON_TYPE.pod, tooltip: { text: '툴팁 내용' } },
    { tabKey: 'tab6', label: 'Tab 6', disabled: true, badgeContent: 10, icon: ICON_TYPE.pod, tooltip: { text: '툴팁 내용' } },
];
const activeTab = ref('tab1');

const handleSelectTab = (key) => {
    activeTab.value = key;
    console.log('Tab selected:', key);
};
const handleFocusTab = (key) => {
    console.log('Tab focused:', key);
};
</script>

## 기본 사용법

```vue
<template>
    <secondary-tabs
        :active-tab="activeTab"
        :tabs="tabs"
        @select:tab="handleSelectTab"
        @focus:tab="handleFocusTab"
    />
</template>

const handleSelectTab = (key) => {
    activeTab.value = key;
    console.log('Tab selected:', key);
};
const handleFocusTab = (key) => {
    console.log('Tab focused:', key);
};
</script>
```

## Props

### SecondaryTabs 컴포넌트

| Prop 이름     | 타입                         | 필수 여부 | 설명                |
| ------------- | ---------------------------- | --------- | ------------------- |
| activeTab     | `string \| number \| symbol` | Yes       | 현재 선택된 탭의 키 |
| tabs          | `TabItem[]`                  | Yes       | 탭 아이템 배열      |
| tabIdentifier | `string`                     | No        | 탭 키 생성용 접두사 |

### TabItem 인터페이스

## Example

<secondary-tabs :active-tab="activeTab" :tabs="tabs" @select:tab="handleSelectTab" @focus:tab="handleFocusTab"/>

<div style="margin-top: 24px">{{ activeTab }}</div>

## Events

## 접근성

-   키보드 탐색이 지원됩니다 (← →)
-   비활성화된 탭은 `disabled` 속성이 적용됩니다
-   포커스 시 시각적 표시가 제공됩니다

## Tab Contraction (Secondary)

Secondary Tabs 역시 조합형 API(`TabContraction`)로 사용할 수 있습니다. Primary와 동일한 계약을 따르며, 스타일만 `secondary`로 적용합니다.

- **[TabList]**: `type='secondary'`를 지정하면 인디케이터 없이 세컨더리 스타일이 적용됩니다
- **[SecondaryTab]**: 각 탭 아이템(아이콘/배지/툴팁/disabled 지원)
- **[contextKey]**: 동일 화면 내 여러 탭 그룹 간 간섭 방지

### TabList (secondary)

#### Props

| Prop 이름   | 타입                                                              | 필수 여부 | 기본값        | 설명                 |
| ----------- | ----------------------------------------------------------------- | --------- | ------------- | -------------------- |
| selectedKey | `string \| number \| symbol`                                      | Yes       | -             | 현재 선택된 탭의 키  |
| contextKey  | `string \| InjectionKey<TabContraction['context']>`               | No        | `'tabContext'`| 탭 그룹 컨텍스트 키  |
| type        | `'secondary'`                                                      | No        | `'secondary'` | 세컨더리 스타일 강제 |

#### Events

### SecondaryTab

#### Props

| Prop 이름    | 타입                                                              | 필수 여부 | 기본값 | 설명            |
| ------------ | ----------------------------------------------------------------- | --------- | ------ | --------------- |
| contextKey   | `string \| InjectionKey<TabContraction['context']>`               | No        | -      | 탭 컨텍스트 키  |
| tabKey       | `string \| number \| symbol`                                      | Yes       | -      | 탭 고유 키      |
| label        | `string`                                                           | Yes       | -      | 탭 라벨         |
| disabled     | `boolean`                                                          | No        | `false`| 비활성화 여부   |
| tooltip      | `TooltipProps`                                                     | No        | -      | 툴팁            |
| icon         | `IconTypes`                                                        | No        | -      | 아이콘          |
| badgeContent | `number`                                                           | No        | -      | 배지 숫자       |

### Context API

### 예시: 조합형 사용(Secondary)

```vue
<template>
  <tab-list
    type="secondary"
    :selected-key="active"
    :context-key="contextKey"
    @select:tab="onSelect"
    @focus:tab="onFocus"
  >
    <secondary-tab :context-key="contextKey" tab-key="tab1" label="전체" />
    <secondary-tab :context-key="contextKey" tab-key="tab2" label="경고" />
    <secondary-tab :context-key="contextKey" tab-key="tab3" label="에러" />
  </tab-list>
</template>

const contextKey = Symbol('tabContext');
const active = ref('tab1');

const onSelect = (key: string | number | symbol) => {
  active.value = key as any;
};
const onFocus = (key: string | number | symbol) => {
  console.log('focus', key);
};
</script>

## Scroll

### File: scroll/index.md

# Overlay Scroll

오버레이 스크롤(Overlay Scroll) 컴포넌트는 기본 브라우저 스크롤바를 대체하여 사용자 정의 스크롤바를 제공하는 UI 요소입니다.
이 컴포넌트는 브라우저의 기본 스크롤 기능을 유지하면서 OS 및 브라우저 환경과 무관하게 시각적으로 일관된 사용자 경험을 제공합니다.

const scrollEvent = (e) => {
  console.log('Scroll event:', e);
};

// 동적 예시를 위한 변수/함수
const itemCount = ref(30);
const MIN_ITEMS = 30;
const MAX_ITEMS = 300;

const addItems = () => {
  if (itemCount.value + 30 <= MAX_ITEMS) {
    itemCount.value += 30;
  } else {
    window.alert('더이상 추가할 수 없습니다.');
  }
};

const removeItems = () => {
  if (itemCount.value - 30 >= MIN_ITEMS) {
    itemCount.value -= 30;
  } else {
    window.alert('더이상 삭제할 수 없습니다.');
  }
};
</script>

## 기본 사용법

```vue
<template>
    <div style="height: 300px; width: 100%;">
        <OverlayScroll @scroll="handleScroll">
            <div>
                
                <p v-for="i in 20" :key="i">스크롤 콘텐츠 라인 {{ i }}</p>
            </div>
        </OverlayScroll>
    </div>
</template>

const handleScroll = (e) => {
    console.log('Scroll event:', e);
};
</script>
```

## Props

이 컴포넌트는 Props를 받지 않습니다.

## Example

## 동적 콘텐츠 예시

아래 예시는 콘텐츠 양이 변경될 때 스크롤 썸(thumb)의 크기와 위치가 자동으로 조정되는 것을 보여줍니다. 버튼을 클릭하여 아이템 개수를 늘리거나 줄여보세요.

```vue
<template>
    <div>
        <div style="margin-bottom: 16px;">
            <button @click="addItems" style="margin-right: 8px;">
                아이템 늘리기
            </button>
            <button @click="removeItems">아이템 줄이기</button>
            <span style="margin-left: 16px;"
                >현재 아이템 개수: {{ itemCount }}</span
            >
        </div>

const itemCount = ref(30);
const MIN_ITEMS = 30;
const MAX_ITEMS = 300;

const addItems = () => {
    if (itemCount.value + 30 <= MAX_ITEMS) {
        itemCount.value += 30;
    } else {
        window.alert('더이상 추가할 수 없습니다.');
    }
};

<div>
    <div style="margin-bottom: 16px;">
        <Btn type="outlined" text="아이템 늘리기" @click="addItems" style="margin-right: 8px;"/>
        <Btn type="outlined" text="아이템 줄이기" @click="removeItems"/>
        <span style="margin-left: 16px;">현재 아이템 개수: {{ itemCount }}</span>
    </div>
    <div style="height: 400px; width: 100%; border: 1px solid #ddd; border-radius: 4px;">
        <OverlayScroll>
            <div style="padding: 16px;">
                <p v-for="i in itemCount" :key="i" style="margin-bottom: 8px;">
                    아이템 {{ i }}
                </p>
            </div>
        </OverlayScroll>
    </div>
</div>

## 가로 스크롤 예시

가로 스크롤이 필요한 경우에도 OverlayScroll 컴포넌트를 활용할 수 있습니다. 컴포넌트는 자동으로 콘텐츠의 가로 너비를 감지하여 필요한 경우 가로 스크롤바를 표시합니다.

```vue
<template>
    <div
        style="height: 200px; width: 100%; border: 1px solid #ddd; border-radius: 4px;"
    >
        <OverlayScroll>
            <div style="padding: 16px; width: 1200px;">
                <div style="display: flex; gap: 16px;">
                    <div
                        v-for="i in 10"
                        :key="i"
                        style="min-width: 100px; height: 150px; background-color: #f0f0f0; border-radius: 4px; display: flex; justify-content: center; align-items: center;"
                    >
                        항목 {{ i }}
                    </div>
                </div>
            </div>
        </OverlayScroll>
    </div>
</template>

## 동작 원리

오버레이 스크롤 컴포넌트는 다음과 같은 방식으로 동작합니다:

1. 실제 스크롤은 브라우저의 기본 스크롤 메커니즘을 사용합니다.
2. 기본 스크롤바는 CSS를 통해 시각적으로 숨겨집니다.
3. 사용자 정의 스크롤 트랙과 썸(thumb)이 오버레이로 표시됩니다.
4. 스크롤 이벤트가 발생하면 사용자 정의 썸의 위치가 실제 스크롤 위치에 맞게 업데이트됩니다.
5. ResizeObserver를 사용하여 콘텐츠 크기 변경을 감지하고 썸 크기와 위치를 자동으로 조정합니다.

## 구성 요소

컴포넌트는 다음과 같은 주요 요소로 구성됩니다:

-   **스크롤 래퍼(Wrapper)**: 전체 컴포넌트를 감싸는 컨테이너
-   **스크롤 트랙(Track)**: 사용자 정의 스크롤바가 움직이는 영역
-   **스크롤 썸(Thumb)**: 사용자가 볼 수 있는 스크롤바 핸들
-   **스크롤 박스(Box)**: 실제 스크롤이 적용되는 영역
-   **스크롤 콘텐츠(Content)**: 사용자가 제공하는 실제 콘텐츠가 들어가는 영역

## Events

| 이벤트 이름 | 파라미터     | 설명                                                       |
| ----------- | ------------ | ---------------------------------------------------------- |
| scroll      | event: Event | 스크롤이 발생했을 때 트리거됨. 네이티브 이벤트 그대로 전파 |

## 스타일링

오버레이 스크롤 컴포넌트는 다음과 같은 CSS 클래스를 사용합니다:

-   `.js-overlay-scroll-wrapper`: 전체 컴포넌트 래퍼
-   `.js-overlay-scroll-track`: 스크롤 트랙
-   `.js-overlay-scroll-thumb`: 스크롤 썸(핸들)
-   `.js-overlay-scroll-box`: 스크롤 박스
-   `.js-overlay-scroll-content`: 스크롤 콘텐츠

## 마우스 인터랙션

오버레이 스크롤 컴포넌트는 다음과 같은 마우스 관련 기능을 제공합니다:

1. **스크롤 썸 드래그**: 사용자는 스크롤 썸(thumb)을 클릭한 상태로 드래그하여 스크롤 위치를 조정할 수 있습니다.

2. **스크롤 트랙 클릭**: 사용자가 스크롤 트랙을 클릭하면 클릭한 위치에 따라 페이지 단위로 스크롤됩니다.

## 주의사항

-   컴포넌트가 제대로 작동하려면 부모 요소에 명시적인 높이가 지정되어야 합니다.
-   스크롤 콘텐츠의 높이가 스크롤 박스보다 클 때만 스크롤바가 표시됩니다.
-   스크롤 이벤트는 성능을 위해 `requestAnimationFrame`을 사용하여 최적화되어 있습니다.

## Result

### File: result/index.md

# Result 컴포넌트

Result 컴포넌트는 사용자에게 작업 결과, 상태 또는 피드백을 시각적으로 표시하기 위한 UI 요소입니다. 아이콘, 텍스트 및 색상을 조합하여 다양한 상황에 맞는 결과 화면을 제공합니다.

## 기본 구조

Result 컴포넌트는 다음과 같은 구조로 이루어져 있습니다:

1. 아이콘 영역: 상단에 위치하며 상태를 나타내는 아이콘을 표시
2. 텍스트 영역: 아이콘 아래에 위치하며 캡션, 메인 텍스트, 서브 텍스트를 포함
3. 슬롯: 추가 콘텐츠를 위한 기본 슬롯 제공

## Props

<table>
  <thead>
    <tr>
      <th style="width: 15%">속성</th>
      <th>타입</th>
      <th style="width: 15%">기본값</th>
      <th style="width: 19%">설명</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>iconType</code></td>
      <td><code>IconTypes | 'error-face' | 'dotted-error-face'</code></td>
      <td><code>undefined</code></td>
      <td>아이콘 타입</td>
    </tr>
    <tr>
      <td><code>color</code></td>
      <td><code>'gray' | 'blue' | 'green' | 'red' | 'orange' | 'purple' | 'yellow' | 'pink' | ... | 'primary'</code></td>
      <td><code>'primary'</code></td>
      <td>색상 테마</td>
    </tr>
    <tr>
      <td><code>size</code></td>
      <td><code>'small' | 'medium' | 'large'</code></td>
      <td><code>'medium'</code></td>
      <td>크기</td>
    </tr>
    <tr>
      <td><code>caption</code></td>
      <td><code>string</code></td>
      <td><code>''</code></td>
      <td>상단 작은 텍스트</td>
    </tr>
    <tr>
      <td><code>title</code></td>
      <td><code>string</code></td>
      <td><code>''</code></td>
      <td>주요 텍스트</td>
    </tr>
    <tr>
      <td><code>description</code></td>
      <td><code>string</code></td>
      <td><code>''</code></td>
      <td>부가 설명 텍스트</td>
    </tr>
  </tbody>
</table>

## 크기 변형

```vue
<template>
    <result
        :iconType="ICON_TYPE.checkCircle"
        color="primary"
        size="small"
        caption="작은 크기"
        title="Small 사이즈"
        description="아이콘 크기: 24px, 박스 크기: 48px"
    />
    <result
        :iconType="ICON_TYPE.checkCircle"
        color="primary"
        size="medium"
        caption="중간 크기"
        title="Medium 사이즈"
        description="아이콘 크기: 40px, 박스 크기: 80px"
    />
    <result
        :iconType="ICON_TYPE.checkCircle"
        color="primary"
        size="large"
        caption="큰 크기"
        title="Large 사이즈"
        description="아이콘 크기: 64px, 박스 크기: 112px"
    />
</template>
```

## 아이콘 타입

```vue
<template>
    <result
        iconType="error-face"
        color="red"
        caption="Error Face"
        title="기본 에러 아이콘"
        description="육각형 모양의 얼굴 아이콘"
    />
    <result
        iconType="dotted-error-face"
        color="red"
        caption="Dotted Error Face"
        title="점선 스타일 에러 아이콘"
        description="점선 스타일의 육각형 모양 얼굴 아이콘"
    />
    <result
        :iconType="ICON_TYPE.checkCircle"
        color="green"
        caption="Check Circle"
        title="체크 아이콘"
        description="SvgIcon 컴포넌트의 아이콘 사용"
    />
    <result
        :iconType="ICON_TYPE.infoCircle"
        color="blue"
        caption="Info Circle"
        title="정보 아이콘"
        description="SvgIcon 컴포넌트의 아이콘 사용"
    />
</template>
```

## 색상 테마

```vue
<template>
    <result
        :iconType="ICON_TYPE.checkCircle"
        color="primary"
        caption="Primary"
        title="기본 색상"
    />
    <result
        :iconType="ICON_TYPE.checkCircle"
        color="blue"
        caption="Blue"
        title="파란색 테마"
    />
    <result
        :iconType="ICON_TYPE.checkCircle"
        color="green"
        caption="Green"
        title="녹색 테마"
    />
    <result
        :iconType="ICON_TYPE.checkCircle"
        color="red"
        caption="Red"
        title="빨간색 테마"
    />
    ...
    
</template>
```

## 사용 예시

### title만 사용하는 경우

```vue
<template>
    <result color="primary" title="제목만 표시하는 결과" />
</template>
```

### description만 사용하는 경우

```vue
<template>
    <result
        color="blue"
        description="설명만 표시하는 결과 컴포넌트입니다. 제목 없이 설명만 표시할 수 있습니다."
    />
</template>
```

### title + description 사용하는 경우

```vue
<template>
    <result
        color="green"
        title="제목과 설명이 있는 결과"
        description="제목과 설명을 함께 사용하여 더 자세한 정보를 제공할 수 있습니다."
    />
</template>
```

### icon + title + description 사용하는 경우

```vue
<template>
    <result
        :iconType="ICON_TYPE.checkCircle"
        color="purple"
        title="아이콘이 포함된 결과"
        description="아이콘, 제목, 설명을 모두 사용하여 시각적으로 더 풍부한 결과를 표시합니다."
    />
</template>
```

### icon + caption + title + description + 슬롯에 버튼 추가한 경우

```vue
<template>
    <result
        :iconType="ICON_TYPE.info"
        color="orange"
        caption="캡션도 같이 사용해서 더욱 풍부하게"
        title="사용자 액션이 필요한 결과"
        description="슬롯을 사용하여 버튼이나 다른 컴포넌트를 추가할 수 있습니다."
    >
        <Btn type="primary-filled" text="확인" class="mt-4" />
    </result>
</template>
```

## K8s Components

### File: jennifer-kubernetes/filter.md

onMounted(() => {
    filterOrder1.value = Object.keys(filterMap1.value).sort((a, b) => filterMap1.value[b] - filterMap1.value[a]);
    filterOrder2.value = Object.keys(filterMap2.value).sort((a, b) => filterMap2.value[a] - filterMap2.value[b]);
    filterOrder3.value = Object.keys(filterMap3.value).sort(sortFunctionList.value);
});

watch(() => searchText1.value, () => {
    filterOrder1.value = Object.keys(filterMap1.value)
        .filter((key) => key.includes(searchText1.value))
        .sort((a, b) => filterMap1.value[b] - filterMap1.value[a]);
});

watch(() => searchText2.value, () => {
    filterOrder2.value = Object.keys(filterMap2.value)
        .filter((key) => key.includes(searchText2.value))
        .sort((a, b) => filterMap2.value[b] - filterMap2.value[a]);
});

watchEffect(() => {
    filterOrder3.value = Object.keys(filterMap3.value)
        .filter((key) => key.includes(searchText3.value))
        .sort(sortFunctionList.value);
});

</script>

# Filter

> [!CAUTION]
> JenniferKubernetes 프로젝트에서 사용하는 필터 UI입니다.
> 별도의 패키지로 배포되지 않습니다.

## Basic Usage

### Props

| Name              | Type                                                       | Description                                                         |
| ----------------- | ---------------------------------------------------------- | ------------------------------------------------------------------- |
| `title`           | `string                                                  ` | 필터의 상단 헤더에 위치할 제목입니다.                               |
| `type (Optional)` | `'text' \| 'portion'                                     ` | 필터의 타입입니다. portion 타입의 경우 바 차트 형식으로 나타냅니다. |
| `filterMap`       | `Record<string, number>                                  ` | 필터의 이름: 개수 쌍을 담고있는 객체입니다.                         |
| `filterOrder`     | `string[]                                               `  | 필터 아이템의 순서를 담고있는 배열입니다.                           |
| `activeFilterMap` | `Record<string, boolean> \| null                        `  | 체크가 활성화된 필터의 이름: boolean 쌍을 담고있는 객체입니다.      |
| `searchText`      | `string                                                 `  | 필터 내 검색 인풋 UI로 검색한 문자열입니다.                         |

### Event

| Name                       | Parameter                         | Description                                              |
| -------------------------- | --------------------------------- | -------------------------------------------------------- |
| `update:active-filter-map` | `Record<string, boolean> \| null` | 체크가 활성화된 필터의 이름: boolean 쌍을 담고있는 객체. |
| `update:search-text`       | `string`                          | 필터 내 검색 인풋 UI로 검색한 문자열.                    |

```vue
<script>
import Filter from '@component/filter/Filter.vue';

// 아이템 20개
const basicFilterMap = shallowRef({
    "this": 25555, "is": 20, "text": 18, "type": 15, "filter": 12, "microservicemicroservicemicroservicemicroservice-bb": 10, "authentication-bb": 8, "monitoring-bb": 7, "logging-bb": 6, "testing-bb": 5, "deployment-bb": 4, "security-bb": 4, "documentation-bb": 3, "analytics-bb": 3, "performance-bb": 3, "caching-bb": 2, "messaging-bb": 2, "storage-bb": 2,"backup-bb": 1, "configuration-bb": 1
});
// 개수 내림차순 예시
const basicFilterOrder = shallowRef(['this', 'is', 'text', 'type', 'filter', 'microservicemicroservicemicroservicemicroservice-bb', 'authentication-bb', 'monitoring-bb', 'logging-bb', 'testing-bb', 'deployment-bb', 'security-bb', 'documentation-bb', 'analytics-bb', 'performance-bb', 'caching-bb', 'messaging-bb', 'storage-bb', 'backup-bb', 'configuration-bb']);
const basicSearchText = ref("");
const basicActiveFilterMap = shallowRef(null);

const handleBasicActiveFilterMapUpdate = (newMap) => {
    basicActiveFilterMap.value = newMap;
};
const handleBasicSearchTextUpdate = (newText) => {
    basicSearchText.value = newText;
};

</script>
<template>
    <Filter
        title="Basic Example Title"
        :filter-map="basicFilterMap"
        :filter-order="basicFilterOrder"
        :search-text="basicSearchText"
        :active-filter-map="basicActiveFilterMap"
        @update:active-filter-map="handleBasicActiveFilterMapUpdate"
        @update:search-text="handleBasicSearchTextUpdate"
    />
</template>

```

### Type: portion

필터 아이템이 바 차트 형식으로 나타납니다.

```vue{21}
<script setup>
import Filter from '@component/filter/Filter.vue';

// 아이템 20개
const portionFilterMap = shallowRef({'project-a-bb': 987654,'backend-service-bb': 876543,'frontend-app-bb': 765432,'database-bb': 654321,'api-gateway-bb': 543210,'microservice-bb': 432109,'authentication-bb': 321098,'monitoring-bb': 210987,'logging-bb': 198765,'testing-bb': 187654,'deployment-bb': 176543,'security-bb': 165432,'documentation-bb': 154321,'analytics-bb': 143210,'performanceperformanceperformanceperformanceperformance-bb': 132109,'portion': 123,'type': 1234,'filter': 12345,'this': 1,'is': 12});
// 개수 오름차순
const portionFilterOrder = shallowRef(['this', 'is', 'portion', 'type', 'filter', 'performanceperformanceperformanceperformanceperformance-bb', 'analytics-bb', 'documentation-bb', 'security-bb', 'deployment-bb', 'microservice-bb', 'monitoring-bb', 'logging-bb', 'testing-bb', 'api-gateway-bb', 'database-bb', 'frontend-app-bb', 'backend-service-bb', 'project-a-bb']);
const portionSearchText = ref("");
const portionActiveFilterMap = shallowRef(null);

const handlePortionActiveFilterMapUpdate = (newMap) => {
    portionActiveFilterMap.value = newMap;
};
const handlePortionSearchTextUpdate = (newText) => {
    portionSearchText.value = newText;
};
</script>

### Slot: Dropdown

드랍다운을 사용할 수 있는 `<slot/>`이 있습니다.

```vue{41-54}
<script setup>
import Filter from '@component/filter/Filter.vue';
import { Dropdown } from '@jennifetsoft/vue-components-v2';

// 아이템 20개
const filterWithDropdownMap = shallowRef({ 'project-a-bb': 25,'backend-service-bb': 20,'frontend-app-bb': 18, 'database-bb': 15,'api-gateway-bb': 12, "microservice-bb": 10, "authentication-bb": 8, "monitoring-bb": 7, "logging-bb": 6, "testing-bb": 5, "deployment-bb": 4, "security-bb": 4, "documentation-bb": 3, "analytics-bb": 3, "performance-bb": 3, "caching-bb": 2, "messaging-bb": 2, "storage-bb": 2, "backup-bb": 1, "configuration-bb": 1});
// 초기값: 이름 오름차순
const filterWithDropdownOrder = shallowRef(['analytics-bb','api-gateway-bb','authentication-bb','backend-service-bb','backup-bb','caching-bb','configuration-bb','database-bb','deployment-bb','documentation-bb','frontend-app-bb','logging-bb','messaging-bb','microservice-bb','monitoring-bb','performance-bb','project-a-bb','security-bb','storage-bb','testing-bb']);
const filterWithDropdownSearchText = ref("");
const filterWithDropdownActiveFilterMap = shallowRef(null);

// 드랍다운 관련
const dropdownItems = [{ label: '이름 오름차순', value: 'name-asc' }, {  label: '이름 내림차순', value:'name-desc' }, { label: '개수 오름차순', value: 'count-asc' }, { label: '개수 내림차순', value: 'count-desc' }];
const selectedDropdownValue = ref('name-asc');
const sortFunctionList = computed(() => {
    switch (selectedDropdownValue.value) {
        case 'name-asc': return (a, b) => a.localeCompare(b);
        case 'name-desc': return (a, b) => b.localeCompare(a);
        case 'count-asc': return (a, b) => filterMap3.value[a] - filterMap3.value[b];
        case 'count-desc': return (a, b) => filterMap3.value[b] - filterMap3.value[a];
    }
});
const handleDropdownSelect = (value) => {
    selectedDropdownValue.value = value;
};

</script>

## APM Components

### File: j5-components/auto-refresh.md

# AutoRefresh

자동 새로고침 기능을 제공하는 Vue 컴포넌트입니다. 설정된 주기에 따라 자동으로 새로고침을 실행하며, 사용자가 수동으로 제어할 수 있습니다.

## 개요

AutoRefresh 컴포넌트는 실시간 대시보드나 모니터링 화면에서 자동으로 데이터를 새로고침하는 기능을 제공합니다. 사용자가 설정한 주기에 따라 자동으로 새로고침이 실행되며, 일시정지/재생 및 수동 새로고침 기능도 지원합니다.

### 주요 기능

-   ⏰ **자동 새로고침**: 설정된 주기에 따라 자동으로 새로고침 실행
-   🎮 **수동 제어**: 일시정지/재생 및 수동 새로고침 버튼 제공
-   📊 **진행률 표시**: 다음 새로고침까지의 진행률을 실시간 시각화
-   🌐 **다국어 지원**: i18n 인젝션을 통한 다국어 지원
-   ♿ **접근성**: 키보드 네비게이션 및 스크린 리더 지원
-   🎨 **반응형 애니메이션**: 로딩 상태 및 진행률 애니메이션

### 사용 사례

-   실시간 대시보드의 자동 데이터 갱신
-   모니터링 화면의 주기적 상태 확인
-   APM 차트의 실시간 데이터 업데이트
-   서버 상태 모니터링 화면

## Props 인터페이스

```typescript
interface AutoRefreshProps {
    /** 자동 새로고침 주기 (초 단위, 최소 1초) */
    interval: number;
    /** 컴포넌트 비활성화 여부 (기본값: false) */
    disabled?: boolean;
    /** 컴포넌트 마운트 시 자동으로 새로고침 시작 여부 (기본값: false) */
    autoStart?: boolean;
}
```

| 속성        | 타입      | 기본값  | 필수 | 설명                                           |
| ----------- | --------- | ------- | ---- | ---------------------------------------------- |
| `interval`  | `number`  | -       | ✅   | 자동 새로고침 주기 (초 단위, 최소 1초)         |
| `disabled`  | `boolean` | `false` | ❌   | 컴포넌트 비활성화 여부                         |
| `autoStart` | `boolean` | `false` | ❌   | 컴포넌트 마운트 시 자동으로 새로고침 시작 여부 |

## 이벤트

```typescript
interface AutoRefreshEvents {
    /** 자동 새로고침 실행 시 발생하는 이벤트 */
    refresh: () => void;
    /** 자동 새로고침 활성화/비활성화 토글 시 발생하는 이벤트 */
    toggle: (state: AutoRefreshToggleState) => void;
}

interface AutoRefreshToggleState {
    isActive: boolean;
    interval: number;
}
```

| 이벤트    | 페이로드                 | 설명                                                  |
| --------- | ------------------------ | ----------------------------------------------------- |
| `refresh` | -                        | 자동 새로고침 실행 시 발생하는 이벤트                 |
| `toggle`  | `AutoRefreshToggleState` | 자동 새로고침 활성화/비활성화 토글 시 발생하는 이벤트 |

## 기본 사용법

```vue
<script setup>
import { AutoRefresh } from '@jennifersoft/apm-components';

const handleRefresh = () => {
    console.log('새로고침 실행!');
    // 데이터 새로고침 로직
};

const handleToggle = (state) => {
    console.log(
        `자동 새로고침이 ${state.isActive ? '활성화' : '비활성화'}되었습니다.`
    );
};
</script>

<template>
    <AutoRefresh
        :interval="10"
        @refresh="handleRefresh"
        @toggle="handleToggle"
    />
</template>
```

## 인터랙티브 데모

// 반응형 상태 정의
const interval = ref(10)
const disabled = ref(false)
const autoStart = ref(false)
const refreshCount = ref(0)
const lastRefreshTime = ref('')
const eventLogs = ref([])
const activeStates = ref(new Map())

// 컴퓨티드
const activeCount = computed(() => {
  return Array.from(activeStates.value.values()).filter(Boolean).length
})

// 이벤트 핸들러
const handleRefresh = (source = '기본') => {
  refreshCount.value++
  const now = new Date().toLocaleTimeString()
  lastRefreshTime.value = now
  
  addLog('refresh', `새로고침 실행 (${source}) - ${refreshCount.value}번째`)
}

const handleToggle = (state) => {
  const key = `interval-${state.interval}`
  activeStates.value.set(key, state.isActive)
  
  addLog(
    'toggle',
    `자동 새로고침 ${state.isActive ? '활성화' : '비활성화'} (${state.interval}초 주기)`
  )
}

const addLog = (type, message) => {
  const time = new Date().toLocaleTimeString()
  eventLogs.value.unshift({ type, time, message })
  
  // 최대 10개까지만 유지
  if (eventLogs.value.length > 10) {
    eventLogs.value = eventLogs.value.slice(0, 10)
  }
}

const clearLogs = () => {
  eventLogs.value = []
}
</script>

<ClientOnly>
<div class="demo-container">
  
  
  <div class="controls">
    <div class="control-item">
      <label for="interval-input">Interval (seconds):</label>
      <input
        id="interval-input"
        type="number"
        v-model.number="interval"
        min="1"
        max="60"
        class="interval-input"
      />
    </div>
    <div class="control-item">
      <label>
        <input type="checkbox" v-model="disabled" />
        Disabled
      </label>
    </div>
    <div class="control-item">
      <label>
        <input type="checkbox" v-model="autoStart" />
        Auto Start
      </label>
    </div>
  </div>
  
  
  <div class="demo-section">
    <h3>기본 사용법</h3>
    <AutoRefresh
      :interval="interval"
      :disabled="disabled"
      :auto-start="autoStart"
      @refresh="handleRefresh"
      @toggle="handleToggle"
    />
  </div>
  
  
  <div class="demo-section">
    <h3>Auto Start 테스트</h3>
    <p class="demo-description">
      💡 아래 컴포넌트들은 페이지 로드 시 자동으로 새로고침이 시작됩니다.
    </p>
    <div class="refresh-group">
      <AutoRefresh
        :interval="5"
        :auto-start="true"
        @refresh="() => handleRefresh('Auto Start 5초')"
        @toggle="handleToggle"
      />
      <AutoRefresh
        :interval="8"
        :auto-start="true"
        @refresh="() => handleRefresh('Auto Start 8초')"
        @toggle="handleToggle"
      />
    </div>
  </div>
  
  
  <div class="demo-section">
    <h3>다양한 주기</h3>
    <div class="refresh-group">
      <AutoRefresh
        :interval="3"
        @refresh="() => handleRefresh('3초')"
        @toggle="handleToggle"
      />
      <AutoRefresh
        :interval="10"
        @refresh="() => handleRefresh('10초')"
        @toggle="handleToggle"
      />
      <AutoRefresh
        :interval="30"
        @refresh="() => handleRefresh('30초')"
        @toggle="handleToggle"
      />
    </div>
    <p class="demo-description">
      💡 자동 새로고침이 활성화되면 컴포넌트 백그라운드에 투명한 바차트가 표시되어 
      다음 새로고침까지의 진행률을 실시간으로 보여줍니다. 🎨
    </p>
  </div>
  
  
  <div class="demo-section">
    <h3>Event Log</h3>
    <div class="event-log">
      <div
        v-for="(log, index) in eventLogs"
        :key="index"
        class="log-item"
        :class="`log-item--${log.type}`"
      >
        <span class="log-time">{{ log.time }}</span>
        <span class="log-message">{{ log.message }}</span>
      </div>
    </div>
    <button
      @click="clearLogs"
      class="clear-button"
      :disabled="eventLogs.length === 0"
    >
      Clear Logs
    </button>
  </div>
  
  
  <div class="demo-section">
    <h3>Status</h3>
    <div class="status-info">
      <div class="status-item">
        <strong>총 새로고침 횟수:</strong> {{ refreshCount }}
      </div>
      <div class="status-item">
        <strong>마지막 새로고침:</strong> {{ lastRefreshTime || '없음' }}
      </div>
      <div class="status-item">
        <strong>활성 상태:</strong> {{ activeCount }}개 활성화
      </div>
    </div>
  </div>
  
</div>
</ClientOnly>

.controls {
  display: flex;
  gap: 2rem;
  align-items: center;
  padding: 1rem;
  background: var(--vp-c-bg-soft);
  border-radius: 8px;
  margin-bottom: 1rem;
}

.control-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.interval-input {
  width: 80px;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--vp-c-border);
  border-radius: 4px;
  text-align: center;
}

.demo-section {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--vp-c-bg-soft);
  border-radius: 8px;
}

.demo-section h3 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
}

.refresh-group {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.demo-description {
  margin-top: 1rem;
  padding: 0.75rem;
  background: var(--vp-c-brand-soft);
  border-left: 4px solid var(--vp-c-brand);
  border-radius: 4px;
  font-size: 0.9rem;
}

.event-log {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--vp-c-border);
  border-radius: 8px;
  background: var(--vp-c-bg);
  margin-bottom: 1rem;
  font-family: monospace;
  font-size: 0.85rem;
}

.log-item {
  display: flex;
  gap: 1rem;
  padding: 0.5rem;
  border-bottom: 1px solid var(--vp-c-border);
}

.log-item:last-child {
  border-bottom: none;
}

.log-item--refresh {
  background: rgba(34, 197, 94, 0.1);
}

.log-item--toggle {
  background: rgba(59, 130, 246, 0.1);
}

.log-time {
  font-weight: 600;
  min-width: 80px;
}

.clear-button {
  padding: 0.5rem 1rem;
  background: var(--vp-c-brand);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.clear-button:hover:not(:disabled) {
  background: var(--vp-c-brand-dark);
}

.clear-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.status-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.status-item {
  padding: 0.75rem;
  background: var(--vp-c-bg);
  border-radius: 6px;
  border: 1px solid var(--vp-c-border);
  font-size: 0.9rem;
}
</style>

## 데이터 구조

AutoRefresh 컴포넌트에서 사용되는 주요 타입 정의는 다음과 같습니다:

```typescript
// 토글 상태 인터페이스
interface AutoRefreshToggleState {
    isActive: boolean; // 현재 활성화 상태
    interval: number; // 새로고침 주기 (초)
}

// 다국어 지원 인터페이스
interface I18n {
    autoRefresh: string; // "Auto Refresh" 라벨 텍스트
    second: string; // "second" 단위 텍스트
}
```

## 고급 사용법

### Auto Start 기능

```vue
<template>
    
    <AutoRefresh :interval="5" :auto-start="true" @refresh="handleRefresh" />
</template>
```

### 조건부 비활성화

```vue
<script setup>
import { ref } from 'vue';

const isLoading = ref(false);

const handleRefresh = async () => {
    isLoading.value = true;
    try {
        await fetchData();
    } finally {
        isLoading.value = false;
    }
};
</script>

<template>
    <AutoRefresh
        :interval="10"
        :disabled="isLoading"
        @refresh="handleRefresh"
    />
</template>
```

### 다국어 설정

```vue
<script setup>
import { provide } from 'vue';

// 다국어 메시지 제공
provide('i18n', {
    autoRefresh: '자동 새로고침',
    second: '초',
});
</script>

<template>
    <AutoRefresh :interval="10" />
</template>
```

### 외부에서 상태 제어

```vue
<script setup>
import { ref } from 'vue';

const autoRefreshRef = ref();
const isActive = ref(false);

const handleToggle = (state) => {
    isActive.value = state.isActive;
};

const forceToggle = () => {
    // 외부에서 토글 트리거 (내부 API 접근)
    autoRefreshRef.value?.handleToggle();
};
</script>

<template>
    <div>
        <button @click="forceToggle">외부 토글</button>
        <AutoRefresh
            ref="autoRefreshRef"
            :interval="10"
            @toggle="handleToggle"
        />
    </div>
</template>
```

## 의존성

AutoRefresh 컴포넌트는 다음 외부 의존성을 사용합니다:

-   **@vueuse/core**: `useToggle` 컴포저블 사용
-   **@jennifersoft/vue-components-v2**: `SvgIcon`, `ICON_TYPE` 컴포넌트 사용

```vue
<script setup>
// 내부적으로 사용되는 의존성들
import { useToggle } from '@vueuse/core';
import { SvgIcon, ICON_TYPE } from '@jennifersoft/vue-components-v2';
</script>
```

### 필요한 아이콘 타입

-   `ICON_TYPE.pause`: 일시정지 아이콘
-   `ICON_TYPE.play`: 재생 아이콘
-   `ICON_TYPE.loading`: 로딩 아이콘 (자동 회전 애니메이션)
-   `ICON_TYPE.refresh`: 새로고침 아이콘
    </rewritten_file>

### File: j5-components/global-types.md

# Global Types

`@jennifersoft/apm-core` 라이브러리를 추가하면 아래 타입들이 글로벌로 정의되어, 별도의 Import 없이 사용할 수 있습니다.

## 타입 정의

```typescript
// 국제화 문자열 타입
type I18n = Record<string, string>;

// 플랫폼 타입
type PlatformType = 'java' | 'net' | 'php' | 'python' | 'opentelemetry';

// 언어 타입
type LanguageType = 'ko' | 'en' | 'ja';

// 테마 타입
type ThemeType = 'classic' | 'dark';
```

## 사용 예제

### I18n 타입 사용

```vue
<script setup lang="ts">
import { provide } from 'vue';

// I18n 타입을 별도 import 없이 사용
provide<I18n>('i18n', {
    method: 'Method',
    sql: 'SQL',
    externalCall: 'External Call',
    error: 'Error',
});
</script>
```

### PlatformType 사용

```vue
<script setup lang="ts">
// 플랫폼별 로직 분기
const handlePlatformSpecificLogic = (platform: PlatformType) => {
    switch (platform) {
        case 'java':
            return 'Java 플랫폼 처리';
        case 'net':
            return '.NET 플랫폼 처리';
        case 'php':
            return 'PHP 플랫폼 처리';
        case 'python':
            return 'Python 플랫폼 처리';
        case 'opentelemetry':
            return 'OpenTelemetry 플랫폼 처리';
        default:
            return '알 수 없는 플랫폼';
    }
};
</script>
```

### LanguageType 사용

```vue
<script setup lang="ts">
// 언어별 설정
const setLanguage = (lang: LanguageType) => {
    console.log(`언어를 ${lang}로 설정합니다.`);
};

// 사용
setLanguage('ko'); // 한국어
setLanguage('en'); // 영어
setLanguage('ja'); // 일본어
</script>
```

### ThemeType 사용

```vue
<script setup lang="ts">
// 테마별 스타일 적용
const applyTheme = (theme: ThemeType) => {
    document.documentElement.setAttribute('data-theme', theme);
};

// 사용
applyTheme('classic'); // 클래식 테마
applyTheme('dark'); // 다크 테마
</script>
```

## 타입 확장

필요에 따라 모듈 보강(Module Augmentation)을 통해 추가 글로벌 타입을 정의할 수 있습니다:

```typescript
// types/global.d.ts
declare global {
    // 커스텀 글로벌 타입 추가
    type CustomMetricType = 'cpu' | 'memory' | 'disk' | 'network';

// 기존 타입 확장
    type ExtendedPlatformType = PlatformType | 'nodejs' | 'go';
}

export {};
```

## 주의사항

1. **타입 안전성**: 글로벌 타입을 사용할 때는 타입 안전성을 위해 정확한 값만 사용하세요.
2. **네이밍 충돌**: 다른 라이브러리와의 타입 네이밍 충돌에 주의하세요.
3. **업데이트**: 라이브러리 업데이트 시 타입 정의 변경사항을 확인하세요.

## 관련 문서

-   [Vue 3 TypeScript 가이드](https://vuejs.org/guide/typescript/overview.html)
-   [TypeScript 글로벌 타입 정의](https://www.typescriptlang.org/docs/handbook/declaration-files/templates/global-d-ts.html)

### File: j5-components/profile-info.md

# ProfileInfo

트랜잭션에 포함된 프로파일 종류에 대한 표시를 하는 컴포넌트입니다.

## 개요

ProfileInfo 컴포넌트는 트랜잭션 분석 시 각 프로파일 타입(Method, SQL, External Call, Batch Job, Error)의 색상 범례를 제공합니다. 각 프로파일 타입은 고유한 색상으로 구분되어 표시됩니다.

## Props 인터페이스

```typescript
interface Props {
    hideBatchJob?: boolean; // Batch Job 항목 숨김 여부 (기본값: false)
    hideError?: boolean; // Error 항목 숨김 여부 (기본값: false)
}
```

## 이벤트

-   `create-shared-url`: 공유 URL 생성 이벤트 (emit으로 정의되어 있으나 현재 미사용)

## 슬롯

-   `tools`: 우측에 추가 도구/버튼을 배치할 수 있는 슬롯

## 기본 사용법

```vue
<template>
    <ProfileInfo />
</template>

provide<I18n>('i18n', {
    method: 'Method',
    sql: 'SQL',
    externalCall: 'External Call',
    batch: 'Batch',
    error: 'Error',
});
</script>
```

## 인터랙티브 데모

const hideBatchJob = ref(false);
const hideError = ref(false);

provide<I18n>("i18n", {
  method: 'Method',
  sql: 'SQL',
  externalCall: 'External Call',
  batch: 'Batch Job',
  error: 'ERROR',
  fetch: 'Fetch',
});
</script>

<div class="demo-container">
  <div class="demo-controls">
    <label>
      <input type="checkbox" v-model="hideBatchJob" />
      Batch Job 숨기기
    </label>
    <label>
      <input type="checkbox" v-model="hideError" />
      Error 숨기기
    </label>
  </div>

## 고급 사용법

### 특정 프로파일 타입 숨기기

```vue
<template>
    
    <ProfileInfo :hide-batch-job="true" :hide-error="true" />
</template>
```

### 커스텀 도구 슬롯 사용

```vue
<template>
    <ProfileInfo>
        <template v-slot:tools>
            <Btn type="text" size="small" :trailing-icon="ICON_TYPE.share" />
            <Btn type="text" size="small" :trailing-icon="ICON_TYPE.download" />
        </template>
    </ProfileInfo>
</template>
```

## 프로파일 색상

컴포넌트는 `getProfileColor` 유틸리티 함수를 사용하여 각 프로파일 타입에 고유한 색상을 할당합니다:

-   **METHOD**: 메소드 호출
-   **SQL**: SQL 쿼리 실행
-   **TX_CALL**: 외부 트랜잭션 호출
-   **BATCH**: 배치 작업
-   **ERROR**: 에러 발생

## 의존성

-   `@jennifersoft/vue-components-v2` (Btn 컴포넌트 사용 시)
-   Vue 3 Composition API
-   Global I18n 타입 정의

.demo-controls {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--vp-c-bg-soft);
  border-radius: 6px;
}

.demo-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.demo-content {
  padding: 12px;
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
  background: var(--vp-c-bg);
}
</style>

### File: j5-components/apm-transaction-table.md

# ApmTransactionTable

## 개요

`ApmTransactionTable`은 APM(Application Performance Monitoring) 환경에서 트랜잭션 데이터를 테이블 형태로 표시하는 컴포넌트입니다. 성능 분석, 오류 추적, 트랜잭션 상세 정보 조회 등의 기능을 제공합니다.

## 주요 기능

-   트랜잭션 데이터의 테이블 뷰 제공
-   정렬, 페이징, 행 선택 기능
-   프로파일 정보 표시
-   도구 슬롯을 통한 확장 가능한 UI
-   트랜잭션 시간 시각화

## Props 인터페이스

```typescript
interface ApmTransactionTableProps<
    T extends TransactionData & Record<string, unknown>
> extends PagingTableProps<T> {
    maxMap: TransactionTime;
}

interface PagingTableProps<T> {
    alias: string; // 테이블 식별자
    width: number; // 테이블 너비
    height: number; // 테이블 높이
    displayCount: number; // 페이지당 표시 개수
    columns: PagingTableColumn[]; // 컬럼 정의
    rows: PagingTableRow<T>[]; // 행 데이터
    rowHeight?: number; // 행 높이 (기본값: 56)
    sortKey?: string; // 정렬 키
    sortOrder?: PagingTableSortOrder; // 정렬 순서
    sortLoading?: boolean; // 정렬 로딩 상태
    useSkeleton?: boolean; // 스켈레톤 UI 사용 여부
    useSelect?: boolean; // 행 선택 기능 사용 여부
    foundRowId?: string; // 강조할 행 ID
    selectedRowIds?: string[]; // 선택된 행 ID 목록
}

interface TransactionTime {
    elapsedTime: number; // 경과 시간 최대값
    methodTime: number; // 메서드 시간 최대값
    sqlTime: number; // SQL 시간 최대값
    txcallTime: number; // 트랜잭션 호출 시간 최대값
    batchTime: number; // 배치 시간 최대값
}
```

## 이벤트

```typescript
interface ApmTransactionTableEmits<T> {
    (e: 'sort', key: string, order: PagingTableSortOrder): void;
    (e: 'select', id: string, row?: PagingTableRow<T>): void;
}
```

-   **sort**: 컬럼 정렬 시 발생
-   **select**: 행 선택 시 발생

## 슬롯

### tools

테이블 상단의 도구 영역을 커스터마이징할 수 있습니다.

```vue
<template #tools="slotProps">
    <button @click="exportData">내보내기</button>
    <button @click="refreshData">새로고침</button>
</template>
```

## 기본 사용법

```vue
<template>
    <apm-transaction-table
        :alias="'transaction-table'"
        :width="1000"
        :height="500"
        :columns="columns"
        :rows="rows"
        :display-count="10"
        :max-map="maxMap"
        @select="onSelectRow"
        @sort="onSort"
    />
</template>

const columns: PagingTableColumn[] = [
    { key: 'serviceName', name: '서비스명', type: 'text', sortable: true },
    { key: 'elapsedTime', name: '경과시간', type: 'number', sortable: true },
    { key: 'startTime', name: '시작시간', type: 'datetime', sortable: true },
];

const rows: PagingTableRow<TransactionData>[] = [
    {
        id: '1',
        data: {
            serviceName: '/api/users',
            elapsedTime: 1267,
            startTime: Date.now(),
            // ... 기타 트랜잭션 데이터
        },
    },
];

const maxMap: TransactionTime = {
    elapsedTime: 1737,
    methodTime: 937,
    sqlTime: 480,
    txcallTime: 320,
    batchTime: 0,
};

const onSelectRow = (id: string, row?: PagingTableRow<TransactionData>) => {
    console.log('선택된 행:', id, row);
};

const onSort = (key: string, order: PagingTableSortOrder) => {
    console.log('정렬:', key, order);
};
</script>
```

## 인터랙티브 데모

// i18n 메시지 제공
provide('i18n', {
  // 테이블 관련
  pageInfo: '%d개 중 %s',
  firstPage: '첫 페이지',
  lastPage: '마지막 페이지',
  manageTableColumns: '테이블 컬럼 관리',
  resetTableSettings: '테이블 설정 초기화',

// ProfileInfo 관련
  method: 'Method',
  sql: 'SQL',
  externalCall: 'External Call',
  batch: 'Batch',
  error: 'Error'
});

const selectedRowId = ref('');
const selectedRowData = ref(null);

// 샘플 데이터
const columns = [
  {
    key: 'serviceName',
    name: '서비스명',
    rate: 0,
    type: PagingTableCellType.TEXT,
    sortable: true,
    visible: true
  },
  {
    key: 'elapsedTime',
    name: '경과시간(ms)',
    rate: 0,
    type: PagingTableCellType.CUSTOM,
    sortable: true,
    visible: true
  },
  {
    key: 'startTime',
    name: '시작시간',
    rate: 0,
    type: PagingTableCellType.TIME,
    sortable: true,
    visible: true
  },
  {
    key: 'instanceName',
    name: '인스턴스',
    rate: 0,
    type: PagingTableCellType.TEXT,
    sortable: true,
    visible: true
  },
  {
    key: 'errCode',
    name: '오류코드',
    rate: 0,
    type: PagingTableCellType.ERROR,
    sortable: true,
    visible: true
  }
];

const rows = [
  {
    id: '4893274073195342746',
    data: {
      sid: 100,
      domainName: 'Jennifer5 (dev)',
      sysOid: 80571,
      instanceName: 'view-server',
      instId: 15035,
      bizOid: 0,
      bizName: '',
      serviceName: '/api/realtime/instance',
      serviceHash: 1727293754,
      txid: '4893274073195342746',
      errCode: 'SERVICE_EXCEPTION',
      errTextHash: null,
      guid: '',
      ipaddr: '192.168.0.10',
      userHash: 0,
      userId: '',
      networkTime: 0,
      frontEndElapsedTime: 0,
      elapsedTime: 1267,
      selfTime: 1267,
      cpuTime: 39,
      sqlTime: 320,
      sqlCount: 2,
      fetchTime: 0,
      txcallTime: 180,
      methodTime: 937,
      startTime: 1744083510147,
      endTime: 1744083511414,
      callTime: null,
      browserHash: -421771788,
      browserName: null,
      wmonId: '0',
      xtype: 1,
      langType: 1,
      collectionTime: 1744083511414,
      jenniferFrontAppId: '',
      jenniferFrontPageLoadId: '',
      cicsGeneralCpuTime: -1,
      cicsJavaCpuTime: -1,
      batchCount: 0,
      batchTime: 0,
      serviceAlias: '',
      httpStatusCode: '200',
      linked: false,
      stacked: true,
      async: false,
      transactionTypes: ['ERROR', 'STACKED'],
      score: 0,
      piDataList: null
    }
  },
  {
    id: '7205350143353750214',
    data: {
      sid: 100,
      domainName: 'Jennifer5 (dev)',
      sysOid: 80571,
      instanceName: 'view-server',
      instId: 15035,
      bizOid: 0,
      bizName: '',
      serviceName: '/api/realtime/instance',
      serviceHash: 1727293754,
      txid: '7205350143353750214',
      errCode: '',
      errTextHash: null,
      guid: '',
      ipaddr: '192.168.0.10',
      userHash: 0,
      userId: '',
      networkTime: 0,
      frontEndElapsedTime: 0,
      elapsedTime: 1256,
      selfTime: 1256,
      cpuTime: 38,
      sqlTime: 280,
      sqlCount: 1,
      fetchTime: 0,
      txcallTime: 220,
      methodTime: 756,
      startTime: 1744083511439,
      endTime: 1744083512695,
      callTime: null,
      browserHash: -421771788,
      browserName: null,
      wmonId: '0',
      xtype: 1,
      langType: 1,
      collectionTime: 1744083512695,
      jenniferFrontAppId: '',
      jenniferFrontPageLoadId: '',
      cicsGeneralCpuTime: -1,
      cicsJavaCpuTime: -1,
      batchCount: 0,
      batchTime: 0,
      serviceAlias: '',
      httpStatusCode: '200',
      linked: false,
      stacked: true,
      async: false,
      transactionTypes: ['STACKED'],
      score: 0,
      piDataList: null
    }
  }
];

const maxMap = {
  elapsedTime: 1737,
  methodTime: 937,
  sqlTime: 480,
  txcallTime: 320,
  batchTime: 0
};

const onSelectTransactionTable = (id, row) => {
  selectedRowId.value = id;
  selectedRowData.value = row;
  console.log('APM Transaction table row selected:', id, row);
};

const exportData = () => {
  console.log('데이터 내보내기');
};

const refreshData = () => {
  console.log('데이터 새로고침');
};
</script>

<div class="demo-container">
  <div class="demo-content">
    <ApmTransactionTable
      :alias="'demo-apm-transaction-table'"
      :width="654"
      :height="400"
      :columns="columns"
      :rows="rows"
      :display-count="10"
      :max-map="maxMap"
      :use-select="true"
      @select="onSelectTransactionTable"
    >
      <template #tools>
        <div style="display: flex; gap: 8px;">
          <Btn type="outlined" text="Export" @click="exportData" />
          <Btn type="primary-filled" text="Refresh" @click="refreshData" />
        </div>
      </template>
    </ApmTransactionTable>
  </div>
  
  <div class="demo-info" v-if="selectedRowId">
    <h4>선택된 행 정보</h4>
    <p><strong>ID:</strong> {{ selectedRowId }}</p>
    <p><strong>서비스명:</strong> {{ selectedRowData?.data?.serviceName }}</p>
    <p><strong>경과시간:</strong> {{ selectedRowData?.data?.elapsedTime }}ms</p>
    <p><strong>오류코드:</strong> {{ selectedRowData?.data?.errCode || '없음' }}</p>
  </div>
</div>

.demo-content {
  margin-bottom: 16px;
}

.demo-info {
  padding: 12px;
  background-color: var(--vp-c-bg-soft);
  border-radius: 6px;
  border-left: 4px solid var(--vp-c-brand);
}

.demo-info h4 {
  margin: 0 0 8px 0;
  color: var(--vp-c-text-1);
}

.demo-info p {
  margin: 4px 0;
  color: var(--vp-c-text-2);
  font-size: 14px;
}
</style>

## 데이터 구조

### TransactionData

```typescript
interface TransactionData extends Record<string, unknown> {
    sid: number; // 시스템 ID
    domainName: string; // 도메인명
    instId: number; // 인스턴스 ID
    instanceName: string; // 인스턴스명
    serviceName: string; // 서비스명
    serviceHash: number; // 서비스 해시
    txid: string; // 트랜잭션 ID
    errCode: string; // 오류 코드
    elapsedTime: number; // 경과 시간
    methodTime: number; // 메서드 시간
    sqlTime: number; // SQL 시간
    txcallTime: number; // 트랜잭션 호출 시간
    batchTime: number; // 배치 시간
    startTime: number; // 시작 시간
    endTime: number; // 종료 시간
    cpuTime: number; // CPU 시간
    sqlCount: number; // SQL 개수
    httpStatusCode: string; // HTTP 상태 코드
    linked: boolean; // 연결 여부
    stacked: boolean; // 스택 여부
    async: boolean; // 비동기 여부
    transactionTypes: TransactionType[]; // 트랜잭션 타입 목록
}

type TransactionType = 'ERROR' | 'LINKED' | 'STACKED' | 'ASYNC';
```

## 고급 사용법

### 커스텀 도구 모음

```vue
<template>
    <apm-transaction-table v-bind="tableProps" @select="onSelectRow">
        <template
            #tools="{ columns, page, updateColumns, updatePage, resetSettings }"
        >
            <div class="custom-tools">
                <button @click="exportCsv(columns)">CSV 내보내기</button>
                <button @click="resetSettings">설정 초기화</button>
                <span>페이지: {{ page }}</span>
            </div>
        </template>
    </apm-transaction-table>
</template>
```

### 정렬 및 필터링

```vue
<script setup lang="ts">
import { ref, computed } from 'vue';

const sortKey = ref<string>('startTime');
const sortOrder = ref<PagingTableSortOrder>(PagingTableSortOrder.DESC);
const sortLoading = ref<boolean>(false);

const onSort = async (key: string, order: PagingTableSortOrder) => {
    sortLoading.value = true;
    sortKey.value = key;
    sortOrder.value = order;

// 정렬 로직 수행
    await performSort(key, order);

sortLoading.value = false;
};
</script>
```

## 의존성

-   `@jennifersoft/apm-components`
-   `@jennifersoft/apm-apis`
-   `@jennifersoft/vue-components-v2` (도구 버튼 사용 시)

### File: j5-components/ColumnChart.md

# ColumnChart

## 개요

`ColumnChart`는 시계열 데이터를 세로 막대 형태로 시각화하는 범용 차트 컴포넌트입니다.

### 주요 기능

-   **가변 길이 데이터 지원**: 임의의 개수의 데이터 포인트를 자동으로 정렬
-   **선택적 축 표시**: Y축과 X축을 독립적으로 표시/숨김 가능
-   **X축 레이블 회전**: 많은 데이터 포인트가 있을 때 레이블 회전 지원
-   **선택 상태 관리**: 개별 컬럼 선택 및 시각적 피드백
-   **반응형 레이아웃**: Flex 기반으로 컨테이너 크기에 자동 맞춤
-   **이벤트 지원**: 클릭, 마우스 호버 등의 인터랙션 이벤트

### 사용 사례

-   시간별/일별 메트릭 추이 표시
-   서비스별 트랜잭션 개수 비교
-   응답 시간 분포 시각화
-   에러 발생 빈도 모니터링

## Props 인터페이스

### ChartItem 타입

```typescript
interface ChartItem {
    name: string; // 레이블 텍스트
    value: number; // 차트에 표시될 값
    time?: number; // 선택적 타임스탬프
}
```

### Props

```typescript
interface Props {
    // 필수
    data: ChartItem[];

// 선택적 - 축
    showYAxis?: boolean; // Y축 표시 여부 (기본값: false)
    showXAxis?: boolean; // X축 표시 여부 (기본값: false)
    rotateXLabels?: boolean; // X축 레이블 45도 회전 (기본값: false)
    hideYLabelWhenZero?: boolean; // maxCount가 0일 때 Y축 레이블 숨김 (기본값: false)

// 선택적 - 크기 (px 단위, width의 -1은 100% 가변)
    width?: number; // 차트 너비 (기본값: -1, 즉 100%)
    height?: number; // 차트 높이 (기본값: 200)

// 선택적 - 스타일 (px 단위)
    gap?: number; // 컬럼 간격 (기본값: 4)
    padding?: number; // 차트 내부 패딩 (기본값: 8)
    borderRadius?: number; // 컬럼 모서리 둥글기 (기본값: 4)

// 선택적 - 축 스타일 (px 단위)
    yAxisWidth?: number; // Y축 너비 (기본값: 40)
    yAxisPaddingRight?: number; // Y축 오른쪽 패딩 (기본값: 8)
    yAxisFontSize?: number; // Y축 폰트 크기 (기본값: 11)
    yAxisLabelCount?: number; // Y축 레이블 개수 (기본값: 3)
    xAxisHeight?: number; // X축 높이 (기본값: 20)
    xAxisHeightRotated?: number; // X축 높이 (회전 시) (기본값: 40)
    xAxisPaddingTop?: number; // X축 상단 패딩 (기본값: 4)
    xAxisFontSize?: number; // X축 폰트 크기 (기본값: 11)

// 선택적 - 선택 상태
    // -2: 아무것도 선택 안 함, -1: 전체 선택, >= 0: 특정 컬럼 선택
    selectedIndex?: number; // 선택된 인덱스 (기본값: -1)
}
```

## 이벤트

```typescript
// 컬럼 클릭 시 발생 (value가 0인 컬럼은 클릭 불가)
emit('select', item: ChartItem, index: number)

// 컬럼에 마우스 호버 시 발생
emit('mouseenter', item: ChartItem, e: MouseEvent)

// 컬럼에서 마우스가 벗어날 때 발생
emit('mouseleave')
```

## 기본 사용법

간단한 컬럼 차트를 생성하는 기본 예제입니다:

```vue
<script setup>
import { ref } from 'vue';
import { ColumnChart } from '@jennifersoft/apm-components';

const data = ref([
    { name: '00', value: 120, time: 1609459200000 },
    { name: '01', value: 250, time: 1609462800000 },
    { name: '02', value: 180, time: 1609466400000 },
    { name: '03', value: 420, time: 1609470000000 },
    { name: '04', value: 310, time: 1609473600000 },
]);

const handleSelect = (item, index) => {
    console.log('Selected:', item.name, 'at index', index);
};
</script>

<template>
    <ColumnChart
        :data="data"
        :height="150"
        :showYAxis="true"
        :showXAxis="true"
        @select="handleSelect"
    />
</template>
```

## 인터랙티브 데모

// 옵션 상태
const showYAxis = ref(true)
const hideYLabelWhenZero = ref(false)
const yAxisLabelCount = ref(3)
const showXAxis = ref(true)
const rotateXLabels = ref(false)
const width = ref(660)
const height = ref(200)
const gap = ref(4)
const borderRadius = ref(4)
const dataPattern = ref('random')
const dataCount = ref(24)
const selectedIndex = ref(-1)

// 차트 데이터
const chartData = ref([])

// 이벤트 로그
const eventLog = ref('')

// 데이터 생성 함수
const generateData = () => {
  const count = dataCount.value
  const data = []
  const now = Date.now()

for (let i = 0; i < count; i++) {
    let value = 0
    const mid = count / 2

switch (dataPattern.value) {
      case 'random':
        value = Math.floor(Math.random() * 1000)
        break
      case 'increasing':
        value = (i + 1) * 50
        break
      case 'decreasing':
        value = (count - i) * 50
        break
      case 'peak':
        value = 1000 - Math.abs(i - mid) * 40
        break
      case 'valley':
        value = Math.abs(i - mid) * 40
        break
    }

data.push({
      name: count === 24 ? `${i}` : `${String(i).padStart(2, '0')}`,
      value: Math.max(0, value),
      time: now + i * 3600000
    })
  }

chartData.value = data
}

// 이벤트 핸들러
const onSelect = (item, index) => {
  selectedIndex.value = index
  eventLog.value = `Selected: ${item.name} (value: ${item.value}, index: ${index})`
}

const onMouseEnter = (item, e) => {
  eventLog.value = `Mouse enter: ${item.name} (value: ${item.value})`
}

const onMouseLeave = () => {
  eventLog.value = 'Mouse leave'
}

// 프리셋 적용
const applyPreset = (preset) => {
  switch (preset) {
    case 'mini':
      showYAxis.value = false
      showXAxis.value = false
      height.value = 20
      gap.value = 1
      break
    case 'yAxis':
      showYAxis.value = true
      showXAxis.value = false
      height.value = 100
      gap.value = 2
      break
    case 'xAxis':
      showYAxis.value = false
      showXAxis.value = true
      height.value = 100
      gap.value = 2
      break
    case 'full':
      showYAxis.value = true
      showXAxis.value = true
      height.value = 150
      gap.value = 4
      rotateXLabels.value = false
      break
  }
}

// 초기 데이터 생성
generateData()
</script>

<div class="demo-container">
  
  <div class="controls">
    <div class="control-title">Axes</div>
    <label>
      <input type="checkbox" v-model="showYAxis" />
      Show Y Axis
    </label>
    <label>
      <input type="checkbox" v-model="hideYLabelWhenZero" :disabled="!showYAxis" />
      Hide Y Label When Zero
    </label>
    <label>
      Y Axis Label Count:
      <select v-model.number="yAxisLabelCount" :disabled="!showYAxis">
        <option :value="2">2 labels</option>
        <option :value="3">3 labels (Default)</option>
        <option :value="4">4 labels</option>
        <option :value="5">5 labels</option>
      </select>
    </label>
    <label>
      <input type="checkbox" v-model="showXAxis" />
      Show X Axis
    </label>
    <label>
      <input type="checkbox" v-model="rotateXLabels" :disabled="!showXAxis" />
      Rotate X Labels
    </label>
    <div class="control-title">Size & Style</div>
    <label>
      Height:
      <select v-model.number="height">
        <option :value="20">20px (Mini)</option>
        <option :value="60">60px</option>
        <option :value="100">100px</option>
        <option :value="150">150px</option>
        <option :value="200">200px (Default)</option>
      </select>
    </label>
    <label>
      Gap:
      <select v-model.number="gap">
        <option :value="1">1px</option>
        <option :value="2">2px</option>
        <option :value="4">4px (Default)</option>
        <option :value="8">8px</option>
      </select>
    </label>
    <div class="control-title">Data</div>
    <label>
      Pattern:
      <select v-model="dataPattern" @change="generateData">
        <option value="random">Random</option>
        <option value="increasing">Increasing</option>
        <option value="decreasing">Decreasing</option>
        <option value="peak">Peak (Middle)</option>
        <option value="valley">Valley (Middle)</option>
      </select>
    </label>
    <label>
      Count:
      <select v-model.number="dataCount" @change="generateData">
        <option :value="12">12 items</option>
        <option :value="24">24 items</option>
        <option :value="48">48 items</option>
      </select>
    </label>
    <button @click="generateData" class="btn">Regenerate Data</button>
    <div class="control-title">Presets</div>
    <div class="preset-buttons">
      <button @click="applyPreset('mini')" class="btn-preset">Mini</button>
      <button @click="applyPreset('yAxis')" class="btn-preset">Y Axis</button>
      <button @click="applyPreset('xAxis')" class="btn-preset">X Axis</button>
      <button @click="applyPreset('full')" class="btn-preset">Full</button>
    </div>
  </div>
  
  <div class="preview">
    <ColumnChart
      :data="chartData"
      :showYAxis="showYAxis"
      :hideYLabelWhenZero="hideYLabelWhenZero"
      :yAxisLabelCount="yAxisLabelCount"
      :showXAxis="showXAxis"
      :rotateXLabels="rotateXLabels"
      :width="width"
      :height="height"
      :gap="gap"
      :borderRadius="borderRadius"
      :selectedIndex="selectedIndex"
      @select="onSelect"
      @mouseenter="onMouseEnter"
      @mouseleave="onMouseLeave"
    />
    <div v-if="eventLog" class="event-log">
      <strong>Last Event:</strong> {{ eventLog }}
    </div>
  </div>
</div>

.controls {
  background: var(--vp-c-bg-soft);
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.control-title {
  margin: 1rem 0 0.5rem 0;
  font-size: 0.9rem;
  color: var(--vp-c-text-1);
  font-weight: 600;
}

.control-title:first-child {
  margin-top: 0;
}

.controls label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--vp-c-text-2);
  font-size: 0.875rem;
}

.controls input[type="checkbox"] {
  margin-right: 0.5rem;
}

.controls select {
  margin-left: 0.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--vp-c-divider);
  border-radius: 4px;
  background: var(--vp-c-bg);
  color: var(--vp-c-text-1);
}

.controls .btn {
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--vp-c-brand-1);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
}

.controls .btn:hover {
  background: var(--vp-c-brand-2);
}

.preset-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.btn-preset {
  padding: 0.375rem 0.75rem;
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-brand-1);
  color: var(--vp-c-brand-1);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
}

.btn-preset:hover {
  background: var(--vp-c-brand-1);
  color: white;
}

.preview {
  background: var(--vp-c-bg);
  padding: 1rem;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  max-width: 688px;
}

.event-log {
  margin-top: 1rem;
  padding: 0.75rem;
  background: var(--vp-c-bg-soft);
  border-radius: 4px;
  font-family: var(--vp-font-family-mono);
  font-size: 0.875rem;
  color: var(--vp-c-text-2);
}
</style>

## 데이터 구조

`ColumnChart`는 `ChartItem[]` 타입의 데이터를 받습니다:

```typescript
interface ChartItem {
    name: string; // X축에 표시될 레이블
    value: number; // 차트에 표시될 숫자 값
    time?: number; // 선택적 타임스탬프 (milliseconds)
}
```

### 샘플 데이터

```typescript
const sampleData: ChartItem[] = [
    { name: '00:00', value: 120, time: 1609459200000 },
    { name: '01:00', value: 250, time: 1609462800000 },
    { name: '02:00', value: 180, time: 1609466400000 },
    { name: '03:00', value: 420, time: 1609470000000 },
    { name: '04:00', value: 310, time: 1609473600000 },
    { name: '05:00', value: 190, time: 1609477200000 },
];
```

## 고급 사용법

### 1. 미니 차트 (축 없음)

시각적 표시기로 사용하기 위한 최소한의 차트:

```vue
<ColumnChart
    :data="data"
    :height="20"
    :gap="1"
    :showYAxis="false"
    :showXAxis="false"
/>
```

### 2. 선택 상태 관리

사용자 선택을 추적하고 시각적으로 표시:

```vue
<script setup>
import { ref } from 'vue';
import { ColumnChart } from '@jennifersoft/apm-components';

const selectedIndex = ref(-1);

const handleSelect = (item, index) => {
    // 같은 컬럼 재선택 시 선택 해제
    selectedIndex.value = selectedIndex.value === index ? -1 : index;
};
</script>

<template>
    <ColumnChart
        :data="data"
        :selectedIndex="selectedIndex"
        @select="handleSelect"
    />
</template>
```

### 3. Y축 레이블 개수 조정

더 세밀한 Y축 스케일 표시:

```vue
<ColumnChart
    :data="data"
    :showYAxis="true"
    :yAxisLabelCount="5"
    :height="200"
/>
```

### 4. 반응형 차트

컨테이너 너비에 자동으로 맞춤:

```vue
<div style="width: 100%;">
  <ColumnChart
    :data="data"
    :width="-1"
    :showYAxis="true"
    :showXAxis="true"
  />
</div>
```

### 5. X축 레이블 회전 (많은 데이터)

48개 이상의 데이터 포인트가 있을 때:

```vue
<ColumnChart
    :data="largeDataset"
    :showXAxis="true"
    :rotateXLabels="true"
    :xAxisHeightRotated="40"
/>
```

### 6. 커스텀 스타일링

차트 외관 조정:

```vue
<ColumnChart
    :data="data"
    :gap="8"
    :borderRadius="8"
    :padding="12"
    :yAxisFontSize="12"
    :xAxisFontSize="10"
/>
```

## 선택 상태 값 (selectedIndex)

-   `-2`: 아무것도 선택 안 함 (모든 컬럼이 연한 색상)
-   `-1`: 전체 선택 (모든 컬럼이 기본 색상) - **기본값**
-   `>= 0`: 특정 인덱스의 컬럼만 선택 (선택된 컬럼은 진한 색상, 나머지는 연한 색상)

## 주의사항

1. **데이터 개수**: 너무 많은 데이터(100개 이상)는 성능에 영향을 줄 수 있습니다
2. **레이블 길이**: X축 레이블이 너무 길면 `rotateXLabels`를 사용하세요
3. **0값 클릭**: `value`가 0인 컬럼은 클릭이 불가능합니다
4. **최소 높이**: 의미 있는 시각화를 위해 최소 60px 이상의 높이를 권장합니다
5. **Y축 레이블**: `hideYLabelWhenZero`는 모든 값이 0일 때 Y축 레이블을 공백으로 표시합니다

## 의존성

-   **Vue 3**: Composition API (`ref`, `computed`)
-   **@jennifersoft/apm-components**: ChartItem 타입
-   **CSS Variables**: 테마 색상 (`--gray-*`, `--blue-*`, `--overlay-*`)

### File: j5-components/daily-and-hourly-chart.md

# DailyAndHourlyChart

## 개요

`DailyAndHourlyChart`는 서비스 메트릭 데이터를 일간 및 시간별로 시각화하는 차트 컴포넌트입니다. 메트릭 선택, 탭 전환, 데이터 선택 등의 인터랙티브 기능을 제공하여 시계열 데이터 분석을 지원합니다.

## 주요 기능

-   일간/시간별 메트릭 데이터 시각화
-   메트릭 타입 선택 (서비스 개수, 응답시간 등)
-   차트 타입 전환 (Bar, Column)
-   날짜 및 시간 선택 기능
-   v-model을 통한 양방향 데이터 바인딩
-   커스텀 툴팁 포맷터 지원

## Props 인터페이스

```typescript
interface DailyAndHourlyChartProps {
    width: number; // 차트 너비
    height: number; // 차트 높이
    tabItems: TabItem[]; // 차트 타입 탭 항목
    metricItems: MetricItem[]; // 메트릭 선택 항목
    items: ChartItem[]; // 차트 데이터
    hourlyItemMap: Record<number, ChartItem[]>; // 시간별 데이터 맵
    nameWidth?: number; // 이름 영역 너비 (기본값: 32)
    tooltipFormatter?: (item: ChartItem, type: ChartType) => string; // 툴팁 포맷터
}

interface TabItem {
    label: string; // 탭 표시 텍스트
    value: ChartType; // 차트 타입 값
}

interface MetricItem {
    label: string; // 메트릭 표시 텍스트
    value: string; // 메트릭 값 (형식: "daily:MxDef" 또는 "hourly:MxDef")
}

interface ChartItem {
    time: number; // 시간 (timestamp)
    name: string; // 표시명
    value: number; // 값
}

type ChartType = 'bar' | 'column';
```

## v-model Props

```typescript
// 양방향 바인딩 지원 props
selectedMetric: string; // 선택된 메트릭 (기본값: "daily:service_count")
selectedDate: number; // 선택된 날짜 (기본값: -1)
selectedHour: number; // 선택된 시간 (기본값: -1)
selectedTab: ChartType; // 선택된 차트 타입 (기본값: "bar")
```

## 이벤트

```typescript
interface DailyAndHourlyChartEmits {
    (e: 'tab', item: ChartType): void;
    (e: 'select', time: number, hour: number, duplicate: boolean): void;
    (e: 'metric', metric: MxDef, interval: number): void;
    (e: 'update:selectedMetric', selectedMetric: string): void;
    (e: 'update:selectedDate', selectedDate: number): void;
    (e: 'update:selectedHour', selectedHour: number): void;
    (e: 'update:selectedTab', selectedTab: ChartType): void;
}
```

-   **tab**: 차트 타입 탭 변경 시 발생
-   **select**: 차트 데이터 선택 시 발생
-   **metric**: 메트릭 변경 시 발생
-   **update:\*** : v-model 업데이트 이벤트

## 기본 사용법

```vue
<template>
    <daily-and-hourly-chart
        :width="800"
        :height="400"
        :tab-items="tabItems"
        :metric-items="metricItems"
        :items="chartData"
        :hourly-item-map="hourlyDataMap"
        v-model:selected-metric="selectedMetric"
        v-model:selected-date="selectedDate"
        v-model:selected-hour="selectedHour"
        @tab="onTabChange"
        @select="onDataSelect"
        @metric="onMetricChange"
    />
</template>

// 탭 항목 정의
const tabItems: TabItem[] = [
    { label: '막대형', value: 'bar' },
    { label: '세로막대형', value: 'column' },
];

// 메트릭 항목 정의
const metricItems: MetricItem[] = [
    { label: '일간 서비스 개수', value: `daily:${MxDef.service_count}` },
    {
        label: '일간 평균 응답시간',
        value: `daily:${MxDef.service_responseTime}`,
    },
    { label: '시간별 서비스 개수', value: `hourly:${MxDef.service_count}` },
];

// 상태 관리
const selectedMetric = ref<string>(`daily:${MxDef.service_count}`);
const selectedDate = ref<number>(-1);
const selectedHour = ref<number>(-1);

// 차트 데이터
const chartData: ChartItem[] = [
    { time: 1640995200000, name: '01/01', value: 1250 },
    { time: 1641081600000, name: '01/02', value: 980 },
    { time: 1641168000000, name: '01/03', value: 1450 },
];

// 시간별 데이터 맵
const hourlyDataMap: Record<number, ChartItem[]> = {
    1640995200000: [
        { time: 1640995200000, name: '00:00', value: 45 },
        { time: 1640998800000, name: '01:00', value: 52 },
        // ... 24시간 데이터
    ],
};

// 이벤트 핸들러
const onTabChange = (tab: ChartType) => {
    console.log('차트 타입 변경:', tab);
};

const onDataSelect = (time: number, hour: number, duplicate: boolean) => {
    console.log('데이터 선택:', { time, hour, duplicate });
};

const onMetricChange = (metric: MxDef, interval: number) => {
    console.log('메트릭 변경:', { metric, interval });
    // API 호출하여 새 데이터 로드
};
</script>
```

## 샘플 코드 예제

```vue
<template>
    <daily-and-hourly-chart
        :width="300"
        :height="600"
        :tab-items="VIEW_TYPES"
        :metric-items="METRIC_TYPES"
        :items="DAILY_CHART_DATA1"
        :hourly-item-map="hourlyMap"
        v-model:selected-metric="selectedMetric1"
        v-model:selected-date="selectedDate1"
        v-model:selected-hour="selectedHour1"
        @tab="onChangeTab"
        @select="onChangeSelect1"
    ></daily-and-hourly-chart>
    <daily-and-hourly-chart
        :width="300"
        :height="600"
        :tab-items="[]"
        :metric-items="METRIC_TYPES.slice(3)"
        :items="DAILY_CHART_DATA2"
        :hourly-item-map="{}"
        large
        v-model:selected-metric="selectedMetric2"
        v-model:selected-date="selectedDate2"
        v-model:selected-hour="selectedHour2"
        @tab="onChangeTab"
        @select="onChangeSelect2"
    ></daily-and-hourly-chart>
</template>

const selectedMetric1 = ref<string>(`daily:${MxDef.service_count}`);
const selectedDate1 = ref<number>(DAILY_CHART_DATA1[0].time);
const selectedHour1 = ref<number>(-1);
const selectedMetric2 = ref<string>(`hourly:${MxDef.service_count}`);
const selectedDate2 = ref<number>(DAILY_CHART_DATA2[0].time);
const selectedHour2 = ref<number>(-1);
const hourlyMap = computed(() => getHourlyDataMap());

const tooltipFormatter = (item: ChartItem, type: ChartType) => {
    const date = new Date(item.time);
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');

return `${month}/${day} ${hours}`;
};
</script>
```

## 인터랙티브 데모

// i18n 메시지 제공
provide('i18n', {
  day: '일',
  hour: '시간'
});

const selectedMetric = ref(`daily:${MxDef.service_count}`);
const selectedDate = ref(-1);
const selectedHour = ref(-1);
const selectedTab = ref('bar');

// 탭 항목
const tabItems = [
  { label: '막대형', value: 'bar' },
  { label: '세로막대형', value: 'column' }
];

// 메트릭 항목
const metricItems = [
  { label: '일간 서비스 개수', value: `daily:${MxDef.service_count}` },
  { label: '일간 평균 응답시간', value: `daily:${MxDef.service_responseTime}` },
  { label: '일간 오류 개수', value: `daily:${MxDef.service_errorCount}` },
  { label: '시간별 서비스 개수', value: `hourly:${MxDef.service_count}` }
];

// 샘플 일간 데이터
const dailyData = [
  { time: 1640995200000, name: '01/01', value: 1250 },
  { time: 1641081600000, name: '01/02', value: 980 },
  { time: 1641168000000, name: '01/03', value: 1450 },
  { time: 1641254400000, name: '01/04', value: 1100 },
  { time: 1641340800000, name: '01/05', value: 1320 },
  { time: 1641427200000, name: '01/06', value: 890 },
  { time: 1641513600000, name: '01/07', value: 1580 }
];

// 시간별 데이터 맵
const hourlyDataMap = computed(() => {
  const map = {};
  dailyData.forEach(day => {
    const hourlyData = [];
    for (let hour = 0; hour < 24; hour++) {
      hourlyData.push({
        time: day.time + (hour * 3600000),
        name: `${hour.toString().padStart(2, '0')}:00`,
        value: Math.floor(Math.random() * 100) + 10
      });
    }
    map[day.time] = hourlyData;
  });
  return map;
});

// 이벤트 로그
const eventLog = ref([]);

const onTabChange = (tab) => {
  addEvent('tab-change', `차트 타입이 ${tab}로 변경되었습니다.`);
};

const clearEventLog = () => {
  eventLog.value = [];
};
</script>

<div class="demo-info">
    <h4>현재 상태</h4>
    <div class="status-grid">
      <div class="status-item">
        <span class="label">선택된 메트릭:</span>
        <span class="value">{{ selectedMetric }}</span>
      </div>
      <div class="status-item">
        <span class="label">선택된 날짜:</span>
        <span class="value">{{ selectedDate >= 0 ? new Date(selectedDate).toLocaleDateString() : '없음' }}</span>
      </div>
      <div class="status-item">
        <span class="label">선택된 시간:</span>
        <span class="value">{{ selectedHour >= 0 ? `${selectedHour}시` : '없음' }}</span>
      </div>
      <div class="status-item">
        <span class="label">차트 타입:</span>
        <span class="value">{{ selectedTab }}</span>
      </div>
    </div>
  </div>

<div class="demo-events" v-if="eventLog.length > 0">
    <div class="events-header">
      <h4>이벤트 로그</h4>
      <button @click="clearEventLog" class="clear-btn">지우기</button>
    </div>
    <div class="events-list">
      <div v-for="event in eventLog" :key="event.time" class="event-item">
        <span class="event-time">{{ event.time }}</span>
        <span class="event-type">{{ event.type }}</span>
        <span class="event-message">{{ event.message }}</span>
      </div>
    </div>
  </div>
</div>

.demo-content {
  margin-bottom: 16px;
}

.demo-info {
  padding: 12px;
  background-color: var(--vp-c-bg-soft);
  border-radius: 6px;
  margin-bottom: 16px;
}

.demo-info h4 {
  margin: 0 0 12px 0;
  color: var(--vp-c-text-1);
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

.label {
  color: var(--vp-c-text-2);
  font-size: 14px;
}

.value {
  color: var(--vp-c-text-1);
  font-size: 14px;
  font-weight: 500;
}

.demo-events {
  background-color: var(--vp-c-bg-alt);
  border-radius: 6px;
  padding: 12px;
}

.events-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.events-header h4 {
  margin: 0;
  color: var(--vp-c-text-1);
}

.clear-btn {
  padding: 4px 8px;
  background: var(--vp-c-brand);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.events-list {
  max-height: 200px;
  overflow-y: auto;
}

.event-item {
  display: grid;
  grid-template-columns: 80px 120px 1fr;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--vp-c-divider);
  font-size: 12px;
}

.event-item:last-child {
  border-bottom: none;
}

.event-time {
  color: var(--vp-c-text-3);
}

.event-type {
  color: var(--vp-c-brand);
  font-weight: 500;
}

.event-message {
  color: var(--vp-c-text-2);
}
</style>

## 데이터 구조

### ChartItem

```typescript
interface ChartItem {
    time: number; // 시간 (Unix timestamp)
    name: string; // 표시명 (예: "01/01", "14:00")
    value: number; // 메트릭 값
}
```

### MetricItem & TabItem

```typescript
interface MetricItem {
    label: string; // 사용자에게 표시될 텍스트
    value: string; // 메트릭 식별자 (형식: "daily:MxDef" 또는 "hourly:MxDef")
}

interface TabItem {
    label: string; // 탭 텍스트
    value: ChartType; // 차트 타입 ('bar' | 'column')
}
```

## 고급 사용법

### 커스텀 툴팁 포맷터

```vue
<template>
    <daily-and-hourly-chart
        v-bind="chartProps"
        :tooltip-formatter="customTooltipFormatter"
    />
</template>

### 동적 데이터 로딩

```vue
<script setup lang="ts">
import { ref, watch } from 'vue';

const selectedMetric = ref<string>(`daily:${MxDef.service_count}`);
const chartData = ref<ChartItem[]>([]);
const hourlyDataMap = ref<Record<number, ChartItem[]>>({});

const onMetricChange = async (metric: MxDef, interval: number) => {
    // API 호출하여 새 데이터 로드
    const data = await fetchChartData(metric, interval);
    chartData.value = data.daily;
    hourlyDataMap.value = data.hourly;
};

// 메트릭 변경 감지하여 자동 데이터 로드
watch(selectedMetric, async (newMetric) => {
    const [type, metricId] = newMetric.split(':');
    const interval = type === 'daily' ? 86400000 : 3600000;
    await onMetricChange(parseInt(metricId), interval);
});
</script>
```

### 반응형 차트 크기

```vue
<template>
    <div ref="containerRef" class="chart-container">
        <daily-and-hourly-chart
            :width="containerWidth"
            :height="containerHeight"
            v-bind="chartProps"
        />
    </div>
</template>

const containerRef = ref<HTMLElement>();
const containerWidth = ref<number>(800);
const containerHeight = ref<number>(400);

useResizeObserver(containerRef, (entries) => {
    const entry = entries[0];
    containerWidth.value = entry.contentRect.width;
    containerHeight.value = Math.max(300, entry.contentRect.height);
});
</script>
```

## 의존성

-   `@jennifersoft/apm-components`
-   `@jennifersoft/apm-apis`
-   `@jennifersoft/vue-components-v2`
-   `@vueuse/core` (유틸리티 함수 사용 시)

### File: j5-components/relation-tree.md

# RelationTree

MSA 분석을 위한 연관된 트랜잭션들을 트리 구조로 시각화하는 컴포넌트입니다.

## 개요

RelationTree는 트랜잭션 간의 관계를 계층적 트리 구조로 표현하며, 각 노드는 트랜잭션 또는 애플리케이션을 나타냅니다. 사용자는 드래그, 줌, 노드 선택 등의 인터랙션을 통해 복잡한 MSA 구조를 효과적으로 분석할 수 있습니다.

## Props 인터페이스

```typescript
interface Props {
    width: number; // 컴포넌트 전체 너비
    height: number; // 컴포넌트 전체 높이
    screenWidth: number; // 뷰포트 너비
    screenHeight: number; // 뷰포트 높이
    children: RelationTreeData[]; // 트리 데이터
    globalScale?: number; // 전역 스케일 (기본값: 1)
    selectedId?: string; // 선택된 노드 ID
    focusedId?: string; // 포커스된 노드 ID
    useResizer?: boolean; // 리사이저 사용 여부 (기본값: false)
    useKeyboard?: boolean; // 키보드 사용 여부 (기본값: false)
    useSimpleTooltip?: boolean; // 간단한 툴팁 사용 여부 (기본값: false)
    showScaleControls?: boolean; // 스케일 컨트롤 표시 여부 (기본값: true)
    layout?: RelationTreeLayout; // 레이아웃 방향 ('horizontal' | 'vertical', 기본값: 'horizontal')
}

interface RelationTreeData extends ApiRelationData {
    rootId?: string;
    type: 'TRANSACTION' | 'APPLICATION';
    id: string;
    name: string;
    children?: RelationTreeData[];
    startTime: number;
    relation: ApiTransactionRelationData | ApiApplicationRelationData;
}
```

## 이벤트

-   `select`: 노드 선택 시 발생 - `(nodeId: string) => void`
-   `focus`: 노드 포커스 시 발생 - `(nodeId: string) => void`

## 기본 사용법

```vue
<template>
    <RelationTree
        :width="800"
        :height="600"
        :screen-width="800"
        :screen-height="600"
        :children="relationData"
        :use-resizer="true"
        :global-scale="0.7"
        :show-scale-controls="true"
        :layout="'horizontal'"
        @select="onNodeSelect"
        @focus="onNodeFocus"
    />
</template>

const relationData: RelationTreeData[] = [
    // 관계 데이터...
];

const onNodeSelect = (nodeId: string) => {
    console.log('Selected node:', nodeId);
};

const onNodeFocus = (nodeId: string) => {
    console.log('Focused node:', nodeId);
};
</script>
```

## 인터랙티브 데모

const RELATION_TREE_WIDTH = 1000;
const RELATION_TREE_HEIGHT = 600;

// 컨트롤 상태
const useSimpleTooltip = ref(false);
const globalScale = ref(0.7);
const useResizer = ref(true);
const selectedNodeId = ref('');

const totalWidth = computed(() => 
  RELATION_TREE_WIDTH - SizeInRelationTree.MARGIN * 2
);
const totalHeight = computed(() => 
  RELATION_TREE_HEIGHT - SizeInRelationTree.MARGIN * 2
);

// 이벤트 핸들러
const onNodeSelect = (nodeId) => {
  selectedNodeId.value = nodeId;
  console.log('Selected:', nodeId);
};

const onNodeFocus = (nodeId) => {
  console.log('Focused:', nodeId);
};

provide<I18n>('i18n', {
    method: 'Method',
    sql: 'SQL',
    externalCall: 'External Call',
    batch: 'Batch Job',
    error: 'ERROR',
    fetch: 'Fetch',
    
    callCount: 'Call Count',
    errorCount: 'Error Count',
    elapsedTimeAvg: 'Elapsed Time Avg',
    elapsedTime: 'Elapsed Time',
    sqlTimeAvg: 'Sql Time Avg',
    externalCallTimeAvg: 'External Call Time Avg',
    elapsedTimeStandardDeviation: 'Elapsed Time Standard Deviation',
    p50: 'P50',
    p90: 'P90',
    p95: 'P95',
    p99: 'P99',
    min: 'Min',
    max: 'Max',
});
</script>

<div class="demo-container">
  <div class="demo-controls">
    <div class="control-group">
      <label>
        <input type="checkbox" v-model="useSimpleTooltip" />
        Simple Tooltip
      </label>
      <label>
        <input type="checkbox" v-model="useResizer" />
        Use Resizer
      </label>
    </div>
    
    <div class="control-group">
      <label>
        Global Scale: {{ globalScale }}
        <input
          type="range"
          v-model="globalScale"
          min="0.3"
          max="1.5"
          step="0.1"
        />
      </label>
    </div>
    
    <div class="control-group" v-if="selectedNodeId">
      <span class="selected-info">Selected: {{ selectedNodeId }}</span>
    </div>
  </div>

## 주요 기능

### 1. 스케일 컨트롤

-   **마우스 휠**: 확대/축소
-   **스케일 컨트롤러**: 우상단 버튼으로 정밀 조정
-   **globalScale prop**: 초기 스케일 설정

### 2. 드래그 앤 팬

-   **마우스 드래그**: 뷰포트 이동
-   **자동 센터링**: 루트 노드 기준 자동 정렬

### 3. 노드 인터랙션

-   **호버**: 노드 정보 툴팁 표시
-   **클릭**: 노드 선택 (select 이벤트 발생)
-   **포커스**: 키보드 네비게이션 지원

### 4. 툴팁 모드

-   **기본 툴팁**: 상세한 메트릭 정보 표시
-   **간단한 툴팁**: 핵심 정보만 표시

## 고급 사용법

### 키보드 네비게이션 활성화

```vue
<template>
    <RelationTree
        :use-keyboard="true"
        @focus="onNodeFocus"
        v-bind="otherProps"
    />
</template>
```

### 특정 노드 미리 선택

```vue
<template>
    <RelationTree
        :selected-id="'target-node-id'"
        :focused-id="'focused-node-id'"
        v-bind="otherProps"
    />
</template>
```

### 커스텀 크기 설정

```vue
<script setup>
import { SizeInRelationTree } from '@jennifersoft/apm-components';

const CUSTOM_WIDTH = 1200;
const CUSTOM_HEIGHT = 800;

const adjustedWidth = computed(
    () => CUSTOM_WIDTH - SizeInRelationTree.MARGIN * 2
);
const adjustedHeight = computed(
    () => CUSTOM_HEIGHT - SizeInRelationTree.MARGIN * 2
);
</script>
```

## 데이터 구조

관계 트리 데이터는 다음과 같은 구조를 가져야 합니다:

```typescript
interface RelationTreeData {
    type: 'TRANSACTION' | 'APPLICATION';
    id: string;
    name: string;
    startTime: number;
    children?: RelationTreeData[];
    relation: {
        domainId: number;
        domainName: string;
        instId: number;
        instanceName: string;
        elapsedTime: number;
        sqlTime: number;
        externalCallTime: number;
        methodTime: number;
        errorTypeOrZero: number;
        stacked: boolean;
        async: boolean;
    };
}
```

## 성능 최적화

1. **대용량 데이터**: 가상화를 통한 렌더링 최적화
2. **스로틀링**: 드래그/줌 이벤트 스로틀링 적용
3. **메모리 관리**: 컴포넌트 언마운트 시 리소스 정리

## 의존성

-   Vue 3 Composition API
-   D3.js (hierarchy, tree, shape)
-   `@vueuse/core` (throttle, timeout 유틸리티)
-   `@jennifersoft/apm-apis` (타입 정의)

.demo-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px;
  background: var(--vp-c-bg-soft);
  border-radius: 6px;
}

.control-group {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.control-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.control-group input[type="range"] {
  width: 150px;
}

.selected-info {
  font-weight: 600;
  color: var(--vp-c-brand);
}

.demo-content {
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
  overflow: hidden;
}
</style>

### File: j5-components/relation-chart.md

# RelationChart

## 개요

`RelationChart`는 마이크로서비스 아키텍처에서 서비스 간의 관계와 성능 메트릭을 시각화하는 차트 컴포넌트입니다. `RelationTree`와 달리 차트 형태로 데이터를 표시하며, 응답 시간 또는 시작 시간별로 정렬 기능을 제공합니다.

### 주요 기능

-   서비스 관계를 막대 차트 형태로 시각화
-   응답 시간(response time) 또는 시작 시간(start time) 기준 정렬
-   노드 선택 및 포커스 기능
-   에러 상태 표시
-   툴팁을 통한 상세 정보 표시
-   RelationTree와의 선택 동기화 지원

### RelationTree와의 차이점

-   **RelationTree**: 트리 구조로 계층적 관계를 시각화
-   **RelationChart**: 차트 형태로 성능 메트릭 중심 시각화

## Props 인터페이스

```typescript
interface RelationChartProps {
    // 필수 Props
    children: RelationTreeData[]; // 관계 데이터 트리
    width: number; // 차트 너비
    height: number; // 차트 높이

// 선택적 Props
    focusedId?: string; // 포커스된 노드 ID
    selectedId?: string; // 선택된 노드 ID
    useSort?: boolean; // 정렬 기능 사용 여부 (기본값: true)
    hideSort?: boolean; // 정렬 헤더 숨김 여부 (기본값: false)
    sortType?: string; // 정렬 타입 ('response' | 'start')
    selectedNode?: RelationTreeData; // 선택된 노드 데이터
}
```

## 이벤트

### @select

노드가 선택되었을 때 발생합니다.

```typescript
(node: RelationTreeData) => void
```

### @focus

노드에 포커스가 설정되었을 때 발생합니다.

```typescript
(node: RelationTreeData | undefined) => void
```

### @node-click

노드가 클릭되었을 때 발생합니다. 일반적으로 xviewAnalysisV2 화면으로 이동할 때 사용됩니다.

```typescript
(node: RelationTreeData) => void
```

## 기본 사용법

```vue
<template>
    <RelationChart
        :children="relationData"
        :width="600"
        :height="400"
        @select="handleSelect"
        @focus="handleFocus"
        @node-click="handleNodeClick"
    />
</template>

// i18n 메시지 제공 (필수)
provide('i18n', {
    responseTime: 'Response Time',
    startTime: 'Start Time',
});

const relationData = ref([
    {
        type: 'APPLICATION',
        id: '1',
        name: 'API Gateway',
        startTime: 1741307885018,
        relation: {
            hitSum: 100,
            elapsedTimeAverage: 250.5,
            errorCount: 2,
        },
        children: [],
    },
]);

const handleSelect = (node) => {
    console.log('Selected node:', node.name);
};

const handleFocus = (node) => {
    console.log('Focused node:', node?.name);
};

const handleNodeClick = (node) => {
    console.log('Open analysis for:', node.name);
};
</script>
```

## 인터랙티브 데모

// i18n 메시지 제공
provide('i18n', {
  responseTime: 'Response Time',
  startTime: 'Start Time'
})

// 샘플 데이터
const RELATION_SAMPLE_DATA = [
  {
    type: 'APPLICATION',
    id: '103438533238052187',
    name: 'runTest',
    startTime: 1741307885018,
    relation: {
      hitSum: 11,
      elapsedTimeAverage: 114.0,
      sqlTimeAverage: 0.0,
      externalCallTimeAverage: 83.09,
      elapsedTimeStandardDeviation: 0.0,
      errorCount: 7,
      transactionIdByDomain: {
        '3330': ['476462222948158807']
      },
      transactionSearchRange: {
        startTime: 1741307885018,
        endTime: 1741308051176
      }
    },
    children: [
      {
        type: 'APPLICATION',
        id: '-9210966042668012376',
        name: 'Order Service',
        startTime: 1741307885018,
        relation: {
          hitSum: 11,
          elapsedTimeAverage: 114.0,
          sqlTimeAverage: 0.0,
          externalCallTimeAverage: 83.09,
          errorCount: 2
        },
        children: [
          {
            type: 'APPLICATION',
            id: '5719851455419267076',
            name: 'Inventory Service',
            startTime: 1741307885040,
            relation: {
              hitSum: 11,
              elapsedTimeAverage: 78.36,
              sqlTimeAverage: 23.45,
              externalCallTimeAverage: 0.0,
              errorCount: 0
            },
            children: []
          },
          {
            type: 'APPLICATION',
            id: '5719851455419267077',
            name: 'Payment Service',
            startTime: 1741307885120,
            relation: {
              hitSum: 8,
              elapsedTimeAverage: 156.25,
              sqlTimeAverage: 45.67,
              externalCallTimeAverage: 12.34,
              errorCount: 1
            },
            children: []
          }
        ]
      }
    ]
  }
]

// 상태 관리
const useSort = ref(true)
const hideSort = ref(false)
const sortType = ref('response')
const focusedId = ref('')
const selectedId = ref('')
const focusedNode = ref(null)
const selectedNode = ref(null)
const syncSelection = ref(true)
const expandedIds = ref(new Set())

// 컨테이너 크기 (640px 제한에 맞춤)
const containerSize = ref({ width: 640, height: 400 })

// 평면화된 노드 개수 계산
const flattenedNodesCount = computed(() => {
  const flattenNodes = (nodes) => {
    const result = []
    for (const node of nodes) {
      result.push(node)
      if (node.children && node.children.length > 0) {
        result.push(...flattenNodes(node.children))
      }
    }
    return result
  }
  return flattenNodes(RELATION_SAMPLE_DATA).length
})

// Tree 이벤트 핸들러
const handleTreeSelect = (node) => {
  if (syncSelection.value) {
    selectedNode.value = node
    selectedId.value = node.id
  }
}

const handleTreeFocus = (node) => {
  if (syncSelection.value) {
    focusedNode.value = node || null
    focusedId.value = node?.id || ''
  }
}

// Chart 이벤트 핸들러
const handleChartSelect = (node) => {
  if (syncSelection.value) {
    selectedNode.value = node
    selectedId.value = node.id
  }
}

const handleChartFocus = (node) => {
  if (syncSelection.value) {
    focusedNode.value = node || null
    focusedId.value = node?.id || ''
  }
}

const handleNodeClick = (node) => {
  alert(`Opening xviewAnalysisV2 for: ${node.name}`)
}

// Expand/Collapse 핸들러
const handleExpand = (node) => {
  expandedIds.value.add(node.id)
}

const handleCollapse = (node) => {
  expandedIds.value.delete(node.id)
}
</script>

<div class="demo-container" style="max-width: 640px;">
  <div class="demo-controls">
    <label class="control-item">
      <input type="checkbox" v-model="useSort" />
      Enable Sorting
    </label>
    <label class="control-item">
      <input type="checkbox" v-model="hideSort" />
      Hide Sort Header
    </label>
    <label class="control-item">
      <input type="checkbox" v-model="syncSelection" />
      Sync Selection
    </label>
  </div>

<div class="demo-panels" style="display: flex; gap: 1rem;">
    <div class="component-panel">
      <h4>RelationTree</h4>
      <div class="tree-container">
        <RelationTree
          :children="RELATION_SAMPLE_DATA"
          :width="containerSize.width"
          :height="containerSize.height"
          :screen-width="containerSize.width"
          :screen-height="containerSize.height"
          :focused-id="focusedId"
          :selected-id="selectedId"
          :use-resizer="false"
          :show-scale-controls="true"
          @select="handleTreeSelect"
          @focus="handleTreeFocus"
          @expand="handleExpand"
          @collapse="handleCollapse"
        />
      </div>
    </div>
    <div class="component-panel">
      <h4>RelationChart</h4>
      <div class="chart-container">
        <RelationChart
          :children="RELATION_SAMPLE_DATA"
          :width="containerSize.width"
          :height="containerSize.height"
          :focused-id="focusedId"
          :selected-id="selectedId"
          :use-sort="useSort"
          :hide-sort="hideSort"
          v-model:sort-type="sortType"
          @select="handleChartSelect"
          @focus="handleChartFocus"
          @node-click="handleNodeClick"
        />
      </div>
    </div>
  </div>

<div class="demo-info">
    <strong>Current State:</strong>
    <ul>
      <li>Sort Type: {{ sortType }}</li>
      <li>Focused: {{ focusedNode?.name || 'None' }}</li>
      <li>Selected: {{ selectedNode?.name || 'None' }}</li>
      <li>Total Nodes: {{ flattenedNodesCount }}</li>
    </ul>
  </div>
</div>

.demo-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.75rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.control-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #374151;
}

.control-item input[type='checkbox'] {
  width: auto;
  margin: 0;
}

.demo-panels {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.component-panel {
  flex: 1;
  min-width: 310px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0.75rem;
}

.component-panel h4 {
  margin: 0 0 0.5rem;
  color: #111827;
  font-size: 0.95rem;
  font-weight: 600;
}

.tree-container,
.chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  height: 420px;
  overflow: hidden;
}

.demo-info {
  padding: 0.75rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  font-size: 0.875rem;
}

.demo-info strong {
  color: #1e40af;
}

.demo-info ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  color: #3730a3;
}

.demo-info li {
  margin: 0.25rem 0;
}
</style>

## 데이터 구조

### RelationTreeData 인터페이스

```typescript
interface RelationTreeData extends ApiRelationData {
    rootId?: string;
}

interface ApiRelationData {
    type:
        | 'APPLICATION'
        | 'TRANSACTION'
        | 'INDIVIDUAL_DB'
        | 'INDIVIDUAL_EXTERNAL_CALL';
    id: string;
    name: string;
    startTime: number;
    relation: ApiTransactionRelationData | ApiApplicationRelationData;
    children: ApiRelationData[];
}

interface ApiApplicationRelationData {
    hitSum: number;
    elapsedTimeAverage: number;
    sqlTimeAverage: number;
    externalCallTimeAverage: number;
    elapsedTimeStandardDeviation: number;
    errorCount: number;
    transactionIdByDomain?: Record<string, string[]>;
    transactionSearchRange?: {
        startTime: number;
        endTime: number;
    };
}
```

## 고급 사용법

### 정렬 기능 커스터마이징

```vue
<template>
    <RelationChart
        :children="relationData"
        :width="600"
        :height="400"
        :use-sort="true"
        :hide-sort="false"
        v-model:sort-type="currentSortType"
        @select="handleSelect"
    />
</template>

// i18n 메시지 제공 (필수)
provide('i18n', {
    responseTime: 'Response Time',
    startTime: 'Start Time',
});

const currentSortType = ref('response'); // 'response' | 'start'

// 정렬 타입 변경 감지
watch(currentSortType, (newType) => {
    console.log('Sort type changed to:', newType);
});
</script>
```

### RelationTree와 선택 동기화

```vue
<template>
    <div style="display: flex; gap: 1rem;">
        <RelationTree
            :children="relationData"
            :width="400"
            :height="400"
            :focused-id="focusedId"
            :selected-id="selectedId"
            @select="handleSelect"
            @focus="handleFocus"
        />

// i18n 메시지 제공 (필수)
provide('i18n', {
    responseTime: 'Response Time',
    startTime: 'Start Time',
});

const focusedId = ref('');
const selectedId = ref('');

const handleSelect = (node) => {
    selectedId.value = node.id;
    console.log('Node selected:', node.name);
};

const handleFocus = (node) => {
    focusedId.value = node?.id || '';
    console.log('Node focused:', node?.name);
};
</script>
```

## 스타일링

컴포넌트는 CSS 변수를 통해 커스터마이징할 수 있습니다:

```css
:root {
    --relation-chart-background: white;
    --relation-chart-border-color: #e5e7eb;
    --relation-chart-hover-color: #f3f4f6;
    --relation-chart-selected-color: #dbeafe;
    --relation-chart-error-color: #fca5a5;
}
```

## 접근성

-   키보드 내비게이션 지원 (화살표 키로 노드 선택)
-   ARIA 레이블 제공
-   포커스 상태 시각적 표시

## 성능 고려사항

-   대량의 노드를 렌더링할 때는 가상 스크롤링이 자동으로 적용됩니다
-   500개 이상의 노드를 표시할 경우 성능 저하가 발생할 수 있습니다
-   필요한 경우 데이터를 페이지네이션하거나 필터링하는 것을 권장합니다

## 의존성

-   Vue 3.0+
-   @jennifersoft/vue-components-v2
-   @jennifersoft/apm-apis
-   d3-scale (차트 스케일링)
-   @vueuse/core (리사이즈 감지)

### File: j5-components/paging-table.md

# PagingTable

성능 데이터 표현을 위한 테이블 컴포넌트입니다.

## Enums

```ts
export enum PagingTableCellType {
    TEXT,
    TEXT_WITH_TOOLTIP,
    VALUE,
    DATE,
    TIME,
    ERROR,
    BAR,
    CUSTOM,
}

export enum PagingTableSortOrder {
    NONE,
    ASC,
    DESC,
}
```

## Types

```ts
import { PagingTableCellType, PagingTableSortOrder } from './enums';

export interface PagingTableProps<T extends Record<string, unknown>> {
    alias: string;
    width: number;
    height: number;
    displayCount: number;
    columns: PagingTableColumn[];
    rows: PagingTableRow<T>[];
    rowHeight?: number;
    rowId?: string;
    maxMap?: Record<string, number>;
    sortKey?: string;
    sortOrder?: PagingTableSortOrder;
    sortLoading?: boolean;
}

export interface PagingRowProps<T extends Record<string, unknown>> {
    row: PagingTableRow<T>;
    columns: PagingTableColumn[];
    cellWidths: number[];
    scrollBarWidth: number;
    maxMap?: Record<string, number>;
}

export interface PagingTableColumn {
    key: string;
    name: string;
    rate: number;
    sortable: boolean;
    visible: boolean;
    type: PagingTableCellType;
    color?: string;
}

export interface PagingTableRow<T> {
    data: T;
    id?: string;
}

// PaingTable.vue
interface SimpleTableData extends Record<string, unknown> {
    name: string;
    age: number;
    city: string;
    status: string;
}

const emit = defineEmits(['sort', 'select']);
const props = defineProps<PagingTableProps<T>>();
```

## Sample Code

```vue
<template>
    <paging-table
        :alias="'simple-table'"
        :width="640"
        :height="390"
        :columns="SIMPLE_TABLE_COLUMNS"
        :rows="SIMPLE_TABLE_ROWS"
        :display-count="10"
        :max-map="SIMPLE_TABLE_MAX_MAP"
        @select="onSelectPagingTable"
    >
        <template #information>
            <span></span>
        </template>
    </paging-table>
</template>

provide<I18n>('i18n', {
    pageInfo: '%d개 중 %s',
    firstPage: '첫 페이지',
    lastPage: '마지막 페이지',
    manageTableColumns: '테이블 컬럼 관리',
    resetTableSettings: '테이블 설정 초기화',
});

const onSelectPagingTable = (row) => {
    console.log('PagingTable selected:', row);
};
</script>
```

## Demo

provide<I18n>("i18n", {
    pageInfo: '%d개 중 %s',
    firstPage: '첫 페이지',
    lastPage: '마지막 페이지',
    manageTableColumns: '테이블 컬럼 관리',
    resetTableSettings: '테이블 설정 초기화'
});

const onSelectPagingTable = (row) => {
    console.log('PagingTable selected:', row);
};
</script>

### File: j5-components/tree-selector.md

# TreeSelector

성능을 고려하여 가상 스크롤이 적용된 다목적 트리 컴포넌트입니다.

## 개요

TreeSelector는 계층적 데이터를 트리 구조로 표시하며, 단일 선택과 다중 선택 모드를 지원합니다. 가상 스크롤링을 통해 대용량 데이터도 효율적으로 처리할 수 있습니다.

## Props 인터페이스

```typescript
interface Props<T = any> {
    tree: TreeNode<T>[]; // 트리 데이터
    multiSelect?: boolean; // 다중 선택 모드 (기본값: false)
    leafIconForMultiSelect?: IconTypes; // 다중 선택 시 체크박스 표시할 아이콘 타입
    width?: number; // 컴포넌트 너비 (기본값: 0 - 자동)
    height?: number; // 컴포넌트 높이 (기본값: 300)
    checkedKeys?: string[]; // 체크된 노드 키 목록 (기본값: [])
}

interface TreeNode<T = any> {
    key: string; // 고유 키
    label: string; // 표시 텍스트
    children: TreeNode<T>[]; // 자식 노드들
    fold?: boolean; // 접힘 상태 (기본값: false)
    check?: boolean; // 체크 상태 (기본값: false)
    disable?: boolean; // 비활성화 상태 (기본값: false)
    icon?: IconTypes; // 노드 아이콘
    data?: T; // 사용자 데이터
}
```

## 이벤트

-   `fold`: 노드 접힘/펼침 시 발생 - `(nodes: TreeNode<T>[]) => void`
-   `change`: 노드 선택 변경 시 발생 - `(nodes: TreeNode<T>[]) => void`

## 기본 사용법

```vue
<template>
    <TreeSelector
        :tree="treeData"
        :multi-select="false"
        :width="300"
        :height="400"
        @change="onSelectionChange"
        @fold="onNodeFold"
    />
</template>

interface CustomData {
    id: number;
    name: string;
}

const treeData: TreeNode<CustomData>[] = [
    {
        key: '1',
        label: 'Root Node',
        icon: ICON_TYPE.folder,
        data: { id: 1, name: 'root' },
        children: [
            {
                key: '1-1',
                label: 'Child Node',
                icon: ICON_TYPE.file,
                data: { id: 2, name: 'child' },
                children: [],
            },
        ],
    },
];

const onSelectionChange = (nodes: TreeNode<CustomData>[]) => {
    console.log('Selected nodes:', nodes);
};

const onNodeFold = (nodes: TreeNode<CustomData>[]) => {
    console.log('Fold state changed:', nodes);
};
</script>
```

## 인터랙티브 데모

// 컨트롤 상태
const multiSelect = ref(false);
const treeWidth = ref(300);
const treeHeight = ref(430);
const selectedNodes = ref([]);
const foldedNodes = ref([]);

// 이벤트 핸들러
const onTreeFold = (nodes) => {
    foldedNodes.value = nodes;
    console.log('Tree fold:', nodes);
};

const onTreeChange = (nodes) => {
    selectedNodes.value = nodes;
    console.log('Tree change:', nodes);
};

// 샘플 데이터
const sampleTreeData = ref([
    {
        key: '0',
        label: 'sam',
        expanded: true,
        children: [
            { key: '0.0', label: 'test-sam', selected: false },
            { key: '0.1', label: 'agent-feature-demo', selected: false },
            { key: '0.2', label: 'sam-office', selected: false }
        ]
    },
    {
        key: '1', 
        label: 'ryan',
        expanded: false,
        children: [
            { key: '1.0', label: 'ryan-dash', selected: false },
            { key: '1.1', label: 'ryan-k8s-1011', selected: false }
        ]
    }
]);

// 토글 함수
const toggleNode = (node) => {
    node.expanded = !node.expanded;
    if (node.children) {
        selectedNodes.value = node.children.filter(child => child.selected);
    }
};
</script>

<div class="demo-container">
  <div class="demo-controls">
    <div class="control-group">
      <label>
        <input type="checkbox" v-model="multiSelect" />
        Multi Select
      </label>
    </div>
    <div class="control-group">
      <label>
        Width: {{ treeWidth }}px
        <input
          type="range"
          v-model="treeWidth"
          min="200"
          max="500"
          step="10"
        />
      </label>
      <label>
        Height: {{ treeHeight }}px
        <input
          type="range"
          v-model="treeHeight"
          min="200"
          max="600"
          step="10"
        />
      </label>
    </div>
  </div>

<div class="demo-content">
    <div class="demo-section">
      <h4>TreeSelector</h4>
      <TreeSelector
        :tree="TREE_SAMPLE_DATA"
        :multi-select="multiSelect"
        :leaf-icon-for-multi-select="multiSelect ? ICON_TYPE.domain : undefined"
        :width="treeWidth"
        :height="treeHeight"
        @fold="onTreeFold"
        @change="onTreeChange"
      />
    </div>
    <div class="demo-info">
      <div v-if="selectedNodes.length > 0">
        <h4>Selected Nodes</h4>
        <div class="node-list">
          <div v-for="node in selectedNodes" :key="node.key" class="node-item">
            {{ node.label }} ({{ node.key }})
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

## 사용 시나리오

### 1. 단일 선택 모드 (Single Selection)

단일 노드만 선택할 수 있는 기본 모드입니다.

```vue
<template>
    <TreeSelector
        :tree="treeData"
        :multi-select="false"
        @change="onSingleSelect"
    />
</template>

### 2. 다중 선택 모드 (Multi Selection)

여러 노드를 동시에 선택할 수 있습니다.

```vue
<template>
    <TreeSelector
        :tree="treeData"
        :multi-select="true"
        @change="onMultiSelect"
    />
</template>

### 3. 제한된 다중 선택 (Leaf-only Multi Selection)

특정 아이콘을 가진 노드(주로 리프 노드)만 체크박스를 표시합니다.

```vue
<template>
    <TreeSelector
        :tree="domainTreeData"
        :multi-select="true"
        :leaf-icon-for-multi-select="ICON_TYPE.domain"
        @change="onDomainSelect"
    />
</template>

// domain 아이콘을 가진 노드만 선택 가능
const onDomainSelect = (nodes) => {
    const domainIds = nodes.map((node) => node.data.domainId);
    console.log('Selected domains:', domainIds);
};
</script>
```

### 4. 미리 체크된 상태로 시작

```vue
<template>
    <TreeSelector
        :tree="treeData"
        :multi-select="true"
        :checked-keys="['node-1', 'node-3']"
        @change="onPreCheckedChange"
    />
</template>
```

## 고급 기능

### 가상 스크롤링

대용량 트리 데이터의 성능을 위해 가상 스크롤링이 자동으로 적용됩니다.

```vue
<template>
    
    <TreeSelector :tree="massiveTreeData" :height="400" />
</template>
```

### 커스텀 아이콘 사용

각 노드에 다양한 아이콘을 설정할 수 있습니다.

```vue
<script setup>
import { ICON_TYPE } from '@jennifersoft/vue-components-v2';

const customTreeData = [
    {
        key: '1',
        label: 'Server Group',
        icon: ICON_TYPE.domainGroup,
        children: [
            {
                key: '1-1',
                label: 'Web Server',
                icon: ICON_TYPE.domain,
                children: [],
            },
            {
                key: '1-2',
                label: 'Database Server',
                icon: ICON_TYPE.database,
                children: [],
            },
        ],
    },
];
</script>
```

### 노드 상태 관리

```vue
<script setup>
const treeDataWithStates = [
    {
        key: '1',
        label: 'Active Node',
        disable: false, // 활성화됨
        fold: false, // 펼쳐짐
        check: true, // 체크됨
        children: [
            {
                key: '1-1',
                label: 'Disabled Node',
                disable: true, // 비활성화됨
                children: [],
            },
        ],
    },
];
</script>
```

## 데이터 구조 예제

### 도메인/인스턴스 트리

```typescript
interface DomainData {
    domainId: number;
    instanceId: number;
}

const domainTree: TreeNode<DomainData>[] = [
    {
        key: 'domain-1000',
        label: 'Production',
        icon: ICON_TYPE.domainGroup,
        data: { domainId: 1000, instanceId: 0 },
        children: [
            {
                key: 'instance-1001',
                label: 'web-server-01',
                icon: ICON_TYPE.domain,
                data: { domainId: 1000, instanceId: 1001 },
                children: [],
            },
        ],
    },
];
```

## 성능 최적화

1. **가상 스크롤링**: 대용량 데이터 처리
2. **지연 로딩**: 필요한 노드만 렌더링
3. **메모리 효율성**: 불필요한 DOM 노드 최소화

## 접근성 (Accessibility)

-   키보드 네비게이션 지원
-   스크린 리더 호환성
-   ARIA 속성 자동 적용

## 의존성

-   Vue 3 Composition API
-   `@jennifersoft/vue-components-v2` (아이콘)
-   Virtual Scrolling 라이브러리 (내장)

.demo-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px;
  background: var(--vp-c-bg-soft);
  border-radius: 6px;
}

.control-group {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.control-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.control-group input[type="range"] {
  width: 120px;
}

.demo-content {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.demo-section {
  flex: 1;
}

.demo-info {
  flex: 1;
  min-width: 200px;
}

.demo-info h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--vp-c-text-1);
}

.node-list {
  border: 1px solid var(--vp-c-divider);
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.node-item {
  padding: 8px 12px;
  border-bottom: 1px solid var(--vp-c-divider-light);
  font-size: 12px;
  color: var(--vp-c-text-2);
}

.node-item:last-child {
  border-bottom: none;
}
</style>

### File: j5-components/navigation-bar.md

# NavigationBar

좌측 수직 네비게이션 사이드바 컴포넌트

## 개요

NavigationBar는 APM 애플리케이션의 메인 네비게이션 인터페이스를 제공하는 좌측 수직 사이드바 컴포넌트입니다. 메뉴 클릭 시 슬라이드 패널이 열리며, 대시보드, 분석, 통계 등의 주요 기능에 접근할 수 있습니다.

### 주요 기능

- 📱 **수직 사이드바**: 72px 고정 너비의 좌측 네비게이션 바
- 🎯 **슬라이드 패널**: 메뉴 클릭 시 256px (기본값) 너비의 패널이 슬라이드로 열림
- 🔄 **토글 동작**: 같은 메뉴 재클릭 시 패널 닫기, 다른 메뉴 클릭 시 패널 전환
- 🌐 **Teleport 지원**: Portal을 통한 유연한 DOM 배치
- 🏷️ **배지 표시**: 알림 개수 등을 표시하는 배지 지원
- 🎨 **커스터마이징**: 로고, 메뉴 아이템, 패널 콘텐츠 완전 커스터마이징
- 🔌 **독립 패널**: 일반 패널과 별도로 작동하는 커스텀 패널 지원
- ♿ **접근성**: 외부 클릭 감지, 키보드 네비게이션

## Props

### NavigationBar Props

| 속성 | 타입 | 기본값 | 설명 |
|------|------|--------|------|
| `headMenuItems` | `MenuItem[]` | `[]` | 상단 메뉴 아이템 목록 |
| `tailMenuItems` | `MenuItem[]` | `[]` | 하단 메뉴 아이템 목록 |
| `logoSrc` | `string` | - | 로고 이미지 소스 (없으면 #logo 슬롯 사용) |
| `logoHref` | `string` | `'/'` | 로고 클릭 시 이동할 URL |
| `selectedPanel` | `string \| null` | `null` | 현재 선택된 패널 키 (v-model) |
| `panelWidth` | `number` | `256` | 패널 너비(px) - 일반 패널과 커스텀 패널 모두에 적용 |
| `teleportTo` | `string \| null` | `'body'` | Teleport 대상 선택자 |
| `enableCustomPanel` | `boolean` | `false` | 커스텀 패널 활성화 여부 |
| `customPanelKey` | `string` | `'custom'` | 커스텀 패널 식별 키 |
| `class` | `string` | - | 추가 CSS 클래스 |

### MenuItem Interface

```typescript
interface MenuItem {
  /** 메뉴 식별자 */
  key: string;
  /** 아이콘 (ICON_TYPE) */
  icon: IconTypes;
  /** 표시 이름 */
  displayName: string;
  /** 메뉴 타입 */
  type: 'panel' | 'event';  // panel: 패널 열림, event: 이벤트만 발생
  /** 선택 상태 */
  selected?: boolean;
  /** 눌림 상태 (패널이 열려있을 때 시각적 피드백) */
  pressed?: boolean;
  /** 비활성화 상태 */
  disabled?: boolean;
  /** 배지 (알림 개수 등) */
  badge?: number | string;
  /** 툴팁 텍스트 */
  tooltip?: string;
}
```

### SubMenuItem Interface

```typescript
interface SubMenuItem {
  /** 메뉴 식별자 */
  key: string;
  /** 아이콘 (thumbnail이 있으면 선택사항) */
  icon?: IconTypes;
  /** 표시 이름 */
  displayName: string;
  /** 선택 상태 */
  selected?: boolean;
  /** 눌림 상태 (클릭 시 임시 시각적 피드백) */
  pressed?: boolean;
  /** 비활성화 상태 */
  disabled?: boolean;
  /** 검색 하이라이트 인덱스 */
  indices?: number[];
  /** 썸네일 이미지 경로 (아이콘 대신 사용) */
  thumbnail?: string;
  /** 툴팁 텍스트 */
  tooltip?: string;
}
```

## Events

| 이벤트 | 파라미터 | 설명 |
|--------|----------|------|
| `menu-click` | `item: MenuItem` | 메뉴 클릭 시 발생 |
| `panel-open` | `panelKey: string, item?: MenuItem` | 패널 열림 시 발생 |
| `panel-close` | `panelKey: string, item?: MenuItem` | 패널 닫힘 시 발생 |
| `logo-click` | - | 로고 클릭 시 발생 |
| `update:selectedPanel` | `value: string \| null` | v-model 업데이트 |

## Slots

### #logo

로고 영역 슬롯. `logoSrc` prop이 없을 때 사용됩니다.

```vue
<NavigationBar>
  <template #logo>
    <div class="custom-logo">MY APP</div>
  </template>
</NavigationBar>
```

### #panel-{key}

각 패널의 전체 콘텐츠를 정의하는 슬롯. `{key}`는 `MenuItem.key` 값입니다.

```vue
<NavigationBar>
  <template #panel-dashboard>
    <NavHeader title="대시보드" closeable @close="closePanel" />
    <div class="panel-content">
      
    </div>
  </template>
</NavigationBar>
```

### #custom-panel

독립적인 커스텀 패널 슬롯. `enableCustomPanel`이 true일 때 표시됩니다.

```vue
<NavigationBar :enable-custom-panel="showCustom">
  <template #custom-panel>
    <NavHeader title="커스텀" closeable @close="closeCustomPanel" />
    <div class="panel-content">
      
    </div>
  </template>
</NavigationBar>
```

## TypeScript 타입

```typescript
import type {
  MenuItem,
  SubMenuItem,
  NavigationBarProps,
  NavigationBarEmits
} from '@jennifersoft/apm-components';
```

## 관련 컴포넌트

NavigationBar와 함께 사용되는 주요 컴포넌트들입니다.

### NavHeader

패널 상단에 표시되는 헤더 컴포넌트입니다.

#### Props

| 속성 | 타입 | 기본값 | 설명 |
|------|------|--------|------|
| `title` | `string` | - | 헤더 타이틀 텍스트 |
| `tailIcon` | `IconTypes` | - | 우측 커스텀 아이콘 (closeable이 false일 때) |
| `closeable` | `boolean` | `false` | 닫기 아이콘 표시 및 close 이벤트 발생 여부 |
| `clickable` | `boolean` | `false` | 헤더 클릭 가능 여부 |

#### Events

| 이벤트 | 파라미터 | 설명 |
|--------|----------|------|
| `click` | `event: MouseEvent` | 헤더 클릭 시 발생 (clickable이 true일 때) |
| `close` | - | 닫기 아이콘 클릭 시 발생 (closeable이 true일 때) |

#### 사용 예시

```vue
<NavHeader
  title="대시보드"
  closeable
  @close="closePanel"
/>
```

### SubNavItem

패널 내부의 서브메뉴 아이템 컴포넌트입니다.

#### Props

| 속성 | 타입 | 기본값 | 설명 |
|------|------|--------|------|
| `icon` | `IconTypes` | - | 아이콘 (thumbnail이 없을 때 필수) |
| `name` | `string` | - | 표시 이름 |
| `selected` | `boolean` | `false` | 선택 상태 (보라색 하이라이트) |
| `pressed` | `boolean` | `false` | 눌림 상태 (회색 오버레이) |
| `disabled` | `boolean` | `false` | 비활성화 상태 |
| `indices` | `number[]` | - | 검색어 하이라이트 문자 인덱스 배열 |
| `thumbnail` | `string` | - | 썸네일 이미지 URL (67×48px, 아이콘 대신 표시) |
| `tooltip` | `string` | - | 툴팁 텍스트 |

#### Events

| 이벤트 | 파라미터 | 설명 |
|--------|----------|------|
| `click` | `event: MouseEvent` | 아이템 클릭 시 발생 |

#### 사용 예시

```vue
<SubNavItem
  v-for="item in dashboardItems"
  :key="item.key"
  :icon="item.icon"
  :name="item.displayName"
  :selected="item.selected"
  @click="navigateTo(item.key)"
/>
```

### SubHeader

패널 내부의 섹션 구분 헤더입니다.

#### Props

| 속성 | 타입 | 기본값 | 설명 |
|------|------|--------|------|
| `title` | `string` | - | 섹션 타이틀 |

#### 사용 예시

```vue
<SubHeader title="최근 대시보드" />
<SubNavItem v-for="item in recentItems" ... />
```

## 기본 사용법

```vue
<script setup lang="ts">
import { ref } from 'vue';
import {
  NavigationBar,
  NavHeader,
  SubNavItem,
  type MenuItem
} from '@jennifersoft/apm-components';
import { ICON_TYPE } from '@jennifersoft/vue-components-v2';

const selectedPanel = ref<string | null>(null);

const headMenuItems = ref<MenuItem[]>([
  {
    key: 'dashboard',
    icon: ICON_TYPE.dashboard,
    displayName: '대시보드',
    type: 'panel'
  },
  {
    key: 'analysis',
    icon: ICON_TYPE.analysis,
    displayName: '분석',
    type: 'panel'
  }
]);

const tailMenuItems = ref<MenuItem[]>([
  {
    key: 'settings',
    icon: ICON_TYPE.settings,
    displayName: '설정',
    type: 'panel'
  },
  {
    key: 'user',
    icon: ICON_TYPE.userStroke,
    displayName: '사용자',
    type: 'panel'
  }
]);

const closePanel = () => {
  selectedPanel.value = null;
};
</script>

<template #panel-analysis>
      <NavHeader title="분석" closeable @close="closePanel" />
      <div class="panel-content">
        <p>분석 콘텐츠</p>
      </div>
    </template>

<template #panel-settings>
      <NavHeader title="설정" closeable @close="closePanel" />
      <div class="panel-content">
        <p>설정 콘텐츠</p>
      </div>
    </template>

<template #panel-user>
      <NavHeader title="사용자" closeable @close="closePanel" />
      <div class="panel-content">
        <p>사용자 정보</p>
      </div>
    </template>
  </NavigationBar>
</template>
```

## 인터랙티브 데모

const selectedPanel = ref(null);

const headMenuItems = ref([
  {
    key: 'dashboard',
    icon: ICON_TYPE.dashboard,
    displayName: '대시보드',
    type: 'panel',
  },
  {
    key: 'analysis',
    icon: ICON_TYPE.analysis,
    displayName: '분석',
    type: 'panel',
  },
  {
    key: 'monitoring',
    icon: ICON_TYPE.monitor,
    displayName: '모니터링',
    type: 'panel',
    badge: 3,
  },
]);

const tailMenuItems = ref([
  {
    key: 'notification',
    icon: ICON_TYPE.bell2,
    displayName: '알림',
    type: 'panel',
    badge: 5,
  },
  {
    key: 'settings',
    icon: ICON_TYPE.settings,
    displayName: '설정',
    type: 'panel',
  },
  {
    key: 'user',
    icon: ICON_TYPE.userStroke,
    displayName: '사용자',
    type: 'panel',
  },
]);

const dashboardItems = ref([
  {
    key: '/dashboard/system',
    icon: ICON_TYPE.dashboard,
    displayName: '시스템 관리자',
  },
  {
    key: '/dashboard/topology',
    icon: ICON_TYPE.topology,
    displayName: '토폴로지',
  },
]);

const analysisItems = ref([
  {
    key: '/analysis/xview',
    icon: ICON_TYPE.xview,
    displayName: 'X-View',
  },
  {
    key: '/analysis/service',
    icon: ICON_TYPE.service,
    displayName: '애플리케이션 현황',
  },
]);

const monitoringItems = ref([
  {
    key: '/monitoring/realtime',
    icon: ICON_TYPE.monitor,
    displayName: '실시간 모니터링',
  },
  {
    key: '/monitoring/memory',
    icon: ICON_TYPE.storage,
    displayName: '메모리',
  },
]);

const notificationItems = ref([
  {
    key: '/notification/alerts',
    icon: ICON_TYPE.alert,
    displayName: '알림 목록',
  },
  {
    key: '/notification/rules',
    icon: ICON_TYPE.eventAlert,
    displayName: '알림 규칙',
  },
]);

const settingsItems = ref([
  {
    key: '/settings/users',
    icon: ICON_TYPE.user,
    displayName: '사용자 관리',
  },
  {
    key: '/settings/notification',
    icon: ICON_TYPE.bell,
    displayName: '알림 설정',
  },
]);

const userItems = ref([
  {
    key: '/user/profile',
    icon: ICON_TYPE.userStroke,
    displayName: '프로필',
  },
  {
    key: '/user/logout',
    icon: ICON_TYPE.logout,
    displayName: '로그아웃',
  },
]);

const closePanel = () => {
  selectedPanel.value = null;
};
</script>

<div class="demo-content">
    <div class="demo-info">
      <h2>NavigationBar 데모</h2>
      <p>좌측 메뉴를 클릭하여 패널을 열고 닫아보세요.</p>
    </div>
  </div>

<div class="state-info">
    <p><strong>선택된 패널:</strong> {{ selectedPanel || '없음' }}</p>
  </div>
</div>

.demo-container :deep(.navigation-bar) {
  position: absolute;
  height: 768px;
}

.demo-container :deep(.navigation-panel) {
  position: absolute;
}

.panel-content {
  padding: 0.5rem;
}

.demo-content {
  flex: 1;
  margin-left: 72px;
  padding: 2rem;
  overflow-y: auto;
}

.demo-info {
  max-width: 600px;

h2 {
    margin: 0 0 1rem;
    font-size: 24px;
    font-weight: 700;
    color: #333;
  }

p {
    margin-bottom: 1rem;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
  }
}

.state-info {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 1rem;
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;

p {
    margin: 0;
    font-size: 14px;
    color: #666;

strong {
      font-weight: 600;
      color: #333;
    }
  }
}
</style>
</ClientOnly>

## 주요 기능 상세

### 메뉴 타입 동작

MenuItem의 `type` 속성으로 메뉴 클릭 시 동작을 제어합니다.

- **`type: 'panel'`**: 메뉴 클릭 시 연결된 패널이 열리거나 닫힙니다
- **`type: 'event'`**: 패널을 열지 않고 `menu-click` 이벤트만 발생시킵니다

```vue
<script setup>
const menuItems = ref([
  {
    key: 'dashboard',
    type: 'panel',  // 패널 토글
    // ... 기타 속성
  },
  {
    key: 'external-link',
    type: 'event',  // 이벤트만 발생
    // ... 기타 속성
  }
]);

const handleMenuClick = (item) => {
  if (item.type === 'event') {
    // 외부 링크 이동, 다운로드 등의 액션 수행
    window.open('https://example.com', '_blank');
  }
};
</script>

<template>
  <NavigationBar
    :head-menu-items="menuItems"
    @menu-click="handleMenuClick"
  />
</template>
```

### 스크롤 위치 유지

NavigationBar는 패널별 스크롤 위치를 자동으로 저장하고 복원합니다.

**동작 방식:**
- 각 패널의 스크롤 위치가 Map에 저장됩니다
- 다른 패널로 전환 시 현재 스크롤 위치가 저장됩니다
- 이전에 열었던 패널로 돌아가면 스크롤 위치가 복원됩니다
- 성능을 위해 throttle(200ms) 적용된 스크롤 핸들러 사용
- 일반 패널과 커스텀 패널의 스크롤 위치가 독립적으로 관리됩니다

```vue

<NavigationBar>
  <template #panel-dashboard>
    <NavHeader title="대시보드" />
    <div class="panel-content">
      
      
      
    </div>
  </template>
</NavigationBar>
```

### 패널 너비 설정

`panelWidth` prop은 **일반 패널과 커스텀 패널 모두**에 적용됩니다.

```vue
<script setup>
const panelWidth = ref(256);  // 기본값

// 필요에 따라 동적으로 변경 가능
const expandPanel = () => {
  panelWidth.value = 400;
};
</script>

<template>
  <NavigationBar :panel-width="panelWidth" />
</template>
```

**참고:** 각 패널마다 다른 너비가 필요한 경우, CSS로 개별 패널 콘텐츠의 너비를 조정하세요.

### 커스텀 패널 동작

커스텀 패널은 일반 패널과 독립적으로 작동하는 특수 패널입니다.

**특징:**
- `enableCustomPanel` prop으로 표시/숨김 제어
- 메뉴 선택과 무관하게 독립적으로 표시 가능
- 일반 패널이 열리면 자동으로 닫힙니다
- 외부 클릭 시 자동으로 닫힙니다
- 별도의 스크롤 위치 저장

```vue
<script setup>
const showCustomPanel = ref(false);

const openHelp = () => {
  showCustomPanel.value = true;
};

const closeCustomPanel = () => {
  showCustomPanel.value = false;
};
</script>

<button @click="openHelp">도움말 보기</button>
</template>
```

### Z-Index 레이어 구조

NavigationBar와 패널들의 z-index 구조를 이해하면 레이아웃 문제를 방지할 수 있습니다.

```
Navigation Bar: z-index 20 (최상단)
├─ General Panel: z-index 10 (중간)
└─ Custom Panel: z-index 9 (하단)
```

**주의사항:**
- 일반 패널이 열린 상태에서 커스텀 패널을 열면, 일반 패널이 위에 표시됩니다
- 다른 UI 요소와 z-index 충돌을 피하려면 이 구조를 고려하세요
- Teleport를 사용하므로 부모 컨테이너의 z-index는 영향을 주지 않습니다

## 고급 사용법

### 1. 배지 표시

알림 개수 등을 배지로 표시할 수 있습니다.

```vue
<script setup>
const menuItems = ref([
  {
    key: 'notification',
    icon: ICON_TYPE.bell2,
    displayName: '알림',
    badge: 3,  // 숫자 배지
    type: 'panel'
  },
  {
    key: 'messages',
    icon: ICON_TYPE.message,
    displayName: '메시지',
    badge: 'NEW',  // 텍스트 배지
    type: 'panel'
  }
]);
</script>
```

### 2. 이벤트 타입 메뉴

패널을 열지 않고 이벤트만 발생시키는 메뉴입니다.

```vue
<script setup>
const menuItems = ref([
  {
    key: 'report',
    icon: ICON_TYPE.report2,
    displayName: '리포트',
    type: 'event'  // 패널을 열지 않음
  }
]);

const handleMenuClick = (item) => {
  if (item.type === 'event') {
    // 페이지 이동 또는 다른 액션 수행
    router.push(`/${item.key}`);
  }
};
</script>

<template>
  <NavigationBar
    :head-menu-items="menuItems"
    @menu-click="handleMenuClick"
  />
</template>
```

### 3. 서브메뉴 with 썸네일

서브메뉴 아이템에 썸네일 이미지를 표시할 수 있습니다.

```vue
<template>
  <NavigationBar>
    <template #panel-dashboard>
      <NavHeader title="대시보드" closeable @close="closePanel" />
      <div class="panel-content">
        <SubNavItem
          v-for="item in dashboardItems"
          :key="item.key"
          :icon="item.icon"
          :name="item.displayName"
          :thumbnail="item.thumbnail"
          @click="navigateTo(item.key)"
        />
      </div>
    </template>
  </NavigationBar>
</template>
```

### 4. 커스텀 패널

일반 패널과 독립적으로 작동하는 커스텀 패널을 사용할 수 있습니다.

```vue
<script setup>
const showCustomPanel = ref(false);

const openCustomPanel = () => {
  showCustomPanel.value = true;
};

const closeCustomPanel = () => {
  showCustomPanel.value = false;
};
</script>

<button @click="openCustomPanel">도움말 열기</button>
</template>
```

### 5. 동적 패널 너비

패널 너비를 동적으로 조정할 수 있습니다.

```vue
<script setup>
const panelWidth = ref(256);

const togglePanelWidth = () => {
  panelWidth.value = panelWidth.value === 256 ? 400 : 256;
};
</script>

<template>
  <NavigationBar :panel-width="panelWidth" />
</template>
```

## 의존성

### 내부 컴포넌트

- **NavHeader**: 패널 헤더 컴포넌트
- **SubNavItem**: 서브메뉴 아이템 컴포넌트
- **SubHeader**: 서브메뉴 섹션 헤더
- **Divider**: 구분선 컴포넌트
- **WrappedNavItem**: 메뉴 아이템 래퍼

### 외부 의존성

- `@vueuse/components`: vOnClickOutside 디렉티브
- `@jennifersoft/vue-components-v2`: ICON_TYPE

## 스타일링

### 기본 구조

- **네비게이션 바**: 72px 고정 너비, 좌측 고정
- **패널**: 기본 256px 너비, 슬라이드 애니메이션
- **z-index**: 네비게이션 바(20), 일반 패널(10), 커스텀 패널(9)

### CSS 클래스

```scss
.navigation-bar {
  width: 72px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}

.navigation-panel {
  position: fixed;
  left: 72px;
  top: 0;
  height: 100vh;
  background: white;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}
```

## 주의사항

1. **Teleport 사용**: 기본적으로 `body`에 Teleport되므로 전역 스타일 충돌에 주의하세요.

2. **패널 외부 클릭**: 패널은 외부 클릭 시 자동으로 닫힙니다.

3. **z-index 관리**: 커스텀 패널과 일반 패널은 별도의 z-index를 가집니다.

4. **v-model 사용**: `selectedPanel`은 v-model로 양방향 바인딩됩니다.

5. **슬롯 네이밍**: 패널 슬롯은 `#panel-{key}` 형식으로 명명해야 합니다.

## 브라우저 지원

- Chrome (최신 2개 버전)
- Firefox (최신 2개 버전)
- Safari (최신 2개 버전)
- Edge (최신 2개 버전)

### File: j5-components/topology-chart.md

# TopologyChart

MSA (Microservices Architecture) 분석을 위한 Force 기반 노드-링크 다이어그램 컴포넌트입니다.

## 개요

TopologyChart는 마이크로서비스 간의 관계와 호출 패턴을 자유로운 형태의 네트워크 그래프로 시각화합니다. Force 시뮬레이션을 통해 자연스러운 노드 배치가 가능하며, 사용자가 직접 노드를 드래그하여 레이아웃을 조정할 수 있습니다.

## 주요 특징

-   **인터랙티브**: 노드 드래그, 확대/축소, 팬 기능 지원
-   **Force 시뮬레이션**: 물리 기반 시뮬레이션으로 자연스러운 노드 배치
-   **자동 스케일**: 데이터에 맞는 자동 스케일 조정
-   **노드 필터링**: 고립된 노드 숨기기 기능
-   **시각적 피드백**: 호버/클릭 시 연결된 노드/엣지 하이라이팅
-   **실시간 편집**: 드래그로 노드 위치 조정 가능

## Props Interface

```typescript
interface TopologyChartProps {
    /** 토폴로지 데이터 */
    data?: TopologyData;
    /** 차트 너비 */
    width?: number;
    /** 차트 높이 */
    height?: number;
    /** Force 시뮬레이션 사용 여부 */
    enableForceSimulation?: boolean;
    /** 웹 워커 객체 (undefined: 자동생성, Worker: 직접제공) */
    worker?: Worker;
    /** 노드 스케일 컨트롤 표시 여부 */
    showScaleControls?: boolean;
    /** 자동 스케일 조정 활성화 여부 */
    enableAutoScale?: boolean;
    /** 노드 라벨 숨김 여부 */
    hideNodeLabels?: boolean;
    /** 실시간 모드 활성화 여부 */
    realtimeMode?: boolean;
    /** 현재 선택된 엣지 - 상세 정보 표시용 */
    selectedEdge?: TopologyEdge;
    /** 엣지 상세 데이터 - API 호출 후 가져온 데이터 */
    edgeDetailData?: EdgeDetailData;
    /** 현재 선택된 노드 - 상세 정보 표시용 */
    selectedNode?: TopologyNode;
    /** 노드 상세 데이터 - API 호출 후 가져온 데이터 */
    nodeDetailData?: NodeDetailData;
    /** 활성화할 클러스터 ID 배열 */
    activeClusterIds?: string[];
    /** 애니메이션 효과를 적용할 클러스터 ID */
    animatedClusterId?: string;
    /** 노드 툴팁 버튼 표시 여부 */
    showNodeTooltipButton?: boolean;
    /** 엣지 툴팁 버튼 표시 여부 */
    showEdgeTooltipButton?: boolean;
    /** 툴팁 오프셋 */
    tooltipOffset?: number;
    /**
     * localStorage 저장 키 - autoSave와 함께 사용시 globalScale, viewport, nodePositions를 localStorage에 저장
     * 조건: storageKey && autoSave가 모두 true일 때만 활성화
     * 활성화 시 enableForceSimulation과 enableAutoScale은 자동으로 무시됨
     */
    storageKey?: string;
    /** 자동 저장 활성화 여부 - storageKey와 함께 사용시 localStorage에 상태 자동 저장 */
    autoSave?: boolean;
}
```

## Events

```typescript
interface TopologyChartEmits {
    /** 노드 호버 시 발생 */
    'node-hover': [node: TopologyNode];
    /** 노드 클릭 시 발생 */
    'node-click': [node: TopologyNode];
    /** 노드 선택 시 발생 (상세 데이터 로딩 포함) */
    'node-select': [node: TopologyNode];
    /** 노드 선택 해제 시 발생 */
    'node-unselect': [];
    /** 노드 분석 요청 시 발생 */
    'node-analysis': [node: TopologyNode];
    /** 엣지 호버 시 발생 */
    'edge-hover': [edge: TopologyEdge];
    /** 엣지 클릭 시 발생 */
    'edge-click': [edge: TopologyEdge];
    /** 엣지 선택 시 발생 (상세 데이터 로딩 포함) */
    'edge-select': [edge: TopologyEdge];
    /** 엣지 선택 해제 시 발생 */
    'edge-unselect': [];
    /** 엣지 분석 요청 시 발생 */
    'edge-analysis': [edge: TopologyEdge];
    /** 호버 해제 시 발생 */
    'hover-out': [];
    /** 차트 렌더링 완료 시 발생 */
    'chart-ready': [];
    /** 레이아웃 오류 발생 시 발생 */
    'layout-error': [error: Error];
    /** 클러스터 감지 완료 이벤트 */
    'clusters-detected': [clusters: TopologyCluster[]];
    /** 개별 클러스터 렌더링 완료 이벤트 */
    'cluster-rendered': [clusterId: string, renderInfo: ClusterRenderInfo];
    /** 전체 클러스터 렌더링 완료 이벤트 */
    'all-clusters-rendered': [renderInfo: ClusterRenderInfo[]];
    /** 포스 시뮬레이션 상태 변경 이벤트 (true: 완료, false: 시작) */
    'simulation-state': [isComplete: boolean];
    /** 포스 시뮬레이션 종료 이벤트 (더 이상 사용되지 않음, simulation-state 사용 권장) */
    'force-simulation-end': [tickCount: number, finalAlpha: number];
    /** 자동 저장 상태 변경 이벤트 */
    'auto-save': [saved: boolean];
    /** 노드 위치 상태 변경 이벤트 */
    'node-positions-state': [hasPositions: boolean];
}
```

## 기본 사용법

```vue
<template>
    <TopologyChart
        :data="topologyData"
        :width="800"
        :height="600"
        :enable-force-simulation="false"
        :enable-auto-scale="true"
        :active-cluster-ids="activeClusterIds"
        :selected-edge="selectedEdge"
        :edge-detail-data="edgeDetailData"
        :selected-node="selectedNode"
        :node-detail-data="nodeDetailData"
        @node-select="handleNodeSelect"
        @edge-select="handleEdgeSelect"
        @clusters-detected="handleClustersDetected"
    />
</template>

const topologyData = ref<TopologyData>(sampleTopologyData);
const activeClusterIds = ref<string[]>([]);
const selectedEdge = ref<TopologyEdge | null>(null);
const edgeDetailData = ref<EdgeDetailData | null>(null);
const selectedNode = ref<TopologyNode | null>(null);
const nodeDetailData = ref<NodeDetailData | null>(null);

const handleNodeSelect = async (node: TopologyNode) => {
    selectedNode.value = node;
    // API를 통해 노드 상세 데이터 로딩
    nodeDetailData.value = await fetchNodeDetailData(node);
};

const handleEdgeSelect = async (edge: TopologyEdge) => {
    selectedEdge.value = edge;
    // API를 통해 엣지 상세 데이터 로딩
    edgeDetailData.value = await fetchEdgeDetailData(edge);
};

const handleClustersDetected = (clusters: TopologyCluster[]) => {
    // 기본적으로 일반 클러스터만 활성화
    const normalClusters = clusters.filter((c) => c.type !== 'isolated');
    activeClusterIds.value = normalClusters.map((c) => c.id);
};
</script>
```

## 인터랙티브 데모

// i18n 메시지 제공
provide('i18n', {
  // 공통
  tps: 'TPS',
  failureCount: '실패건수',

// INSTANCE 노드 툴팁
  activeServiceCount: '액티브서비스 수',
  concurrentUser: '동시 사용자수',
  gc: 'GC',
  cpuUsage: 'CPU 사용률',
  memoryUsage: '메모리 사용률',
  nodeAnalysis: '분석',

// DOMAIN 노드 툴팁
  aliveInstanceCount: '활성 인스턴스 수',

// REMOTE_CALL 노드 툴팁
  ip: 'IP',
  port: 'Port',

// 엣지 툴팁
  callCount: '호출건수',
  elapsedTimeAvg: '평균 응답시간',
  edgeAnalysis: '분석'
});

// 샘플 데이터 로드
const topologyDemoData = ref(getCompleteTopologyData());

// 디버깅: 데이터 확인
console.log('[TopologyChart Demo] 데이터 로드:', {
  nodes: topologyDemoData.value.nodes.length,
  edges: topologyDemoData.value.edges.length,
  data: topologyDemoData.value
});

// 웹 워커 생성
const forceWorker = ref(null);

onMounted(() => {
  try {
    // VitePress 환경에서 워커 생성
    forceWorker.value = new Worker(
      new URL('@jennifersoft/apm-components/dist/workers/force-simulation.js', import.meta.url),
      { type: 'module' }
    );
    console.log('[TopologyChart Demo] Worker 생성 완료:', forceWorker.value);
  } catch (error) {
    console.error('[TopologyChart Demo] Worker 생성 실패:', error);
    forceWorker.value = null;
  }
});

onUnmounted(() => {
  if (forceWorker.value) {
    forceWorker.value.terminate();
    console.log('[TopologyChart Demo] Worker 종료');
  }
});

// 컨트롤 상태
const demoControls = ref({
  enableForceSimulation: false,
  enableAutoScale: true,
  hideNodeLabels: false,
  showScaleControls: true,
  selectedSize: 'medium'
});

// 동적 크기 계산
const demoChartWidth = computed(() => {
  switch (demoControls.value.selectedSize) {
    case 'small': return 600;
    case 'large': return 900;
    default: return 654 - 32; // medium
  }
});

const demoChartHeight = computed(() => {
  switch (demoControls.value.selectedSize) {
    case 'small': return 300;
    case 'large': return 500;
    default: return 400; // medium
  }
});

// 이벤트 로깅
const demoEvents = ref([]);
let demoEventIdCounter = 0;

const addDemoEvent = (type, detail) => {
  demoEvents.value.push({
    id: ++demoEventIdCounter,
    time: new Date().toLocaleTimeString(),
    type,
    detail
  });

// 최대 20개 이벤트만 유지
  if (demoEvents.value.length > 20) {
    demoEvents.value = demoEvents.value.slice(-20);
  }
};

const handleDemoNodeClick = (node) => {
  const nodeName = node.props.shortName || node.props.longName || 'Unknown';
  addDemoEvent('node-click', `${nodeName} 클릭`);
  console.log('Demo - Node clicked:', node);
};

const handleDemoNodeHover = (node) => {
  const nodeName = node.props.shortName || node.props.longName || 'Unknown';
  addDemoEvent('node-hover', `${nodeName} 호버`);
};

const handleDemoChartReady = () => {
  addDemoEvent('chart-ready', '차트 렌더링 완료');
  console.log('[TopologyChart Demo] 차트 렌더링 완료');
};

const handleDemoForceSimulationEnd = (tickCount, finalAlpha) => {
  addDemoEvent('force-simulation-end', `시뮬레이션 종료 (${tickCount}틱, α=${finalAlpha.toFixed(4)})`);
};

const clearDemoEvents = () => {
  demoEvents.value = [];
};

// 통계 계산
const nodeStats = computed(() => {
  const total = topologyDemoData.value.nodes.length;
  const connectedNodeIds = new Set();

topologyDemoData.value.edges.forEach((edge) => {
    connectedNodeIds.add(edge.relation.source.props.shortName);
    connectedNodeIds.add(edge.relation.target.props.shortName);
  });

const connected = connectedNodeIds.size;
  const isolated = total - connected;

return { total, connected, isolated };
});

const edgeStats = computed(() => {
  const total = topologyDemoData.value.edges.length;
  const failed = topologyDemoData.value.edges.filter(
    (edge) => (edge.statistic.failureCount || 0) > 0
  ).length;
  const normal = total - failed;

const totalFailures = topologyDemoData.value.edges.reduce(
    (sum, edge) => sum + (edge.statistic.failureCount || 0),
    0
  );

return { total, normal, failed, totalFailures };
});
</script>

<div class="demo-container">
  <div class="demo-controls">
    <div class="control-group">
      <label>차트 크기:</label>
      <select v-model="demoControls.selectedSize">
        <option value="small">Small (600×300)</option>
        <option value="medium">Medium (654×400)</option>
        <option value="large">Large (900×500)</option>
      </select>
    </div>
    <div class="control-group">
      <label>
        <input type="checkbox" v-model="demoControls.enableForceSimulation" />
        Force 시뮬레이션
      </label>
      <label>
        <input type="checkbox" v-model="demoControls.enableAutoScale" />
        자동 스케일
      </label>
      <label>
        <input type="checkbox" v-model="demoControls.hideNodeLabels" />
        노드 라벨 숨기기
      </label>
    </div>
  </div>

<div class="demo-stats">
    <h4>토폴로지 통계</h4>
    <div class="stats-grid">
      <div class="stat-item">
        <span class="stat-label">총 노드:</span>
        <span class="stat-value">{{ nodeStats.total }}개</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">연결된 노드:</span>
        <span class="stat-value">{{ nodeStats.connected }}개</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">고립된 노드:</span>
        <span class="stat-value">{{ nodeStats.isolated }}개</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">총 엣지:</span>
        <span class="stat-value">{{ edgeStats.total }}개</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">정상 엣지:</span>
        <span class="stat-value">{{ edgeStats.normal }}개</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">실패 엣지:</span>
        <span class="stat-value error">{{ edgeStats.failed }}개</span>
      </div>
    </div>
  </div>

<ClientOnly>
    <div class="demo-chart">
      <div style="width: 100%; height: 100%; position: relative;">
        <TopologyChart
          v-if="forceWorker !== null"
          :data="topologyDemoData"
          :width="demoChartWidth"
          :height="demoChartHeight"
          :worker="forceWorker"
          :enable-force-simulation="demoControls.enableForceSimulation"
          :enable-auto-scale="demoControls.enableAutoScale"
          :hide-node-labels="demoControls.hideNodeLabels"
          :show-scale-controls="demoControls.showScaleControls"
          @node-click="handleDemoNodeClick"
          @edge-click="handleDemoEdgeClick"
          @node-hover="handleDemoNodeHover"
          @edge-hover="handleDemoEdgeHover"
          @chart-ready="handleDemoChartReady"
          @force-simulation-end="handleDemoForceSimulationEnd"
        />
        <div v-else style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--vp-c-text-2);">
          워커 초기화 중...
        </div>
      </div>
    </div>
  </ClientOnly>

<div v-if="demoEvents.length > 0" class="demo-events">
    <div class="events-header">
      <h4>이벤트 로그</h4>
      <button @click="clearDemoEvents" class="clear-btn">지우기</button>
    </div>
    <div class="events-list">
      <div v-for="event in demoEvents.slice(-10).reverse()" :key="event.id" class="event-item">
        <span class="event-time">{{ event.time }}</span>
        <span class="event-type">{{ event.type }}</span>
        <span class="event-message">{{ event.detail }}</span>
      </div>
    </div>
  </div>

<div class="demo-info">
    💡 <strong>사용법:</strong> 노드 드래그/클릭, 마우스 휠 확대/축소, 배경 드래그 이동, Force 시뮬레이션을 통한 물리 기반 자동 배치 등의 기능을 사용할 수 있습니다.
  </div>
</div>

.demo-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px;
  background: var(--vp-c-bg-soft);
  border-radius: 6px;
}

.control-group {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.control-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.control-group select {
  padding: 4px 8px;
  border: 1px solid var(--vp-c-border);
  border-radius: 4px;
  background: var(--vp-c-bg);
  color: var(--vp-c-text-1);
}

.demo-stats {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--vp-c-bg-alt);
  border-radius: 6px;
}

.demo-stats h4 {
  margin: 0 0 12px 0;
  color: var(--vp-c-text-1);
  font-size: 16px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.stat-label {
  color: var(--vp-c-text-2);
  font-size: 14px;
}

.stat-value {
  color: var(--vp-c-text-1);
  font-size: 14px;
  font-weight: 500;
}

.stat-value.error {
  color: var(--vp-c-danger-1);
}

.demo-chart {
  display: flex;
  justify-content: center;
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
  min-height: 320px;
  align-items: center;
}

.demo-events {
  background: var(--vp-c-bg-alt);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
}

.events-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.events-header h4 {
  margin: 0;
  color: var(--vp-c-text-1);
  font-size: 14px;
}

.clear-btn {
  padding: 4px 8px;
  background: var(--vp-c-brand);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.clear-btn:hover {
  background: var(--vp-c-brand-darker);
}

.events-list {
  max-height: 200px;
  overflow-y: auto;
}

.event-item {
  display: grid;
  grid-template-columns: 80px 120px 1fr;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--vp-c-divider);
  font-size: 12px;
}

.event-item:last-child {
  border-bottom: none;
}

.event-time {
  color: var(--vp-c-text-3);
}

.event-type {
  color: var(--vp-c-brand);
  font-weight: 500;
}

.event-message {
  color: var(--vp-c-text-2);
}

.demo-info {
  padding: 12px;
  background: var(--vp-c-bg-soft);
  border-radius: 6px;
  border-left: 4px solid var(--vp-c-brand);
  color: var(--vp-c-text-2);
  font-size: 14px;
}
</style>

## 동적 크기 조절

```vue
<template>
    <div class="chart-container">
        
        <div class="size-controls">
            <label>차트 크기:</label>
            <select v-model="selectedSize" @change="updateChartSize">
                <option value="small">Small (600×400)</option>
                <option value="medium">Medium (800×600)</option>
                <option value="large">Large (1200×800)</option>
                <option value="custom">Custom</option>
            </select>

const selectedSize = ref('medium');
const customWidth = ref(800);
const customHeight = ref(600);

const chartWidth = computed(() => {
    switch (selectedSize.value) {
        case 'small':
            return 600;
        case 'large':
            return 1200;
        case 'custom':
            return customWidth.value;
        default:
            return 800; // medium
    }
});

const chartHeight = computed(() => {
    switch (selectedSize.value) {
        case 'small':
            return 400;
        case 'large':
            return 800;
        case 'custom':
            return customHeight.value;
        default:
            return 600; // medium
    }
});
</script>
```

## 이벤트 로깅 시스템

사용자 인터랙션을 추적하고 디버깅에 활용할 수 있는 이벤트 로깅 시스템:

```vue
<template>
    <div class="topology-with-logs">
        <TopologyChart
            :data="topologyData"
            @node-click="logNodeClick"
            @edge-click="logEdgeClick"
            @node-hover="logNodeHover"
            @edge-hover="logEdgeHover"
            @chart-ready="logChartReady"
        />

<div v-if="events.length > 0" class="event-logs">
            <h4>이벤트 로그</h4>
            <div class="event-list">
                <div
                    v-for="event in recentEvents"
                    :key="event.id"
                    class="event-item"
                >
                    <span class="event-time">{{ event.time }}</span>
                    <span class="event-type" :class="event.type">{{
                        event.type
                    }}</span>
                    <span class="event-detail">{{ event.detail }}</span>
                </div>
            </div>
            <button @click="clearEvents" class="clear-button">
                로그 지우기
            </button>
        </div>
    </div>
</template>

interface EventLog {
    id: number;
    time: string;
    type: string;
    detail: string;
}

const events = ref<EventLog[]>([]);
let eventIdCounter = 0;

const recentEvents = computed(() => events.value.slice(-10).reverse());

const addEvent = (type: string, detail: string) => {
    events.value.push({
        id: ++eventIdCounter,
        time: new Date().toLocaleTimeString(),
        type,
        detail,
    });
};

const logNodeClick = (node: TopologyNode) => {
    addEvent('node-click', `${getNodeDisplayName(node)} 클릭`);
};

const logNodeHover = (node: TopologyNode) => {
    addEvent('node-hover', `${getNodeDisplayName(node)} 호버`);
};

const logChartReady = () => {
    addEvent('chart-ready', '차트 렌더링 완료');
};

const clearEvents = () => {
    events.value = [];
};

const getNodeDisplayName = (node: TopologyNode): string => {
    return node.props.shortName || node.props.longName || 'Unknown';
};
</script>
```

## 통계 정보 표시

토폴로지 데이터의 통계 정보를 실시간으로 계산하고 표시:

````vue
<template>
    <div class="topology-with-stats">
        <TopologyChart :data="topologyData" />

<div class="stats-panel">
            <h4>토폴로지 통계</h4>
            <div class="stats-grid">
                <div class="stat-item">
                    <span class="stat-label">총 노드 수:</span>
                    <span class="stat-value">{{ nodeStats.total }}개</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">연결된 노드:</span>
                    <span class="stat-value">{{ nodeStats.connected }}개</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">고립된 노드:</span>
                    <span class="stat-value">{{ nodeStats.isolated }}개</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">총 엣지 수:</span>
                    <span class="stat-value">{{ edgeStats.total }}개</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">정상 엣지:</span>
                    <span class="stat-value">{{ edgeStats.normal }}개</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">실패 엣지:</span>
                    <span class="stat-value error"
                        >{{ edgeStats.failed }}개</span
                    >
                </div>
                <div class="stat-item">
                    <span class="stat-label">총 실패 건수:</span>
                    <span class="stat-value error"
                        >{{ edgeStats.totalFailures }}건</span
                    >
                </div>
                <div class="stat-item">
                    <span class="stat-label">최고 실패 엣지:</span>
                    <span class="stat-value">{{
                        edgeStats.topFailureEdge
                    }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

const nodeStats = computed(() => {
    const total = topologyData.value.nodes.length;
    const connectedNodeIds = new Set<string>();

topologyData.value.edges.forEach((edge) => {
        connectedNodeIds.add(getNodeId(edge.relation.source));
        connectedNodeIds.add(getNodeId(edge.relation.target));
    });

const connected = connectedNodeIds.size;
    const isolated = total - connected;

return { total, connected, isolated };
});

const edgeStats = computed(() => {
    const total = topologyData.value.edges.length;
    const failed = topologyData.value.edges.filter(
        (edge) => (edge.statistic.failureCount || 0) > 0
    ).length;
    const normal = total - failed;

const totalFailures = topologyData.value.edges.reduce(
        (sum, edge) => sum + (edge.statistic.failureCount || 0),
        0
    );

// 최고 실패 엣지 찾기
    const topFailureEdge = topologyData.value.edges
        .filter((edge) => (edge.statistic.failureCount || 0) > 0)
        .sort(
            (a, b) =>
                (b.statistic.failureCount || 0) -
                (a.statistic.failureCount || 0)
        )[0];

const topFailureEdgeName = topFailureEdge
        ? `${getNodeDisplayName(
              topFailureEdge.relation.source
          )} → ${getNodeDisplayName(topFailureEdge.relation.target)} (${
              topFailureEdge.statistic.failureCount
          }건)`
        : '없음';

return {
        total,
        normal,
        failed,
        totalFailures,
        topFailureEdge: topFailureEdgeName,
    };
});
</script>

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: white;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
}

.stat-label {
    font-size: 14px;
    color: #6b7280;
}

.stat-value {
    font-weight: 600;
    color: #1f2937;
}

.stat-value.error {
    color: #dc2626;
}
</style>

## 데이터 구조 ### TopologyData ```typescript interface TopologyData { nodes:
TopologyNode[]; edges: TopologyEdge[]; }
````

### TopologyNode

노드는 세 가지 타입으로 구분됩니다:

```typescript
// 인스턴스 노드
interface TopologyInstanceNode {
    type: 'INSTANCE';
    props: {
        domainId: number;
        instId: number;
        oid: number;
        shortName: string;
        longName: string;
    };
}

// 도메인 노드
interface TopologyDomainNode {
    type: 'DOMAIN';
    props: {
        domainId: number;
        shortName: string;
        longName: string;
    };
}

// 원격 호출 노드
interface TopologyRemoteCallNode {
    type: 'REMOTE_CALL';
    props: {
        remoteCallType: RemoteCallTypeDef;
        languageTypeOrZero: number;
        customMethodDescHashOrZero: number;
        customMethodDescOrEmpty: string;
        ipAddressOrEmpty: string;
        portOrZero: number;
    };
}

type TopologyNode =
    | TopologyInstanceNode
    | TopologyDomainNode
    | TopologyRemoteCallNode;
```

### TopologyEdge

```typescript
interface TopologyEdge {
    relation: {
        source: TopologyNode;
        target: TopologyNode;
    };
    statistic: {
        count: number; // 호출 횟수
        timeSum: number; // 총 응답 시간 (ms)
        failureCount: number; // 실패 횟수
    };
}
```

## 샘플 데이터

자세한 샘플 데이터는 별도 파일에서 관리됩니다:

```typescript
// j5-components/data/sample-topology-data.ts 에서 import
import {
    getCompleteTopologyData,
    sampleTopologyData,
} from './data/sample-topology-data';

// 완전한 샘플 데이터 사용
const topologyData = getCompleteTopologyData();

// 또는 기본 노드만 사용하고 엣지는 직접 생성
const basicData = sampleTopologyData;
```

샘플 데이터에는 다음 요소들이 포함되어 있습니다:

-   **8개 노드**: 웹서버, API게이트웨이, 마이크로서비스들, 데이터베이스, 캐시, 고립된 서비스
-   **8개 엣지**: 다양한 호출량과 에러 발생 시나리오
-   **실제적인 메트릭**: count, timeSum, failureCount 값들
-   **Force 시뮬레이션 테스트**: 고립된 노드를 포함한 다양한 네트워크 구조

## 클러스터 기능

### 클러스터 자동 감지

TopologyChart는 노드 간의 연결 관계를 분석하여 자동으로 클러스터를 감지합니다:

```vue
<template>
    <TopologyChart
        :data="topologyData"
        :active-cluster-ids="activeClusterIds"
        @clusters-detected="handleClustersDetected"
        @cluster-rendered="handleClusterRendered"
        @all-clusters-rendered="handleAllClustersRendered"
    />
</template>

const handleClustersDetected = (clusters) => {
    detectedClusters.value = clusters;

// 기본적으로 일반 클러스터만 활성화 (고립된 노드 제외)
    const normalClusters = clusters.filter((c) => c.type !== 'isolated');
    activeClusterIds.value = normalClusters.map((c) => c.id);
};

const handleClusterRendered = (clusterId, renderInfo) => {
    console.log(`클러스터 ${clusterId} 렌더링 완료:`, renderInfo);
};

const handleAllClustersRendered = (renderInfos) => {
    console.log('전체 클러스터 렌더링 완료:', renderInfos);
};
</script>
```

### 클러스터 유형

```typescript
interface TopologyCluster {
    id: string; // 클러스터 고유 ID
    nodeIds: string[]; // 클러스터에 포함된 노드 ID 배열
    type: 'normal' | 'isolated'; // 일반 클러스터 또는 고립된 노드
    nodeCount: number; // 클러스터 내 노드 개수
}

interface ClusterRenderInfo {
    cluster: TopologyCluster;
    isRendered: boolean;
    nodeCount: number;
}
```

### 선택적 클러스터 표시

특정 클러스터만 선택적으로 표시할 수 있습니다:

```vue
<template>
    <div>
        
        <div class="cluster-controls">
            <label v-for="cluster in detectedClusters" :key="cluster.id">
                <input
                    type="checkbox"
                    :value="cluster.id"
                    v-model="activeClusterIds"
                />
                {{
                    cluster.type === 'isolated'
                        ? '고립된 노드'
                        : `클러스터 ${cluster.id}`
                }}
                ({{ cluster.nodeCount }}개 노드)
            </label>
        </div>

// 특정 클러스터에 애니메이션 효과 적용
const highlightCluster = (clusterId) => {
    animatedClusterId.value = clusterId;
    setTimeout(() => {
        animatedClusterId.value = undefined;
    }, 2000);
};
</script>
```

## API 통합 기능

### 노드 상세 데이터 로딩

노드 선택 시 자동으로 상세 메트릭 데이터를 로딩합니다:

```vue
<template>
    <TopologyChart
        :data="topologyData"
        :selected-node="selectedNode"
        :node-detail-data="nodeDetailData"
        @node-select="handleNodeSelect"
    />
</template>

const handleNodeSelect = async (node) => {
    selectedNode.value = node;
    nodeDetailData.value = null; // 이전 데이터 초기화

try {
        let apiUrl, metrics;

if (node.type === 'DOMAIN') {
            apiUrl = `/api-v2/topology/metrics/${node.props.domainId}`;
            metrics = [
                'alive_inst_count',
                'service_rate',
                'active_service',
                'concurrent_user',
            ];
        } else if (node.type === 'INSTANCE') {
            apiUrl = `/api-v2/topology/metrics/${node.props.domainId}/${node.props.instId}`;
            metrics = [
                'service_rate',
                'service_err_count',
                'active_service',
                'proc_cpu',
                'proc_mem',
            ];
        } else {
            // REMOTE_CALL 유형은 메트릭 조회 미지원
            return;
        }

const now = Date.now();
        const response = await fetch(
            `${apiUrl}?startTime=${now - 60000}&endTime=${now}`,
            {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ metrics }),
            }
        );

nodeDetailData.value = await response.json();
    } catch (error) {
        console.error('노드 메트릭 조회 오류:', error);
    }
};
</script>
```

### 엣지 상세 데이터 로딩

엣지 선택 시 트랜잭션 상세 데이터를 로딩합니다:

```vue
<template>
    <TopologyChart
        :data="topologyData"
        :selected-edge="selectedEdge"
        :edge-detail-data="edgeDetailData"
        @edge-select="handleEdgeSelect"
    />
</template>

const handleEdgeSelect = async (edge) => {
    selectedEdge.value = edge;
    edgeDetailData.value = null;

try {
        // 1. 엣지 상세 세션 생성
        const now = Date.now();
        const sessionResponse = await fetch(
            `/api-v2/topology/edge/session?startTime=${
                now - 60000
            }&endTime=${now}`,
            {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    source: edge.relation.source,
                    target: edge.relation.target,
                }),
            }
        );

const { sessionId } = await sessionResponse.json();

// 2. 엣지 상세 데이터 조회 (진행률 확인 반복)
        let hasNext = true;
        while (hasNext) {
            const dataResponse = await fetch(
                `/api-v2/topology/edge/data/${sessionId}`
            );
            const result = await dataResponse.json();

hasNext = result.hasNext;
            if (!hasNext) {
                edgeDetailData.value = result.data;
                break;
            }

await new Promise((resolve) => setTimeout(resolve, 100));
        }
    } catch (error) {
        console.error('엣지 상세 데이터 조회 오류:', error);
    }
};
</script>
```

### 성능 테스트 시나리오

다양한 크기의 토폴로지 데이터로 성능 테스트를 수행할 수 있습니다:

```vue
<template>
    <div>
        <select v-model="performanceScenario" @change="loadTopologyData">
            <option value="small">Small Scale (8개 노드)</option>
            <option value="medium">Medium Scale (25개 노드)</option>
            <option value="large">Large Scale (50개 노드)</option>
            <option value="extreme">Extreme Scale (100개 노드)</option>
        </select>

const loadTopologyData = async () => {
    const now = Date.now();
    const sessionResponse = await fetch(
        `/api-v2/topology/statistic/session/instance?startTime=${
            now - 60000
        }&endTime=${now}&performanceScenario=${performanceScenario.value}`,
        {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                instanceOidByDomain: { 1000: [77503, 77504, 88601] },
            }),
        }
    );

const { sessionId } = await sessionResponse.json();
    const dataResponse = await fetch(
        `/api-v2/topology/statistic/instance/${sessionId}`
    );
    const { data } = await dataResponse.json();

topologyData.value = data;
};
</script>
```

## 고급 기능

### Force 시뮬레이션

`enableForceSimulation`을 활성화하면 D3.js의 force 시뮬레이션을 사용하여 노드들이 물리 법칙에 따라 자동으로 배치됩니다:

-   **Link Force**: 연결된 노드들을 적절한 거리에 배치
-   **Charge Force**: 노드들 간의 반발력으로 겹치지 않게 배치
-   **Center Force**: 노드들을 중앙으로 끌어당김
-   **Collision Force**: 노드들이 겹치지 않도록 충돌 검사

#### Force 시뮬레이션 상태 감지

Force 시뮬레이션 상태 변경을 감지하려면 `simulation-state` 이벤트를 사용하는 것이 권장됩니다:

```vue
<template>
    <div>
        <TopologyChart
            :data="topologyData"
            :enable-force-simulation="enableSimulation"
            @simulation-state="handleSimulationState"
        />
        <div v-if="isSimulationComplete" class="simulation-status">
            시뮬레이션 완료
        </div>
        <div v-else class="simulation-status">시뮬레이션 실행 중...</div>
    </div>
</template>

const enableSimulation = ref(true);
const isSimulationComplete = ref(false);

const handleSimulationState = (isComplete: boolean) => {
    isSimulationComplete.value = isComplete;

if (isComplete) {
        console.log('시뮬레이션 완료');
        // 시뮬레이션 종료 후 추가 작업 수행
        // 예: 레이아웃 저장, 통계 계산 등
    } else {
        console.log('시뮬레이션 시작');
    }
};
</script>
```

:::warning 중요한 변경사항 (v0.25.9+)
`enableForceSimulation`이 `false`일 때도 `simulation-state` 이벤트가 올바르게 발생합니다. 이전 버전에서는 이 경우 이벤트가 누락되는 버그가 있었습니다. `force-simulation-end` 이벤트는 하위 호환성을 위해 유지되지만, 새로운 코드에서는 `simulation-state`를 사용하는 것이 권장됩니다.
:::

#### 레거시 이벤트 (하위 호환성)

기존 `force-simulation-end` 이벤트도 계속 지원됩니다:

```vue
<template>
    <TopologyChart
        :data="topologyData"
        :enable-force-simulation="true"
        @force-simulation-end="handleSimulationEnd"
    />
</template>

### 시각적 상태

-   **정상 노드**: 초록색 배경, 연결된 상태
-   **에러 노드**: 빨간색 배경, 실패한 엣지가 있는 경우
-   **고립 노드**: 회색 배경, 연결이 없는 경우
-   **선택/호버**: 관련된 노드와 엣지가 하이라이팅됨

### 스케일 컨트롤

-   **확대/축소**: 마우스 휠 또는 버튼으로 차트 확대/축소
-   **자동 스케일**: 데이터에 맞는 최적의 스케일 자동 계산
-   **뷰포트 이동**: 배경 드래그로 차트 이동 가능

## 활용 사례

### 기본 모니터링

1. **마이크로서비스 아키텍처 시각화**: 서비스 간 의존성과 호출 관계 파악
2. **성능 병목 지점 탐지**: 높은 응답 시간과 실패율을 가진 연결 식별
3. **장애 전파 경로 추적**: 실패 카운트 기반 장애 영향 범위 분석

### 고급 분석

4. **클러스터 기반 서비스 그룹화**: 자동 감지된 클러스터를 통한 마이크로서비스 도메인 분리
5. **선택적 시스템 뷰**: 특정 클러스터만 표시하여 복잡한 시스템의 관심 영역 집중 분석
6. **대규모 인프라 최적화**: 100개 이상 노드를 가진 복잡한 시스템의 성능 분석

### 실시간 운영

7. **동적 모니터링**: 노드 위치 보존을 통한 실시간 상태 변화 추적
8. **자동화된 인시던트 대응**: API 통합을 통한 자동 상세 데이터 로딩 및 분석
9. **다단계 드릴다운 분석**: 엣지 선택 시 자동 트랜잭션 내역 로딩

### 비즈니스 인사이트

10. **용량 계획**: 성능 테스트 시나리오를 통한 확장성 검증
11. **비용 최적화**: 고립된 노드 식별 및 미사용 리소스 발견
12. **아키텍처 ꫀ버닝**: 마이크로서비스 의존성 맵 기반 전체 시스템 이해도 향상

## 개발 서버에서 테스트

업데이트된 TopologyChart를 테스트하려면:

```bash
# VitePress 개발 서버 실행
cd ../../clara-server/frontend/apps/design-docs
pnpm dev

# 브라우저에서 확인
open http://localhost:5173/j5-components/topology-chart
```

## 버전 업데이트 내역

### v0.25.9 버그 수정 및 개선 (2025-10-13)

-   **시뮬레이션 이벤트 수정**: `enableForceSimulation`이 `false`일 때 `simulation-state` 이벤트가 누락되던 버그 수정
-   **새로운 이벤트 추가**: `simulation-state`, `node-unselect`, `edge-unselect`, `node-analysis`, `edge-analysis`, `auto-save`, `node-positions-state` 이벤트 추가
-   **클러스터 드래그 개선**: 고립된 노드 클러스터 드래그 기능 완전 복원
-   **충돌 처리 최적화**: 클러스터 충돌 감지 및 처리 로직 개선
-   **실시간 모드 버그 수정**: `realtimeMode`에서 `enableForceSimulation=false` 시 클러스터 드래그 버그 수정

### v0.25.2~v0.25.8 클러스터 드래그 및 시뮬레이션 개선

-   **클러스터 정보 컴포넌트**: ClusterInfo 컴포넌트 추가 및 드래그 기능 구현
-   **동적 힘 분배**: 클러스터 노드 개수 기반 동적 힘 분배 시스템
-   **4단계 충돌 로직**: 다양한 시나리오별 클러스터 충돌 감지 및 해결
-   **공간 그리드 최적화**: Spatial Grid를 이용한 충돌 감지 성능 최적화
-   **자동 저장 개선**: 노드 위치 localStorage 저장 및 복원 기능

### v0.19.2 주요 업데이트

-   **클러스터 자동 감지**: 노드 간 연결 관계 분석을 통한 스마트 클러스터링
-   **API 통합 기능**: 노드/엣지 선택 시 자동 상세 데이터 로딩
-   **성능 테스트 시나리오**: Small~Extreme 스케일의 다양한 테스트 데이터 지원
-   **선택적 클러스터 표시**: 특정 클러스터만 표시하여 대규모 시스템의 분석 대응
-   **실시간 모드**: 노드 위치 보존을 통한 지속적인 모니터링 지원
-   **향상된 이벤트 시스템**: `node-select`, `edge-select`, `clusters-detected` 등 새로운 이벤트 추가

업데이트된 TopologyChart는 이제 엔터프라이즈급 대규모 시스템 모니터링과 지능형 상태 분석을 지원하며, 실시간 API 통합을 통해 더욱 심층적인 인사이트를 제공합니다.

### File: j5-components/sankey-diagram.md

# SankeyDiagram

MSA (Microservices Architecture) 분석을 위한 계층형 플로우 다이어그램 컴포넌트입니다.

## 개요

SankeyDiagram은 마이크로서비스 간의 호출량과 데이터 플로우를 시각적으로 표현하는 차트입니다. 노드는 서비스를, 링크는 서비스 간 호출 관계를 나타내며, 링크의 두께로 호출량을 직관적으로 파악할 수 있습니다.

## 주요 특징

-   **플로우 시각화**: 서비스 간 호출량을 링크 두께로 표현
-   **메트릭 선택**: count 또는 timeSum 메트릭 선택 가능
-   **노드 정렬**: 다양한 노드 정렬 방식 지원 (left, center, right, justify)
-   **에러 하이라이팅**: 에러 발생 링크 별도 색상 표시
-   **인터랙티브 컨트롤**: 노드 크기, 폰트 크기 실시간 조정
-   **그라데이션 링크**: 소스와 타겟 노드 색상을 혼합한 링크 색상
-   **상세 데이터 연동**: 노드/엣지 선택 시 상세 정보 표시 지원
-   **노드 필터링**: 마지막 depth의 상위 노드 수 제한 기능
-   **라벨 제어**: 노드 라벨 표시/숨김 옵션

## Props Interface

```typescript
interface SankeyDiagramProps {
    /** 토폴로지 데이터 */
    data: TopologyData;
    /** 차트 너비 (기본값: 800) */
    width?: number;
    /** 차트 높이 (기본값: 600) */
    height?: number;
    /** 노드 정렬 방식 (기본값: 'justify') */
    nodeAlign?: 'left' | 'center' | 'right' | 'justify';
    /** 노드 스케일 컨트롤 표시 여부 (기본값: true) */
    showScaleControls?: boolean;
    /** 에러 하이라이팅 활성화 (기본값: false) */
    errorOnlyHighlight?: boolean;
    /** 선택된 메트릭 (기본값: 'timeSum') */
    selectedMetric?: 'timeSum' | 'count';
    /** 노드 라벨 숨김 여부 (기본값: false) */
    hideNodeLabels?: boolean;
    /** 마지막 depth의 상위 클러스터 수 제한 (기본값: -1, -1이면 전체 표시) */
    maxClusterCount?: number;
    /** 현재 선택된 엣지 - 상세 정보 표시용 */
    selectedEdge?: TopologyEdge;
    /** 엣지 상세 데이터 - API 호출 후 가져온 데이터 */
    edgeDetailData?: EdgeDetailData;
    /** 현재 선택된 노드 - 상세 정보 표시용 */
    selectedNode?: TopologyNode;
    /** 노드 상세 데이터 - API 호출 후 가져온 데이터 */
    nodeDetailData?: Record<string, number[]>;
}
```

## Events

```typescript
interface SankeyDiagramEmits {
    /** 노드 호버 시 발생 */
    'node-hover': [node: TopologyNode];
    /** 노드 클릭 시 발생 */
    'node-click': [node: TopologyNode];
    /** 노드 선택 시 발생 (상세 데이터 로딩 포함) */
    'node-select': [node: TopologyNode];
    /** 링크 호버 시 발생 */
    'link-hover': [link: TopologyEdge];
    /** 링크 클릭 시 발생 */
    'link-click': [link: TopologyEdge];
    /** 엣지 선택 시 발생 (상세 데이터 로딩 포함) */
    'edge-select': [edge: TopologyEdge];
    /** 호버 해제 시 발생 */
    'hover-out': [];
    /** 차트 렌더링 완료 시 발생 */
    'chart-ready': [];
    /** 레이아웃 오류 발생 시 발생 */
    'layout-error': [error: Error];
}
```

## 기본 사용법

```vue
<template>
    <SankeyDiagram
        :data="topologyData"
        :width="800"
        :height="600"
        :node-align="'justify'"
        :selected-metric="'timeSum'"
        :error-only-highlight="false"
        :hide-node-labels="false"
        :top-last-depth-count="-1"
        :selected-edge="selectedEdge"
        :edge-detail-data="edgeDetailData"
        :selected-node="selectedNode"
        :node-detail-data="nodeDetailData"
        @node-click="handleNodeClick"
        @node-select="handleNodeSelect"
        @link-click="handleLinkClick"
        @edge-select="handleEdgeSelect"
        @chart-ready="handleChartReady"
        @layout-error="handleLayoutError"
    />
</template>

const topologyData = ref<TopologyData>(sampleTopologyData);
const selectedEdge = ref<TopologyEdge | null>(null);
const edgeDetailData = ref<EdgeDetailData | null>(null);
const selectedNode = ref<TopologyNode | null>(null);
const nodeDetailData = ref<Record<string, number[]> | null>(null);

const handleNodeClick = (node: TopologyNode) => {
    console.log('Node clicked:', node);
};

const handleNodeSelect = (node: TopologyNode) => {
    selectedNode.value = node;
    console.log('Node selected:', node);
    // API 호출로 노드 상세 데이터 조회
};

const handleLinkClick = (edge: TopologyEdge) => {
    console.log('Link clicked:', edge);
};

const handleEdgeSelect = (edge: TopologyEdge) => {
    selectedEdge.value = edge;
    console.log('Edge selected:', edge);
    // API 호출로 엣지 상세 데이터 조회
};

const handleChartReady = () => {
    console.log('Chart is ready');
};

const handleLayoutError = (error: Error) => {
    console.error('Layout error:', error);
};
</script>
```

## 라이브 데모

// 샘플 데이터 로드
const sankeyDemoData = ref(getCompleteTopologyData());

// SankeyDiagram 데모용 상태
const sankeyDemoControls = ref({
  nodeAlign: 'justify',
  selectedMetric: 'timeSum',
  errorOnlyHighlight: false,
  hideNodeLabels: false,
  showScaleControls: true
});

const handleSankeyNodeClick = (node) => {
  console.log('Sankey Demo - Node clicked:', node);
};

const handleSankeyLinkClick = (edge) => {
  console.log('Sankey Demo - Link clicked:', edge);
};

// 컴포넌트 임포트 시도 (개발 중일 때는 에러 발생 가능)
const SankeyDiagram = ref(null);

onMounted(async () => {
  try {
    const { SankeyDiagram: Component } = await import('@jennifersoft/apm-components');
    SankeyDiagram.value = Component;
  } catch (error) {
    console.log('SankeyDiagram component not yet available:', error.message);
  }
});
</script>

<div style="border: 1px solid #e1e5e9; border-radius: 8px; padding: 20px; margin: 20px 0; background: #fafbfc;">
  <h4>SankeyDiagram 라이브 데모</h4>
  
  <div style="display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap;">
    <div style="display: flex; align-items: center; gap: 4px;">
      <label>노드 정렬:</label>
      <select v-model="sankeyDemoControls.nodeAlign" style="padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 4px;">
        <option value="justify">Justify</option>
        <option value="left">Left</option>
        <option value="center">Center</option>
        <option value="right">Right</option>
      </select>
    </div>
    <div style="display: flex; align-items: center; gap: 4px;">
      <label>메트릭:</label>
      <select v-model="sankeyDemoControls.selectedMetric" style="padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 4px;">
        <option value="timeSum">Time Sum</option>
        <option value="count">Count</option>
      </select>
    </div>
    <label style="display: flex; align-items: center; gap: 4px;">
      <input type="checkbox" v-model="sankeyDemoControls.errorOnlyHighlight" />
      에러만 하이라이팅
    </label>
    <label style="display: flex; align-items: center; gap: 4px;">
      <input type="checkbox" v-model="sankeyDemoControls.hideNodeLabels" />
      노드 라벨 숨기기
    </label>
  </div>

<div style="display: flex; justify-content: center; background: white; border-radius: 4px; padding: 16px; min-height: 400px; align-items: center;">
    
    <component 
      v-if="SankeyDiagram"
      :is="SankeyDiagram"
      :data="sankeyDemoData"
      :width="700"
      :height="400"
      :node-align="sankeyDemoControls.nodeAlign"
      :selected-metric="sankeyDemoControls.selectedMetric"
      :error-only-highlight="sankeyDemoControls.errorOnlyHighlight"
      :hide-node-labels="sankeyDemoControls.hideNodeLabels"
      :show-scale-controls="sankeyDemoControls.showScaleControls"
      @node-click="handleSankeyNodeClick"
      @link-click="handleSankeyLinkClick"
    />
  </div>
  
  <p style="font-size: 14px; color: #6b7280; margin-top: 12px;">
    💡 <strong>사용법:</strong> 컴포넌트가 로드되면 노드나 링크 클릭/호버, 메트릭 변경에 따른 링크 두께 조정, 스케일 컨트롤로 노드 크기와 폰트 조정 등의 기능을 사용할 수 있습니다.
  </p>
</div>

## API 통합 및 실시간 데이터

SankeyDiagram도 TopologyChart와 동일한 방식으로 JENNIFER APM API를 통해 실시간 데이터를 가져올 수 있습니다:

```vue
<template>
    <div class="sankey-container">
        
        <div v-if="isLoading" class="loading-indicator">
            <div class="loading-text">
                데이터 로딩 중... {{ Math.round(progress * 100) }}%
            </div>
            <div class="progress-bar">
                <div
                    class="progress-fill"
                    :style="{ width: `${progress * 100}%` }"
                ></div>
            </div>
        </div>

<div v-else-if="error" class="error-indicator">
            <div class="error-text">{{ error }}</div>
            <button @click="fetchTopologyData" class="retry-button">
                다시 시도
            </button>
        </div>

<SankeyDiagram
            v-else
            :data="topologyData"
            :width="chartWidth"
            :height="chartHeight"
            :node-align="nodeAlign"
            :selected-metric="selectedMetric"
            :error-only-highlight="errorOnlyHighlight"
            :hide-node-labels="hideNodeLabels"
            @node-click="onNodeClick"
            @link-click="onLinkClick"
            @chart-ready="onChartReady"
        />
    </div>
</template>

// 차트 설정
const nodeAlign = ref<'left' | 'center' | 'right' | 'justify'>('justify');
const selectedMetric = ref<'timeSum' | 'count'>('timeSum');
const errorOnlyHighlight = ref(false);
const hideNodeLabels = ref(false);

// API 및 상태 관리 (TopologyChart와 동일한 로직)
// ... fetchTopologyData, loading states, event handlers 등
</script>
```

## 동적 메트릭 전환

메트릭을 동적으로 전환하여 다양한 관점에서 데이터 플로우를 분석할 수 있습니다:

```vue
<template>
    <div class="sankey-with-metrics">
        
        <div class="metric-controls">
            <h4>분석 메트릭 선택</h4>
            <div class="metric-options">
                <label>
                    <input
                        type="radio"
                        v-model="selectedMetric"
                        value="timeSum"
                    />
                    응답 시간 기반 (ms)
                </label>
                <label>
                    <input
                        type="radio"
                        v-model="selectedMetric"
                        value="count"
                    />
                    호출 횟수 기반
                </label>
            </div>
            <div class="metric-info">
                <p v-if="selectedMetric === 'timeSum'">
                    📊 총 응답 시간이 긴 연결일수록 두꺼운 링크로 표시됩니다.
                    성능 병목을 찾는데 유용합니다.
                </p>
                <p v-else>
                    📊 호출 횟수가 많은 연결일수록 두꺼운 링크로 표시됩니다.
                    사용량 패턴 분석에 유용합니다.
                </p>
            </div>
        </div>

<div class="metric-stats">
            <h4>
                {{ selectedMetric === 'timeSum' ? '응답 시간' : '호출 횟수' }}
                통계
            </h4>
            <div class="stats-grid">
                <div class="stat-item">
                    <span class="stat-label"
                        >총
                        {{
                            selectedMetric === 'timeSum'
                                ? '응답 시간'
                                : '호출 횟수'
                        }}:</span
                    >
                    <span class="stat-value"
                        >{{ totalMetricValue.toLocaleString()
                        }}{{ selectedMetric === 'timeSum' ? 'ms' : '건' }}</span
                    >
                </div>
                <div class="stat-item">
                    <span class="stat-label"
                        >평균
                        {{
                            selectedMetric === 'timeSum'
                                ? '응답 시간'
                                : '호출 횟수'
                        }}:</span
                    >
                    <span class="stat-value"
                        >{{ averageMetricValue.toLocaleString()
                        }}{{ selectedMetric === 'timeSum' ? 'ms' : '건' }}</span
                    >
                </div>
                <div class="stat-item">
                    <span class="stat-label"
                        >최대
                        {{
                            selectedMetric === 'timeSum'
                                ? '응답 시간'
                                : '호출 횟수'
                        }}:</span
                    >
                    <span class="stat-value"
                        >{{ maxMetricValue.toLocaleString()
                        }}{{ selectedMetric === 'timeSum' ? 'ms' : '건' }}</span
                    >
                </div>
            </div>
        </div>
    </div>
</template>

const totalMetricValue = computed(() => {
    const key = selectedMetric.value;
    return topologyData.value.edges.reduce(
        (sum, edge) => sum + (edge.statistic[key] || 0),
        0
    );
});

const averageMetricValue = computed(() => {
    const total = totalMetricValue.value;
    const count = topologyData.value.edges.length;
    return count > 0 ? Math.round(total / count) : 0;
});

const maxMetricValue = computed(() => {
    const key = selectedMetric.value;
    return Math.max(
        ...topologyData.value.edges.map((edge) => edge.statistic[key] || 0)
    );
});

const onMetricChanged = (metric: string) => {
    console.log(`메트릭 변경됨: ${metric}`);
    // 메트릭 변경 시 추가 로직 수행
};
</script>
```

## 이벤트 로깅 및 분석

SankeyDiagram의 인터랙션을 추적하고 사용자 행동을 분석할 수 있습니다:

```vue
<template>
    <div class="sankey-with-analytics">
        <SankeyDiagram
            :data="topologyData"
            @node-click="logNodeClick"
            @link-click="logLinkClick"
            @node-hover="logNodeHover"
            @link-hover="logLinkHover"
        />

<div class="interaction-analytics">
            <h4>사용자 상호작용 분석</h4>
            <div class="analytics-grid">
                <div class="analytics-item">
                    <span class="analytics-label">총 클릭 수:</span>
                    <span class="analytics-value">{{ totalClicks }}</span>
                </div>
                <div class="analytics-item">
                    <span class="analytics-label">노드 클릭:</span>
                    <span class="analytics-value">{{ nodeClicks }}</span>
                </div>
                <div class="analytics-item">
                    <span class="analytics-label">링크 클릭:</span>
                    <span class="analytics-value">{{ linkClicks }}</span>
                </div>
                <div class="analytics-item">
                    <span class="analytics-label">가장 많이 클릭된 노드:</span>
                    <span class="analytics-value">{{ mostClickedNode }}</span>
                </div>
            </div>

<div class="click-heatmap">
                <h5>노드별 클릭 빈도</h5>
                <div
                    v-for="(count, nodeId) in nodeClickCounts"
                    :key="nodeId"
                    class="heatmap-item"
                >
                    <span class="node-name">{{ getNodeName(nodeId) }}</span>
                    <div class="click-bar">
                        <div
                            class="click-fill"
                            :style="{
                                width: `${(count / maxNodeClicks) * 100}%`,
                            }"
                        ></div>
                        <span class="click-count">{{ count }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

// 분석 데이터
const clickHistory = ref<
    Array<{
        type: 'node' | 'link';
        target: string;
        timestamp: number;
    }>
>([]);

const nodeClickCounts = ref<Record<string, number>>({});
const linkClickCounts = ref<Record<string, number>>({});

// 통계 계산
const totalClicks = computed(() => clickHistory.value.length);
const nodeClicks = computed(
    () => clickHistory.value.filter((c) => c.type === 'node').length
);
const linkClicks = computed(
    () => clickHistory.value.filter((c) => c.type === 'link').length
);

const mostClickedNode = computed(() => {
    const maxCount = Math.max(...Object.values(nodeClickCounts.value));
    const nodeId = Object.keys(nodeClickCounts.value).find(
        (id) => nodeClickCounts.value[id] === maxCount
    );
    return nodeId ? getNodeName(nodeId) : '없음';
});

const maxNodeClicks = computed(() =>
    Math.max(...Object.values(nodeClickCounts.value), 1)
);

// 이벤트 핸들러
const logNodeClick = (node: TopologyNode) => {
    const nodeId = getNodeId(node);
    clickHistory.value.push({
        type: 'node',
        target: nodeId,
        timestamp: Date.now(),
    });
    nodeClickCounts.value[nodeId] = (nodeClickCounts.value[nodeId] || 0) + 1;
};

const logLinkClick = (edge: TopologyEdge) => {
    const linkId = getLinkId(edge);
    clickHistory.value.push({
        type: 'link',
        target: linkId,
        timestamp: Date.now(),
    });
    linkClickCounts.value[linkId] = (linkClickCounts.value[linkId] || 0) + 1;
};
</script>
```

## 데이터 구조

SankeyDiagram은 TopologyChart와 동일한 데이터 구조를 사용합니다.

### TopologyData

```typescript
interface TopologyData {
    nodes: TopologyNode[];
    edges: TopologyEdge[];
}
```

### TopologyEdge (중요)

Sankey 다이어그램에서 링크의 두께는 `statistic` 필드의 값에 따라 결정됩니다:

```typescript
interface TopologyEdge {
    relation: {
        source: TopologyNode;
        target: TopologyNode;
    };
    statistic: {
        count: number; // 호출 횟수 (selectedMetric="count"일 때 사용)
        timeSum: number; // 총 응답 시간 (selectedMetric="timeSum"일 때 사용)
        failureCount: number; // 실패 횟수 (에러 하이라이팅에 사용)
    };
}
```

## 노드 정렬 방식

### justify (기본값)

노드들이 전체 너비에 고르게 분산되어 배치됩니다. 가장 균형 잡힌 레이아웃을 제공합니다.

### left

모든 노드가 왼쪽 정렬되어 배치됩니다. 시작점이 명확한 플로우에 적합합니다.

### center

모든 노드가 중앙 정렬되어 배치됩니다. 대칭적인 구조를 강조하고 싶을 때 사용합니다.

### right

모든 노드가 오른쪽 정렬되어 배치됩니다. 최종 결과를 강조하고 싶을 때 사용합니다.

## 메트릭 선택

### timeSum (기본값)

각 엣지의 `timeSum` 값을 사용하여 링크 두께를 결정합니다. 총 응답 시간이 클수록 링크가 두껍게 표시됩니다.

### count

각 엣지의 `count` 값을 사용하여 링크 두께를 결정합니다. 호출 횟수가 많을수록 링크가 두껍게 표시됩니다.

## 에러 하이라이팅

`errorOnlyHighlight` 옵션을 활성화하면:

-   **에러 링크**: `failureCount > 0`

### File: j5-components/transaction-table.md

# TransactionTable

트랜잭션 데이터에 특화된 고성능 테이블 컴포넌트입니다.

## 개요

TransactionTable은 BaseTable을 확장하여 트랜잭션 분석에 필요한 특수 기능들을 제공합니다. ProfileInfo 컴포넌트를 내장하고, 트랜잭션 전용 행 렌더링과 정렬 기능을 포함합니다.

## Props 인터페이스

```typescript
interface Props<T extends TransactionData & Record<string, unknown>>
    extends PagingTableProps<T> {
    maxMap: TransactionTime; // 각 시간 메트릭의 최대값
}

interface TransactionData {
    elapsedTime: number; // 응답시간
    sqlTime: number; // SQL 실행시간
    externalCallTime: number; // 외부 호출 시간
    methodTime: number; // 메소드 실행시간
    errorType: number; // 에러 타입
    // ... 기타 트랜잭션 속성들
}

interface TransactionTime {
    elapsedTime: number;
    sqlTime: number;
    externalCallTime: number;
    methodTime: number;
}
```

## 기본 사용법

```vue
<template>
    <TransactionTable
        alias="transaction-list"
        :width="1000"
        :height="600"
        :display-count="20"
        :columns="transactionColumns"
        :rows="transactionRows"
        :max-map="maxTimeValues"
        @sort="handleSort"
        @select="handleTransactionSelect"
    >
        <template #tools="{ page, totalCount }">
            <button @click="exportTransactions">내보내기</button>
            <span>{{ page }} / {{ Math.ceil(totalCount / 20) }}</span>
        </template>
    </TransactionTable>
</template>

interface MyTransactionData {
    txid: string;
    name: string;
    elapsedTime: number;
    sqlTime: number;
    externalCallTime: number;
    methodTime: number;
    errorType: number;
    startTime: string;
}

const transactionColumns: PagingTableColumn[] = [
    {
        key: 'name',
        name: '트랜잭션명',
        type: PagingTableCellType.TEXT,
        rate: 0.3,
    },
    {
        key: 'elapsedTime',
        name: '응답시간',
        type: PagingTableCellType.BAR,
        rate: 0.15,
        color: '#3B82F6',
    },
    {
        key: 'sqlTime',
        name: 'SQL 시간',
        type: PagingTableCellType.BAR,
        rate: 0.15,
        color: '#10B981',
    },
    {
        key: 'externalCallTime',
        name: '외부호출',
        type: PagingTableCellType.BAR,
        rate: 0.15,
        color: '#F59E0B',
    },
    {
        key: 'startTime',
        name: '시작시간',
        type: PagingTableCellType.TIME,
        rate: 0.15,
    },
    {
        key: 'errorType',
        name: '에러',
        type: PagingTableCellType.ERROR,
        rate: 0.1,
    },
];

const transactionRows = ref([
    {
        id: 'tx001',
        data: {
            txid: 'tx001',
            name: '/api/users',
            elapsedTime: 1250,
            sqlTime: 850,
            externalCallTime: 200,
            methodTime: 200,
            errorType: 0,
            startTime: '2025-01-15 14:30:25',
        },
    },
    // ... 더 많은 트랜잭션 데이터
]);

const maxTimeValues = computed(() => ({
    elapsedTime: Math.max(
        ...transactionRows.value.map((r) => r.data.elapsedTime)
    ),
    sqlTime: Math.max(...transactionRows.value.map((r) => r.data.sqlTime)),
    externalCallTime: Math.max(
        ...transactionRows.value.map((r) => r.data.externalCallTime)
    ),
    methodTime: Math.max(
        ...transactionRows.value.map((r) => r.data.methodTime)
    ),
}));

const handleSort = (key: string, order: PagingTableSortOrder) => {
    // 트랜잭션 정렬 로직
};

const handleTransactionSelect = (id: string, row: any) => {
    // 트랜잭션 상세 분석 페이지로 이동
    router.push(`/analysis/transaction/${row.data.txid}`);
};
</script>
```

## 내장 기능

### 1. ProfileInfo 자동 표시

트랜잭션 프로파일 정보가 테이블 상단에 자동으로 표시됩니다.

### 2. 전용 행 렌더링

트랜잭션 데이터에 최적화된 셀 렌더링을 제공합니다.

### 3. 시간 메트릭 시각화

응답시간, SQL 시간, 외부 호출 시간을 바 차트로 시각화합니다.

### 4. 내장 정렬

트랜잭션 데이터에 최적화된 정렬 알고리즘을 제공합니다.

## 고급 사용법

### 에러 트랜잭션 필터링

```vue
<script setup>
const showErrorsOnly = ref(false);

const filteredRows = computed(() => {
    if (!showErrorsOnly.value) return transactionRows.value;
    return transactionRows.value.filter((row) => row.data.errorType > 0);
});
</script>

<template>
    <TransactionTable :rows="filteredRows" v-bind="otherProps" />
</template>
```

### 성능 임계값 기반 색상

```vue
<script setup>
const performanceThresholds = {
    good: 1000,
    warning: 3000,
    critical: 5000,
};

## 의존성

-   BaseTable
-   ProfileInfo
-   ColumnTools
-   Vue 3 Composition API

### File: j5-components/base-row.md

# BaseRow

테이블 행 렌더링을 위한 기본 컴포넌트입니다.

## 개요

BaseRow는 BaseTable에서 사용되는 행 렌더링 컴포넌트입니다. 다양한 셀 타입을 지원하며, 선택 상태와 스켈레톤 로딩을 처리합니다.

## Props

```typescript
interface Props<T extends Record<string, unknown>> {
    row: PagingTableRow<T>; // 행 데이터
    columns: PagingTableColumn[]; // 컬럼 정의
    cellWidths: number[]; // 셀 너비 배열
    scrollBarWidth: number; // 스크롤바 너비
    maxMap?: Record<string, number>; // 최대값 맵 (BAR 셀용)
}
```

## 지원 셀 타입

-   **TEXT**: 일반 텍스트
-   **VALUE**: 숫자 값 (천단위 구분자)
-   **DATE**: 날짜 형식
-   **TIME**: 시간 형식
-   **BAR**: 바 차트 시각화
-   **ERROR**: 에러 상태 표시
-   **SKELETON**: 로딩 상태

## 기본 사용법

```vue
<template>
    <BaseRow
        :row="tableRow"
        :columns="tableColumns"
        :cell-widths="[120, 150, 100, 200]"
        :scroll-bar-width="15"
        :max-map="{ score: 100 }"
    />
</template>

const tableRow = {
    id: '1',
    data: {
        name: '사용자명',
        email: 'user@example.com',
        score: 85,
        createdAt: '2025-01-15',
    },
};

const tableColumns = [
    { key: 'name', name: '이름', type: 'text' },
    { key: 'email', name: '이메일', type: 'text' },
    { key: 'score', name: '점수', type: 'bar' },
    { key: 'createdAt', name: '생성일', type: 'date' },
];
</script>
```

## 의존성

-   PagingTableColumn, PagingTableRow 타입
-   각종 셀 렌더러 컴포넌트

### File: j5-components/base-table.md

# BaseTable

재사용 가능한 기본 테이블 컴포넌트입니다. 정렬, 페이징, 컬럼 크기 조정, 행 선택 등의 기본 테이블 기능을 제공합니다.

## 개요

BaseTable은 PagingTable의 핵심 기능을 담당하는 컴포넌트로, 대용량 데이터 테이블을 효율적으로 렌더링하고 사용자 인터랙션을 처리합니다. 컬럼 설정 저장, 동적 크기 조정, 스켈레톤 로딩 등의 고급 기능을 포함합니다.

## 주요 특징

- **📊 대용량 데이터 처리**: 가상화를 통한 효율적인 렌더링
- **🔧 컬럼 커스터마이징**: 크기 조정, 표시/숨김, 순서 변경
- **🔍 정렬 및 검색**: 다중 컬럼 정렬과 행 검색 지원
- **💾 설정 저장**: 로컬 스토리지를 통한 사용자 설정 유지
- **⚡ 스켈레톤 로딩**: 데이터 로딩 중 스켈레톤 UI 표시
- **✅ 행 선택**: 단일/다중 행 선택 지원

## Props Interface

```typescript
interface PagingTableProps<T extends Record<string, unknown>> {
  /** 테이블 고유 식별자 (설정 저장용) */
  alias: string;
  
  /** 테이블 너비 */
  width: number;
  
  /** 테이블 높이 */
  height: number;
  
  /** 페이지당 표시할 행 수 */
  displayCount: number;
  
  /** 컬럼 정의 배열 */
  columns: PagingTableColumn[];
  
  /** 테이블 데이터 배열 */
  rows: PagingTableRow<T>[];
  
  /** 행 높이 (기본값: 40px) */
  rowHeight?: number;
  
  /** 컬럼별 최대값 맵 (프로그레스 바 등에 사용) */
  maxMap?: Record<string, number>;
  
  /** 현재 정렬 키 */
  sortKey?: string;
  
  /** 현재 정렬 순서 */
  sortOrder?: PagingTableSortOrder;
  
  /** 정렬 로딩 상태 */
  sortLoading?: boolean;
  
  /** 스켈레톤 로딩 사용 여부 (기본값: true) */
  useSkeleton?: boolean;
  
  /** 행 선택 기능 사용 여부 (기본값: true) */
  useSelect?: boolean;
  
  /** 찾을 행 ID (해당 행으로 자동 스크롤) */
  foundRowId?: string;
  
  /** 선택된 행 ID 배열 */
  selectedRowIds?: string[];
}
```

## 컬럼 정의

```typescript
interface PagingTableColumn {
  /** 컬럼 키 (데이터 객체의 속성 이름) */
  key: string;
  
  /** 컬럼 표시 이름 */
  name: string;
  
  /** 셀 타입 */
  type: PagingTableCellType;
  
  /** 컬럼 비율 (0-1, 전체 너비 대비) */
  rate?: number;
  
  /** 정렬 가능 여부 */
  sortable?: boolean;
  
  /** 표시 여부 */
  visible?: boolean;
  
  /** 셀 색상 */
  color?: string;
}
```

## 행 데이터 구조

```typescript
interface PagingTableRow<T> {
  /** 실제 데이터 객체 */
  data: T;
  
  /** 행 고유 식별자 */
  id: string;
}
```

## Events

```typescript
interface PagingTableEmits<T> {
  /** 컬럼 정렬 시 발생 */
  'sort': [key: string, order: PagingTableSortOrder];
  
  /** 행 선택 시 발생 */
  'select': [id: string, row?: PagingTableRow<T>];
}
```

## 기본 사용법

```vue
<template>
  <BaseTable
    alias="transaction-table"
    :width="800"
    :height="600"
    :display-count="50"
    :columns="tableColumns"
    :rows="tableRows"
    :sort-key="sortKey"
    :sort-order="sortOrder"
    :selected-row-ids="selectedRows"
    @sort="handleSort"
    @select="handleRowSelect"
  >
    <template #information>
      <div class="table-info">
        총 {{ tableRows.length }}개 항목
      </div>
    </template>
    
    <template #tools="{ columns, updateColumns, resetSettings }">
      <div class="table-tools">
        <button @click="resetSettings">설정 초기화</button>
        <button @click="exportData">데이터 내보내기</button>
      </div>
    </template>
    
    <template #row="{ row, column, value }">
      
      <span v-if="column.key === 'status'" :class="`status-${value}`">
        {{ getStatusText(value) }}
      </span>
      <span v-else>{{ value }}</span>
    </template>
  </BaseTable>
</template>

interface TransactionData {
  id: string;
  timestamp: number;
  method: string;
  uri: string;
  responseTime: number;
  status: number;
  errorCount: number;
}

const tableColumns = ref<PagingTableColumn[]>([
  {
    key: 'timestamp',
    name: '시간',
    type: PagingTableCellType.DATETIME,
    rate: 0.15,
    sortable: true
  },
  {
    key: 'method',
    name: 'Method',
    type: PagingTableCellType.TEXT,
    rate: 0.1,
    sortable: true
  },
  {
    key: 'uri',
    name: 'URI',
    type: PagingTableCellType.TEXT,
    rate: 0.4,
    sortable: true
  },
  {
    key: 'responseTime',
    name: '응답시간',
    type: PagingTableCellType.NUMBER,
    rate: 0.15,
    sortable: true
  },
  {
    key: 'status',
    name: '상태',
    type: PagingTableCellType.CUSTOM,
    rate: 0.1,
    sortable: true
  },
  {
    key: 'errorCount',
    name: '에러수',
    type: PagingTableCellType.NUMBER,
    rate: 0.1,
    sortable: true
  }
]);

const tableRows = ref<PagingTableRow<TransactionData>[]>([]);
const sortKey = ref<string>('timestamp');
const sortOrder = ref<PagingTableSortOrder>(PagingTableSortOrder.DESC);
const selectedRows = ref<string[]>([]);

const handleSort = (key: string, order: PagingTableSortOrder) => {
  sortKey.value = key;
  sortOrder.value = order;
  
  // 실제 정렬 로직 구현
  sortTableData(key, order);
};

const getStatusText = (status: number): string => {
  if (status >= 200 && status < 300) return '성공';
  if (status >= 400 && status < 500) return '클라이언트 오류';
  if (status >= 500) return '서버 오류';
  return '알 수 없음';
};
</script>
```

## 컬럼 타입

BaseTable은 다양한 셀 타입을 지원합니다:

```typescript
enum PagingTableCellType {
  TEXT = 'TEXT',           // 일반 텍스트
  NUMBER = 'NUMBER',       // 숫자 (천 단위 구분자 포함)
  DATETIME = 'DATETIME',   // 날짜/시간
  PROGRESS = 'PROGRESS',   // 프로그레스 바
  CUSTOM = 'CUSTOM',       // 커스텀 렌더링
  LINK = 'LINK',          // 링크
  BADGE = 'BADGE',        // 배지
  CHART = 'CHART'         // 미니 차트
}
```

## 설정 저장 및 복원

BaseTable은 사용자 설정을 자동으로 로컬 스토리지에 저장합니다:

```typescript
// 저장되는 설정들
interface TableSettings {
  columnRates: number[];      // 컬럼 너비 비율
  visibleColumns: string[];   // 표시되는 컬럼 키
  sortKey: string;           // 마지막 정렬 키
  sortOrder: PagingTableSortOrder; // 마지막 정렬 순서
}

// 스토리지 키 형식
const storageKeys = {
  columnRates: `COLUMN_RATES#${alias}`,
  visibleColumns: `VISIBLE_COLUMNS#${alias}`,
  sortSettings: `SORT_SETTINGS#${alias}`
};
```

## 슬롯 활용

### information 슬롯
```vue
<template #information>
  <div class="table-summary">
    <span class="total-count">총 {{ totalCount }}개</span>
    <span class="selected-count" v-if="selectedCount > 0">
      {{ selectedCount }}개 선택됨
    </span>
    <span class="filter-status" v-if="isFiltered">
      필터 적용됨
    </span>
  </div>
</template>
```

### tools 슬롯
```vue
<template #tools="{ columns, updateColumns, resetSettings }">
  <div class="table-toolbar">
    <ColumnManager 
      :columns="columns"
      @update="updateColumns"
    />
    <ExportButton 
      :data="tableRows"
      :columns="columns"
    />
    <button @click="resetSettings">
      설정 초기화
    </button>
  </div>
</template>
```

### row 슬롯
```vue
<template #row="{ row, column, value, cellWidth }">
  
  <div 
    v-if="column.type === 'CUSTOM'"
    :style="{ width: cellWidth + 'px' }"
  >
    <StatusBadge :status="value" />
  </div>
  
  
  <span v-else>{{ formatCellValue(value, column.type) }}</span>
</template>
```

## 의존성

- `@jennifersoft/vue-components-v2`: ProgressIndicator 컴포넌트
- Vue 3: Composition API와 Generic Props 지원
- 로컬 스토리지: 사용자 설정 저장

## 브라우저 지원

- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+

## 알려진 제한사항

1. **메모리 사용량**: 대용량 데이터 (10,000+ 행)에서 메모리 사용량 증가
2. **가상화**: 현재 수직 가상화만 지원 (수평 가상화 미지원)
3. **컬럼 순서**: 동적 컬럼 순서 변경 미지원 (향후 버전에서 지원 예정)

### File: j5-components/popover-balloon.md

# PopoverBalloon

위치 기반 팝오버 말풍선 컴포넌트입니다.

## 개요

PopoverBalloon은 특정 요소 주변에 말풍선 형태의 팝오버를 표시하는 컴포넌트입니다. HTML 콘텐츠를 지원하며, 다양한 위치와 스타일링 옵션을 제공합니다.

## Props

```typescript
interface Props {
    content: string; // HTML 문자열 지원
    position?: PopoverPosition; // 위치 (기본: 'right')
    offset?: number; // 오프셋 (기본: 10px)
    cursorNone?: boolean; // 화살표 숨김 (기본: false)
    contentPadding?: number; // 콘텐츠 패딩 (기본: 24px)
}

## 기본 사용법

```vue
<template>
    <div
        class="trigger"
        @mouseover="showPopover = true"
        @mouseleave="showPopover = false"
    >
        마우스를 올려보세요
        <PopoverBalloon
            v-if="showPopover"
            content="<strong>팝오버</strong> 내용입니다."
            position="top"
            :offset="15"
        />
    </div>
</template>

const showPopover = ref(false);
</script>
```

## 위치 옵션

-   `top`, `top-left`, `top-right`: 상단 배치
-   `bottom`, `bottom-left`, `bottom-right`: 하단 배치
-   `left`, `right`: 좌/우측 배치

---

# TooltipBalloon

간단한 툴팁 말풍선 컴포넌트입니다.

## 개요

TooltipBalloon은 PopoverBalloon의 경량화 버전으로, 간단한 텍스트 툴팁을 표시할 때 사용합니다.

## Props

```typescript
interface Props {
    text: string; // 툴팁 텍스트
    position?: TooltipPosition; // 위치 (기본: 'top')
    visible?: boolean; // 표시 여부 (기본: false)
}
```

## 기본 사용법

```vue
<template>
    <div class="tooltip-container">
        <button
            @mouseover="showTooltip = true"
            @mouseleave="showTooltip = false"
        >
            버튼
        </button>
        <TooltipBalloon
            text="버튼을 클릭하세요"
            position="top"
            :visible="showTooltip"
        />
    </div>
</template>
```

---

# NodeTooltip

노드 요소용 전용 툴팁 컴포넌트입니다.

## 개요

NodeTooltip은 토폴로지나 관계 트리의 노드에 표시되는 전용 툴팁입니다. 노드의 메트릭 정보를 구조화된 형태로 표시합니다.

## Props

```typescript
interface Props {
    width: number; // 노드 너비
    x: number; // X 좌표
    y: number; // Y 좌표
    translateX: number; // X 변환값
    translateY: number; // Y 변환값
    data: NodeData; // 노드 데이터
    cursorNone?: boolean; // 커서 숨김
    scale?: number; // 스케일 (기본: 1)
    useSimpleTooltip?: boolean; // 간단한 툴팁 모드
}
```

## 기본 사용법

```vue
<template>
    <NodeTooltip
        :width="nodeWidth"
        :x="nodePosition.x"
        :y="nodePosition.y"
        :translate-x="viewportTranslateX"
        :translate-y="viewportTranslateY"
        :data="nodeData"
        :scale="currentScale"
        :use-simple-tooltip="false"
    />
</template>
```

---

# TextInNode

노드 내부에 표시되는 텍스트 컴포넌트입니다.

## 개요

TextInNode는 토폴로지나 관계 트리의 노드 내부에 텍스트를 표시하는 컴포넌트입니다. 텍스트 길이에 따른 자동 줄바꿈과 말줄임표를 지원합니다.

## Props

```typescript
interface Props {
    text: string; // 표시할 텍스트
    maxWidth?: number; // 최대 너비 (기본: 무제한)
    fontSize?: number; // 폰트 크기 (기본: 14px)
    textAlign?: 'left' | 'center' | 'right'; // 텍스트 정렬 (기본: 'center')
    ellipsis?: boolean; // 말줄임표 사용 (기본: true)
}
```

## 기본 사용법

```vue
<template>
    <div class="node">
        <TextInNode
            :text="nodeName"
            :max-width="120"
            :font-size="12"
            text-align="center"
            :ellipsis="true"
        />
    </div>
</template>

const nodeName = ref('Very Long Node Name That Should Be Truncated');
</script>
```

## 공통 사용 패턴

### 호버 툴팁 패턴

```vue
<template>
    <div
        class="interactive-element"
        @mouseenter="showTooltip = true"
        @mouseleave="showTooltip = false"
    >
        콘텐츠
        <PopoverBalloon
            v-if="showTooltip"
            :content="tooltipContent"
            position="top"
        />
    </div>
</template>
```

### 조건부 툴팁

```vue
<template>
    <div class="node-container">
        <TextInNode :text="nodeText" :max-width="100" />
        <NodeTooltip
            v-if="nodeText.length > 20"
            :data="nodeDetails"
            v-bind="tooltipProps"
        />
    </div>
</template>
```

## 의존성

-   Vue 3 Composition API
-   CSS Variables for theming

### File: j5-components/scale-controller.md

# ScaleController

차트나 캔버스 요소의 확대/축소를 제어하는 UI 컨트롤러 컴포넌트입니다. 마우스 휠, 터치 제스처, 버튼 클릭을 통한 스케일 조정을 지원합니다.

## 개요

ScaleController는 토폴로지 차트, 이미지 뷰어, 캔버스 기반 애플리케이션 등에서 사용할 수 있는 범용 스케일 컨트롤러입니다. 직관적인 UI와 다양한 입력 방식을 통해 사용자가 콘텐츠의 확대/축소를 쉽게 조절할 수 있습니다.

## 주요 특징

- **🎯 다양한 입력 지원**: 마우스 휠, 터치 핀치, 버튼 클릭
- **📱 터치 최적화**: 모바일 디바이스의 핀치 제스처 지원
- **🎨 위치 커스터마이징**: 4가지 코너 위치 선택 가능
- **⚙️ 완전 커스터마이징**: 크기, 마진, 아이콘 등 자유로운 스타일링
- **♿ 접근성**: 키보드 네비게이션과 스크린 리더 지원
- **🔧 이벤트 기반**: 유연한 스케일 로직 구현 가능

## Props Interface

```typescript
interface ScaleControllerProps {
  /** 컨트롤러 위치 (기본값: 'bottom-right') */
  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
  
  /** 컨트롤러 표시 여부 (기본값: true) */
  visible?: boolean;
  
  /** 마우스 휠 이벤트 활성화 여부 (기본값: true) */
  enableWheel?: boolean;
  
  /** 터치 이벤트 활성화 여부 (기본값: true) */
  enableTouch?: boolean;
  
  /** 버튼 크기 (기본값: 32px) */
  buttonSize?: number;
  
  /** 컨트롤러 마진 (기본값: 8px) */
  margin?: number;
}
```

## Events

```typescript
interface ScaleControllerEmits {
  /** 마우스 휠 이벤트 (확대/축소) */
  'wheel': [event: WheelEvent];
  
  /** '+' 버튼 클릭 (확대) */
  'clickUp': [];
  
  /** '-' 버튼 클릭 (축소) */
  'clickDown': [];
  
  /** '원복' 버튼 클릭 (초기 스케일로 복원) */
  'clickReset': [];
}
```

## 기본 사용법

```vue
<template>
  <div class="chart-container">
    <ScaleController
      position="bottom-right"
      :visible="true"
      @wheel="handleWheel"
      @click-up="handleZoomIn"
      @click-down="handleZoomOut"
      @click-reset="handleReset"
    >
      
      <canvas
        ref="chartCanvas"
        :width="canvasWidth"
        :height="canvasHeight"
        :style="{
          transform: `scale(${scale})`,
          transformOrigin: '0 0'
        }"
      />
    </ScaleController>
  </div>
</template>

const scale = ref<number>(1);
const minScale = 0.1;
const maxScale = 5;
const scaleStep = 0.1;

const handleWheel = (event: WheelEvent) => {
  const delta = event.deltaY > 0 ? -scaleStep : scaleStep;
  updateScale(scale.value + delta);
};

const handleZoomIn = () => {
  updateScale(scale.value + scaleStep);
};

const handleZoomOut = () => {
  updateScale(scale.value - scaleStep);
};

const handleReset = () => {
  updateScale(1);
};

const updateScale = (newScale: number) => {
  scale.value = Math.max(minScale, Math.min(maxScale, newScale));
};
</script>
```

## SVG 차트와 함께 사용

```vue
<template>
  <div class="svg-chart-container">
    <ScaleController
      position="top-right"
      :button-size="28"
      :margin="12"
      @wheel="handleWheel"
      @click-up="zoomIn"
      @click-down="zoomOut"
      @click-reset="resetZoom"
    >
      <svg
        ref="svgChart"
        :width="chartWidth"
        :height="chartHeight"
        :viewBox="`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`"
      >
        
        <g v-for="node in nodes" :key="node.id">
          <circle
            :cx="node.x"
            :cy="node.y"
            :r="node.radius"
            :fill="node.color"
          />
          <text
            :x="node.x"
            :y="node.y"
            text-anchor="middle"
            dominant-baseline="middle"
          >
            {{ node.label }}
          </text>
        </g>
        
        <g v-for="edge in edges" :key="edge.id">
          <line
            :x1="edge.source.x"
            :y1="edge.source.y"
            :x2="edge.target.x"
            :y2="edge.target.y"
            stroke="#999"
            stroke-width="2"
          />
        </g>
      </svg>
    </ScaleController>
  </div>
</template>

const chartWidth = 800;
const chartHeight = 600;
const viewBox = reactive({
  x: 0,
  y: 0,
  width: chartWidth,
  height: chartHeight
});

const baseViewBox = { ...viewBox };
const zoomLevel = ref<number>(1);

const handleWheel = (event: WheelEvent) => {
  const zoomFactor = event.deltaY > 0 ? 1.1 : 0.9;
  zoom(zoomFactor, event.offsetX, event.offsetY);
};

const zoomIn = () => {
  zoom(0.9, chartWidth / 2, chartHeight / 2);
};

const zoomOut = () => {
  zoom(1.1, chartWidth / 2, chartHeight / 2);
};

const resetZoom = () => {
  Object.assign(viewBox, baseViewBox);
  zoomLevel.value = 1;
};

const zoom = (factor: number, centerX: number, centerY: number) => {
  const newWidth = viewBox.width * factor;
  const newHeight = viewBox.height * factor;
  
  // 줌 제한
  if (newWidth > chartWidth * 10 || newWidth < chartWidth * 0.1) return;
  
  const dx = (newWidth - viewBox.width) * (centerX / chartWidth);
  const dy = (newHeight - viewBox.height) * (centerY / chartHeight);
  
  viewBox.x -= dx;
  viewBox.y -= dy;
  viewBox.width = newWidth;
  viewBox.height = newHeight;
  
  zoomLevel.value = chartWidth / viewBox.width;
};
</script>
```

## 토폴로지 차트와 통합

```vue
<template>
  <div class="topology-with-scale">
    <ScaleController
      position="bottom-left"
      :enable-wheel="true"
      :enable-touch="true"
      @wheel="handleTopologyWheel"
      @click-up="handleTopologyZoomIn"
      @click-down="handleTopologyZoomOut"
      @click-reset="handleTopologyReset"
    >
      <TopologyChart
        ref="topologyRef"
        :data="topologyData"
        :width="800"
        :height="600"
        :enable-auto-scale="false"
      />
    </ScaleController>
  </div>
</template>

const topologyRef = ref<InstanceType<typeof TopologyChart>>();

const handleTopologyWheel = (event: WheelEvent) => {
  if (!topologyRef.value) return;
  
  // TopologyChart의 내장 줌 기능 사용
  const zoomEvent = new WheelEvent('wheel', {
    deltaY: event.deltaY,
    clientX: event.clientX,
    clientY: event.clientY,
    bubbles: true,
    cancelable: true
  });
  
  topologyRef.value.$el.dispatchEvent(zoomEvent);
};

const handleTopologyZoomIn = () => {
  // 프로그래밍 방식으로 줌 인
  const wheelEvent = new WheelEvent('wheel', {
    deltaY: -100,
    bubbles: true,
    cancelable: true
  });
  
  topologyRef.value?.$el.dispatchEvent(wheelEvent);
};

const handleTopologyZoomOut = () => {
  // 프로그래밍 방식으로 줌 아웃
  const wheelEvent = new WheelEvent('wheel', {
    deltaY: 100,
    bubbles: true,
    cancelable: true
  });
  
  topologyRef.value?.$el.dispatchEvent(wheelEvent);
};

const handleTopologyReset = () => {
  // 토폴로지 차트 리셋 (차트의 내장 메서드 사용)
  topologyRef.value?.resetZoom();
};
</script>
```

## 터치 제스처 처리

```vue
<template>
  <ScaleController
    :enable-touch="true"
    @wheel="handlePinchZoom"
  >
    <div 
      class="touch-area"
      :style="{
        transform: `scale(${scale}) translate(${translateX}px, ${translateY}px)`,
        transformOrigin: '0 0'
      }"
    >
      
      <img src="/large-image.jpg" alt="확대/축소 가능한 이미지" />
    </div>
  </ScaleController>
</template>

const scale = ref<number>(1);
const translateX = ref<number>(0);
const translateY = ref<number>(0);

const handlePinchZoom = (event: WheelEvent) => {
  // 터치 핀치는 WheelEvent로 변환되어 전달됨
  const scaleFactor = event.deltaY > 0 ? 0.95 : 1.05;
  
  const newScale = scale.value * scaleFactor;
  
  // 스케일 제한
  if (newScale >= 0.5 && newScale <= 3) {
    scale.value = newScale;
  }
};
</script>
```

## 커스텀 스타일링

```vue
<template>
  <ScaleController
    position="top-left"
    :button-size="40"
    :margin="20"
    class="custom-scale-controller"
  >
    <slot />
  </ScaleController>
</template>

.custom-scale-controller :deep(.scale-controls__btn) {
  /* 버튼 스타일 커스터마이징 */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.custom-scale-controller :deep(.scale-controls__btn:hover) {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.custom-scale-controller :deep(.scale-controls__btn:active) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 다크 테마 지원 */
@media (prefers-color-scheme: dark) {
  .custom-scale-controller :deep(.scale-controls__btn) {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    border: 1px solid #4a5568;
  }
}
</style>
```

## 구성 요소

ScaleController는 다음 구성 요소들로 이루어져 있습니다:

### 버튼 종류
- **확대 버튼** (`+`): 스케일 증가
- **원복 버튼** (⛶): 초기 스케일로 복원  
- **축소 버튼** (`-`): 스케일 감소

### 이벤트 처리
- **마우스 휠**: 부드러운 확대/축소
- **터치 핀치**: 모바일 디바이스 지원
- **버튼 클릭**: 정확한 스케일 조정

### 설정 옵션
- **위치**: 4개 코너 중 선택
- **크기**: 버튼 크기와 마진 조정
- **활성화**: 개별 이벤트 타입 제어

## 의존성

- `@jennifersoft/vue-components-v2`: SvgIcon, ICON_TYPE
- Vue 3: Composition API 기반
- 터치 이벤트 지원을 위한 모던 브라우저

## 브라우저 지원

- Chrome 80+
- Firefox 75+  
- Safari 13+
- Edge 80+
- 모바일 브라우저 (iOS Safari, Android Chrome)

## 알려진 제한사항

1. **터치 인터페이스**: 복잡한 멀티터치 제스처는 제한적 지원
2. **성능**: 고해상도 캔버스에서 연속적인 스케일 변경 시 성능 저하 가능
3. **브라우저 호환성**: 일부 오래된 브라우저에서 터치 이벤트 지원 제한

## 활용 사례

1. **토폴로지 차트**: 네트워크 다이어그램 확대/축소
2. **이미지 뷰어**: 고해상도 이미지 상세 보기
3. **캔버스 에디터**: 그래픽 편집 도구의 줌 기능
4. **데이터 시각화**: 복잡한 차트의 상세 분석
5. **지도 애플리케이션**: 지도 영역 확대/축소
6. **게임 인터페이스**: 미니맵이나 전략 뷰어