다이얼로그

Betelgeuse 의 다이얼로그는 현재 화면 위에 띄우는 네오브루탈 모달이다. 두꺼운 검은 테두리와 하드 섀도로 배경과 분리된 포스터형 판을 만들고, 대문자 제목과 굵은 본문으로 결정을 요구하는 순간을 강하게 드러낸다.

활용 방법

검토 모달

다이얼로그는 position:fixed 전체화면 모달이라 카드 안에 인라인으로 펼치지 못한다. 실제 화면에서는 트리거를 누르면 배경 위에 뜬다. 본문과 footer 는 호출자가 조립한다.

Preview

tsx

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>검토 열기</Button>
<Dialog
  open={open}
  onClose={() => setOpen(false)}
  title="배포 검토"
  description="선택한 미션을 지금 라이브로 전환한다."
  footer={
    <>
      <Button variant="ghost" onClick={() => setOpen(false)}>취소</Button>
      <Button variant="primary" onClick={() => setOpen(false)}>배포</Button>
    </>
  }
>
  <p>3개 미션이 즉시 라이브 상태가 된다.</p>
</Dialog>

위험 확인

되돌릴 수 없는 작업은 danger 버튼과 짧은 본문으로 결과를 분명히 한다. footer 의 취소를 왼쪽에 둬 실수 클릭을 줄인다.

Preview

tsx

<Dialog
  open={open}
  onClose={() => setOpen(false)}
  title="미션 삭제"
  description="이 작업은 되돌릴 수 없다."
  footer={
    <>
      <Button variant="ghost" onClick={() => setOpen(false)}>취소</Button>
      <Button variant="danger" onClick={handleDelete}>삭제</Button>
    </>
  }
/>

크기

sm 은 단순 확인, md 는 기본, lg 는 폼이나 상세 검토처럼 내용이 많은 모달에 쓴다.

Preview

tsx

<Dialog open size="sm" title="빠른 확인" onClose={close}>...</Dialog>
<Dialog open size="md" title="배포 검토" onClose={close}>...</Dialog>
<Dialog open size="lg" title="상세 검토" onClose={close}>...</Dialog>

스타일 원칙

· 배경은 어둡게 덮어 모달 판을 배경과 분리한다.
· 제목은 대문자와 굵은 굵기로 결정의 무게를 드러낸다.
· footer 는 취소와 확정 액션을 좌우로 나눠 배치한다.

속성

이름	타입	기본값	설명
open	boolean	-	열림 상태 (필수)
title	ReactNode	-	상단 제목 (필수)
description	ReactNode	-	제목 아래 보조 설명
children	ReactNode	-	본문 콘텐츠
footer	ReactNode	-	하단 액션 영역
size	"sm" \| "md" \| "lg"	"md"	모달 폭
closeLabel	string	"닫기"	닫기 버튼 접근성 라벨
onClose	() => void	-	닫기 콜백 (필수)