Next.js와 nodemailer 이메일 파일전송 구현하는 방법 feat. server action

'use client';
 
const Form = () => {
  return (
    <form action="">
      <div className="flex flex-col gap-4 text-black">
        <div>
          <label htmlFor="name">이름: </label>
          <input type="text" id="name" name="name" placeholder="이름" />
        </div>
        <input type="file" name="file" />
      </div>
      <button type="submit">전송</button>
    </form>
  );
};
 
export default Form;

npm install nodemailer

npm install --save-dev @types/nodemailer

'use server';
export const sendEmail = async (prevState: any, formData: FormData) => {
  try {
    const { name, file } = Object.fromEntries(formData);
 
    console.log(name, file);
 
    return { message: '파일 전송 성공' };
  } catch (error) {
    console.error(error);
  }
};

'use client';
 
import { sendEmail } from '@/lib/action';
import { useFormState } from 'react-dom';
 
const Form = () => {
  const [actionState, formAction] = useFormState(sendEmail, null);
 
  return (
    <form action={formAction}>
      <div className="flex flex-col gap-4 text-black">
        <div>
          <label htmlFor="name">이름: </label>
          <input type="text" id="name" name="name" placeholder="이름" />
        </div>
        <input type="file" name="file" />
      </div>
      <button type="submit">전송</button>
    </form>
  );
};
 
export default Form;

export const sendEmail = async (prevState: any, formData: FormData) => {
  try {
    const { name, file } = Object.fromEntries(formData);
 
    let dataUrl;
 
    if (file instanceof File) {
      const buffer = Buffer.from(await file.arrayBuffer());
      const base64String = buffer.toString('base64');
 
      dataUrl = `data:${file.type};base64,${base64String}`;
    } else {
      console.error('파일이 파일의 인스턴스가 아닙니다.');
    }
 
    console.log(name, dataUrl);
 
    return { message: '파일 전송 성공' };
  } catch (error) {
    console.error(error);
  }
};

홍길동 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAb///8rdcVfktA0esd3odYSbcLs8fktdsUgcc
# ... 생략

'use server';
 
import nodemailer from 'nodemailer';
 
const transporter = nodemailer.createTransport({
  host: 'smtp.gmail.com',
  port: 465,
  secure: true,
  auth: {
    user: process.env.GMAIL_USER,
    pass: process.env.GMAIL_APP_KEY,
  },
});
 
export const sendEmail = async (prevState: any, formData: FormData) => {
  try {
    const { name, file } = Object.fromEntries(formData);
 
    // 간단한 유효성 검사
    if (!name || !file) {
      return { message: '모든 필드를 입력해주세요' };
    }
 
    let dataUrl;
 
    if (file instanceof File) {
      const buffer = Buffer.from(await file.arrayBuffer());
      const base64String = buffer.toString('base64');
 
      dataUrl = `data:${file.type};base64,${base64String}`;
    } else {
      console.error('파일이 파일의 인스턴스가 아닙니다.');
    }
 
    await transporter.sendMail({
      from: process.env.GMAIL_USER,
      to: process.env.GMAIL_USER,
      subject: `보낸이: ${name}`,
      html: `<p>보낸이: ${name}</p>`,
      attachments: [{ path: dataUrl }],
    });
 
    return { message: '이메일 전송 성공' };
  } catch (error) {
    console.error(error);
  }
};

const MAX_FILE_SIZE = 1024 * 1024 * 4; // 4MB
 
export const sendEmail = async (prevState: any, formData: FormData) => {
  try {
    const { name, file } = Object.fromEntries(formData);
 
    // 간단한 유효성 검사
    if (!name || !file) {
      return { message: '모든 필드를 입력해주세요' };
    }
 
    let dataUrl;
 
    if (file instanceof File) {
      // 파일 크기 제한
      if (file.size > MAX_FILE_SIZE) {
        return { message: '파일 크기는 4MB 이하로 제한됩니다.' };
      }
 
      if (!file.type.includes('image')) {
        return { message: '이미지 파일만 전송 가능합니다.' };
      }
 
      const buffer = Buffer.from(await file.arrayBuffer());
      const base64String = buffer.toString('base64');
 
      dataUrl = `data:${file.type};base64,${base64String}`;
    } else {
      console.error('파일이 파일의 인스턴스가 아닙니다.');
    }
 
    // ... 동일한 코드 (생략)
  } catch (error) {
    console.error(error);
  }
};