fix(recruitment): 디자인 수정 및 배너 영역 데이터 연동

Nexters · Oct 16, 2021 · bb52fdc · bb52fdc
1 parent fcddab5
commit bb52fdc
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 21 deletions.
diff --git a/components/recruitment/banner.vue b/components/recruitment/banner.vue
@@ -64,17 +64,25 @@ export default defineComponent({
   .bannerTitle {
     color: #ffffff;
     font-weight: 900;
+    white-space: pre-wrap;
   }
 
   .bannerSubTitle {
     font-weight: 400;
     color: #ffffff;
+    white-space: pre-wrap;
   }
 
   .bannerPeriod {
     font-weight: 700;
     color: #ffffff;
   }
+
+  .boxArea {
+    .box {
+      margin-right: 10px;
+    }
+  }
 }
 
 @include desktop {
@@ -85,7 +93,6 @@ export default defineComponent({
     .bannerTitle {
       font-size: 60px;
       line-height: 72px;
-      white-space: pre-wrap;
     }
 
     .bannerSubTitle {
@@ -118,7 +125,6 @@ export default defineComponent({
     .bannerTitle {
       font-size: 60px;
       line-height: 72px;
-      white-space: pre-wrap;
     }
 
     .bannerSubTitle {
@@ -145,7 +151,7 @@ export default defineComponent({
 
 @include mobile {
   .banner {
-    height: 320px;
+    height: 376px;
     padding: 24px;
 
     .bannerTitle {

diff --git a/content/recruitment.json b/content/recruitment.json
@@ -14,18 +14,18 @@
             "모집 종료일",
             "모집 정보 가이드",
             "날짜 노출 여부",
-            "가이드 노출 여부",
-            "가이드 타이틀",
+            "노티 노출 여부",
+            "노티 타이틀",
             "모집 상태"
           ],
           [
             "1XyPcA3KsEO04sZ5pbdWVep3D6MmASEf7",
             "20",
             "11월 초",
             "",
-            "현재 모집기간이 아닙니다. \n다음 기수 모집은 11월 초 시작됩니다.",
-            "",
-            "",
+            "현재 모집기간이 아닙니다.\n다음 기수 모집은 11월 초 시작됩니다.",
+            "FALSE",
+            "TRUE",
             "코로나 관련 사항을 꼭 참고해주세요!",
             "DEFAULT"
           ]
@@ -38,18 +38,18 @@
             "(D)": "모집 종료일",
             "(E)": "모집 정보 가이드",
             "(F)": "날짜 노출 여부",
-            "(G)": "가이드 노출 여부",
-            "(H)": "가이드 타이틀",
+            "(G)": "노티 노출 여부",
+            "(H)": "노티 타이틀",
             "(I)": "모집 상태"
           },
           {
             "(A)": "1XyPcA3KsEO04sZ5pbdWVep3D6MmASEf7",
             "(B)": "20",
             "(C)": "11월 초",
             "(D)": "",
-            "(E)": "현재 모집기간이 아닙니다. \n다음 기수 모집은 11월 초 시작됩니다.",
-            "(F)": "",
-            "(G)": "",
+            "(E)": "현재 모집기간이 아닙니다.\n다음 기수 모집은 11월 초 시작됩니다.",
+            "(F)": "FALSE",
+            "(G)": "TRUE",
             "(H)": "코로나 관련 사항을 꼭 참고해주세요!",
             "(I)": "DEFAULT"
           }
@@ -79,7 +79,7 @@
       "result": {
         "rawData": [
           ["버튼명", "클릭 링크", "노출 유무"],
-          ["모집 알림 신청하기", "www.naver.com", "FALSE"],
+          ["모집 알림 신청하기", "www.naver.com", "TRUE"],
           ["디자이너 지원하기", "www.daum.net", "TRUE"],
           ["개발자 지원하기", "www.google.com", "FALSE"]
         ],

diff --git a/pages/recruitment.vue b/pages/recruitment.vue
@@ -3,14 +3,15 @@
     <div>
       <RecruitmentBanner
         class="banner"
-        :background-image-url="`https://drive.google.com/uc?export=view&id=1XyPcA3KsEO04sZ5pbdWVep3D6MmASEf7`"
-        :header-title="`NEXTERS 20th\nRecruitment`"
-        :sub-title="`곧 넥스터즈 20기 모집이 시작됩니다.`"
-        :period="`2021. 5. 10(mon) ~6. 22(tue)`"
+        :background-image-url="`https://drive.google.com/uc?export=view&id=${banner.bannerImage}`"
+        :header-title="banner.bannerTitle"
+        :sub-title="banner.bannerSubtitle"
+        :period="banner.bannerPeriod"
         :box-list="bannerBoxes"
       />
       <main class="main">
         <RecruitmentNoticeBox
+          v-if="notice.isVisible"
           :box-title="notice.boxTitle"
           :contents="notice.contents"
         />
@@ -49,8 +50,16 @@ export default defineComponent({
   },
   data() {
     return {
+      banner: {
+        bannerTitle: "",
+        bannerSubtitle: "",
+        bannerImage: "",
+        bannerPeriod: "",
+        isVisible: false,
+      },
       bannerBoxes: [],
       notice: {
+        isVisible: false,
         boxTitle: "",
         contents: [],
       },
@@ -61,7 +70,16 @@ export default defineComponent({
   },
   async fetch() {
     const result = await this.FetchAll();
+    this.banner.bannerImage = result.banner[0];
+    this.banner.bannerTitle = `NEXTERS ${result.banner[1]}th\nRecruitment`;
+    this.banner.bannerSubtitle = result.banner[4];
+    this.banner.bannerPeriod =
+      result.banner[5] === "TRUE"
+        ? `${result.banner[2]} ~ ${result.banner[3]}`
+        : "";
+    this.banner.isVisible = result.banner[5] === "TRUE";
     this.bannerBoxes = result.bannerButtons;
+    this.notice.isVisible = result.banner[6] === "TRUE";
     this.notice.boxTitle = result.banner[7];
     this.notice.contents = result.notice;
     this.qualifications = result.qualifications;
@@ -176,7 +194,7 @@ export default defineComponent({
 
 @include desktop {
   .main {
-    margin: 64px;
+    padding: 64px;
     max-width: 1200px;
 
     .area {
@@ -187,6 +205,7 @@ export default defineComponent({
   .footer {
     height: 323px;
     margin-top: 120px;
+    margin-bottom: 64px;
 
     .footerTitle {
       font-size: 24px;
@@ -207,7 +226,7 @@ export default defineComponent({
 
 @include tablet {
   .main {
-    margin: 64px;
+    padding: 64px;
     max-width: 1200px;
 
     .area {
@@ -218,6 +237,7 @@ export default defineComponent({
   .footer {
     height: 323px;
     margin-top: 120px;
+    margin-bottom: 64px;
 
     .footerTitle {
       font-size: 24px;
@@ -238,7 +258,7 @@ export default defineComponent({
 
 @include mobile {
   .main {
-    margin: 24px;
+    padding: 24px;
     max-width: 713px;
 
     .area {
@@ -249,6 +269,7 @@ export default defineComponent({
   .footer {
     height: 189px;
     margin-top: 64px;
+    margin-bottom: 24px;
 
     .footerTitle {
       font-size: 16px;