Release/v2.0.0 (#57)

* make image not stretched in carousel

* remove redundant introduction of snutt

* Add OpenGraph metadata

* change opengraph image

* clarify svg-based image in safari

* dev, prod 배포 파이프라인 구축

.github/workflows/main.yml → .github/workflows/deploy-dev.yml

@@ -1,23 +1,29 @@
-name: Build and Deploy
+name: Build and Deploy (Dev)
 on:
   push:
     branches:
-      main
+      - main
+
 jobs:
-  Build:
+  Deploy:
     runs-on: ubuntu-latest
+    environment: dev
     steps:
       - name: Checkout
         uses: actions/checkout@v3.3.0
+
       - name: Setup Node.js environment
         uses: actions/setup-node@v3.6.0
         with:
           node-version: 18.x
           cache: yarn
+
       - name: Install dependencies
         run: yarn
+
       - name: Build
         run: yarn build
+
       - name: Upload to S3
         uses: jakejarvis/s3-sync-action@master
         with:
@@ -26,8 +32,9 @@ jobs:
           AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          AWS_REGION: 'ap-northeast-2'
-          SOURCE_DIR: 'out'
+          AWS_REGION: "ap-northeast-2"
+          SOURCE_DIR: "out"
+
       - name: Invalidate Cloudfront cache
         uses: chetan/invalidate-cloudfront-action@v2
         env:

.github/workflows/deploy-prod.yml

@@ -0,0 +1,45 @@
+name: Build and Deploy (Prod)
+on:
+  push:
+    tags:
+      - "v[0-9]+.[0-9]+.[0-9]+*"
+
+jobs:
+  Deploy:
+    runs-on: ubuntu-latest
+    environment: prod
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3.3.0
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3.6.0
+        with:
+          node-version: 18.x
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Build
+        run: yarn build
+
+      - name: Upload to S3
+        uses: jakejarvis/s3-sync-action@master
+        with:
+          args: --delete
+        env:
+          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_REGION: "ap-northeast-2"
+          SOURCE_DIR: "out"
+
+      - name: Invalidate Cloudfront cache
+        uses: chetan/invalidate-cloudfront-action@v2
+        env:
+          DISTRIBUTION: ${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION }}
+          PATHS: "/*"
+          AWS_REGION: "ap-northeast-2"
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

app/layout.tsx

@@ -1,15 +1,30 @@
+import { Metadata } from "next";
 import { ReactNode } from "react";
 import "../styles/globals.css";
 import "../styles/font.scss";
 import Header from "../components/common/Header/Header";
 
-export const metadata = {
+export const metadata: Metadata = {
   title: "WaffleStudio",
   description: "맛있는 서비스가 탄생하는 곳 와플스튜디오",
   icons: {
     icon: "/favicon.ico",
   },
   robots: "noindex",
+  openGraph: {
+    type: "website",
+    locale: "ko_KR",
+    url: "https://wafflestudio.com",
+    title: "와플스튜디오",
+    siteName: "wafflestudio.com",
+    description: "맛있는 서비스가 탄생하는 곳 와플스튜디오",
+    images: [
+      {
+        url: "/wafflestudio_text_logo.svg",
+        alt: "WaffleStudio",
+      },
+    ],
+  },
 };
 
 export default function RootLayout({ children }: { children: ReactNode }) {

components/Home/About/About.module.scss

@@ -41,7 +41,8 @@
           line-height: 135%;
           letter-spacing: 0.22em;
         }
-        > img {
+        img,
+        object {
           margin-top: 20px;
           width: 110px;
         }
@@ -109,7 +110,8 @@
             line-height: 130%; /* 65px */
             letter-spacing: 11px;
           }
-          > img {
+          img,
+          object {
             margin-bottom: 40px;
             width: 60px !important;
           }

components/Home/Activity/Activity.module.scss

@@ -76,9 +76,11 @@
             border-radius: 10px;
             box-shadow: 2px 4px 15px 0px rgba(0, 0, 0, 0.15);
 
-            img {
+            img,
+            object {
               height: 100%;
               width: 100%;
+              object-fit: contain;
             }
           }
 

components/Home/Activity/Carousel.module.scss

@@ -54,7 +54,8 @@ $carousel-length: 5;
           .imageContainer {
             width: 100%;
 
-            > img {
+            img,
+            object {
               border-top-left-radius: 10px;
               border-top-right-radius: 10px;
               display: block;

components/Home/Members/Members.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import Image from "next/image";
 import classNames from "classnames/bind";
+import Image from "../../common/Image";
 import { useNavigatorScroll } from "../../common/Scroll/scroll";
 
 import styles from "./Members.module.scss";

components/Home/Services/Carousel.module.scss

@@ -81,7 +81,8 @@ $carousel-length: 3;
         > .carousel-item {
           width: lib.px2width(231px, responsive.$breakpoint-mobile);
           height: lib.px2width(260px, responsive.$breakpoint-mobile);
-          img {
+          img,
+          object {
             width: 100% !important;
           }
         }
@@ -100,7 +101,8 @@ $carousel-length: 3;
       > .carousel-items-container.state-1 {
         transition: 1s;
       }
-      img {
+      img,
+      object {
         height: 100% !important;
       }
     }

components/Home/Services/Carousel.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames/bind";
-import Image from "next/image";
+import Image from "../../common/Image";
 import { TCarouselItemData } from "./Services";
 import styles from "./Carousel.module.scss";
 

components/Home/Services/Services.tsx

@@ -2,7 +2,7 @@
 
 import classNames from "classnames/bind";
 import { useCallback, useEffect, useState } from "react";
-import Image from "next/image";
+import Image from "../../common/Image";
 import { useNavigatorScroll } from "../../common/Scroll/scroll";
 import WaffleLink from "../../common/WaffleLink";
 import Carousel from "./Carousel";

components/Home/Support/Support.module.scss

@@ -107,7 +107,8 @@
       .images {
         width: 100%;
         height: 100%;
-        img {
+        img,
+        object {
           position: absolute;
         }
         .chair {
@@ -235,7 +236,8 @@
       }
     }
     .images {
-      img {
+      img,
+      object {
         width: 50% !important;
         max-width: 300px;
       }

components/Service/Snutt/Snutt.tsx

@@ -54,11 +54,7 @@ function Snutt() {
         <IntroductionHead
           logo={"/static/images/logo/snutt_logo.svg"}
           title={"SNUTT"}
-          des={[
-            "SNUTT는 서울대학교 시간표 어플입니다.",
-            "SNUTT는 서울대학교 대표 시간표 어플입니다.",
-            "SNUTT는 서울대학교 시간표 어플입니다.",
-          ]}
+          des={["SNUTT는 서울대학교 대표 시간표 어플입니다."]}
           textColor="black"
           links={[
             "https://apps.apple.com/kr/app/snutt-%EC%84%9C%EC%9A%B8%EB%8C%80%ED%95%99%EA%B5%90-%EC%8B%9C%EA%B0%84%ED%91%9C-%EC%95%B1/id1215668309",

components/common/Header/Header.module.scss

@@ -22,7 +22,8 @@
     justify-content: space-between;
   }
   .logo {
-    > img {
+    img,
+    object {
       height: 1.5em;
     }
   }

components/common/Image.tsx

@@ -0,0 +1,18 @@
+import NextImage, { ImageProps } from "next/image";
+import { ComponentProps } from "react";
+
+export default function Image(props: ImageProps) {
+  if (typeof props.src === "string" && props.src.endsWith(".svg")) {
+    const objectProps: ComponentProps<"object"> = {
+      className: props.className,
+      width: props.width,
+      height: props.height,
+      style: props.style,
+    };
+    return (
+      <object data={props.src} type="image/svg+xml" {...objectProps}></object>
+    );
+  } else {
+    return <NextImage {...props} />;
+  }
+}

styles/globals.css

@@ -51,3 +51,7 @@ html {
 html::-webkit-scrollbar {
   display: none; /* Chrome, Safari, Opera*/
 }
+
+object {
+  pointer-events: none;
+}