feat: 이메일 템플릿 구현 (#22)

* feat: 이메일 템플릿 생성

* chore: mjml 패키지 추가

* refactor: 불필요한 코드 파일 삭제

* feat: mjml 형식의 이메일 템플릿 적용

* refactor: 메일 제목 수정 - close #21

* feat: url 대신 code로 에러 조건 확인하도록 수정

* refactor: 공격 설명 수정

Author: cholulu99

package-lock.json

@@ -20,7 +20,8 @@
     "express": "^5.1.0",
     "fluent-ffmpeg": "^2.1.3",
     "http-errors": "^2.0.0",
-    "nodemailer": "^7.0.3"
+    "nodemailer": "^7.0.3",
+    "mjml": "^4.15.3"
   },
   "license": "MIT",
   "devDependencies": {

package.json

@@ -6,16 +6,14 @@ import createError from "http-errors";
 import { HTTP_STATUS, MESSAGES } from "./config/constants.js";
 import env from "./config/env.js";
 import editRoutes from "./routes/editRoutes.js";
-import emailRoutes from "./routes/emailRoutes.js";
 import videoRoutes from "./routes/videoRoutes.js";
 
 const app = express();
-
+app.use("/images", express.static("public/images"));
 app.use(cors());
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 
-app.use(`${env.API_PREFIX}/`, emailRoutes);
 app.use(`${env.API_PREFIX}/video`, videoRoutes);
 app.use(`${env.API_PREFIX}/edit`, editRoutes);
 

src/app.js

@@ -28,6 +28,15 @@ const MESSAGES = {
   },
 };
 
+const CODE = {
+  SUCCESS: {
+    SUCCESS_ANALYZE: "SUCCESS_ANALYZE",
+  },
+  ERROR: {
+    FAILED_ANALYZE: "FAILED_ANALYZE",
+  },
+};
+
 const HTTP_STATUS = {
   OK: 200,
   CREATED: 201,
@@ -52,4 +61,4 @@ const REGEX_PATTERNS = {
   EMAIL: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i,
 };
 
-export { MESSAGES, HTTP_STATUS, GCS, REQUIRED_FIELDS, REGEX_PATTERNS };
+export { MESSAGES, HTTP_STATUS, GCS, REQUIRED_FIELDS, REGEX_PATTERNS, CODE };

src/config/constants.js

@@ -4,9 +4,10 @@ import { fileURLToPath } from "url";
 
 import ejs from "ejs";
 import createError from "http-errors";
+import mjml2html from "mjml";
 import nodemailer from "nodemailer";
 
-import { MESSAGES } from "../config/constants.js";
+import { MESSAGES, CODE } from "../config/constants.js";
 import env from "../config/env.js";
 
 const filename = fileURLToPath(import.meta.url);
@@ -20,28 +21,34 @@ const transporter = nodemailer.createTransport({
   },
 });
 
-const readEmailTemplate = async ({ message, url }) => {
+const readEmailTemplate = async ({ code, message, url }) => {
   try {
-    if (url === "") {
-      const filePath = path.join(dirname, "../views/errorTemplate.ejs");
+    if (code === CODE.ERROR.FAILED_ANALYZE) {
+      const filePath = path.join(dirname, "../views", "errorTemplate.mjml.ejs");
       const template = await fs.readFile(filePath, "utf-8");
       const htmlContent = ejs.render(template, { message });
+      const { html } = mjml2html(htmlContent, {
+        validationLevel: "strict",
+      });
 
-      return htmlContent;
+      return html;
     }
-    const filePath = path.join(dirname, "../views/emailTemplate.ejs");
+    const filePath = path.join(dirname, "../views", "emailTemplate.mjml.ejs");
     const template = await fs.readFile(filePath, "utf-8");
-    const htmlContent = ejs.render(template, { message, url });
+    const htmlContent = ejs.render(template, { url });
+    const { html } = mjml2html(htmlContent, {
+      validationLevel: "strict",
+    });
 
-    return htmlContent;
+    return html;
   } catch (err) {
     throw createError.InternalServerError(MESSAGES.ERROR.FAILED_READ_TEMPLATE);
   }
 };
 
-const sendEmail = async ({ email, message, url }) => {
+const sendEmail = async ({ email, code, message, url }) => {
   try {
-    const html = await readEmailTemplate({ message, url });
+    const html = await readEmailTemplate({ code, message, url });
     const mailOptions = {
       from: env.email_user,
       to: email,

src/controllers/emailController.js

@@ -35,10 +35,10 @@ const consumeEmailQueue = async () => {
         return;
       }
 
-      const { email, message, url } = JSON.parse(msg.content.toString());
+      const { email, code, message, url } = JSON.parse(msg.content.toString());
 
       try {
-        await sendEmail({ email, message, url });
+        await sendEmail({ email, code, message, url });
         channel.ack(msg);
       } catch {
         channel.nack(msg, false, false);

src/routes/emailRoutes.js

@@ -0,0 +1,71 @@
+<mjml>
+  <mj-head>
+    <mj-font
+      name="Pretendard"
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
+    />
+    <mj-attributes>
+      <mj-all font-family="Pretendard, Arial" color="#404040" />
+    </mj-attributes>
+  </mj-head>
+  <mj-body>
+    <mj-section
+      background-color="#ffffff"
+      border="1px solid #E5E7EB"
+      border-radius="8px"
+      padding="20px"
+    >
+      <mj-column>
+        <mj-image
+          width="90px"
+          height="40px"
+          src="https://raw.githubusercontent.com/cholulu99/commandTrackerImage/main/3f4-7420ead14100-removebg-preview.png"
+        ></mj-image>
+        <mj-spacer height="20px"></mj-spacer>
+        <mj-text align="center" font-size="16px" line-height="1.5">
+          command Tracker 서비스를 사용해주셔서 감사합니다.
+        </mj-text>
+        <mj-text align="center" font-size="16px" line-height="1.5">
+          요청하신 캐릭터의 커맨드는 자막으로 보여집니다.
+        </mj-text>
+        <mj-divider border-color="#E5E7EB" border-width="1px"></mj-divider>
+        <mj-text align="center" font-size="16px">
+          아래는 스트리트파이터 6의 기본 공격 커맨드입니다:
+        </mj-text>
+        <mj-text align="center" font-size="14px">
+          <p>LP: 약펀치</p>
+          <p>MP: 중간펀치</p>
+          <p>HP: 강펀치</p>
+          <p>LK: 약발</p>
+          <p>MK: 중발</p>
+          <p>HK: 강발</p>
+        </mj-text>
+        <mj-button
+          align="center"
+          href="<%= url %>"
+          background-color="#007BFF"
+          color="#ffffff"
+        >
+          영상 다운로드
+        </mj-button>
+        <mj-divider border-color="#E5E7EB" border-width="1px"></mj-divider>
+        <mj-text align="center" font-size="12px" line-height="1.75">
+          <a
+            href="https://www.naver.com"
+            target="_blank"
+            rel="noopener noreferrer nofollow"
+            >웹사이트</a
+          >
+        </mj-text>
+        <mj-text
+          align="center"
+          font-family="Pretendard, Arial"
+          font-size="12px"
+          line-height="1"
+        >
+          © command Tracker. All Rights Reserved.
+        </mj-text>
+      </mj-column>
+    </mj-section>
+  </mj-body>
+</mjml>