Merge pull request #48 from woowa-techcamp-2021/dev

v0.2.0

.github/workflows/deploy.yml

@@ -0,0 +1,55 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: deploy
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: create env file
+        working-directory: ./server
+        run: |
+          touch .env
+          cat << EOF >> .env
+          ${{ secrets.ENV }}
+
+      - name: build client files
+        working-directory: ./client
+        run: |
+          yarn install --frozen-lockfile
+          yarn build
+
+      - name: zip distributions
+        run: zip -r STORE_2.zip ./client/dist ./server ./appspec.yml ./scripts
+
+      - name: AWS configure credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ap-northeast-2
+
+      - name: upload to S3
+        run: aws s3 cp --region ap-northeast-2 ./STORE_2.zip s3://store-2/public/
+
+      - name: deploy with AWS codeDeploy
+        run: aws deploy create-deployment --application-name store-2 --deployment-config-name CodeDeployDefault.OneAtATime --deployment-group-name store2-codedeploy --s3-location bucket=store-2,bundleType=zip,key=public/STORE_2.zip

.github/workflows/lint-check.yml

@@ -1,7 +1,7 @@
 # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
 # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
-name: Node.js CI
+name: lint check
 
 on:
   pull_request:
@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 16.x]
+        node-version: [14.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

.gitignore

@@ -10,3 +10,8 @@ dist
 
 # yarn
 yarn-error.log
+
+# test snapshots
+__snapshots__
+
+.DS_Store

appspec.yml

@@ -0,0 +1,18 @@
+version: 0.0
+os: linux
+files:
+  - source: /
+    destination: /home/ubuntu/store-2
+    overwrite: yes
+
+permissions:
+  - object: /home/ubuntu
+    pattern: '**'
+    owner: ubuntu
+    group: ubuntu
+
+hooks:
+  AfterInstall:
+    - location: scripts/after-deploy.sh
+      timeout: 180
+      runas: ubuntu

client/.eslintrc.json

@@ -5,15 +5,32 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:@typescript-eslint/recommended-requiring-type-checking",
     "plugin:react/recommended",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:redux-saga/recommended"
   ],
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "prettier"],
+  "plugins": [
+    "@typescript-eslint",
+    "prettier",
+    "testing-library",
+    "redux-saga"
+  ],
   "parserOptions": {
     "project": ["client/tsconfig.json"]
   },
   "rules": {
     "react/prop-types": "off",
-    "@typescript-eslint/no-empty-interface": "off"
-  }
+    "@typescript-eslint/no-empty-interface": "off",
+    "import/no-unresolved": "off"
+  },
+  "ignorePatterns": ["webpack.*.js", "jest.config.js", "setup-tests.ts", "file-transformer.js"],
+  "overrides": [
+    {
+      "files": [
+        "**/__tests__/**/*.[jt]s?(x)",
+        "**/?(*.)+(spec|test).[jt]s?(x)"
+      ],
+      "extends": ["plugin:testing-library/react"]
+    }
+  ]
 }

client/.prettierrc

@@ -4,6 +4,6 @@
   "useTabs": false,
   "tabWidth": 2,
   "trailingComma": "all",
-  "printWidth": 80,
+  "printWidth": 120,
   "arrowParens": "avoid"
 }

client/config/webpack.common.js

@@ -1,7 +1,7 @@
 import path from 'path';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
-import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 
 const __dirname = path.resolve();
 
@@ -10,13 +10,13 @@ export default {
   output: {
     filename: '[name].js',
     path: path.resolve(__dirname, 'dist'),
+    clean: true,
+    assetModuleFilename: 'assets/[hash].[ext]?[query]',
   },
   resolve: {
     modules: ['node_modules'],
     extensions: ['.js', '.ts', '.tsx'],
-    alias: {
-      '*': path.resolve(__dirname, 'src'),
-    },
+    plugins: [new TsconfigPathsPlugin()],
   },
   module: {
     rules: [
@@ -51,9 +51,8 @@ export default {
   plugins: [
     new HtmlWebpackPlugin({
       template: './public/index.html',
-      favicon: './public/favicon.ico',
+      favicon: './public/favicon.png',
     }),
-    new CleanWebpackPlugin(),
     new MiniCssExtractPlugin({
       filename: '[name].css',
     }),

client/config/webpack.dev.js

@@ -9,7 +9,7 @@ export default merge(common, {
   module: {
     rules: [
       {
-        test: /\.s[ac]ss|css$/,
+        test: /\.css$/,
         use: ['style-loader', 'css-loader'],
         exclude: /node_modules/,
       },

client/config/webpack.prod.js

@@ -9,7 +9,7 @@ export default merge(common, {
   module: {
     rules: [
       {
-        test: /\.s[ac]ss|css$/,
+        test: /\.css$/,
         use: [MiniCssExtractPlugin.loader, 'css-loader'],
         exclude: /node_modules/,
       },

client/file-transformer.js

@@ -0,0 +1,7 @@
+const path = require('path');
+
+module.exports = {
+  process(src, filename, config, options) {
+    return 'module.exports = ' + JSON.stringify(path.basename(filename || '')) + ';';
+  },
+};

client/jest.config.js

@@ -0,0 +1,15 @@
+export default {
+  transform: {
+    '^.+\\.(js|jsx)?$': 'babel-jest',
+    '^.+\\.(ts|tsx)?$': 'ts-jest',
+  },
+  testEnvironment: 'jsdom',
+  testMatch: ['<rootDir>/**/*.test.(js|jsx|ts|tsx)'],
+  setupFilesAfterEnv: ['<rootDir>/setup-tests.ts'],
+  transformIgnorePatterns: ['<rootDir>/node_modules/'],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/file-transformer.js',
+  },
+  modulePaths: ['<rootDir>/src'],
+};

client/package.json

@@ -17,7 +17,8 @@
     "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx --parser-options=project:'./tsconfig.json'",
     "lint:fix": "eslint ./src --ext .js,.jsx,.ts,.tsx --parser-options=project:'./tsconfig.json' --fix",
     "start": "webpack serve --config config/webpack.dev.js",
-    "build": "NODE_ENV=production webpack --config config/webpack.prod.js --progress"
+    "build": "NODE_ENV=production webpack --config config/webpack.prod.js --progress",
+    "test": "jest --config ./jest.config.js"
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.6.1",
@@ -27,15 +28,20 @@
     "react-redux": "^7.2.4",
     "redux": "^4.1.1",
     "redux-saga": "^1.1.3",
+    "redux-saga-test-plan": "^4.0.3",
     "sanitize-html": "^2.4.0",
-    "styled-components": "^5.3.0"
+    "styled-components": "^5.3.0",
+    "styled-reset": "^4.3.4"
   },
   "devDependencies": {
     "@babel/cli": "^7.14.8",
     "@babel/core": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.15.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@types/jest": "^27.0.0",
     "@types/react": "^17.0.17",
     "@types/react-dom": "^17.0.9",
     "@types/react-redux": "^7.1.18",
@@ -44,7 +50,6 @@
     "@typescript-eslint/parser": "^4.29.1",
     "babel-cli": "^6.26.0",
     "babel-loader": "^8.2.2",
-    "clean-webpack-plugin": "^4.0.0-alpha.0",
     "core-js-pure": "^3.16.1",
     "css-loader": "^6.2.0",
     "css-minimizer-webpack-plugin": "^3.0.2",
@@ -56,12 +61,17 @@
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-redux-saga": "^1.2.1",
+    "eslint-plugin-testing-library": "^4.10.1",
     "html-webpack-plugin": "^5.3.2",
+    "jest": "^27.0.6",
     "mini-css-extract-plugin": "^2.2.0",
     "prettier": "^2.3.2",
     "style-loader": "^3.2.1",
     "terser-webpack-plugin": "^5.1.4",
+    "ts-jest": "^27.0.4",
     "ts-loader": "^9.2.5",
+    "tsconfig-paths-webpack-plugin": "^3.5.1",
     "typescript": "^4.3.5",
     "webpack": "^5.49.0",
     "webpack-cli": "^4.7.2",

client/setup-tests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

client/src/App.tsx

@@ -1,16 +1,23 @@
 import React from 'react';
-import { BrowserRouter, Switch, Route } from './lib/router';
-import { MainPage, UserPage, NotFoundPage } from './pages';
+import { BrowserRouter, Switch, Route } from 'lib/router';
+import { MainPage, UserPage, NotFoundPage, SagaCounterPage, TestPage, SagaAxiosPage, LoginPage } from 'pages';
+import Theme from './styles/theme';
 
 const App: React.FC = () => {
   return (
-    <BrowserRouter>
-      <Switch>
-        <Route exact path="/" component={MainPage} />
-        <Route exact path="/user" component={UserPage} />
-        <Route path="" component={NotFoundPage} />
-      </Switch>
-    </BrowserRouter>
+    <Theme>
+      <BrowserRouter>
+        <Switch>
+          <Route exact path="/" component={MainPage} />
+          <Route exact path="/login" component={LoginPage} />
+          <Route exact path="/user" component={UserPage} />
+          <Route exact path="/test" component={TestPage} />
+          <Route exact path="/counter" component={SagaCounterPage} />
+          <Route exact path="/axios" component={SagaAxiosPage} />
+          <Route path="" component={NotFoundPage} />
+        </Switch>
+      </BrowserRouter>
+    </Theme>
   );
 };
 

client/src/components/auth/login-button.tsx

@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+
+interface Inf {
+  login?: boolean;
+  github?: boolean;
+  signup?: boolean;
+}
+
+const LoginButton = styled.button<Inf>`
+  ${({ theme }) => theme.mobile} {
+    height: 66px;
+    font-size: 20px;
+  }
+  ${({ theme }) => theme.tablet} {
+    width: 380px;
+    height: 75px;
+    font-size: 23px;
+  }
+  ${({ theme }) => theme.laptop} {
+    width: 400px;
+    height: 85px;
+    font-size: 26px;
+  }
+  &:not(:first-child) {
+    margin-top: 10px;
+  }
+  &:hover {
+    opacity: 1;
+    font-weight: 600;
+    transform: translateY(-5px);
+  }
+  cursor: pointer;
+  border: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${({ theme }) => theme.colorWhite};
+  font-family: ${({ theme }) => theme.fontEuljiro};
+  opacity: 0.9;
+  background: ${props => props.login && props.theme.colorLine};
+  background: ${props => props.github && props.theme.colorGithub};
+  background: ${props => props.signup && props.theme.colorSignup};
+`;
+
+export default LoginButton;