'). | | `openOnHover` | `false`, `true` | `false` | 트리거에 마우스를 올려놓았을 때 메뉴도 열려야 하는지 여부입니다. | | `delay` | `number` | `100` | 메뉴가 열리기 전에 기다리는 시간입니다. 밀리초 단위로 지정합니다.

`openOnHover` prop이 필요합니다. | | `closeDelay` | `number` | `0` | 마우스가 떠났을 때 메뉴가 닫히기까지 대기하는 시간입니다. 밀리초 단위로 지정합니다.

`openOnHover` prop이 필요합니다. | ### Menu.PositionerPrimitive | Prop | Type | Default | Description | | ------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `id` | `string` | - | | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `finalFocus` | `false`, `true`, `RefObject`, `(closeType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 메뉴가 닫힐 때 집중할 요소를 결정합니다.
- `false`: 초점을 움직이지 마세요.
- `true`: 기본 동작(트리거 또는 이전에 집중된 요소)에 따라 초점을 이동합니다.
- `RefObject`: 초점을 참조 요소로 이동합니다.
- `기능`: 상호작용 유형(`마우스`, `터치`, `펜` 또는 `키보드`)으로 호출됩니다.
요소를 초점 맞추기 위해 `참`을, 기본 동작을 사용하기 위해 `참`을, 아무것도 하지 않기 위해 `거짓`/`정의되지 않음`을 반환합니다. | | `portalElement` | `ReactElement` | - | | | `positionerElement` | `ReactElement` | - | | #### Menu.PortalPrimitive | Prop | Type | Default | Description | | ------------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `keepMounted` | `false`, `true` | `false` | 팝업이 숨겨진 상태에서 포털을 DOM에 마운트할지 여부. | | `container` | `null`, `HTMLElement`, `ShadowRoot`, `RefObject` | - | 포털 요소를 렌더링하기 위해 상위 요소입니다. | #### Menu.PositionerPrimitive | Prop | Type | Default | Description | | -------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `sticky` | `false`, `true` | `false` | 앵커 요소가 뷰포트에서 스크롤되어 사라진 후에도 팝업을 뷰포트 내에 유지할지 여부입니다. | | `anchor` | `null`, `Element`, `VirtualElement`, `RefObject`, `() => Element \| VirtualElement \| null` | - | 팝업을 위치시킬 요소입니다.
기본적으로 팝업은 트리거를 기준으로 위치합니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `align` | `center`, `end`, `start` | `center` | 팝업을 지정된 측면에 상대적으로 정렬하는 방법입니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `positionMethod` | `absolute`, `fixed` | `absolute` | 어떤 CSS `위치` 속성을 사용할지 결정합니다. | | `side` | `bottom`, `left`, `right`, `top`, `inline-end`, `inline-start` | `bottom` | Anchor 요소의 어느 쪽에 팝업을 정렬할지 결정합니다.
충돌을 피하기 위해 자동으로 변경될 수 있습니다. | | `sideOffset` | `number`, `OffsetFunction` | `0` | 앵커와 팝업 사이의 거리(픽셀 단위).
또한 앵커의 치수를 읽기 위해 거리를 반환하는 기능도 허용합니다
포지셔너 요소와 그 측면 및 정렬.
함수는 다음 속성을 가진 '데이터' 객체 매개변수를 가져옵니다:
- 'data.anchor': '폭'과 '높이' 속성을 가진 앵커 요소의 치수.
- 'data.positioner': '폭'과 '높이' 속성을 가진 위치 요소의 치수.
- 'data.side': 포지셔너가 앵커 요소의 어느 쪽에 정렬되어 있는지를 나타냅니다.
- 'data.align': 지정된 변에 대해 위치 지정자가 정렬되는 방식. | | `alignOffset` | `number`, `OffsetFunction` | `0` | 정렬 축을 따라 추가 오프셋(픽셀 단위).
또한 오프셋을 반환하여 앵커의 치수를 읽는 기능도 허용합니다
포지셔너 요소와 그 측면 및 정렬.
함수는 다음 속성을 가진 '데이터' 객체 매개변수를 가져옵니다:
- 'data.anchor': '폭'과 '높이' 속성을 가진 앵커 요소의 치수.
- 'data.positioner': '폭'과 '높이' 속성을 가진 위치 요소의 치수.
- 'data.side': 포지셔너가 앵커 요소의 어느 쪽에 정렬되어 있는지를 나타냅니다.
- 'data.align': 지정된 변에 대해 위치 지정자가 정렬되는 방식. | | `collisionBoundary` | `Element`, `clipping-ancestors`, `Element[]`, `{ x: number; y: number; height: number; width: number; }` | `clipping-ancestors` | 팝업이 제한되는 영역을 구분하는 요소 또는 사각형입니다. | | `collisionPadding` | `number`, `{ bottom?: number \| undefined; left?: number \| undefined; right?: number \| undefined; top?: number \| undefined; }` | `5` | 충돌 경계의 가장자리에서 유지할 추가 공간입니다. | | `arrowPadding` | `number` | `5` | 화살표와 팝업 가장자리 사이에 유지할 최소 거리입니다.

화살표 요소가 팝업의 둥근 모서리 밖으로 튀어나오는 것을 방지하는 데 사용합니다. | | `trackAnchor` | `false`, `true` | `true` | 팝업이 위치 지정 앵커의 레이아웃 이동을 추적하는지 여부입니다. | | `collisionAvoidance` | `SideFlipMode`, `SideShiftMode` | - | 팝업을 위치 지정할 때 충돌을 처리하는 방법을 결정합니다. | #### Menu.PopupPrimitive | Prop | Type | Default | Description | | ------------ | --------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `id` | `string` | - | | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `finalFocus` | `false`, `true`, `RefObject`, `(closeType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 메뉴가 닫힐 때 포커스를 이동할 요소를 결정합니다.

- `false`: 포커스를 이동하지 않습니다.
- `true`: 기본 동작(트리거 또는 이전에 포커스된 요소)을 기준으로 포커스를 이동합니다.
- `RefObject`: 참조 요소로 포커스를 이동합니다.
- `function`: 상호작용 유형(`mouse`, `touch`, `pen`, 또는 `keyboard`)과 함께 호출됩니다.
포커스를 이동할 요소를 반환하거나, 기본 동작을 사용하려면 `true`, 아무 작업도 하지 않으려면 `false` 또는 `undefined`를 반환합니다. | ### Menu.CheckboxItemIndicatorPrimitive | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------- | | `label` | `string` | - | 키보드 텍스트 탐색 중에 항목이 일치할 때 사용할 텍스트 레이블을 재정의합니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `id` | `string` | - | | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `onClick` | `MouseEventHandler` | - | 메뉴 항목에 대한 클릭 핸들러입니다. | | `disabled` | `false`, `true` | `false` | 컴포넌트가 사용자 상호작용을 무시해야 하는지 여부입니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `false` | 컴포넌트가 `render` 속성을 통해 대체될 때 네이티브 `<button>` 요소를 렌더링할지 여부입니다.
렌더링된 요소가 네이티브 버튼인 경우 `true`로 설정하세요. | | `closeOnClick` | `false`, `true` | `true` | 항목이 클릭될 때 메뉴를 닫을지 여부입니다. | ### Menu.RadioItemIndicatorPrimitive | Prop | Type | Default | Description | | ------------- | ------------------------------------ | ------------ | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `orientation` | `horizontal`, `vertical` | `horizontal` | 구분자의 방향입니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Menu.Group | Prop | Type | Default | Description | | ----------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | 컴포넌트의 내용입니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Menu.GroupLabel | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Menu.SubmenuRoot | Prop | Type | Default | Description | | ---------------------- | -------------------------------------------------------------------------------------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `orientation` | `horizontal`, `vertical` | `vertical` | 메뉴의 시각적 방향.
회전 초점이 위쪽/아래쪽 화살표 키를 사용하는지 왼쪽/오른쪽 화살표 키를 사용하는지 제어합니다. | | **children** | `undefined`, `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `loop` | `false`, `true` | `true` | 키보드 포커스를 화살표 키를 사용하여 목록 끝에 도달했을 때 첫 번째 항목으로 다시 루프할지 여부입니다. | | `disabled` | `false`, `true` | `false` | 컴포넌트가 사용자 상호작용을 무시해야 하는지 여부입니다. | | `open` | `false`, `true` | - | 메뉴가 현재 열려 있는지 여부입니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `defaultOpen` | `false`, `true` | `false` | 메뉴가 처음에 열려 있는지 여부입니다.

제어되는 메뉴를 렌더링하려면 대신 `open` 속성을 사용하세요. | | `onOpenChange` | `(open: boolean, eventDetails: ChangeEventDetails) => void` | - | 메뉴가 열리거나 닫힐 때 호출되는 이벤트 핸들러입니다. | | `onOpenChangeComplete` | `(open: boolean) => void` | - | 메뉴가 닫힐 때 애니메이션이 완료된 후 호출되는 이벤트 핸들러입니다. | | `delay` | `number` | `100` | 메뉴가 호버될 때 열리기 전에 대기하는 시간입니다. 밀리초 단위로 지정합니다.

`openOnHover` 속성이 필요합니다. | | `closeDelay` | `number` | `0` | 메뉴가 호버되어 열렸을 때 닫히기 전에 대기하는 시간입니다. 밀리초 단위로 지정합니다.

`openOnHover` 속성이 필요합니다. | | `openOnHover` | `false`, `true` | `true` | 서브메뉴가 트리거에 마우스를 올렸을 때 열릴지 여부입니다. | | `actionsRef` | `RefObject` | - | 명령적 행동에 대한 참조.
- `unmount`: 지정되면 메뉴를 닫았을 때 언마운트되지 않습니다.
대신 메뉴를 수동으로 마운트 해제하려면 'unmount' 기능을 호출해야 합니다.
메뉴의 애니메이션이 외부 라이브러리에 의해 제어될 때 유용합니다.
- `close`: 지정하면 메뉴를 긴급하게 닫을 수 있습니다. | ### Menu.SubmenuTriggerItem | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- | | `label` | `string` | - | 키보드 텍스트 탐색 중 항목이 일치할 때 사용할 텍스트 레이블을 재정의합니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `id` | `string` | - | | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `onClick` | `MouseEventHandler` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `false` | 구성 요소가 교체할 때 네이티브 `<button>` 요소를 렌더링하는지 여부
`render` 소품을 통해.
렌더링된 요소가 네이티브 버튼인 경우 `true`로 설정합니다. | ### Menu.SubmenuPopup | Prop | Type | Default | Description | | ------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `id` | `string` | - | | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `finalFocus` | `false`, `true`, `RefObject`, `(closeType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 메뉴가 닫힐 때 포커스를 이동할 요소를 결정합니다.

- `false`: 포커스를 이동하지 않습니다.
- `true`: 기본 동작에 따라 포커스를 이동합니다 (트리거 또는 이전에 포커스된 요소).
- `RefObject`: ref 요소로 포커스를 이동합니다.
- `function`: 인터랙션 타입(`mouse`, `touch`, `pen`, 또는 `keyboard`)과 함께 호출됩니다.
포커스할 요소를 반환하거나, `true`를 반환하여 기본 동작을 사용하거나, `false`/`undefined`를 반환하여 아무 작업도 수행하지 않습니다. | | `portalElement` | `ReactElement` | - | | | `positionerElement` | `ReactElement` | - | | #### Menu.SubmenuPopupPrimitive | Prop | Type | Default | Description | | ------------ | --------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `id` | `string` | - | | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `finalFocus` | `false`, `true`, `RefObject`, `(closeType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 메뉴가 닫힐 때 포커스할 요소를 결정합니다.

- `false`: 포커스를 이동하지 않습니다.
- `true`: 기본 동작에 따라 포커스를 이동합니다(트리거 또는 이전에 포커스된 요소).
- `RefObject`: ref 요소로 포커스를 이동합니다.
- `function`: 인터랙션 타입(`mouse`, `touch`, `pen`, 또는 `keyboard`)과 함께 호출됩니다.
포커스할 요소를 반환하거나, 기본 동작을 사용하려면 `true`를, 아무 작업도 하지 않으려면 `false`/`undefined`를 반환합니다. | ### Menu.CheckboxItem | Prop | Type | Default | Description | | ----------------- | -------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------- | | `label` | `string` | - | 키보드 텍스트 탐색 중 항목이 일치할 때 사용할 텍스트 레이블을 재정의합니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `id` | `string` | - | | | `onClick` | `MouseEventHandler` | - | 메뉴 항목의 클릭 핸들러입니다. | | `defaultChecked` | `false`, `true` | `false` | 체크박스 항목이 초기에 선택되어 있는지 여부입니다.

제어 컴포넌트로 렌더링하려면 `checked` prop을 대신 사용하세요. | | `disabled` | `false`, `true` | `false` | 컴포넌트가 사용자 상호작용을 무시할지 여부입니다. | | `checked` | `false`, `true` | - | 체크박스 항목이 현재 선택되어 있는지 여부입니다.

비제어 컴포넌트로 렌더링하려면 `defaultChecked` prop을 대신 사용하세요. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `false` | `render` prop을 통해 요소를 교체할 때 컴포넌트가 네이티브 `<button>` 요소로 렌더링되는지 여부입니다.
렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정하세요. | | `closeOnClick` | `false`, `true` | `false` | 항목을 클릭했을 때 메뉴를 닫을지 여부입니다. | | `onCheckedChange` | `(checked: boolean, eventDetails: ChangeEventDetails) => void` | - | 체크박스 항목이 선택되거나 선택 해제될 때 호출되는 이벤트 핸들러입니다. | #### Menu.CheckboxItemPrimitive | Prop | Type | Default | Description | | ----------------- | -------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------- | | `label` | `string` | - | 키보드 텍스트 탐색 중 항목이 일치할 때 사용할 텍스트 레이블을 재정의합니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `id` | `string` | - | | | `onClick` | `MouseEventHandler` | - | 메뉴 항목의 클릭 핸들러입니다. | | `defaultChecked` | `false`, `true` | `false` | 체크박스 항목이 초기에 선택되어 있는지 여부입니다.

제어 컴포넌트로 렌더링하려면 `checked` prop을 대신 사용하세요. | | `disabled` | `false`, `true` | `false` | 컴포넌트가 사용자 상호작용을 무시할지 여부입니다. | | `checked` | `false`, `true` | - | 체크박스 항목이 현재 선택되어 있는지 여부입니다.

비제어 컴포넌트로 렌더링하려면 `defaultChecked` prop을 대신 사용하세요. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `false` | `render` prop을 통해 요소를 교체할 때 컴포넌트가 네이티브 `<button>` 요소로 렌더링되는지 여부입니다.
렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정하세요. | | `closeOnClick` | `false`, `true` | `false` | 항목을 클릭했을 때 메뉴를 닫을지 여부입니다. | | `onCheckedChange` | `(checked: boolean, eventDetails: ChangeEventDetails) => void` | - | 체크박스 항목이 선택되거나 선택 해제될 때 호출되는 이벤트 핸들러입니다. | #### Menu.CheckboxItemIndicatorPrimitive | Prop | Type | Default | Description | | ------------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `keepMounted` | `false`, `true` | `false` | 체크박스 항목이 선택되지 않았을 때 HTML 요소를 DOM에 유지할지 여부입니다. | ### Menu.RadioGroup | Prop | Type | Default | Description | | --------------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | 컴포넌트의 콘텐츠입니다. | | `defaultValue` | `any` | - | 초기에 선택되어야 하는 라디오 항목의 비제어 값입니다.

제어 컴포넌트로 렌더링하려면 `value` prop을 대신 사용하세요. | | `disabled` | `false`, `true` | `false` | 컴포넌트가 사용자 상호작용을 무시할지 여부입니다. | | `value` | `any` | - | 현재 선택되어야 하는 라디오 항목의 제어 값입니다.

비제어 컴포넌트로 렌더링하려면 `defaultValue` prop을 대신 사용하세요. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `onValueChange` | `(value: any, eventDetails: ChangeEventDetails) => void` | - | 선택된 값이 변경될 때 호출되는 함수입니다. | ### Menu.RadioItem | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------- | | `label` | `string` | - | 키보드 텍스트 탐색 중 항목이 일치할 때 사용할 텍스트 레이블을 재정의합니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `id` | `string` | - | | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `onClick` | `MouseEventHandler` | - | 메뉴 항목의 클릭 핸들러입니다. | | `disabled` | `false`, `true` | `false` | 컴포넌트가 사용자 상호작용을 무시할지 여부입니다. | | **value** | `any` | - | 라디오 항목의 값입니다.
이 값은 항목이 선택될 때 MenuRadioGroup에 설정됩니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `false` | `render` prop을 통해 요소를 교체할 때 컴포넌트가 네이티브 `<button>` 요소로 렌더링되는지 여부입니다.
렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정하세요. | | `closeOnClick` | `false`, `true` | - | 항목을 클릭했을 때 메뉴를 닫을지 여부입니다. | #### Menu.RadioItemPrimitive | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------- | | `label` | `string` | - | 키보드 텍스트 탐색 중 항목이 일치할 때 사용할 텍스트 레이블을 재정의합니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `id` | `string` | - | | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `onClick` | `MouseEventHandler` | - | 메뉴 항목의 클릭 핸들러입니다. | | `disabled` | `false`, `true` | `false` | 컴포넌트가 사용자 상호작용을 무시할지 여부입니다. | | **value** | `any` | - | 라디오 항목의 값입니다.
이 값은 항목이 선택될 때 MenuRadioGroup에 설정됩니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `false` | `render` prop을 통해 요소를 교체할 때 컴포넌트가 네이티브 `<button>` 요소로 렌더링되는지 여부입니다.
렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정하세요. | | `closeOnClick` | `false`, `true` | - | 항목을 클릭했을 때 메뉴를 닫을지 여부입니다. | #### Menu.RadioItemIndicatorPrimitive | Prop | Type | Default | Description | | ------------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `keepMounted` | `false`, `true` | `false` | 라디오 항목이 비활성화되어 있을 때 HTML 요소를 DOM에 유지할지 여부입니다. | --- version: 1.0.0 --- # MultiSelect URL: /docs/components/multi-select Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/multi-select.mdx MultiSelect는 사용자가 여러 옵션 중에서 다중 선택할 수 있는 드롭다운 컴포넌트입니다. 선택된 값들은 배지 형태로 표시되며, 태그 선택, 필터링, 카테고리 선택 등에 사용됩니다. *** title: 'MultiSelect' site\_name: 'MultiSelect - Vapor Core' description: 'MultiSelect는 사용자가 여러 옵션 중에서 다중 선택할 수 있는 드롭다운 컴포넌트입니다. 선택된 값들은 배지 형태로 표시되며, 태그 선택, 필터링, 카테고리 선택 등에 사용됩니다.' ----------------------------------------------------------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/multi-select/default-multi-select.tsx", "codeblock": true } ``` ## Property *** ### Size MultiSelect의 크기를 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/multi-select/multi-select-size.tsx", "codeblock": true } ``` ### Controlled State MultiSelect의 선택 상태를 제어합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/multi-select/multi-select-controlled.tsx", "codeblock": true } ``` ### States MultiSelect의 다양한 상태를 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/multi-select/multi-select-states.tsx", "codeblock": true } ``` ## Examples *** ### Items Configuration 다양한 형태의 아이템 데이터를 사용합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/multi-select/multi-select-items.tsx", "codeblock": true } ``` ### Grouping Options 옵션을 그룹으로 묶어 구조화합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/multi-select/multi-select-grouping.tsx", "codeblock": true } ``` ### Custom Value Display MultiSelect.Value에 함수형 children을 제공하여 선택된 값들의 표시 방법을 커스터마이징할 수 있습니다. 기본적으로는 배지 형태로 표시되지만, 문자열이나 커스텀 컴포넌트로 변경할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/multi-select/multi-select-custom-value.tsx", "codeblock": true } ``` ## Props Table *** ### MultiSelect.Root | Prop | Type | Default | Description | | ---------------------- | ------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | `id` | `string` | - | 셀렉트 컴포넌트의 고유 식별자 | | `name` | `string` | - | 폼 제출 시 필드를 식별하는 이름 | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `defaultValue` | `null`, `Value[]` | `null` | 컴포넌트가 처음 렌더링될 때의 비제어 값입니다.

제어 컴포넌트로 사용하려면 `value` prop을 대신 사용하세요. | | `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 | | `value` | `Value[]` | - | 셀렉트의 현재 선택된 값 배열 | | `open` | `false`, `true` | - | 셀렉트 팝업의 현재 열림 상태 | | `readOnly` | `false`, `true` | `false` | 사용자가 셀렉트 팝업에서 다른 옵션을 선택할 수 없도록 할지 여부 | | `required` | `false`, `true` | `false` | 폼 제출 전 값을 반드시 선택해야 하는지 여부 | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `onValueChange` | `(value: Value[], eventDetails: ChangeEventDetails) => void` | - | 셀렉트 값이 변경될 때 호출되는 콜백. 제어 컴포넌트에서 사용 | | `inputRef` | `null`, `(instance: HTMLInputElement \| null) => void`, `RefObject` | - | 숨겨진 input 요소에 접근하기 위한 ref | | `defaultOpen` | `false`, `true` | `false` | select 팝업의 초기 열림 상태 (비제어 컴포넌트)

제어 컴포넌트로 사용하려면 `open` prop을 사용하세요. | | `onOpenChange` | `(open: boolean, eventDetails: ChangeEventDetails) => void` | - | 셀렉트 팝업이 열리거나 닫힐 때 호출되는 이벤트 핸들러 | | `onOpenChangeComplete` | `(open: boolean) => void` | - | 셀렉트 팝업이 열리거나 닫힌 후 애니메이션이 완료되면 호출되는 이벤트 핸들러 | | `modal` | `false`, `true` | `true` | select 열림 시 모달 상태 진입 여부
- `true`: select로 상호작용이 제한됩니다. 문서 스크롤이 잠기고 외부 요소와의 포인터 상호작용이 비활성화됩니다.
- `false`: 문서의 나머지 부분과 상호작용이 가능합니다. | | `actionsRef` | `RefObject` | - | 명령형 동작을 위한 ref
- `unmount`: 지정 시 select가 닫힐 때 언마운트되지 않습니다. 대신 수동으로 `unmount` 함수를 호출해야 합니다.
외부 라이브러리로 애니메이션을 제어할 때 유용합니다. | | `items` | `Record`, `readonly { label: ReactNode; value: Value; }[]` | - | select 팝업에 렌더링되는 아이템 데이터 구조
지정 시 `<Select.Value>`가 원시 값 대신 선택된 아이템의 라벨을 렌더링합니다. | | `itemToStringLabel` | `(itemValue: Value) => string` | - | 아이템 값이 객체인 경우(`<Select.Item value={object}>`) 트리거에 표시하기 위해 객체 값을 문자열로 변환하는 함수
객체 형태가 `{ value, label }`이면 이 prop 없이도 자동으로 라벨이 사용됩니다. | | `itemToStringValue` | `(itemValue: Value) => string` | - | 아이템 값이 객체인 경우(`<Select.Item value={object}>`) 폼 제출을 위해 객체 값을 문자열로 변환하는 함수
객체 형태가 `{ value, label }`이면 이 prop 없이도 자동으로 값이 사용됩니다. | | `isItemEqualToValue` | `(itemValue: Value, value: Value) => boolean` | - | select 아이템 값이 현재 선택된 값과 일치하는지 판단하는 커스텀 비교 로직
참조가 다른 객체 값을 사용할 때 유용합니다. 기본값은 `Object.is` 비교입니다. | | `size` | `sm`, `md`, `lg`, `xl` | - | | | `invalid` | `false`, `true` | - | | ### MultiSelect.Trigger | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | 트리거 버튼 내부에 렌더링할 콘텐츠 | | `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `false` | render prop으로 교체할 때 네이티브 `<button>` 엘리먼트를 렌더링할지 여부
렌더링되는 요소가 네이티브 버튼이면 `true`로 설정하세요. | #### MultiSelect.TriggerPrimitive | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | 트리거 버튼 내부에 렌더링할 콘텐츠 | | `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `false` | render prop으로 교체할 때 네이티브 `<button>` 엘리먼트를 렌더링할지 여부
렌더링되는 요소가 네이티브 버튼이면 `true`로 설정하세요. | #### MultiSelect.TriggerIconPrimitive | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | #### MultiSelect.ValuePrimitive | Prop | Type | Default | Description | | ----------- | ------------------------------------------------------------------------------------------------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal`, `(value: any) => ReactNode` | - | 선택된 값의 포맷을 지정하는 `ReactNode`를 반환하는 함수를 받습니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | #### MultiSelect.PlaceholderPrimitive | Prop | Type | Default | Description | | -------- | -------------- | ------- | ---------------------------------------------------------------------------------------------- | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### MultiSelect.Popup | Prop | Type | Default | Description | | ------------------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `portalElement` | `ReactElement` | - | 커스텀 포털 요소. 기본값은 PortalPrimitive입니다. | | `positionerElement` | `ReactElement` | - | 커스텀 포지셔너 요소. 기본값은 PositionerPrimitive입니다. | #### MultiSelect.PortalPrimitive | Prop | Type | Default | Description | | ----------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `container` | `null`, `HTMLElement`, `ShadowRoot`, `RefObject` | - | 포털 요소를 렌더링할 부모 요소 | #### MultiSelect.PositionerPrimitive | Prop | Type | Default | Description | | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `sticky` | `false`, `true` | `false` | 앵커 요소가 뷰포트에서 벗어난 후에도 팝업을 뷰포트 내에 유지할지 여부 | | `anchor` | `null`, `Element`, `VirtualElement`, `RefObject`, `() => Element \| VirtualElement \| null` | - | 팝업을 위치시킬 기준 요소
기본적으로 팝업은 트리거를 기준으로 위치합니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `align` | `center`, `end`, `start` | `center` | 지정된 방향에 대한 팝업의 정렬 방법 | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `alignItemWithTrigger` | `false`, `true` | `true` | 선택된 아이템의 텍스트가 트리거의 값 텍스트와 정렬되도록 포지셔너가 트리거를 덮을지 여부
마우스 입력에만 적용되며 공간이 부족하면 자동으로 비활성화됩니다. | | `positionMethod` | `absolute`, `fixed` | `absolute` | 사용할 CSS `position` 속성을 결정 | | `side` | `bottom`, `left`, `right`, `top`, `inline-end`, `inline-start` | `bottom` | 앵커 요소의 어느 방향에 팝업을 정렬할지
충돌을 피하기 위해 자동으로 변경될 수 있습니다. | | `sideOffset` | `number`, `OffsetFunction` | `0` | 앵커와 팝업 사이의 거리 (픽셀)
앵커와 포지셔너 요소의 크기, 방향, 정렬을 읽어 거리를 반환하는 함수도 가능합니다.

함수는 다음 속성을 가진 `data` 객체를 받습니다:
- `data.anchor`: 앵커 요소의 `width`와 `height`
- `data.positioner`: 포지셔너 요소의 `width`와 `height`
- `data.side`: 앵커 요소의 어느 방향에 정렬되어 있는지
- `data.align`: 지정된 방향에 대한 정렬 방법 | | `alignOffset` | `number`, `OffsetFunction` | `0` | 정렬 축을 따른 추가 오프셋 (픽셀)
앵커와 포지셔너 요소의 크기, 방향, 정렬을 읽어 오프셋을 반환하는 함수도 가능합니다.

함수는 다음 속성을 가진 `data` 객체를 받습니다:
- `data.anchor`: 앵커 요소의 `width`와 `height`
- `data.positioner`: 포지셔너 요소의 `width`와 `height`
- `data.side`: 앵커 요소의 어느 방향에 정렬되어 있는지
- `data.align`: 지정된 방향에 대한 정렬 방법 | | `collisionBoundary` | `Element`, `clipping-ancestors`, `Element[]`, `{ x: number; y: number; height: number; width: number; }` | `clipping-ancestors` | 팝업이 제한되는 영역을 정의하는 요소 또는 사각형 | | `collisionPadding` | `number`, `{ bottom?: number \| undefined; left?: number \| undefined; right?: number \| undefined; top?: number \| undefined; }` | `5` | 충돌 경계 가장자리로부터 유지할 추가 여백 | | `arrowPadding` | `number` | `5` | 화살표와 팝업 가장자리 사이의 최소 거리

팝업의 둥근 모서리에서 화살표가 튀어나오는 것을 방지합니다. | | `trackAnchor` | `false`, `true` | `true` | 팝업이 앵커의 레이아웃 변화를 추적할지 여부 | | `collisionAvoidance` | `SideFlipMode`, `SideShiftMode` | - | 팝업 위치 지정 시 충돌 처리 방법을 결정 | #### MultiSelect.PopupPrimitive | Prop | Type | Default | Description | | ----------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### MultiSelect.Item | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ | | `label` | `string` | - | 키보드 텍스트 탐색 시 항목을 매칭하는 데 사용할 텍스트 레이블을 지정합니다.

제공되지 않으면 항목의 텍스트 콘텐츠가 기본값으로 사용됩니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 | | `value` | `any` | `null` | 이 셀렉트 항목을 식별하는 고유 값 | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `false` | render prop으로 교체할 때 네이티브 `<button>` 엘리먼트를 렌더링할지 여부
렌더링되는 요소가 네이티브 버튼이면 `true`로 설정하세요. | #### MultiSelect.ItemPrimitive | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ | | `label` | `string` | - | 키보드 텍스트 탐색 시 항목을 매칭하는 데 사용할 텍스트 레이블을 지정합니다.

제공되지 않으면 항목의 텍스트 콘텐츠가 기본값으로 사용됩니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 | | `value` | `any` | `null` | 이 셀렉트 항목을 식별하는 고유 값 | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `false` | render prop으로 교체할 때 네이티브 `<button>` 엘리먼트를 렌더링할지 여부
렌더링되는 요소가 네이티브 버튼이면 `true`로 설정하세요. | #### MultiSelect.ItemIndicatorPrimitive | Prop | Type | Default | Description | | ------------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `keepMounted` | `false`, `true` | `false` | 항목이 선택되지 않았을 때도 HTML 요소를 DOM에 유지할지 여부 | ### MultiSelect.Separator | Prop | Type | Default | Description | | ------------- | ------------------------------------ | ------------ | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `orientation` | `horizontal`, `vertical` | `horizontal` | 구분선 방향 | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### MultiSelect.Group | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### MultiSelect.GroupLabel | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | --- version: 1.0.0 --- # NavigationMenu URL: /docs/components/navigation-menu Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/navigation-menu.mdx 여러 콘텐츠 섹션 간에 전환할 수 있도록 돕는 요소로 클릭 시 페이지가 이동합니다. *** title: 'NavigationMenu' site\_name: 'NavigationMenu - Vapor Core' description: '여러 콘텐츠 섹션 간에 전환할 수 있도록 돕는 요소로 클릭 시 페이지가 이동합니다.' ------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/navigation-menu/default-navigation-menu.tsx", "codeblock": true } ``` ## Property *** ### Size NavigationMenu의 크기를 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/navigation-menu/navigation-menu-size.tsx", "codeblock": true } ``` ### Direction NavigationMenu의 방향을 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/navigation-menu/navigation-menu-direction.tsx", "codeblock": true } ``` ### Disabled NavigationMenu의 비활성화 상태를 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/navigation-menu/navigation-menu-disabled.tsx", "codeblock": true } ``` ### Current NavigationMenu의 현재 페이지 상태를 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/navigation-menu/navigation-menu-current.tsx", "codeblock": true } ``` ## Examples *** ### With Icons 아이콘과 함께 사용합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/navigation-menu/navigation-menu-with-icon.tsx", "codeblock": true } ``` ### With Popup 팝오버 형태로 사용합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/navigation-menu/with-popup.tsx", "codeblock": true } ``` ### Flexible Usage NavigationMenu의 모든 프리셋 컴포넌트를 분리하여 사용합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/navigation-menu/flexible.tsx", "codeblock": true } ``` ## Props Table *** ### NavigationMenu.Root | Prop | Type | Default | Description | | ---------------------- | -------------------------------------------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | | `direction` | `horizontal`, `vertical` | - | | | `stretch` | `false`, `true` | - | | | `size` | `sm`, `md`, `lg`, `xl` | - | | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `orientation` | `horizontal`, `vertical` | `horizontal` | 네비게이션 메뉴의 방향을 지정합니다. | | **aria-label** | `string` | - | 현재 요소를 설명하는 레이블 문자열을 정의합니다. 스크린 리더 사용자를 위한 접근성 속성입니다. | | `defaultValue` | `any` | `null` | 초기에 선택되어야 하는 항목의 비제어 값입니다.

제어 방식의 네비게이션 메뉴를 렌더링하려면 `value` prop을 대신 사용하세요. | | `disabled` | `false`, `true` | - | | | `value` | `any` | `null` | 현재 열려있어야 하는 네비게이션 메뉴 항목의 제어 값입니다.
값이 null이 아닐 때 메뉴가 열리고, null일 때 메뉴가 닫힙니다.

비제어 방식의 네비게이션 메뉴를 렌더링하려면 `defaultValue` prop을 대신 사용하세요. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `actionsRef` | `RefObject` | - | 명령형 작업을 위한 ref입니다. | | `onOpenChangeComplete` | `(open: boolean) => void` | - | 네비게이션 메뉴가 닫힐 때 모든 애니메이션이 완료된 후 호출되는 이벤트 핸들러입니다. | | `onValueChange` | `(value: any, eventDetails: ChangeEventDetails) => void` | - | 값이 변경될 때 호출되는 콜백 함수입니다. | | `delay` | `number` | `50` | 네비게이션 메뉴를 열기 전에 대기하는 시간입니다. 밀리초 단위로 지정됩니다. | | `closeDelay` | `number` | `50` | 네비게이션 메뉴를 닫기 전에 대기하는 시간입니다. 밀리초 단위로 지정됩니다. | ### NavigationMenu.List | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### NavigationMenu.Item | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `value` | `any` | - | 이 네비게이션 메뉴 항목을 식별하는 고유 값입니다.
값이 제공되지 않으면 고유 ID가 자동으로 생성됩니다.
프로그래밍 방식으로 네비게이션 메뉴를 제어할 때 사용합니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### NavigationMenu.Link | Prop | Type | Default | Description | | -------------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `current` | `false`, `true` | - | 현재 페이지임을 나타냅니다. true일 경우 aria-current='page'가 설정됩니다. | | `disabled` | `false`, `true` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `closeOnClick` | `false`, `true` | `false` | 링크를 클릭했을 때 네비게이션 메뉴를 닫을지 여부를 결정합니다. | ### NavigationMenu.Trigger | Prop | Type | Default | Description | | -------------- | ------------------------------------ | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `true` | Whether the component renders a native `<button>` element when replacing it
via the `render` prop.
Set to `false` if the rendered element is not a button (e.g. `<div>`). | #### NavigationMenu.TriggerPrimitive | Prop | Type | Default | Description | | -------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------ | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `true` | `render` prop을 통해 요소를 교체할 때 컴포넌트가 네이티브 `<button>` 요소를 렌더링할지 여부를 결정합니다.
렌더링된 요소가 버튼이 아니면(예: `<div>`) `false`로 설정하세요. | #### NavigationMenu.TriggerIndicatorPrimitive | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### NavigationMenu.Content | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | #### NavigationMenu.PortalPrimitive | Prop | Type | Default | Description | | ------------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `container` | `null`, `HTMLElement`, `RefObject` | - | 포털 요소를 렌더링할 부모 요소입니다. | | `keepMounted` | `false`, `true` | `false` | 팝업이 숨겨져 있는 동안 DOM에 포털을 마운트된 상태로 유지할지 여부를 결정합니다. | #### NavigationMenu.PositionerPrimitive | Prop | Type | Default | Description | | -------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `sticky` | `false`, `true` | `false` | 앵커 요소가 화면 밖으로 스크롤된 후에도 팝업을 뷰포트 내에 유지할지 여부를 결정합니다. | | `anchor` | `null`, `Element`, `VirtualElement`, `RefObject`, `() => Element \| VirtualElement \| null` | - | 팝업을 배치할 기준 요소입니다.
기본적으로 팝업은 트리거를 기준으로 배치됩니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `align` | `center`, `end`, `start` | `center` | 지정된 방향을 기준으로 팝업을 정렬하는 방법을 결정합니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `positionMethod` | `absolute`, `fixed` | `absolute` | 사용할 CSS `position` 속성을 결정합니다. | | `side` | `bottom`, `left`, `right`, `top`, `inline-end`, `inline-start` | `bottom` | 팝업을 앵커 요소의 어느 쪽에 정렬할지 결정합니다.
충돌을 피하기 위해 자동으로 변경될 수 있습니다. | | `sideOffset` | `number`, `OffsetFunction` | `0` | 앵커와 팝업 사이의 거리(픽셀)입니다.
또한 앵커와 포지셔너 요소의 크기, 방향, 정렬을 읽어 거리를 반환하는 함수도 허용합니다.

함수는 다음 속성을 가진 `data` 객체 매개변수를 받습니다:
- `data.anchor`: `width`와 `height` 속성을 가진 앵커 요소의 크기
- `data.positioner`: `width`와 `height` 속성을 가진 포지셔너 요소의 크기
- `data.side`: 포지셔너가 앵커 요소의 어느 쪽에 정렬되어 있는지
- `data.align`: 지정된 방향을 기준으로 포지셔너가 어떻게 정렬되어 있는지 | | `alignOffset` | `number`, `OffsetFunction` | `0` | 정렬 축을 따라 추가되는 오프셋(픽셀)입니다.
또한 앵커와 포지셔너 요소의 크기, 방향, 정렬을 읽어 오프셋을 반환하는 함수도 허용합니다.

함수는 다음 속성을 가진 `data` 객체 매개변수를 받습니다:
- `data.anchor`: `width`와 `height` 속성을 가진 앵커 요소의 크기
- `data.positioner`: `width`와 `height` 속성을 가진 포지셔너 요소의 크기
- `data.side`: 포지셔너가 앵커 요소의 어느 쪽에 정렬되어 있는지
- `data.align`: 지정된 방향을 기준으로 포지셔너가 어떻게 정렬되어 있는지 | | `collisionBoundary` | `Element`, `clipping-ancestors`, `Element[]`, `{ x: number; y: number; height: number; width: number; }` | `clipping-ancestors` | 팝업이 제한되는 영역을 구분하는 요소 또는 사각형입니다. | | `collisionPadding` | `number`, `{ bottom?: number \| undefined; left?: number \| undefined; right?: number \| undefined; top?: number \| undefined; }` | `5` | 충돌 경계 가장자리로부터 유지할 추가 공간입니다. | | `arrowPadding` | `number` | `5` | 화살표와 팝업 가장자리 사이에 유지할 최소 거리입니다.

화살표 요소가 팝업의 둥근 모서리 밖으로 나가는 것을 방지하는 데 사용합니다. | | `trackAnchor` | `false`, `true` | `true` | 팝업이 위치 지정 앵커의 레이아웃 변경을 추적할지 여부를 결정합니다. | | `collisionAvoidance` | `SideFlipMode`, `SideShiftMode` | - | 팝업 위치 지정 시 충돌을 처리하는 방법을 결정합니다. | #### NavigationMenu.PopupPrimitive | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### NavigationMenu.Viewport | Prop | Type | Default | Description | | ------------------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `portalElement` | `ReactElement` | - | | | `positionerElement` | `ReactElement` | - | | | `popupElement` | `ReactElement` | - | | #### NavigationMenu.ViewportPrimitive | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | --- version: 1.0.0 --- # Pagination URL: /docs/components/pagination Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/pagination.mdx Pagination은 콘텐츠를 페이지 단위로 탐색할 수 있도록 돕는 네비게이션 컴포넌트입니다. *** title: 'Pagination' site\_name: 'Pagination - Vapor Core' description: 'Pagination은 콘텐츠를 페이지 단위로 탐색할 수 있도록 돕는 네비게이션 컴포넌트입니다.' ------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/pagination/default-pagination.tsx", "codeblock": true } ``` ## Property ### Sibling Count Pagination에서 현재 페이지 주변에 표시할 페이지 번호의 개수를 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/pagination/pagination-sibling-count.tsx", "codeblock": true } ``` ### Boundary Count Pagination의 시작과 끝에 항상 표시할 페이지 번호의 개수를 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/pagination/pagination-boundary-count.tsx", "codeblock": true } ``` ### Disabled Pagination 버튼들의 비활성화 여부를 결정하는 옵션입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/pagination/pagination-disabled.tsx", "codeblock": true } ``` ### Size Pagination의 크기를 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/pagination/pagination-size.tsx", "codeblock": true } ``` ## Examples ### Controlled Pagination 컴포넌트를 제어 컴포넌트로 사용하는 예시입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/pagination/pagination-controlled.tsx", "codeblock": true } ``` *** ### Pagination.Root | Prop | Type | Default | Description | | --------------- | ---------------------- | ------- | ---------------------------------------------- | | `defaultPage` | `number` | `1` | 초기 렌더링 시 활성화되어야 하는 페이지 번호입니다. | | `page` | `number` | `-` | 활성화할 페이지의 제어된 값입니다. onPageChange와 함께 사용해야 합니다. | | `onPageChange` | `function` | `-` | 값이 변경될 때 호출되는 이벤트 핸들러입니다. | | `size` | `sm`, `md`, `lg`, `xl` | `md` | Pagination의 높이·타이포그래피 크기 등을 제어합니다. | | `disabled` | `boolean` | `false` | Pagination의 비활성화 여부를 설정합니다. | | `totalPages` | `number` | `1` | 화면에 표시할 전체 페이지 수를 설정합니다. | | `siblingCount` | `number` | `1` | 현재 페이지 양쪽에 표시할 페이지 번호의 개수를 설정합니다. | | `boundaryCount` | `number` | `1` | 처음과 마지막에 표시할 페이지 번호의 개수를 설정합니다. | | `children` | `ReactNode` | `-` | 네비게이션 메뉴의 자식 컴포넌트들입니다. | --- version: 1.0.0 --- # Popover URL: /docs/components/popover Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/popover.mdx Popover는 트리거 요소 근처에 부가 정보나 상호작용 콘텐츠를 표시하는 오버레이 컴포넌트입니다. 툴팁, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다. *** title: 'Popover' site\_name: 'Popover - Vapor Core' description: 'Popover는 트리거 요소 근처에 부가 정보나 상호작용 콘텐츠를 표시하는 오버레이 컴포넌트입니다. 툴팁, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다.' ------------------------------------------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/popover/default-popover.tsx", "codeblock": true } ``` ## Property *** ### PositionerProps Popover가 나타날 위치와 정렬을 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/popover/popover-positioning.tsx", "codeblock": true } ``` ### Offset Popover와 트리거 간의 거리를 조정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/popover/popover-offset.tsx", "codeblock": true } ``` ## Examples *** ### Content Variations 간단한 텍스트부터 복잡한 상호작용 요소까지 다양한 콘텐츠를 표시합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/popover/popover-content.tsx", "codeblock": true } ``` ## Props Table *** ### Popover.Root | Prop | Type | Default | Description | | ---------------------- | ------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `open` | `false`, `true` | - | 팝오버의 현재 열림/닫힘 상태를 제어합니다.

제어되는 팝오버를 렌더링하려면 대신 `open` prop을 사용하세요. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `defaultOpen` | `false`, `true` | `false` | 팝오버가 처음에 열려 있는지 여부를 지정합니다.

제어되는 팝오버를 렌더링하려면 대신 `open` prop을 사용하세요. | | `onOpenChange` | `(open: boolean, eventDetails: ChangeEventDetails) => void` | - | 팝오버가 열리거나 닫힐 때 호출되는 이벤트 핸들러 | | `onOpenChangeComplete` | `(open: boolean) => void` | - | 팝오버가 열리거나 닫힌 후 애니메이션이 완료되면 호출되는 이벤트 핸들러 | | `actionsRef` | `RefObject` | - | 명령형 액션에 대한 ref입니다.
- `unmount`: 지정된 경우, 팝오버가 닫힐 때 언마운트되지 않습니다.
대신 `unmount` 함수를 호출하여 팝오버를 수동으로 언마운트해야 합니다.
외부 라이브러리에서 팝오버의 애니메이션을 제어할 때 유용합니다. | | `modal` | `false`, `true`, `trap-focus` | `false` | 팝오버가 열릴 때 모달 상태에 들어가는지 여부를 결정합니다.
- `true`: 사용자 상호작용이 팝오버로 제한됩니다: 문서 페이지 스크롤이 잠기고, 외부 요소에 대한 포인터 상호작용이 비활성화됩니다.
- `false`: 문서의 나머지 부분과의 사용자 상호작용이 허용됩니다.
- `'trap-focus'`: 포커스가 팝오버 내부에 갇히지만, 문서 페이지 스크롤은 잠기지 않고 외부에 대한 포인터 상호작용은 계속 활성화됩니다. | ### Popover.Trigger | Prop | Type | Default | Description | | -------------- | ------------------------------------ | ------- | ----------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `true` | render prop으로 교체할 때 네이티브 `<button>` 요소를 렌더링할지 여부
렌더링되는 요소가 버튼이 아닌 경우(예: `<div>`) `false`로 설정하세요. | | `openOnHover` | `false`, `true` | `false` | 트리거 요소에 마우스를 올렸을 때 팝오버가 열릴지 여부입니다. | | `delay` | `number` | `300` | 트리거 요소에 마우스를 올렸을 때 팝오버가 열리기까지 대기하는 시간입니다. 밀리초 단위로 지정합니다.

`openOnHover` prop이 필요합니다. | | `closeDelay` | `number` | `0` | 트리거 요소에서 마우스가 떠났을 때 팝오버가 닫히기까지 대기하는 시간입니다. 밀리초 단위로 지정합니다.

`openOnHover` prop이 필요합니다. | ### Popover.Popup | Prop | Type | Default | Description | | ------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `initialFocus` | `false`, `true`, `RefObject`, `(openType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 팝오버가 열릴 때 집중할 요소를 결정합니다.
- 'false': 초점을 움직이지 마세요.
- 'true': 기본 동작(첫 번째 탭 가능 요소 또는 팝업)에 따라 초점을 이동합니다.
- 'RefObject': 초점을 참조 요소로 이동합니다.
- 'function': 상호작용 유형('마우스', '터치', '펜' 또는 '키보드')으로 호출됩니다.
요소를 초점 맞추기 위해 'true'을, 기본 동작을 사용하기 위해 'true'을, 아무것도 하지 않기 위해 'false'/'undefined'을 반환합니다. | | `finalFocus` | `false`, `true`, `RefObject`, `(closeType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 팝오버가 닫혔을 때 집중할 요소를 결정합니다.
- 'false': 초점을 움직이지 마세요.
- 'true': 기본 동작(트리거 또는 이전에 집중된 요소)에 따라 초점을 이동합니다.
- 'RefObject': 초점을 참조 요소로 이동합니다.
- 'function': 상호작용 유형('마우스', '터치', '펜' 또는 '키보드')으로 호출됩니다.
요소를 초점 맞추기 위해 'true'을, 기본 동작을 사용하기 위해 'true'을, 아무것도 하지 않기 위해 'false'/'undefined'을 반환합니다. | | `portalElement` | `ReactElement` | - | | | `positionerElement` | `ReactElement` | - | | #### Popover.PortalPrimitive | Prop | Type | Default | Description | | ------------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `keepMounted` | `false`, `true` | `false` | 팝업이 숨겨진 동안 포탈을 DOM에 유지할지 여부 | | `container` | `null`, `HTMLElement`, `ShadowRoot`, `RefObject` | - | 포털 요소를 렌더링할 부모 요소 | #### Popover.PositionerPrimitive | Prop | Type | Default | Description | | -------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `sticky` | `false`, `true` | `false` | 앵커 요소가 뷰포트에서 벗어난 후에도 팝업을 뷰포트 내에 유지할지 여부 | | `anchor` | `null`, `Element`, `VirtualElement`, `RefObject`, `() => Element \| VirtualElement \| null` | - | 팝업을 위치시킬 기준 요소
기본적으로 팝업은 트리거를 기준으로 위치합니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `align` | `center`, `end`, `start` | `center` | 지정된 방향에 대한 팝업의 정렬 방법 | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `positionMethod` | `absolute`, `fixed` | `absolute` | 사용할 CSS `position` 속성을 결정 | | `side` | `bottom`, `left`, `right`, `top`, `inline-end`, `inline-start` | `bottom` | 앵커 요소의 어느 방향에 팝업을 정렬할지
충돌을 피하기 위해 자동으로 변경될 수 있습니다. | | `sideOffset` | `number`, `OffsetFunction` | `0` | 앵커와 팝업 사이의 거리 (픽셀)
앵커와 포지셔너 요소의 크기, 방향, 정렬을 읽어 거리를 반환하는 함수도 가능합니다.

함수는 다음 속성을 가진 `data` 객체를 받습니다:
- `data.anchor`: 앵커 요소의 `width`와 `height`
- `data.positioner`: 포지셔너 요소의 `width`와 `height`
- `data.side`: 앵커 요소의 어느 방향에 정렬되어 있는지
- `data.align`: 지정된 방향에 대한 정렬 방법 | | `alignOffset` | `number`, `OffsetFunction` | `0` | 정렬 축을 따른 추가 오프셋 (픽셀)
앵커와 포지셔너 요소의 크기, 방향, 정렬을 읽어 오프셋을 반환하는 함수도 가능합니다.

함수는 다음 속성을 가진 `data` 객체를 받습니다:
- `data.anchor`: 앵커 요소의 `width`와 `height`
- `data.positioner`: 포지셔너 요소의 `width`와 `height`
- `data.side`: 앵커 요소의 어느 방향에 정렬되어 있는지
- `data.align`: 지정된 방향에 대한 정렬 방법 | | `collisionBoundary` | `Element`, `clipping-ancestors`, `Element[]`, `{ x: number; y: number; height: number; width: number; }` | `clipping-ancestors` | 팝업이 제한되는 영역을 정의하는 요소 또는 사각형 | | `collisionPadding` | `number`, `{ bottom?: number \| undefined; left?: number \| undefined; right?: number \| undefined; top?: number \| undefined; }` | `5` | 충돌 경계 가장자리로부터 유지할 추가 여백 | | `arrowPadding` | `number` | `5` | 화살표와 팝업 가장자리 사이의 최소 거리

팝업의 둥근 모서리에서 화살표가 튀어나오는 것을 방지합니다. | | `trackAnchor` | `false`, `true` | `true` | 팝업이 앵커의 레이아웃 변화를 추적할지 여부 | | `collisionAvoidance` | `SideFlipMode`, `SideShiftMode` | - | 팝업 위치 지정 시 충돌 처리 방법을 결정 | #### Popover.PopupPrimitive | Prop | Type | Default | Description | | -------------- | --------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `initialFocus` | `false`, `true`, `RefObject`, `(openType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 팝오버가 열릴 때 집중할 요소를 결정합니다.
- 'false': 초점을 움직이지 마세요.
- 'true': 기본 동작(첫 번째 탭 가능 요소 또는 팝업)에 따라 초점을 이동합니다.
- 'RefObject': 초점을 참조 요소로 이동합니다.
- 'function': 상호작용 유형('마우스', '터치', '펜' 또는 '키보드')으로 호출됩니다.
요소를 초점 맞추기 위해 'true'을, 기본 동작을 사용하기 위해 'true'을, 아무것도 하지 않기 위해 'false'/'undefined'을 반환합니다. | | `finalFocus` | `false`, `true`, `RefObject`, `(closeType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 팝오버가 닫혔을 때 집중할 요소를 결정합니다.
- 'false': 초점을 움직이지 마세요.
- 'true': 기본 동작(트리거 또는 이전에 집중된 요소)에 따라 초점을 이동합니다.
- 'RefObject': 초점을 참조 요소로 이동합니다.
- 'function': 상호작용 유형('마우스', '터치', '펜' 또는 '키보드')으로 호출됩니다.
요소를 초점 맞추기 위해 'true'을, 기본 동작을 사용하기 위해 'true'을, 아무것도 하지 않기 위해 'false'/'undefined'을 반환합니다. | ### Popover.Title | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Popover.Description | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Popover.Close | Prop | Type | Default | Description | | -------------- | ------------------------------------ | ------- | ----------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `true` | render prop으로 교체할 때 네이티브 `<button>` 요소를 렌더링할지 여부
렌더링되는 요소가 버튼이 아닌 경우(예: `<div>`) `false`로 설정하세요. | --- version: 1.0.0 --- # RadioCard URL: /docs/components/radio-card Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/radio-card.mdx RadioCard는 RadioGroup과 함께 사용하는 카드 형태의 라디오 버튼 컴포넌트입니다. 선택 가능한 옵션을 카드 UI로 표현하여 더 직관적인 사용자 경험을 제공합니다. *** title: 'RadioCard' site\_name: 'RadioCard - Vapor Core' description: 'RadioCard는 RadioGroup과 함께 사용하는 카드 형태의 라디오 버튼 컴포넌트입니다. 선택 가능한 옵션을 카드 UI로 표현하여 더 직관적인 사용자 경험을 제공합니다.' ----------------------------------------------------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/radio-card/default-radio-card.tsx", "codeblock": true } ``` ## Property *** ### Disabled 사용자가 상호작용할 수 없는 상태입니다. 액션을 수행하기 위한 특정 조건을 충족하지 않았거나 일시적으로 기능을 제한하려는 상황에서 사용합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/radio-card/radio-card-disabled.tsx", "codeblock": true } ``` ### Read Only 읽기 전용 상태로, 사용자가 값을 변경할 수 없지만 현재 선택된 상태를 확인할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/radio-card/radio-card-readonly.tsx", "codeblock": true } ``` ## Examples *** ### Simple Usage RadioGroup.Root와 함께 사용합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/radio-card/radio-card-simple.tsx", "codeblock": true } ``` ### Direction VStack과 HStack을 사용하여 세로 및 가로 방향으로 배치합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/radio-card/radio-card-direction.tsx", "codeblock": true } ``` ### With Rich Content RadioCard는 고정된 높이가 없어 다양한 콘텐츠를 포함할 수 있습니다. 텍스트, 아이콘, 가격 정보 등 복잡한 레이아웃을 자유롭게 구성할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/radio-card/radio-card-with-content.tsx", "codeblock": true } ``` ## Props Table *** ### RadioCard | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 | | **value** | `any` | - | 라디오 그룹 내에서 고유한 식별 값 | | `readOnly` | `false`, `true` | `false` | 사용자가 라디오 버튼을 선택할 수 없도록 할지 여부 | | `required` | `false`, `true` | `false` | 폼 제출 전 값을 반드시 선택해야 하는지 여부 | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `inputRef` | `null`, `(instance: HTMLInputElement \| null) => void`, `RefObject` | - | 숨겨진 input 요소에 접근하기 위한 ref | | `nativeButton` | `false`, `true` | `true` | render prop으로 교체할 때 네이티브 `<button>` 요소를 렌더링할지 여부
렌더링되는 요소가 버튼이 아닌 경우(예: `<div>`) `false`로 설정하세요. | | `invalid` | `false`, `true` | `false` | | --- version: 1.0.0 --- # Radio URL: /docs/components/radio Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/radio.mdx Radio는 여러 옵션 중 하나만 선택할 수 있는 입력 컴포넌트입니다. RadioGroup과 함께 사용하여 라디오 버튼 그룹을 구성할 수 있습니다. *** title: 'Radio' site\_name: 'Radio - Vapor Core' description: 'Radio는 여러 옵션 중 하나만 선택할 수 있는 입력 컴포넌트입니다. RadioGroup과 함께 사용하여 라디오 버튼 그룹을 구성할 수 있습니다.' ------------------------------------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/radio-group/default-radio-group.tsx", "codeblock": true } ``` ## Property *** ### Size RadioGroup의 크기를 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/radio-group/radio-group-size.tsx", "codeblock": true } ``` ### Disabled RadioGroup의 비활성화 상태를 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/radio-group/radio-group-disabled.tsx", "codeblock": true } ``` ### Read Only RadioGroup의 읽기 전용 상태입니다. 사용자가 값을 변경할 수 없지만 현재 선택된 상태를 확인할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/radio-group/radio-readonly.tsx", "codeblock": true } ``` ## Examples *** ### Direction Radio 그룹의 방향을 조절할 수 있습니다. VStack과 HStack을 사용하여 세로 및 가로 방향으로 배치할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/radio-group/radio-direction.tsx", "codeblock": true } ``` ### Flexible Radio의 유연한 사용예시입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/radio-group/flexible.tsx", "codeblock": true } ``` ## Props Table *** ### RadioGroup.Root | Prop | Type | Default | Description | | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `size` | `md`, `lg` | - | | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `name` | `string` | - | 폼 제출 시 필드를 식별하는 이름 | | `defaultValue` | `unknown` | - | The uncontrolled value of the radio button that should be initially selected.

To render a controlled radio group, use the `value` prop instead. | | `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 | | `value` | `unknown` | - | The controlled value of the radio item that should be currently selected.

To render an uncontrolled radio group, use the `defaultValue` prop instead. | | `readOnly` | `false`, `true` | `false` | Whether the user should be unable to select a different radio button in the group. | | `required` | `false`, `true` | `false` | 폼 제출 전 값을 반드시 선택해야 하는지 여부 | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `onValueChange` | `(value: unknown, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; }) => void` | - | 값이 변경될 때 호출되는 콜백 | | `inputRef` | `null`, `(instance: HTMLInputElement \| null) => void`, `RefObject` | - | 숨겨진 input 요소에 접근하기 위한 ref | | `invalid` | `false`, `true` | - | | ### RadioGroup.Label | Prop | Type | Default | Description | | -------- | -------------- | ------- | ---------------------------------------------------------------------------------------------- | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Radio.Root | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------- | | `size` | `md`, `lg` | - | | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 | | **value** | `any` | - | 라디오 그룹 내에서 고유한 식별 값 | | `readOnly` | `false`, `true` | `false` | 사용자가 라디오 버튼을 선택할 수 없도록 할지 여부 | | `required` | `false`, `true` | `false` | 폼 제출 전 값을 반드시 선택해야 하는지 여부 | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `inputRef` | `null`, `(instance: HTMLInputElement \| null) => void`, `RefObject` | - | 숨겨진 input 요소에 접근하기 위한 ref | | `nativeButton` | `false`, `true` | `true` | render prop으로 교체할 때 네이티브 `<button>` 요소를 렌더링할지 여부
렌더링되는 요소가 버튼이 아닌 경우(예: `<div>`) `false`로 설정하세요. | | `invalid` | `false`, `true` | - | | ### Radio.IndicatorPrimitive | Prop | Type | Default | Description | | ------------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `keepMounted` | `false`, `true` | `false` | 라디오 버튼이 비활성화되었을 때 HTML 요소를 DOM에 유지할지 여부 | --- version: 1.0.0 --- # Select URL: /docs/components/select Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/select.mdx Select는 사용자가 여러 옵션 중에서 하나를 선택할 수 있는 드롭다운 컴포넌트입니다. 폼 입력, 설정 선택, 필터링 등에 사용되며, 키보드 내비게이션과 접근성을 완벽하게 지원합니다. *** title: 'Select' site\_name: 'Select - Vapor Core' description: 'Select는 사용자가 여러 옵션 중에서 하나를 선택할 수 있는 드롭다운 컴포넌트입니다. 폼 입력, 설정 선택, 필터링 등에 사용되며, 키보드 내비게이션과 접근성을 완벽하게 지원합니다.' ---------------------------------------------------------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/select/default-select.tsx", "codeblock": true } ``` ## Property *** ### Size Select의 크기를 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/select/select-size.tsx", "codeblock": true } ``` ### Positioning Select 드롭다운이 나타날 위치를 설정합니다. 기본값은 'bottom'입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/select/select-positioning.tsx", "codeblock": true } ``` ### Controlled State Select의 선택 상태를 외부에서 제어합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/select/select-controlled.tsx", "codeblock": true } ``` ### States Select의 다양한 상태(비활성화, 읽기 전용, 오류)를 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/select/select-states.tsx", "codeblock": true } ``` ## Examples *** ### Items Configuration 배열 형태와 객체 형태의 아이템 데이터를 모두 지원합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/select/select-items.tsx", "codeblock": true } ``` ### Grouping Options 관련된 옵션들을 그룹으로 묶어 구조화할 수 있습니다. Group과 GroupLabel, Separator를 사용하여 명확한 구조를 만들 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/select/select-grouping.tsx", "codeblock": true } ``` ### Custom Value Display Select.Value에 함수형 children을 제공하여 선택된 값을 커스터마이징할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/select/select-custom-value.tsx", "codeblock": true } ``` ## Props Table *** ### Select.Root | Prop | Type | Default | Description | | ---------------------- | ------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `id` | `string` | - | Select의 id | | `name` | `string` | - | 폼 제출 시 필드를 식별하는 이름 | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `defaultValue` | `unknown` | `null` | 처음 렌더링될 때 select의 비제어 값입니다.

제어 컴포넌트로 렌더링하려면 `value` prop을 대신 사용하세요. | | `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 | | `value` | `unknown` | - | select의 현재 값 | | `open` | `false`, `true` | - | select 팝업의 현재 열림 상태 | | `readOnly` | `false`, `true` | `false` | 사용자가 select 팝업에서 다른 옵션을 선택할 수 없도록 할지 여부 | | `required` | `false`, `true` | `false` | 폼 제출 전 값을 반드시 선택해야 하는지 여부 | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `onValueChange` | `(value: unknown, eventDetails: ChangeEventDetails) => void` | - | Select의 값이 변경될 때 호출되는 콜백입니다. 제어 컴포넌트에서 사용합니다. | | `inputRef` | `null`, `(instance: HTMLInputElement \| null) => void`, `RefObject` | - | 숨겨진 input 요소에 접근하기 위한 ref | | `defaultOpen` | `false`, `true` | `false` | Select 팝업의 초기 열림 상태입니다.

제어 컴포넌트로 렌더링하려면 `open` prop을 대신 사용하세요. | | `onOpenChange` | `(open: boolean, eventDetails: ChangeEventDetails) => void` | - | Select 팝업이 열리거나 닫힐 때 호출되는 이벤트 핸들러입니다. | | `onOpenChangeComplete` | `(open: boolean) => void` | - | 셀렉트 팝업이 열리거나 닫힌 후 애니메이션이 완료되면 호출되는 이벤트 핸들러 | | `modal` | `false`, `true` | `true` | Select가 열릴 때 모달 상태로 진입할지 결정합니다.
- `true`: 사용자 상호작용이 Select로 제한됩니다. 문서 스크롤이 잠기고 외부 요소에 대한 포인터 상호작용이 비활성화됩니다.
- `false`: 문서의 나머지 부분과의 사용자 상호작용이 허용됩니다. | | `actionsRef` | `RefObject` | - | 명령형 액션을 위한 ref입니다.
- `unmount`: 지정되면, Select가 닫힐 때 언마운트되지 않습니다.
대신 `unmount` 함수를 수동으로 호출해야 합니다.
Select의 애니메이션이 외부 라이브러리에 의해 제어될 때 유용합니다. | | `items` | `Record`, `readonly { label: ReactNode; value: unknown; }[]` | - | Select 팝업에 렌더링되는 아이템 데이터 구조입니다.
지정시 `<Select.Value>`가 원시 값 대신 선택된 아이템의 라벨을 렌더링합니다. | | `itemToStringLabel` | `(itemValue: unknown) => string` | - | 아이템 값이 객체인 경우(`<Select.Item value={object}>`) 트리거에 표시하기 위해 객체 값을 문자열로 변환하는 함수입니다.
객체 형태가 `{ value, label }`이면 이 prop 없이도 자동으로 라벨이 사용됩니다. | | `itemToStringValue` | `(itemValue: unknown) => string` | - | 아이템 값이 객체인 경우(`<Select.Item value={object}>`) 폼 제출을 위해 객체 값을 문자열로 변환하는 함수입니다.
객체 형태가 `{ value, label }`이면 이 prop 없이도 자동으로 값이 사용됩니다. | | `isItemEqualToValue` | `(itemValue: unknown, value: unknown) => boolean` | - | Select 아이템 값이 현재 선택된 값과 일치하는지 판단하는 커스텀 비교 로직입니다.
참조가 다른 객체 값을 사용할 때 유용합니다. 기본값은 `Object.is` 비교입니다. | | `size` | `sm`, `md`, `lg`, `xl` | - | Select의 크기 | | `invalid` | `false`, `true` | - | Select가 유효하지 않은 상태인지 여부 | ### Select.Trigger | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `false` | render prop으로 교체할 때 네이티브 `<button>` 엘리먼트를 렌더링할지 여부
렌더링되는 요소가 네이티브 버튼이면 `true`로 설정하세요. | #### Select.ValuePrimitive | Prop | Type | Default | Description | | ----------- | ------------------------------------------------------------------------------------------------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal`, `(value: any) => ReactNode` | - | 선택된 값의 포맷을 지정하는 `ReactNode`를 반환하는 함수를 받습니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | #### Select.PlaceholderPrimitive | Prop | Type | Default | Description | | -------- | -------------- | ------- | ---------------------------------------------------------------------------------------------- | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | #### Select.TriggerIconPrimitive | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Select.Popup | Prop | Type | Default | Description | | ------------------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `portalElement` | `ReactElement` | - | 사용자 정의 Portal 요소 | | `positionerElement` | `ReactElement` | - | 사용자 정의 Positioner 요소 | #### Select.PositionerPrimitive | Prop | Type | Default | Description | | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `sticky` | `false`, `true` | `false` | 앵커 요소가 뷰포트에서 벗어난 후에도 팝업을 뷰포트 내에 유지할지 여부 | | `anchor` | `null`, `Element`, `VirtualElement`, `RefObject`, `() => Element \| VirtualElement \| null` | - | 팝업을 위치시킬 기준 요소
기본적으로 팝업은 트리거를 기준으로 위치합니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `align` | `center`, `end`, `start` | `center` | 지정된 방향에 대한 팝업의 정렬 방법 | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `alignItemWithTrigger` | `false`, `true` | `true` | 선택된 아이템의 텍스트가 트리거의 값 텍스트와 정렬되도록 포지셔너가 트리거를 덮을지 여부
마우스 입력에만 적용되며 공간이 부족하면 자동으로 비활성화됩니다. | | `positionMethod` | `absolute`, `fixed` | `absolute` | 사용할 CSS `position` 속성을 결정 | | `side` | `bottom`, `left`, `right`, `top`, `inline-end`, `inline-start` | `bottom` | 앵커 요소의 어느 방향에 팝업을 정렬할지
충돌을 피하기 위해 자동으로 변경될 수 있습니다. | | `sideOffset` | `number`, `OffsetFunction` | `0` | 앵커와 팝업 사이의 거리 (픽셀)
앵커와 포지셔너 요소의 크기, 방향, 정렬을 읽어 거리를 반환하는 함수도 가능합니다.

함수는 다음 속성을 가진 `data` 객체를 받습니다:
- `data.anchor`: 앵커 요소의 `width`와 `height`
- `data.positioner`: 포지셔너 요소의 `width`와 `height`
- `data.side`: 앵커 요소의 어느 방향에 정렬되어 있는지
- `data.align`: 지정된 방향에 대한 정렬 방법 | | `alignOffset` | `number`, `OffsetFunction` | `0` | 정렬 축을 따른 추가 오프셋 (픽셀)
앵커와 포지셔너 요소의 크기, 방향, 정렬을 읽어 오프셋을 반환하는 함수도 가능합니다.

함수는 다음 속성을 가진 `data` 객체를 받습니다:
- `data.anchor`: 앵커 요소의 `width`와 `height`
- `data.positioner`: 포지셔너 요소의 `width`와 `height`
- `data.side`: 앵커 요소의 어느 방향에 정렬되어 있는지
- `data.align`: 지정된 방향에 대한 정렬 방법 | | `collisionBoundary` | `Element`, `clipping-ancestors`, `Element[]`, `{ x: number; y: number; height: number; width: number; }` | `clipping-ancestors` | 팝업이 제한되는 영역을 정의하는 요소 또는 사각형 | | `collisionPadding` | `number`, `{ bottom?: number \| undefined; left?: number \| undefined; right?: number \| undefined; top?: number \| undefined; }` | `5` | 충돌 경계 가장자리로부터 유지할 추가 여백 | | `arrowPadding` | `number` | `5` | 화살표와 팝업 가장자리 사이의 최소 거리

팝업의 둥근 모서리에서 화살표가 튀어나오는 것을 방지합니다. | | `trackAnchor` | `false`, `true` | `true` | 팝업이 앵커의 레이아웃 변화를 추적할지 여부 | | `collisionAvoidance` | `SideFlipMode`, `SideShiftMode` | - | 팝업 위치 지정 시 충돌 처리 방법을 결정 | #### Select.PopupPrimitive | Prop | Type | Default | Description | | ----------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Select.Item | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ | | `label` | `string` | - | 키보드 텍스트 네비게이션 중 항목이 매칭될 때 사용할 텍스트 라벨을 지정합니다.

제공되지 않으면 항목의 텍스트 콘텐츠가 기본값으로 사용됩니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 | | `value` | `any` | `null` | 이 셀렉트 항목을 식별하는 고유 값 | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `false` | render prop으로 교체할 때 네이티브 `<button>` 엘리먼트를 렌더링할지 여부
렌더링되는 요소가 네이티브 버튼이면 `true`로 설정하세요. | #### Select.ItemPrimitive | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------ | | `label` | `string` | - | 키보드 텍스트 내비게이션 중 아이템이 일치할 때 사용할 텍스트 라벨을 지정합니다.

제공되지 않으면 아이템 텍스트 콘텐츠가 기본값으로 사용됩니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 | | `value` | `any` | `null` | 이 셀렉트 항목을 식별하는 고유 값 | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `false` | render prop으로 교체할 때 네이티브 `<button>` 엘리먼트를 렌더링할지 여부
렌더링되는 요소가 네이티브 버튼이면 `true`로 설정하세요. | #### Select.ItemIndicatorPrimitive | Prop | Type | Default | Description | | ------------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `keepMounted` | `false`, `true` | `false` | 아이템이 선택되지 않았을 때 HTML 요소를 DOM에 유지할지 여부입니다. | ### Select.Group | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Select.GroupLabel | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Select.Separator | Prop | Type | Default | Description | | ------------- | ------------------------------------ | ------------ | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `orientation` | `horizontal`, `vertical` | `horizontal` | 구분선 방향 | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | --- version: 1.0.0 --- # Sheet URL: /docs/components/sheet Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/sheet.mdx Sheet는 화면의 가장자리에서 슬라이드되어 나타나는 오버레이 컴포넌트입니다. 사이드바, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다. *** title: 'Sheet' site\_name: 'Sheet - Vapor Core' description: 'Sheet는 화면의 가장자리에서 슬라이드되어 나타나는 오버레이 컴포넌트입니다. 사이드바, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다.' --------------------------------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/sheet/default-sheet.tsx", "codeblock": true } ``` ## Property *** ### Side Sheet가 나타날 위치를 설정합니다. 기본값은 'right'입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/sheet/sheet-side.tsx", "codeblock": true } ``` ### Controlled State Sheet의 열림/닫힘 상태를 외부에서 제어합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/sheet/sheet-controlled.tsx", "codeblock": true } ``` ### Keep Mounted Sheet가 닫혀도 DOM에서 제거되지 않고 유지되도록 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/sheet/sheet-keep-mounted.tsx", "codeblock": true } ``` ## Examples *** ### Custom Usage 유연하게 Sheet를 사용합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/sheet/sheet-flexible.tsx", "codeblock": true } ``` ## Props Table *** ### Sheet.Root | Prop | Type | Default | Description | | ---------------------- | ------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `open` | `false`, `true` | - | 다이얼로그가 현재 열려 있는지 여부 | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `defaultOpen` | `false`, `true` | `false` | 다이얼로그의 초기 열림 상태입니다.

제어 컴포넌트로 렌더링하려면 `open` prop을 대신 사용하세요. | | `modal` | `false`, `true`, `trap-focus` | `true` | 다이얼로그가 열릴 때 모달 상태로 전환할지 결정합니다.
- `true`: 사용자 상호작용이 다이얼로그로 제한됩니다: 포커스가 트랩되고, 문서 페이지 스크롤이 잠기며, 외부 요소에 대한 포인터 상호작용이 비활성화됩니다.
- `false`: 문서의 나머지 부분과의 사용자 상호작용이 허용됩니다.
- `'trap-focus'`: 포커스는 다이얼로그 내부에 트랩되지만, 문서 페이지 스크롤은 잠기지 않고 외부 포인터 상호작용은 활성화됩니다. | | `onOpenChange` | `(open: boolean, eventDetails: ChangeEventDetails) => void` | - | 다이얼로그가 열리거나 닫힐 때 호출되는 이벤트 핸들러 | | `onOpenChangeComplete` | `(open: boolean) => void` | - | 다이얼로그가 열리거나 닫힌 후 애니메이션이 완료되면 호출되는 이벤트 핸들러 | | `actionsRef` | `RefObject` | - | 명령형 액션을 위한 ref입니다.
- `unmount`: 지정되면, 다이얼로그가 닫혀도 언마운트되지 않습니다.
대신 `unmount` 함수를 호출하여 수동으로 다이얼로그를 언마운트해야 합니다.
다이얼로그의 애니메이션이 외부 라이브러리에 의해 제어될 때 유용합니다. | | `closeOnClickOverlay` | `false`, `true` | - | 오버레이 클릭 시 닫기 여부 | ### Sheet.Trigger | Prop | Type | Default | Description | | -------------- | ------------------------------------ | ------- | ----------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `true` | render prop으로 교체할 때 네이티브 `<button>` 요소를 렌더링할지 여부
렌더링되는 요소가 버튼이 아닌 경우(예: `<div>`) `false`로 설정하세요. | ### Sheet.Popup | Prop | Type | Default | Description | | ------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `initialFocus` | `false`, `true`, `RefObject`, `(openType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 다이얼로그가 열릴 때 포커스할 요소를 결정합니다.

- `false`: 포커스를 이동하지 않습니다.
- `true`: 기본 동작에 따라 포커스를 이동합니다 (첫 번째 탭 가능 요소 또는 팝업).
- `RefObject`: ref 요소로 포커스를 이동합니다.
- `function`: 상호작용 유형(`mouse`, `touch`, `pen` 또는 `keyboard`)과 함께 호출됩니다.
포커스할 요소를 반환하거나, 기본 동작을 사용하려면 `true`를, 아무 작업도 하지 않으려면 `false`/`undefined`를 반환합니다. | | `finalFocus` | `false`, `true`, `RefObject`, `(closeType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 다이얼로그가 닫힐 때 포커스할 요소를 결정합니다.

- `false`: 포커스를 이동하지 않습니다.
- `true`: 기본 동작에 따라 포커스를 이동합니다 (트리거 또는 이전에 포커스된 요소).
- `RefObject`: ref 요소로 포커스를 이동합니다.
- `function`: 상호작용 유형(`mouse`, `touch`, `pen` 또는 `keyboard`)과 함께 호출됩니다.
포커스할 요소를 반환하거나, 기본 동작을 사용하려면 `true`를, 아무 작업도 하지 않으려면 `false`/`undefined`를 반환합니다. | | `portalElement` | `ReactElement` | - | 사용자 정의 Portal 요소 | | `overlayElement` | `ReactElement` | - | 사용자 정의 Overlay 요소 | | `positionerElement` | `ReactElement` | - | 사용자 정의 Positioner 요소 | #### Sheet.PortalPrimitive | Prop | Type | Default | Description | | ------------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `container` | `null`, `HTMLElement`, `ShadowRoot`, `RefObject` | - | 포털 요소를 렌더링할 컨테이너 요소입니다. | | `keepMounted` | `false`, `true` | `false` | 팝업이 숨겨진 동안 포탈을 DOM에 유지할지 여부 | #### Sheet.OverlayPrimitive | Prop | Type | Default | Description | | ------------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `forceRender` | `false`, `true` | `false` | 다이얼로그가 중첩되어 있어도 백드롭을 강제로 렌더링할지 여부입니다. | #### Sheet.PopupPrimitive | Prop | Type | Default | Description | | -------------- | --------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `initialFocus` | `false`, `true`, `RefObject`, `(openType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 다이얼로그가 열릴 때 포커스할 요소를 결정합니다.

- `false`: 포커스를 이동하지 않습니다.
- `true`: 기본 동작에 따라 포커스를 이동합니다 (첫 번째 탭 가능 요소 또는 팝업).
- `RefObject`: ref 요소로 포커스를 이동합니다.
- `function`: 상호작용 유형(`mouse`, `touch`, `pen` 또는 `keyboard`)과 함께 호출됩니다.
포커스할 요소를 반환하거나, 기본 동작을 사용하려면 `true`를, 아무 작업도 하지 않으려면 `false`/`undefined`를 반환합니다. | | `finalFocus` | `false`, `true`, `RefObject`, `(closeType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 다이얼로그가 닫힐 때 포커스할 요소를 결정합니다.

- `false`: 포커스를 이동하지 않습니다.
- `true`: 기본 동작에 따라 포커스를 이동합니다 (트리거 또는 이전에 포커스된 요소).
- `RefObject`: ref 요소로 포커스를 이동합니다.
- `function`: 상호작용 유형(`mouse`, `touch`, `pen` 또는 `keyboard`)과 함께 호출됩니다.
포커스할 요소를 반환하거나, 기본 동작을 사용하려면 `true`를, 아무 작업도 하지 않으려면 `false`/`undefined`를 반환합니다. | #### Sheet.PositionerPrimitive | Prop | Type | Default | Description | | -------- | -------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `side` | `bottom`, `left`, `right`, `top` | - | Sheet가 나타날 화면의 방향입니다. | ### Sheet.Header | Prop | Type | Default | Description | | -------- | -------------- | ------- | ---------------------------------------------------------------------------------------------- | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Sheet.Body | Prop | Type | Default | Description | | -------- | -------------- | ------- | ---------------------------------------------------------------------------------------------- | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Sheet.Footer | Prop | Type | Default | Description | | -------- | -------------- | ------- | ---------------------------------------------------------------------------------------------- | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Sheet.Title | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Sheet.Description | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Sheet.Close | Prop | Type | Default | Description | | -------------- | ------------------------------------ | ------- | ----------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `true` | render prop으로 교체할 때 네이티브 `<button>` 요소를 렌더링할지 여부
렌더링되는 요소가 버튼이 아닌 경우(예: `<div>`) `false`로 설정하세요. | --- version: 1.0.0 --- # Skeleton URL: /docs/components/skeleton Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/skeleton.mdx 콘텐츠가 로딩 중임을 나타내는 플레이스홀더 요소입니다. *** title: 'Skeleton' site\_name: 'Skeleton - Vapor Core' description: '콘텐츠가 로딩 중임을 나타내는 플레이스홀더 요소입니다.' --------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/skeleton/default-skeleton.tsx", "codeblock": true } ``` ## Property *** ### Shape Skeleton의 모서리 둥글기를 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/skeleton/skeleton-shape.tsx", "codeblock": true } ``` ### Animation Skeleton의 애니메이션 스타일을 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/skeleton/skeleton-animation.tsx", "codeblock": true } ``` ### Size Skeleton의 높이를 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/skeleton/skeleton-size.tsx", "codeblock": true } ``` ## Examples *** ### Profile Card 여러 Skeleton 요소를 조합하여 프로필 카드 플레이스홀더를 구성하는 예제입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/skeleton/skeleton-composition.tsx", "codeblock": true } ``` ## Props Table *** ### Skeleton | Prop | Type | Default | Description | | ----------- | ---------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | | `animation` | `none`, `shimmer`, `pulse` | `shimmer` | skeleton의 애니메이션 스타일을 제어합니다.

- `shimmer`: 빛이 스치는 효과
- `pulse`: 깜빡이는 효과
- `none`: 애니메이션 비활성화 | | `shape` | `square`, `rounded` | `rounded` | skeleton의 테두리 반경을 제어합니다. | | `size` | `sm`, `md`, `lg`, `xl` | `md` | skeleton의 높이를 제어합니다. | | `render` | `ReactElement`, `(props: HTMLProps) => ReactElement` | - | component의 HTML element를 다른 태그로 교체하거나 다른 component와 조합할 수 있습니다.

ReactElement 또는 렌더링할 요소를 반환하는 함수를 받습니다. | --- version: 1.0.0 --- # Switch URL: /docs/components/switch Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/switch.mdx Switch는 사용자가 설정을 on/off로 전환할 수 있게 돕는 토글 컴포넌트입니다. *** title: 'Switch' site\_name: 'Switch - Vapor Core' description: 'Switch는 사용자가 설정을 on/off로 전환할 수 있게 돕는 토글 컴포넌트입니다.' --------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/switch/default-switch.tsx", "codeblock": true } ``` ## Property *** ### Size Switch의 크기를 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/switch/switch-size.tsx", "codeblock": true } ``` ### Checked Switch의 체크 상태를 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/switch/switch-checked.tsx", "codeblock": true } ``` ### Disabled Switch의 비활성화 상태를 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/switch/switch-disabled.tsx", "codeblock": true } ``` ### Read Only 사용자는 스위치 상태를 변경할 수 없지만, 현재 상태를 확인할 수 있도록 허용하는 상태입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/switch/switch-readonly.tsx", "codeblock": true } ``` ## Examples *** ### Controlled 제어되는 Switch 컴포넌트의 사용 예시입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/switch/switch-controlled.tsx", "codeblock": true } ``` ## Props Table *** ### Switch.Root | Prop | Type | Default | Description | | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------- | | `size` | `sm`, `md`, `lg` | - | Switch의 크기를 지정합니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `id` | `string` | - | 스위치 요소의 id | | `name` | `string` | - | 폼 제출 시 필드를 식별하는 이름 | | `defaultChecked` | `false`, `true` | `false` | 스위치의 초기 활성화 상태

제어 컴포넌트로 사용하려면 `checked` prop을 사용하세요. | | `disabled` | `false`, `true` | `false` | 사용자 상호작용을 비활성화할지 여부 | | `checked` | `false`, `true` | - | 스위치의 현재 활성화 상태

비제어 컴포넌트로 사용하려면 `defaultChecked` prop을 사용하세요. | | `readOnly` | `false`, `true` | `false` | 사용자가 스위치를 활성화하거나 비활성화할 수 없도록 할지 여부 | | `required` | `false`, `true` | `false` | 폼 제출 전 스위치를 반드시 활성화해야 하는지 여부 | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `inputRef` | `null`, `(instance: HTMLInputElement \| null) => void`, `RefObject` | - | 숨겨진 `<input>` 요소에 접근하기 위한 ref | | `onCheckedChange` | `(checked: boolean, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; }) => void` | - | 스위치가 활성화되거나 비활성화될 때 호출되는 이벤트 핸들러 | | `nativeButton` | `false`, `true` | `true` | render prop으로 교체할 때 네이티브 `<button>` 요소를 렌더링할지 여부
렌더링되는 요소가 버튼이 아닌 경우(예: `<div>`) `false`로 설정하세요. | | `invalid` | `false`, `true` | - | Switch가 유효하지 않은 상태인지 여부입니다. | #### Switch.ThumbPrimitive | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | --- version: 1.0.0 --- # Table URL: /docs/components/table Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/table.mdx Table는 데이터를 행과 열로 구성하여 구조화된 방식으로 표시하는 컴포넌트입니다. *** title: 'Table' site\_name: Table - Vapor Core description: 'Table는 데이터를 행과 열로 구성하여 구조화된 방식으로 표시하는 컴포넌트입니다.' ------------------------------------------------------------- Table 컴포넌트는 순수한 뷰(View) 역할에 집중하여 기본적인 구조와 스타일만을 제공합니다. 복잡한 상태 관리와 로직을 바탕으로 대량의 데이터를 다루는 Data Table을 구현하려면 [Table Block 문서](/blocks/table)를 참고해주세요.
```json doc-gen:file { "file": "./src/components/demo/examples/table/default-table.tsx", "codeblock": true } ``` ## Props Table *** ### Table.Root | Prop | Type | Default | Description | | ----------- | -------------------- | ----------- | ------------------------------------------------- | | `render` | `React.ReactElement` | `table` | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 구성 요소와 조합할 수 있습니다. | | `className` | `string` | `undefined` | 컴포넌트에 CSS 클래스명을 추가할 수 있습니다. | | `children` | `React.ReactNode` | `undefined` | 컴포넌트에 자식 요소를 추가할 수 있습니다. | ### Table.Header | Prop | Type | Default | Description | | ----------- | -------------------- | ----------- | ------------------------------------------------- | | `render` | `React.ReactElement` | `thead` | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 구성 요소와 조합할 수 있습니다. | | `className` | `string` | `undefined` | 컴포넌트에 CSS 클래스명을 추가할 수 있습니다. | | `children` | `React.ReactNode` | `undefined` | 컴포넌트에 자식 요소를 추가할 수 있습니다. | ### Table.Body | Prop | Type | Default | Description | | ----------- | -------------------- | ----------- | ------------------------------------------------- | | `render` | `React.ReactElement` | `tbody` | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 구성 요소와 조합할 수 있습니다. | | `className` | `string` | `undefined` | 컴포넌트에 CSS 클래스명을 추가할 수 있습니다. | | `children` | `React.ReactNode` | `undefined` | 컴포넌트에 자식 요소를 추가할 수 있습니다. | ### Table.Footer | Prop | Type | Default | Description | | ----------- | -------------------- | ----------- | ------------------------------------------------- | | `render` | `React.ReactElement` | `tfoot` | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 구성 요소와 조합할 수 있습니다. | | `className` | `string` | `undefined` | 컴포넌트에 CSS 클래스명을 추가할 수 있습니다. | | `children` | `React.ReactNode` | `undefined` | 컴포넌트에 자식 요소를 추가할 수 있습니다. | ### Table.Row | Prop | Type | Default | Description | | ----------- | -------------------- | ----------- | ------------------------------------------------- | | `render` | `React.ReactElement` | `tr` | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 구성 요소와 조합할 수 있습니다. | | `className` | `string` | `undefined` | 컴포넌트에 CSS 클래스명을 추가할 수 있습니다. | | `children` | `React.ReactNode` | `undefined` | 컴포넌트에 자식 요소를 추가할 수 있습니다. | ### Table.Heading | Prop | Type | Default | Description | | ----------- | -------------------- | ----------- | ------------------------------------------------- | | `render` | `React.ReactElement` | `th` | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 구성 요소와 조합할 수 있습니다. | | `className` | `string` | `undefined` | 컴포넌트에 CSS 클래스명을 추가할 수 있습니다. | | `children` | `React.ReactNode` | `undefined` | 컴포넌트에 자식 요소를 추가할 수 있습니다. | ### Table.Cell | Prop | Type | Default | Description | | ----------- | -------------------- | ----------- | ------------------------------------------------- | | `render` | `React.ReactElement` | `td` | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 구성 요소와 조합할 수 있습니다. | | `className` | `string` | `undefined` | 컴포넌트에 CSS 클래스명을 추가할 수 있습니다. | | `children` | `React.ReactNode` | `undefined` | 컴포넌트에 자식 요소를 추가할 수 있습니다. | ### Table.ColumnGroup | Prop | Type | Default | Description | | ----------- | -------------------- | ----------- | ------------------------------------------------- | | `span` | `string`, `number` | `1` | 열 그룹이 차지하는 너비를 설정합니다. | | `render` | `React.ReactElement` | `colgroup` | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 구성 요소와 조합할 수 있습니다. | | `className` | `string` | `undefined` | 컴포넌트에 CSS 클래스명을 추가할 수 있습니다. | | `children` | `React.ReactNode` | `undefined` | 컴포넌트에 자식 요소를 추가할 수 있습니다. | ### Table.Column | Prop | Type | Default | Description | | ----------- | -------------------- | ----------- | ------------------------------------------------- | | `span` | `string`, `number` | `1` | 개별 열 그룹이 차지하는 너비를 설정합니다. | | `render` | `React.ReactElement` | `col` | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 구성 요소와 조합할 수 있습니다. | | `className` | `string` | `undefined` | 컴포넌트에 CSS 클래스명을 추가할 수 있습니다. | | `children` | `React.ReactNode` | `undefined` | 컴포넌트에 자식 요소를 추가할 수 있습니다. | --- version: 1.0.0 --- # Tabs URL: /docs/components/tabs Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/tabs.mdx Tabs는 관련된 콘텐츠를 탭 형태로 구성하여 사용자가 쉽게 전환할 수 있도록 하는 컴포넌트입니다. 키보드 내비게이션, 접근성, 다양한 스타일 변형을 지원합니다. *** title: 'Tabs' site\_name: 'Tabs - Vapor Core' description: 'Tabs는 관련된 콘텐츠를 탭 형태로 구성하여 사용자가 쉽게 전환할 수 있도록 하는 컴포넌트입니다. 키보드 내비게이션, 접근성, 다양한 스타일 변형을 지원합니다.' --------------------------------------------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/tabs/default-tabs.tsx", "codeblock": true } ``` ## Property *** ### Size Tabs의 크기를 지정합니다. `sm`, `md`, `lg`, `xl` 네 가지 크기를 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/tabs/tabs-size.tsx", "codeblock": true } ``` ### Variant Tabs의 스타일 변형을 설정합니다. `line`과 `fill` 두 가지 스타일을 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/tabs/tabs-variant.tsx", "codeblock": true } ``` ### Orientation 수평(horizontal)과 수직(vertical) 방향을 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/tabs/tabs-orientation.tsx", "codeblock": true } ``` ### Controlled State Tabs의 활성 상태를 외부에서 제어합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/tabs/tabs-controlled.tsx", "codeblock": true } ``` ### States 개별 탭 또는 전체 탭 그룹을 비활성화할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/tabs/tabs-states.tsx", "codeblock": true } ``` ## Examples *** ### Keyboard Navigation `activateOnFocus`와 `loopFocus` props를 사용하여 키보드 내비게이션 동작을 세밀하게 제어할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/tabs/tabs-keyboard.tsx", "codeblock": true } ``` ### Custom Indicator `Tabs.List`는 기본적으로 `Tabs.IndicatorPrimitive`를 포함합니다. Indicator를 커스터마이징하려면 `indicatorElement` prop을 사용하세요. ```json doc-gen:file { "file": "./src/components/demo/examples/tabs/tabs-custom-indicator.tsx", "codeblock": true } ``` ## Props Table *** ### Tabs.Root | Prop | Type | Default | Description | | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `defaultValue` | `any` | `0` | 기본값. 비제어 컴포넌트에서 사용
값이 `null`이면 탭이 선택되지 않습니다. | | `value` | `any` | - | 현재 선택된 탭의 값. 제어 컴포넌트에서 사용
값이 `null`이면 탭이 선택되지 않습니다. | | `orientation` | `horizontal`, `vertical` | `horizontal` | 컴포넌트 방향(레이아웃 흐름 방향) | | `onValueChange` | `(value: any, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; } & { activationDirection: ActivationDirection; }) => void` | - | 새 값이 설정될 때 호출되는 콜백 | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `variant` | `line`, `fill` | - | Tabs의 스타일 변형을 지정합니다. | | `size` | `sm`, `md`, `lg`, `xl` | - | Tabs의 크기를 지정합니다. | | `disabled` | `false`, `true` | - | 컴포넌트가 사용자 상호작용을 무시할지 여부입니다. Root에 설정 시 모든 하위 탭에 자동으로 적용됩니다. | | `activateOnFocus` | `false`, `true` | `false` | 포커스 시 즉시 탭을 활성화할지 여부. `false`일 경우 Enter 또는 Space 키로 활성화합니다. | | `loopFocus` | `false`, `true` | `true` | 키보드 내비게이션 시 첫 번째/마지막 탭에서 순환할지 여부. `true`일 경우 마지막 탭에서 화살표 키를 누르면 첫 번째 탭으로 이동합니다. | ### Tabs.List | Prop | Type | Default | Description | | ------------------ | ---------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `variant` | `line`, `fill` | - | Tabs의 스타일 변형을 지정합니다. | | `orientation` | `horizontal`, `vertical` | - | 컴포넌트의 방향(레이아웃 흐름 방향)을 지정합니다. | | `size` | `sm`, `md`, `lg`, `xl` | - | Tabs의 크기를 지정합니다. | | `disabled` | `false`, `true` | - | 컴포넌트가 사용자 상호작용을 무시할지 여부입니다. | | `indicatorElement` | `ReactElement` | - | 커스텀 인디케이터 요소입니다. 기본값은 `<Tabs.IndicatorPrimitive />`입니다. | #### Tabs.ListPrimitive | Prop | Type | Default | Description | | ------------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `variant` | `line`, `fill` | - | Tabs의 스타일 변형을 지정합니다. | | `orientation` | `horizontal`, `vertical` | - | 컴포넌트의 방향(레이아웃 흐름 방향)을 지정합니다. | | `size` | `sm`, `md`, `lg`, `xl` | - | Tabs의 크기를 지정합니다. | | `disabled` | `false`, `true` | - | 컴포넌트가 사용자 상호작용을 무시할지 여부입니다. | #### Tabs.IndicatorPrimitive | Prop | Type | Default | Description | | ----------------------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `renderBeforeHydration` | `false`, `true` | `false` | React hydration 전에 렌더링할지 여부입니다.
서버 사이드 렌더링 후 인디케이터가 보이지 않는 시간을 최소화합니다. | ### Tabs.Button | Prop | Type | Default | Description | | -------------- | ------------------------------------ | ------- | ----------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `value` | `any` | - | Tab의 값
지정하지 않으면 자식 요소의 위치 인덱스가 값으로 사용됩니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `true` | render prop으로 교체할 때 네이티브 `<button>` 요소를 렌더링할지 여부
렌더링되는 요소가 버튼이 아닌 경우(예: `<div>`) `false`로 설정하세요. | ### Tabs.Panel | Prop | Type | Default | Description | | ------------- | ------------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `value` | `any` | - | Tab Panel의 값입니다. 해당 값을 가진 Tab이 선택되면 표시됩니다.
제공되지 않으면 패널의 인덱스가 사용됩니다.
서버에서 Tab Panel을 렌더링하려면 명시적으로 제공하는 것이 권장됩니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `keepMounted` | `false`, `true` | `false` | 패널이 숨겨져 있는 동안 HTML 요소를 DOM에 유지할지 여부입니다. | --- version: 1.0.0 --- # TextInput URL: /docs/components/text-input Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/text-input.mdx TextInput은 사용자가 데이터를 입력할 수 있도록 텍스트, 숫자 등 다양한 형식의 입력 필드를 제공합니다. *** title: 'TextInput' site\_name: 'TextInput - Vapor Core' description: 'TextInput은 사용자가 데이터를 입력할 수 있도록 텍스트, 숫자 등 다양한 형식의 입력 필드를 제공합니다.' ----------------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/text-input/default-text-input.tsx", "codeblock": true } ``` ## Property *** ### Size TextInput의 크기를 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/text-input/text-input-size.tsx", "codeblock": true } ``` ### Type TextInput의 타입을 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/text-input/text-input-type.tsx", "codeblock": true } ``` ### Disabled 사용자가 상호작용할 수 없는 상태입니다. 액션을 수행하기 위한 특정 조건을 충족하지 않았거나 일시적으로 기능을 제한하려는 상황에서 사용합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/text-input/text-input-disabled.tsx", "codeblock": true } ``` ### Invalid 유효하지 않은 상태(필수 항목 누락, 잘못된 입력 등)를 표시하여 올바른 입력을 유도합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/text-input/text-input-invalid.tsx", "codeblock": true } ``` ### Read Only 값을 수정할 수 없지만, 텍스트를 복사하거나 읽을 수 있는 상태입니다. ```json doc-gen:file { "file": "./src/components/demo/examples/text-input/text-input-readonly.tsx", "codeblock": true } ``` ## Examples *** ### States TextInput의 다양한 상태를 보여줍니다. ```json doc-gen:file { "file": "./src/components/demo/examples/text-input/text-input-states.tsx", "codeblock": true } ``` ## Props Table *** ### TextInput | Prop | Type | Default | Description | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `size` | `sm`, `md`, `lg`, `xl` | `md` | | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `type` | `search`, `text`, `email`, `password`, `url`, `tel` | `text` | 인풋의 타입을 설정합니다. | | `defaultValue` | `string` | - | | | `value` | `string` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `onValueChange` | `(value: string, event: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; }) => void` | - | | | `invalid` | `false`, `true` | `false` | | --- version: 1.0.0 --- # Text URL: /docs/components/text Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/text.mdx Text 컴포넌트는 시멘틱 태그와 타이포그래피·색상 토큰을 조합하여 텍스트 스타일을 설정합니다. *** title: 'Text' site\_name: 'Text - Vapor Core' description: 'Text 컴포넌트는 시멘틱 태그와 타이포그래피·색상 토큰을 조합하여 텍스트 스타일을 설정합니다.' -------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/text/default-text.tsx", "codeblock": true } ``` ## Property *** ### Typography 텍스트의 타이포그래피 스타일을 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/text/text-typography.tsx", "codeblock": true } ``` ### Foreground 텍스트의 색상을 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/text/text-foreground.tsx", "codeblock": true } ``` ## Props Table *** ### Text | Prop | Type | Default | Description | | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------- | | `textAlign` | `null`, `left`, `right`, `center`, `end`, `start`, `justify`, `match-parent` | - | | | `foreground` | `white`, `primary-100`, `primary-200`, `secondary-100`, `success-100`, `success-200`, `warning-100`, `warning-200`, `danger-100`, `danger-200`, `hint-100`, `hint-200`, `contrast-100`, `contrast-200`, `secondary-200`, `normal-100`, `normal-200` | `normal-200` | 텍스트의 전경색을 설정합니다. | | `typography` | `body1`, `display1`, `display2`, `display3`, `display4`, `heading1`, `heading2`, `heading3`, `heading4`, `heading5`, `heading6`, `subtitle1`, `subtitle2`, `body2`, `body3`, `body4`, `code1`, `code2` | `body2` | 텍스트에 적용할 타이포그래피 스타일을 설정합니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | --- version: 1.0.0 --- # Textarea URL: /docs/components/textarea Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/textarea.mdx Textarea는 사용자가 여러 줄의 텍스트를 입력할 수 있도록 하는 텍스트 입력 필드를 제공합니다. *** title: 'Textarea' site\_name: 'Textarea - Vapor Core' description: 'Textarea는 사용자가 여러 줄의 텍스트를 입력할 수 있도록 하는 텍스트 입력 필드를 제공합니다.' ----------------------------------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/textarea/default-textarea.tsx", "codeblock": true } ``` ## Property *** ### Size Textarea의 크기를 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/textarea/textarea-size.tsx", "codeblock": true } ``` ### Auto Resize 텍스트 내용에 따라 높이가 자동 조절됩니다. ```json doc-gen:file { "file": "./src/components/demo/examples/textarea/textarea-auto-resize.tsx", "codeblock": true } ``` ### States Textarea의 다양한 상태를 보여줍니다. ```json doc-gen:file { "file": "./src/components/demo/examples/textarea/textarea-states.tsx", "codeblock": true } ``` ## Examples *** ### maxLength Textarea에 `maxLength` 속성을 추가하여 입력 가능한 최대 문자 수를 제한하는 기능을 제공합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/textarea/textarea-character-count.tsx", "codeblock": true } ``` ## Props Table *** ### Textarea | Prop | Type | Default | Description | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `size` | `sm`, `md`, `lg`, `xl` | `md` | Textarea의 크기를 지정합니다. | | `defaultValue` | `string` | - | Textarea의 초기 값입니다.

제어 컴포넌트로 렌더링하려면 `value` prop을 대신 사용하세요. | | `value` | `string` | - | Textarea의 현재 값입니다.

비제어 컴포넌트로 렌더링하려면 `defaultValue` prop을 대신 사용하세요. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `invalid` | `false`, `true` | `false` | Textarea가 유효하지 않은 상태인지 여부입니다. | | `autoResize` | `false`, `true` | `false` | 콘텐츠에 맞춰 Textarea의 높이를 자동으로 조정할지 여부입니다. | | `onValueChange` | `(value: string, event: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; }) => void` | - | Textarea의 값이 변경될 때 호출되는 이벤트 핸들러입니다. | --- version: 1.0.0 --- # Toast URL: /docs/components/toast Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/toast.mdx Toast는 일시적인 알림 메시지를 사용자에게 표시하는 컴포넌트입니다. *** title: 'Toast' site\_name: 'Toast - Vapor Core' description: 'Toast는 일시적인 알림 메시지를 사용자에게 표시하는 컴포넌트입니다.' ------------------------------------------------------ Toast 컴포넌트는 화면의 모서리에 일시적인 알림 메시지를 표시하는 데 사용됩니다. 사용자의 작업에 대한 피드백을 제공하고, 피드백을 하나의 리스트로 관리하기 때문에 다른 컴포넌트와 사용 방식이 다릅니다. ```json doc-gen:file { "file": "./src/components/demo/examples/toast/default-toast.tsx", "codeblock": true } ``` ## Property ### Methods Toast를 추가, 업데이트 및 제거할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/toast/toast-method.tsx", "codeblock": true } ``` ### ColorPalette Toast의 색상 팔레트를 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/toast/toast-color-palette.tsx", "codeblock": true } ``` ## Examples ### Action Action 버튼과 함께 사용할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/toast/toast-action.tsx", "codeblock": true } ``` ### Close Close 버튼을 제거할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/toast/toast-close.tsx", "codeblock": true } ``` ### Icon Icon을 커스텀 할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/toast/toast-icon.tsx", "codeblock": true } ``` ### Custom Toast 아이템을 완전히 커스텀할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/toast/toast-custom.tsx", "codeblock": true } ``` ## Props ### Toast.Provider | Prop | Type | Default | Description | | ---------------- | -------------- | ------- | ------------------------------------- | | **toastManager** | `ToastManager` | - | Toast의 상태를 관리하는 ToastManager 인스턴스입니다. | | `timeout` | `number` | `4000` | Toast가 자동으로 닫히기까지의 시간(밀리초)입니다. | | `limit` | `number` | - | 동시에 표시할 수 있는 최대 Toast 개수입니다. | | `children` | `ReactNode` | - | | ### Toast.ProviderPrimitive | Prop | Type | Default | Description | | ---------------- | -------------- | ------- | ------------------------------------- | | **toastManager** | `ToastManager` | - | Toast의 상태를 관리하는 ToastManager 인스턴스입니다. | | `timeout` | `number` | `4000` | Toast가 자동으로 닫히기까지의 시간(밀리초)입니다. | | `limit` | `number` | - | 동시에 표시할 수 있는 최대 Toast 개수입니다. | | `children` | `ReactNode` | - | | ### Toast.PortalPrimitive | Prop | Type | Default | Description | | ----------- | ----------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `container` | `null`, `HTMLElement`, `ShadowRoot`, `RefObject` | - | 포털 요소를 렌더링할 상위 요소입니다. | ### Toast.ViewportPrimitive | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Toast.RootPrimitive | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | **toast** | `ToastObject` | - | Toast 데이터 객체입니다. `useToastManager` 훅에서 반환된 toasts 배열의 항목을 전달합니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Toast.ContentPrimitive | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Toast.TitlePrimitive | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Toast.DescriptionPrimitive | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Toast.ActionPrimitive | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------------ | --------- | ---------------------------------------------------------------------------------------------------------------------------- | | `size` | `sm`, `md`, `lg`, `xl` | `md` | Action 버튼 크기 | | `colorPalette` | `primary`, `secondary`, `success`, `warning`, `danger`, `contrast` | `primary` | Action 버튼 색상 | | `variant` | `outline`, `fill`, `ghost` | `fill` | Action 버튼 스타일 (fill: 채움, outline: 테두리, ghost: 투명) | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `true` | 컴포넌트가 `render` 속성을 통해 대체될 때 네이티브 `<button>` 요소를 렌더링할지 여부입니다.
렌더링된 요소가 버튼이 아닌 경우(예: `<div>`) `false`로 설정하세요. | ### Toast.ClosePrimitive | Prop | Type | Default | Description | | -------------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------- | | `children` | `ReactNode` | - | 닫기 버튼 내부에 표시할 아이콘 또는 콘텐츠 | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `true` | 컴포넌트가 `render` 속성을 통해 대체될 때 네이티브 `<button>` 요소를 렌더링할지 여부입니다.
렌더링된 요소가 버튼이 아닌 경우(예: `<div>`) `false`로 설정하세요. | ### Toast.IconPrimitive | Prop | Type | Default | Description | | ----------- | -------- | ------- | ---------------- | | `className` | `string` | - | 요소에 적용된 CSS 클래스. | ### useToastManager | Prop | Type | Default | Description | | -------------- | --------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------- | | `id` | `string` | - | Toast의 고유 식별자입니다. 지정하지 않으면 자동으로 생성됩니다. | | `title` | `string` | - | Toast의 제목입니다. | | `description` | `string` | - | Toast의 설명 텍스트입니다. | | `colorPalette` | `success`, `danger`, `info` | `info` | Toast의 색상 팔레트입니다. 각 팔레트에 따라 기본 아이콘이 자동으로 설정됩니다. | | `icon` | `ReactNode` | - | Toast에 표시할 커스텀 아이콘입니다. 지정하지 않으면 `colorPalette`에 따른 기본 아이콘이 사용됩니다. | | `close` | `false`, `true` | `true` | 닫기 버튼을 표시할지 여부입니다. | | `actionProps` | `ActionProps` | - | Toast 액션 버튼에 전달할 props입니다. `children`, `onClick`, `colorPalette`, `size`, `variant` 등 Button 컴포넌트의 props를 포함합니다. | | `data` | `object` | - | Toast에 연결할 커스텀 데이터 객체입니다. 제네릭 타입으로 타입 안전성을 제공합니다. | | `priority` | `number` | - | Toast의 우선순위입니다. 높은 값이 먼저 표시됩니다. | --- version: 1.0.0 --- # Tooltip URL: /docs/components/tooltip Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/tooltip.mdx 요소에 대한 추가 정보를 제공하는 툴팁 컴포넌트입니다 *** title: 'Tooltip' site\_name: 'Tooltip - Vapor Core' description: '요소에 대한 추가 정보를 제공하는 툴팁 컴포넌트입니다' -------------------------------------------- ```json doc-gen:file { "file": "./src/components/demo/examples/tooltip/default-tooltip.tsx", "codeblock": true } ``` 주의! * **반드시 Button, IconButton 등과 같은 상호작용이 가능한 요소와 함께 사용하세요.** Tooltip은 상호작용 가능한 요소의 동작에 대한 추가 정보를 제공하는 작은 팝업입니다. 상호작용이 불가능한 요소에 사용하거나, 단순히 정보를 제공하기 위한 용도로 사용하려면 `Popover` 컴포넌트를 고려해보세요. * **Tooltip에 중요한 정보를 포함하지 마세요.** Tooltip은 보조적인 정보를 제공하기 위한 용도로 설계되었으며, 중요한 정보는 포함하지 않는 것이 좋습니다. 중요한 정보는 항상 페이지의 주요 콘텐츠에 포함시켜야 합니다. ## Property *** ### Positioning Tooltip의 표시 위치를 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/tooltip/tooltip-positioning.tsx", "codeblock": true } ``` ### Alignment Tooltip의 정렬 위치를 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/tooltip/tooltip-alignment.tsx", "codeblock": true } ``` ### Delay `Tooltip.Trigger`의 `delay` prop으로 Tooltip이 표시되기까지의 지연 시간을 설정합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/tooltip/tooltip-delay.tsx", "codeblock": true } ``` ### Offset Tooltip의 거리와 정렬 오프셋을 조정할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/tooltip/tooltip-offset.tsx", "codeblock": true } ``` ## Examples *** ### Content Variations 다양한 형태의 툴팁 내용을 표시할 수 있습니다. ```json doc-gen:file { "file": "./src/components/demo/examples/tooltip/tooltip-content.tsx", "codeblock": true } ``` ## Props Table *** ### Tooltip.Root | Prop | Type | Default | Description | | ----------------------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `disabled` | `false`, `true` | `false` | 컴포넌트가 사용자 상호작용을 무시할지 여부입니다. | | `open` | `false`, `true` | - | 툴팁이 현재 열려 있는지 여부입니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `defaultOpen` | `false`, `true` | `false` | 툴팁이 초기에 열려 있는지 여부입니다.

제어 컴포넌트로 렌더링하려면 `open` prop을 대신 사용하세요. | | `onOpenChange` | `(open: boolean, eventDetails: ChangeEventDetails) => void` | - | 툴팁이 열리거나 닫힐 때 호출되는 이벤트 핸들러입니다. | | `onOpenChangeComplete` | `(open: boolean) => void` | - | 툴팁이 열리거나 닫힐 때 모든 애니메이션이 완료된 후 호출되는 이벤트 핸들러입니다. | | `disableHoverablePopup` | `false`, `true` | `false` | 툴팁 팝업 위에 마우스를 올렸을 때 툴팁이 열린 상태로 유지되는 기능을 비활성화합니다. `true`일 경우 툴팁 내용에 마우스를 올리면 툴팁이 닫힙니다. | | `trackCursorAxis` | `none`, `x`, `y`, `both` | `none` | 툴팁이 커서를 추적할 축을 결정합니다. | | `actionsRef` | `RefObject` | - | 명령형 작업에 대한 ref입니다.
- `unmount`: 지정된 경우, 툴팁은 닫힐 때 언마운트되지 않습니다.
대신 `unmount` 함수를 수동으로 호출하여 툴팁을 언마운트해야 합니다.
외부 라이브러리에서 툴팁의 애니메이션을 제어할 때 유용합니다. | ### Tooltip.Trigger | Prop | Type | Default | Description | | ------------ | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `delay` | `number` | `600` | 툴팁을 열기 전에 대기할 시간입니다. 밀리초 단위로 지정됩니다. | | `closeDelay` | `number` | `0` | 툴팁을 닫기 전에 대기할 시간입니다. 밀리초 단위로 지정됩니다. | ### Tooltip.Popup | Prop | Type | Default | Description | | ------------------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `portalElement` | `ReactElement` | - | | | `positionerElement` | `ReactElement` | - | | #### Tooltip.PortalPrimitive | Prop | Type | Default | Description | | ------------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `keepMounted` | `false`, `true` | `false` | 팝업이 숨겨져 있는 동안 포털을 DOM에 유지할지 여부입니다. | | `container` | `null`, `HTMLElement`, `ShadowRoot`, `RefObject` | - | 포털 요소를 렌더링할 부모 요소입니다. | #### Tooltip.PositionerPrimitive | Prop | Type | Default | Description | | -------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `sticky` | `false`, `true` | `false` | 앵커 요소가 뷰포트 밖으로 스크롤된 후에도 팝업을 뷰포트에 유지할지 여부입니다. | | `anchor` | `null`, `Element`, `VirtualElement`, `RefObject`, `() => Element \| VirtualElement \| null` | - | 팝업을 위치시킬 앵커 요소입니다.
기본적으로 팝업은 트리거에 대해 위치합니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `align` | `center`, `end`, `start` | `center` | 지정된 측면을 기준으로 팝업을 정렬하는 방법입니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `side` | `bottom`, `left`, `right`, `top`, `inline-end`, `inline-start` | `top` | 팝업을 정렬할 앵커 요소의 측면입니다.
충돌을 피하기 위해 자동으로 변경될 수 있습니다. | | `positionMethod` | `absolute`, `fixed` | `absolute` | 사용할 CSS `position` 속성을 결정합니다. | | `sideOffset` | `number`, `OffsetFunction` | `0` | 앵커와 팝업 사이의 거리(픽셀)입니다.
앵커 및 포지셔너 요소의 치수와 측면 및 정렬을 읽기 위해 거리를 반환하는 함수도 허용합니다.

함수는 다음 속성을 가진 `data` 객체 매개변수를 받습니다:
- `data.anchor`: `width` 및 `height` 속성을 가진 앵커 요소의 치수
- `data.positioner`: `width` 및 `height` 속성을 가진 포지셔너 요소의 치수
- `data.side`: 포지셔너가 정렬되는 앵커 요소의 측면
- `data.align`: 지정된 측면을 기준으로 포지셔너가 정렬되는 방법 | | `alignOffset` | `number`, `OffsetFunction` | `0` | 정렬 축을 따른 추가 오프셋(픽셀)입니다.
앵커 및 포지셔너 요소의 치수와 측면 및 정렬을 읽기 위해 오프셋을 반환하는 함수도 허용합니다.

함수는 다음 속성을 가진 `data` 객체 매개변수를 받습니다:
- `data.anchor`: `width` 및 `height` 속성을 가진 앵커 요소의 치수
- `data.positioner`: `width` 및 `height` 속성을 가진 포지셔너 요소의 치수
- `data.side`: 포지셔너가 정렬되는 앵커 요소의 측면
- `data.align`: 지정된 측면을 기준으로 포지셔너가 정렬되는 방법 | | `collisionBoundary` | `Element`, `clipping-ancestors`, `Element[]`, `{ x: number; y: number; height: number; width: number; }` | `clipping-ancestors` | 팝업이 제한되는 영역을 구분하는 요소 또는 사각형입니다. | | `collisionPadding` | `number`, `{ bottom?: number \| undefined; left?: number \| undefined; right?: number \| undefined; top?: number \| undefined; }` | `5` | 충돌 경계의 가장자리로부터 유지할 추가 공간입니다. | | `arrowPadding` | `number` | `5` | 화살표와 팝업 가장자리 사이에 유지할 최소 거리입니다.

팝업의 둥근 모서리 밖으로 화살표 요소가 튀어나오는 것을 방지하는 데 사용합니다. | | `trackAnchor` | `false`, `true` | `true` | 팝업이 위치 앵커의 레이아웃 이동을 추적할지 여부입니다. | | `collisionAvoidance` | `SideFlipMode`, `SideShiftMode` | - | 팝업을 배치할 때 충돌을 처리하는 방법을 결정합니다. | #### Tooltip.PopupPrimitive | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | --- version: 1.0.0 --- # Composition URL: /docs/getting-started/composition Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(handbook)/composition.mdx Vapor UI 컴포넌트는 다양한 구성 패턴을 지원하여 유연한 UI 구성이 가능합니다. 이 섹션에서는 Vapor UI 컴포넌트의 조합 패턴과 활용 방법에 대해 설명합니다. *** title: Composition description: Vapor UI 컴포넌트는 다양한 구성 패턴을 지원하여 유연한 UI 구성이 가능합니다. 이 섹션에서는 Vapor UI 컴포넌트의 조합 패턴과 활용 방법에 대해 설명합니다. ------------------------------------------------------------------------------------------------------------ 준비 중입니다. --- version: 1.0.0 --- # Styling URL: /docs/getting-started/styling Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(handbook)/styling.mdx Vapor UI 컴포넌트의 스타일링 방식에 대해 설명합니다. *** title: Styling description: Vapor UI 컴포넌트의 스타일링 방식에 대해 설명합니다. ---------------------------------------------- --- version: 1.0.0 --- # Tailwind CSS v4 URL: /docs/getting-started/tailwindcss-v4 Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(handbook)/tailwindcss-v4.mdx Vapor UI와 함께 Tailwind CSS v4를 사용하세요. *** title: Tailwind CSS v4 description: Vapor UI와 함께 Tailwind CSS v4를 사용하세요. ------------------------------------------------- 이 문서에서는 Vapor UI와 Tailwind CSS v4를 함께 설정하는 방법을 설명합니다. 설정을 완료하면 Vapor UI 컴포넌트와 Tailwind 유틸리티 클래스를 함께 사용할 수 있습니다. ## 설정 메인 CSS 파일(예: `global.css`)에 아래 코드를 추가합니다. ```css /* global.css */ /* 1. 스타일 우선순위 정의 */ @layer tw-theme, vapor, tw-utilities; @import '@vapor-ui/core/tailwind.css'; /* 2. Tailwind CSS 연결 */ @import 'tailwindcss/theme.css' layer(tw-theme); @import 'tailwindcss/utilities.css' layer(tw-utilities); ``` 설정이 완료되면 Vapor UI 컴포넌트와 Tailwind 유틸리티를 함께 사용할 수 있습니다. ## Vapor 유틸리티 클래스 `v-` 접두사가 붙은 Vapor 전용 유틸리티 클래스를 사용할 수 있습니다. ### 디자인 토큰 클래스 Vapor의 색상, 간격, 둥근 모서리를 Tailwind 문법으로 사용합니다. `v-` 접두사를 추가하여 Vapor 디자인 토큰을 적용합니다. * **색상**: `bg-v-blue-500`, `text-v-red-300`, `border-v-gray-900` * **간격**: `p-v-100`, `m-v-200`, `gap-v-400`, `w-v-400` * **둥근 모서리**: `rounded-v-200`, `rounded-t-v-400` * **폰트 굵기**: `font-v-400`, `font-v-700` Tailwind의 모든 [유틸리티 클래스](https://tailwindcss.com/docs/theme#theme-variable-namespaces)와 조합할 수 있습니다. ### 시맨틱 유틸리티 클래스 의미 기반 색상 클래스를 제공합니다. Primary, Success, Warning 등의 역할에 맞는 색상을 적용합니다. * **배경색**: `bg-v-primary`, `bg-v-secondary`, `bg-v-success`, `bg-v-warning`, `bg-v-danger` * **텍스트색**: `text-v-primary`, `text-v-success`, `text-v-warning`, `text-v-danger`, `text-v-accent` * **테두리색**: `border-v-primary`, `border-v-success`, `border-v-warning`, `border-v-danger` ## 스타일 우선순위 CSS `@layer` 규칙으로 스타일 우선순위 계층을 정의합니다. 1. Vapor 컴포넌트 기본 스타일 2. Vapor 유틸리티 클래스 3. Tailwind 유틸리티 (가장 높은 우선순위) Tailwind 유틸리티가 가장 높은 우선순위를 가지므로 `className="bg-blue-500"`와 같은 클래스로 Vapor 컴포넌트를 커스터마이징할 수 있습니다. ## CSS Reset 설정 Vapor UI는 필요한 스타일 초기화를 포함합니다. Tailwind의 `preflight.css`는 사용하지 않는 것을 권장합니다. `preflight.css`가 필요한 경우 레이어 순서를 다음과 같이 조정합니다. ```css /* preflight를 사용해야 하는 경우 */ @layer tw-theme, vapor.theme, tw-base, vapor.reset, vapor.components, vapor.utilities, tw-utilities; @import '@vapor-ui/core/tailwind.css'; @import 'tailwindcss/theme.css' layer(tw-theme); @import 'tailwindcss/preflight.css' layer(tw-base); @import 'tailwindcss/utilities.css' layer(tw-utilities); ``` > 이 설정은 스타일 충돌 가능성이 있으므로 필요한 경우에만 사용합니다. --- version: 1.0.0 --- # Theming URL: /docs/getting-started/theming Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(handbook)/theming.mdx Vapor UI의 테마 시스템에 대해 설명합니다. *** title: Theming description: Vapor UI의 테마 시스템에 대해 설명합니다. ---------------------------------------- --- version: 1.0.0 --- # Design Tokens URL: /docs/getting-started/tokens Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(handbook)/tokens.mdx Vapor UI의 디자인 토큰에 대해 설명합니다. *** title: Design Tokens description: Vapor UI의 디자인 토큰에 대해 설명합니다. ---------------------------------------- --- version: 1.0.0 --- # Installation URL: /docs/getting-started/installation Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(overview)/installation.mdx Vapor UI를 프로젝트에 설치하고 첫 컴포넌트를 사용해보세요. *** title: Installation description: Vapor UI를 프로젝트에 설치하고 첫 컴포넌트를 사용해보세요. ------------------------------------------------- 이 문서를 완료하면 Vapor UI 패키지를 설치하고, 첫 번째 컴포넌트를 화면에 렌더링할 수 있습니다. ## 사전 준비 다음 환경이 필요합니다. | 요구사항 | 버전 | | :------ | :---- | | React | 17 이상 | | Node.js | 16 이상 | ## 1단계: 패키지 설치 패키지 매니저를 사용하여 Vapor UI를 설치합니다. ```package-install npm install @vapor-ui/core @vapor-ui/icons ``` ## 2단계: Portal 설정 Vapor UI는 Dialog, Popover 같은 팝업 컴포넌트에 Portal을 사용합니다. Portal 컴포넌트가 항상 페이지 최상단에 표시되도록 애플리케이션 레이아웃 루트에 다음 스타일을 추가합니다. ```tsx title="layout.tsx"

{children}

``` ```css title="styles.css" .root { isolation: isolate; } ``` 이 스타일은 `.root` 요소에 별도의 stacking context를 생성합니다. 이를 통해 팝업이 항상 페이지 콘텐츠 위에 표시되며, 다른 스타일의 `z-index` 속성과 충돌하지 않습니다. ## 3단계: 컴포넌트 사용 컴포넌트를 import하여 사용합니다. ```json doc-gen:file { "file": "./src/components/demo/examples/assemble-component.tsx", "codeblock": true } ``` ## 다음 단계 * [테마 설정하기](/theme/theme-provider) - 라이트/다크 모드 및 커스텀 테마 설정 방법 * [컴포넌트 살펴보기](./overview#components) - 다양한 UI 컴포넌트 사용법 --- version: 1.0.0 --- # Overview URL: /docs/getting-started/overview Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(overview)/overview.mdx 빠른 개발과 일관된 디자인을 위한 Vapor UI 디자인 시스템을 살펴보세요. *** title: Overview description: 빠른 개발과 일관된 디자인을 위한 Vapor UI 디자인 시스템을 살펴보세요. -------------------------------------------------------- 이 문서에서는 Vapor UI의 핵심 기능과 제공하는 컴포넌트 목록을 확인할 수 있습니다. ## Vapor UI 소개 Vapor UI는 개발자 경험과 디자인 일관성을 모두 만족시키는 React 컴포넌트 라이브러리입니다. 구름에서 개발한 세 번째 디자인 시스템으로, 실제 프로덕션에서 검증된 컴포넌트들을 제공합니다. ## 핵심 기능 * **모듈화된 구조**: 필요한 패키지만 선택적으로 설치하여 번들 크기를 최적화합니다. * **TypeScript 지원**: 모든 컴포넌트에 타입 정의가 포함되어 자동 완성과 타입 검사를 지원합니다. * **접근성 내장**: WCAG 2.1 AA 수준의 웹 접근성을 기본으로 제공합니다. * **Tailwind CSS 통합**: Tailwind 유틸리티 클래스로 컴포넌트를 빠르게 커스터마이징할 수 있습니다. * **다크 모드**: 라이트/다크 테마 자동 전환 시스템을 제공합니다. ## 적합한 프로젝트 Vapor UI는 다음과 같은 프로젝트에서 효과적으로 활용할 수 있습니다. * 빠른 프로토타이핑이 필요한 스타트업과 신규 프로젝트 * 일관된 디자인 시스템을 구축하려는 중대형 팀 * 접근성을 중요시하는 공공 서비스나 글로벌 서비스 * TypeScript 환경의 모던 React 프로젝트 * 디자인과 개발 간 협업이 중요한 조직 *** ## Components --- version: 1.0.0 --- # Design Principles URL: /docs/getting-started/principles Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/getting-started/(overview)/principles.mdx Vapor UI의 컴포넌트 아키텍처와 개발 철학을 이끄는 핵심 디자인 원칙 *** title: Design Principles description: Vapor UI의 컴포넌트 아키텍처와 개발 철학을 이끄는 핵심 디자인 원칙 ------------------------------------------------------ 이 문서에서는 Vapor UI의 설계 철학과 6가지 핵심 원칙을 설명합니다. 이 원칙들을 이해하면 컴포넌트를 더 효과적으로 활용할 수 있습니다. ## 1. Preset 기반의 컴파운드 패턴 Vapor UI는 합성 컴포넌트 패턴을 채택하여 편의성과 유연성을 함께 제공합니다. 빠른 구현이 필요할 때는 Preset 컴포넌트를, 세밀한 제어가 필요할 때는 Primitive 컴포넌트를 사용합니다. ```tsx // Preset 패턴 (빠르고 간편) Trigger Contents // Primitive 패턴 (완전한 제어) Trigger Contents ``` 이 접근법의 장점은 다음과 같습니다. * **빠른 시작**: Preset 컴포넌트로 즉시 구현할 수 있습니다. * **세밀한 제어**: Primitive 컴포넌트로 커스텀 동작을 구현할 수 있습니다. * **혼합 사용**: 같은 애플리케이션에서 두 패턴을 함께 사용할 수 있습니다. ## 2. 접근성 Vapor UI는 [Base UI](https://base-ui.com/react/overview/quick-start)를 기반으로 [WCAG 2.2](https://www.w3.org/TR/WCAG22/) AA를 준수합니다. [키보드 네비게이션](https://www.w3.org/TR/WCAG22/#keyboard-accessible)과 [포커스 표시](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance)를 기본으로 지원합니다. ### 접근성 기능 * **Base UI 통합**: ARIA 속성, 키보드 내비게이션, 스크린 리더를 자동으로 지원합니다. * **색상 대비 준수**: 자체 개발한 Color Generator가 WCAG AA/AAA 대비 비율을 보장합니다. * **수학적 디자인 토큰**: 일관된 시각적 위계를 위해 수학적 비율로 생성된 토큰을 사용합니다. ```tsx // 적절한 ARIA 속성과 키보드 처리가 자동으로 포함됨 설정 열기 ``` ### Color Generator 시스템 Color Generator는 지각적 색상 모델을 사용하여 접근성을 충족하는 색상 팔레트를 생성합니다. ```tsx // 색상이 자동으로 대비 요구사항을 충족함 Primary Success Warning ``` ## 3. 일관된 네이밍 규칙 모든 컴포넌트는 일관된 네이밍 규칙을 따릅니다. 이 규칙을 통해 컴포넌트 사용법을 예측할 수 있습니다. * **독립 컴포넌트**: 단일 이름을 사용합니다. * **합성 컴포넌트**: Dot Notation 표기법을 사용합니다. ```tsx // 단일 컴포넌트