다이얼로그

입력 폼이나 상세 정보를 현재 지면 위에 띄우는 Muse의 모달 컨테이너다. Editorial Web에서는 독자의 흐름을 끊지 않도록 제목·설명·본문·푸터만 제공하는 얇은 래퍼로 두고, 내부 구성은 호출자가 조립한다.

활용 방법

편집 메모 모달

본문에는 짧은 설명이나 폼을 두고, footer 에 취소/저장 액션을 둔다.

Preview

tsx

<Dialog
  open={open}
  onClose={() => setOpen(false)}
  title="Editor's note"
  description="브랜드 스토리의 보조 정보를 현재 지면 위에 띄운다."
  footer={<><Button>닫기</Button><Button variant="primary">저장</Button></>}
>
  <p>본문 콘텐츠</p>
</Dialog>

크기

size 는 sm·md·lg 세 단계다. 짧은 메모는 sm, 일반 폼은 md, 상세 정보는 lg 를 쓴다.

Preview

tsx

<Dialog size="sm" ... />
<Dialog size="md" ... />
<Dialog size="lg" ... />

사용 지침

· 일반 입력·상세 보기 모달에 쓴다. 단순 확인은 별도 confirm 패턴을 고려한다.
· 긴 기사나 복잡한 편집 화면은 Dialog 대신 별도 페이지로 보낸다.
· footer 버튼은 호출자가 넣어 문맥에 맞는 액션 문구를 유지한다.

속성

이름	타입	기본값	설명
open	boolean	-	열림 상태
onClose	() => void	-	닫기 콜백: X 버튼, backdrop, Esc 에서 호출
title	ReactNode	-	상단 제목
description	ReactNode	-	제목 아래 보조 설명
children	ReactNode	-	본문 콘텐츠
footer	ReactNode	-	하단 액션 영역
size	"sm" \| "md" \| "lg"	"md"	모달 폭
closeLabel	string	"닫기"	닫기 버튼 aria-label