[FE] Github Actions로 CI 구축 (#96)

* ci: CI를 위한 yml 파일 작성

* ci: yarn.lock 경로 추가

* ci: working-directory 추가

* cI: 동작 테스트를 위해 push 브랜치 경로 조건에서 frontend 임시 제거

* ci: 테스트를 위해 현재 브랜치도 조건에 추가

* ci: package에 test 명령어 추가

* ci: yarn.lock 파일 업데이트

* ci: 테스트 파일 형식 수정

* chore: 필요없는 파일 삭제

* chore: svg 파일을 대문자로 import한 것들 소문자로 수정

* ci: 웹팩 env 설정 업데이트

* ci: process.env 사용을 위한 타입 설정

* ci: env 웹팩 설정 경로를 절대 경로로 변경

* ci: env 웹팩 설정 경로 수정

* ci: env 절대경로 수정

* ci: 절대경로 수정 2

* ci: 읽기 권한을 명시적으로 주고 테스트

* ci: dist 파일 테스트

* ci: CI 환경에서도 env 파일 생성

* ci: 배포 정상 동작 확인을 위한 github pages 임시 배포 설정

* ci: 임시 배포 코드 삭제

* ci: develop 브랜치로 frontend 이하 경로에서 PR이 올라올 때 CI가 실행되도록 수정

* ci: node 설치 에러 해결

.github/workflows/frontend-ci.yml

@@ -0,0 +1,48 @@
+name: Build test with Webpack
+on:
+  pull_request:
+    branches:
+      - develop
+    paths:
+      - "frontend/**"
+  workflow_dispatch:
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+concurrency: # NOTE: action 도중 새 PR이 올라오면 기존 action 취소
+  group: "ci-group"
+  cancel-in-progress: true
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout to current repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "yarn"
+          cache-dependency-path: ./frontend/yarn.lock
+
+      - name: Create .env file
+        run: echo "API_BASE_URL=${{ secrets.API_BASE_URL }}" > ./frontend/.env
+
+      - name: Set environment file permissions
+        run: chmod 644 ./frontend/.env
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+        working-directory: frontend
+
+      - name: Run tests
+        run: yarn test
+        working-directory: frontend
+
+      - name: Build
+        run: yarn build
+        env:
+          API_BASE_URL: ${{ secrets.API_BASE_URL }}
+        working-directory: frontend

frontend/package.json

@@ -10,9 +10,6 @@
     "lint:styles": "stylelint \"src/**/styles.ts\" --fix",
     "test": "jest"
   },
-  "jest": {
-    "testEnvironment": "jest-environment-jsdom"
-  },
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
@@ -25,7 +22,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router": "^6.24.1",
-    "react-router-dom": "^6.24.1"
+    "react-router-dom": "^6.24.1",
+    "jest": "^29.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",

frontend/src/components/layouts/Sidebar/index.tsx

@@ -1,7 +1,8 @@
 import { useLocation, Link } from 'react-router-dom';
 
-import CloseIcon from '../../../assets/close.svg';
-import LogoIcon from '../../../assets/logo.svg';
+import CloseIcon from '@/assets/close.svg';
+import LogoIcon from '@/assets/logo.svg';
+
 import { PAGE } from '../../../constants';
 
 import * as S from './styles';

frontend/tempTest.test.ts

@@ -0,0 +1,4 @@
+test('테스트하자!', () => {
+  const onePlusOne = 1 + 1;
+  expect(onePlusOne).toBe(2);
+});

frontend/webpack.config.js

@@ -51,6 +51,7 @@ module.exports = (env, argv) => {
       }),
       new CleanWebpackPlugin(),
       new Dotenv({
+        systemvars: true,
         path: './.env',
       }),
     ],

frontend/yarn.lock

@@ -1825,9 +1825,9 @@
     pretty-format "^27.0.2"
 
 "@testing-library/jest-dom@^6.4.7":
-  version "6.4.7"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.4.7.tgz#0f882b745f17a6a094d1d64d835a9440429f90f4"
-  integrity sha512-GaKJ0nijoNf30dWSOOzQEBkWBRk4rG3C/efw8zKrimNuZpnS/6/AEwo0WvZHgJxG84cNCgxt+mtbe1fsvfLp2A==
+  version "6.4.8"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.4.8.tgz#9c435742b20c6183d4e7034f2b329d562c079daa"
+  integrity sha512-JD0G+Zc38f5MBHA4NgxQMR5XtO5Jx9g86jqturNTt2WUfRmLDIY7iKkWHDCCTiDuFMre6nxAD5wHw9W5kI4rGw==
   dependencies:
     "@adobe/css-tools" "^4.4.0"
     "@babel/runtime" "^7.9.2"