Develop frontend

.github/workflows/backend-dev-cd.yml

@@ -76,4 +76,5 @@ jobs:
         run: |
           export APP_VERSION_TAG=${{ secrets.APP_VERSION_TAG }}
           pwd
-          sh /home/ubuntu/deploy.sh
+          docker compose down
+          docker compose up -d

.github/workflows/frontend-ci.yml

@@ -53,11 +53,11 @@ jobs:
             ${{ runner.os }}-yarn-
 
       - name: 🍔 yarn install
-        run: pwd && ls && yarn install
+        run: rm -rf ./node_modules yarn.lock && yarn cache clean && yarn install
         working-directory: ${{ env.working-directory }}
 
       - name: 🍔 eslint 테스트
-        run: pwd && ls && yarn lint
+        run: yarn lint
         working-directory: ${{ env.working-directory }}
 
       - name: 🍔 React 프로젝트 빌드

.github/workflows/frontend-dev-cd.yml

@@ -0,0 +1,87 @@
+name: ✨ Celuveat frontend DEV CD ✨
+
+on:
+  push:
+    branches:
+      - develop-frontend*
+
+jobs:
+  build:
+    runs-on: ubuntu-22.04
+    defaults:
+      run:
+        working-directory: ./frontend
+    concurrency:
+      group: ${{ github.workflow }}
+      cancel-in-progress: true
+
+    steps:
+      - name: ✨ Checkout repository
+        uses: actions/checkout@v3
+
+      - name: ✨ Node.js 설정
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.16.1
+
+      - name: ✨ Yarn global cache 캐싱
+        uses: actions/cache@v3
+        with:
+          path: '**/.yarn'
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: ✨ Yarn project cache 캐싱
+        uses: actions/cache@v3
+        with:
+          path: '~/.yarn/cache'
+          key: ${{ runner.os }}-yarn-project-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: 환경변수 설정
+        run: |
+          echo "BASE_URL=$BASE_URL" >> .dev.env
+          echo "GOOGLE_MAP_API_KEY=$GOOGLE_MAP_API_KEY" >> .dev.env
+          echo "SHARE_KAKAO_LINK_KEY=$SHARE_KAKAO_LINK_KEY" >> .dev.env
+        env:
+          BASE_URL: ${{secrets.DEV_BASE_URL}}
+          GOOGLE_MAP_API_KEY: ${{secrets.GOOGLE_MAP_API_KEY}}
+          SHARE_KAKAO_LINK_KEY: ${{secrets.SHARE_KAKAO_LINK_KEY}}
+
+      - name: ✨ 의존성 설치
+        run: rm -rf ./node_modules yarn.lock && yarn cache clean && yarn install
+
+      - name: ✨ 빌드
+        run: yarn build:dev
+
+      - name: ✨ artifact로 빌드파일 다운로드 가능하게 만들기
+        uses: actions/upload-artifact@v3
+        with:
+          name: dev-dist
+          path: frontend/dist
+
+  # deploy:
+  #   needs: build
+  #   runs-on: [self-hosted, dev]
+  #   steps:
+  #     - name: ✨ 기존 폴더 삭제
+  #       working-directory: .
+  #       run: rm -rf dev
+
+  #     - name: ✨ artifact로부터 EC2에 빌드결과물 다운로드
+  #       uses: actions/download-artifact@v3
+  #       with:
+  #         name: dev-dist
+  #         path: dev/dist
+
+  #     - name: ✨ S3 업로드
+  #       run: |
+  #         aws s3 sync dev ${{secrets.S3_FRONT_END_DEV_URI}} --delete
+
+  #     - name: ✨ 캐시 무효화
+  #       run: |
+  #         aws cloudfront create-invalidation \
+  #           --distribution-id ${{ secrets.CLOUDFRONT_CELUVEAT_DEV_ID }} \
+  #           --paths "/*"

backend/src/main/java/com/celuveat/celeb/presentation/CelebController.java

@@ -21,4 +21,10 @@ ResponseEntity<List<CelebQueryResponse>> find() {
         List<CelebQueryResponse> result = celebQueryService.find();
         return ResponseEntity.ok(result);
     }
+
+    @GetMapping("/test")
+    ResponseEntity<Void> test() throws InterruptedException {
+        Thread.sleep(10000);
+        return ResponseEntity.ok().build();
+    }
 }

backend/src/main/resources/logback-spring.xml

@@ -15,7 +15,7 @@
         </root>
     </springProfile>
 
-    <springProfile name="dev, prod">
+    <springProfile name="dev, prod, own">
         <property name="infoLogPath" value="logs/backend/info"/>
         <property name="warnLogPath" value="logs/backend/warn"/>
         <property name="errorLogPath" value="logs/backend/error"/>

frontend/.vscode/settings.json

@@ -1,8 +1,8 @@
 {
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
   },
   "typescript.validate.enable": true,
 

frontend/.webpack/webpack.common.js

@@ -1,18 +1,57 @@
 const path = require('path');
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
-  entry: ['./src/index.tsx'],
+  entry: './src/index.tsx',
+
   output: {
-    path: path.resolve(__dirname, '../dist/'),
     publicPath: '/',
-    filename: '[name].[chunkhash:8].js',
+    path: path.join(__dirname, '../dist'),
+    filename: '[name].[chunkhash].js',
     clean: true,
   },
+
   resolve: {
-    extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        sideEffects: true,
+      },
+      {
+        test: /\.(jpg|jpeg|gif|png|ico)?$/,
+        type: 'asset',
+        generator: {
+          filename: 'images/[name][ext]',
+        },
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)?$/,
+        type: 'asset',
+        generator: {
+          filename: 'fonts/[name][ext]',
+        },
+      },
+      {
+        test: /\.svg$/,
+        use: ['@svgr/webpack'],
+      },
+    ],
   },
 
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './public/index.html',
+      filename: 'index.html',
+    }),
+    new MiniCssExtractPlugin(),
+  ],
+
   devServer: {
     static: {
       directory: path.resolve(__dirname, '../public'),
@@ -23,10 +62,6 @@ module.exports = {
     allowedHosts: 'all',
   },
 
-  optimization: {
-    minimizer: ['...', new CssMinimizerPlugin()],
-  },
-
   performance: {
     hints: false,
     maxEntrypointSize: 512000,

frontend/.webpack/webpack.dev.js

@@ -0,0 +1,42 @@
+const path = require('path');
+const Dotenv = require('dotenv-webpack');
+const { merge } = require('webpack-merge');
+
+const common = require('./webpack.common');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'eval-cheap-module-source-map',
+  cache: {
+    type: 'filesystem',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|ts|tsx)$/i,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        options: {
+          cacheCompression: false,
+          cacheDirectory: true,
+          presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }], '@babel/preset-typescript'],
+          plugins: [
+            ['babel-plugin-styled-components'],
+            [
+              'babel-plugin-root-import',
+              {
+                rootPathPrefix: '~',
+                rootPathSuffix: 'src',
+              },
+            ],
+          ],
+        },
+      },
+    ],
+  },
+  plugins: [
+    new Dotenv({
+      path: path.resolve(__dirname, `../.msw.env`),
+    }),
+  ],
+});