feat(recruitment): dot형 리스트 컴포넌트 개발

Nexters · Oct 10, 2021 · 662d94d · 662d94d
1 parent 69600dc
commit 662d94d
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 4 deletions.
diff --git a/components/recruitment/banner.vue b/components/recruitment/banner.vue
@@ -57,8 +57,9 @@ export default defineComponent({
 .banner {
   width: 100%;
   height: 100%;
-  background-size: contain, cover;
+  background-size: cover;
   background-repeat: no-repeat;
+  box-sizing: border-box;
 
   .bannerTitle {
     color: #ffffff;
@@ -103,7 +104,6 @@ export default defineComponent({
       margin-top: 32px;
 
       .box {
-        width: 264px;
         height: 84px;
       }
     }
@@ -137,7 +137,6 @@ export default defineComponent({
       margin-top: 32px;
 
       .box {
-        width: 264px;
         height: 84px;
       }
     }
@@ -170,7 +169,6 @@ export default defineComponent({
       margin-top: 16px;
 
       .box {
-        width: 171px;
         height: 56px;
       }
     }

diff --git a/components/recruitment/dotList.vue b/components/recruitment/dotList.vue
@@ -0,0 +1,114 @@
+<template>
+  <article class="dotListArea">
+    <h2 class="dotListTitle">{{ dotListTitle }}</h2>
+    <pre v-for="item in items" :key="item.id" class="dotItem">
+      <span>{{ item.text }}</span>
+    </pre>
+  </article>
+</template>
+
+<script>
+import { defineComponent } from "@vue/composition-api";
+
+export default defineComponent({
+  name: "Qualification",
+  props: {
+    dotListTitle: {
+      type: Array,
+      require: true,
+    },
+    items: {
+      type: Array,
+      require: false,
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "~/assets/css/_device.scss";
+* {
+  font-family: Spoqa Han Sans Neo;
+}
+
+.dotListArea {
+  .dotListTitle {
+    font-weight: 700;
+  }
+
+  .dotItem {
+    display: flex;
+    font-weight: 400;
+    white-space: pre-line;
+
+    &::before {
+      display: inline-block;
+      content: "";
+      vertical-align: top;
+      height: 4px;
+      width: 4px;
+      background-color: #000000;
+      border-radius: 2px;
+      margin-right: 5px;
+      flex: none;
+    }
+  }
+}
+
+@include desktop {
+  .dotListArea {
+    .dotListTitle {
+      font-size: 32px;
+      line-height: 48px;
+    }
+
+    .dotItem {
+      font-size: 24px;
+      line-height: 36px;
+      margin-top: 16px;
+
+      &::before {
+        margin-top: 14px;
+      }
+    }
+  }
+}
+
+@include tablet {
+  .dotListArea {
+    .dotListTitle {
+      font-size: 32px;
+      line-height: 48px;
+    }
+
+    .dotItem {
+      font-size: 24px;
+      line-height: 36px;
+      margin-top: 16px;
+
+      &::before {
+        margin-top: 14px;
+      }
+    }
+  }
+}
+
+@include mobile {
+  .dotListArea {
+    .dotListTitle {
+      font-size: 24px;
+      line-height: 36px;
+    }
+
+    .dotItem {
+      font-size: 16px;
+      line-height: 24px;
+      margin-top: 8px;
+
+      &::before {
+        margin-top: 8px;
+      }
+    }
+  }
+}
+</style>