[Email.js] 이메일로 문의하기 만들기 with React

Email.js로 이메일 문의하기 만들기

• Email.js홈페이지에 들어가 가입 한다.

• 이메일을 연동한다 (필자의 경우 gmail)

• 연동 후 Service id가 나오는데 이것을 복사해 놓는다.
  - service_im~~~ 식으로 나오는 것.
  

• 이메일 템플릿을 만든다 {{변수명}} 을 활용, React에서 폼 입력후 데이터 전송시 변수명에 자동으로 매핑되기 때문에 나중에 React에서 폼만들때 이름을 맞춰줘야 한다
  

• 템플릿을 만들면 Template ID가 생긴다, 이 아이디도 복사해놓자.

• 프로젝트를 열고 env를 세팅해준다, 이름은 상관없다

NEXT_PUBLIC_MAIL_SERVICE_KEY=개인 서비스 키
NEXT_PUBLIC_MAIL_TEMPLATE_KEY=개인 템플릿 키
NEXT_PUBLIC_MAIL_PUBLIC_KEY=개인 퍼블릭 키

이후 폼 요소를 만든다.

• 이때 input 요소의 name은 템플릿에 {{변수명}} 에 적었던 변수명과 일치시켜야 form데이터 전송시 매핑되어 반영된다.

    <form ref={form} onSubmit={onSubmitForm} className={styles.form}>
        <div className={styles.formGroup}>
          <label>
            기업명<span>*</span>
          </label>
          <input title="corporate" name="from_corporate" type="text" required />
        </div>
        <div className={styles.formGroup}>
          <label>
            성함<span>*</span>
          </label>
          <input title="name" name="from_name" type="text" required />
        </div>
        <div className={styles.formGroup}>
          <label>
            전화번호<span>*</span>
          </label>
          <input title="tel" name="from_tel" type="text" required />
        </div>
        <div className={styles.formGroup}>
          <label>
            이메일<span>*</span>
          </label>
          <input title="email" name="from_email" type="email" required />
        </div>
        <div className={styles.formGroup}>
          <label>
            메시지<span>*</span>
          </label>
          <textarea title="message" name="message" required />
        </div>
        <button type="submit" className={styles.submitBtn}>
          전송하기
        </button>
      </form>

  const form = useRef<HTMLFormElement>(null);

  const onSubmitForm = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (!form.current) return;
    try {
      emailjs
        .sendForm(
          process.env.NEXT_PUBLIC_MAIL_SERVICE_KEY,
          process.env.NEXT_PUBLIC_MAIL_TEMPLATE_KEY,
          form.current,
          process.env.NEXT_PUBLIC_MAIL_PUBLIC_KEY
        )
        .then(() => {
          Swal.fire({
            title: "전송 성공!",
            text: "정상적으로 접수되었습니다.",
            icon: "success",
          });
        });
    } catch (error) {
      Swal.fire({
        icon: "error",
        title: "전송 실패",
        text: "접수 중 에러가 발생하였습니다.",
      });
    }
  };

위 코드의 실행 결과는 아래에서 실행해 보실 수 있습니다.

https://insungportfolio.netlify.app/contact