Next.js에서 EmailJS로 문의 폼 이메일 발송 구현하기

1. 설치

npm install @emailjs/browser

 

2. EmailJS 계정 설정

2-1. 계정 생성

https://www.emailjs.com

Send email directly from your code | EmailJS

위 웹사이트에서 회원가입 및 로그인

 

2-2. Email Service 추가

 

1. 대시보드에서 "Email Services" 메뉴 클릭
2. "Add New Service" 버튼 클릭
3. 이메일 서비스 선택 (Gmail 권장)
4. 중앙 "Connect Account" 버튼 클릭
5. 우측 하단 "Create Service" 버튼 클릭
6. 생성된 서비스 클릭 -> Service ID 복사( 예 : 'service_xxxx')

 

2-3. Email Template 생성

1. 대시보드에서 "Email Templates" 메뉴 클릭
2. 좌측 상단 "Create New Template" 버튼 클릭
3. 우측 하단 "Create Template" 버튼 클릭
4. 중앙 우측 "Edit Content' 버튼 클릭 -> "Code Editor" 선택
5. 에디터 영역 좌측 클릭 -> 아래 코드블럭 복붙
6. 우측 상단 "Save" 버튼 클릭
7. 상단 "settings" 탭 클릭 -> Template ID 복사 (예: `template_xxxxx`)

<h2>새로운 문의가 접수되었습니다</h2>

<hr style="border: none; border-top: 1px solid #ddd; margin: 20px 0;">

<table style="width: 100%; border-collapse: collapse; font-family: Arial, sans-serif;">
  <tr>
    <td style="padding: 10px; background-color: #f5f5f5; font-weight: bold; width: 120px;">이름</td>
    <td style="padding: 10px; background-color: #ffffff;">{{name}}</td>
  </tr>
  <tr>
    <td style="padding: 10px; background-color: #f5f5f5; font-weight: bold;">나이</td>
    <td style="padding: 10px; background-color: #ffffff;">{{age}}세</td>
  </tr>
  <tr>
    <td style="padding: 10px; background-color: #f5f5f5; font-weight: bold; vertical-align: top;">내용</td>
    <td style="padding: 10px; background-color: #ffffff; white-space: pre-wrap;">{{message}}</td>
  </tr>
</table>

<hr style="border: none; border-top: 1px solid #ddd; margin: 20px 0;">

<p style="color: #666; font-size: 12px; margin-top: 20px;">
  이 이메일은 웹사이트 문의 폼을 통해 자동으로 발송되었습니다.
</p>

 

 

2-4. Public Key 확인

1. 대시보드에서 "Account" 메뉴 클릭
2. "General" 탭에서 "Public Key" 확인
3. Public Key 복사 (예: `xxxxxxxxxxxxx`)

 

3. 코드 작성

3.1 컴포넌트 정의

"use client";

import { useState } from "react";
import emailjs from "@emailjs/browser";

const ContactForm = () => {
  // 폼 상태 관리
  const [name, setName] = useState("");
  const [age, setAge] = useState("");
  const [message, setMessage] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);

  // 폼 제출 핸들러
  const handleSubmit = async (e) => {
    e.preventDefault();

    // 유효성 검사
    if (!name.trim()) {
      alert("이름을 입력해주세요.");
      return;
    }

    if (!age || isNaN(age) || parseInt(age) <= 0) {
      alert("올바른 나이를 입력해주세요.");
      return;
    }

    if (!message.trim()) {
      alert("내용을 입력해주세요.");
      return;
    }

    setIsSubmitting(true);

    try {
      // EmailJS 환경 변수에서 설정값 가져오기
      const serviceId = process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID;
      const templateId = process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID;
      const publicKey = process.env.NEXT_PUBLIC_EMAILJS_PUBLIC_KEY;

      // EmailJS로 이메일 발송
      await emailjs.send(
        serviceId,
        templateId,
        {
          // 템플릿 변수들
          // EmailJS 템플릿에서 사용할 변수명과 일치해야 합니다
          to_email: "your-email@example.com", // 받는 사람 이메일 (환경 변수로 설정 가능)
          name: name,                           // 이름
          age: age,                            // 나이
          message: message,                     // 내용
        },
        publicKey
      );

      // 성공 메시지
      alert("문의가 성공적으로 접수되었습니다.");
      
      // 폼 초기화
      setName("");
      setAge("");
      setMessage("");
    } catch (error) {
      console.error("이메일 발송 오류:", error);
      alert("문의 접수 중 오류가 발생했습니다. 다시 시도해주세요.");
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름 *
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          required
        />
      </label>

      <label>
        나이 *
        <input
          type="number"
          value={age}
          onChange={(e) => setAge(e.target.value)}
          min="1"
          required
        />
      </label>

      <label>
        내용 *
        <textarea
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          rows="5"
          required
        />
      </label>

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "전송 중..." : "제출하기"}
      </button>
    </form>
  );
};

export default ContactForm;

 

3.2 환경변수 설정

NEXT_PUBLIC_EMAILJS_SERVICE_ID=위에서 복사한 Service ID
NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=위에서 복사한 Template ID
NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=위에서 복사한 Public Key

프로젝트 루트에 .env 파일 생성 후 위 코드 복붙

 

3.2 테스트

전송 버튼을 눌러 테스트하기