Merge pull request #126 from CAUCSE/develop

[DEPLOY] merge #118 & #124 with main branch
CAUCSE · May 17, 2024 · 9bafe2a · 9bafe2a
2 parents 2a4313f + 7450423
commit 9bafe2a
Show file tree

Hide file tree

Showing 10 changed files with 248 additions and 69 deletions.
diff --git a/.github/workflows/front-dev.yml b/.github/workflows/front-dev.yml
@@ -0,0 +1,63 @@
+name: front-dev
+
+on:
+  push:
+    branches:
+      - develop
+
+jobs:
+  build:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: develop
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+      - name: Install Dependencies
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: npm ci
+
+      # aws user 연결
+      - name: Configure AWS credentials 
+        uses: aws-actions/configure-aws-credentials@v1 
+        with: 
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} 
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} 
+          aws-region: ap-northeast-2
+
+      # 환경 변수 파일을 생성.
+      - name: Generate Environment Variables File for Production
+        run: |
+          echo "VITE_DEV_SERVER_URL=$VITE_DEV_SERVER_URL" >> .env
+        env:
+          VITE_DEV_SERVER_URL: ${{ secrets.VITE_DEV_SERVER_URL }}
+
+      # react 빌드
+      - name: deploy
+        run: |
+          npm run deploy
+
+      # react 빌드한 /dist를 s3로 업로드
+      - name: Upload /dist to S3
+        env:
+          BUCKET_NAME: ${{ secrets.AWS_S3_BUCKET_NAME_DEV}}
+        run: |
+          aws s3 sync \
+            ./dist s3://$BUCKET_NAME
+
+      # 업로드한 s3 파일을 각 CDN 캐시 무효화하여 리프레시 하기
+      - name: CloudFront Invalidation
+        env:
+          CLOUD_FRONT_ID: ${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION_ID_DEV}}
+        run: |
+          aws cloudfront create-invalidation \
+            --distribution-id $CLOUD_FRONT_ID --paths "/*"
diff --git a/.github/workflows/front-prod.yml b/.github/workflows/front-prod.yml
@@ -0,0 +1,63 @@
+name: front-prod
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: main
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+      - name: Install Dependencies
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: npm ci
+
+      # aws user 연결
+      - name: Configure AWS credentials 
+        uses: aws-actions/configure-aws-credentials@v1 
+        with: 
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} 
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} 
+          aws-region: ap-northeast-2
+
+      # 환경 변수 파일을 생성.
+      - name: Generate Environment Variables File for Production
+        run: |
+          echo "VITE_PROD_SERVER_URL=$VITE_PROD_SERVER_URL" >> .env
+        env:
+          VITE_PROD_SERVER_URL: ${{ secrets.VITE_PROD_SERVER_URL }}
+
+      # react 빌드
+      - name: deploy
+        run: |
+          npm run deploy:prod
+
+      # react 빌드한 /dist를 s3로 업로드
+      - name: Upload /dist to S3
+        env:
+          BUCKET_NAME: ${{ secrets.AWS_S3_BUCKET_NAME}}
+        run: |
+          aws s3 sync \
+            ./dist s3://$BUCKET_NAME
+
+      # 업로드한 s3 파일을 각 CDN 캐시 무효화하여 리프레시 하기
+      - name: CloudFront Invalidation
+        env:
+          CLOUD_FRONT_ID: ${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION_ID}}
+        run: |
+          aws cloudfront create-invalidation \
+            --distribution-id $CLOUD_FRONT_ID --paths "/*"
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
diff --git a/index.html b/index.html
@@ -1,52 +1,58 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon-96x96.png" />
-    <meta name="description" content="중앙대학교 소프트웨어학부 학생회 홈페이지입니다. 공지사항, 학년별 게시판, 동아리 가입, 사물함 신청 등의 기능을 제공하여 소프트웨어 학생들의 불편함을 개선합니다.">
-    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,viewport-fit=cover" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="color-scheme" content="light only"/>
-    <meta name="supported-color-schemes" content="light"/>
-    <link rel="stylesheet preload" as="style" href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" />
-    <link rel="stylesheet preload" as="style" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
 
-    <title>CAUSW</title>
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon-96x96.png" />
+  <meta name="description"
+    content="중앙대학교 소프트웨어학부 학생회 홈페이지입니다. 공지사항, 학년별 게시판, 동아리 가입, 사물함 신청 등의 기능을 제공하여 소프트웨어 학생들의 불편함을 개선합니다.">
+  <meta name="viewport"
+    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,viewport-fit=cover" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="color-scheme" content="light only" />
+  <meta name="supported-color-schemes" content="light" />
+  <link rel="stylesheet preload" as="style"
+    href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" />
+  <link rel="stylesheet preload" as="style" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+
+  <title>CAUSW</title>
+
+  <link rel="apple-touch-icon" sizes="57x57" href="/icon/apple-icon-57x57.png">
+  <link rel="apple-touch-icon" sizes="60x60" href="/icon/apple-icon-60x60.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="/icon/apple-icon-72x72.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="/icon/apple-icon-76x76.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="/icon/apple-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="/icon/apple-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="/icon/apple-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="/icon/apple-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/icon/apple-icon-180x180.png">
+  <link rel="icon" type="image/png" sizes="192x192" href="/icon/android-icon-192x192.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/icon/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="96x96" href="/icon/favicon-96x96.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/icon/favicon-16x16.png">
+  <meta name="msapplication-TileColor" content="#ffffff">
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
+  <meta name="theme-color" content="#ffffff">
+
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+  <meta name="mobile-web-app-capable" content="yes" />
+  <link rel="manifest" href="/manifest.json">
+</head>
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-0MFP0WN799"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag() { dataLayer.push(arguments); }
+  gtag('js', new Date());
+  gtag('config', 'G-0MFP0WN799');
+</script>
+
+<body>
+  <div id="root"></div>
+  <div id="external-root"></div>
+  <script type="module" src="/src/index.tsx"></script>
+</body>
 
-    <link rel="apple-touch-icon" sizes="57x57" href="/icon/apple-icon-57x57.png">
-    <link rel="apple-touch-icon" sizes="60x60" href="/icon/apple-icon-60x60.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="/icon/apple-icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="/icon/apple-icon-76x76.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="/icon/apple-icon-114x114.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/icon/apple-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="/icon/apple-icon-144x144.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/icon/apple-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="/icon/apple-icon-180x180.png">
-    <link rel="icon" type="image/png" sizes="192x192"  href="/icon/android-icon-192x192.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/icon/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="/icon/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/icon/favicon-16x16.png">
-    <meta name="msapplication-TileColor" content="#ffffff">
-    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
-    <meta name="theme-color" content="#ffffff">
-
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <link rel="manifest" href="/manifest.json">
-  </head>
-  <script async src="https://www.googletagmanager.com/gtag/js?id=G-0MFP0WN799"></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
-    gtag('js', new Date());
-    gtag('config', 'G-0MFP0WN799');
-  </script>
-  <body>
-    <div id="root"></div>
-    <div id="external-root"></div>
-    <script type="module" src="/src/index.tsx"></script>
-  </body>
 </html>
diff --git a/public/.well-known/assetlinks.json b/public/.well-known/assetlinks.json
@@ -0,0 +1,8 @@
+[{
+      "relation": ["delegate_permission/common.handle_all_urls"],
+      "target": {
+        "namespace": "android_app",
+        "package_name": "kr.co.causw.twa",
+        "sha256_cert_fingerprints": ["68:47:73:4E:14:52:93:02:99:11:0D:06:6F:4B:C7:24:1A:10:90:11:2C:F7:BA:63:F9:75:37:4D:7C:93:13:6A"]
+      }
+    }]
diff --git a/src/configs/axios.ts b/src/configs/axios.ts
@@ -44,6 +44,7 @@ API.interceptors.response.use(
         response: { data },
         config,
       } = error;
+
       if (
         (!localStorage.getItem(storageRefreshKey) &&
           config.url !== '/api/v1/users/password/find' &&
@@ -92,6 +93,8 @@ API.interceptors.response.use(
       });
     }
 
+    location.href = PAGE_URL.ApiError;
+
     return Promise.reject({
       success: false,
     });

diff --git a/src/configs/path.ts b/src/configs/path.ts
@@ -7,6 +7,8 @@ export enum PAGE_URL {
   UseTerms = '/auth/useTerms',
   NoPermission = '/auth/noPermission',
 
+  ApiError = '/auth/error',
+
   Home = '/home',
 
   // 동아리

diff --git a/src/pages/auth/AuthPageSwitch.tsx b/src/pages/auth/AuthPageSwitch.tsx
@@ -1,6 +1,7 @@
 import { Route, Switch } from 'react-router-dom';
 
 import { Admission } from './admission';
+import ApiError from './apiError/ApiErrorPage';
 import { FindPassword } from './findPassword';
 import { NoPermission } from './noPermission';
 import { SignIn } from './signIn';
@@ -17,5 +18,6 @@ export const AuthPageSwitch: React.FC = () => (
     <Route path={PAGE_URL.UseTerms} component={UseTerms} />
     <Route path={PAGE_URL.FindPassword} component={FindPassword} />
     <Route path={PAGE_URL.NoPermission} component={NoPermission} />
+    <Route path={PAGE_URL.ApiError} component={ApiError} />
   </Switch>
 );
diff --git a/src/pages/auth/apiError/ApiErrorPage.tsx b/src/pages/auth/apiError/ApiErrorPage.tsx
@@ -0,0 +1,45 @@
+import styled from '@emotion/styled';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import { PageUiStoreImpl } from './ApiErrorPageUiStore';
+
+import { PageBody, PageStoreHOC, Header } from '@/components';
+import { PAGE_URL } from '@/configs/path';
+
+const ApiErrorPage: React.FC = observer(() => {
+  return (
+    <>
+      <Header withBack={PAGE_URL.Home} title="500 Error" />
+      <PageBody>
+        <Wrapper>
+          <img src="/images/mascot-study.png" alt="Api Error Img" />
+          <h4>일시적으로 서비스를 이용할 수 없습니다.</h4>
+          문제가 지속적으로 발생하는 경우 <br />
+          아래 이메일로 문의해주세요.
+          <br />( [email protected] )
+        </Wrapper>
+      </PageBody>
+    </>
+  );
+});
+
+const Wrapper = styled.div`
+  margin: 100px 0 30px;
+  font-size: 12px;
+  //font-weight: bolder;
+  color: #545454;
+  text-align: center;
+
+  > img {
+    margin-bottom: -10px;
+    width: 170px;
+  }
+
+  > h4 {
+    font-size: 16px;
+    margin-bottom: 30px;
+  }
+`;
+
+export default PageStoreHOC(<ApiErrorPage />, { store: PageUiStoreImpl });
diff --git a/src/pages/auth/apiError/ApiErrorPageUiStore.tsx b/src/pages/auth/apiError/ApiErrorPageUiStore.tsx
@@ -0,0 +1,9 @@
+import { makeAutoObservable } from 'mobx';
+
+export class ApiErrorPageUiStore {
+  constructor() {
+    makeAutoObservable(this, {}, { autoBind: true });
+  }
+}
+
+export const PageUiStoreImpl = new ApiErrorPageUiStore();