Merge pull request #71 from Itstime-replog/feature/#22

Feat: 이메일 템플릿 디자인
Itstime-replog · Jan 9, 2025 · 678eb85 · 678eb85
2 parents 30a89ea + 3b46947
commit 678eb85
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 23 deletions.
diff --git a/src/main/java/itstime/reflog/config/SecurityConfig.java b/src/main/java/itstime/reflog/config/SecurityConfig.java
@@ -45,7 +45,7 @@ public CorsConfigurationSource corsConfigurationSource() {
     public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
         http
                 .authorizeHttpRequests(requests -> requests
-                        .requestMatchers("/test", "/swagger-ui/index.html", "/swagger-ui/**", "/v3/api-docs/**", "/swagger-resources/**", "/v3/api-docs", "/api/v1/token/**", "/api/v1/todo/**", "/api/v1/learn/**", "/api/v1/plan/**", "/api/v1/weekly-analysis/**","/api/v1/monthly-analysis/**","/api/v1/retrospect/**","/api/v1/mypage/**","/api/v1/notifications/**","/api/v1/communities/**", "/api/v1/comments/**").permitAll()
+                        .requestMatchers("/test", "/swagger-ui/index.html", "/swagger-ui/**", "/v3/api-docs/**", "/swagger-resources/**", "/v3/api-docs", "/api/v1/token/**", "/api/v1/todo/**", "/api/v1/learn/**", "/api/v1/plan/**", "/api/v1/weekly-analysis/**","/api/v1/monthly-analysis/**","/api/v1/retrospect/**","/api/v1/mypage/**","/api/v1/notifications/**","/api/v1/communities/**", "/api/v1/comments/**", "/images/sample.png").permitAll()
                         .anyRequest().authenticated()           // 나머지 URL은 인증 필요
                 )
                 // .addFilterBefore(new TokenAuthenticationFilter(jwtTokenProvider()), UsernamePasswordAuthenticationFilter.class)

diff --git a/src/main/java/itstime/reflog/email/EmailSchedulerService.java b/src/main/java/itstime/reflog/email/EmailSchedulerService.java
@@ -30,7 +30,7 @@ public void sendDailyEmail() {
 			long daysDifference = ChronoUnit.DAYS.between(latestDate, today);
 
 			if (daysDifference == 2) { // 이틀 차이
-				emailService.sendEmail(member.getEmail(), "day", today.toString());
+				emailService.sendEmail(member.getEmail(), "day", today.toString(), member.getName());
 			}
 		}
 	}
@@ -45,7 +45,7 @@ public void sendWeeklyEmail() {
 			long daysDifference = ChronoUnit.DAYS.between(latestDate, today);
 
 			if (daysDifference > 2 && daysDifference < 30) { // 이틀 이상, 한 달 미만
-				emailService.sendEmail(member.getEmail(), "week", today.toString());
+				emailService.sendEmail(member.getEmail(), "week", today.toString(), member.getName());
 			}
 		}
 	}
@@ -60,7 +60,7 @@ public void sendMonthlyEmail() {
 			long daysDifference = ChronoUnit.DAYS.between(latestDate, today);
 
 			if (daysDifference >= 30) { // 한 달 이상
-				emailService.sendEmail(member.getEmail(), "month", today.toString());
+				emailService.sendEmail(member.getEmail(), "month", today.toString(), member.getName());
 			}
 		}
 	}

diff --git a/src/main/java/itstime/reflog/email/EmailService.java b/src/main/java/itstime/reflog/email/EmailService.java
@@ -27,13 +27,13 @@ public class EmailService {
 	private final MemberRepository memberRepository;
 
 	@Async
-	public void sendEmail(String email, String templateName, String date) {
+	public void sendEmail(String email, String templateName, String date, String name) {
 		MimeMessage mimeMessage = javaMailSender.createMimeMessage();
 		try {
 			MimeMessageHelper mimeMessageHelper = new MimeMessageHelper(mimeMessage, false, "UTF-8");
 			mimeMessageHelper.setTo(email); // 수신자
-			mimeMessageHelper.setSubject("Reflog - 회고일지를 작성해주세요!"); // 메일 제목
-			mimeMessageHelper.setText(setContext(templateName, date), true); // 메일 본문
+			mimeMessageHelper.setSubject(getSubjectByTemplate(templateName)); // 메일 제목
+			mimeMessageHelper.setText(setContext(templateName, date, name), true); // 메일 본문
 
 			javaMailSender.send(mimeMessage);
 			log.info("Succeeded to send email to " + email);
@@ -42,9 +42,23 @@ public void sendEmail(String email, String templateName, String date) {
 		}
 	}
 
-	public String setContext(String templateName, String date) {
+	private String getSubjectByTemplate(String templateName) {
+		switch (templateName) {
+			case "day":
+				return "똑똑! 리플로그가 회고일지를 기다리고 있어요.";
+			case "week":
+				return "이번주도 리플로그가 응원해요! 하루 10분만 투자해보세요.";
+			case "month":
+				return "회고일지를 잊으셨나요? 다시 시작해보세요!";
+			default:
+				return "Reflog - 회고일지를 작성해주세요!";
+		}
+	}
+
+	public String setContext(String templateName, String date, String name) {
 		Context context = new Context();
 		context.setVariable("date", date);
+		context.setVariable("name", name);
 		return templateEngine.process(templateName, context); // HTML 템플릿 처리
 	}
 

diff --git a/src/main/resources/static/images/sample.png b/src/main/resources/static/images/sample.png
diff --git a/src/main/resources/templates/day.html b/src/main/resources/templates/day.html
@@ -1,10 +1,22 @@
 <!DOCTYPE html>
-<html lang="en">
+<html xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8">
-    <title>작은 회고가 큰 변화를 만듭니다. 오늘도 한 걸음 나아가세요!</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reflog Reminder</title>
 </head>
-<body>
-작은 회고가 큰 변화를 만듭니다. 오늘도 한 걸음 나아가세요!
+<body style="font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f8f9fa;">
+<div style="padding: 10px; background-color: white; width: 600px; max-width: 100%; margin: auto; box-shadow: none; text-align: center; border: 1px solid #e0e0e0; min-height: 711px; display: flex; flex-direction: column; ">
+    <div style="margin-bottom: 100px;">
+        <img src="http://54.180.61.91:8080/images/sample.png" alt="Reflog 로고" style="width: 100%; height: auto; max-width: 606px; object-fit: cover; margin-top: 0px;">
+    </div>
+    <div style="text-align: left; padding: 0 40px;">
+        <h2 style="margin: 0; font-size: 25px; font-weight: 600; color: #000000; line-height: 30px;" th:text="${name} + '님, 안녕하세요!'"></h2> <br>
+        <p style="margin: 10px 0; font-size: 14px; font-weight: 500; color: #494A4F; line-height: 16.71px;" th:text="'어제 회고일지 작성을 잊은 ' + ${name} + '님을 위해 찾아왔어요.'"></p>
+        <p style="margin: 10px 0; font-size: 14px; font-weight: 500; color: #494A4F; line-height: 16.71px;">아직 포기하긴 일러요!</p>
+        <p style="margin: 10px 0; font-size: 14px; font-weight: 500; color: #494A4F; line-height: 16.71px;">10분만 투자해 오늘의 생각과 배움을 기록하며 내일의 더 나은 나를 만들어봐요!</p>
+    </div>
+    <a href="#" style="padding: 0 70px; line-height: 33px; font-size: 14px; color: #0059FF; text-decoration: none; border: 1.2px solid #0059FF; border-radius: 24px; margin: 250px auto 20px;">회고일지 작성하러 가기</a>
+</div>
 </body>
-</html>
+</html>
diff --git a/src/main/resources/templates/month.html b/src/main/resources/templates/month.html
@@ -1,10 +1,27 @@
 <!DOCTYPE html>
-<html lang="en">
+<html xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8">
-    <title>회고일지를 잊으셨나요? 다시 시작해보세요!</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reflog Reminder</title>
 </head>
-<body>
-회고일지를 잊으셨나요? 다시 시작해보세요!
+<body style="font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f8f9fa;">
+<div style="padding: 10px; background-color: white; width: 600px; max-width: 100%; margin: auto; box-shadow: none; text-align: center; border: 1px solid #e0e0e0; min-height: 711px; display: flex; flex-direction: column; ">
+    <div style="margin-bottom: 100px;">
+        <img src="http://54.180.61.91:8080/images/sample.png" alt="Reflog 로고" style="width: 100%; height: auto; max-width: 606px; object-fit: cover; margin-top: 0px;">
+    </div>
+    <div style="text-align: left; padding: 0 40px;">
+        <h2 style="margin: 0; font-size: 25px; font-weight: 600; color: #000000; line-height: 30px;" th:text="${name} + '님, 안녕하세요!'"></h2> <br>
+        <p style="margin: 10px 0; font-size: 14px; font-weight: 500; color: #494A4F; line-height: 16.71px;">회고일지 작성을 잊은지 약 한 달이 지났어요😂</p>
+        <p style="margin: 10px 0; font-size: 14px; font-weight: 500; color: #494A4F; line-height: 16.71px;">그러나 언제든 다시 시작할 수 있다는 사실!</p>
+        <p style="margin: 10px 0; font-size: 14px; font-weight: 500; color: #494A4F; line-height: 16.71px;">작은 습관이 큰 변화를 만들어요.</p>
+        <p style="margin: 10px 0; font-size: 14px; font-weight: 500; color: #494A4F; line-height: 16.71px;">오늘의 회고일지 작성으로 한 걸음 더 나아가보는건 어떨까요?</p><br>
+        <p style="margin: 10px 0; font-size: 14px; font-weight: 500; color: #494A4F; line-height: 16.71px;">다른 유저들도 꾸준히 회고일지를 작성하고 있어요.</p>
+        <p style="margin: 10px 0; font-size: 14px; font-weight: 500; color: #494A4F; line-height: 16.71px;">일지 작성이 어렵다면 다른 사람의 회고일지를 확인해 동기를 부여받아 보세요!</p>
+
+    </div>
+    <a href="#" style="padding: 0 70px; line-height: 33px; font-size: 14px; color: #0059FF; text-decoration: none; border: 1.2px solid #0059FF; border-radius: 24px; margin: 142px auto 20px;">회고일지 작성하러 가기</a>
+</div>
 </body>
-</html>
+</html>
+
diff --git a/src/main/resources/templates/week.html b/src/main/resources/templates/week.html
@@ -1,10 +1,23 @@
 <!DOCTYPE html>
-<html lang="en">
+<html xmlns:th="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8">
-    <title>회고일지를 통해 자신의 성장과 발전을 확인하세요!</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reflog Reminder</title>
 </head>
-<body>
-회고일지를 통해 자신의 성장과 발전을 확인하세요!
+<body style="font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f8f9fa;">
+<div style="padding: 10px; background-color: white; width: 600px; max-width: 100%; margin: auto; box-shadow: none; text-align: center; border: 1px solid #e0e0e0; min-height: 711px; display: flex; flex-direction: column; ">
+    <div style="margin-bottom: 100px;">
+        <img src="http://54.180.61.91:8080/images/sample.png" alt="Reflog 로고" style="width: 100%; height: auto; max-width: 606px; object-fit: cover; margin-top: 0px;">
+    </div>
+    <div style="text-align: left; padding: 0 40px;">
+        <h2 style="margin: 0; font-size: 25px; font-weight: 600; color: #000000; line-height: 30px;" th:text="${name} + '님, 안녕하세요!'"></h2> <br>
+        <p style="margin: 10px 0; font-size: 14px; font-weight: 500; color: #494A4F; line-height: 16.71px;">성장은 스스로를 돌아보는 데서 시작하는거 알죠?</p>
+        <p style="margin: 10px 0; font-size: 14px; font-weight: 500; color: #494A4F; line-height: 16.71px;">회고는 성장을 위한 첫걸음이에요.</p>
+        <p style="margin: 10px 0; font-size: 14px; font-weight: 500; color: #494A4F; line-height: 16.71px;">회고일지를 통해 자신의 성장과 발전을 확인해봐요. 이번주 파이팅!</p>
+    </div>
+    <a href="#" style="padding: 0 70px; line-height: 33px; font-size: 14px; color: #0059FF; text-decoration: none; border: 1.2px solid #0059FF; border-radius: 24px; margin: 250px auto 20px;">회고일지 작성하러 가기</a>
+</div>
 </body>
-</html>
+</html>
+