feat(recruitment): 모집일정 영역 개발

components/recruitment/schedule.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="scheduleArea">
+    <h2 class="scheduleTitle">모집 일정</h2>
+    <article class="schedules">
+      <RecruitmentScheduleBox
+        class="schedule"
+        v-for="schedule in schedules"
+        :key="schedule.id"
+        :schedule-title="schedule.title"
+        :schedule-date="schedule.date"
+      />
+    </article>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@vue/composition-api";
+
+export default defineComponent({
+  name: "Schedule",
+  props: {
+    schedules: {
+      type: Array,
+      require: false,
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "~/assets/css/_device.scss";
+* {
+  font-family: Spoqa Han Sans Neo;
+}
+
+.scheduleArea {
+  .scheduleTitle {
+    font-weight: 700;
+  }
+
+  .schedule {
+    box-sizing: border-box;
+  }
+}
+
+@include desktop {
+  .scheduleArea {
+    .scheduleTitle {
+      font-size: 32px;
+      line-height: 48px;
+    }
+
+    .schedules {
+      display: block;
+      overflow-x: auto;
+      white-space: nowrap;
+
+      .schedule {
+        width: 200px;
+        display: inline-block;
+        margin-right: 16px;
+      }
+    }
+  }
+}
+
+@include tablet {
+  .scheduleArea {
+    .scheduleTitle {
+      font-size: 32px;
+      line-height: 48px;
+    }
+
+    .schedules {
+      display: block;
+      overflow-x: auto;
+      white-space: nowrap;
+
+      .schedule {
+        width: 200px;
+        display: inline-block;
+        margin-right: 16px;
+      }
+    }
+  }
+}
+
+@include mobile {
+  .scheduleArea {
+    .scheduleTitle {
+      font-size: 24px;
+      line-height: 36px;
+    }
+
+    .schedules {
+      display: flex;
+      flex-direction: column;
+
+      .schedule {
+        width: 100%;
+        margin-top: 8px;
+      }
+    }
+  }
+}
+</style>

components/recruitment/scheduleBox.vue

@@ -0,0 +1,100 @@
+<template>
+  <section class="scheduleBox">
+    <h2 class="scheduleTitle">{{ scheduleTitle }}</h2>
+    <p class="schedule">{{ scheduleDate }}</p>
+  </section>
+</template>
+
+<script>
+import { defineComponent } from "@vue/composition-api";
+
+export default defineComponent({
+  name: "ScheduleBox",
+  props: {
+    scheduleTitle: {
+      type: String,
+      require: true,
+    },
+    scheduleDate: {
+      type: String,
+      require: true,
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "~/assets/css/_device.scss";
+* {
+  font-family: Spoqa Han Sans Neo;
+}
+
+.scheduleBox {
+  display: flex;
+  justify-content: center;
+  background: #f6f6f6;
+  border-radius: 16px;
+
+  .scheduleTitle {
+    font-weight: bold;
+  }
+
+  .schedule {
+    font-weight: 400;
+  }
+}
+
+@include desktop {
+  .scheduleBox {
+    width: 200px;
+    flex-direction: column;
+    padding: 24px;
+
+    .scheduleTitle {
+      font-size: 24px;
+      line-height: 36px;
+    }
+
+    .schedule {
+      font-size: 18px;
+      line-height: 27px;
+    }
+  }
+}
+
+@include tablet {
+  .scheduleBox {
+    width: 200px;
+    flex-direction: column;
+    padding: 24px;
+
+    .scheduleTitle {
+      font-size: 24px;
+      line-height: 36px;
+    }
+
+    .schedule {
+      font-size: 18px;
+      line-height: 27px;
+    }
+  }
+}
+
+@include mobile {
+  .scheduleBox {
+    width: 100%;
+    justify-content: space-between;
+    padding: 16px;
+
+    .scheduleTitle {
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    .schedule {
+      font-size: 14px;
+      line-height: 21px;
+    }
+  }
+}
+</style>