emailJs 메일 보내기 기능

메일 보내기 기능을 만들어보자.

 

https://dashboard.emailjs.com/admin

Email Services -> 서비스 추가 (난 구글로함)

Email Templates -> 여기서 이렇게 템플릿을 만들어주고,

Account-> 'Public Key'

Email Services -> 'service ID'

Email Templates -> 'template ID'

 

emailjs.sendForm('service ID',
          'template ID',
          form.current,
          'Public Key')

const ContactForm = () => {
  const formRef = useRef<HTMLFormElement | null>(null);

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (formRef.current) {
      emailjs.sendForm("***", "***", formRef.current, "***").then(
        (result) => {
          console.log(result);
          alert("메일이 성공적으로 전달되었습니다.");
          console.log(result.text);
        },
        (error) => {
          console.log(error.text);
        }
      );
    }
  };

  return (
    <AskContainer>
      <AskForm ref={formRef} onSubmit={handleSubmit}>
        <Label>
          이메일
          <Input type="email" name="user_email" placeholder="답변 받으실 이메일" required />
        </Label>
        <Label>
          문의 제목
          <Input
            type="text"
            name="ask_title"
            placeholder="제목을 입력해주세요.(20자 이내)"
            maxLength={20}
            required
          />
        </Label>
        <Label>
          문의 내용
          <TextArea name="ask_message" placeholder="내용을 입력해주세요." required />
        </Label>
        <MoreBtn>
          <button type="submit">메일보내기</button>
          <BsFillArrowRightCircleFill />
        </MoreBtn>
      </AskForm>
    </AskContainer>
  );
};

export default ContactForm;