Merge pull request #244 from haedoang/feature/report

[방 연락하기] 메일 템플릿 업데이트
bsideproject · Nov 22, 2023 · 302693c · 302693c
2 parents fc8e459 + bca21f0
commit 302693c
Show file tree

Hide file tree

Showing 2 changed files with 197 additions and 46 deletions.
diff --git a/src/main/java/com/koliving/api/room/application/RoomService.java b/src/main/java/com/koliving/api/room/application/RoomService.java
@@ -159,10 +159,9 @@ public void contact(RoomContactRequest request, User user) {
         final Room room = getRoom(request.roomId());
         final Notification notification = Notification.of(user, room.getUser());
         room.getUser().addReceivedNotification(notification);
-        emailService.sendRoomContact("[email protected]", request.contactInfo(), request.message(), user, getRoomDetailUrl(room.getId()));
+        emailService.sendRoomContact(room.getUser().getEmail(), request.contactInfo(), request.message(), user, getRoomDetailUrl(room.getId()));
     }
 
-
     public String getRoomDetailUrl(Long roomId) {
         return String.format("%s/room/%d", frontProperties.getOrigin(), roomId);
     }

diff --git a/src/main/resources/templates/contact-email-template.html b/src/main/resources/templates/contact-email-template.html
@@ -1,52 +1,204 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org"></html>
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title th:value="${title}"></title>
-<style>
-    .grid-container {
-        display: grid; 
-        place-items: center;
-    }
-    .text {
-        color: black;
+    <style>
+      :root {
+        --main-color: #ff8e00;
+        --secondary-color: #fafafa;
+        --text-color: #424242;
+        --subtext-color: #757575;
+        --border-color: #eee;
+        --card-bg: rgba(255, 142, 0, 0.1);
+      }
+
+      /* Shared styles */
+      .flex-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .text-center {
+        text-align: center;
+      }
+
+      /* Header */
+      header {
+        display: flex;
+        flex-direction: column;
+        padding: 20px 0;
+        background: var(--main-color);
+        align-items: center;
+      }
+
+      /* Content */
+      .content {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        padding-top: 20px;
+        text-align: center;
+        align-items: center;
+      }
+
+      /* Title */
+      .title {
+        color: var(--main-color);
+        text-align: center;
         font-size: 18px;
+        font-weight: 600;
+      }
+
+      /* Profile */
+      .profile {
+        width: 50%;
+        display: flex;
+        padding: 20px;
+        flex-direction: column;
+        align-items: flex-start;
+        border-radius: 4px;
+        background: var(--secondary-color);
+      }
+
+      .profile-title {
+        width: 100%;
+        color: #212121;
+        text-align: center;
+        font-size: 18px;
+        font-weight: 600;
+        padding-bottom: 10px;
+      }
+
+      .profile-info {
+        display: flex;
+        padding-bottom: 0px;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        align-self: stretch;
+      }
+
+      .profile-info--name {
+        color: var(--text-color);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        padding-top: 10px;
+      }
+
+      .profile-info--year,
+      .profile-info--email,
+      .profile-introduction {
+        color: var(--subtext-color);
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+      }
+
+      /* Horizontal Rule */
+      hr {
+        width: 100%;
+        border: 1px solid var(--border-color);
+      }
+
+      /* Card */
+      .card {
+        display: flex;
+        padding: 20px;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        gap: 10px;
+        border-radius: 4px;
+        background: var(--card-bg);
+        width: 50%;
+      }
+
+      .card-title {
+        color: var(--main-color);
+        text-align: center;
+        font-size: 18px;
+        font-weight: 600;
+        width: 100%;
+      }
+
+      .card-description {
+        color: var(--text-color);
         font-family: Pretendard;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        margin: 0;
+      }
+
+      /* Link */
+      a {
+        display: flex;
+        padding: 8px 10px;
+        justify-content: center;
+        align-items: center;
+        gap: 4px;
+        flex: 1 0 0;
+        border-radius: 2px;
+        border: 1px solid var(--main-color);
+        color: var(--main-color);
+        text-align: center;
+        font-size: 14px;
         font-weight: 700;
-        line-height: 28px;  
-        word-wrap: break-word;
-    }
-</style>
-</head>
-<body>
-    <div class="grid-container" style="background: white;">
-        <div>
-          <h1><img src="cid:logo"/></h1>
-        </div>
-        <div>
-          <span th:text="${subtitle}"/>
-        </div>
-        <div style="background-color: whitesmoke; padding:5px">
-          <div style="width: 525px">
-            <span class="text">Room link: </span><a th:href="${roomLink}" target="_blank" th:text="${roomLink}"/><br/>
-            <span class="text">Message: </span><span class="text" th:text="${message}"/><br/>
-            <span class="text">Contact info: </span><span class="text" th:text="${contact}"/><br/>
-            <span class="text">Sender’s Profile: </span>
-        </div>
-        <div style="background-color: #FF8E00; margin-top: 20px;">
-          <div>
-            <div>
-                <img th:src="${userImageProfile}" alt="userProfile"/>
-            </div>
-            <div th:text="${userName}"/>
-            <div>
-                <span class="text" th:text="${userAge}"/><span class="text"> years old</span>
-                <span class="text">|</span>            
-                <span class="text" th:text="${userGender}"/>
+        width: 50%;
+        background-color: white;
+        text-decoration: none;
+      }
+
+      /* Profile Image */
+      .profile-info-image--box {
+        width: 50px;
+        height: 50px;
+        border-radius: 45px;
+        overflow: hidden;
+      }
+
+      .profile-info-image--img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <img src="https://kr.object.ncloudstorage.com/backend-bucket/images/templates/house.svg" alt="house" />
+    </header>
+    <div class="content">
+      <div class="title"><span th:text="${subtitle}"/></div>
+      <div class="profile">
+        <div class="profile-title">Sender’s Profile</div>
+        <div class="profile-info">
+          <div class="profile-info-image--box" style="background: #bdbdbd">
+            <img class="profile-info-image--img" th:src="${userImageProfile}" />
+          </div>
+          <div class="profile-info--name" th:text="${userName}"/>
+          <div class="profile-info--year">
+            <span th:text="${userAge}"/>
+            <span> years old | </span>
+            <span th:text="${userGender}"/>
           </div>
-          <div th:text="${userDescription}"/>
+          <div class="profile-info--email" th:text="${contact}"/>
         </div>
+        <hr />
+        <p class="profile-introduction" th:text="${userDescription}">
+        </p>
+      </div>
+      <div class="card">
+        <div class="card-title">Message</div>
+        <p class="card-description" th:text="${message}"></p>
       </div>
-</body>
-</html>
+      <a th:href="${roomLink}" target="_blank"
+        ><img src="https://kr.object.ncloudstorage.com/backend-bucket/images/templates/house-cute.svg" alt="" /> Go to room</a
+      >
+    </div>
+  </body>
+</html>