모달 대신 SweetAlert2 사용해보기

미리보기

 

사용이유

react-modal 라이브러리를 사용해서 모달을 구현한다면 CSS와 컴포넌트도 구현해야 합니다.

sweetaler2라이브러리를 사용하면 모달과 비슷한 효과를 내면서 간단하게 구현할수 있기때문에 사용했습니다.

참고사이트

• sweetalert2 홈페이지

SweetAlert2

사용방법

설치

npm install sweetalert2

import

import Swal from "sweetalert2";

유효성 검사 함수 구현

반환값으로 성공여부와 유효하지 않은 값을 입력했을 때 표시할 메시지를 반환하도록 구현해줍니다.

const validateForm = (formData) => {
  const result = {
    isSuccess: true,
    text: "",
  };

  // 데이터 입력확인
  for (let key of Object.keys(formData)) {
    if (!formData[key]) {
      result.isSuccess = false;

      if (key === "id") {
        result.text = "아이디를 입력해주세요!";
        return result;
      } else if (key === "password") {
        result.text = "비밀번호를 입력해주세요!";
        return result;
      } else if (key === "password_confirm") {
        result.text = "비밀번호 확인을 입력해주세요!";
        return result;
      }
    }
  }

  // 비밀번호 똑같은지 확인
  if (formData.password !== formData.password_confirm) {
    result.isSuccess = false;
    result.text = "입력한 비밀번호가 다릅니다!";
    return result;
  }

  return result;
};

회원가입 컴포넌트 수정

Swal 모듈의 fire 메서드로 유효성 확인이 성공했을 경우와 실패했을 경우에 sweetalert 창이 뜨도록 구현해줍니다.

  const onSubmitForm = (e) => {
    e.preventDefault();

    let { isSuccess, text } = validateForm(formData);
    if (!isSuccess) {
      Swal.fire({
        icon: "warning",
        text,
        confirmButtonText: "확인",
      });
      return;
    }

    sessionStorage.setItem("user", JSON.stringify(formData));
    Swal.fire({
      icon: "success",
      text: "회원가입 되었습니다!",
      confirmButtonText: "확인",
      allowOutsideClick: false,
    }).then((result) => {
      if (result.isConfirmed) {
        nav("/login");
      }
    });
  };

 

로그인 컴포넌트 수정

로그인 컴포넌트에서 폼이 제출되었을때 동작을 변경해줍니다.

폼에 입력한 아이디, 비밀번호가 회원가입 시 저장된 아이디와 비밀번호랑 같은 경우와 아닌 경우에 sweetalert 창을 띄워주도록 구현해줍니다.

  const onSubmitForm = (e) => {
    e.preventDefault();

    sessionStorage.getItem("user");

    const { id, password } = sessionStorage.getItem("user")
      ? JSON.parse(sessionStorage.getItem("user"))
      : { id: null, password: null };

    if (formData.id === id && formData.password === password) {
      Swal.fire({
        icon: "success",
        text: "로그인 성공했습니다!",
        confirmButtonText: "확인",
      });
    } else {
      Swal.fire({
        icon: "error",
        text: "아이디와 비밀번호를 확인해주세요!",
        confirmButtonText: "확인",
      });
    }
  };

전체 소스 코드

회원가입 컴포넌트

import "./Signup.css";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import Swal from "sweetalert2";

const validateForm = (formData) => {
  const result = {
    isSuccess: true,
    text: "",
  };

  // 데이터 입력확인
  for (let key of Object.keys(formData)) {
    if (!formData[key]) {
      result.isSuccess = false;

      if (key === "id") {
        result.text = "아이디를 입력해주세요!";
        return result;
      } else if (key === "password") {
        result.text = "비밀번호를 입력해주세요!";
        return result;
      } else if (key === "password_confirm") {
        result.text = "비밀번호 확인을 입력해주세요!";
        return result;
      }
    }
  }

  // 비밀번호 똑같은지 확인
  if (formData.password !== formData.password_confirm) {
    result.isSuccess = false;
    result.text = "입력한 비밀번호가 다릅니다!";
    return result;
  }

  return result;
};

const Signup = () => {
  const nav = useNavigate();

  const [formData, setFormData] = useState({
    id: "",
    password: "",
    password_confirm: "",
  });

  const onChangeForm = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const onSubmitForm = (e) => {
    e.preventDefault();

    let { isSuccess, text } = validateForm(formData);
    if (!isSuccess) {
      Swal.fire({
        icon: "warning",
        text,
        confirmButtonText: "확인",
      });
      return;
    }

    sessionStorage.setItem("user", JSON.stringify(formData));
    Swal.fire({
      icon: "success",
      text: "회원가입 되었습니다!",
      confirmButtonText: "확인",
      allowOutsideClick: false,
    }).then((result) => {
      if (result.isConfirmed) {
        nav("/login");
      }
    });
  };

  return (
    <div className="Signup">
      <form className="signup_form" onSubmit={onSubmitForm}>
        <h4>회원가입</h4>
        <input
          type="text"
          name="id"
          placeholder="아이디"
          onChange={onChangeForm}
        />
        <input
          type="password"
          name="password"
          placeholder="비밀번호"
          onChange={onChangeForm}
        />
        <input
          type="password"
          name="password_confirm"
          placeholder="비밀번호 확인"
          onChange={onChangeForm}
        />
        <button type="submit">회원가입</button>
        <button
          type="button"
          onClick={() => {
            nav(-1);
          }}
        >
          뒤로가기
        </button>
      </form>
    </div>
  );
};

export default Signup;

로그인 컴포넌트

import "./Login.css";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import Swal from "sweetalert2";

const Login = () => {
  const nav = useNavigate();
  const [formData, setFormData] = useState({ id: "", password: "" });

  const onChangeForm = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const onSubmitForm = (e) => {
    e.preventDefault();

    sessionStorage.getItem("user");

    const { id, password } = sessionStorage.getItem("user")
      ? JSON.parse(sessionStorage.getItem("user"))
      : { id: null, password: null };

    if (formData.id === id && formData.password === password) {
      Swal.fire({
        icon: "success",
        text: "로그인 성공했습니다!",
        confirmButtonText: "확인",
      });
    } else {
      Swal.fire({
        icon: "error",
        text: "아이디와 비밀번호를 확인해주세요!",
        confirmButtonText: "확인",
      });
    }
  };

  return (
    <div className="Login">
      <form className="login_form" onSubmit={onSubmitForm}>
        <h4>로그인</h4>
        <input
          type="text"
          name="id"
          placeholder="아이디"
          onChange={onChangeForm}
        />
        <input
          type="password"
          name="password"
          placeholder="비밀번호"
          onChange={onChangeForm}
        />
        <button type="submit">로그인</button>
        <div className="login_nav">
          <button
            type="button"
            onClick={() => {
              nav("/signup");
            }}
          >
            회원가입
          </button>
        </div>
      </form>
    </div>
  );
};

export default Login;