다이얼로그

입력 폼이나 상세 정보를 현재 화면 위에 띄우는 모달 컨테이너다. 제목·설명·본문·푸터만 제공하는 얇은 래퍼이며, 내부 폼 구성과 액션 버튼은 호출자가 조립한다. 삭제 확인처럼 단일 확인 액션만 필요한 경우에는 ConfirmDialog 를 쓴다.

활용 방법

폼 모달

본문에는 Input·Select·Textarea 등을 조합하고, footer 에 취소/저장 버튼을 둔다.

Preview

tsx

<Dialog
  open={open}
  onClose={() => setOpen(false)}
  title="고객 메모"
  description="상담 후 남길 메모와 다음 액션을 정리한다."
  footer={<><button>취소</button><button>저장</button></>}
>
  <Input placeholder="고객명" />
  <Textarea rows={4} placeholder="메모" />
</Dialog>

크기

size 는 sm·md·lg 세 단계다. 대부분의 폼은 md, 짧은 선택은 sm, 상세 정보는 lg 를 쓴다.

Preview

tsx

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

사용 지침

· 일반 입력·상세 보기 모달에 쓴다. 단순 확인은 ConfirmDialog 를 쓴다.
· footer 버튼은 호출자가 넣는다. 도메인별 저장/취소 문구를 명확히 하기 위함이다.
· 너무 복잡한 편집 화면은 Dialog 대신 별도 페이지나 드로어 패턴을 고려한다.

속성

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