[Refactor] 소개페이지 상단 배너 로딩 속도 개선 (#428)

* feat: ISR도입, revalidate 간격 120초

* fix: div background image를 next/image로 수정

* Update ci.yml

.github/workflows/ci.yml

@@ -9,10 +9,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 16.x
-        uses: actions/setup-node@v1
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: '18'
 
       - name: Install pnpm
         run: npm install -g [email protected]

src/pages/about.tsx

@@ -44,6 +44,7 @@ export const getStaticProps = async () => {
       aboutInfo,
       memberInfo,
     },
+    revalidate: 120,
   };
 };
 

src/views/AboutPage/components/Banner/index.tsx

@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import * as S from './style';
 
 interface BannerProps {
@@ -8,7 +9,19 @@ interface BannerProps {
 const Banner = (props: BannerProps) => {
   const { imageSrc } = props;
 
-  return <S.Banner src={imageSrc}></S.Banner>;
+  return (
+    <S.Banner>
+      <Image
+        src={imageSrc}
+        alt="SOPT banner"
+        fill
+        style={{
+          objectFit: 'cover',
+          objectPosition: 'center',
+        }}
+      />
+    </S.Banner>
+  );
 };
 
 export default Banner;

src/views/AboutPage/components/Banner/style.ts

@@ -1,10 +1,11 @@
 import styled from '@emotion/styled';
 
-export const Banner = styled.div<{ src: string }>`
+export const Banner = styled.div`
   width: 100vw;
   max-height: 630px;
   height: calc(376px + 13vw);
-  background: center / cover no-repeat url(${({ src }) => src});
+  position: relative;
+  overflow: hidden;
 
   /* 태블릿 뷰 */
   @media (max-width: 48rem) {