[FE] Github Actions로 CI 구축

.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/src/pages/DetailedReviewPage/components/LockButton/index.tsx

@@ -1,5 +1,6 @@
-import LockIcon from '../../../../assets/Lock.svg';
-import UnlockIcon from '../../../../assets/Unlock.svg';
+//import UnlockIcon from '@/assets/Unlock.svg';
+import LockIcon from '@/assets/lock.svg';
+import UnlockIcon from '@/assets/unLock.svg';
 
 interface LockButtonProps {
   isLock: boolean;

frontend/tempTest.test.ts

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

frontend/tsconfig.json

@@ -16,7 +16,7 @@
       "@/*": ["src/*"]
     },
     "jsxImportSource": "@emotion/react",
-    "types": ["jest", "@testing-library/jest-dom"]
+    "types": ["node", "jest", "@testing-library/jest-dom"]
   },
   "include": ["src", "**/*.tsx", "types.d.ts"],
   "exclude": ["node_modules", "dist"]

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"