feat(about): about 화면 구현

components/about/activity/card.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="container" :style="`background: ${thumbnail}`">
+    <div class="contents">
+      <p class="description">{{ description }}</p>
+      <p class="title">{{ title }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@vue/composition-api";
+const ActivityCard = defineComponent({
+  name: "ActivityCard",
+  props: {
+    description: { type: String, required: true },
+    title: { type: String, required: true },
+    thumbnail: { type: String, required: true },
+  },
+});
+export default ActivityCard;
+</script>
+
+<style lang="scss" scoped>
+@import "~/assets/css/_device.scss";
+* {
+  font-family: Spoqa Han Sans Neo;
+}
+
+@include desktop {
+  .container {
+    border-radius: 16px;
+    width: 576px;
+    height: 324px;
+    background: black;
+    .contents {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      .description {
+        white-space: pre-wrap;
+        padding: 32px;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 32px;
+        line-height: 48px;
+        letter-spacing: -0.02em;
+
+        color: #ffffff;
+      }
+      .title {
+        margin-top: auto;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 18px;
+        line-height: 27px;
+        letter-spacing: -0.02em;
+        padding: 32px;
+
+        color: #ffffff;
+      }
+    }
+  }
+}
+@include mobile {
+  .container {
+    border-radius: 8px;
+  }
+}
+</style>

components/about/info/card.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="container">
+    <div class="contents">
+      <p class="title">{{ title }}</p>
+      <p class="value">{{ value }}</p>
+      <p class="description">{{ description }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@vue/composition-api";
+const InfoCard = defineComponent({
+  name: "InfoCard",
+  props: {
+    title: { type: String, required: true },
+    value: { type: String, required: true },
+    description: { type: String, required: true },
+  },
+});
+export default InfoCard;
+</script>
+
+<style lang="scss" scoped>
+@import "~/assets/css/_device.scss";
+* {
+  font-family: Spoqa Han Sans Neo;
+}
+@include desktop {
+  .container {
+    border-radius: 16px;
+    width: 368px;
+    height: 233px;
+    background: #f6f6f6;
+    .contents {
+      padding: 32px;
+      .title {
+        font-size: 24px;
+        line-height: 36px;
+        font-weight: bold;
+        margin-bottom: 8px;
+        letter-spacing: -0.02em;
+      }
+      .value {
+        font-style: normal;
+        font-weight: bold;
+        font-size: 60px;
+        line-height: 90px;
+        margin-bottom: 8px;
+        letter-spacing: -0.02em;
+      }
+      .description {
+        font-style: normal;
+        font-weight: normal;
+        font-size: 18px;
+        line-height: 27px;
+        letter-spacing: -0.02em;
+
+        color: #777777;
+      }
+    }
+  }
+}
+@include mobile {
+  .container {
+    border-radius: 8px;
+    .contents {
+      padding: 16px;
+      .title {
+        font-size: 16px;
+        font-weight: bold;
+        margin-bottom: 8px;
+      }
+    }
+  }
+}
+</style>

components/about/review/card.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="container" @click="onClick">
+    <div class="contents">
+      <p
+        class="th"
+        :style="`background: ${thBackgroundColor}; color:${thTextColor}`"
+      >
+        {{ th }}
+      </p>
+      <p class="title">{{ title }}</p>
+      <p class="author">{{ author }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@vue/composition-api";
+const ReviewCard = defineComponent({
+  name: "ReviewCard",
+  props: {
+    th: { type: String, required: true },
+    thBackgroundColor: { type: String, required: true },
+    thTextColor: { type: String, required: true },
+    title: { type: String, required: true },
+    author: { type: String, required: true },
+    href: { type: String, required: true },
+  },
+  methods: {
+    onClick: function () {
+      window.location.href = this.href;
+    },
+  },
+});
+export default ReviewCard;
+</script>
+
+<style lang="scss" scoped>
+@import "~/assets/css/_device.scss";
+* {
+  font-family: Spoqa Han Sans Neo;
+}
+@include desktop {
+  .container {
+    cursor: pointer;
+    border-radius: 16px;
+    width: 384px;
+    height: 192px;
+    background: #f6f6f6;
+    .contents {
+      padding: 24px;
+      height: calc(100% - 48px);
+      display: flex;
+      flex-direction: column;
+      .th {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 49px;
+        height: 29px;
+        border-radius: 4px;
+
+        font-style: normal;
+        font-weight: normal;
+        font-size: 14px;
+        line-height: 21px;
+        /* identical to box height, or 150% */
+
+        letter-spacing: -0.02em;
+
+        color: #5236ff;
+      }
+      .title {
+        font-style: normal;
+        font-weight: bold;
+        font-size: 24px;
+        line-height: 36px;
+        letter-spacing: -0.02em;
+
+        color: #000000;
+      }
+      .author {
+        margin-top: auto;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 18px;
+        line-height: 27px;
+        letter-spacing: -0.02em;
+        color: #777777;
+      }
+    }
+  }
+}
+</style>

content/about/activities/1.json

@@ -0,0 +1,5 @@
+{
+  "description": "팀을 이루어서\nIT 프로젝트를 진행합니다.",
+  "title": "IT Project",
+  "thumbnail": ""
+}

content/about/activities/2.json

@@ -0,0 +1,5 @@
+{
+  "description": "현직자의\n경험을 공유합니다",
+  "title": "Invitation Session",
+  "thumbnail": ""
+}

content/about/activities/3.json

@@ -0,0 +1,5 @@
+{
+  "description": "몰입할 수 있는 환경을\n제공합니다",
+  "title": "Hackathon",
+  "thumbnail": ""
+}

content/about/activities/4.json

@@ -0,0 +1,5 @@
+{
+  "description": "새로운 사람들과\n정보를 공유합니다",
+  "title": "Networking",
+  "thumbnail": ""
+}

content/about/informations/duration.json

@@ -0,0 +1,5 @@
+{
+  "title": "운영 기간",
+  "value": "10년",
+  "description": "2012부터"
+}

content/about/informations/launching.json

@@ -0,0 +1,5 @@
+{
+  "title": "런칭 서비스",
+  "value": "80개+",
+  "description": "기수별 런칭율 60%"
+}

content/about/informations/members.json

@@ -0,0 +1,5 @@
+{
+  "title": "가입 회원수",
+  "value": "500명+",
+  "description": "신규 기수마다 약 20명 증가"
+}

content/about/reviews/1.json

@@ -0,0 +1,8 @@
+{
+  "th": "19기",
+  "thBackgroundColor": "#B5B8FF",
+  "thTextColor": "#5236FF",
+  "title": "IT 연합 동아리 NEXTERS(넥스터즈) 활동 후기 - 개발왕, 도던",
+  "author": "개발왕, 도던",
+  "href": "https://makemethink.tistory.com/103"
+}

content/about/reviews/2.json

@@ -0,0 +1,8 @@
+{
+  "th": "19기",
+  "thBackgroundColor": "#B5B8FF",
+  "thTextColor": "#5236FF",
+  "title": "IT 연합 동아리 NEXTERS(넥스터즈) 활동 후기 - 개발왕, 도던",
+  "author": "개발왕, 도던",
+  "href": "https://makemethink.tistory.com/103"
+}

content/about/reviews/3.json

@@ -0,0 +1,8 @@
+{
+  "th": "19기",
+  "thBackgroundColor": "#B5B8FF",
+  "thTextColor": "#5236FF",
+  "title": "IT 연합 동아리 NEXTERS(넥스터즈) 활동 후기 - 개발왕, 도던",
+  "author": "개발왕, 도던",
+  "href": "https://makemethink.tistory.com/103"
+}

content/about/reviews/4.json

@@ -0,0 +1,8 @@
+{
+  "th": "18기",
+  "thBackgroundColor": "#D2FFBD",
+  "thTextColor": "#66C839",
+  "title": "IT 연합 동아리 NEXTERS(넥스터즈) 활동 후기 - 개발왕, 도던",
+  "author": "개발왕, 도던",
+  "href": "https://makemethink.tistory.com/103"
+}

content/about/reviews/5.json

@@ -0,0 +1,8 @@
+{
+  "th": "18기",
+  "thBackgroundColor": "#D2FFBD",
+  "thTextColor": "#66C839",
+  "title": "IT 연합 동아리 NEXTERS(넥스터즈) 활동 후기 - 개발왕, 도던",
+  "author": "개발왕, 도던",
+  "href": "https://makemethink.tistory.com/103"
+}

content/about/reviews/6.json

@@ -0,0 +1,8 @@
+{
+  "th": "17기",
+  "thBackgroundColor": "#FFD9C3",
+  "thTextColor": "#FF5209",
+  "title": "IT 연합 동아리 NEXTERS(넥스터즈) 활동 후기 - 개발왕, 도던",
+  "author": "개발왕, 도던",
+  "href": "https://makemethink.tistory.com/103"
+}

nuxt.config.ts

@@ -12,6 +12,7 @@ const config: NuxtConfig = {
   modules: ["@nuxt/content"],
   components: [
     "~/components",
+    { path: "~/components/about", extensions: ["vue"] },
     { path: "~/components/project", extensions: ["vue"] },
   ],
   content: {