Deploy

src/main/resources/templates/component/button.html

@@ -4,32 +4,25 @@
     <meta content="width=device-width, initial-scale=1.0" name="viewport" />
 </head>
 <div th:fragment="button">
-<div style="
-        padding: 14px 64px;
-        background-color: #3E4CF7;
-        width: 272px;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        text-align: center;
-        border-radius: 10px;
-        margin: 0 auto;
-        ">
-    <a href="https://ceos-sinchon.com/"
-        style="text-decoration-line: none;">
-        <span style="
-            text-decoration: none;
-            outline: 0px;
-            font-style: normal;
-            font-weight: 600;
-            font-size: 20px;
-            line-height: 20px;
-            text-align: center;
-            color: #FFFFFF;">
-            홈페이지 바로가기
-        </span>
-    </a>
-</div>
+    <table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0"
+           style="margin: 0 auto; border-collapse: separate !important;">
+        <tr>
+            <td align="center" bgcolor="#3E4CF7" style="border-radius: 10px;">
+                <a href="https://ceos-sinchon.com/"
+                   style="display: inline-block;
+                        padding: 14px 64px;
+                        text-decoration: none;
+                        font-style: normal;
+                        font-weight: 600;
+                        font-size: 20px;
+                        line-height: 20px;
+                        text-align: center;
+                        color: #FFFFFF;
+                        border-radius: 10px;">
+                    홈페이지 바로가기
+                </a>
+            </td>
+        </tr>
+    </table>
 </div>
 </html>

src/main/resources/templates/component/copyright.html

@@ -3,18 +3,14 @@
     <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
     <meta content="width=device-width, initial-scale=1.0" name="viewport" />
 </head>
-<div style="
+<div th:fragment="copyright" class="mail-fluid" style="
     width: 680px;
     box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
     text-align: center;
     border-radius: 10px;
     ">
-    <span style="
+    <span class="copyright-text" style="
         text-decoration: none;
-        margin: 0 auto;
         outline: 0px;
         font-style: normal;
         font-weight: 600;

src/main/resources/templates/component/divider.html

@@ -3,11 +3,11 @@
     <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
     <meta content="width=device-width, initial-scale=1.0" name="viewport" />
 </head>
-<div style="
+<div th:fragment="divider" style="
         height: 2px;
         padding: 0px;
         margin: 30px 0px;
         background-color: #E9EBEF;
         ">
 </div>
-</html>
+</html>

src/main/resources/templates/component/interviewDateInfo.html

@@ -24,12 +24,8 @@
 
         <div style="height: 16px; width: 680px"></div>
 
-        <div th:each="times, index: ${interviewDateInfo.notAvailabletime}">
-            <div style="
-                display: flex;
-                flex-direction: row;
-                width: 680px;
-                ">
+        <div th:each="times, index: ${interviewDateInfo.notAvailabletime}"
+             style="width: 680px;">
                 <span style="
                     text-decoration: none;
                     outline: 0px;
@@ -51,7 +47,7 @@
                     color: #232527;">
                     &nbsp;:&nbsp;
                 </span>
-                <div th:each="time, innerIndex: ${times}">
+                <span th:each="time, innerIndex: ${times}">
                     <span style="
                         text-decoration: none;
                         outline: 0px;
@@ -74,9 +70,8 @@
                           th:text="${time}">
                             시간
                     </span>
-                </div>
-            </div>
+                </span>
         </div>
     </div>
 </div>
-</html>
+</html>

src/main/resources/templates/component/recruit.html

@@ -11,8 +11,8 @@
         }
     </style>
 </head>
-<div th:fragment="passwordInfo(passwordInfo)">
-    <div style="
+<div th:fragment="recruit">
+    <div class="mail-fluid recruit-body" style="
         width: 680px;
         text-decoration: none;
         outline: 0px;
@@ -114,7 +114,7 @@
         <span style="font-weight: 600; color: #3E4CF7;">@ceos.sinchon </span>
         에도 다양한 리쿠르팅 관련 정보를 제공하고 있으니 참고해주세요! <br> <br>
 
-        <div style="height: 16px; width: 680px"></div>
+        <div style="height: 16px; line-height: 16px; font-size: 0;">&nbsp;</div>
     </div>
 </div>
-</html>
+</html>

src/main/resources/templates/component/recruitButton.html

@@ -4,32 +4,25 @@
     <meta content="width=device-width, initial-scale=1.0" name="viewport" />
 </head>
 <div th:fragment="button">
-<div style="
-        padding: 14px 64px;
-        background-color: #3E4CF7;
-        width: fit-content;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        text-align: center;
-        border-radius: 10px;
-        margin: 0 auto;
-        ">
-    <a href="https://ceos-sinchon.com/recruit"
-        style="text-decoration-line: none;">
-        <span style="
-            text-decoration: none;
-            outline: 0px;
-            font-style: normal;
-            font-weight: 600;
-            font-size: 20px;
-            line-height: 20px;
-            text-align: center;
-            color: #FFFFFF;">
-            지원하기
-        </span>
-    </a>
-</div>
+    <table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0"
+           style="margin: 0 auto; border-collapse: separate !important;">
+        <tr>
+            <td align="center" bgcolor="#3E4CF7" style="border-radius: 10px;">
+                <a class="recruit-button" href="https://ceos-sinchon.com/recruit"
+                   style="display: inline-block;
+                        padding: 14px 64px;
+                        text-decoration: none;
+                        font-style: normal;
+                        font-weight: 600;
+                        font-size: 20px;
+                        line-height: 20px;
+                        text-align: center;
+                        color: #FFFFFF;
+                        border-radius: 10px;">
+                    지원하기
+                </a>
+            </td>
+        </tr>
+    </table>
 </div>
 </html>

src/main/resources/templates/component/recruitGreeting.html

@@ -9,7 +9,7 @@
         box-sizing: border-box;
         border-radius: 10px;
         ">
-        <div style="width: 680px;
+        <div class="mail-fluid recruit-heading" style="width: 680px;
                 text-decoration: none;
                 outline: 0px;
                 font-family: Pretendard, AppleSDGothic, apple sd gothic neo,
@@ -26,9 +26,9 @@
             <span>기 리크루팅을 시작합니다!</span>
         </div>
 
-        <div style="height: 16px; width: 680px; "></div>
+        <div style="height: 16px; line-height: 16px; font-size: 0;">&nbsp;</div>
 
-        <div style="width: 680px;
+        <div class="mail-fluid recruit-copy" style="width: 680px;
             text-decoration: none;
             outline: 0px;
             font-family: Pretendard, AppleSDGothic, apple sd gothic neo,
@@ -62,4 +62,4 @@
         </div>
     </div>
 </div>
-</html>
+</html>

src/main/resources/templates/component/title.html

@@ -3,14 +3,15 @@
     <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
     <meta content="width=device-width, initial-scale=1.0" name="viewport" />
 </head>
-<div style="
+<div th:fragment="title" class="mail-fluid" style="
     width: 680px;
     ">
     <div style="padding: 0px 5px">
         <img
-                height="26px"
+                height="26"
                 src="https://ceos-storage-dev.s3.ap-northeast-2.amazonaws.com/mail/CEOSlogo.png"
+                alt="CEOS"
         />
     </div>
 </div>
-</html>
+</html>

src/main/resources/templates/sendApplicationMail.html

@@ -5,51 +5,85 @@
 >
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link href="https://fonts.cdnfonts.com/css/gilroy-bold" rel="stylesheet">
-    <title></title>
+    <meta name="viewport" content="width=680" />
+    <meta name="x-apple-disable-message-reformatting" />
+    <title>CEOS Application</title>
     <style>
-        * {
+        html,
+        body {
+            width: 100% !important;
+            margin: 0 !important;
+            padding: 0 !important;
+        }
+
+        body,
+        table,
+        td,
+        a,
+        span {
             font-family: Pretendard ,AppleSDGothic, apple sd gothic neo, noto sans korean,
             noto sans korean regular, noto sans cjk kr, noto sans cjk,
             nanum gothic, malgun gothic, dotum, arial, helvetica, MS Gothic,
             sans-serif !important;
             mso-line-height-rule: exactly;
-            -ms-text-size-adjust: 100%;
-            -webkit-text-size-adjust: 100%;
+            -ms-text-size-adjust: 100% !important;
+            -webkit-text-size-adjust: 100% !important;
             word-break: break-word;
         }
+
+        table,
+        td {
+            border-collapse: collapse !important;
+            border-spacing: 0 !important;
+        }
+
+        img {
+            display: block;
+            border: 0;
+        }
+
+        .email-container,
+        .mail-fluid {
+            width: 680px !important;
+        }
     </style>
 </head>
-<body style="width: 100%;
-    margin: 0;
-    padding: 0;">
-<div style="width: 680px;
-    margin: 0 auto;
-    padding: 0;">
-    <div th:replace="~{component/title}">title</div>
-    <div th:replace="~{component/divider}">divider</div>
-    <div th:replace="~{component/greeting :: greetInfo(greetInfo=${greetInfo})}">greeting</div>
-    <div style="height: 30px; width: 680px"></div>
-    <div th:replace="~{component/uuid :: uuidInfo(uuidInfo=${uuidInfo})}">uuid</div>
-    <div th:replace="~{component/divider}">divider</div>
-    <div th:replace="~{component/personalInfo :: personalInfo(personalInfo=${personalInfo})}">uuid</div>
-    <div th:replace="~{component/divider}">divider</div>
-    <div th:replace="~{component/schoolInfo :: schoolInfo(schoolInfo=${schoolInfo})}">school</div>
-    <div th:replace="~{component/divider}">divider</div>
-    <div th:replace="~{component/ceosQuestionInfo :: ceosQuestionInfo(ceosQuestionInfo=${ceosQuestionInfo})}">ceos question</div>
-    <div th:replace="~{component/divider}">divider</div>
-    <div th:replace="~{component/commonQuestionInfo :: commonQuestionInfo(commonQuestionInfo=${commonQuestionInfo})}">common question</div>
-    <div th:replace="~{component/divider}">divider</div>
-    <div th:replace="~{component/partQuestionInfo :: partQuestionInfo(partQuestionInfo=${partQuestionInfo})}">part question</div>
-    <div th:replace="~{component/divider}">divider</div>
-    <div th:replace="~{component/interviewDateInfo :: interviewDateInfo(interviewDateInfo=${interviewDateInfo})}">part question</div>
-    <div style="height: 90px; width: 680px"></div>
-    <div th:replace="~{component/button}">
-        button
-    </div>
-    <div style="height: 40px; width: 680px"></div>
-    <div th:replace="~{component/copyright}">copyright</div>
-</div>
+<body style="width: 100%; margin: 0; padding: 0; background-color: #FFFFFF;" bgcolor="#FFFFFF">
+<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0"
+       style="width: 100%; margin: 0; padding: 0; background-color: #FFFFFF;" bgcolor="#FFFFFF">
+    <tr>
+        <td align="center" style="padding: 0;">
+            <table class="email-container" role="presentation" width="680" border="0" cellpadding="0" cellspacing="0"
+                   style="width: 680px; margin: 0 auto;">
+                <tr>
+                    <td class="email-content" width="680" style="width: 680px; padding: 0;">
+                        <div th:replace="~{component/title :: title}">title</div>
+                        <div th:replace="~{component/divider :: divider}">divider</div>
+                        <div th:replace="~{component/greeting :: greetInfo(greetInfo=${greetInfo})}">greeting</div>
+                        <div style="height: 30px; line-height: 30px; font-size: 0;">&nbsp;</div>
+                        <div th:replace="~{component/uuid :: uuidInfo(uuidInfo=${uuidInfo})}">uuid</div>
+                        <div th:replace="~{component/divider :: divider}">divider</div>
+                        <div th:replace="~{component/personalInfo :: personalInfo(personalInfo=${personalInfo})}">personal</div>
+                        <div th:replace="~{component/divider :: divider}">divider</div>
+                        <div th:replace="~{component/schoolInfo :: schoolInfo(schoolInfo=${schoolInfo})}">school</div>
+                        <div th:replace="~{component/divider :: divider}">divider</div>
+                        <div th:replace="~{component/ceosQuestionInfo :: ceosQuestionInfo(ceosQuestionInfo=${ceosQuestionInfo})}">ceos question</div>
+                        <div th:replace="~{component/divider :: divider}">divider</div>
+                        <div th:replace="~{component/commonQuestionInfo :: commonQuestionInfo(commonQuestionInfo=${commonQuestionInfo})}">common question</div>
+                        <div th:replace="~{component/divider :: divider}">divider</div>
+                        <div th:replace="~{component/partQuestionInfo :: partQuestionInfo(partQuestionInfo=${partQuestionInfo})}">part question</div>
+                        <div th:replace="~{component/divider :: divider}">divider</div>
+                        <div th:replace="~{component/interviewDateInfo :: interviewDateInfo(interviewDateInfo=${interviewDateInfo})}">interview date</div>
+                        <div style="height: 90px; line-height: 90px; font-size: 0;">&nbsp;</div>
+                        <div th:replace="~{component/button :: button}">button</div>
+                        <div style="height: 40px; line-height: 40px; font-size: 0;">&nbsp;</div>
+                        <div th:replace="~{component/copyright :: copyright}">copyright</div>
+                        <div style="height: 24px; line-height: 24px; font-size: 0;">&nbsp;</div>
+                    </td>
+                </tr>
+            </table>
+        </td>
+    </tr>
+</table>
 </body>
 </html>