ShardCN DialogProps

기본 모달 컨트롤

• open?: boolean

  모달이 열려 있는지(true), 닫혀 있는지(false)를 제어합니다.

• onOpenChange?: (open: boolean) => void

  모달의 열림/닫힘 상태가 변경될 때 실행되는 콜백 함수입니다.

• onClose?: () => void

  모달이 닫힐 때 실행되는 콜백 함수입니다.

• modal?: boolean

  true이면 모달 외부를 클릭하면 닫히도록 하고, false이면 외부 클릭 시 닫히지 않습니다.

• dismissible?: boolean (기본값: true)

  false이면 드래깅, 외부 클릭, ESC 키 입력 등으로 모달이 닫히지 않도록 설정할 수 있습니다.

• defaultOpen?: boolean

  true이면 기본적으로 열린 상태에서 시작합니다.

드래그 및 스냅 포인트 관련 속성

이 모달은 단순한 Dialog가 아니라, 드래그해서 높이를 조정할 수 있는 드로어(drawer) 스타일을 지원합니다.

• snapPoints?: (number | string)[]

  드로어가 정지할 높이(% 또는 px 단위) 목록을 정의합니다.
  예: [0.2, 0.5, 0.8] → 화면의 20%, 50%, 80% 높이에서 멈출 수 있음.

• activeSnapPoint?: number | string | null

  현재 활성화된 스냅 포인트 값입니다.

• setActiveSnapPoint?: (snapPoint: number | string | null) => void

현재 활성화된 스냅 포인트를 변경하는 함수입니다.

• fadeFromIndex?: number

  특정 스냅 포인트 인덱스 이후부터 오버레이가 페이드 효과를 갖도록 설정합니다.

• onDrag?: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void

  사용자가 모달을 드래그할 때 실행되는 콜백 함수입니다.

• onRelease?: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void

드래그를 놓았을 때 실행되는 콜백 함수입니다.

• handleOnly?: boolean (기본값: false)

  true이면 특정 Handle 컴포넌트를 통해서만 드래그할 수 있도록 제한합니다.

• fixed?: boolean

  true이면 드로어를 고정된 위치에서 크기만 조정하도록 설정합니다.

• snapToSequentialPoint?: boolean (기본값: false)

  true이면 드래그 속도에 상관없이 스냅 포인트를 하나씩만 이동하도록 설정합니다.

## 애니메이션 및 스크롤 관련 속성

• closeThreshold?: number (기본값: 0.25)

  사용자가 드래그했을 때 몇 % 이상 이동하면 모달이 닫힐지 설정합니다.
  예: 0.5 → 화면 높이의 50% 이상 드래그하면 닫힘.

• scrollLockTimeout?: number (기본값: 500ms)

  내부 콘텐츠 스크롤 후 드래그가 다시 활성화되기까지의 대기 시간.

• disablePreventScroll?: boolean (기본값: false)

  true이면 모달이 열릴 때 문서(body) 스크롤을 막지 않음.

• preventScrollRestoration?: boolean

  true이면 모달이 닫힌 후 페이지 스크롤 위치를 원래대로 복원하지 않음.

• repositionInputs?: boolean (기본값: true when snapPoints is defined)

  true이면 키보드가 가리는 입력 필드들을 스크롤하는 대신 위치를 자동 조정.

기타 속성

• shouldScaleBackground?: boolean

  모달이 열릴 때 배경을 축소하는 효과를 적용할지 여부.

• setBackgroundColorOnScale?: boolean (기본값: true)

  false이면 모달이 열릴 때 배경색을 변경하지 않음.

• onAnimationEnd?: (open: boolean) => void

  모달의 열림/닫힘 애니메이션이 끝났을 때 실행되는 콜백 함수.

• autoFocus?: boolean

  true이면 모달이 열릴 때 자동으로 포커스를 맞춤.

• direction?: 'top' | 'bottom' | 'left' | 'right' (기본값: 'bottom')

  모달이 어느 방향에서 나타날지를 설정.