확인 대화상자

확인 대화상자는 사용자의 결정이 필요한 경우 사용합니다. 일반적으로 boolean 값을 반환하며, 위험한 작업을 수행하기 전에 사용자의 동의를 구합니다.

기본 확인#

삭제와 같은 중요한 작업 전에 확인을 받습니다:

const handleDelete = async () => {
  const confirmed = await grunfeld.add<boolean>((removeWith) => ({
    element: (
      <div style={{ padding: "20px", background: "white", borderRadius: "8px" }}>
        <h3>Confirm Delete</h3>
        <p>Are you sure you want to delete? This action cannot be undone.</p>
        <div style={{ display: "flex", gap: "8px", marginTop: "16px" }}>
          <button
            onClick={() => removeWith(true)}
            style={{ background: "#c00", color: "white" }}
          >
            Delete
          </button>
          <button onClick={() => removeWith(false)}>
            Cancel
          </button>
        </div>
      </div>
    ),
  }));

  if (confirmed) {
    await deleteItem();
    console.log("Deleted");
  }
};

비구조화 확인#

중요한 작업의 경우, 사용자에게 작업을 확인하도록 할 수 있습니다:

const DestructiveConfirm = ({ onConfirm }: { onConfirm: (value: boolean) => void }) => {
  const [inputValue, setInputValue] = useState("");
  const confirmText = "DELETE";

  return (
    <div style={{ padding: "20px", background: "white", borderRadius: "8px" }}>
      <h3>⚠️ Dangerous Action</h3>
      <p>To proceed, type "{confirmText}".</p>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder={confirmText}
        style={{ width: "100%", padding: "8px", marginTop: "8px" }}
      />
      <div style={{ display: "flex", gap: "8px", marginTop: "16px" }}>
        <button
          onClick={() => onConfirm(true)}
          disabled={inputValue !== confirmText}
          style={{
            background: inputValue === confirmText ? "#c00" : "#ccc",
            color: "white",
          }}
        >
          Delete
        </button>
        <button onClick={() => onConfirm(false)}>Cancel</button>
      </div>
    </div>
  );
};

const handleDangerousDelete = async () => {
  const confirmed = await grunfeld.add<boolean>((removeWith) => ({
    element: <DestructiveConfirm onConfirm={removeWith} />,
    lightDismiss: false,
  }));

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

조건부 동작#

확인 결과에 따라 다른 동작을 수행합니다:

const saveChanges = async () => {
  if (!hasChanges) {
    await save();
    return;
  }

  const confirmed = await grunfeld.add<boolean>((removeWith) => ({
    element: (
      <div>
        <h3>Save Changes</h3>
        <p>Do you want to save changes?</p>
        <button onClick={() => removeWith(true)}>Save</button>
        <button onClick={() => removeWith(false)}>Cancel</button>
      </div>
    ),
  }));

  if (confirmed) {
    await save();
    grunfeld.add(() => <div>Saved!</div>);
  } else {
    console.log("Save cancelled");
  }
};

타임아웃이 있는 확인#

일정 시간 내에 응답하지 않으면 자동으로 취소됩니다:

const showTimedConfirm = async () => {
  const confirmPromise = grunfeld.add<boolean>((removeWith) => ({
    element: (
      <div>
        <h3>⏰ Please respond within 10 seconds</h3>
        <p>Will be automatically cancelled after timeout.</p>
        <button onClick={() => removeWith(true)}>Confirm</button>
        <button onClick={() => removeWith(false)}>Cancel</button>
      </div>
    ),
  }));

  // 10 second timeout
  const timeoutId = setTimeout(() => {
    grunfeld.remove();
  }, 10000);

  const result = await confirmPromise;
  clearTimeout(timeoutId);

  if (result === undefined) {
    console.log("Auto-cancelled due to timeout");
  } else if (result) {
    console.log("Confirmed");
  } else {
    console.log("Cancelled");
  }
};