이메일

개요

kindie는 Resend로 이메일을 발송하고, React Email로 이메일 템플릿을 관리합니다. 환영 메일, 인증 코드, 결제 확인 등의 트랜잭셔널 이메일을 지원합니다.

Resend 설정

1. 가입 및 API 키 발급

1. Resend에 가입
2. API Keys에서 새 API 키 생성
3. (선택) Domains에서 커스텀 도메인 연결

2. 환경변수 설정

RESEND_API_KEY="re_xxxxxxxxxxxxxxxxxxxxxxxx"

3. 발신 이메일 설정

기본 발신 정보는 config.ts에서 관리됩니다:

// config.ts
export const emailConfig = {
  from: {
    name: "kindie",
    email: "noreply@kindie.cc",
  },
};

커스텀 도메인을 연결하지 않으면 Resend의 onboarding@resend.dev 주소로 발송됩니다.

이메일 템플릿

React Email로 작성된 템플릿이 components/email/에 있습니다:

components/email/
├── welcome.tsx             환영 메일
├── verification-code.tsx   인증 코드
├── payment-success.tsx     결제 완료
├── subscription-active.tsx 구독 활성화
└── password-reset.tsx      비밀번호 재설정

각 템플릿은 React 컴포넌트로 작성되어 있어 타입 안전하게 관리할 수 있습니다.

이메일 발송

// lib/email/index.ts
import { Resend } from "resend";
import { emailConfig } from "@/config";

const resend = new Resend(process.env.RESEND_API_KEY);

export async function sendEmail({
  to,
  subject,
  react,
}: {
  to: string;
  subject: string;
  react: React.ReactElement;
}) {
  return resend.emails.send({
    from: `${emailConfig.from.name} <${emailConfig.from.email}>`,
    to,
    subject,
    react,
  });
}

관련 파일

lib/email/
└── index.ts            이메일 발송 유틸리티

components/email/
├── welcome.tsx         환영 메일 템플릿
├── verification-code.tsx  인증 코드 템플릿
├── payment-success.tsx    결제 완료 템플릿
├── subscription-active.tsx 구독 활성화 템플릿
└── password-reset.tsx     비밀번호 재설정 템플릿

app/api/webhooks/
└── resend/route.ts     Resend 웹훅 (바운스, 불만 처리)

기능 비활성화

// config.ts
export const features = {
  // ...
  email: false,
};