fix(about-activity): 이미지 추가

Nexters · Oct 28, 2021 · 445e510 · 445e510
1 parent b465138
commit 445e510
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 14 deletions.
diff --git a/assets/img/hackathon.png b/assets/img/hackathon.png
diff --git a/assets/img/networking.png b/assets/img/networking.png
diff --git a/assets/img/project.png b/assets/img/project.png
diff --git a/assets/img/session.png b/assets/img/session.png
diff --git a/components/about/activity/card.vue b/components/about/activity/card.vue
@@ -1,5 +1,12 @@
 <template>
-  <div class="activity-container" :style="`background: ${thumbnail}`">
+  <div
+    class="activity-container"
+    :style="{
+      'background-image': 'url(' + _thumbnail + ') ',
+      'background-size': 'cover',
+      'background-position': 'center',
+    }"
+  >
     <div class="contents">
       <p class="description">{{ description }}</p>
       <p class="title">{{ title }}</p>
@@ -16,6 +23,11 @@ const ActivityCard = defineComponent({
     title: { type: String, required: true },
     thumbnail: { type: String, required: true },
   },
+  setup(props) {
+    return {
+      _thumbnail: require(`~/assets/img/${props.thumbnail}`),
+    };
+  },
 });
 export default ActivityCard;
 </script>
@@ -33,7 +45,6 @@ export default ActivityCard;
     border-radius: 16px;
     width: calc(50% - 16px);
     height: 324px;
-    background: rgba(0, 0, 0, 0.5);
     .contents {
       padding: 32px;
       display: flex;
@@ -47,7 +58,7 @@ export default ActivityCard;
         line-height: 48px;
         letter-spacing: -0.02em;
 
-        color: $white;
+        color: $black;
       }
       .title {
         margin-top: auto;
@@ -57,7 +68,7 @@ export default ActivityCard;
         line-height: 27px;
         letter-spacing: -0.02em;
 
-        color: $white;
+        color: $black;
       }
     }
   }
@@ -67,7 +78,6 @@ export default ActivityCard;
     border-radius: 16px;
     width: calc(50% - 16px);
     height: 324px;
-    background: rgba(0, 0, 0, 0.5);
     .contents {
       padding: 32px;
       display: flex;
@@ -81,7 +91,7 @@ export default ActivityCard;
         line-height: 48px;
         letter-spacing: -0.02em;
 
-        color: $white;
+        color: $black;
       }
       .title {
         margin-top: auto;
@@ -90,7 +100,7 @@ export default ActivityCard;
         font-size: 18px;
         line-height: 27px;
         letter-spacing: -0.02em;
-        color: $white;
+        color: $black;
       }
     }
   }
@@ -100,7 +110,6 @@ export default ActivityCard;
     border-radius: 8px;
     width: 100%;
     height: 184px;
-    background: rgba(0, 0, 0, 0.5);
     .contents {
       padding: 24px;
       display: flex;
@@ -114,7 +123,7 @@ export default ActivityCard;
         line-height: 36px;
         letter-spacing: -0.02em;
 
-        color: $white;
+        color: $black;
       }
       .title {
         margin-top: auto;
@@ -123,7 +132,7 @@ export default ActivityCard;
         font-size: 14px;
         line-height: 21px;
         letter-spacing: -0.02em;
-        color: $white;
+        color: $black;
       }
     }
   }

diff --git a/content/about/activities/1.json b/content/about/activities/1.json
@@ -1,5 +1,5 @@
 {
   "description": "팀을 이루어서\nIT 프로젝트를 진행합니다.",
   "title": "IT Project",
-  "thumbnail": ""
+  "thumbnail": "project.png"
 }
diff --git a/content/about/activities/2.json b/content/about/activities/2.json
@@ -1,5 +1,5 @@
 {
   "description": "현직자의\n경험을 공유합니다",
   "title": "Invitation Session",
-  "thumbnail": ""
+  "thumbnail": "session.png"
 }
diff --git a/content/about/activities/3.json b/content/about/activities/3.json
@@ -1,5 +1,5 @@
 {
   "description": "몰입할 수 있는 환경을\n제공합니다",
   "title": "Hackathon",
-  "thumbnail": ""
+  "thumbnail": "hackathon.png"
 }
diff --git a/content/about/activities/4.json b/content/about/activities/4.json
@@ -1,5 +1,5 @@
 {
   "description": "새로운 사람들과\n정보를 공유합니다",
   "title": "Networking",
-  "thumbnail": ""
+  "thumbnail": "networking.png"
 }