'). | | `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에 유지할지 여부입니다. | # 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 } ``` ## Anatomy *** 컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. ## 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` 또는 함수를 인수로 받습니다. | # 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 } ``` ## Anatomy *** 컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. ## 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` 또는 함수를 인수로 받습니다. | # 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 } ``` ## Anatomy *** 컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. *** ### 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` | `-` | 네비게이션 메뉴의 자식 컴포넌트들입니다. | # 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 } ``` ## Anatomy *** 컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. ## 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`로 설정하세요. | # 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` | | # 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 } ``` ## Anatomy *** 컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. ## 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에 유지할지 여부 | # 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 } ``` ## Anatomy *** 컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. ## 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` 또는 함수를 인수로 받습니다. | # 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 } ``` ## Anatomy *** 컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. ## 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`로 설정하세요. | # 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 또는 렌더링할 요소를 반환하는 함수를 받습니다. | # 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 } ``` ## Anatomy *** 컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. ## 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` 또는 함수를 인수로 받습니다. | # 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 } ``` ## Anatomy *** 컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. ## 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` | 컴포넌트에 자식 요소를 추가할 수 있습니다. | # 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 } ``` ## Anatomy *** 컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. ## 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에 유지할지 여부입니다. | # 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` | | # 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` 또는 함수를 인수로 받습니다. | # 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의 값이 변경될 때 호출되는 이벤트 핸들러입니다. | # 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 } ``` ## Anatomy *** 컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. ## 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의 우선순위입니다. 높은 값이 먼저 표시됩니다. | # 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 } ``` ## Anatomy *** 컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. ## 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` 또는 함수를 인수로 받습니다. | # Form URL: /docs/components/patterns/form Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/patterns/form.mdx 여러 개의 입력 단위를 하나로 묶어 사용자로부터 정보를 수집하는 폼 영역 *** title: Form description: 여러 개의 입력 단위를 하나로 묶어 사용자로부터 정보를 수집하는 폼 영역 previewImageUrl: /images/form-preview\.svg ------------------------------------------ ### Type: Login ```json doc-gen:file { "file": "./src/components/demo/examples/forms/login-form.tsx", "codeblock": true } ``` ```json doc-gen:file { "file": "./src/components/demo/examples/forms/login-form.css", "codeblock": true } ``` ### Type: SignUp ```json doc-gen:file { "file": "./src/components/demo/examples/forms/signup-form.tsx", "codeblock": true } ``` ```json doc-gen:file { "file": "./src/components/demo/examples/forms/signup-form.css", "codeblock": true } ``` ### Type: Authentication ```json doc-gen:file { "file": "./src/components/demo/examples/forms/authentication-form.tsx", "codeblock": true } ``` ```json doc-gen:file { "file": "./src/components/demo/examples/forms/authentication-form.css", "codeblock": true } ``` ### Type: Research ```json doc-gen:file { "file": "./src/components/demo/examples/forms/research-form.tsx", "codeblock": true } ``` ```json doc-gen:file { "file": "./src/components/demo/examples/forms/research-form.css", "codeblock": true } ``` ### Type: Filter ```json doc-gen:file { "file": "./src/components/demo/examples/forms/filter-form.tsx", "codeblock": true } ``` ```json doc-gen:file { "file": "./src/components/demo/examples/forms/filter-form.css", "codeblock": true } ``` ### Type: BottomSheetFilter ```json doc-gen:file { "file": "./src/components/demo/examples/forms/sheet-form.tsx", "codeblock": true } ``` ```json doc-gen:file { "file": "./src/components/demo/examples/forms/sheet-form.css", "codeblock": true } ``` # Navbar URL: /docs/components/patterns/nav-bar Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/patterns/nav-bar.mdx 사용자의 액션에 대한 피드백 혹은 서비스에 대한 메시지를 제공할 때 사용할 수 있습니다. 상황에 따라 컬러와 좌측 아이콘, 닫기 버튼을 적절히 사용합니다. *** title: Navbar description: 사용자의 액션에 대한 피드백 혹은 서비스에 대한 메시지를 제공할 때 사용할 수 있습니다. 상황에 따라 컬러와 좌측 아이콘, 닫기 버튼을 적절히 사용합니다. previewImageUrl: /images/nav-bar-preview\.svg --------------------------------------------- ### Left Aligned Navbar ```json doc-gen:file { "file": "./src/components/demo/examples/navbars/block01.tsx", "codeblock": true } ``` ```json doc-gen:file { "file": "./src/components/demo/examples/navbars/block.css", "codeblock": true } ``` ### Center Aligned Navbar ```json doc-gen:file { "file": "./src/components/demo/examples/navbars/block02.tsx", "codeblock": true } ``` ```json doc-gen:file { "file": "./src/components/demo/examples/navbars/block.css", "codeblock": true } ``` ### Right Aligned Navbar ```json doc-gen:file { "file": "./src/components/demo/examples/navbars/block03.tsx", "codeblock": true } ``` ```json doc-gen:file { "file": "./src/components/demo/examples/navbars/block.css", "codeblock": true } ``` ### Navbar with Login Button ```json doc-gen:file { "file": "./src/components/demo/examples/navbars/block04.tsx", "codeblock": true } ``` ```json doc-gen:file { "file": "./src/components/demo/examples/navbars/block.css", "codeblock": true } ``` ### Logo Centered Navbar ```json doc-gen:file { "file": "./src/components/demo/examples/navbars/block05.tsx", "codeblock": true } ``` ```json doc-gen:file { "file": "./src/components/demo/examples/navbars/logo.css", "codeblock": true } ``` ### Page Navigation Navbar ```json doc-gen:file { "file": "./src/components/demo/examples/navbars/block06.tsx", "codeblock": true } ``` ```json doc-gen:file { "file": "./src/components/demo/examples/navbars/logo.css", "codeblock": true } ``` # Table URL: /docs/components/patterns/table Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/patterns/table.mdx 데이터의 구조화된 표현을 제공하는 데 사용됩니다. *** title: Table description: 데이터의 구조화된 표현을 제공하는 데 사용됩니다. previewImageUrl: /images/table-preview\.svg ------------------------------------------- 이 문서는 대량의 데이터를 다루는 Data Table의 구현 예시를 안내합니다. Data Table은 데이터를 효율적으로 시각화하고 관리하는 강력한 도구이지만, 내부적으로 복잡한 상태 관리와 로직을 필요로 합니다. 이러한 기능을 컴포넌트 내부에 강결합하면 유지보수가 어렵고 확장성이 떨어지는 문제가 발생할 수 있습니다. 이에 따라 Vapor UI의 Table 컴포넌트는 순수한 뷰(View) 역할에 집중하여 기본적인 구조와 스타일을 제공합니다. 이 문서에서는 `@tanstack/react-table`과 같은 Headless UI 라이브러리를 활용하여 다양한 기능을 유연하게 구현하는 방법을 예시로 제공합니다. ### Basic ```json doc-gen:file { "file": "./src/components/demo/examples/table/default-table.tsx", "codeblock": true } ``` ### Checkbox ```json doc-gen:file { "file": "./src/components/demo/examples/table/checkbox.tsx", "codeblock": true } ``` ### Ordering ```json doc-gen:file { "file": "./src/components/demo/examples/table/ordering.tsx", "codeblock": true } ``` ### Sticky ```json doc-gen:file { "file": "./src/components/demo/examples/table/sticky.tsx", "codeblock": true } ``` ### Collapsed ```json doc-gen:file { "file": "./src/components/demo/examples/table/collapsed.tsx", "codeblock": true } ``` ### Sort ```json doc-gen:file { "file": "./src/components/demo/examples/table/sort.tsx", "codeblock": true } ``` ### Scroll ```json doc-gen:file { "file": "./src/components/demo/examples/table/scroll.tsx", "codeblock": true } ``` ### Filter ```json doc-gen:file { "file": "./src/components/demo/examples/table/filter.tsx", "codeblock": true } ``` ### Pagination ```json doc-gen:file { "file": "./src/components/demo/examples/table/pagination.tsx", "codeblock": true } ``` # 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 컴포넌트의 조합 패턴과 활용 방법에 대해 설명합니다. ------------------------------------------------------------------------------------------------------------ 준비 중입니다. # 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 컴포넌트의 스타일링 방식에 대해 설명합니다. ---------------------------------------------- # 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); ``` > 이 설정은 스타일 충돌 가능성이 있으므로 필요한 경우에만 사용합니다. # 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의 테마 시스템에 대해 설명합니다. ---------------------------------------- # 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의 디자인 토큰에 대해 설명합니다. ---------------------------------------- # 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 컴포넌트 사용법 # 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 # 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 // 단일 컴포넌트