Merge branch 'develop' into refactor/ci-h2

.github/workflows/backend_cd.yml

@@ -44,19 +44,9 @@ jobs:
     runs-on: self-hosted
     steps:
       - name: 브랜치명을 통해 개발 환경 알아내기
-        id: get-branch
         run: |
-          BRANCH_NAME=${GITHUB_REF#refs/heads/}
-
-          if [ "$BRANCH_NAME" = "main" ]; then
-            echo "ENVIRONMENT=prod" >> $GITHUB_ENV
-            echo "개발 환경 : prod"
-          elif [ "$BRANCH_NAME" = "develop" ]; then
-            echo "ENVIRONMENT=dev" >> $GITHUB_ENV
-            echo "개발 환경 : dev"
-          else
-            exit 1
-          fi
+          cd ${{ secrets.SCRIPT_DIRECTORY }}
+          bash find-env-branch.sh
           
       - name: Artifact 다운로드
         uses: actions/download-artifact@v4
@@ -72,7 +62,7 @@ jobs:
       - name: 배포 스크립트 실행
         run: |
           cd ${{ secrets.WORK_DIRECTORY }}
-          unzip -o code-zap-jar.zip
+          unzip -o code-zap-jar.zip -d ${{ env.ENVIRONMENT }}
           cd ${{ secrets.SCRIPT_DIRECTORY }}
           RUNNER_TRACKING_ID="" && bash start.sh ${{ env.ENVIRONMENT }}
                     

.github/workflows/frontend_cd.yml

@@ -0,0 +1,51 @@
+name: Frontend CD
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    env:
+      frontend-directory: ./frontend
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install Dependencies
+        run: npm install
+        working-directory: ${{ env.frontend-directory }}
+
+      - name: Run Build
+        run: npm run build
+        working-directory: ${{ env.frontend-directory }}
+
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: code-zap-front
+          path: ${{ env.frontend-directory }}/dist/**
+
+  deploy:
+    needs: build
+    runs-on: self-hosted
+    steps:
+      - name: Make Artifact Directory
+        run: mkdir ${{ secrets.FRONT_DIRECTORY }}
+      - name: Download Artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: code-zap-front
+          path: ${{ secrets.FRONT_DIRECTORY }}
+      - name: Move To S3
+        run: |
+          aws s3 cp --recursive ${{ secrets.FRONT_DIRECTORY }} s3://techcourse-project-2024/code-zap
+          rm -rf ${{ secrets.FRONT_DIRECTORY }}
+        

.github/workflows/frontend_ci.yml

@@ -0,0 +1,31 @@
+name: Frontend CI
+
+on:
+  pull_request:
+    branches:
+      - '**'
+
+jobs:
+  build-with-test:
+    runs-on: ubuntu-latest
+    env:
+      frontend-directory: ./frontend
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install Dependencies
+        run: npm install
+        working-directory: ${{ env.frontend-directory }}
+
+      - name: Run Type Checking
+        run: npm run tsc
+        working-directory: ${{ env.frontend-directory }}
+
+      - name: Run Tests
+        run: npm run test
+        working-directory: ${{ env.frontend-directory }}

frontend/.eslintrc.json

@@ -0,0 +1,103 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "es2020": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:storybook/recommended"
+  ],
+  "ignorePatterns": ["dist", "*.config.ts", "*.common.js", "*.prod.js", "*.dev.js", "*.polyfills.js"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["react-refresh", "react", "import"],
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true
+      },
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+  "rules": {
+    "prettier/prettier": "error",
+    "padding-line-between-statements": [
+      "error",
+      { "blankLine": "always", "prev": "*", "next": "return" },
+      { "blankLine": "always", "prev": ["const", "let", "var", "function", "block-like"], "next": "*" },
+      { "blankLine": "any", "prev": ["const", "let", "var"], "next": ["const", "let", "var"] },
+      { "blankLine": "always", "prev": "case", "next": "*" }
+    ],
+    "prefer-template": "error",
+    "object-shorthand": ["error", "always"],
+    "prefer-arrow-callback": "error",
+    "func-style": ["error", "expression", { "allowArrowFunctions": true }],
+    "arrow-body-style": ["error", "as-needed"],
+    "consistent-return": "error",
+    "curly": ["error", "all"],
+    "default-case": "error",
+    "default-case-last": "error",
+    "no-fallthrough": "error",
+    "import/newline-after-import": ["error", { "count": 1 }],
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          ["builtin", "external"],
+          ["internal", "parent", "sibling", "index", "type"]
+        ],
+        "warnOnUnassignedImports": true,
+        "alphabetize": { "order": "asc" },
+        "newlines-between": "always",
+        "distinctGroup": false,
+        "pathGroups": [
+          {
+            "pattern": "@storybook/**",
+            "group": "external",
+            "position": "before"
+          },
+          {
+            "pattern": "@/**",
+            "group": "internal",
+            "position": "before"
+          },
+          {
+            "pattern": "./**",
+            "group": "sibling",
+            "position": "after"
+          }
+        ]
+      }
+    ],
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ],
+    "react-refresh/only-export-components": ["error", { "allowConstantExport": false }],
+    "react/no-unknown-property": ["error", { "ignore": ["css"] }],
+    "import/no-default-export": "error"
+  },
+  "overrides": [
+    {
+      "files": ["*.tsx", "*.d.ts"],
+      "rules": {
+        "import/no-default-export": "off",
+        "import/prefer-default-export": "error"
+      }
+    }
+  ]
+}

frontend/.gitignore

@@ -3,3 +3,7 @@ node_modules
 *storybook.log
 
 dist
+
+.env
+.env.development
+.env.production

frontend/.storybook/main.ts

@@ -1,6 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
 import { Configuration } from 'webpack';
-
+import path from 'path';
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
@@ -27,10 +27,15 @@ const config: StorybookConfig = {
         },
       ],
     });
-
+    config.resolve = {
+      ...config.resolve,
+      alias: {
+        ...config.resolve?.alias,
+        '@': path.resolve(__dirname, '../src'),
+      },
+    };
     return config;
   },
-
   framework: {
     name: '@storybook/react-webpack5',
     options: {},

frontend/.stylelintrc.json

@@ -0,0 +1,4 @@
+{
+  "extends": ["stylelint-config-clean-order"],
+  "customSyntax": "postcss-styled-syntax"
+}

frontend/jest.config.ts

@@ -0,0 +1,21 @@
+import type { Config } from 'jest';
+
+const config: Config = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  setupFiles: ['./jest.polyfills.js'],
+  testEnvironmentOptions: {
+    customExportConditions: [''],
+  },
+  setupFilesAfterEnv: ['./setupTests.ts'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  clearMocks: true,
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+};
+
+export default config;

frontend/jest.polyfills.js

@@ -0,0 +1,34 @@
+const { ReadableStream, TransformStream } = require('node:stream/web');
+const { TextDecoder, TextEncoder } = require('node:util');
+
+Object.defineProperties(globalThis, {
+  TextDecoder: { value: TextDecoder },
+  TextEncoder: { value: TextEncoder },
+  ReadableStream: { value: ReadableStream },
+  TransformStream: { value: TransformStream },
+});
+
+Object.defineProperties(globalThis, {
+  TextDecoder: { value: TextDecoder },
+  TextEncoder: { value: TextEncoder },
+  ReadableStream: { value: ReadableStream },
+});
+
+const { Blob, File } = require('node:buffer');
+const { fetch, Headers, FormData, Request, Response } = require('undici');
+
+Object.defineProperties(globalThis, {
+  fetch: { value: fetch, writable: true },
+  Blob: { value: Blob },
+  File: { value: File },
+  Headers: { value: Headers },
+  FormData: { value: FormData },
+  Request: { value: Request },
+  Response: { value: Response },
+});
+
+globalThis.setImmediate = (callback, ...args) => setTimeout(callback, 0, ...args);
+
+globalThis.clearImmediate = (immediateId) => {
+  clearTimeout(immediateId);
+};