feat(main): 백그라운드 이미지, 예고일 불러오기 (#43)

.github/workflows/release.yml

@@ -40,17 +40,27 @@ jobs:
             [
               { "command": "getData", "args": { "worksheetTitle": "color", "minCol": 1 } }
             ]
-      - id: main-about-project
-        name: Load Google Sheet - Main, About, Project
+      - id: main-about
+        name: Load Google Sheet - Main, About
         uses: jroehl/[email protected]
         with:
           spreadsheetId: ${{ env.SPREADSHEET_ID }}
           commands: |
             [
               { "command": "getData", "args": { "worksheetTitle": "M-Auto", "minCol": 1 } },
+              { "command": "getData", "args": { "worksheetTitle": "M-background", "minCol": 1 } },
               { "command": "getData", "args": { "worksheetTitle": "About", "minCol": 1 } },
+              { "command": "getData", "args": { "worksheetTitle": "A-image", "minCol": 1 } },
               { "command": "getData", "args": { "worksheetTitle": "A-information", "minCol": 1 } },
-              { "command": "getData", "args": { "worksheetTitle": "A-review", "minCol": 1 } },
+              { "command": "getData", "args": { "worksheetTitle": "A-review", "minCol": 1 } }
+            ]
+      - id: project
+        name: Load Google Sheet - Project
+        uses: jroehl/[email protected]
+        with:
+          spreadsheetId: ${{ env.SPREADSHEET_ID }}
+          commands: |
+            [
               { "command": "getData", "args": { "worksheetTitle": "Project", "minCol": 1 } }
             ]
       - id: recruitment
@@ -78,7 +88,8 @@ jobs:
             ]
       - name: make contents
         run: |
-          echo ${{ toJson(steps.main-about-project.outputs.results) }} > ./_content/data.json
+          echo ${{ toJson(steps.project.outputs.results) }} > ./_content/project.json
+          echo ${{ toJson(steps.main-about.outputs.results) }} > ./_content/data.json
           echo ${{ toJson(steps.contact.outputs.results) }} > ./content/contact.json
           echo ${{ toJson(steps.color.outputs.results) }} > ./_content/color.json
           python .script/make_content.py

.script/make_color.py

@@ -10,5 +10,5 @@
     with open("./assets/css/setting.scss", mode="w") as f:
         for row in rows[1:]:
             name, value = row
-            f.write(f"${name}: {value};\n")
-
+            if value:
+                f.write(f"${name}: {value};\n")

.script/make_content.py

@@ -2,15 +2,22 @@
 import json
 from typing import Dict, Any
 
+def make_image_scss(path: str, data: Dict[str, Any]) -> None:
+    with open(path, mode="w", encoding="utf-8") as f:
+        for row in data[1:]:
+            name, value = row
+            if value:
+                f.write(f'${name}: url("https://drive.google.com/uc?export=view&id={value}");\n')
 
-def make_main(data: Dict[str, Any]) -> None:
-    slogan, default_desc, default_a, default_href, th, recruitment_start, recruitment_deadline, recruitment_notice_desc, recruitment_notice_a, recruitment_in_progress_desc, recruitment_in_progress_a, recruitment_href = data[1]
+def make_main(data: Dict[str, Any], background: Dict[str, Any]) -> None:
+    slogan, default_desc, default_a, default_href, th, recruitment_notice, recruitment_start, recruitment_deadline, recruitment_notice_desc, recruitment_notice_a, recruitment_in_progress_desc, recruitment_in_progress_a, recruitment_href = data[1]
     main = {
         "slogan": slogan,
         "default_desc": default_desc,
         "default_a": default_a,
         "default_href": default_href,
         "th": th,
+        "recruitment_notice": recruitment_notice,
         "recruitment_start": recruitment_start,
         "recruitment_deadline": recruitment_deadline,
         "recruitment_notice_desc": recruitment_notice_desc,
@@ -22,8 +29,11 @@ def make_main(data: Dict[str, Any]) -> None:
     with open(f"./content/main.json", mode="w", encoding="utf-8") as f:
         f.write(json.dumps(main, ensure_ascii=False, indent=2))
 
+    make_image_scss("./assets/css/main-bg.scss", background)
+
 def make_about(
     data: Dict[str, Any],
+    top_image: Dict[str, Any],
     informations: Dict[str, Any],
     reviews: Dict[str, Any]
 ) -> None:
@@ -60,7 +70,7 @@ def make_about(
         }
         with open(f"./content/about/informations/{idx}.json", mode="w", encoding="utf-8") as f:
             f.write(json.dumps(_information, ensure_ascii=False, indent=2))
-
+    make_image_scss("./assets/css/about-top-image.scss", top_image)
 
 def make_project(data: Dict[str, Any]) -> None:
     projects = []
@@ -100,8 +110,18 @@ def make_project(data: Dict[str, Any]) -> None:
     with open("./_content/data.json", mode="r") as f:
         google_results = f.read()
     data = json.loads(google_results)
-    main, about, informations, reviews, projects = data["results"]
-    make_main(main["result"]["rawData"])
-    make_about(about["result"]["rawData"], informations["result"]["rawData"], reviews["result"]["rawData"])
-    make_project(projects["result"]["rawData"])
+    main, main_background, about, about_top_image, informations, reviews = data["results"]
+    make_main(main["result"]["rawData"], main_background["result"]["rawData"])
+    make_about(
+        about["result"]["rawData"],
+        about_top_image["result"]["rawData"],
+        informations["result"]["rawData"],
+        reviews["result"]["rawData"]
+    )
+
+    with open("./_content/project.json", mode="r") as f:
+        google_results = f.read()
+    data = json.loads(google_results)
+    projects = data["results"][0]["result"]["rawData"]
+    make_project(projects)
 

assets/css/about-top-image.scss

@@ -0,0 +1,2 @@
+$about-mobile: url("https://drive.google.com/uc?export=view&id=1-dFesvicUYbZZkdinkC5PjKCfPN2i080");
+$about-desktop: url("https://drive.google.com/uc?export=view&id=1-dFesvicUYbZZkdinkC5PjKCfPN2i080");

assets/css/main-bg.scss

@@ -0,0 +1,6 @@
+$main-default-mobile: url("https://drive.google.com/uc?export=view&id=1TjrG8BEZcNUyTPCRjhpWNuy5XQPdhcTu");
+$main-default-desktop: url("https://drive.google.com/uc?export=view&id=1TjrG8BEZcNUyTPCRjhpWNuy5XQPdhcTu");
+$main-notice-mobile: url("https://drive.google.com/uc?export=view&id=10TPX2Qxgg95riX0XKAXuKwpbt5zlzDQF");
+$main-notice-desktop: url("https://drive.google.com/uc?export=view&id=10TPX2Qxgg95riX0XKAXuKwpbt5zlzDQF");
+$main-wip-mobile: url("https://drive.google.com/uc?export=view&id=10TPX2Qxgg95riX0XKAXuKwpbt5zlzDQF");
+$main-wip-desktop: url("https://drive.google.com/uc?export=view&id=10TPX2Qxgg95riX0XKAXuKwpbt5zlzDQF");

content/main.json

@@ -4,6 +4,7 @@
   "default_a": "넥스터즈 알아보기",
   "default_href": "/about",
   "th": "20",
+  "recruitment_notice": "2021. 11. 1",
   "recruitment_start": "2021. 11. 15",
   "recruitment_deadline": "2021. 11. 25",
   "recruitment_notice_desc": "모집이 시작됩니다.",

content/projects/64.json

@@ -1,7 +1,7 @@
 {
   "idx": 64,
   "app_name": "모임모임",
-  "thumbnail": "https://drive.google.com/uc?export=view&id=1t58bLgwAxV4-tcMsIKNcgSeM3oly_6nq",
+  "thumbnail": "https://drive.google.com/uc?export=view&id=1ZnMs6XwR_5l2rDaMhrpMrUINoiG-mu0W",
   "th": "15",
   "year": "",
   "team_name": "(주)모임건설",

layouts/main.vue

@@ -43,14 +43,24 @@ class MainLayout extends Vue {
 export default MainLayout;
 </script>
 <style lang="scss" scoped>
+@import "~/assets/css/_device.scss";
 @import "~/assets/css/setting.scss";
+@import "~/assets/css/main-bg.scss";
 
 .background {
   display: flex;
   flex-direction: column;
-  background-image: url("~/assets/img/main_bg.png");
+  @include desktop {
+    background-image: $main-default-desktop;
+  }
+  @include tablet {
+    background-image: $main-default-desktop;
+  }
+  @include mobile {
+    background-image: $main-default-mobile;
+  }
   background-size: cover;
-  background-position: 100%;
+  background-position: center;
   width: 100%;
   height: 100vh;
 }

pages/about.vue

@@ -195,6 +195,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import "~/assets/css/_device.scss";
 @import "~/assets/css/color.scss";
+@import "~/assets/css/about-top-image.scss";
 
 * {
   font-family: Spoqa Han Sans Neo;
@@ -234,7 +235,7 @@ export default defineComponent({
       align-items: center;
       width: 100%;
       height: 809px;
-      background: $grey01;
+      background-image: $about-desktop;
       margin-bottom: 120px;
       h1 {
         width: 1200px;
@@ -361,7 +362,7 @@ export default defineComponent({
       align-items: center;
       width: 100%;
       height: 809px;
-      background: $grey01;
+      background: $about-desktop;
       margin-bottom: 120px;
       .slogan-text {
         white-space: pre-wrap;
@@ -493,7 +494,7 @@ export default defineComponent({
       align-items: center;
       width: 100%;
       height: 484px;
-      background: $grey01;
+      background: $about-mobile;
       margin-bottom: 64px;
       .slogan-text {
         white-space: pre-wrap;

pages/index.vue

@@ -38,6 +38,7 @@ export default defineComponent({
         "default_a",
         "default_href",
         "th",
+        "recruitment_notice",
         "recruitment_start",
         "recruitment_deadline",
         "recruitment_notice_a",
@@ -53,6 +54,7 @@ export default defineComponent({
       default_a,
       default_href,
       th,
+      recruitment_notice,
       recruitment_start,
       recruitment_deadline,
       recruitment_notice_a,
@@ -67,6 +69,7 @@ export default defineComponent({
       default_a: default_a,
       default_href: default_href,
       th: th,
+      recruitment_notice: recruitment_notice,
       recruitment_start: recruitment_start,
       recruitment_deadline: recruitment_deadline,
       recruitment_notice_a: recruitment_notice_a,
@@ -106,12 +109,16 @@ export default defineComponent({
       } else if (this.is_recruiting) {
         desc = `현재 넥스터즈 ${this.th}기 ${this.recruitment_in_progress_desc}`;
       }
-      console.log(desc);
       return desc;
     },
     badge_text() {
       return this.d_day > 0 ? `마감 D-${this.d_day}` : "";
     },
+    notice_day() {
+      console.log(this.recruitment_notice);
+      const result = new Date(this.recruitment_notice) - new Date();
+      return Math.floor(result / 86_400_000);
+    },
     s_day() {
       const result = new Date(this.recruitment_start) - new Date();
       return Math.floor(result / 86_400_000);
@@ -121,7 +128,8 @@ export default defineComponent({
       return this.s_day < 0 ? Math.floor(result / 86_400_000) : 0;
     },
     before_recruitment() {
-      return this.s_day > 0;
+      console.log(this.notice_day);
+      return this.notice_day < 0 && this.s_day > 0;
     },
     is_recruiting() {
       return this.s_day < 0 && this.d_day > 0;