Portfolio


npx create-next-app@latest --experimental-app


"use client";

import toast, { Toaster } from "react-hot-toast";

export default function Page() {
// toast.[sucess||error||Promise 등등 붙여서 사용하면됨)
  const test = () => toast("Here is your Toast");

  return (
    <>
      <div>
        <button onClick={test}>Make me a toast</button>
        <Toaster />
      </div>
    </>
  );
}


npx create-next-app@latest --experimental-app


"use client";

import swal from "sweetalert";

export default function Page() {
  const temp = () => {
    swal("test!");
  };

  return (
    <>
      <h1>page2</h1>
      <button onClick={temp}>swal test</button>
    </>
  );
}


"use client";

import Page2test from "./components/Page2Test";
import Swal from "sweetalert2";

export default function Page() {
  const temp = () => {
    Swal.fire("tes!!t");
  };

  return (
    <>
      <h1>page2</h1>
      <Page2test />
      <button onClick={temp}>swal test</button>
    </>
  );
}


$ npm i react-query

modal, toast, react-query

sweetalert1

sweetalert2