Alert Dialog - Kitchen Sink

참고: 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이 적용됩니다