# Alert Dialog URL: /components/alert-dialog Source: https://github.com/daangn/seed-design/blob/dev/docs/content/components/alert-dialog.mdx 사용자의 확인이 반드시 필요한 경우 강력한 표현 및 경고 수단으로 활용하는 컴포넌트입니다. | Platform | Status | | --- | --- | | Figma | Done | | [React](/react/components/alert-dialog) | Done | | Lynx | Not Ready | | iOS | Done | | Android | Done | ## Anatomy ![Alert Dialog의 Anatomy 이미지. Backdrop(Overlay)와 Dialog Content로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/12f3e032-8355-4c2d-81e2-5fd7ff04de94) Alert Dialog는 Backdrop(Overlay)와 Dialog Content가 결합된 형태로 하나의 컴포넌트로 제공됩니다. ## Properties ### Layout Property ![Alert Dialog의 Layout Property](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/8b49b17f-ef71-455a-9fd8-b01cebf52bc3) [Action Button](/components/action-button) 가로 배열을 기본으로 제공합니다. [Action Button](/components/action-button) Label 길이가 긴 경우 세로 배열을 사용할 수 있습니다. ### Show Title ![Alert Dialog의 Show Title Property - 제목 표시 여부](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/8bec3b34-10e1-4cab-a048-87bce55223f9) 상황에 따라서 제목을 표시하지 않을 수 있습니다. ## Guidelines ### 알림 또는 확인이 필요한 상황에서 사용 ![Alert Dialog를 알림 또는 확인이 필요한 상황에서 사용하는 예시 - Neutral](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/056e6cd0-6684-496d-a59e-0b5e626593ae) ![Alert Dialog를 알림 또는 확인이 필요한 상황에서 사용하는 예시 - Neutral](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/bd03add4-29cc-4e4e-9f10-6ba9047e96f4) Alert Dialog는 사용자가 반드시 알아야할 정보나 옵션 선택이 필요한 경우 사용할 수 있습니다. 기본적으로 Neutral 사용을 권장하지만, 제품의 핵심 가치와 맞닿아 있는 정보를 안내하는 경우 Brand를 사용할 수 있습니다. ### 경고가 필요한 상황에서 사용 ![Alert Dialog를 경고가 필요한 상황에서 사용하는 예시 - Critical](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/15f89420-a4e0-4c2d-953c-251a8e4ac893) 데이터 삭제, 사용자가 작성한 내용이 지워질 수 있는 경우, 설정 초기화 등 사용자가 행동한 무언가가 유실될 수 있는 상황에서는 Critical로 표현하세요. 경고가 필요한 액션을 의미하는 버튼이 Critical로 표시되어야 합니다. ### 긴 버튼 Label을 사용하는 경우 ![긴 버튼 Label을 사용하는 경우 - Responsive-wrapping 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/b76d237c-968d-42f9-a26a-54f2213d5cbb) 긴 Action Button Label이 필요하거나 번역했을 때 의도하지 않게 길어지는 경우 Action Button 레이아웃이 Overflow될 수 있습니다. **Alert Dialog는 Responsive-wrapping 컨테이너를 제공하기 때문에 설정된 로직에 따라서 자동으로 레이아웃을 전환됩니다.** ### Nonpreferred 레이아웃 사용하기 (사용 시 주의) ![None preferred 레이아웃 사용 예시 - Secondary Ghost Button](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/bf1cdfef-cf23-49c4-8122-d53138995c1b) Primary Action Button과 Secondary Action Button 사이에 중요도 차이가 큰 경우 해당 레이아웃 옵션을 사용할 수 있습니다. 중요도는 현재 맥락에서 강조가 필요한 정도를 기준으로 판단되어야 합니다. 다만 개별 도메인마다 맥락이 다르기 때문에 자체적으로 판단이 필요합니다. 무분별하게 사용하기보다는 경고보다 약한 강조의 의미로 사용하세요. ### 임의로 다양한 콘텐츠를 조합하는 경우 Alert Dialog는 경고, 알림을 목적으로 표시되는 컴포넌트라서 사용처에서 임의로 수정하거나 변형시켜서 활용하는 것을 금지합니다. 사용처는 Alert Dialog를 사용할 때 주어진 Prop을 그대로 사용해야 합니다. ### Alert Dialog UX Writing 적절한 Alert Dialog 안내 문구 작성 방법은 별도 Notion 문서에서 설명합니다. ## Alert Dialog vs. Menu Sheet ### Alert Dialog, Menu Sheet 비교 ![Alert Dialog와 Menu Sheet 사용 예시 비교](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/b66fe8ef-b74c-4d6f-ad81-7d553229c699) Alert Dialog와 [Menu Sheet](/components/menu-sheet)는 유사한 UI이지만, 사용 목적과 제공하는 기능에 차이가 있습니다. [Menu Sheet](/components/menu-sheet)는 Alert Dialog와 달리 바깥을 탭하면 닫을 수 있습니다. | 구분 | Alert Dialog | Menu Sheet | | ------------ | ------------------------------ | ------------------------ | | **목적** | 반드시 선택이 필요, 되돌릴 수 없는 액션에 대한 안내 | 사용할 수 있는 여러개의 메뉴와 액션을 제공 | | **제공 액션 개수** | 2개 이하 (닫기 포함) | 2개 이상 (닫기 포함) | | **액션 구성** | 양자택일 (삭제 여부 / 이탈 여부 등) | 여러개로 구성 | | **내용 표시 여부** | 액션에 대한 부연설명이 반드시 필요 | 설명이 필요 없을 수 있음 | | **표시 위치** | 화면 정중앙 | 화면 하단 | | **닫기 액션** | 명시적인 닫기, 취소 등 버튼을 탭해야 닫힘 | 닫기 등의 버튼이나 바깥 영역을 탭해도 닫힘 | ## Specification Component spec (JSON): /rootage/components/dialog.json