[#5209] [WS] 데이터 분석에 새로운 기능(산점도 행렬, 차트 크게 보기 등)을 추가

.eslintrc

@@ -1,20 +1,32 @@
 {
-    "plugins": ["prettier"],
-    "extends": ["plugin:prettier/recommended"],
+    "plugins": ["react", "prettier", "react-hooks"],
+    "extends": [
+        "plugin:prettier/recommended",
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime"
+    ],
     "env": {
         "es6": true,
         "browser": true,
         "jquery": true
     },
-    "parser": "babel-eslint",
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    },
+    "parser": "@babel/eslint-parser",
     "parserOptions": {
-        "ecmaVersion": 2017,
+        "ecmaVersion": 11,
         "sourceType": "module",
         "ecmaFeatures": {
             "jsx": true
-        }
+        },
+        "requireConfigFile": false
     },
     "rules": {
+        "no-unused-vars": "warn",
         "prefer-const": "warn",
         "no-var": "warn",
         "eqeqeq": 0,
@@ -72,7 +84,10 @@
         "camelcase": ["warn", { "properties": "never" }],
         "new-cap": ["warn", { "capIsNewExceptionPattern": "^Entry." }],
         "curly": "warn",
-        "keyword-spacing": "warn"
+        "keyword-spacing": "warn",
+        "react-hooks/rules-of-hooks": "error",
+        "react-hooks/exhaustive-deps": "warn",
+        "react/prop-types": "off"
     },
     "globals": {
         "$": true,

.storybook/.babelrc

@@ -1,10 +1,19 @@
 {
     "plugins": [
-        "@babel/plugin-transform-runtime",
+        [
+            "@babel/plugin-transform-runtime",
+            {
+                "useESModules": true
+            }
+        ],
+        // "@babel/plugin-transform-runtime",,
         "@babel/plugin-transform-regenerator",
         "@babel/plugin-syntax-dynamic-import",
         "@babel/plugin-transform-object-assign",
         "@babel/plugin-proposal-class-properties",
+        "@babel/plugin-transform-modules-commonjs",
+        "@babel/plugin-proposal-object-rest-spread",
+        "@babel/plugin-proposal-private-methods",
         [
             "module-resolver",
             {
@@ -32,6 +41,6 @@
                 }
             }
         ],
-        "@babel/react"
+        ["@babel/react", { "runtime": "automatic" }]
     ]
 }

jsconfig.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "target": "ES6",
+        "target": "ES2022",
         "baseUrl": "./",
         "paths": {
             "@hoc/*": ["src/hoc/*"],
@@ -10,7 +10,9 @@
             "@components/*": ["src/components/*"],
             "@utils/*": ["src/utils/*"],
             "@reducers/*": ["src/reducers/*"],
-            "@contexts/*": ["src/contexts/*"]
+            "@contexts/*": ["src/contexts/*"],
+            "@selectors/*": ["src/selectors/*"],
+            "@constants/*": ["src/constants/*"]
         }
     },
     "exclude": ["node_modules", "**/node_modules/*", "dist", "component"]

package.json

@@ -32,29 +32,31 @@
         "prepublish": "npm run build"
     },
     "devDependencies": {
-        "@babel/cli": "^7.8.3",
-        "@babel/core": "^7.12.3",
-        "@babel/plugin-proposal-class-properties": "^7.3.0",
-        "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
-        "@babel/plugin-proposal-private-methods": "^7.12.1",
-        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-        "@babel/plugin-transform-modules-commonjs": "^7.12.1",
-        "@babel/plugin-transform-object-assign": "^7.2.0",
-        "@babel/plugin-transform-regenerator": "^7.0.0",
-        "@babel/plugin-transform-runtime": "^7.2.0",
-        "@babel/preset-env": "^7.3.1",
-        "@babel/preset-react": "^7.0.0",
-        "@babel/register": "^7.9.0",
+        "@babel/cli": "^7.19.3",
+        "@babel/core": "^7.20.5",
+        "@babel/eslint-parser": "^7.19.1",
+        "@babel/eslint-plugin": "^7.19.1",
+        "@babel/parser": "^7.20.5",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
+        "@babel/plugin-proposal-private-methods": "^7.18.6",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-transform-modules-commonjs": "^7.19.6",
+        "@babel/plugin-transform-object-assign": "^7.18.6",
+        "@babel/plugin-transform-regenerator": "^7.20.5",
+        "@babel/plugin-transform-runtime": "^7.19.6",
+        "@babel/preset-env": "^7.20.2",
+        "@babel/preset-react": "^7.18.6",
+        "@babel/register": "^7.18.9",
         "@storybook/addon-actions": "^3.4.10",
         "@storybook/addon-knobs": "^3.4.10",
         "@storybook/addon-links": "^3.4.10",
         "@storybook/react": "^3.4.10",
         "autoprefixer": "7.1.6",
         "babel-core": "^7.0.0-bridge.0",
-        "babel-eslint": "^10.1.0",
-        "babel-jest": "^26.0.1",
+        "babel-jest": "^29.3.1",
         "babel-loader": "^8.1.0",
-        "babel-plugin-module-resolver": "^4.0.0",
+        "babel-plugin-module-resolver": "^4.1.0",
         "case-sensitive-paths-webpack-plugin": "2.1.1",
         "chalk": "1.1.3",
         "cross-env": "^6.0.3",
@@ -63,11 +65,15 @@
         "dotenv-expand": "4.2.0",
         "enzyme": "^3.4.2",
         "enzyme-adapter-react-16": "^1.2.0",
-        "eslint": "^7.14.0",
-        "eslint-config-prettier": "^6.15.0",
-        "eslint-config-react-app": "^6.0.0",
+        "eslint": "^8.30.0",
+        "eslint-config-next": "^13.0.6",
+        "eslint-config-prettier": "^8.5.0",
+        "eslint-config-react-app": "^7.0.1",
         "eslint-loader": "^4.0.2",
-        "eslint-plugin-prettier": "^3.1.4",
+        "eslint-plugin-jsx-a11y": "^6.6.1",
+        "eslint-plugin-prettier": "^4.2.1",
+        "eslint-plugin-react": "^7.31.11",
+        "eslint-plugin-react-hooks": "^5.0.0-next-4dda96a40-20221213",
         "events": "^3.0.0",
         "extract-text-webpack-plugin": "3.0.2",
         "file-loader": "1.1.5",
@@ -82,8 +88,8 @@
         "postcss-flexbugs-fixes": "3.2.0",
         "postcss-loader": "^3.0.0",
         "postcss-prefixer": "^2.1.2",
-        "prettier": "^1.19.1",
-        "prettier-eslint": "^12.0.0",
+        "prettier": "^2.8.1",
+        "prettier-eslint": "^15.0.1",
         "promise": "8.0.1",
         "raf": "3.4.0",
         "react": "^17.0.1",
@@ -97,6 +103,7 @@
         "recompose": "^0.30.0",
         "redux": "^4.0.0",
         "redux-thunk": "^2.3.0",
+        "regenerator-runtime": "^0.13.11",
         "resolve": "1.6.0",
         "rimraf": "^2.6.2",
         "safe-umd-webpack-plugin": "^4.0.0",
@@ -120,7 +127,7 @@
         "@entrylabs/postcss-url": "^8.0.1",
         "@toast-ui/react-grid": "^4.10.1",
         "axios": "^0.18.0",
-        "billboard.js": "^1.11.1",
+        "billboard.js": "^3.6.3",
         "chroma-js": "^1.4.0",
         "classnames": "^2.2.6",
         "clipboard": "^2.0.11",

src/App.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { connect } from 'react-redux';
 
 class App extends Component {