Dialog

Dialog (다이얼로그)

다이얼로그 프롬프트를 화면에 표시할 때 사용하는 컴포넌트예요. 사용자에게 중요한 정보를 알리거나, 확인을 요청하거나, 간단한 입력 폼을 보여줄 때 유용해요.

출처: 문서

본문

사용법 (Usage)

import { Dialog } from "@chakra-ui/react"

<Dialog.Root>
  <Dialog.Trigger />
  <Dialog.Backdrop />
  <Dialog.Positioner>
    <Dialog.Content>
      <Dialog.CloseTrigger />
      <Dialog.Header>
        <Dialog.Title />
      </Dialog.Header>
      <Dialog.Body />
      <Dialog.Footer />
    </Dialog.Content>
  </Dialog.Positioner>
</Dialog.Root>

예제 (Examples)

크기 (Sizes)

size prop을 사용해서 다이얼로그 컴포넌트의 크기를 바꿀 수 있어요.

| 예제 (dialog-with-sizes) |

커버 (Cover)

size="cover" prop을 사용하면 다이얼로그 컴포넌트가 화면 전체를 덮으면서도 뒤쪽의 페이지 일부를 살짝 드러내게 할 수 있어요.

| 예제 (dialog-with-cover) |

전체 화면 (Fullscreen)

size="full" prop을 사용하면 다이얼로그 컴포넌트가 화면 전체를 차지하게 만들 수 있어요.

| 예제 (dialog-with-fullscreen) |

반응형 크기 (Responsive Size)

size prop에 반응형 값을 사용하면 다이얼로그가 다양한 화면 크기에 맞춰 적응하도록 만들 수 있어요.

스타일이 제대로 유지되도록 base 대신 정확한 브레이크포인트 값을 사용하는 걸 권장해요.

// ❌ 브레이크포인트 사이에서 스타일이 새어나올 수 있어요
<Dialog.Root size={{ base: "full", md: "lg" }}>{/* ... */}</Dialog.Root>

// 이렇게 하면 동작해요 ✅
<Dialog.Root size={{ mdDown: "full", md: "lg" }}>{/* ... */}</Dialog.Root>

| 예제 (dialog-with-responsive-size) |

배치 (Placement)

placement prop을 사용해서 다이얼로그 컴포넌트의 위치를 바꿀 수 있어요.

| 예제 (dialog-with-placement) |

제어 (Controlled)

open과 onOpenChange prop을 사용해서 다이얼로그 컴포넌트의 표시 여부를 제어할 수 있어요.

| 예제 (dialog-controlled) |

여러 개의 트리거 (Multiple Triggers)

행마다 다이얼로그를 만들지 마세요. 하나의 Root 아래에 있는 각 Trigger에 value를 넣어주세요. 컨텍스트에서 triggerValue를 읽어서 제목과 본문을 채우면 돼요.

| 예제 (dialog-with-multiple-triggers) |

스토어 (Store)

다이얼로그를 제어하는 또 다른 방법은 RootProvider 컴포넌트와 useDialog 스토어 훅을 사용하는 거예요.

이렇게 하면 다이얼로그 바깥에서도 다이얼로그의 상태와 메서드에 접근할 수 있어요.

| 예제 (dialog-with-store) |

컨텍스트 (Context)

DialogContext 컴포넌트를 사용해서 다이얼로그 바깥에서 다이얼로그의 상태와 메서드에 접근할 수 있어요.

| 예제 (dialog-with-context) |

중첩 다이얼로그 (Nested Dialogs)

Dialog.Root 컴포넌트 안에 또 다른 Dialog.Root 컴포넌트를 넣어 다이얼로그를 중첩할 수 있어요.

| 예제 (dialog-nested) |

팝오버에서 열기 (Open From Popover)

팝오버 안에서 다이얼로그를 열 수 있어요. 통합 z-index 시스템 덕분에 다이얼로그가 팝오버 위에 나타나요.

| 예제 (dialog-open-from-popover) |

메뉴에서 열기 (Open From Menu)

삭제 확인처럼 메뉴 아이템 액션에서 다이얼로그를 열려면 제어형 다이얼로그를 사용하세요.

| 예제 (dialog-open-from-menu) |

초기 포커스 (Initial Focus)

initialFocusEl prop을 사용해서 다이얼로그 컴포넌트의 초기 포커스를 설정할 수 있어요.

| 예제 (dialog-with-initial-focus) |

initialFocusEl이 없으면 포커스가 data-autofocus로 표시된 첫 번째 요소로 이동하고, 그런 요소가 없다면 data-no-autofocus로 표시되지 않은 첫 번째 탭 가능(tabbable) 요소로 이동해요.

<Input data-autofocus />

내부 스크롤 (Inside Scroll)

scrollBehavior=inside prop을 사용하면 콘텐츠가 넘칠 때 다이얼로그의 스크롤 동작을 바꿀 수 있어요.

| 예제 (dialog-with-inside-scroll) |

외부 스크롤 (Outside Scroll)

scrollBehavior=outside prop을 사용하면 콘텐츠가 넘칠 때 다이얼로그의 스크롤 동작을 바꿀 수 있어요.

| 예제 (dialog-with-outside-scroll) |

모션 프리셋 (Motion Preset)

motionPreset prop을 사용해서 다이얼로그 컴포넌트의 애니메이션을 바꿀 수 있어요.

| 예제 (dialog-with-motion-preset) |

알림 다이얼로그 (Alert Dialog)

role: "alertdialog" prop을 설정하면 다이얼로그 컴포넌트를 알림 다이얼로그로 바꿀 수 있어요.

| 예제 (dialog-with-role) |

닫기 버튼을 바깥에 두기 (Close Button Outside)

Dialog.CloseTrigger 컴포넌트를 커스터마이즈해서 닫기 버튼을 다이얼로그 컴포넌트 바깥에 배치하는 예시예요.

| 예제 (dialog-with-close-outside) |

논모달 다이얼로그 (Non-Modal Dialog)

접근성 문제 때문에 논모달 다이얼로그는 권장하지 않아요. 꼭 필요하다면 다음과 같이 할 수 있어요.

• modal prop을 false로 설정
• Dialog.Positioner 컴포넌트에 pointerEvents를 none으로 설정
• (선택 사항) closeOnInteractOutside prop을 false로 설정

| 예제 (dialog-non-modal) |

DataList (DataList)

DataList 컴포넌트와 다이얼로그 컴포넌트를 조합하는 예시예요.

| 예제 (dialog-with-datalist) |

Props

Root

| PropTable (Dialog / Root) |

Trigger

| PropTable (Dialog / Trigger) |

더 알아보기 (Learn more)

• Dialog 공식 문서
• Ark UI Dialog