ConfirmDialog

Overlay

되돌리기 어렵거나 중요한 행동을 실행하기 전에 사용자 확인을 받는 대화상자.

Usage

삭제·제출처럼 되돌리기 어려운 행동을 실행하기 전에 확인받을 때 사용한다.

import

import { ConfirmDialog } from '@mildang/design-system/Dialog';

예제를 복사해 쓸 때 필요한 준비

• @mildang/icons 를 따로 설치한다. DS 패키지에 아이콘 컴포넌트가 포함되지 않는다.

API Reference

공개 Props가 없습니다.

같은 패밀리

@mildang/design-system/Dialog 에서 같이 내보내는 컴포넌트다.

Dialog

확인·입력처럼 집중이 필요한 작업을 띄우는 대화상자.

예제

열린 상태

명령형으로 열리는 확인 다이얼로그의 떠 있는 모습을 상자 안에 고정해 보여줍니다.

코드

Open in Playground

import { confirmDialog } from '@mildang/design-system/Dialog';
import { Button } from '@mildang/design-system/Button';

const ConfirmDialogAsyncWithLoadingExample = () => {
    const handleClick = () => {
      confirmDialog({
        title: '삭제 확인',
        description: '정말 삭제하시겠습니까? 확인을 누르면 서버에 요청합니다.',
        acceptButtonProps: { children: '삭제', bg: 'critical.fill.base' },
        accept: async (update) => {
          update((draft) => {
            if (draft.acceptButtonProps) {
              draft.acceptButtonProps['loading'] = true;
            }
            if (draft.rejectButtonProps) {
              draft.rejectButtonProps['disabled'] = true;
            }
          });

          await new Promise((resolve) => setTimeout(resolve, 2000));
        },
      });
    };

    return <Button onClick={handleClick}>비동기 요청 테스트</Button>;
  };

export default ConfirmDialogAsyncWithLoadingExample;

Basic

코드

Open in Playground

import { confirmDialog } from '@mildang/design-system/Dialog';
import { Button } from '@mildang/design-system/Button';

const ConfirmDialogBasicExample = () => {
    const handleClick = () => {
      confirmDialog({
        title: '콘텐츠 모듈 설정 저장',
        description: (
          <>
            변동사항을 저장할 경우, 기존 학습 활동이 <b>재생성</b>됩니다. 저장하시겠습니까?
          </>
        ),
      });
    };

    return <Button onClick={handleClick}>Confirm Dialog 켜기</Button>;
  };

export default ConfirmDialogBasicExample;

CustomButton

코드

Open in Playground

import { Button } from '@mildang/design-system/Button';
import { confirmDialog } from '@mildang/design-system/Dialog';

const ConfirmDialogCustomButtonExample = () => {
    return (
      <Button
        onClick={() => {
          confirmDialog({
            title: '콘텐츠 모듈 설정 저장',
            description: '변동사항을 저장할 경우, 기존 학습 활동이 재생성됩니다. 저장하시겠습니까?',
            accept: () => console.log('Accepted'),
            reject: () => console.log('Rejected'),
            acceptButtonProps: { children: '저장 완료', color: 'primary' },
          });
        }}
      >
        Confirm Dialog 켜기
      </Button>
    );
  };

export default ConfirmDialogCustomButtonExample;

EducoreTitleIcon

코드

import { confirmDialog } from '@mildang/design-system/Dialog';
import EducoreIconInfo from '@mildang/icons/educore/info';
import { Button } from '@mildang/design-system/Button';

const ConfirmDialogEducoreTitleIconExample = () => {
    const handleClick = () => {
      confirmDialog({
        titleIcon: <EducoreIconInfo />,
        title: '로그인 안내',
        description: '로그인 후 사용 가능한 메뉴입니다.',
        acceptButtonProps: { children: '로그인' },
        rejectButtonProps: { children: '뒤로' },
      });
    };

    return <Button onClick={handleClick}>Educore 타이틀 아이콘 다이얼로그</Button>;
  };

export default ConfirmDialogEducoreTitleIconExample;

PreventDuplicateWithId

코드

Open in Playground

import { confirmDialog } from '@mildang/design-system/Dialog';
import { Button } from '@mildang/design-system/Button';

const ConfirmDialogPreventDuplicateWithIdExample = () => {
    const handleClick = () => {
      confirmDialog({
        id: 'unique-dialog-id',
        title: '중복 방지 테스트',
        description: '이 다이얼로그는 id가 지정되어 있어서 중복으로 열리지 않습니다.',
        accept: () => console.log('Accepted'),
        reject: () => console.log('Rejected'),
      });

      confirmDialog({
        id: 'unique-dialog-id',
        title: '이 타이틀은 표시되지 않음',
        description: '이 내용은 표시되지 않음',
        accept: () => console.log('This should not appear'),
      });
    };

    return <Button onClick={handleClick}>동일 ID로 여러 번 호출</Button>;
  };

export default ConfirmDialogPreventDuplicateWithIdExample;

WithoutRejectButton

코드

Open in Playground

import { confirmDialog } from '@mildang/design-system/Dialog';
import { Button } from '@mildang/design-system/Button';

const ConfirmDialogWithoutRejectButtonExample = () => {
    const handleClick = () => {
      confirmDialog({
        title: '알림',
        description: '작업이 완료되었습니다.',
        accept: () => console.log('확인됨'),
        reject: null,
      });
    };

    return <Button onClick={handleClick}>reject 버튼 없는 다이얼로그</Button>;
  };

export default ConfirmDialogWithoutRejectButtonExample;

RetryOnFailure

코드

Open in Playground

import { useRef } from 'react';
import { confirmDialog } from '@mildang/design-system/Dialog';
import { Button } from '@mildang/design-system/Button';

const ConfirmDialogRetryOnFailureExample = function RetryOnFailureComponent() {
    const attemptCountRef = useRef(0);

    const handleClick = () => {
      attemptCountRef.current = 0;
      confirmDialog({
        title: '데이터 저장',
        description: '변경사항을 저장하시겠습니까? (처음 2번은 실패합니다)',
        acceptButtonProps: { children: '저장', color: 'primary' },
        accept: async (update) => {
          attemptCountRef.current++;

          update((draft) => {
            if (draft.acceptButtonProps) {
              draft.acceptButtonProps['loading'] = true;
            }
            if (draft.rejectButtonProps) {
              draft.rejectButtonProps['disabled'] = true;
            }
          });

          await new Promise((resolve) => setTimeout(resolve, 300));

          if (attemptCountRef.current < 3) {
            update((draft) => {
              draft.description = `저장 실패! 다시 시도해주세요. (시도 횟수: ${attemptCountRef.current}/3)`;
              if (draft.acceptButtonProps) {
                draft.acceptButtonProps['loading'] = false;
              }
              if (draft.rejectButtonProps) {
                draft.rejectButtonProps['disabled'] = false;
              }
            });
            return false;
          }

          return true;
        },
      });
    };

    return <Button onClick={handleClick}>실패 시 Retry 테스트</Button>;
  };

export default ConfirmDialogRetryOnFailureExample;

DeleteWithConfirmation

코드

Open in Playground

import { confirmDialog } from '@mildang/design-system/Dialog';
import { Button } from '@mildang/design-system/Button';

const ConfirmDialogDeleteWithConfirmationExample = () => {
    const targetName = '중요한 프로젝트';

    const handleClick = () => {
      confirmDialog({
        size: 'md',
        title: `${targetName} 삭제`,
        description: (
          <>
            {targetName}과 세부 데이터가 <b>영원히 삭제</b>됩니다. 데이터를 복원할 수 없습니다.{'\n'}
            정말 <b>{targetName}</b>을 삭제하시겠습니까?
          </>
        ),
        confirmationText: targetName,
        confirmationPlaceholder: `최초 확인을 위해 ${targetName} 이름을 동일하게 입력해주세요`,
        acceptButtonProps: { children: `${targetName} 삭제`, bg: 'critical.fill.base' },
        accept: () => {
          console.log('삭제됨:', targetName);
        },
      });
    };

    return <Button onClick={handleClick}>삭제 확인 입력 테스트</Button>;
  };

export default ConfirmDialogDeleteWithConfirmationExample;