리액트 스프링부트 연동해서 메일 보내기

 

 

1. 설치하기

npm install axios 설치

 

난 gmail로 쓸거기 때문에 gmail 앱 비밀번호 생성함

https://yermi.tistory.com/346

[꿀팁] 구글(Google) 앱 비밀번호 생성하기 [Mail API 사용을 위한 Google 앱 비밀번호 생성]

참고

앱 비번은 한번 생성한거 비번 다시 못찾으니까 꼭 메모장에 저장해두기

 

나는 스프링부트 그래들버전이다

프로퍼티에

spring.mail.host=smtp.gmail.com
spring.mail.port=587
spring.mail.username=내가 쓰는 진짜 이메일@gmail.com
spring.mail.password=발급받은 앱 비밀번호
spring.mail.properties.mail.smtp.auth=true
spring.mail.properties.mail.smtp.starttls.enable=true

추가

빌드에

implementation 'org.springframework.boot:spring-boot-starter-mail'

추가

 

controller 폴더에

package SeAH.savg.Controller;

import SeAH.savg.Email.EmailData;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.mail.javamail.MimeMessageHelper;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import javax.mail.MessagingException;
import javax.mail.internet.MimeMessage;

@RestController
public class EmailController {
    private final JavaMailSender mailSender;

    @Autowired
    public EmailController(JavaMailSender mailSender) {
        this.mailSender = mailSender;
    }
    @CrossOrigin(origins = "http://localhost:3000")
    @PostMapping("/api/send-email")
    public ResponseEntity<Object> sendEmail(@RequestBody EmailData emailData) {
        try {
            MimeMessage message = mailSender.createMimeMessage();
            MimeMessageHelper helper = new MimeMessageHelper(message, true);
            helper.setTo(emailData.getRecipient());
            helper.setSubject(emailData.getSubject());
            helper.setText(emailData.getContent());

            mailSender.send(message);
            return ResponseEntity.ok().body(new ResponseMessage("Email sent successfully."));
        } catch (MessagingException e) {
            e.printStackTrace();

            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error sending email.");
        }
    }

}

추가

컨트롤러에 또 추가

package SeAH.savg.Controller;

public class ResponseMessage {
    private String message;
    public ResponseMessage(String message) {
        this.message = message;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }
}

이메일 폴더 하나 만들어서 

package SeAH.savg.Email;

public class EmailData {
    private String recipient;
    private String subject;
    private String content;

    public String getRecipient() {
        return recipient;
    }

    public void setRecipient(String recipient) {
        this.recipient = recipient;
    }

    public String getSubject() {
        return subject;
    }

    public void setSubject(String subject) {
        this.subject = subject;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }

}

추가

이렇게 생겼음

리액트

import React, { useState } from 'react';

const EmailForm = () => {
  const [emailData, setEmailData] = useState({
    recipient: '',
    subject: '',
    content: ''
  });

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setEmailData(prevData => ({ ...prevData, [name]: value }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    fetch('http://localhost:8081/api/send-email', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(emailData)
    })
    .then(response => response.json())
    .then(data => {
      console.log('Email sent:', data);
      // 이메일 전송 성공 시 처리 로직 추가
    })
    .catch(error => {
      console.error('Error sending email:', error);
      // 이메일 전송 실패 시 처리 로직 추가
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="recipient"
        placeholder="Recipient"
        value={emailData.recipient}
        onChange={handleInputChange}
      />
      <input
        type="text"
        name="subject"
        placeholder="Subject"
        value={emailData.subject}
        onChange={handleInputChange}
      />
      <textarea
        name="content"
        placeholder="Content"
        value={emailData.content}
        onChange={handleInputChange}
      />
      <button type="submit">Send Email</button>
    </form>
  );
};

export default EmailForm;

패키지 제이슨에

프록시 추가 

포트번호는 인텔리제이 포트번호랑 동일해야한다