React

J·2025년 5월 17일

Email Template

Radix UI 쓸 수 없음

radix ui를 포함한 대부분의 visual libaries는 client component이다. It is because they
1. Rely on browser APIs
2. Use React hooks
3. Manipulate the DOM directly
4. Handle user interactions

해결책 1: Plain HTML로 작성

Remember, email clients have very limited CSS support. Using utility classes like Tailwind or UI component libraries like Radix UI won't work well in emails.

하지만 너무 귀찮음

해결책 2: React Email Components 사용

email template에 tailwind를 사용할 수 있게 해주는 react-email 사용.
단, 내가 커스터마이징한 tailwind component는 이 라이브러리에 포함이 되어있지 않아 사용할 수 없다.

npm install react-email -D -E
npm install @react-email/components

import { Html, Tailwind, Body, ... } from '@react-email/components'

const EmailTemplate = () => {
  return (
    <Html>
    <Preview>Text on preview</Preview>
      <Tailwind>
	    <Body>...</Body>
      </Tailwind>
    </Html>
  )
}

export default EmailTemplate

Static Image 쓸 수 없음

Email clients don’t know your host

해결책: CDN 사용 (ex Cloudinary)

이런 식