# Component/Modal/FloatingModal

딤드 처리 없이 특정 위치에 바로 띄울 수 있는 모달입니다.
상하좌우 여백과 사이 간격만 맞추면 안의 내용은 자유롭게 편집하여 사용할 수 있습니다.

## Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `opened` | `boolean` | Yes |  |  |
| `onClose` | `(() => void) | undefined` | No |  |  |
| `onOpen` | `(() => void) | undefined` | No |  |  |
| `width` | `CSSValueWithLength | undefined` | No |  |  |
| `position` | `undefined "bottom-right" "top-right" "bottom-left" "top-left"` | No | 'bottom-right' |  |
| `title` | `ReactNode` | No |  |  |
| `hasTransitionDelay` | `boolean | undefined` | No | true | 기본적으로 open transition delay가 0.15s가 있습니다. delay를 제거하려면 false로 설정합니다. |
| `confirmText` | `string | undefined` | No |  |  |
| `confirmButtonProps` | `ModalButtonProps | undefined` | No |  |  |
| `cancelText` | `string | undefined` | No |  |  |
| `cancelButtonProps` | `ModalButtonProps | undefined` | No |  |  |
| `autoFocusButton` | `ModalActionButtonType | null | undefined` | No | null | autofocus 지정할 기본 버튼 요소 |
| `backButton` | `boolean | undefined` | No | false | 헤더 영역 타이틀 좌측 backButton 사용 유무 |
| `closeButton` | `boolean | undefined` | No | true |  |
| `contentProps` | `ModalContentProps | undefined` | No |  |  |
| `footer` | `ReactNode` | No |  | 푸터 영역을 커스텀할 수 있습니다.  - 기본 Footer(confirmText, cancelText)는 미노출됩니다. |
| `onConfirm` | `(() => void) | undefined` | No |  |  |
| `onCancel` | `(() => void) | undefined` | No |  | reason을 포함한 cancel 이벤트를 전달합니다.  - 'cancelClick' | 'escapeKeyPress' | 'overlayClick' |
| `onClickBackButton` | `(() => void) | undefined` | No |  | Modal Header backButton 클릭 이벤트 |
| `className` | `string | undefined` | No |  |  |
| `openerTriggerEvent` | `undefined "none" "click"` | No | click |  |
| `canClickOutside` | `boolean | undefined` | No | false |  |
| `canCloseEscapeKey` | `boolean | undefined` | No | false |  |
| `trigger` | `ReactNode` | Yes |  |  |


## Subcomponents


### Button



#### Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `fill` | `boolean | undefined` | No |  |  |
| `kind` | `undefined "primary" "secondary" "black" "negative" "outlined_primary" "outlined_secondary" "outlined_black" "outlined_negative"` | No | secondary |  |
| `size` | `undefined "xsmall" "small" "medium" "large" "xlarge" "xxlarge"` | No | medium |  |
| `loading` | `boolean | undefined` | No | false |  |
| `startIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  | 버튼 좌측 영역에 렌더링 될 아이콘 요소  - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다.  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
| `endIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  | 버튼 우측 영역에 렌더링 될 아이콘 요소  - Icon 컴포넌트 color props가 있더라도 kind 따라 currentColor가 지정됩니다.  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 ButtonSize에 따라 고정됩니다. |
| `asChild` | `boolean | undefined` | No | false | true로 설정 시, 기본 DOM 요소를 렌더링하지 않고 자식 컴포넌트에 props와 동작을 전달합니다.  reference: https://www.radix-ui.com/primitives/docs/guides/composition |
| `type` | `undefined "button" "submit" "reset"` | No | button |  |