Merge pull request #2 from boostcampwm-2022/client-project-settings

서버, 클라이언트 공통 eslint, prettier, tsconfig 설정 및 클라이언트 패키지 설치

.eslintrc

@@ -0,0 +1,34 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "eslint:recommended",
+    "plugin:import/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "naver",
+    "plugin:prettier/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-unused-vars": "off",
+    "no-console": "off",
+    "no-param-reassign": "off",
+    "import/prefer-default-export": "off",
+    "import/order": [
+      "error",
+      {
+        "groups": ["type", "builtin", "external", "object", "internal"],
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        },
+        "newlines-between": "always"
+      }
+    ],
+    "@typescript-eslint/no-var-requires": "off",
+    "no-duplicate-imports": "off"
+  }
+}

.github/ISSUE_TEMPLATE/client.md

@@ -4,17 +4,8 @@ about: Suggest an idea for this project
 title: '[CLIENT] {TITLE}'
 labels: 🌈 client, ✨ feature
 assignees: mjsdo, leegwae
-
 ---
 
-## Issues
-- #이슈번호
-
-<!-- 어떤 이슈와 관련된 PR인지 적어주세요! 이슈와 PR을 연결하려면 반드시 적어야 합니다. -->
-<!-- 필요하다면 여러 이슈를 적는 것도 가능할지도? -->
-<!-- - #IssueNumber 로 타이핑하면 자동완성되는 문장을 사용해주세요. -->
-<!-- 예시) - #1 -->
-
 ## 🤷‍♂️ Description
 
 <!-- 구현하고자 하는 기능에 대해 작성해 주세요. -->

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "endOfLine": "lf",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80
+}

client/.babelrc.js

@@ -0,0 +1,19 @@
+const isDevelopment = process.env.NODE_ENV === 'development';
+
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: '> 1%, not dead',
+        useBuiltIns: 'usage',
+        corejs: { version: '3' },
+      },
+    ],
+    ['@babel/preset-react'],
+    '@babel/preset-typescript',
+  ],
+  // webpack js로 세팅하면 빈 배열 넣어도 되는데, ts로 세팅하면 빈 배열을 허용하지 않음.
+  // Error: .plugins[0] must include an object
+  plugins: [[isDevelopment ? require.resolve('react-refresh/babel') : {}]],
+};

client/.eslintrc

@@ -0,0 +1,31 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "jest": true,
+    "commonjs": true
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "rules": {
+    "react/prop-types": "off",
+    "no-param-reassign": "off",
+    "import/prefer-default-export": "off",
+    "import/order": [
+      "error",
+      {
+        "groups": ["type", "builtin", "external", "object", "internal"],
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        },
+        "newlines-between": "always"
+      }
+    ],
+    "@typescript-eslint/no-var-requires": "off",
+    "react/no-unknown-property": "off",
+    "no-duplicate-imports": "off"
+  }
+}

client/.gitignore

@@ -0,0 +1,4 @@
+env/*
+build/*
+dist/*
+.idea/

client/config/webpack.common.ts

@@ -0,0 +1,61 @@
+import type { Configuration } from 'webpack';
+
+import path from 'path';
+
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+import webpack from 'webpack';
+
+const isDevelopment = process.env.NODE_ENV === 'development';
+
+function isTruthy<T>(
+  value: T,
+): value is Exclude<T, false | null | undefined | '' | 0> {
+  return Boolean(value);
+}
+
+const config: Configuration = {
+  context: __dirname,
+  entry: '../src/index.tsx',
+  output: {
+    filename: '[name].js',
+    path: path.resolve(__dirname, '../build'),
+    clean: true,
+    assetModuleFilename: 'assets/[hash][ext][query]',
+    publicPath: '/',
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.jsx', '.js'],
+    plugins: [new TsconfigPathsPlugin()],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.[tj]sx?$/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+      {
+        test: /\.(png|svg|jpg|jpeg|gif|ico|woff|woff2|eot|ttf|otf)$/i,
+        type: 'asset/resource',
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: '../public/index.html',
+    }),
+    new webpack.DefinePlugin({
+      SIGN_IN_URL: JSON.stringify(
+        'https://github.com/login/oauth/authorize?client_id=940294fcbf88a773fdc1',
+      ),
+      BASE_URL: JSON.stringify('http://localhost:8081'),
+    }),
+    isDevelopment && new ReactRefreshWebpackPlugin(),
+  ].filter(isTruthy),
+};
+
+export default config;

client/config/webpack.dev.ts

@@ -0,0 +1,28 @@
+import 'webpack-dev-server';
+
+import type { Configuration } from 'webpack';
+
+import { merge } from 'webpack-merge';
+
+import common from './webpack.common';
+
+const config: Configuration = {
+  devtool: 'inline-source-map',
+  mode: 'development',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  devServer: {
+    hot: true,
+    open: true,
+    historyApiFallback: true,
+  },
+};
+
+export default merge(common, config);

client/config/webpack.prod.ts

@@ -0,0 +1,36 @@
+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 { merge } from 'webpack-merge';
+
+import common from './webpack.common';
+
+const config: Configuration = {
+  devtool: 'source-map',
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin(),
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      reportFilename: 'report.html',
+      openAnalyzer: false,
+    }),
+  ],
+  optimization: {
+    minimize: true,
+    minimizer: [new CssMinimizerPlugin()],
+  },
+};
+
+export default merge(common, config);

client/jest.config.ts

@@ -0,0 +1,16 @@
+import type { Config } from 'jest';
+
+const config: Config = {
+  roots: ['<rootDir>'],
+  testPathIgnorePatterns: ['<rootDir>/node_modules'],
+  testEnvironment: 'jsdom',
+  // moduleNameMapper: {
+  //   '\\.(css|less|svg)$': 'identity-obj-proxy',
+  // },
+  setupFilesAfterEnv: ['<rootDir>/src/setupTest.ts'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+};
+
+module.exports = config;

client/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "client",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "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",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@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-router-dom": "^6.4.3",
+    "tailwindcss": "^3.2.4",
+    "zustand": "^4.1.4"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.9",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.2.2",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "@types/webpack-bundle-analyzer": "^4.6.0",
+    "@typescript-eslint/eslint-plugin": "^5.42.1",
+    "@typescript-eslint/parser": "^5.42.1",
+    "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",
+    "eslint": "8.22",
+    "eslint-config-naver": "^2.1.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "html-webpack-plugin": "^5.5.0",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
+    "mini-css-extract-plugin": "^2.6.1",
+    "msw": "^0.48.2",
+    "prettier": "^2.7.1",
+    "react-refresh": "^0.14.0",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.6",
+    "ts-jest": "^29.0.3",
+    "ts-node": "^10.9.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^4.8.4",
+    "webpack": "^5.75.0",
+    "webpack-bundle-analyzer": "^4.7.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-merge": "^5.8.0"
+  },
+  "msw": {
+    "workerDirectory": "public"
+  }
+}

client/public/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Asnity</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>