Modal

한눈에#

진행 중인 작업을 멈추고 한 가지 결정을 받는 오버레이 다이얼로그입니다 — 포커스 트랩·Escape/배경 닫기·포커스 복원·스크롤 잠금을 내장한 제어 컴포넌트입니다.

트리거를 눌러 포커스 트랩·Escape·배경 닫기를 직접 확인하세요:

사용 시점#

흐름을 멈추고 한 가지 결정을 받는 차단형 다이얼로그면 Modal — 측면·하단·가벼운 정보는 다른 컴포넌트입니다.

해부#

오버레이는 포털로 떠서 인라인 렌더가 안 되므로, 열린 패널을 재현해 토큰 실측을 핀으로 얹습니다(실제 동작은 위 트리거).

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

import { Modal, Button } from '@wds/ui-web';

<Modal
  open={open}
  onClose={() => setOpen(false)}
  title="변경 사항을 저장할까요?"
>
  저장하지 않은 변경 사항이 있습니다.
</Modal>

변형#

배경 클릭 닫기는 기본 동작이며, 파괴적 확인 등 명시적 선택이 필요한 흐름은 closeOnBackdrop={false}로 끕니다(Escape와 닫기 버튼은 항상 동작).

크기#

상태#

제어 컴포넌트입니다 — 열림/닫힘은 소비자의 open prop이 결정하고, 닫힘 요청(Escape·배경·닫기 버튼)은 전부 onClose 콜백으로 전달됩니다. 내부에 열림 상태를 갖지 않으므로 URL·폼 흐름과 동기화하기 쉽습니다.

Props#

접근성#

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족 — 폭 3단은 P5 패리티 시 재평가).