feat(recruitment): 상단 banner 개발

components/recruitment/banner.vue

@@ -0,0 +1,179 @@
+<template>
+  <div
+    class="banner"
+    :style="{ 'background-image': 'url(' + backgroundImageUrl + ')' }"
+  >
+    <h1 class="bannerTitle">{{ headerTitle }}</h1>
+    <h2 class="bannerSubTitle">{{ subTitle }}</h2>
+    <p class="bannerPeriod">{{ period }}</p>
+    <article class="boxArea">
+      <RecruitmentLinkButton
+        class="box"
+        v-for="box in boxList"
+        :key="box.id"
+        :buttonName="box.name"
+        :link="box.link"
+      />
+    </article>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@vue/composition-api";
+
+export default defineComponent({
+  name: "Banner",
+  props: {
+    backgroundImageUrl: {
+      type: String,
+      require: true,
+    },
+    headerTitle: {
+      type: String,
+      require: true,
+    },
+    subTitle: {
+      type: String,
+      require: true,
+    },
+    period: {
+      type: String,
+      require: false,
+    },
+    boxList: {
+      type: Array,
+      require: false,
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "~/assets/css/_device.scss";
+* {
+  font-family: Spoqa Han Sans Neo;
+}
+
+.banner {
+  width: 100%;
+  height: 100%;
+  background-size: contain, cover;
+  background-repeat: no-repeat;
+
+  .bannerTitle {
+    color: #ffffff;
+    font-weight: 900;
+  }
+
+  .bannerSubTitle {
+    font-weight: 400;
+    color: #ffffff;
+  }
+
+  .bannerPeriod {
+    font-weight: 700;
+    color: #ffffff;
+  }
+}
+
+@include desktop {
+  .banner {
+    height: 624px;
+    padding: 64px;
+
+    .bannerTitle {
+      font-size: 60px;
+      line-height: 72px;
+      white-space: pre-wrap;
+    }
+
+    .bannerSubTitle {
+      font-size: 24px;
+      line-height: 36px;
+      margin-top: 16px;
+    }
+
+    .bannerPeriod {
+      font-size: 24px;
+      line-height: 36px;
+      margin-top: 16px;
+    }
+
+    .boxArea {
+      margin-top: 32px;
+
+      .box {
+        width: 264px;
+        height: 84px;
+      }
+    }
+  }
+}
+
+@include tablet {
+  .banner {
+    height: 624px;
+    padding: 64px;
+
+    .bannerTitle {
+      font-size: 60px;
+      line-height: 72px;
+      white-space: pre-wrap;
+    }
+
+    .bannerSubTitle {
+      font-size: 24px;
+      line-height: 36px;
+      margin-top: 16px;
+    }
+
+    .bannerPeriod {
+      font-size: 24px;
+      line-height: 36px;
+      margin-top: 16px;
+    }
+
+    .boxArea {
+      margin-top: 32px;
+
+      .box {
+        width: 264px;
+        height: 84px;
+      }
+    }
+  }
+}
+
+@include mobile {
+  .banner {
+    height: 320px;
+    padding: 24px;
+
+    .bannerTitle {
+      font-size: 32px;
+      line-height: 38px;
+    }
+
+    .bannerSubTitle {
+      font-size: 16px;
+      line-height: 24px;
+      margin-top: 8px;
+    }
+
+    .bannerPeriod {
+      font-size: 16px;
+      line-height: 24px;
+      margin-top: 8px;
+    }
+
+    .boxArea {
+      margin-top: 16px;
+
+      .box {
+        width: 171px;
+        height: 56px;
+      }
+    }
+  }
+}
+</style>

components/recruitment/linkButton.vue

@@ -0,0 +1,61 @@
+<template>
+  <a class="linkButton" :href="link">{{ buttonName }}</a>
+</template>
+
+<script>
+import { defineComponent } from "@vue/composition-api";
+
+export default defineComponent({
+  name: "LinkButton",
+  props: {
+    buttonName: {
+      type: String,
+      require: true,
+    },
+    link: {
+      type: String,
+      require: false,
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "~/assets/css/_device.scss";
+* {
+  font-family: Spoqa Han Sans Neo;
+}
+
+.linkButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: 8px;
+  background-color: #6b68f7;
+  color: white;
+  text-decoration: none;
+}
+
+@include desktop {
+  .linkButton {
+    font-size: 24px;
+    line-height: 36px;
+  }
+}
+
+@include tablet {
+  .linkButton {
+    font-size: 24px;
+    line-height: 36px;
+  }
+}
+
+@include mobile {
+  .linkButton {
+    font-size: 16px;
+    line-height: 24px;
+  }
+}
+</style>

pages/recruitment.vue

@@ -0,0 +1,30 @@
+<template>
+  <RecruitmentBanner
+    :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)`"
+    :boxList="boxs"
+  />
+</template>
+
+<script>
+import { defineComponent } from "@vue/composition-api";
+
+export default defineComponent({
+  name: "Recruitment",
+  data() {
+    return {
+      boxs: [
+        {
+          id: 1,
+          name: "모집 알람 신청하기",
+          link: "www.naver.com",
+        },
+      ],
+    };
+  },
+});
+</script>
+
+<style scoped></style>