openConfirmation

확인 다이얼로그를 열고 사용자의 선택 결과를 Promise로 반환합니다.

Import

import { overlay } from '@liner-engineering/orbit-core';

// openConfirmation 사용
const confirmed = await overlay.openConfirmation(Component);

사용법

기본 사용법

import { overlay } from '@liner-engineering/orbit-core';

const MyConfirmDialog: overlay.ConfirmationComponent = ({ isOpen, cancel, confirm }) => (
  <Dialog open={isOpen}>
    <p>정말 삭제하시겠습니까?</p>
    <button onClick={cancel}>취소</button>
    <button onClick={confirm}>확인</button>
  </Dialog>
);

const handleDelete = async () => {
  const confirmed = await overlay.openConfirmation(MyConfirmDialog);

  if (confirmed) {
    // 삭제 로직 실행
    await deleteItem();
  }
};

동적 내용 전달

const ConfirmDeleteDialog: FC<{ itemName: string } & ConfirmationProps> = ({
  isOpen,
  cancel,
  confirm,
  itemName,
}) => (
  <Dialog open={isOpen}>
    <p>"{itemName}"을(를) 삭제하시겠습니까?</p>
    <button onClick={cancel}>취소</button>
    <button onClick={confirm}>확인</button>
  </Dialog>
);

// 클로저를 활용하여 동적 내용 전달
const handleDelete = async (itemName: string) => {
  const confirmed = await overlay.openConfirmation((props) => (
    <ConfirmDeleteDialog {...props} itemName={itemName} />
  ));

  if (confirmed) {
    await deleteItem();
  }
};

API

type Props = {
  isOpen: boolean;
  overlayId: string;
  unmount: () => void;
  cancel: () => void;
  confirm: () => void;
};

type Component = FC<Props>;

function openConfirmation(Component: Component): Promise<boolean>;

Component Props

Prop	타입	설명
isOpen	boolean	다이얼로그 열림 상태
overlayId	string	오버레이 고유 ID
unmount	() => void	오버레이 언마운트 함수
cancel	() => void	취소 버튼 클릭 시 호출 (false 반환)
confirm	() => void	확인 버튼 클릭 시 호출 (true 반환)

반환값

Promise<boolean> - 사용자가 confirm 시 true, cancel 시 false

예시

function DeleteButton({ item }: { item: Item }) {
  const handleClick = async () => {
    const confirmed = await overlay.openConfirmation(({ isOpen, cancel, confirm }) => (
      <AlertDialog open={isOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>삭제 확인</AlertDialogTitle>
            <AlertDialogDescription>이 작업은 되돌릴 수 없습니다.</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={cancel}>취소</AlertDialogCancel>
            <AlertDialogAction onClick={confirm}>삭제</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    ));

    if (confirmed) {
      await deleteItem(item.id);
      toast.success('삭제되었습니다');
    }
  };

  return <Button onClick={handleClick}>삭제</Button>;
}

async/await 활용

openConfirmation은 Promise를 반환하므로 async/await와 함께 사용하면 동기적인 코드 흐름으로 작성할 수 있습니다.