Merge pull request #282 from sopt-makers/develop

[Deploy] 최종 QA 항목 반영
sopt-makers · Jul 30, 2024 · 360d8e3 · 360d8e3
2 parents a4bf5c3 + ce22ce7
commit 360d8e3
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 46 deletions.
diff --git a/src/common/components/Input/components/InputTheme/index.tsx b/src/common/components/Input/components/InputTheme/index.tsx
@@ -167,9 +167,9 @@ export const TextBox이메일 = ({
       </InputLine>
       {isActive && (
         <>
-          <p className={success}>이메일이 전송되었어요.</p>
+          <p className={success}>이메일이 전송되었어요. 약 1분 정도 소요될 수 있어요.</p>
           <p className={success} style={{ marginTop: '-8px' }}>
-            네트워크 상황에 따라 약 1분 정도 소요될 수 있어요.
+            메일이 오지 않는다면 스팸 메일함을 확인해주세요.
           </p>
         </>
       )}

diff --git a/src/views/ApplyPage/components/ApplyHeader/style.css.ts b/src/views/ApplyPage/components/ApplyHeader/style.css.ts
@@ -7,10 +7,10 @@ export const headerContainer = style({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  padding: '24px 0 20px',
+  padding: '24px 360px 20px',
   position: 'sticky',
   top: 74,
-  width: 720,
+  width: 1440,
   margin: '60px auto 0px',
   boxShadow: `0 0 0 1px ${theme.color.white}`,
   backgroundColor: theme.color.white,

diff --git a/src/views/ApplyPage/components/BottomSection/index.tsx b/src/views/ApplyPage/components/BottomSection/index.tsx
@@ -21,15 +21,17 @@ const BottomSection = ({ isReview, knownPath }: BottomSectionProps) => {
   return (
     <section className={sectionContainer}>
       <hr className={line} />
-      <SelectBox
-        label="동아리를 알게 된 경로"
-        name="knownPath"
-        defaultValue={knownPath}
-        placeholder="지원 경로를 선택해 주세요."
-        options={SELECT_OPTIONS.knownPath}
-        required
-        disabled={isReview}
-      />
+      {!isMakers && (
+        <SelectBox
+          label="동아리를 알게 된 경로"
+          name="knownPath"
+          defaultValue={knownPath}
+          placeholder="지원 경로를 선택해 주세요."
+          options={SELECT_OPTIONS.knownPath}
+          required
+          disabled={isReview}
+        />
+      )}
       <div id="check-necessary" className={doubleLineCheck}>
         <p className={label}>
           {isMakers

diff --git a/src/views/ApplyPage/components/CommonSection/index.tsx b/src/views/ApplyPage/components/CommonSection/index.tsx
@@ -25,7 +25,7 @@ const CommonSection = ({ isReview, refCallback, questions, commonQuestionsDraft
   return (
     <section ref={refCallback} id="common" className={sectionContainer}>
       <h2 className={title}>공통 질문</h2>
-      {questions?.map(({ urls, value, id, charLimit, isFile }) => {
+      {questions?.map(({ urls, value, id, charLimit, isFile, placeholder, optional }) => {
         const draftItem = commonQuestionsById?.[id];
         const defaultValue = draftItem ? draftItem.answer.answer : '';
         const defaultFile = { id, file: draftItem?.answer.file, fileName: draftItem?.answer.fileName };
@@ -39,9 +39,10 @@ const CommonSection = ({ isReview, refCallback, questions, commonQuestionsDraft
                 defaultValue={defaultValue}
                 maxCount={charLimit}
                 placeholder={
-                  isFile
+                  placeholder ||
+                  (isFile
                     ? '링크로 제출할 경우, 이곳에 작성해주세요. (파일로 제출한 경우에는 ‘파일 제출’이라고 기재 후 제출해주세요.)'
-                    : ''
+                    : '')
                 }
                 extraInput={
                   isFile ? (
@@ -50,7 +51,7 @@ const CommonSection = ({ isReview, refCallback, questions, commonQuestionsDraft
                     <LinkInput urls={urls} />
                   ) : null
                 }
-                required
+                required={!optional}
                 disabled={isReview}>
                 {value}
               </Textarea>

diff --git a/src/views/ApplyPage/components/DefaultSection/index.tsx b/src/views/ApplyPage/components/DefaultSection/index.tsx
@@ -238,7 +238,7 @@ const DefaultSection = ({ isMakers, isReview, refCallback, applicantDraft }: Def
         label="이전 기수 활동 여부 (제명 포함)"
         name="mostRecentSeason"
         placeholder="가장 최근에 활동했던 기수를 선택해주세요."
-        options={SELECT_OPTIONS.mostRecentSeason}
+        options={isMakers ? SELECT_OPTIONS.mostRecentSeason.slice(1) : SELECT_OPTIONS.mostRecentSeason}
         required
         size="lg"
         disabled={isReview}

diff --git a/src/views/ApplyPage/types.ts b/src/views/ApplyPage/types.ts
@@ -30,7 +30,7 @@ export interface Questions {
   urls: string[];
   charLimit: number;
   isFile: boolean;
-  placeholder: string;
+  placeholder?: string;
   optional: boolean;
 }
 

diff --git a/src/views/email/complete.html b/src/views/email/complete.html
@@ -4,20 +4,42 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>지원서 접수 확인 메일</title>
+    <style>
+      @media screen and (max-width: 600px) {
+        .content {
+          width: 330px !important;
+        }
+        .title {
+          font-size: 20px !important;
+          line-height: 35px !important;
+        }
+        .text {
+          font-size: 12px !important;
+          line-height: 20px !important;
+        }
+        .blank {
+          height: 20px !important;
+        }
+        .small-text {
+          font-size: 10px !important;
+          line-height: 15px !important;
+        }
+        .horizontal-blank {
+          width: 0 !important;
+        }
+      }
+    </style>
   </head>
   <body style="margin: 0; padding: 0">
-    <table border="0" cellpadding="0" cellspacing="0" width="100%">
+    <table style="border: 0; border-spacing: 0; width: 100%">
       <tr>
-        <td style="font-size: 0; line-height: 0" width="600" height="20">&nbsp;</td>
+        <td style="font-size: 0; line-height: 0; width: 600px; height: 20px" class="content">&nbsp;</td>
       </tr>
       <tr>
         <td>
           <table
-            bgcolor="#ffffff"
-            align="center"
             cellpadding="0"
-            cellspacing="0"
-            width="600"
+            class="content"
             style="
               border-top-left-radius: 10px;
               border-top-right-radius: 10px;
@@ -26,49 +48,75 @@
               border-color: #c7c7c7;
               border-width: 1px;
               border-style: solid;
+              background-color: #ffffff;
+              border-spacing: 0;
+              margin-inline-start: auto;
+              margin-inline-end: auto;
+              width: 600px;
             ">
             <tr>
-              <td style="font-size: 0; line-height: 0" height="75">&nbsp;</td>
+              <td style="font-size: 0; line-height: 0; height: 35px" class="blank">&nbsp;</td>
             </tr>
             <tr>
-              <td align="center">
-                <img src="iconLogo.svg" alt="sopt-logo" width="94" height="32" style="display: block" />
+              <td style="font-size: 0; line-height: 0; height: 35px" class="blank">&nbsp;</td>
+            </tr>
+            <tr>
+              <td>
+                <div style="width: 100%; text-align: center">
+                  <img src="iconLogo.svg" alt="sopt-logo" width="94" height="32" />
+                </div>
               </td>
             </tr>
             <tr>
-              <td style="font-size: 0; line-height: 0" height="13">&nbsp;</td>
+              <td style="font-size: 0; line-height: 0; height: 13px">&nbsp;</td>
             </tr>
             <tr>
               <td
-                align="center"
                 style="
                   color: #0f1012;
                   font-family: 'SUIT', sans-serif;
                   font-size: 40px;
                   font-weight: 700;
                   line-height: 60px;
                   letter-spacing: -0.32px;
-                ">
-                지원서 접수 확인 메일
+                  text-align: center;
+                "
+                class="title">
+                <div style="width: 100%; text-align: center">
+                  <span
+                    style="
+                      color: #0f1012;
+                      font-family: 'SUIT', sans-serif;
+                      font-size: 40px;
+                      font-weight: 700;
+                      line-height: 60px;
+                      letter-spacing: -0.32px;
+                      text-align: center;
+                    "
+                    class="title">
+                    지원서 접수 확인 메일</span
+                  >
+                </div>
               </td>
             </tr>
             <tr>
-              <td style="font-size: 0; line-height: 0" height="29">&nbsp;</td>
+              <td style="font-size: 0; line-height: 0" height="29" class="blank">&nbsp;</td>
             </tr>
             <tr>
               <td>
-                <table border="0" cellpadding="0" cellspacing="0" width="100%">
+                <table style="border: 0; border-spacing: 0; width: 100%" cellpadding="0">
                   <tr>
                     <td
-                      align="center"
                       style="
                         color: #0f1012;
                         font-family: 'SUIT', sans-serif;
                         font-size: 16px;
                         font-weight: 400;
                         line-height: 26px;
                         letter-spacing: -0.24px;
-                      ">
+                        text-align: center;
+                      "
+                      class="text">
                       <span><%= userName %></span>님의 <span><%= term %></span>기 SOPT <span><%= part %></span>파트
                     </td>
                   </tr>
@@ -77,15 +125,16 @@
                   </tr>
                   <tr>
                     <td
-                      align="center"
                       style="
                         color: #0f1012;
                         font-family: 'SUIT', sans-serif;
                         font-size: 16px;
                         font-weight: 400;
                         line-height: 26px;
                         letter-spacing: -0.24px;
-                      ">
+                        text-align: center;
+                      "
+                      class="text">
                       지원서가 성공적으로 접수되었습니다!
                     </td>
                   </tr>
@@ -94,23 +143,27 @@
                   </tr>
                   <tr>
                     <td
-                      align="center"
                       style="
                         color: #0f1012;
                         font-family: 'SUIT', sans-serif;
                         font-size: 16px;
                         font-weight: 400;
                         line-height: 26px;
                         letter-spacing: -0.24px;
-                      ">
+                        text-align: center;
+                      "
+                      class="text">
                       SOPT에 많은 관심을 주셔서 감사합니다.
                     </td>
                   </tr>
                 </table>
               </td>
             </tr>
             <tr>
-              <td style="font-size: 0; line-height: 0" height="75">&nbsp;</td>
+              <td style="font-size: 0; line-height: 0; height: 30px" class="blank">&nbsp;</td>
+            </tr>
+            <tr>
+              <td style="font-size: 0; line-height: 0; height: 30px" class="blank">&nbsp;</td>
             </tr>
           </table>
         </td>
@@ -120,9 +173,9 @@
       </tr>
       <tr>
         <td>
-          <table align="center" border="0" cellpadding="0" cellspacing="0" width="600px">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" width="600px" class="content">
             <tr>
-              <td style="font-size: 0; line-height: 0" width="22">&nbsp;</td>
+              <td style="font-size: 0; line-height: 0" width="22" class="horizontal-blank">&nbsp;</td>
               <td
                 style="
                   color: #66666d;
@@ -131,12 +184,13 @@
                   font-weight: 400;
                   line-height: 20px;
                   letter-spacing: -0.32px;
-                ">
+                "
+                class="small-text">
                 본 메일은 발신전용 메일로, 문의 및 회신하실 경우 답변되지 않습니다.
               </td>
             </tr>
             <tr>
-              <td style="font-size: 0; line-height: 0" width="22">&nbsp;</td>
+              <td style="font-size: 0; line-height: 0" width="22" class="horizontal-blank">&nbsp;</td>
               <td
                 style="
                   color: #66666d;
@@ -145,7 +199,8 @@
                   font-weight: 400;
                   line-height: 20px;
                   letter-spacing: -0.32px;
-                ">
+                "
+                class="small-text">
                 메일내용에 대해 궁금한 사항이 있으시다면 ‘문의하기' 링크를 통해 문의해주시길 바랍니다.
                 <a href="https://pf.kakao.com/_JdTKd" target="_blank" rel="noreferrer noopener">문의하기</a>
               </td>