← Kitchen Sink로 돌아가기

Alert Dialog

확인 다이얼로그 컴포넌트 - 사용자 확인이 필요한 작업에 사용

참고: Alert Dialog는 shadcn/ui 구조를 참고하여 구현되었습니다. 접근성 속성(ARIA)이 포함되어 있으며, 프론트엔드에서 React로 전환 시 동일한 구조를 사용할 수 있습니다.

기본 사용법

타이틀 있음, 버튼 2개
<AlertDialogTrigger dialogId="demo-1"> 다이얼로그 열기 </AlertDialogTrigger> <AlertDialog id="demo-1"> <AlertDialogContent dialogId="demo-1"> <AlertDialogHeader> <AlertDialogTitle> Remove this item? </AlertDialogTitle> <AlertDialogDescription> This item will be removed from your cart. </AlertDialogDescription> </AlertDialogHeader> <AlertDialogFooter> <AlertDialogActionOutline dialogId="demo-1">Cancel</AlertDialogActionOutline> <AlertDialogActionPrimary dialogId="demo-1">Remove</AlertDialogActionPrimary> </AlertDialogFooter> </AlertDialogContent> </AlertDialog>

타이틀 없음, 버튼 1개

설명만 있고 확인 버튼 1개
<AlertDialog id="demo-2"> <AlertDialogContent dialogId="demo-2"> <AlertDialogDescription> Are you sure you want to proceed? </AlertDialogDescription> <AlertDialogFooter> <AlertDialogActionPrimary dialogId="demo-2">Confirm</AlertDialogActionPrimary> </AlertDialogFooter> </AlertDialogContent> </AlertDialog>

타이틀 없음, 버튼 2개

설명만 있고, 버튼 2개
<AlertDialog id="demo-3"> <AlertDialogContent dialogId="demo-3"> <AlertDialogDescription> Please note that if you wish to change the shippong country/region, it is likely that the policies of the products, prices, and promotions may differ due to the characteristics of each country and the shippong fees. </AlertDialogDescription> <AlertDialogFooter> <AlertDialogActionOutline dialogId="demo-3">Cancel</AlertDialogActionOutline> <AlertDialogActionPrimary dialogId="demo-3">Confirm</AlertDialogActionPrimary> </AlertDialogFooter> </AlertDialogContent> </AlertDialog>

타이틀 없음, 버튼 2개(버튼 텍스트 2줄)

설명만 있고, 버튼 2개(버튼 텍스트 2줄)
<AlertDialog id="demo-4"> <AlertDialogContent dialogId="demo-4"> <AlertDialogDescription> Please note that if you wish to change the shippong country/region, it is likely that the policies of the products, prices, and promotions may differ due to the characteristics of each country and the shippong fees. </AlertDialogDescription> <AlertDialogFooter> <AlertDialogActionOutline dialogId="demo-4">Cancel</AlertDialogActionOutline> <AlertDialogActionPrimary dialogId="demo-4">Confirm</AlertDialogActionPrimary> </AlertDialogFooter> </AlertDialogContent> </AlertDialog>

주요 기능

접근성:
  • ARIA 속성 자동 설정 (role="dialog", aria-modal="true")
  • 타이틀과 설명 ID 자동 연결 (aria-labelledby, aria-describedby)
  • Escape 키로 다이얼로그 닫기
  • 배경 오버레이 클릭 시 닫기
  • 포커스 트랩 (프론트엔드에서 구현 필요)
스타일링:
  • 피그마 디자인 토큰 사용
  • Tailwind CSS 클래스로 스타일링
  • 버튼 개수에 따른 자동 레이아웃 (1개: w-full, 2개: 수평 정렬)
  • AlertDialogActionOutline: outline 스타일 (흰색 배경, 테두리)
  • AlertDialogActionPrimary: default 스타일 (배경색 있는 버튼)
사용 시 주의사항:
  • 각 다이얼로그는 고유한 id를 가져야 합니다
  • AlertDialogTrigger의 dialogId와 AlertDialog의 id가 일치해야 합니다
  • AlertDialogActionOutline과 AlertDialogActionPrimary의 dialogId도 동일해야 합니다
  • AlertDialogActionOutline은 outline 스타일(테두리 있는 버튼), AlertDialogActionPrimary는 default 스타일(배경색 있는 버튼)입니다
  • 타이틀이 없을 경우 AlertDialogTitle을 생략할 수 있습니다
  • 버튼이 1개일 경우 자동으로 w-full이 적용됩니다