Merge pull request #92 from boostcampwm-2022/dev

[CLIENT & Server] Release 1.0

.github/workflows/client.yml

@@ -1 +1,58 @@
 # client 워크플로우 작성 공간
+on:
+  pull_request:
+    branches:
+      - main
+    paths:
+      - "client/**"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    env:
+      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_CLIENT_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_CLIENT_SECRET_ACCESS_KEY }}
+      AWS_REGION: "ap-northeast-2"
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Cache node modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn-lock') }}
+          restore-keys: |
+            ${{ runner.OS }}-build-
+            ${{ runner.OS }}-
+
+      - name: Install Dependencies
+        run: yarn install
+
+      - name: Build client
+        run: yarn client build
+        env:
+          PUBLIC_URL: ${{ secrets.ENV_CLIENT_PUBLIC_URL }}
+          API_URL: ${{ secrets.ENV_CLIENT_API_URL }}
+          CI: ""
+
+      - name: Deploy
+        uses: jakejarvis/s3-sync-action@master
+        with:
+          args: --acl public-read --follow-symlinks --delete
+        env:
+          AWS_S3_BUCKET: ${{ secrets.AWS_CLIENT_S3_BUCKET }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_CLIENT_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_CLIENT_SECRET_ACCESS_KEY }}
+          AWS_REGION: 'ap-southeast-2'
+          SOURCE_DIR: './client/build'
+
+      - name: Invalidation
+        uses: awact/cloudfront-action@master
+        env:
+          SOURCE_PATH: '/*'
+          AWS_REGION: 'ap-southeast-2'
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_CLIENT_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_CLIENT_SECRET_ACCESS_KEY }}
+          DISTRIBUTION_ID: ${{ secrets.AWS_CLIENT_DISTRIBUTION_ID }}

.github/workflows/server.yml

@@ -1 +1 @@
-# server workflow 작성 공간
+# socket workflow 작성 공간

.github/workflows/server_dev_api.yml

@@ -0,0 +1,52 @@
+name: Backend Api Dev Server
+
+on:
+  pull_request:
+    branches:
+      - dev-be
+    types:
+      - closed
+
+jobs:
+  noti_slack:
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Set up JDK 11
+        uses: actions/setup-java@v2
+        with:
+          java-version: '11'
+          distribution: 'adopt'
+
+      - name: action-slack
+        uses: 8398a7/action-slack@v3
+        with:
+          status: ${{ job.status }}
+          author_name: Backend dev PR merge!
+          fields: repo,commit,message,author
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_ASUMI_URL }} # required
+        if: always() # Pick up events even if the job fails or is canceled.
+  pull_nCloud_api_server:
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: execute remot ssh
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.NCLOUD_REMOTE_IP }}
+          username: ${{ secrets.NCLOUD_REMOTE_SSH_ID }}
+          password: ${{ secrets.NCLOUD_REMOTE_SSH_PASSWORD }}
+          port: ${{ secrets.NCLOUD_REMOTE_SSH_PORT }}
+          script: |
+            whoami
+            cd web24-Asnity
+            git stash
+            git pull origin dev-be
+            ls -al
+            export NVM_DIR=~/.nvm
+            source ~/.nvm/nvm.sh
+            yarn install
+            pm2 restart asnity-api

.gitignore

@@ -1,4 +1,8 @@
 .idea/
 node_modules/
 server/dist
-server/node_modules/
+server/node_modules/
+server/config/
+.DS_Store
+client/node_modules/
+yarn-error.log

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "endOfLine": "lf",
+  "endOfLine": "auto",
   "tabWidth": 2,
   "semi": true,
   "singleQuote": true,

client/.eslintrc

@@ -5,10 +5,10 @@
     "jest": true,
     "commonjs": true
   },
-  "extends": [
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended"
-  ],
+  "globals": {
+    "JSX": true
+  },
+  "extends": ["plugin:react/recommended", "plugin:react-hooks/recommended"],
   "rules": {
     "react/prop-types": "off",
     "no-param-reassign": "off",
@@ -28,4 +28,4 @@
     "react/no-unknown-property": "off",
     "no-duplicate-imports": "off"
   }
-}
+}

client/config/webpack.analysis.ts

@@ -0,0 +1,47 @@
+import type { Configuration } from 'webpack';
+
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import { merge } from 'webpack-merge';
+
+import common from './webpack.common';
+
+const config: Configuration = {
+  devtool: 'inline-source-map',
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin(),
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      reportFilename: 'report.html',
+      openAnalyzer: false,
+    }),
+  ],
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new CssMinimizerPlugin(),
+      new TerserPlugin({
+        terserOptions: {
+          format: {
+            comments: false,
+          },
+        },
+        extractComments: false,
+      }),
+    ],
+  },
+};
+
+export default merge(common, config);

client/config/webpack.common.ts

@@ -3,12 +3,19 @@ import type { Configuration } from 'webpack';
 import path from 'path';
 
 import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+import dotenv from 'dotenv';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 import webpack from 'webpack';
 
 const isDevelopment = process.env.NODE_ENV === 'development';
 
+const envPath = isDevelopment
+  ? path.resolve(__dirname, '..', 'env/.env.dev')
+  : path.resolve(__dirname, '..', 'env/.env.prod');
+
+dotenv.config({ path: envPath });
+
 function isTruthy<T>(
   value: T,
 ): value is Exclude<T, false | null | undefined | '' | 0> {
@@ -47,13 +54,11 @@ const config: Configuration = {
   plugins: [
     new HtmlWebpackPlugin({
       template: '../public/index.html',
+      templateParameters: {
+        PUBLIC_URL: process.env.PUBLIC_URL,
+      },
     }),
-    new webpack.DefinePlugin({
-      SIGN_IN_URL: JSON.stringify(
-        'https://github.com/login/oauth/authorize?client_id=940294fcbf88a773fdc1',
-      ),
-      BASE_URL: JSON.stringify('http://localhost:8081'),
-    }),
+    new webpack.EnvironmentPlugin(['API_URL', 'PUBLIC_URL']),
     isDevelopment && new ReactRefreshWebpackPlugin(),
   ].filter(isTruthy),
 };

client/config/webpack.dev.ts

@@ -13,7 +13,7 @@ const config: Configuration = {
     rules: [
       {
         test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
+        use: ['style-loader', 'css-loader', 'postcss-loader'],
         exclude: /node_modules/,
       },
     ],

client/config/webpack.prod.ts

@@ -2,34 +2,37 @@ import type { Configuration } from 'webpack';
 
 import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import TerserPlugin from 'terser-webpack-plugin';
 import { merge } from 'webpack-merge';
 
 import common from './webpack.common';
 
 const config: Configuration = {
-  devtool: 'source-map',
+  devtool: 'inline-source-map',
   mode: 'production',
   module: {
     rules: [
       {
         test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
         exclude: /node_modules/,
       },
     ],
   },
-  plugins: [
-    new MiniCssExtractPlugin(),
-    new BundleAnalyzerPlugin({
-      analyzerMode: 'static',
-      reportFilename: 'report.html',
-      openAnalyzer: false,
-    }),
-  ],
+  plugins: [new MiniCssExtractPlugin()],
   optimization: {
     minimize: true,
-    minimizer: [new CssMinimizerPlugin()],
+    minimizer: [
+      new CssMinimizerPlugin(),
+      new TerserPlugin({
+        terserOptions: {
+          format: {
+            comments: false,
+          },
+        },
+        extractComments: false,
+      }),
+    ],
   },
 };
 

client/package.json

@@ -6,17 +6,20 @@
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack serve --config ./config/webpack.dev.ts --progress",
     "build": "cross-env NODE_ENV=production webpack --config ./config/webpack.prod.ts --progress",
-    "deploy": "aws s3 sync ./build s3://asnity --profile=mjsdo2",
+    "analysis": "cross-env NODE_ENV=production webpack --config ./config/webpack.analysis.ts --progress",
     "test": "jest"
   },
   "dependencies": {
+    "@heroicons/react": "^2.0.13",
     "@tanstack/react-query": "^4.16.1",
     "axios": "^1.1.3",
     "classnames": "^2.3.2",
-    "common": "1.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.39.4",
     "react-router-dom": "^6.4.3",
+    "react-toastify": "^9.1.1",
+    "shared": "1.0.0",
     "tailwindcss": "^3.2.4",
     "zustand": "^4.1.4"
   },
@@ -27,6 +30,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.9",
+    "@tanstack/react-query-devtools": "^4.16.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/jest": "^29.2.2",
@@ -35,12 +39,14 @@
     "@types/webpack-bundle-analyzer": "^4.6.0",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^5.42.1",
+    "autoprefixer": "^10.4.13",
     "babel-jest": "^29.3.1",
     "babel-loader": "^9.1.0",
     "core-js": "^3.26.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^4.2.2",
+    "dotenv": "^16.0.3",
     "eslint": "8.22",
     "eslint-config-naver": "^2.1.0",
     "eslint-config-prettier": "^8.5.0",
@@ -53,6 +59,8 @@
     "jest-environment-jsdom": "^29.3.1",
     "mini-css-extract-plugin": "^2.6.1",
     "msw": "^0.48.2",
+    "postcss": "^8.4.19",
+    "postcss-loader": "^7.0.1",
     "prettier": "^2.7.1",
     "react-refresh": "^0.14.0",
     "style-loader": "^3.3.1",

client/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

client/public/index.html

@@ -6,6 +6,7 @@
       name="viewport"
       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
     />
+    <link rel="icon" href="<%= PUBLIC_URL %>/favicon.ico" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Asnity</title>
   </head>