feat(footer): sns icon 구글 드라이브 연동 (#51)

* feat(footer): test

* [bot] update files

* feat(footers): sns icon 구글 드라이브 연동

* [bot] update files

Co-authored-by: GitHub Action <action@github.com>

.script/make_content.py

@@ -137,5 +137,5 @@ def make_footer(data: Dict[str, Any]) -> None:
     data = json.loads(google_results)
     projects = data["results"][0]["result"]["rawData"]
     make_project(projects)
-    make_footer(footer)
+    make_footer(footer["result"]["rawData"])
 

components/footer.vue

@@ -3,9 +3,9 @@
     <div class="footer">
       <div class="leftArea">
         <div class="sns">
-          <ul v-for="item in items" :key="item.name">
+          <ul v-for="item in items" :key="item.idx">
             <a :href="item.href">
-              <img :src="sns_icon[item.name]" :alt="item.name" />
+              <img :src="icon(item)" :alt="item.name" />
             </a>
           </ul>
         </div>
@@ -35,7 +35,7 @@
   </footer>
 </template>
 
-<script lang="ts">
+<script>
 import { defineComponent } from "@nuxtjs/composition-api";
 
 export default defineComponent({
@@ -57,17 +57,6 @@ export default defineComponent({
   },
   setup(props) {
     return {
-      sns_icon: {
-        facebook: props.isWhite
-          ? require("~/assets/img/facebook.svg")
-          : require("~/assets/img/facebook_black.svg"),
-        github: props.isWhite
-          ? require("~/assets/img/github.svg")
-          : require("~/assets/img/github_black.svg"),
-        instagram: props.isWhite
-          ? require("~/assets/img/instagram.png")
-          : require("~/assets/img/instagram_black.svg"),
-      },
       arrowIcon: props.isWhite
         ? require("~/assets/img/arrow_right.svg")
         : require("~/assets/img/arrow_right_black.svg"),
@@ -82,6 +71,11 @@ export default defineComponent({
     handleSponsorClick() {
       this.isSponsorVisible = !this.isSponsorVisible;
     },
+    icon(item) {
+      const src = this.isWhite ? item.white : item.black;
+      console.log(src);
+      return src;
+    },
   },
 });
 </script>

content/footers/sns/0.json

@@ -0,0 +1,7 @@
+{
+  "idx": 0,
+  "name": "facebook",
+  "href": "https://www.facebook.com/Nexterspage/",
+  "black": "https://drive.google.com/uc?export=view&id=1b5802BwIntqOi0VuLYki8U9g_TGkvVaV",
+  "white": "https://drive.google.com/uc?export=view&id=18MRxjDn8WiN_XTEYBwr6uEqsWx1nimOA"
+}

content/footers/sns/1.json

@@ -0,0 +1,7 @@
+{
+  "idx": 1,
+  "name": "github",
+  "href": "https://github.com/Nexters",
+  "black": "https://drive.google.com/uc?export=view&id=1rAcylaEBtOxM0vH3Nif2bWmmgRFLBbFV",
+  "white": "https://drive.google.com/uc?export=view&id=10aiYvwFvn0a56efLOd_DKR118c3yJYlc"
+}

content/footers/sns/2.json

@@ -0,0 +1,7 @@
+{
+  "idx": 2,
+  "name": "instagram",
+  "href": "https://www.instagram.com/team_nexters/",
+  "black": "https://drive.google.com/uc?export=view&id=1r6Klu6_8tQFyEWoVA_C5Do7uauoFa0ZR",
+  "white": "https://drive.google.com/uc?export=view&id=1FALUvLgbpC0ac-j0asPZllFh3VV4VJnO"
+}

content/footers/sns/3.json

@@ -0,0 +1,7 @@
+{
+  "idx": 3,
+  "name": "medium",
+  "href": "https://medium.com/teamnexters",
+  "black": "https://drive.google.com/uc?export=view&id=1VObJf1R3hrlKVhd_1nG6hkcOFowWUH-Y",
+  "white": "https://drive.google.com/uc?export=view&id=1F7D0MCy_0ob6NdTX5jIymoEVerbrDDGF"
+}

layouts/base.vue

@@ -31,9 +31,13 @@ import Footer from "~/components/footer.vue";
     const { headers } = await this.$content("headers")
       .only(["headers"])
       .fetch();
-    const { items, copyrights } = await this.$content("footers")
-      .only(["items", "copyrights"])
+    const items = await this.$content("footers/sns")
+      .only(["idx", "name", "href", "black", "white"])
       .fetch();
+    const copyrights = this.$content("footers/copyrights")
+      .only(["copyrights"])
+      .fetch();
+
     this.headers = headers;
     this.items = items;
     this.copyrights = copyrights;

layouts/default.vue

@@ -28,9 +28,13 @@ import { Component, Vue } from "nuxt-property-decorator";
     const { headers } = await this.$content("headers")
       .only(["headers"])
       .fetch();
-    const { items, copyrights } = await this.$content("footers")
-      .only(["items", "copyrights"])
+    const items = await this.$content("footers/sns")
+      .only(["idx", "name", "href", "black", "white"])
       .fetch();
+    const copyrights = this.$content("footers/copyrights")
+      .only(["copyrights"])
+      .fetch();
+
     this.headers = headers;
     this.items = items;
     this.copyrights = copyrights;

layouts/main.vue

@@ -45,9 +45,6 @@ import background from "~/assets/css/export.scss";
     const { headers } = await this.$content("headers")
       .only(["headers"])
       .fetch();
-    const { items, copyrights } = await this.$content("footers")
-      .only(["items", "copyrights"])
-      .fetch();
     const { recruitment_notice, recruitment_start, recruitment_deadline } =
       await this.$content("main")
         .only([
@@ -56,6 +53,13 @@ import background from "~/assets/css/export.scss";
           "recruitment_deadline",
         ])
         .fetch();
+    const items = await this.$content("footers/sns")
+      .only(["idx", "name", "href", "black", "white"])
+      .fetch();
+    const copyrights = this.$content("footers/copyrights")
+      .only(["copyrights"])
+      .fetch();
+
     this.headers = headers;
     this.items = items;
     this.copyrights = copyrights;

layouts/recruitment.vue

@@ -35,9 +35,6 @@ import { Component, Vue } from "nuxt-property-decorator";
     const { headers } = await this.$content("headers")
       .only(["headers"])
       .fetch();
-    const { items, copyrights } = await this.$content("footers")
-      .only(["items", "copyrights"])
-      .fetch();
     const { recruitment_notice, recruitment_start, recruitment_deadline } =
       await this.$content("main")
         .only([
@@ -46,6 +43,12 @@ import { Component, Vue } from "nuxt-property-decorator";
           "recruitment_deadline",
         ])
         .fetch();
+    const items = await this.$content("footers/sns")
+      .only(["idx", "name", "href", "black", "white"])
+      .fetch();
+    const copyrights = this.$content("footers/copyrights")
+      .only(["copyrights"])
+      .fetch();
     this.headers = headers;
     this.items = items;
     this.copyrights = copyrights;