Sweetalert 사용법

TypeScript, Next.js, App Router 환경에서 SweetAlert2 모달 사용법

1. 설치 방법

먼저, SweetAlert2 라이브러리를 설치합니다.

npm install sweetalert2

2. 기본 사용법

Next.js 환경에서는 "use client" 지시어를 사용해야 합니다.

1) 기본 모달 띄우기

"use client";

import Swal from "sweetalert2";

export default function Page() {
  const onClickOpenBasicModal = () => {
    Swal.fire("기본 모달", "이것은 기본적인 모달입니다.", "info");
  };

  return (
    <div className="flex flex-col m-auto h-screen justify-center items-center">
      <button
        className="bg-blue-500 px-2 py-1 rounded-lg text-white cursor-pointer"
        onClick={onClickOpenBasicModal}
      >
        기본 모달 띄우기
      </button>
    </div>
  );
}

실행 화면

---

3. 다양한 모달 사용법

1) 아이콘 종류별 모달

const onClickOpenWarningModal = () => {
  Swal.fire("경고", "이것은 경고 모달입니다.", "warning");
};

const onClickOpenSuccessModal = () => {
  Swal.fire("성공", "이것은 성공 모달입니다.", "success");
};

const onClickOpenInfoModal = () => {
  Swal.fire("정보", "이것은 정보 모달입니다.", "info");
};

실행 화면

Warning 모달

Success 모달

Info 모달

---

4. 모달 버튼 및 사용자 상호작용

SweetAlert2는 객체 형태로 여러 옵션을 지정할 수 있습니다.

const onClickOpenCustomModal = () => {
  Swal.fire({
    title: "삭제 확인",
    text: "정말 삭제하시겠습니까?",
    icon: "warning",
    showCancelButton: true,
    confirmButtonText: "삭제",
    cancelButtonText: "취소",
  });
};

실행 화면

---

---

5. 모달 버튼 클릭 시 동작 설정//이중 모션 동작

Confirm(확인)과 Cancel(취소) 버튼 클릭 시 다른 동작을 수행하도록 설정할 수 있습니다.

const onClickOpenDoubleModal = () => {
  Swal.fire({
    title: "삭제 확인",
    text: "정말 삭제하시겠습니까?",
    icon: "warning",
    showCancelButton: true,
    confirmButtonText: "삭제",
    cancelButtonText: "취소",
  }).then((result) => {
    if (result.isConfirmed) {
      Swal.fire("삭제 완료", "데이터가 삭제되었습니다.", "success");
    } else if (result.isDismissed) {
      Swal.fire("취소됨", "삭제가 취소되었습니다.", "info");
    }
  });
};

실행 화면

---