# Component/Modal/BasicModal

## Props

> _Props extracted from Storybook argTypes (docgen unavailable)_


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `title` | `ReactNode` | No |  |  |
| `confirmText` | `string` | No |  |  |
| `cancelText` | `string` | No |  |  |
| `backButton` | `boolean` | No | false | 헤더 영역 타이틀 좌측 backButton 사용 유무 |
| `confirmButtonProps` | `ButtonProps` | No |  | ButtonProps를 confirmButton에 적용할 수 있습니다. |
| `cancelButtonProps` | `ButtonProps` | No |  | ButtonProps를 cancelButton에 적용할 수 있습니다. |
| `closeButton` | `boolean` | No | true |  |
| `dense` | `boolean` | No | false | 좁은 간격 사용 유무 |
| `contentProps` | `unknown` | No |  | 바디 영역 콘텐츠 ModalContentProps를 통한 커스텀이 가능합니다.<br />- [SpaceProps](https://github.com/croquiscom/pds/blob/main/src/styles/space.ts)<br />- maxHeight: 콘텐츠 영역 maxHeight을 커스텀할 수 있습니다. 지정하지 않을 경우 안전여백내에서 계산된 자동 최대 maxHeight값이 적용됩니다. <br />- scrollable: true일 경우 콘텐츠 영역에 overflow-y: auto값이 적용됩니다. |
| `header` | `ReactNode` | No |  | 헤더 영역을 커스텀할 수 있습니다. <br />- 기본 Header(title, backButton, closeButton)는 미노출됩니다. |
| `footer` | `ReactNode` | No |  | 푸터 영역을 커스텀할 수 있습니다. <br />- 기본 Footer(confirmText, cancelText)는 미노출됩니다. <br />- dense 속성이 적용되지 않습니다.<br />- fullScreen 속성이 true일 경우 자동 해당 영역은 fixed 처리 됩니다. |
| `fullScreen` | `boolean` | No | false | 전체화면 사용 유무, 헤더/푸터 영역이 자동 고정됩니다. |
| `onConfirm` | `() => void` | No |  |  |
| `onCancel` | `(reason: ModalCancelReason) => void` | No |  | reason을 포함한 cancel 이벤트를 전달합니다.<br />- cancelClick | escapeKeyPress | overlayClick |
| `onClickBackButton` | `() => void` | No |  | Modal Header backButton 클릭 이벤트 |
| `className` | `string` | No |  |  |
| `fill` | `boolean` | No | false | 100% 너비 사용 유무 |
| `zIndex` | `number` | No | 1010 |  |
| `opened` | `boolean` | No |  |  |
| `canClickOutside` | `boolean` | No | true | outside 영역 클릭시 닫힘 사용 여부 |
| `canCloseEscapeKey` | `boolean` | No | true | escapeKey 키이벤트 닫힘 사용 여부 |
| `width` | `CSSValueWithLength` | No | 480 | Modal 너비를 지정할 수 있습니다. |
| `onExited` | `() => void` | No |  | Modal destroy시 전달합니다. |
| `autoFocusButton` | `ModalActionButtonType | null` | No | null | autofocus 지정할 기본 버튼 요소 |
| `returnFocus` | `boolean` | No | true | reference 요소로 포커스 반환 여부. autoFocusButton이 지정될 경우 returnFocus값은 자동 false 처리됩니다. |


## 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" "medium" "small" "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 "submit" "reset" "button"` | No | button |  |
