From 630bc44fdd275138b027fa51ff6e5441f1ac60e7 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Mon, 11 Mar 2024 13:14:14 +0900 Subject: [PATCH 01/84] =?UTF-8?q?feat:=20=EC=B4=88=EA=B8=B0=20=ED=99=98?= =?UTF-8?q?=EA=B2=BD=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.cjs | 21 ++++++++++++++ .gitignore | 24 ++++++++++++++++ README.md | 8 ++++++ index.html | 13 +++++++++ package.json | 26 +++++++++++++++++ public/vite.svg | 1 + src/App.css | 42 +++++++++++++++++++++++++++ src/App.jsx | 35 +++++++++++++++++++++++ src/assets/react.svg | 1 + src/index.css | 68 ++++++++++++++++++++++++++++++++++++++++++++ src/main.jsx | 10 +++++++ vite.config.js | 7 +++++ 12 files changed, 256 insertions(+) create mode 100644 .eslintrc.cjs create mode 100644 .gitignore create mode 100644 index.html create mode 100644 package.json create mode 100644 public/vite.svg create mode 100644 src/App.css create mode 100644 src/App.jsx create mode 100644 src/assets/react.svg create mode 100644 src/index.css create mode 100644 src/main.jsx create mode 100644 vite.config.js diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 0000000..3e212e1 --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,21 @@ +module.exports = { + root: true, + env: { browser: true, es2020: true }, + extends: [ + 'eslint:recommended', + 'plugin:react/recommended', + 'plugin:react/jsx-runtime', + 'plugin:react-hooks/recommended', + ], + ignorePatterns: ['dist', '.eslintrc.cjs'], + parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, + settings: { react: { version: '18.2' } }, + plugins: ['react-refresh'], + rules: { + 'react/jsx-no-target-blank': 'off', + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/README.md b/README.md index e69de29..f768e33 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,8 @@ +# React + Vite + +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. + +Currently, two official plugins are available: + +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh diff --git a/index.html b/index.html new file mode 100644 index 0000000..0c589ec --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + + +
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..317e66d --- /dev/null +++ b/package.json @@ -0,0 +1,26 @@ +{ + "name": "invest-sns-react", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", + "preview": "vite preview" + }, + "dependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.2.56", + "@types/react-dom": "^18.2.19", + "@vitejs/plugin-react": "^4.2.1", + "eslint": "^8.56.0", + "eslint-plugin-react": "^7.33.2", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.4.5", + "vite": "^5.1.4" + } +} diff --git a/public/vite.svg b/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..b9d355d --- /dev/null +++ b/src/App.css @@ -0,0 +1,42 @@ +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafbaa); +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: no-preference) { + a:nth-of-type(2) .logo { + animation: logo-spin infinite 20s linear; + } +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 0000000..b8b8473 --- /dev/null +++ b/src/App.jsx @@ -0,0 +1,35 @@ +import { useState } from 'react' +import reactLogo from './assets/react.svg' +import viteLogo from '/vite.svg' +import './App.css' + +function App() { + const [count, setCount] = useState(0) + + return ( + <> +
+ + Vite logo + + + React logo + +
+

Vite + React

+
+ +

+ Edit src/App.jsx and save to test HMR +

+
+

+ Click on the Vite and React logos to learn more +

+ + ) +} + +export default App diff --git a/src/assets/react.svg b/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..6119ad9 --- /dev/null +++ b/src/index.css @@ -0,0 +1,68 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/src/main.jsx b/src/main.jsx new file mode 100644 index 0000000..54b39dd --- /dev/null +++ b/src/main.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App.jsx' +import './index.css' + +ReactDOM.createRoot(document.getElementById('root')).render( + + + , +) diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..5a33944 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], +}) From 8f63a1327d9f120f82f1adb4ba0b85e9c68a85c8 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Mon, 11 Mar 2024 13:17:06 +0900 Subject: [PATCH 02/84] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=EC=A0=9D?= =?UTF-8?q?=ED=8A=B8=20=ED=8F=B4=EB=8D=94=20=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/.gitkeep | 0 src/assets/react.svg | 1 - src/components/.gitkeep | 0 src/lib/.gitkeep | 0 src/routes/.gitkeep | 0 src/store/.gitkeep | 0 6 files changed, 1 deletion(-) create mode 100644 src/assets/.gitkeep delete mode 100644 src/assets/react.svg create mode 100644 src/components/.gitkeep create mode 100644 src/lib/.gitkeep create mode 100644 src/routes/.gitkeep create mode 100644 src/store/.gitkeep diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/.gitkeep b/src/components/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/.gitkeep b/src/lib/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/routes/.gitkeep b/src/routes/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/store/.gitkeep b/src/store/.gitkeep new file mode 100644 index 0000000..e69de29 From 7ee2c77cc497e9a40b7b67d0f55c2d1374cbe199 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Mon, 11 Mar 2024 14:09:49 +0900 Subject: [PATCH 03/84] =?UTF-8?q?feat:=20=ED=99=94=EB=A9=B4=20=EB=9D=BC?= =?UTF-8?q?=EC=9A=B0=ED=8C=85=20=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.cjs | 2 + package-lock.json | 4203 ++++++++++++++++++++++++++++ package.json | 3 +- src/App.jsx | 32 +- src/lib/{ => apis}/.gitkeep | 0 src/lib/hooks/.gitkeep | 0 src/router/main-router.jsx | 52 + src/routes/Feed/page.jsx | 7 + src/routes/HotStock/page.jsx | 7 + src/routes/InvestStrategy/page.jsx | 7 + src/routes/MarketInfo/page.jsx | 7 + src/routes/MyPage/page.jsx | 7 + src/routes/Trading/page.jsx | 7 + src/routes/mainLayout.jsx | 10 + 14 files changed, 4316 insertions(+), 28 deletions(-) create mode 100644 package-lock.json rename src/lib/{ => apis}/.gitkeep (100%) create mode 100644 src/lib/hooks/.gitkeep create mode 100644 src/router/main-router.jsx create mode 100644 src/routes/Feed/page.jsx create mode 100644 src/routes/HotStock/page.jsx create mode 100644 src/routes/InvestStrategy/page.jsx create mode 100644 src/routes/MarketInfo/page.jsx create mode 100644 src/routes/MyPage/page.jsx create mode 100644 src/routes/Trading/page.jsx create mode 100644 src/routes/mainLayout.jsx diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 3e212e1..774281b 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -17,5 +17,7 @@ module.exports = { 'warn', { allowConstantExport: true }, ], + 'no-unused-vars': 'off', + "react/prop-types": "off", }, } diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..131abb0 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,4203 @@ +{ + "name": "invest-sns-react", + "version": "0.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "invest-sns-react", + "version": "0.0.0", + "dependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-router-dom": "^6.22.3" + }, + "devDependencies": { + "@types/react": "^18.2.56", + "@types/react-dom": "^18.2.19", + "@vitejs/plugin-react": "^4.2.1", + "eslint": "^8.56.0", + "eslint-plugin-react": "^7.33.2", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.4.5", + "vite": "^5.1.4" + } + }, + "node_modules/@aashutoshrathi/word-wrap": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz", + "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@ampproject/remapping": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz", + "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==", + "dev": true, + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.24" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/code-frame": { + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz", + "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==", + "dev": true, + "dependencies": { + "@babel/highlight": "^7.23.4", + "chalk": "^2.4.2" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/compat-data": { + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz", + "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/core": { + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.0.tgz", + "integrity": "sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==", + "dev": true, + "dependencies": { + "@ampproject/remapping": "^2.2.0", + "@babel/code-frame": "^7.23.5", + "@babel/generator": "^7.23.6", + "@babel/helper-compilation-targets": "^7.23.6", + "@babel/helper-module-transforms": "^7.23.3", + "@babel/helpers": "^7.24.0", + "@babel/parser": "^7.24.0", + "@babel/template": "^7.24.0", + "@babel/traverse": "^7.24.0", + "@babel/types": "^7.24.0", + "convert-source-map": "^2.0.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.2.3", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/babel" + } + }, + "node_modules/@babel/generator": { + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz", + "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==", + "dev": true, + "dependencies": { + "@babel/types": "^7.23.6", + "@jridgewell/gen-mapping": "^0.3.2", + "@jridgewell/trace-mapping": "^0.3.17", + "jsesc": "^2.5.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-compilation-targets": { + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz", + "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==", + "dev": true, + "dependencies": { + "@babel/compat-data": "^7.23.5", + "@babel/helper-validator-option": "^7.23.5", + "browserslist": "^4.22.2", + "lru-cache": "^5.1.1", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-environment-visitor": { + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz", + "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-function-name": { + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz", + "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==", + "dev": true, + "dependencies": { + "@babel/template": "^7.22.15", + "@babel/types": "^7.23.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-hoist-variables": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz", + "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==", + "dev": true, + "dependencies": { + "@babel/types": "^7.22.5" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-imports": { + "version": "7.22.15", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz", + "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==", + "dev": true, + "dependencies": { + "@babel/types": "^7.22.15" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-transforms": { + "version": "7.23.3", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz", + "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==", + "dev": true, + "dependencies": { + "@babel/helper-environment-visitor": "^7.22.20", + "@babel/helper-module-imports": "^7.22.15", + "@babel/helper-simple-access": "^7.22.5", + "@babel/helper-split-export-declaration": "^7.22.6", + "@babel/helper-validator-identifier": "^7.22.20" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/helper-plugin-utils": { + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz", + "integrity": "sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-simple-access": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz", + "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==", + "dev": true, + "dependencies": { + "@babel/types": "^7.22.5" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-split-export-declaration": { + "version": "7.22.6", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz", + "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==", + "dev": true, + "dependencies": { + "@babel/types": "^7.22.5" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.23.4", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz", + "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz", + "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-option": { + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz", + "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helpers": { + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.0.tgz", + "integrity": "sha512-ulDZdc0Aj5uLc5nETsa7EPx2L7rM0YJM8r7ck7U73AXi7qOV44IHHRAYZHY6iU1rr3C5N4NtTmMRUJP6kwCWeA==", + "dev": true, + "dependencies": { + "@babel/template": "^7.24.0", + "@babel/traverse": "^7.24.0", + "@babel/types": "^7.24.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/highlight": { + "version": "7.23.4", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz", + "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==", + "dev": true, + "dependencies": { + "@babel/helper-validator-identifier": "^7.22.20", + "chalk": "^2.4.2", + "js-tokens": "^4.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/parser": { + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz", + "integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==", + "dev": true, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-self": { + "version": "7.23.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.23.3.tgz", + "integrity": "sha512-qXRvbeKDSfwnlJnanVRp0SfuWE5DQhwQr5xtLBzp56Wabyo+4CMosF6Kfp+eOD/4FYpql64XVJ2W0pVLlJZxOQ==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.22.5" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-source": { + "version": "7.23.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.23.3.tgz", + "integrity": "sha512-91RS0MDnAWDNvGC6Wio5XYkyWI39FMFO+JK9+4AlgaTH+yWwVTsw7/sn6LK0lH7c5F+TFkpv/3LfCJ1Ydwof/g==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.22.5" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/template": { + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz", + "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.23.5", + "@babel/parser": "^7.24.0", + "@babel/types": "^7.24.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse": { + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.0.tgz", + "integrity": "sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.23.5", + "@babel/generator": "^7.23.6", + "@babel/helper-environment-visitor": "^7.22.20", + "@babel/helper-function-name": "^7.23.0", + "@babel/helper-hoist-variables": "^7.22.5", + "@babel/helper-split-export-declaration": "^7.22.6", + "@babel/parser": "^7.24.0", + "@babel/types": "^7.24.0", + "debug": "^4.3.1", + "globals": "^11.1.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/types": { + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz", + "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==", + "dev": true, + "dependencies": { + "@babel/helper-string-parser": "^7.23.4", + "@babel/helper-validator-identifier": "^7.22.20", + "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@esbuild/aix-ppc64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz", + "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz", + "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz", + "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz", + "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz", + "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz", + "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz", + "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz", + "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz", + "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz", + "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz", + "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz", + "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==", + "cpu": [ + "loong64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz", + "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==", + "cpu": [ + "mips64el" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz", + "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz", + "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz", + "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz", + "integrity": "sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz", + "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz", + "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz", + "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz", + "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz", + "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz", + "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@eslint-community/eslint-utils": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", + "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==", + "dev": true, + "dependencies": { + "eslint-visitor-keys": "^3.3.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "peerDependencies": { + "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" + } + }, + "node_modules/@eslint-community/regexpp": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz", + "integrity": "sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==", + "dev": true, + "engines": { + "node": "^12.0.0 || ^14.0.0 || >=16.0.0" + } + }, + "node_modules/@eslint/eslintrc": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz", + "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==", + "dev": true, + "dependencies": { + "ajv": "^6.12.4", + "debug": "^4.3.2", + "espree": "^9.6.0", + "globals": "^13.19.0", + "ignore": "^5.2.0", + "import-fresh": "^3.2.1", + "js-yaml": "^4.1.0", + "minimatch": "^3.1.2", + "strip-json-comments": "^3.1.1" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/@eslint/eslintrc/node_modules/globals": { + "version": "13.24.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", + "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==", + "dev": true, + "dependencies": { + "type-fest": "^0.20.2" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@eslint/js": { + "version": "8.57.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz", + "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + } + }, + "node_modules/@humanwhocodes/config-array": { + "version": "0.11.14", + "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", + "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==", + "dev": true, + "dependencies": { + "@humanwhocodes/object-schema": "^2.0.2", + "debug": "^4.3.1", + "minimatch": "^3.0.5" + }, + "engines": { + "node": ">=10.10.0" + } + }, + "node_modules/@humanwhocodes/module-importer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz", + "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==", + "dev": true, + "engines": { + "node": ">=12.22" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/nzakas" + } + }, + "node_modules/@humanwhocodes/object-schema": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz", + "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==", + "dev": true + }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", + "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==", + "dev": true, + "dependencies": { + "@jridgewell/set-array": "^1.2.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.24" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "dev": true, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/set-array": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", + "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", + "dev": true, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.4.15", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", + "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", + "dev": true + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.25", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", + "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", + "dev": true, + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, + "node_modules/@nodelib/fs.scandir": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", + "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", + "dev": true, + "dependencies": { + "@nodelib/fs.stat": "2.0.5", + "run-parallel": "^1.1.9" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nodelib/fs.stat": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", + "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", + "dev": true, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nodelib/fs.walk": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", + "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", + "dev": true, + "dependencies": { + "@nodelib/fs.scandir": "2.1.5", + "fastq": "^1.6.0" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@remix-run/router": { + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", + "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==", + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/@rollup/rollup-android-arm-eabi": { + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.12.1.tgz", + "integrity": "sha512-iU2Sya8hNn1LhsYyf0N+L4Gf9Qc+9eBTJJJsaOGUp+7x4n2M9dxTt8UvhJl3oeftSjblSlpCfvjA/IfP3g5VjQ==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-android-arm64": { + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.12.1.tgz", + "integrity": "sha512-wlzcWiH2Ir7rdMELxFE5vuM7D6TsOcJ2Yw0c3vaBR3VOsJFVTx9xvwnAvhgU5Ii8Gd6+I11qNHwndDscIm0HXg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.12.1.tgz", + "integrity": "sha512-YRXa1+aZIFN5BaImK+84B3uNK8C6+ynKLPgvn29X9s0LTVCByp54TB7tdSMHDR7GTV39bz1lOmlLDuedgTwwHg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-darwin-x64": { + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.12.1.tgz", + "integrity": "sha512-opjWJ4MevxeA8FhlngQWPBOvVWYNPFkq6/25rGgG+KOy0r8clYwL1CFd+PGwRqqMFVQ4/Qd3sQu5t7ucP7C/Uw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-linux-arm-gnueabihf": { + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.12.1.tgz", + "integrity": "sha512-uBkwaI+gBUlIe+EfbNnY5xNyXuhZbDSx2nzzW8tRMjUmpScd6lCQYKY2V9BATHtv5Ef2OBq6SChEP8h+/cxifQ==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-gnu": { + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.12.1.tgz", + "integrity": "sha512-0bK9aG1kIg0Su7OcFTlexkVeNZ5IzEsnz1ept87a0TUgZ6HplSgkJAnFpEVRW7GRcikT4GlPV0pbtVedOaXHQQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-musl": { + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.12.1.tgz", + "integrity": "sha512-qB6AFRXuP8bdkBI4D7UPUbE7OQf7u5OL+R94JE42Z2Qjmyj74FtDdLGeriRyBDhm4rQSvqAGCGC01b8Fu2LthQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-riscv64-gnu": { + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.12.1.tgz", + "integrity": "sha512-sHig3LaGlpNgDj5o8uPEoGs98RII8HpNIqFtAI8/pYABO8i0nb1QzT0JDoXF/pxzqO+FkxvwkHZo9k0NJYDedg==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.12.1.tgz", + "integrity": "sha512-nD3YcUv6jBJbBNFvSbp0IV66+ba/1teuBcu+fBBPZ33sidxitc6ErhON3JNavaH8HlswhWMC3s5rgZpM4MtPqQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.12.1.tgz", + "integrity": "sha512-7/XVZqgBby2qp/cO0TQ8uJK+9xnSdJ9ct6gSDdEr4MfABrjTyrW6Bau7HQ73a2a5tPB7hno49A0y1jhWGDN9OQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-win32-arm64-msvc": { + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.12.1.tgz", + "integrity": "sha512-CYc64bnICG42UPL7TrhIwsJW4QcKkIt9gGlj21gq3VV0LL6XNb1yAdHVp1pIi9gkts9gGcT3OfUYHjGP7ETAiw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-ia32-msvc": { + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.12.1.tgz", + "integrity": "sha512-LN+vnlZ9g0qlHGlS920GR4zFCqAwbv2lULrR29yGaWP9u7wF5L7GqWu9Ah6/kFZPXPUkpdZwd//TNR+9XC9hvA==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.12.1.tgz", + "integrity": "sha512-n+vkrSyphvmU0qkQ6QBNXCGr2mKjhP08mPRM/Xp5Ck2FV4NrHU+y6axzDeixUrCBHVUS51TZhjqrKBBsHLKb2Q==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@types/babel__core": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", + "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==", + "dev": true, + "dependencies": { + "@babel/parser": "^7.20.7", + "@babel/types": "^7.20.7", + "@types/babel__generator": "*", + "@types/babel__template": "*", + "@types/babel__traverse": "*" + } + }, + "node_modules/@types/babel__generator": { + "version": "7.6.8", + "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz", + "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==", + "dev": true, + "dependencies": { + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__template": { + "version": "7.4.4", + "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz", + "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==", + "dev": true, + "dependencies": { + "@babel/parser": "^7.1.0", + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__traverse": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.5.tgz", + "integrity": "sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==", + "dev": true, + "dependencies": { + "@babel/types": "^7.20.7" + } + }, + "node_modules/@types/estree": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", + "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", + "dev": true + }, + "node_modules/@types/prop-types": { + "version": "15.7.11", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", + "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==", + "dev": true + }, + "node_modules/@types/react": { + "version": "18.2.64", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.64.tgz", + "integrity": "sha512-MlmPvHgjj2p3vZaxbQgFUQFvD8QiZwACfGqEdDSWou5yISWxDQ4/74nCAwsUiX7UFLKZz3BbVSPj+YxeoGGCfg==", + "dev": true, + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-dom": { + "version": "18.2.21", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.21.tgz", + "integrity": "sha512-gnvBA/21SA4xxqNXEwNiVcP0xSGHh/gi1VhWv9Bl46a0ItbTT5nFY+G9VSQpaG/8N/qdJpJ+vftQ4zflTtnjLw==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/scheduler": { + "version": "0.16.8", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", + "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", + "dev": true + }, + "node_modules/@ungap/structured-clone": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", + "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==", + "dev": true + }, + "node_modules/@vitejs/plugin-react": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz", + "integrity": "sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==", + "dev": true, + "dependencies": { + "@babel/core": "^7.23.5", + "@babel/plugin-transform-react-jsx-self": "^7.23.3", + "@babel/plugin-transform-react-jsx-source": "^7.23.3", + "@types/babel__core": "^7.20.5", + "react-refresh": "^0.14.0" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "peerDependencies": { + "vite": "^4.2.0 || ^5.0.0" + } + }, + "node_modules/acorn": { + "version": "8.11.3", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", + "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==", + "dev": true, + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/acorn-jsx": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", + "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", + "dev": true, + "peerDependencies": { + "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" + } + }, + "node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "dependencies": { + "color-convert": "^1.9.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true + }, + "node_modules/array-buffer-byte-length": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz", + "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.5", + "is-array-buffer": "^3.0.4" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/array-includes": { + "version": "3.1.7", + "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.7.tgz", + "integrity": "sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.2", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1", + "get-intrinsic": "^1.2.1", + "is-string": "^1.0.7" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/array.prototype.findlast": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.4.tgz", + "integrity": "sha512-BMtLxpV+8BD+6ZPFIWmnUBpQoy+A+ujcg4rhp2iwCRJYA7PEh2MS4NL3lz8EiDlLrJPp2hg9qWihr5pd//jcGw==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.5", + "define-properties": "^1.2.1", + "es-abstract": "^1.22.3", + "es-errors": "^1.3.0", + "es-shim-unscopables": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/array.prototype.flat": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz", + "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.2", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1", + "es-shim-unscopables": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/array.prototype.flatmap": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz", + "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.2", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1", + "es-shim-unscopables": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/array.prototype.toreversed": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/array.prototype.toreversed/-/array.prototype.toreversed-1.1.2.tgz", + "integrity": "sha512-wwDCoT4Ck4Cz7sLtgUmzR5UV3YF5mFHUlbChCzZBQZ+0m2cl/DH3tKgvphv1nKgFsJ48oCSg6p91q2Vm0I/ZMA==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.2", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1", + "es-shim-unscopables": "^1.0.0" + } + }, + "node_modules/array.prototype.tosorted": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.3.tgz", + "integrity": "sha512-/DdH4TiTmOKzyQbp/eadcCVexiCb36xJg7HshYOYJnNZFDj33GEv0P7GxsynpShhq4OLYJzbGcBDkLsDt7MnNg==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.5", + "define-properties": "^1.2.1", + "es-abstract": "^1.22.3", + "es-errors": "^1.1.0", + "es-shim-unscopables": "^1.0.2" + } + }, + "node_modules/arraybuffer.prototype.slice": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz", + "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==", + "dev": true, + "dependencies": { + "array-buffer-byte-length": "^1.0.1", + "call-bind": "^1.0.5", + "define-properties": "^1.2.1", + "es-abstract": "^1.22.3", + "es-errors": "^1.2.1", + "get-intrinsic": "^1.2.3", + "is-array-buffer": "^3.0.4", + "is-shared-array-buffer": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/asynciterator.prototype": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/asynciterator.prototype/-/asynciterator.prototype-1.0.0.tgz", + "integrity": "sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==", + "dev": true, + "dependencies": { + "has-symbols": "^1.0.3" + } + }, + "node_modules/available-typed-arrays": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", + "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==", + "dev": true, + "dependencies": { + "possible-typed-array-names": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true + }, + "node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/browserslist": { + "version": "4.23.0", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz", + "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "caniuse-lite": "^1.0.30001587", + "electron-to-chromium": "^1.4.668", + "node-releases": "^2.0.14", + "update-browserslist-db": "^1.0.13" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + } + }, + "node_modules/call-bind": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", + "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==", + "dev": true, + "dependencies": { + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.4", + "set-function-length": "^1.2.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/caniuse-lite": { + "version": "1.0.30001596", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001596.tgz", + "integrity": "sha512-zpkZ+kEr6We7w63ORkoJ2pOfBwBkY/bJrG/UZ90qNb45Isblu8wzDgevEOrRL1r9dWayHjYiiyCMEXPn4DweGQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ] + }, + "node_modules/chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "dependencies": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, + "dependencies": { + "color-name": "1.1.3" + } + }, + "node_modules/color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", + "dev": true + }, + "node_modules/concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", + "dev": true + }, + "node_modules/convert-source-map": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", + "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", + "dev": true + }, + "node_modules/cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "dependencies": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "dev": true + }, + "node_modules/debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dev": true, + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/deep-is": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", + "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", + "dev": true + }, + "node_modules/define-data-property": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz", + "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==", + "dev": true, + "dependencies": { + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "gopd": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/define-properties": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz", + "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==", + "dev": true, + "dependencies": { + "define-data-property": "^1.0.1", + "has-property-descriptors": "^1.0.0", + "object-keys": "^1.1.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/doctrine": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", + "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==", + "dev": true, + "dependencies": { + "esutils": "^2.0.2" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/electron-to-chromium": { + "version": "1.4.699", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.699.tgz", + "integrity": "sha512-I7q3BbQi6e4tJJN5CRcyvxhK0iJb34TV8eJQcgh+fR2fQ8miMgZcEInckCo1U9exDHbfz7DLDnFn8oqH/VcRKw==", + "dev": true + }, + "node_modules/es-abstract": { + "version": "1.22.5", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.5.tgz", + "integrity": "sha512-oW69R+4q2wG+Hc3KZePPZxOiisRIqfKBVo/HLx94QcJeWGU/8sZhCvc829rd1kS366vlJbzBfXf9yWwf0+Ko7w==", + "dev": true, + "dependencies": { + "array-buffer-byte-length": "^1.0.1", + "arraybuffer.prototype.slice": "^1.0.3", + "available-typed-arrays": "^1.0.7", + "call-bind": "^1.0.7", + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "es-set-tostringtag": "^2.0.3", + "es-to-primitive": "^1.2.1", + "function.prototype.name": "^1.1.6", + "get-intrinsic": "^1.2.4", + "get-symbol-description": "^1.0.2", + "globalthis": "^1.0.3", + "gopd": "^1.0.1", + "has-property-descriptors": "^1.0.2", + "has-proto": "^1.0.3", + "has-symbols": "^1.0.3", + "hasown": "^2.0.1", + "internal-slot": "^1.0.7", + "is-array-buffer": "^3.0.4", + "is-callable": "^1.2.7", + "is-negative-zero": "^2.0.3", + "is-regex": "^1.1.4", + "is-shared-array-buffer": "^1.0.3", + "is-string": "^1.0.7", + "is-typed-array": "^1.1.13", + "is-weakref": "^1.0.2", + "object-inspect": "^1.13.1", + "object-keys": "^1.1.1", + "object.assign": "^4.1.5", + "regexp.prototype.flags": "^1.5.2", + "safe-array-concat": "^1.1.0", + "safe-regex-test": "^1.0.3", + "string.prototype.trim": "^1.2.8", + "string.prototype.trimend": "^1.0.7", + "string.prototype.trimstart": "^1.0.7", + "typed-array-buffer": "^1.0.2", + "typed-array-byte-length": "^1.0.1", + "typed-array-byte-offset": "^1.0.2", + "typed-array-length": "^1.0.5", + "unbox-primitive": "^1.0.2", + "which-typed-array": "^1.1.14" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/es-define-property": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz", + "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==", + "dev": true, + "dependencies": { + "get-intrinsic": "^1.2.4" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-errors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "dev": true, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-iterator-helpers": { + "version": "1.0.17", + "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.17.tgz", + "integrity": "sha512-lh7BsUqelv4KUbR5a/ZTaGGIMLCjPGPqJ6q+Oq24YP0RdyptX1uzm4vvaqzk7Zx3bpl/76YLTTDj9L7uYQ92oQ==", + "dev": true, + "dependencies": { + "asynciterator.prototype": "^1.0.0", + "call-bind": "^1.0.7", + "define-properties": "^1.2.1", + "es-abstract": "^1.22.4", + "es-errors": "^1.3.0", + "es-set-tostringtag": "^2.0.2", + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.4", + "globalthis": "^1.0.3", + "has-property-descriptors": "^1.0.2", + "has-proto": "^1.0.1", + "has-symbols": "^1.0.3", + "internal-slot": "^1.0.7", + "iterator.prototype": "^1.1.2", + "safe-array-concat": "^1.1.0" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-set-tostringtag": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz", + "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==", + "dev": true, + "dependencies": { + "get-intrinsic": "^1.2.4", + "has-tostringtag": "^1.0.2", + "hasown": "^2.0.1" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-shim-unscopables": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz", + "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==", + "dev": true, + "dependencies": { + "hasown": "^2.0.0" + } + }, + "node_modules/es-to-primitive": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", + "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==", + "dev": true, + "dependencies": { + "is-callable": "^1.1.4", + "is-date-object": "^1.0.1", + "is-symbol": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/esbuild": { + "version": "0.19.12", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz", + "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==", + "dev": true, + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.19.12", + "@esbuild/android-arm": "0.19.12", + "@esbuild/android-arm64": "0.19.12", + "@esbuild/android-x64": "0.19.12", + "@esbuild/darwin-arm64": "0.19.12", + "@esbuild/darwin-x64": "0.19.12", + "@esbuild/freebsd-arm64": "0.19.12", + "@esbuild/freebsd-x64": "0.19.12", + "@esbuild/linux-arm": "0.19.12", + "@esbuild/linux-arm64": "0.19.12", + "@esbuild/linux-ia32": "0.19.12", + "@esbuild/linux-loong64": "0.19.12", + "@esbuild/linux-mips64el": "0.19.12", + "@esbuild/linux-ppc64": "0.19.12", + "@esbuild/linux-riscv64": "0.19.12", + "@esbuild/linux-s390x": "0.19.12", + "@esbuild/linux-x64": "0.19.12", + "@esbuild/netbsd-x64": "0.19.12", + "@esbuild/openbsd-x64": "0.19.12", + "@esbuild/sunos-x64": "0.19.12", + "@esbuild/win32-arm64": "0.19.12", + "@esbuild/win32-ia32": "0.19.12", + "@esbuild/win32-x64": "0.19.12" + } + }, + "node_modules/escalade": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz", + "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "dev": true, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/eslint": { + "version": "8.57.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz", + "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==", + "dev": true, + "dependencies": { + "@eslint-community/eslint-utils": "^4.2.0", + "@eslint-community/regexpp": "^4.6.1", + "@eslint/eslintrc": "^2.1.4", + "@eslint/js": "8.57.0", + "@humanwhocodes/config-array": "^0.11.14", + "@humanwhocodes/module-importer": "^1.0.1", + "@nodelib/fs.walk": "^1.2.8", + "@ungap/structured-clone": "^1.2.0", + "ajv": "^6.12.4", + "chalk": "^4.0.0", + "cross-spawn": "^7.0.2", + "debug": "^4.3.2", + "doctrine": "^3.0.0", + "escape-string-regexp": "^4.0.0", + "eslint-scope": "^7.2.2", + "eslint-visitor-keys": "^3.4.3", + "espree": "^9.6.1", + "esquery": "^1.4.2", + "esutils": "^2.0.2", + "fast-deep-equal": "^3.1.3", + "file-entry-cache": "^6.0.1", + "find-up": "^5.0.0", + "glob-parent": "^6.0.2", + "globals": "^13.19.0", + "graphemer": "^1.4.0", + "ignore": "^5.2.0", + "imurmurhash": "^0.1.4", + "is-glob": "^4.0.0", + "is-path-inside": "^3.0.3", + "js-yaml": "^4.1.0", + "json-stable-stringify-without-jsonify": "^1.0.1", + "levn": "^0.4.1", + "lodash.merge": "^4.6.2", + "minimatch": "^3.1.2", + "natural-compare": "^1.4.0", + "optionator": "^0.9.3", + "strip-ansi": "^6.0.1", + "text-table": "^0.2.0" + }, + "bin": { + "eslint": "bin/eslint.js" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint-plugin-react": { + "version": "7.34.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.34.0.tgz", + "integrity": "sha512-MeVXdReleBTdkz/bvcQMSnCXGi+c9kvy51IpinjnJgutl3YTHWsDdke7Z1ufZpGfDG8xduBDKyjtB9JH1eBKIQ==", + "dev": true, + "dependencies": { + "array-includes": "^3.1.7", + "array.prototype.findlast": "^1.2.4", + "array.prototype.flatmap": "^1.3.2", + "array.prototype.toreversed": "^1.1.2", + "array.prototype.tosorted": "^1.1.3", + "doctrine": "^2.1.0", + "es-iterator-helpers": "^1.0.17", + "estraverse": "^5.3.0", + "jsx-ast-utils": "^2.4.1 || ^3.0.0", + "minimatch": "^3.1.2", + "object.entries": "^1.1.7", + "object.fromentries": "^2.0.7", + "object.hasown": "^1.1.3", + "object.values": "^1.1.7", + "prop-types": "^15.8.1", + "resolve": "^2.0.0-next.5", + "semver": "^6.3.1", + "string.prototype.matchall": "^4.0.10" + }, + "engines": { + "node": ">=4" + }, + "peerDependencies": { + "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8" + } + }, + "node_modules/eslint-plugin-react-hooks": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz", + "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==", + "dev": true, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0" + } + }, + "node_modules/eslint-plugin-react-refresh": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.5.tgz", + "integrity": "sha512-D53FYKJa+fDmZMtriODxvhwrO+IOqrxoEo21gMA0sjHdU6dPVH4OhyFip9ypl8HOF5RV5KdTo+rBQLvnY2cO8w==", + "dev": true, + "peerDependencies": { + "eslint": ">=7" + } + }, + "node_modules/eslint-plugin-react/node_modules/doctrine": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", + "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==", + "dev": true, + "dependencies": { + "esutils": "^2.0.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/eslint-scope": { + "version": "7.2.2", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz", + "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==", + "dev": true, + "dependencies": { + "esrecurse": "^4.3.0", + "estraverse": "^5.2.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint-visitor-keys": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/eslint/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/eslint/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/eslint/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/eslint/node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/eslint/node_modules/globals": { + "version": "13.24.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", + "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==", + "dev": true, + "dependencies": { + "type-fest": "^0.20.2" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/eslint/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/eslint/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/espree": { + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz", + "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==", + "dev": true, + "dependencies": { + "acorn": "^8.9.0", + "acorn-jsx": "^5.3.2", + "eslint-visitor-keys": "^3.4.1" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/esquery": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz", + "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==", + "dev": true, + "dependencies": { + "estraverse": "^5.1.0" + }, + "engines": { + "node": ">=0.10" + } + }, + "node_modules/esrecurse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz", + "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==", + "dev": true, + "dependencies": { + "estraverse": "^5.2.0" + }, + "engines": { + "node": ">=4.0" + } + }, + "node_modules/estraverse": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", + "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", + "dev": true, + "engines": { + "node": ">=4.0" + } + }, + "node_modules/esutils": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", + "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/fast-deep-equal": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", + "dev": true + }, + "node_modules/fast-json-stable-stringify": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", + "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", + "dev": true + }, + "node_modules/fast-levenshtein": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", + "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", + "dev": true + }, + "node_modules/fastq": { + "version": "1.17.1", + "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz", + "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==", + "dev": true, + "dependencies": { + "reusify": "^1.0.4" + } + }, + "node_modules/file-entry-cache": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", + "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==", + "dev": true, + "dependencies": { + "flat-cache": "^3.0.4" + }, + "engines": { + "node": "^10.12.0 || >=12.0.0" + } + }, + "node_modules/find-up": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", + "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", + "dev": true, + "dependencies": { + "locate-path": "^6.0.0", + "path-exists": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/flat-cache": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz", + "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==", + "dev": true, + "dependencies": { + "flatted": "^3.2.9", + "keyv": "^4.5.3", + "rimraf": "^3.0.2" + }, + "engines": { + "node": "^10.12.0 || >=12.0.0" + } + }, + "node_modules/flatted": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz", + "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", + "dev": true + }, + "node_modules/for-each": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", + "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==", + "dev": true, + "dependencies": { + "is-callable": "^1.1.3" + } + }, + "node_modules/fs.realpath": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", + "dev": true + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/function-bind": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/function.prototype.name": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.6.tgz", + "integrity": "sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.2", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1", + "functions-have-names": "^1.2.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/functions-have-names": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz", + "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/gensync": { + "version": "1.0.0-beta.2", + "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", + "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/get-intrinsic": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz", + "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==", + "dev": true, + "dependencies": { + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "has-proto": "^1.0.1", + "has-symbols": "^1.0.3", + "hasown": "^2.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/get-symbol-description": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz", + "integrity": "sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.5", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.4" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, + "dependencies": { + "is-glob": "^4.0.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/globals": { + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/globalthis": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz", + "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==", + "dev": true, + "dependencies": { + "define-properties": "^1.1.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/gopd": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", + "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==", + "dev": true, + "dependencies": { + "get-intrinsic": "^1.1.3" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/graphemer": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz", + "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", + "dev": true + }, + "node_modules/has-bigints": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz", + "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/has-property-descriptors": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz", + "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==", + "dev": true, + "dependencies": { + "es-define-property": "^1.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-proto": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz", + "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==", + "dev": true, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-symbols": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", + "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", + "dev": true, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-tostringtag": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz", + "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==", + "dev": true, + "dependencies": { + "has-symbols": "^1.0.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/hasown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "dev": true, + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/ignore": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz", + "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==", + "dev": true, + "engines": { + "node": ">= 4" + } + }, + "node_modules/import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "dev": true, + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/imurmurhash": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", + "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==", + "dev": true, + "engines": { + "node": ">=0.8.19" + } + }, + "node_modules/inflight": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "dev": true, + "dependencies": { + "once": "^1.3.0", + "wrappy": "1" + } + }, + "node_modules/inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "dev": true + }, + "node_modules/internal-slot": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz", + "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==", + "dev": true, + "dependencies": { + "es-errors": "^1.3.0", + "hasown": "^2.0.0", + "side-channel": "^1.0.4" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/is-array-buffer": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz", + "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.2", + "get-intrinsic": "^1.2.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-async-function": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz", + "integrity": "sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==", + "dev": true, + "dependencies": { + "has-tostringtag": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-bigint": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz", + "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==", + "dev": true, + "dependencies": { + "has-bigints": "^1.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-boolean-object": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz", + "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.2", + "has-tostringtag": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-callable": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz", + "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==", + "dev": true, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-core-module": { + "version": "2.13.1", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz", + "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==", + "dev": true, + "dependencies": { + "hasown": "^2.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-date-object": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz", + "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==", + "dev": true, + "dependencies": { + "has-tostringtag": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-finalizationregistry": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz", + "integrity": "sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.2" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-generator-function": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz", + "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==", + "dev": true, + "dependencies": { + "has-tostringtag": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-map": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz", + "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==", + "dev": true, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-negative-zero": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz", + "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==", + "dev": true, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-number-object": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz", + "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==", + "dev": true, + "dependencies": { + "has-tostringtag": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-path-inside": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz", + "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-regex": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", + "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.2", + "has-tostringtag": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-set": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz", + "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==", + "dev": true, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-shared-array-buffer": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz", + "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.7" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-string": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz", + "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==", + "dev": true, + "dependencies": { + "has-tostringtag": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-symbol": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz", + "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==", + "dev": true, + "dependencies": { + "has-symbols": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-typed-array": { + "version": "1.1.13", + "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz", + "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==", + "dev": true, + "dependencies": { + "which-typed-array": "^1.1.14" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-weakmap": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz", + "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==", + "dev": true, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-weakref": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz", + "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.2" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-weakset": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.3.tgz", + "integrity": "sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.7", + "get-intrinsic": "^1.2.4" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/isarray": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz", + "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==", + "dev": true + }, + "node_modules/isexe": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", + "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", + "dev": true + }, + "node_modules/iterator.prototype": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.2.tgz", + "integrity": "sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==", + "dev": true, + "dependencies": { + "define-properties": "^1.2.1", + "get-intrinsic": "^1.2.1", + "has-symbols": "^1.0.3", + "reflect.getprototypeof": "^1.0.4", + "set-function-name": "^2.0.1" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + }, + "node_modules/js-yaml": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dev": true, + "dependencies": { + "argparse": "^2.0.1" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, + "node_modules/jsesc": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", + "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", + "dev": true, + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/json-buffer": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz", + "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==", + "dev": true + }, + "node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true + }, + "node_modules/json-stable-stringify-without-jsonify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", + "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", + "dev": true + }, + "node_modules/json5": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", + "dev": true, + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/jsx-ast-utils": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz", + "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==", + "dev": true, + "dependencies": { + "array-includes": "^3.1.6", + "array.prototype.flat": "^1.3.1", + "object.assign": "^4.1.4", + "object.values": "^1.1.6" + }, + "engines": { + "node": ">=4.0" + } + }, + "node_modules/keyv": { + "version": "4.5.4", + "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", + "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==", + "dev": true, + "dependencies": { + "json-buffer": "3.0.1" + } + }, + "node_modules/levn": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", + "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==", + "dev": true, + "dependencies": { + "prelude-ls": "^1.2.1", + "type-check": "~0.4.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/locate-path": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", + "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", + "dev": true, + "dependencies": { + "p-locate": "^5.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/lodash.merge": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", + "dev": true + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, + "node_modules/lru-cache": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", + "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", + "dev": true, + "dependencies": { + "yallist": "^3.0.2" + } + }, + "node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true + }, + "node_modules/nanoid": { + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/natural-compare": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", + "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", + "dev": true + }, + "node_modules/node-releases": { + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz", + "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==", + "dev": true + }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/object-inspect": { + "version": "1.13.1", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz", + "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/object-keys": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", + "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==", + "dev": true, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/object.assign": { + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz", + "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.5", + "define-properties": "^1.2.1", + "has-symbols": "^1.0.3", + "object-keys": "^1.1.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/object.entries": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.7.tgz", + "integrity": "sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.2", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/object.fromentries": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.7.tgz", + "integrity": "sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.2", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/object.hasown": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.3.tgz", + "integrity": "sha512-fFI4VcYpRHvSLXxP7yiZOMAd331cPfd2p7PFDVbgUsYOfCT3tICVqXWngbjr4m49OvsBwUBQ6O2uQoJvy3RexA==", + "dev": true, + "dependencies": { + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/object.values": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.7.tgz", + "integrity": "sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.2", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/once": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", + "dev": true, + "dependencies": { + "wrappy": "1" + } + }, + "node_modules/optionator": { + "version": "0.9.3", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz", + "integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==", + "dev": true, + "dependencies": { + "@aashutoshrathi/word-wrap": "^1.2.3", + "deep-is": "^0.1.3", + "fast-levenshtein": "^2.0.6", + "levn": "^0.4.1", + "prelude-ls": "^1.2.1", + "type-check": "^0.4.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/p-limit": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", + "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", + "dev": true, + "dependencies": { + "yocto-queue": "^0.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/p-locate": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", + "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", + "dev": true, + "dependencies": { + "p-limit": "^3.0.2" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dev": true, + "dependencies": { + "callsites": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/path-is-absolute": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true + }, + "node_modules/picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "dev": true + }, + "node_modules/possible-typed-array-names": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz", + "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==", + "dev": true, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/postcss": { + "version": "8.4.35", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz", + "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/prelude-ls": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", + "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", + "dev": true, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dev": true, + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, + "node_modules/punycode": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", + "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/queue-microtask": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", + "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, + "node_modules/react": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.0" + }, + "peerDependencies": { + "react": "^18.2.0" + } + }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "dev": true + }, + "node_modules/react-refresh": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", + "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-router": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz", + "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==", + "dependencies": { + "@remix-run/router": "1.15.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz", + "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==", + "dependencies": { + "@remix-run/router": "1.15.3", + "react-router": "6.22.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, + "node_modules/reflect.getprototypeof": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.5.tgz", + "integrity": "sha512-62wgfC8dJWrmxv44CA36pLDnP6KKl3Vhxb7PL+8+qrrFMMoJij4vgiMP8zV4O8+CBMXY1mHxI5fITGHXFHVmQQ==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.5", + "define-properties": "^1.2.1", + "es-abstract": "^1.22.3", + "es-errors": "^1.0.0", + "get-intrinsic": "^1.2.3", + "globalthis": "^1.0.3", + "which-builtin-type": "^1.1.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/regexp.prototype.flags": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz", + "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.6", + "define-properties": "^1.2.1", + "es-errors": "^1.3.0", + "set-function-name": "^2.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/resolve": { + "version": "2.0.0-next.5", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz", + "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==", + "dev": true, + "dependencies": { + "is-core-module": "^2.13.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/reusify": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", + "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==", + "dev": true, + "engines": { + "iojs": ">=1.0.0", + "node": ">=0.10.0" + } + }, + "node_modules/rimraf": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", + "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", + "dev": true, + "dependencies": { + "glob": "^7.1.3" + }, + "bin": { + "rimraf": "bin.js" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/rollup": { + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.12.1.tgz", + "integrity": "sha512-ggqQKvx/PsB0FaWXhIvVkSWh7a/PCLQAsMjBc+nA2M8Rv2/HG0X6zvixAB7KyZBRtifBUhy5k8voQX/mRnABPg==", + "dev": true, + "dependencies": { + "@types/estree": "1.0.5" + }, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "@rollup/rollup-android-arm-eabi": "4.12.1", + "@rollup/rollup-android-arm64": "4.12.1", + "@rollup/rollup-darwin-arm64": "4.12.1", + "@rollup/rollup-darwin-x64": "4.12.1", + "@rollup/rollup-linux-arm-gnueabihf": "4.12.1", + "@rollup/rollup-linux-arm64-gnu": "4.12.1", + "@rollup/rollup-linux-arm64-musl": "4.12.1", + "@rollup/rollup-linux-riscv64-gnu": "4.12.1", + "@rollup/rollup-linux-x64-gnu": "4.12.1", + "@rollup/rollup-linux-x64-musl": "4.12.1", + "@rollup/rollup-win32-arm64-msvc": "4.12.1", + "@rollup/rollup-win32-ia32-msvc": "4.12.1", + "@rollup/rollup-win32-x64-msvc": "4.12.1", + "fsevents": "~2.3.2" + } + }, + "node_modules/run-parallel": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", + "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "dependencies": { + "queue-microtask": "^1.2.2" + } + }, + "node_modules/safe-array-concat": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz", + "integrity": "sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.7", + "get-intrinsic": "^1.2.4", + "has-symbols": "^1.0.3", + "isarray": "^2.0.5" + }, + "engines": { + "node": ">=0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/safe-regex-test": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz", + "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.6", + "es-errors": "^1.3.0", + "is-regex": "^1.1.4" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/scheduler": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "dependencies": { + "loose-envify": "^1.1.0" + } + }, + "node_modules/semver": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", + "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/set-function-length": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", + "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==", + "dev": true, + "dependencies": { + "define-data-property": "^1.1.4", + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.4", + "gopd": "^1.0.1", + "has-property-descriptors": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/set-function-name": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz", + "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==", + "dev": true, + "dependencies": { + "define-data-property": "^1.1.4", + "es-errors": "^1.3.0", + "functions-have-names": "^1.2.3", + "has-property-descriptors": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "dependencies": { + "shebang-regex": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/side-channel": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz", + "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.7", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.4", + "object-inspect": "^1.13.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/string.prototype.matchall": { + "version": "4.0.10", + "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz", + "integrity": "sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.2", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1", + "get-intrinsic": "^1.2.1", + "has-symbols": "^1.0.3", + "internal-slot": "^1.0.5", + "regexp.prototype.flags": "^1.5.0", + "set-function-name": "^2.0.0", + "side-channel": "^1.0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/string.prototype.trim": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz", + "integrity": "sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.2", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/string.prototype.trimend": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz", + "integrity": "sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.2", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/string.prototype.trimstart": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz", + "integrity": "sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.2", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/strip-json-comments": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", + "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", + "dev": true, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/text-table": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", + "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", + "dev": true + }, + "node_modules/to-fast-properties": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", + "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/type-check": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", + "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==", + "dev": true, + "dependencies": { + "prelude-ls": "^1.2.1" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/type-fest": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/typed-array-buffer": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz", + "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.7", + "es-errors": "^1.3.0", + "is-typed-array": "^1.1.13" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/typed-array-byte-length": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz", + "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.7", + "for-each": "^0.3.3", + "gopd": "^1.0.1", + "has-proto": "^1.0.3", + "is-typed-array": "^1.1.13" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/typed-array-byte-offset": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz", + "integrity": "sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==", + "dev": true, + "dependencies": { + "available-typed-arrays": "^1.0.7", + "call-bind": "^1.0.7", + "for-each": "^0.3.3", + "gopd": "^1.0.1", + "has-proto": "^1.0.3", + "is-typed-array": "^1.1.13" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/typed-array-length": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.5.tgz", + "integrity": "sha512-yMi0PlwuznKHxKmcpoOdeLwxBoVPkqZxd7q2FgMkmD3bNwvF5VW0+UlUQ1k1vmktTu4Yu13Q0RIxEP8+B+wloA==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.7", + "for-each": "^0.3.3", + "gopd": "^1.0.1", + "has-proto": "^1.0.3", + "is-typed-array": "^1.1.13", + "possible-typed-array-names": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/unbox-primitive": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", + "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.2", + "has-bigints": "^1.0.2", + "has-symbols": "^1.0.3", + "which-boxed-primitive": "^1.0.2" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/update-browserslist-db": { + "version": "1.0.13", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz", + "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "escalade": "^3.1.1", + "picocolors": "^1.0.0" + }, + "bin": { + "update-browserslist-db": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + }, + "node_modules/uri-js": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", + "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==", + "dev": true, + "dependencies": { + "punycode": "^2.1.0" + } + }, + "node_modules/vite": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.5.tgz", + "integrity": "sha512-BdN1xh0Of/oQafhU+FvopafUp6WaYenLU/NFoL5WyJL++GxkNfieKzBhM24H3HVsPQrlAqB7iJYTHabzaRed5Q==", + "dev": true, + "dependencies": { + "esbuild": "^0.19.3", + "postcss": "^8.4.35", + "rollup": "^4.2.0" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^18.0.0 || >=20.0.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^18.0.0 || >=20.0.0", + "less": "*", + "lightningcss": "^1.21.0", + "sass": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + } + } + }, + "node_modules/which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/node-which" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/which-boxed-primitive": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz", + "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==", + "dev": true, + "dependencies": { + "is-bigint": "^1.0.1", + "is-boolean-object": "^1.1.0", + "is-number-object": "^1.0.4", + "is-string": "^1.0.5", + "is-symbol": "^1.0.3" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/which-builtin-type": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.1.3.tgz", + "integrity": "sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==", + "dev": true, + "dependencies": { + "function.prototype.name": "^1.1.5", + "has-tostringtag": "^1.0.0", + "is-async-function": "^2.0.0", + "is-date-object": "^1.0.5", + "is-finalizationregistry": "^1.0.2", + "is-generator-function": "^1.0.10", + "is-regex": "^1.1.4", + "is-weakref": "^1.0.2", + "isarray": "^2.0.5", + "which-boxed-primitive": "^1.0.2", + "which-collection": "^1.0.1", + "which-typed-array": "^1.1.9" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/which-collection": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz", + "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==", + "dev": true, + "dependencies": { + "is-map": "^2.0.3", + "is-set": "^2.0.3", + "is-weakmap": "^2.0.2", + "is-weakset": "^2.0.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/which-typed-array": { + "version": "1.1.15", + "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz", + "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==", + "dev": true, + "dependencies": { + "available-typed-arrays": "^1.0.7", + "call-bind": "^1.0.7", + "for-each": "^0.3.3", + "gopd": "^1.0.1", + "has-tostringtag": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/wrappy": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", + "dev": true + }, + "node_modules/yallist": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", + "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", + "dev": true + }, + "node_modules/yocto-queue": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", + "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + } + } +} diff --git a/package.json b/package.json index 317e66d..7fa8851 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ }, "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.22.3" }, "devDependencies": { "@types/react": "^18.2.56", diff --git a/src/App.jsx b/src/App.jsx index b8b8473..f104ee9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,34 +1,12 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' import './App.css' +import { RouterProvider } from 'react-router-dom' +import mainRouter from './router/main-router' function App() { - const [count, setCount] = useState(0) - return ( - <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.jsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

- +
+ +
) } diff --git a/src/lib/.gitkeep b/src/lib/apis/.gitkeep similarity index 100% rename from src/lib/.gitkeep rename to src/lib/apis/.gitkeep diff --git a/src/lib/hooks/.gitkeep b/src/lib/hooks/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/router/main-router.jsx b/src/router/main-router.jsx new file mode 100644 index 0000000..d498c54 --- /dev/null +++ b/src/router/main-router.jsx @@ -0,0 +1,52 @@ +import * as React from "react"; +import { createBrowserRouter } from "react-router-dom"; +import MainLayout from "../routes/mainLayout"; +import TradingPage from "../routes/Trading/page"; +import MarketInfoPage from "../routes/MarketInfo/page"; +import InvestStrategyPage from "../routes/InvestStrategy/page"; +import HotStockPage from "../routes/HotStock/page"; +import FeedPage from "../routes/Feed/page"; +import MyPage from "../routes/MyPage/page"; + +export const mainRoutes = [ + { + path: '/', + element: , + children: [ + { + path: "", + element: , + index: true, + }, + { + path: "/market", + element: , + index: true, + }, + { + path: "/strategy", + element: , + index: true, + }, + { + path: "/hot", + element: , + index: true, + }, + { + path: "/feed", + element: , + index: true, + }, + { + path: "/mypage", + element: , + index: true, + }, + ] + } +] + +const router = createBrowserRouter(mainRoutes); + +export default router; \ No newline at end of file diff --git a/src/routes/Feed/page.jsx b/src/routes/Feed/page.jsx new file mode 100644 index 0000000..b293dfd --- /dev/null +++ b/src/routes/Feed/page.jsx @@ -0,0 +1,7 @@ +import React from 'react' + +export default function FeedPage() { + return ( +
FeedPage
+ ) +} diff --git a/src/routes/HotStock/page.jsx b/src/routes/HotStock/page.jsx new file mode 100644 index 0000000..aae0718 --- /dev/null +++ b/src/routes/HotStock/page.jsx @@ -0,0 +1,7 @@ +import React from 'react' + +export default function HotStockPage() { + return ( +
HotStockPage
+ ) +} diff --git a/src/routes/InvestStrategy/page.jsx b/src/routes/InvestStrategy/page.jsx new file mode 100644 index 0000000..5b57746 --- /dev/null +++ b/src/routes/InvestStrategy/page.jsx @@ -0,0 +1,7 @@ +import React from 'react' + +export default function InvestStrategyPage() { + return ( +
InvestStrategyPage
+ ) +} diff --git a/src/routes/MarketInfo/page.jsx b/src/routes/MarketInfo/page.jsx new file mode 100644 index 0000000..16ebd9b --- /dev/null +++ b/src/routes/MarketInfo/page.jsx @@ -0,0 +1,7 @@ +import React from 'react' + +export default function MarketInfoPage() { + return ( +
MarketInfoPage
+ ) +} diff --git a/src/routes/MyPage/page.jsx b/src/routes/MyPage/page.jsx new file mode 100644 index 0000000..b3d8471 --- /dev/null +++ b/src/routes/MyPage/page.jsx @@ -0,0 +1,7 @@ +import React from 'react' + +export default function MyPage() { + return ( +
MyPage
+ ) +} diff --git a/src/routes/Trading/page.jsx b/src/routes/Trading/page.jsx new file mode 100644 index 0000000..a94c91b --- /dev/null +++ b/src/routes/Trading/page.jsx @@ -0,0 +1,7 @@ +import React from 'react' + +export default function TradingPage() { + return ( +
TradingPage
+ ) +} diff --git a/src/routes/mainLayout.jsx b/src/routes/mainLayout.jsx new file mode 100644 index 0000000..3416842 --- /dev/null +++ b/src/routes/mainLayout.jsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { Outlet } from 'react-router-dom'; + +export default function MainLayout() { + return ( + <> + + + ) +} From bda7abb485343fa8d11c96ef568b01152485a44f Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Mon, 11 Mar 2024 14:44:21 +0900 Subject: [PATCH 04/84] =?UTF-8?q?feat:=20react-redux=20=ED=99=98=EA=B2=BD?= =?UTF-8?q?=20=EC=84=B8=ED=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 111 ++++++++++++++++++++++-- package.json | 6 +- src/App.jsx | 18 ++-- src/router/main-router.jsx | 2 + src/routes/Feed/page.jsx | 2 +- src/routes/HotStock/page.jsx | 2 +- src/routes/InvestStrategy/page.jsx | 2 +- src/routes/MarketInfo/page.jsx | 2 +- src/routes/MyPage/page.jsx | 2 +- src/routes/Trading/page.jsx | 2 +- src/store/.gitkeep | 0 src/{routes => store/reducers}/.gitkeep | 0 src/store/reducers/Trading/trading.js | 16 ++++ src/store/store.js | 32 +++++++ 14 files changed, 178 insertions(+), 19 deletions(-) delete mode 100644 src/store/.gitkeep rename src/{routes => store/reducers}/.gitkeep (100%) create mode 100644 src/store/reducers/Trading/trading.js create mode 100644 src/store/store.js diff --git a/package-lock.json b/package-lock.json index 131abb0..210a263 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,13 @@ "name": "invest-sns-react", "version": "0.0.0", "dependencies": { + "@reduxjs/toolkit": "^2.2.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.22.3" + "react-redux": "^9.1.0", + "react-router-dom": "^6.22.3", + "redux": "^5.0.1", + "redux-persist": "^6.0.0" }, "devDependencies": { "@types/react": "^18.2.56", @@ -927,6 +931,29 @@ "node": ">= 8" } }, + "node_modules/@reduxjs/toolkit": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.1.tgz", + "integrity": "sha512-8CREoqJovQW/5I4yvvijm/emUiCCmcs4Ev4XPWd4mizSO+dD3g5G6w34QK5AGeNrSH7qM8Fl66j4vuV7dpOdkw==", + "dependencies": { + "immer": "^10.0.3", + "redux": "^5.0.1", + "redux-thunk": "^3.1.0", + "reselect": "^5.0.1" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17.0.0 || ^18", + "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-redux": { + "optional": true + } + } + }, "node_modules/@remix-run/router": { "version": "1.15.3", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", @@ -1155,13 +1182,13 @@ "version": "15.7.11", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==", - "dev": true + "devOptional": true }, "node_modules/@types/react": { "version": "18.2.64", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.64.tgz", "integrity": "sha512-MlmPvHgjj2p3vZaxbQgFUQFvD8QiZwACfGqEdDSWou5yISWxDQ4/74nCAwsUiX7UFLKZz3BbVSPj+YxeoGGCfg==", - "dev": true, + "devOptional": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -1181,7 +1208,12 @@ "version": "0.16.8", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", - "dev": true + "devOptional": true + }, + "node_modules/@types/use-sync-external-store": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", + "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" }, "node_modules/@ungap/structured-clone": { "version": "1.2.0", @@ -1588,7 +1620,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true + "devOptional": true }, "node_modules/debug": { "version": "4.3.4", @@ -2516,6 +2548,15 @@ "node": ">= 4" } }, + "node_modules/immer": { + "version": "10.0.4", + "resolved": "https://registry.npmjs.org/immer/-/immer-10.0.4.tgz", + "integrity": "sha512-cuBuGK40P/sk5IzWa9QPUaAdvPHjkk1c+xYsd9oZw+YQQEV+10G0P5uMpGctZZKnyQ+ibRO08bD25nWLmYi2pw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/immer" + } + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -3431,6 +3472,32 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "node_modules/react-redux": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.0.tgz", + "integrity": "sha512-6qoDzIO+gbrza8h3hjMA9aq4nwVFCKFtY2iLxCtVT38Swyy2C/dJCGBXHeHLtx6qlg/8qzc2MrhOeduf5K32wQ==", + "dependencies": { + "@types/use-sync-external-store": "^0.0.3", + "use-sync-external-store": "^1.0.0" + }, + "peerDependencies": { + "@types/react": "^18.2.25", + "react": "^18.0", + "react-native": ">=0.69", + "redux": "^5.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "react-native": { + "optional": true + }, + "redux": { + "optional": true + } + } + }, "node_modules/react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", @@ -3470,6 +3537,27 @@ "react-dom": ">=16.8" } }, + "node_modules/redux": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", + "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==" + }, + "node_modules/redux-persist": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz", + "integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==", + "peerDependencies": { + "redux": ">4.0.0" + } + }, + "node_modules/redux-thunk": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz", + "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==", + "peerDependencies": { + "redux": "^5.0.0" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.5.tgz", @@ -3509,6 +3597,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/reselect": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.0.tgz", + "integrity": "sha512-aw7jcGLDpSgNDyWBQLv2cedml85qd95/iszJjN988zX1t7AVRJi19d9kto5+W7oCfQ94gyo40dVbT6g2k4/kXg==" + }, "node_modules/resolve": { "version": "2.0.0-next.5", "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz", @@ -4026,6 +4119,14 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/vite": { "version": "5.1.5", "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.5.tgz", diff --git a/package.json b/package.json index 7fa8851..9cb6c70 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,13 @@ "preview": "vite preview" }, "dependencies": { + "@reduxjs/toolkit": "^2.2.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.22.3" + "react-redux": "^9.1.0", + "react-router-dom": "^6.22.3", + "redux": "^5.0.1", + "redux-persist": "^6.0.0" }, "devDependencies": { "@types/react": "^18.2.56", diff --git a/src/App.jsx b/src/App.jsx index f104ee9..806d1d1 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,13 +1,17 @@ -import './App.css' -import { RouterProvider } from 'react-router-dom' -import mainRouter from './router/main-router' +import { RouterProvider } from 'react-router-dom'; +import mainRouter from './router/main-router'; +import { Provider } from 'react-redux'; +import { PersistGate } from 'redux-persist/integration/react'; +import { store, persistor } from './store/store'; function App() { return ( -
- -
+ + + + + ) } -export default App +export default App; diff --git a/src/router/main-router.jsx b/src/router/main-router.jsx index d498c54..8cc9ff2 100644 --- a/src/router/main-router.jsx +++ b/src/router/main-router.jsx @@ -1,6 +1,8 @@ import * as React from "react"; import { createBrowserRouter } from "react-router-dom"; import MainLayout from "../routes/mainLayout"; + +// pages import TradingPage from "../routes/Trading/page"; import MarketInfoPage from "../routes/MarketInfo/page"; import InvestStrategyPage from "../routes/InvestStrategy/page"; diff --git a/src/routes/Feed/page.jsx b/src/routes/Feed/page.jsx index b293dfd..95b9336 100644 --- a/src/routes/Feed/page.jsx +++ b/src/routes/Feed/page.jsx @@ -1,4 +1,4 @@ -import React from 'react' +import React from 'react'; export default function FeedPage() { return ( diff --git a/src/routes/HotStock/page.jsx b/src/routes/HotStock/page.jsx index aae0718..95db379 100644 --- a/src/routes/HotStock/page.jsx +++ b/src/routes/HotStock/page.jsx @@ -1,4 +1,4 @@ -import React from 'react' +import React from 'react'; export default function HotStockPage() { return ( diff --git a/src/routes/InvestStrategy/page.jsx b/src/routes/InvestStrategy/page.jsx index 5b57746..a60af54 100644 --- a/src/routes/InvestStrategy/page.jsx +++ b/src/routes/InvestStrategy/page.jsx @@ -1,4 +1,4 @@ -import React from 'react' +import React from 'react'; export default function InvestStrategyPage() { return ( diff --git a/src/routes/MarketInfo/page.jsx b/src/routes/MarketInfo/page.jsx index 16ebd9b..ec8bcc7 100644 --- a/src/routes/MarketInfo/page.jsx +++ b/src/routes/MarketInfo/page.jsx @@ -1,4 +1,4 @@ -import React from 'react' +import React from 'react'; export default function MarketInfoPage() { return ( diff --git a/src/routes/MyPage/page.jsx b/src/routes/MyPage/page.jsx index b3d8471..487f4d6 100644 --- a/src/routes/MyPage/page.jsx +++ b/src/routes/MyPage/page.jsx @@ -1,4 +1,4 @@ -import React from 'react' +import React from 'react'; export default function MyPage() { return ( diff --git a/src/routes/Trading/page.jsx b/src/routes/Trading/page.jsx index a94c91b..5426a6c 100644 --- a/src/routes/Trading/page.jsx +++ b/src/routes/Trading/page.jsx @@ -1,4 +1,4 @@ -import React from 'react' +import React from 'react'; export default function TradingPage() { return ( diff --git a/src/store/.gitkeep b/src/store/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/routes/.gitkeep b/src/store/reducers/.gitkeep similarity index 100% rename from src/routes/.gitkeep rename to src/store/reducers/.gitkeep diff --git a/src/store/reducers/Trading/trading.js b/src/store/reducers/Trading/trading.js new file mode 100644 index 0000000..959dda7 --- /dev/null +++ b/src/store/reducers/Trading/trading.js @@ -0,0 +1,16 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + +}; + +const tradingSlice = createSlice({ + name: "trading", + initialState: initialState, + reducers: { + }, + extraReducers: (builder) => { + }, +}); + +export default tradingSlice.reducer; diff --git a/src/store/store.js b/src/store/store.js new file mode 100644 index 0000000..0b2eed2 --- /dev/null +++ b/src/store/store.js @@ -0,0 +1,32 @@ +import React from 'react'; +import { combineReducers, configureStore } from '@reduxjs/toolkit'; +import storage from 'redux-persist/lib/storage'; +import { FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE, persistReducer, persistStore } from 'redux-persist'; + +import tradingReducer from './reducers/Trading/trading'; + +const rootPersistConfig = { + key: 'root', + storage: storage, + whitelist: [] +} + +const rootReducer = persistReducer( + rootPersistConfig, + combineReducers({ + // 임시 reducer + trading: tradingReducer, + }) +); + +export const store = configureStore({ + reducer: rootReducer, + middleware: getDefaultMiddleware => + getDefaultMiddleware({ + serializableCheck: { + ignoreActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], + }, + }), +}); + +export const persistor = persistStore(store); \ No newline at end of file From c5e23a68221e2c7948321ffc375c722e78f7b585 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Mon, 11 Mar 2024 14:50:17 +0900 Subject: [PATCH 05/84] =?UTF-8?q?feat:=20=ED=8F=B4=EB=8D=94=20=EC=A0=91?= =?UTF-8?q?=EA=B7=BC=20=EC=8B=9C=20=EC=A0=88=EB=8C=80=20=EA=B2=BD=EB=A1=9C?= =?UTF-8?q?=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vite.config.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/vite.config.js b/vite.config.js index 5a33944..98e6237 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,7 +1,22 @@ import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' -// https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], + server: { + proxy: { + '/api': '', // 서버 주소 기입 + }, + }, + resolve: { + alias: [ + // 절대경로로 접근 + { find: '~/components', replacement: '/src/components' }, + { find: '~/lib', replacement: '/src/lib' }, + { find: '~/router', replacement: '/src/router' }, + { find: '~/routes', replacement: '/src/routes' }, + { find: '~/store', replacement: '/src/store' }, + { find: '~/assets', replacement: '/src/assets' }, + ], + }, }) From 1c38de379185bbb57dcc1ad602afc9d81dffa0c4 Mon Sep 17 00:00:00 2001 From: eunxoo Date: Tue, 12 Mar 2024 17:01:50 +0900 Subject: [PATCH 06/84] =?UTF-8?q?feat:=20=EA=B4=80=EC=8B=AC=20=EC=A2=85?= =?UTF-8?q?=EB=AA=A9=20=EA=B2=80=EC=83=89=20=EB=B0=8F=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?-=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 422 +++++++++++++++- package.json | 6 +- public/icon/BlankStar.svg | 3 + public/icon/FilledStar.svg | 3 + public/icon/X.svg | 4 + public/icon/search.svg | 5 + public/icon/searchGray.svg | 5 + .../invest/left-bar/MyStockList.jsx | 474 ++++++++++++++++++ 8 files changed, 905 insertions(+), 17 deletions(-) create mode 100644 public/icon/BlankStar.svg create mode 100644 public/icon/FilledStar.svg create mode 100644 public/icon/X.svg create mode 100644 public/icon/search.svg create mode 100644 public/icon/searchGray.svg create mode 100644 src/components/invest/left-bar/MyStockList.jsx diff --git a/package-lock.json b/package-lock.json index 210a263..a13bf27 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,12 +9,16 @@ "version": "0.0.0", "dependencies": { "@reduxjs/toolkit": "^2.2.1", + "bootstrap": "^5.3.3", "react": "^18.2.0", + "react-bootstrap": "^2.10.1", "react-dom": "^18.2.0", "react-redux": "^9.1.0", "react-router-dom": "^6.22.3", "redux": "^5.0.1", - "redux-persist": "^6.0.0" + "redux-persist": "^6.0.0", + "styled-components": "^6.1.8", + "talib": "^1.1.5" }, "devDependencies": { "@types/react": "^18.2.56", @@ -327,6 +331,17 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/runtime": { + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz", + "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==", + "dependencies": { + "regenerator-runtime": "^0.14.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/template": { "version": "7.24.0", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz", @@ -376,6 +391,24 @@ "node": ">=6.9.0" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", + "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/unitless": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz", + "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==" + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.19.12", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz", @@ -931,6 +964,29 @@ "node": ">= 8" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, + "node_modules/@react-aria/ssr": { + "version": "3.9.2", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.2.tgz", + "integrity": "sha512-0gKkgDYdnq1w+ey8KzG9l+H5Z821qh9vVjztk55rUg71vTk/Eaebeir+WtzcLLwTjw3m/asIjx8Y59y1lJZhBw==", + "dependencies": { + "@swc/helpers": "^0.5.0" + }, + "engines": { + "node": ">= 12" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, "node_modules/@reduxjs/toolkit": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.1.tgz", @@ -962,6 +1018,45 @@ "node": ">=14.0.0" } }, + "node_modules/@restart/hooks": { + "version": "0.4.16", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz", + "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==", + "dependencies": { + "dequal": "^2.0.3" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@restart/ui": { + "version": "1.6.6", + "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.6.tgz", + "integrity": "sha512-eC3puKuWE1SRYbojWHXnvCNHGgf3uzHCb6JOhnF4OXPibOIPEkR1sqDSkL643ydigxwh+ruCa1CmYHlzk7ikKA==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@popperjs/core": "^2.11.6", + "@react-aria/ssr": "^3.5.0", + "@restart/hooks": "^0.4.9", + "@types/warning": "^3.0.0", + "dequal": "^2.0.3", + "dom-helpers": "^5.2.0", + "uncontrollable": "^8.0.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + } + }, + "node_modules/@restart/ui/node_modules/uncontrollable": { + "version": "8.0.4", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz", + "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==", + "peerDependencies": { + "react": ">=16.14.0" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.12.1", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.12.1.tgz", @@ -1131,6 +1226,14 @@ "win32" ] }, + "node_modules/@swc/helpers": { + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.6.tgz", + "integrity": "sha512-aYX01Ke9hunpoCexYAgQucEpARGQ5w/cqHFrIR+e9gdKb1QWTsVJuTJ2ozQzIAxLyRQe/m+2RqzkyOOGiMKRQA==", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -1181,14 +1284,12 @@ "node_modules/@types/prop-types": { "version": "15.7.11", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", - "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==", - "devOptional": true + "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==" }, "node_modules/@types/react": { "version": "18.2.64", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.64.tgz", "integrity": "sha512-MlmPvHgjj2p3vZaxbQgFUQFvD8QiZwACfGqEdDSWou5yISWxDQ4/74nCAwsUiX7UFLKZz3BbVSPj+YxeoGGCfg==", - "devOptional": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -1204,17 +1305,34 @@ "@types/react": "*" } }, + "node_modules/@types/react-transition-group": { + "version": "4.4.10", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz", + "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/scheduler": { "version": "0.16.8", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", - "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", - "devOptional": true + "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==" + }, + "node_modules/@types/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==" }, "node_modules/@types/use-sync-external-store": { "version": "0.0.3", "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" }, + "node_modules/@types/warning": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz", + "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==" + }, "node_modules/@ungap/structured-clone": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", @@ -1471,6 +1589,24 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/bootstrap": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz", + "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "@popperjs/core": "^2.11.8" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -1541,6 +1677,14 @@ "node": ">=6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001596", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001596.tgz", @@ -1575,6 +1719,11 @@ "node": ">=4" } }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -1616,11 +1765,28 @@ "node": ">= 8" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "devOptional": true + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/debug": { "version": "4.3.4", @@ -1679,6 +1845,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "engines": { + "node": ">=6" + } + }, "node_modules/doctrine": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", @@ -1691,6 +1865,15 @@ "node": ">=6.0.0" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/electron-to-chromium": { "version": "1.4.699", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.699.tgz", @@ -2612,6 +2795,14 @@ "node": ">= 0.4" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/is-array-buffer": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz", @@ -3114,11 +3305,15 @@ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "dev": true }, + "node_modules/nan": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/nan/-/nan-2.19.0.tgz", + "integrity": "sha512-nO1xXxfh/RWNxfd/XPfbIfFk5vgLsAxUR9y5O0cHMJu/AW9U95JLXqthYHjEp+8gQ5p96K9jUp8nbVOxCdRbtw==" + }, "node_modules/nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", - "dev": true, "funding": [ { "type": "github", @@ -3148,7 +3343,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -3354,8 +3548,7 @@ "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", - "dev": true + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" }, "node_modules/possible-typed-array-names": { "version": "1.0.0", @@ -3394,6 +3587,11 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -3407,13 +3605,24 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, + "node_modules/prop-types-extra": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", + "dependencies": { + "react-is": "^16.3.2", + "warning": "^4.0.0" + }, + "peerDependencies": { + "react": ">=0.14.0" + } + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -3454,6 +3663,35 @@ "node": ">=0.10.0" } }, + "node_modules/react-bootstrap": { + "version": "2.10.1", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.1.tgz", + "integrity": "sha512-J3OpRZIvCTQK+Tg/jOkRUvpYLHMdGeU9KqFUBQrV0d/Qr/3nsINpiOJyZMWnM5SJ3ctZdhPA6eCIKpEJR3Ellg==", + "dependencies": { + "@babel/runtime": "^7.22.5", + "@restart/hooks": "^0.4.9", + "@restart/ui": "^1.6.6", + "@types/react-transition-group": "^4.4.6", + "classnames": "^2.3.2", + "dom-helpers": "^5.2.1", + "invariant": "^2.2.4", + "prop-types": "^15.8.1", + "prop-types-extra": "^1.1.0", + "react-transition-group": "^4.4.5", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "@types/react": ">=16.14.8", + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -3469,8 +3707,12 @@ "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, "node_modules/react-redux": { "version": "9.1.0", @@ -3537,6 +3779,21 @@ "react-dom": ">=16.8" } }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/redux": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", @@ -3579,6 +3836,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" + }, "node_modules/regexp.prototype.flags": { "version": "1.5.2", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz", @@ -3792,6 +4054,11 @@ "node": ">= 0.4" } }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -3835,7 +4102,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -3929,6 +4195,75 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/styled-components": { + "version": "6.1.8", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.8.tgz", + "integrity": "sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==", + "dependencies": { + "@emotion/is-prop-valid": "1.2.1", + "@emotion/unitless": "0.8.0", + "@types/stylis": "4.2.0", + "css-to-react-native": "3.2.0", + "csstype": "3.1.2", + "postcss": "8.4.31", + "shallowequal": "1.1.0", + "stylis": "4.3.1", + "tslib": "2.5.0" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + }, + "node_modules/styled-components/node_modules/postcss": { + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.6", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/styled-components/node_modules/tslib": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", + "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==" + }, + "node_modules/stylis": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz", + "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==" + }, "node_modules/supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -3953,6 +4288,34 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/talib": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/talib/-/talib-1.1.5.tgz", + "integrity": "sha512-at8OQzwnAt5h/6d28/rL6xEO6d7/WzkKNd7NUtNVNewFGPwazAeglXo/sqTNLBZ0zUtZ8w4sXwpapKzH3eIX6A==", + "funding": [ + { + "type": "PayPal", + "url": "https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=AZDHC49PNM7MY&item_name=talib" + }, + { + "type": "Coinbase", + "url": "https://commerce.coinbase.com/checkout/1da811db-5adf-4d02-9ab3-dd68e62234e1" + } + ], + "hasInstallScript": true, + "os": [ + "darwin", + "linux", + "freebsd", + "win32" + ], + "dependencies": { + "nan": "^2.17.0" + }, + "engines": { + "node": ">=8.16.0" + } + }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -3968,6 +4331,11 @@ "node": ">=4" } }, + "node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -4080,6 +4448,20 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/uncontrollable": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz", + "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==", + "dependencies": { + "@babel/runtime": "^7.6.3", + "@types/react": ">=16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + }, + "peerDependencies": { + "react": ">=15.0.0" + } + }, "node_modules/update-browserslist-db": { "version": "1.0.13", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz", @@ -4182,6 +4564,14 @@ } } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/package.json b/package.json index 9cb6c70..1809f16 100644 --- a/package.json +++ b/package.json @@ -11,12 +11,16 @@ }, "dependencies": { "@reduxjs/toolkit": "^2.2.1", + "bootstrap": "^5.3.3", "react": "^18.2.0", + "react-bootstrap": "^2.10.1", "react-dom": "^18.2.0", "react-redux": "^9.1.0", "react-router-dom": "^6.22.3", "redux": "^5.0.1", - "redux-persist": "^6.0.0" + "redux-persist": "^6.0.0", + "styled-components": "^6.1.8", + "talib": "^1.1.5" }, "devDependencies": { "@types/react": "^18.2.56", diff --git a/public/icon/BlankStar.svg b/public/icon/BlankStar.svg new file mode 100644 index 0000000..dda5362 --- /dev/null +++ b/public/icon/BlankStar.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icon/FilledStar.svg b/public/icon/FilledStar.svg new file mode 100644 index 0000000..cf5ddc9 --- /dev/null +++ b/public/icon/FilledStar.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icon/X.svg b/public/icon/X.svg new file mode 100644 index 0000000..6e2e13a --- /dev/null +++ b/public/icon/X.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/icon/search.svg b/public/icon/search.svg new file mode 100644 index 0000000..03c1a82 --- /dev/null +++ b/public/icon/search.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/icon/searchGray.svg b/public/icon/searchGray.svg new file mode 100644 index 0000000..9faeef6 --- /dev/null +++ b/public/icon/searchGray.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/invest/left-bar/MyStockList.jsx b/src/components/invest/left-bar/MyStockList.jsx new file mode 100644 index 0000000..4af6410 --- /dev/null +++ b/src/components/invest/left-bar/MyStockList.jsx @@ -0,0 +1,474 @@ +import React, { useState, useEffect, useRef } from "react"; +import styled from "styled-components"; + +const MyStockList = () => { + const [showSearch, setShowSearch] = useState(false); + const [searchInput, setSearchInput] = useState(""); + const [searchResults, setSearchResults] = useState([]); + const [favoriteArr, setFavoriteArr] = useState([]); + const searchRef = useRef(null); + + // useEffect(() => { + // const handleClickOutside = (event) => { + // if (searchRef.current && !searchRef.current.contains(event.target)) { + // setShowSearch(false); + // } + // }; + + // document.addEventListener("mousedown", handleClickOutside); + // return () => { + // document.removeEventListener("mousedown", handleClickOutside); + // }; + // }, []); + + // 검색어 입력에 따라 검색 결과 가져오기 + useEffect(() => { + // 예시: 서버에서 검색 결과 가져오는 함수 (fetchSearchResults) + const fetchSearchResults = async () => { + const fakeSearchResults = [ + { + id: 1, + name: "삼성전자", + code: "005930", + index: "코스피", + favorite: true, + price: "72800", + returns: "0.55%", + accvolume: "333333", + prdy_vrss: "1100", + }, + { + id: 2, + name: "삼성SDI", + code: "006400", + index: "코스피", + favorite: false, + price: "450000", + returns: "8.83%", + accvolume: "44444444", + prdy_vrss: "1100", + }, + { + id: 3, + name: "삼성물산", + code: "028260", + index: "코스피", + favorite: false, + price: "162700", + returns: "-3.15%", + accvolume: "11111", + prdy_vrss: "-5500", + }, + { + id: 4, + name: "삼성생명", + code: "032830", + index: "코스피", + favorite: true, + price: "970100", + returns: "-5.82%", + accvolume: "66753", + prdy_vrss: "-2100", + }, + ]; + + const favoriteResults = fakeSearchResults.filter( + (result) => result.favorite + ); + setFavoriteArr(favoriteResults); + setSearchResults(fakeSearchResults); + }; + + if (searchInput) { + fetchSearchResults(); + } else { + setSearchResults([]); + } + }, [searchInput]); + + const addToFavorites = (result) => { + if (!result.favorite) { + const updatedResults = [...searchResults]; + updatedResults.forEach((item) => { + if (item.id === result.id) { + item.favorite = true; + setFavoriteArr((prevArr) => [...prevArr, item]); + } + }); + + console.log(`관심 종목으로 추가: ${result.name}`); + console.log(favoriteArr); + } else { + const updatedResults = [...searchResults]; + updatedResults.forEach((item) => { + if (item.id === result.id) { + item.favorite = false; + } + }); + const updatedFavoriteArr = favoriteArr.filter( + (item) => item.id !== result.id + ); + setFavoriteArr(updatedFavoriteArr); // 해당 아이템을 favoriteArr에서 삭제 + console.log(`관심 종목에서 삭제: ${result.name}`); + console.log(favoriteArr); + } + }; + + return ( + + + 관심 종목 + setShowSearch(true)}> + {showSearch ? ( +
+ + search + setSearchInput(e.target.value)} + > + {searchInput && ( // 검색 입력값이 있는 경우에만 초기화 버튼 표시 + setSearchInput("")}> + x + + )} + { + e.stopPropagation(); + setSearchInput(""); + setShowSearch(false); + }} + > + x + + + {searchResults.length > 0 && ( + + {searchResults.map((result) => ( + + + + {result.name} + + {result.code} + {result.index} + + + addToFavorites(result)} + src={ + result.favorite + ? "/icon/FilledStar.svg" + : "/icon/BlankStar.svg" + } + alt={result.favorite ? "filledstar" : "blankstar"} + /> + + ))} + + )} +
+ ) : ( + + search + 종목 검색 + + )} + + + {favoriteArr?.map((item, idx) => ( + + + + addToFavorites(item)} + src={ + item.favorite + ? "/icon/FilledStar.svg" + : "/icon/BlankStar.svg" + } + alt={item.favorite ? "filledstar" : "blankstar"} + /> + + + {item.name} + + {item.code} + {item.index} + {item.accvolume} + + + + {item.price} + {item.returns} + {item.prdy_vrss} + + + ))} + + + + ); +}; + +const LeftContainer = styled.section` + width: 250px; + height: calc(100vh - 57px); + border-right: 1px solid #e2e2e2; +`; + +const MyItemContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; +`; + +const MyItemDiv = styled.div` + color: #000; + text-align: center; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: normal; + padding-top: 10px; + padding-bottom: 10px; + width: 100%; + border-bottom: 1px solid #c9c9c9; +`; + +const SearchContainer = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + color: #000; + text-align: center; + font-size: 22px; + font-style: normal; + font-weight: 400; + line-height: normal; + width: 100%; + border-bottom: 1px solid #c9c9c9; +`; + +const SearchWrapper = styled.label` + position: relative; + display: flex; + width: 100%; + padding: 10px; + height: 50px; + background-color: #f3f3f3; +`; + +const Img = styled.img` + position: absolute; + top: 18px; + left: 18px; + color: grey; + width: 15px; +`; + +const SearchInput = styled.input` + /* position: relative; */ + width: 85%; + padding-left: 30px; + font-size: 15px; + /* border: 1px solid grey; */ + border: none; + background-color: #f3f3f3; +`; + +const SearchClearBtn = styled.button` + position: absolute; + right: 50px; + top: 18px; + + border: none; + background: none; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +`; + +const SearchOutBtn = styled.button` + width: 10%; + margin-left: 5%; + border: none; + background: none; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +`; + +const SearchDiv = styled.div` + font-size: 18px; + width: 100%; + padding: 10px 30px; + &:hover { + background-color: #f3f3f3; + } +`; + +const SearchResults = styled.ul` + margin-top: 5px; + padding-left: 0; + list-style: none; +`; + +const SearchResult = styled.li` + display: flex; + flex-direction: row; + align-items: center; + padding: 5px 10px; + text-align: left; + height: 60px; + cursor: pointer; + &:hover { + background-color: #e8e8e8; + } +`; + +const StockDiv = styled.div` + display: flex; + flex-direction: column; + align-items: start; + width: 100%; +`; +const StockName = styled.div` + color: #000; + text-align: center; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + + /* margin-bottom: 1px; */ +`; + +const RowDiv = styled.div` + display: flex; + flex-direction: row; + color: #8c8c8c; + font-size: 12px; + font-style: normal; + font-weight: 300; + line-height: normal; +`; + +const StarImg = styled.img``; + +const MyListContainer = styled.div` + width: 100%; +`; + +const MyListDiv = styled.div` + display: flex; + flex-direction: row; + align-items: center; + padding: 5px 10px; + text-align: left; + height: 60px; +`; + +const StockCode = styled.div` + margin-right: 3px; + + ${MyListDiv}:hover & { + display: none; + } +`; + +const StockIndex = styled.div` + ${MyListDiv}:hover & { + display: none; + } +`; + +const StockVolume = styled.div` + display: none; + + ${MyListDiv}:hover & { + display: block; + } +`; + +const ToggleImg = styled.img` + width: 30px; + border-radius: 100px; + margin: 0px 10px; + + ${MyListDiv}:hover & { + display: none; + } +`; + +const ToggleImg2 = styled.img` + display: none; + + ${MyListDiv}:hover & { + display: block; + width: 15px; + border-radius: 100px; + text-align: center; + margin: 0px 10px; + } +`; + +const ImgDiv = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 30px; + margin: 0px 10px; +`; + +const PriceDiv = styled.div` + color: ${(props) => (parseFloat(props.returns) >= 0 ? "#ee2f2a" : "#2679ed")}; + text-align: right; + display: flex; + flex-direction: column; +`; + +const CurrentPrice = styled.div` + font-size: 14px; +`; + +const ChangeReturns = styled.div` + font-size: 12px; + ${MyListDiv}:hover & { + display: none; + } +`; + +const PrevVariance = styled.div` + display: none; + ${MyListDiv}:hover & { + display: block; + font-size: 12px; + } +`; + +export default MyStockList; From 97f65df23146ad03e90ee3fdb7f51f0138c5f16c Mon Sep 17 00:00:00 2001 From: eunxoo Date: Tue, 12 Mar 2024 17:02:55 +0900 Subject: [PATCH 07/84] =?UTF-8?q?feat:=20=EB=B3=B4=EC=A1=B0=EC=A7=80?= =?UTF-8?q?=ED=91=9C=20=EC=99=BC=EC=AA=BD=20=EC=82=AC=EC=9D=B4=EB=93=9C?= =?UTF-8?q?=EB=B0=94=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../invest/left-bar/ChartIndicators.jsx | 147 ++++++++++++++++++ .../invest/left-bar/IndicatorDetail.jsx | 7 + src/components/invest/left-bar/Indicators.jsx | 47 ++++++ src/routes/Trading/TradingPage.jsx | 86 ++++++++++ src/routes/Trading/page.jsx | 7 - 5 files changed, 287 insertions(+), 7 deletions(-) create mode 100644 src/components/invest/left-bar/ChartIndicators.jsx create mode 100644 src/components/invest/left-bar/IndicatorDetail.jsx create mode 100644 src/components/invest/left-bar/Indicators.jsx create mode 100644 src/routes/Trading/TradingPage.jsx delete mode 100644 src/routes/Trading/page.jsx diff --git a/src/components/invest/left-bar/ChartIndicators.jsx b/src/components/invest/left-bar/ChartIndicators.jsx new file mode 100644 index 0000000..4f51c35 --- /dev/null +++ b/src/components/invest/left-bar/ChartIndicators.jsx @@ -0,0 +1,147 @@ +import React, { useState } from "react"; +import styled from "styled-components"; +import IndicatorDetail from "./IndicatorDetail"; + +const ChartIndicators = ({ onClose }) => { + const [showDetail, setShowDetail] = useState(false); + const toggleDetail = () => { + setShowDetail(!showDetail); + }; + + const chartJson = [ + { + id: 0, + name: "SMA", + showName: "단순 이동평균선", + var: ["lineTime"], + }, + { id: 1, name: "WMA", showName: "가중 이동평균선", var: ["lineTime"] }, + { + id: 2, + name: "BBANDS", + showName: "볼린저밴드", + var: ["lineTime", "stdev"], + }, + ]; + + return ( + + + 차트지표 + + + + + 이동평균선 + 설정 + + + + + + ); +}; + +const Container = styled.div` + display: flex; + flex-direction: column; + align-items: center; +`; + +const CloseButton = styled.img` + position: absolute; + right: 10px; + top: 8px; + width: 25px; + cursor: pointer; +`; + +const IndicatorsWrapper = styled.div` + display: flex; + flex-direction: row; + width: 100%; + border-bottom: 1px solid #c9c9c9; + justify-content: center; +`; + +const IndicatorDiv = styled.div` + color: #000; + text-align: center; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: normal; + padding-top: 10px; + padding-bottom: 10px; +`; + +const ItemWrapper = styled.div` + display: flex; + height: 45px; + width: 100%; + align-items: center; + border-bottom: 1px solid #c9c9c9; + padding-right: 10px; +`; + +const CheckBox = styled.input` + position: relative; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + margin: 0px 10px; + width: 20px; + height: 20px; + border: 1.5px solid gainsboro; + border-radius: 5px; + background-color: white; + transition: background-color 0.3s, border-color 0.3s; + + &:checked { + border-color: transparent; + background-size: 100% 100%; + background-position: 50%; + background-repeat: no-repeat; + background-color: black; + + &::before { + content: "✓"; + font-size: 14px; + color: white; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } +`; + +const ItemDiv = styled.div``; + +const DetailBtn = styled.button` + margin-left: auto; + background: none; + border: 1px solid black; + border-radius: 100px; + + &:hover { + border: 1px solid black; + background-color: black; + color: white; + } +`; + +const DetailContainer = styled.div` + width: 250px; + height: 100%; + background-color: #fff; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); + transform: translateX(${(props) => (props.showDetail ? "0" : "-100%")}); + transition: transform 0.3s ease; + position: absolute; + top: 0; + left: 0; + overflow: hidden; +`; + +export default ChartIndicators; diff --git a/src/components/invest/left-bar/IndicatorDetail.jsx b/src/components/invest/left-bar/IndicatorDetail.jsx new file mode 100644 index 0000000..c85b84b --- /dev/null +++ b/src/components/invest/left-bar/IndicatorDetail.jsx @@ -0,0 +1,7 @@ +import React from "react"; + +const IndicatorDetail = () => { + return
; +}; + +export default IndicatorDetail; diff --git a/src/components/invest/left-bar/Indicators.jsx b/src/components/invest/left-bar/Indicators.jsx new file mode 100644 index 0000000..23bdef8 --- /dev/null +++ b/src/components/invest/left-bar/Indicators.jsx @@ -0,0 +1,47 @@ +import React from "react"; +import styled from "styled-components"; + +const Indicators = ({ onClose }) => { + return ( + + + 보조지표 + + + + ); +}; + +const Container = styled.div` + display: flex; + flex-direction: column; + align-items: center; +`; + +const CloseButton = styled.img` + position: absolute; + right: 10px; + top: 8px; + width: 25px; + cursor: pointer; +`; + +const IndicatorsWrapper = styled.div` + display: flex; + flex-direction: row; + width: 100%; + border-bottom: 1px solid #c9c9c9; + justify-content: center; +`; + +const IndicatorDiv = styled.div` + color: #000; + text-align: center; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: normal; + padding-top: 10px; + padding-bottom: 10px; +`; +export default Indicators; diff --git a/src/routes/Trading/TradingPage.jsx b/src/routes/Trading/TradingPage.jsx new file mode 100644 index 0000000..5d8368b --- /dev/null +++ b/src/routes/Trading/TradingPage.jsx @@ -0,0 +1,86 @@ +import React, { useState } from "react"; +import MyStockList from "../../components/invest/left-bar/MyStockList"; +import styled from "styled-components"; +import Indicators from "../../components/invest/left-bar/Indicators"; +import ChartIndicators from "../../components/invest/left-bar/ChartIndicators"; + +export default function TradingPage() { + const [showIndicators, setShowIndicators] = useState(false); + const [showCharts, setShowCharts] = useState(false); + + const toggleIndicators = () => { + setShowIndicators(!showIndicators); + setShowCharts(false); + }; + + const toggleCharts = () => { + setShowCharts(!showCharts); + setShowIndicators(false); + }; + + return ( + + + + + + + TradingPage + + + + + + + + + + ); +} + +const Container = styled.div` + display: flex; + flex-direction: row; + width: 100%; + height: 100%; + position: relative; + overflow: hidden; +`; + +const ContentContainer = styled.div` + display: flex; + flex-direction: column; + flex-grow: 1; + transition: margin-left 0.3s ease; +`; + +const Content = styled.div` + display: flex; + align-items: center; +`; + +const ChartsContainer = styled.div` + width: 250px; + height: 100%; + background-color: #fff; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); + transform: translateX(${(props) => (props.showCharts ? "0" : "-100%")}); + transition: transform 0.3s ease; + position: absolute; + top: 0; + left: 0; + overflow: hidden; +`; + +const IndicatorsContainer = styled.div` + width: 250px; + height: 100%; + background-color: #fff; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); + transform: translateX(${(props) => (props.showIndicators ? "0" : "-100%")}); + transition: transform 0.3s ease; + position: absolute; + top: 0; + left: 0; + overflow: hidden; +`; diff --git a/src/routes/Trading/page.jsx b/src/routes/Trading/page.jsx deleted file mode 100644 index 5426a6c..0000000 --- a/src/routes/Trading/page.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -export default function TradingPage() { - return ( -
TradingPage
- ) -} From ab66a028bc5175d411f895141747ed4082d55dd7 Mon Sep 17 00:00:00 2001 From: eunxoo Date: Tue, 12 Mar 2024 17:03:28 +0900 Subject: [PATCH 08/84] =?UTF-8?q?feat:=20=EB=84=A4=EB=B9=84=EB=B0=94=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/MyNavbar.jsx | 116 ++++++++++++++++++++++++++++++++++++ src/index.css | 68 --------------------- src/main.jsx | 15 ++--- src/router/main-router.jsx | 12 ++-- src/routes/mainLayout.jsx | 8 ++- 5 files changed, 135 insertions(+), 84 deletions(-) create mode 100644 src/components/MyNavbar.jsx diff --git a/src/components/MyNavbar.jsx b/src/components/MyNavbar.jsx new file mode 100644 index 0000000..673a46f --- /dev/null +++ b/src/components/MyNavbar.jsx @@ -0,0 +1,116 @@ +import React, { useContext, useEffect, useState, useMemo } from "react"; +import { Container, Navbar, Nav, Offcanvas } from "react-bootstrap"; +import { Link } from "react-router-dom"; +// import { fetchAboutUser, logout } from "~/lib/apis/user"; +// import { getCookie, removeCookie } from "~/lib/apis/cookie"; +// import { IsLoginContext, useIsLoginState } from "~/lib/hooks/isLoginContext"; +// import useAuth from "~/lib/hooks/useAuth"; +import { useSelector } from "react-redux"; + +const EXPAND_BREAKPOINT = "md"; + +const MyNavbar = ({ offCanvasTitle }) => { + // const [user, setUser] = useState(""); + // const [userId, setUserId] = useState(""); + // const [isLogin, setIsLogin] = useState(false); + // const token = getCookie("token"); + // const { setIsLogin } = useContext(IsLoginContext); + // const isLogin = useIsLoginState(); + + // const { user, clientLogout } = useAuth(); + + // const postLogout = async () => { + // try { + // const response = await logout(); + // console.log(response); + // removeCookie("token"); + // setIsLogin(false); + // clientLogout(); + // } catch (err) { + // console.error(err); + // } + // }; + + // const aboutUser = async () => { + // try { + // const userObj = await fetchAboutUser(); + // console.log(userObj); + // // setUser(userObj.data.nickname); + // setUserId(userObj.data._id); + // } catch (err) { + // console.error(err); + // } + // }; + + // useEffect(() => { + // if (token) { + // // aboutUser(); + // } else { + // } + // }, [token]); + return ( + + + invest-SNS + + + + + {offCanvasTitle || "invest-SNS"} + + + + + + + + + ); +}; + +export default MyNavbar; diff --git a/src/index.css b/src/index.css index 6119ad9..e69de29 100644 --- a/src/index.css +++ b/src/index.css @@ -1,68 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/src/main.jsx b/src/main.jsx index 54b39dd..9b9f5a2 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,11 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App.jsx' -import './index.css' +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App.jsx"; +import "./index.css"; +import "bootstrap/dist/css/bootstrap.min.css"; -ReactDOM.createRoot(document.getElementById('root')).render( +ReactDOM.createRoot(document.getElementById("root")).render( - , -) + +); diff --git a/src/router/main-router.jsx b/src/router/main-router.jsx index 8cc9ff2..ea4df1b 100644 --- a/src/router/main-router.jsx +++ b/src/router/main-router.jsx @@ -3,7 +3,7 @@ import { createBrowserRouter } from "react-router-dom"; import MainLayout from "../routes/mainLayout"; // pages -import TradingPage from "../routes/Trading/page"; +import TradingPage from "../routes/Trading/TradingPage"; import MarketInfoPage from "../routes/MarketInfo/page"; import InvestStrategyPage from "../routes/InvestStrategy/page"; import HotStockPage from "../routes/HotStock/page"; @@ -12,7 +12,7 @@ import MyPage from "../routes/MyPage/page"; export const mainRoutes = [ { - path: '/', + path: "/", element: , children: [ { @@ -45,10 +45,10 @@ export const mainRoutes = [ element: , index: true, }, - ] - } -] + ], + }, +]; const router = createBrowserRouter(mainRoutes); -export default router; \ No newline at end of file +export default router; diff --git a/src/routes/mainLayout.jsx b/src/routes/mainLayout.jsx index 3416842..4049fde 100644 --- a/src/routes/mainLayout.jsx +++ b/src/routes/mainLayout.jsx @@ -1,10 +1,12 @@ -import React from 'react'; -import { Outlet } from 'react-router-dom'; +import React from "react"; +import { Outlet } from "react-router-dom"; +import MyNavbar from "../components/MyNavbar"; export default function MainLayout() { return ( <> + - ) + ); } From bea89f7e5f0a8ee3107a6046d7c6a792c9407ad5 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Wed, 13 Mar 2024 16:51:50 +0900 Subject: [PATCH 09/84] =?UTF-8?q?feat:=20=EC=84=9C=EB=B2=84=20=EC=97=B0?= =?UTF-8?q?=EB=8F=99=20=EB=B0=8F=20=ED=85=8C=EC=8A=A4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 578 ++++++++++++++ package.json | 4 + src/components/invest/chart/MainChart.jsx | 251 +++++++ src/lib/apis/.gitkeep | 0 src/lib/apis/api.jsx | 7 + src/lib/apis/chart.jsx | 10 + src/main.jsx | 4 +- src/routes/Trading/TradingPage.jsx | 6 +- src/service/taLib.js | 878 ++++++++++++++++++++++ src/store/reducers/Chart/chart.jsx | 29 + src/store/store.js | 2 + 11 files changed, 1765 insertions(+), 4 deletions(-) create mode 100644 src/components/invest/chart/MainChart.jsx delete mode 100644 src/lib/apis/.gitkeep create mode 100644 src/lib/apis/api.jsx create mode 100644 src/lib/apis/chart.jsx create mode 100644 src/service/taLib.js create mode 100644 src/store/reducers/Chart/chart.jsx diff --git a/package-lock.json b/package-lock.json index a13bf27..6244beb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,10 +9,14 @@ "version": "0.0.0", "dependencies": { "@reduxjs/toolkit": "^2.2.1", + "axios": "^1.6.7", "bootstrap": "^5.3.3", + "d3-format": "^3.1.0", + "d3-time-format": "^4.1.0", "react": "^18.2.0", "react-bootstrap": "^2.10.1", "react-dom": "^18.2.0", + "react-financial-charts": "^2.0.1", "react-redux": "^9.1.0", "react-router-dom": "^6.22.3", "redux": "^5.0.1", @@ -987,6 +991,291 @@ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" } }, + "node_modules/@react-financial-charts/annotations": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@react-financial-charts/annotations/-/annotations-2.0.0.tgz", + "integrity": "sha512-pnpZa2+h5p3mQ5vR5Z36LgVT0UaWe0V5JfvLdLa97NIBKsLZwzJNP//KXK5T3cdK2RmgHFNbEegpSxYgk4hLYw==", + "dependencies": { + "@react-financial-charts/core": "^2.0.0", + "@types/d3-scale": "^3.2.2" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-financial-charts/axes": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@react-financial-charts/axes/-/axes-2.0.0.tgz", + "integrity": "sha512-VbkKsL+Hp92YpJmC5sDYq9D7z8CIjOtzNGdS+cuSALkU0NHD7XLhzO4GxiSUMMzrp99ecnBOv+2vdgNqEROYtg==", + "dependencies": { + "@react-financial-charts/core": "^2.0.0", + "@types/d3-scale": "^3.2.2", + "d3-array": "^2.9.1", + "d3-force": "^2.1.1", + "d3-scale": "^3.2.3", + "d3-selection": "^2.0.0" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-financial-charts/axes/node_modules/d3-array": { + "version": "2.12.1", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz", + "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==", + "dependencies": { + "internmap": "^1.0.0" + } + }, + "node_modules/@react-financial-charts/axes/node_modules/internmap": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz", + "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==" + }, + "node_modules/@react-financial-charts/coordinates": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@react-financial-charts/coordinates/-/coordinates-2.0.0.tgz", + "integrity": "sha512-sC9sIrfFJ0GDmOXjZd5TBOToDS6FZKZtbZ0ZabNQzlIullHYRZrkZ4tyHl+Wsji7AmeVQjeE0LlAd1spqSVYEg==", + "dependencies": { + "@react-financial-charts/core": "^2.0.0", + "d3-format": "^2.0.0" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-financial-charts/coordinates/node_modules/d3-format": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz", + "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==" + }, + "node_modules/@react-financial-charts/core": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@react-financial-charts/core/-/core-2.0.0.tgz", + "integrity": "sha512-WduXh6Vf1N6qgbTl+U4MYBVuvk7MN8yaVB1aOy6FVFXqaZfQUaNIwk/s5LadgSIPjzK7g3NOdBG4StR9RFzy7w==", + "dependencies": { + "@types/d3-scale": "^3.2.2", + "d3-array": "^2.9.1", + "d3-scale": "^3.2.3", + "d3-selection": "^2.0.0", + "lodash.flattendeep": "^4.4.0" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-financial-charts/core/node_modules/d3-array": { + "version": "2.12.1", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz", + "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==", + "dependencies": { + "internmap": "^1.0.0" + } + }, + "node_modules/@react-financial-charts/core/node_modules/internmap": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz", + "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==" + }, + "node_modules/@react-financial-charts/indicators": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@react-financial-charts/indicators/-/indicators-2.0.0.tgz", + "integrity": "sha512-6DU3EaA+11twkSrN/wZ9wDEquvKLTaELt4qJ3M8YIX8wWnKyOFWlyzGjmn77hEa7iRv1VuVFNITEviWzy2Nq+A==", + "dependencies": { + "d3-array": "^2.9.1", + "d3-scale": "^3.2.3" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-financial-charts/indicators/node_modules/d3-array": { + "version": "2.12.1", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz", + "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==", + "dependencies": { + "internmap": "^1.0.0" + } + }, + "node_modules/@react-financial-charts/indicators/node_modules/internmap": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz", + "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==" + }, + "node_modules/@react-financial-charts/interactive": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@react-financial-charts/interactive/-/interactive-2.0.0.tgz", + "integrity": "sha512-wZHEqUGNHpsrBpidk49pY0sXtAhYi2gQVWUW7xJbgVP1iE+Jpwtodbl6EOf16MGx3sQJuL1qwJvn2wwFObgl1g==", + "dependencies": { + "@react-financial-charts/coordinates": "^2.0.0", + "@react-financial-charts/core": "^2.0.0", + "d3-array": "^2.9.1", + "d3-format": "^2.0.0", + "d3-interpolate": "^2.0.1", + "d3-path": "^2.0.0" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-financial-charts/interactive/node_modules/d3-array": { + "version": "2.12.1", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz", + "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==", + "dependencies": { + "internmap": "^1.0.0" + } + }, + "node_modules/@react-financial-charts/interactive/node_modules/d3-format": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz", + "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==" + }, + "node_modules/@react-financial-charts/interactive/node_modules/internmap": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz", + "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==" + }, + "node_modules/@react-financial-charts/scales": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@react-financial-charts/scales/-/scales-2.0.0.tgz", + "integrity": "sha512-8lFXl/mWZ36LsNVHEtTUSURycceNxCWUeU8zY8SsssjQK7FaFPO29KIff+UVYdnlH5QVHVfaUHI/NNWn5wkPIA==", + "dependencies": { + "@react-financial-charts/core": "^2.0.0", + "d3-array": "^2.9.1", + "d3-scale": "^3.2.3", + "d3-time-format": "^3.0.0" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-financial-charts/scales/node_modules/d3-array": { + "version": "2.12.1", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz", + "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==", + "dependencies": { + "internmap": "^1.0.0" + } + }, + "node_modules/@react-financial-charts/scales/node_modules/d3-time": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz", + "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==", + "dependencies": { + "d3-array": "2" + } + }, + "node_modules/@react-financial-charts/scales/node_modules/d3-time-format": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz", + "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==", + "dependencies": { + "d3-time": "1 - 2" + } + }, + "node_modules/@react-financial-charts/scales/node_modules/internmap": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz", + "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==" + }, + "node_modules/@react-financial-charts/series": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@react-financial-charts/series/-/series-2.0.0.tgz", + "integrity": "sha512-hVQEjzKaSLRcPLX8vibtOZa776wbZ3cWYrUtVZ9eYZ7ROHJ2pZslE4GwFV7o74Hjdet7a5AmCwASm3NkeXsFaQ==", + "dependencies": { + "@react-financial-charts/core": "^2.0.0", + "@types/d3-scale": "^3.2.2", + "d3-array": "^2.9.1", + "d3-scale": "^3.2.3", + "d3-shape": "^2.0.0" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-financial-charts/series/node_modules/d3-array": { + "version": "2.12.1", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz", + "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==", + "dependencies": { + "internmap": "^1.0.0" + } + }, + "node_modules/@react-financial-charts/series/node_modules/internmap": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz", + "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==" + }, + "node_modules/@react-financial-charts/tooltip": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@react-financial-charts/tooltip/-/tooltip-2.0.0.tgz", + "integrity": "sha512-EEAveu07nafgWVdZK7SNHAwqKVoKLKEjZBq7obhOGdnQ+1CSnQlyO+r6ISyabQt/XBpnASVCwqlK2NHewdoWxA==", + "dependencies": { + "@react-financial-charts/core": "^2.0.0", + "d3-array": "^2.9.1", + "d3-format": "^2.0.0", + "d3-time-format": "^3.0.0" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-financial-charts/tooltip/node_modules/d3-array": { + "version": "2.12.1", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz", + "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==", + "dependencies": { + "internmap": "^1.0.0" + } + }, + "node_modules/@react-financial-charts/tooltip/node_modules/d3-format": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz", + "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==" + }, + "node_modules/@react-financial-charts/tooltip/node_modules/d3-time": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz", + "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==", + "dependencies": { + "d3-array": "2" + } + }, + "node_modules/@react-financial-charts/tooltip/node_modules/d3-time-format": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz", + "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==", + "dependencies": { + "d3-time": "1 - 2" + } + }, + "node_modules/@react-financial-charts/tooltip/node_modules/internmap": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz", + "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==" + }, + "node_modules/@react-financial-charts/utils": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@react-financial-charts/utils/-/utils-2.0.1.tgz", + "integrity": "sha512-oUyfiURZ4bwTl+9794/BE+oAyK+7MkclOoL3rMQl4NtAY5Xb4NHAGCwK2Zh82gf0f2/68Rl4rho4lpFCDsFYmg==", + "dependencies": { + "react-virtualized-auto-sizer": "^1.0.16" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@reduxjs/toolkit": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.1.tgz", @@ -1275,6 +1564,19 @@ "@babel/types": "^7.20.7" } }, + "node_modules/@types/d3-scale": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-3.3.5.tgz", + "integrity": "sha512-YOpKj0kIEusRf7ofeJcSZQsvKbnTwpe1DUF+P2qsotqG53kEsjm7EzzliqQxMkAWdkZcHrg5rRhB4JiDOQPX+A==", + "dependencies": { + "@types/d3-time": "^2" + } + }, + "node_modules/@types/d3-time": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.1.4.tgz", + "integrity": "sha512-BTfLsxTeo7yFxI/haOOf1ZwJ6xKgQLT9dCp+EcmQv87Gox6X+oKl4mLKfO6fnWm3P22+A6DknMNEZany8ql2Rw==" + }, "node_modules/@types/estree": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", @@ -1568,6 +1870,11 @@ "has-symbols": "^1.0.3" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, "node_modules/available-typed-arrays": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", @@ -1583,6 +1890,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/axios": { + "version": "1.6.7", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz", + "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==", + "dependencies": { + "follow-redirects": "^1.15.4", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -1739,6 +2056,17 @@ "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", "dev": true }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -1788,6 +2116,149 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, + "node_modules/d3-array": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz", + "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==", + "dependencies": { + "internmap": "1 - 2" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz", + "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==" + }, + "node_modules/d3-dispatch": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-2.0.0.tgz", + "integrity": "sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA==" + }, + "node_modules/d3-force": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-2.1.1.tgz", + "integrity": "sha512-nAuHEzBqMvpFVMf9OX75d00OxvOXdxY+xECIXjW6Gv8BRrXu6gAWbv/9XKrvfJ5i5DCokDW7RYE50LRoK092ew==", + "dependencies": { + "d3-dispatch": "1 - 2", + "d3-quadtree": "1 - 2", + "d3-timer": "1 - 2" + } + }, + "node_modules/d3-format": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz", + "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==", + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-interpolate": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz", + "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==", + "dependencies": { + "d3-color": "1 - 2" + } + }, + "node_modules/d3-path": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-2.0.0.tgz", + "integrity": "sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA==" + }, + "node_modules/d3-quadtree": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-2.0.0.tgz", + "integrity": "sha512-b0Ed2t1UUalJpc3qXzKi+cPGxeXRr4KU9YSlocN74aTzp6R/Ud43t79yLLqxHRWZfsvWXmbDWPpoENK1K539xw==" + }, + "node_modules/d3-scale": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz", + "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==", + "dependencies": { + "d3-array": "^2.3.0", + "d3-format": "1 - 2", + "d3-interpolate": "1.2.0 - 2", + "d3-time": "^2.1.1", + "d3-time-format": "2 - 3" + } + }, + "node_modules/d3-scale/node_modules/d3-array": { + "version": "2.12.1", + "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz", + "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==", + "dependencies": { + "internmap": "^1.0.0" + } + }, + "node_modules/d3-scale/node_modules/d3-format": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz", + "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==" + }, + "node_modules/d3-scale/node_modules/d3-time": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz", + "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==", + "dependencies": { + "d3-array": "2" + } + }, + "node_modules/d3-scale/node_modules/d3-time-format": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz", + "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==", + "dependencies": { + "d3-time": "1 - 2" + } + }, + "node_modules/d3-scale/node_modules/internmap": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz", + "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==" + }, + "node_modules/d3-selection": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz", + "integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA==" + }, + "node_modules/d3-shape": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.1.0.tgz", + "integrity": "sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==", + "dependencies": { + "d3-path": "1 - 2" + } + }, + "node_modules/d3-time": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz", + "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==", + "dependencies": { + "d3-array": "2 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-time-format": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz", + "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==", + "dependencies": { + "d3-time": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-timer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz", + "integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA==" + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -1845,6 +2316,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/dequal": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", @@ -2457,6 +2936,25 @@ "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.15.5", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", + "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -2466,6 +2964,19 @@ "is-callable": "^1.1.3" } }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -2795,6 +3306,14 @@ "node": ">= 0.4" } }, + "node_modules/internmap": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", + "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==", + "engines": { + "node": ">=12" + } + }, "node_modules/invariant": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", @@ -3261,6 +3780,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash.flattendeep": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz", + "integrity": "sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ==" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -3287,6 +3811,25 @@ "yallist": "^3.0.2" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -3623,6 +4166,11 @@ "react": ">=0.14.0" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -3704,6 +4252,27 @@ "react": "^18.2.0" } }, + "node_modules/react-financial-charts": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/react-financial-charts/-/react-financial-charts-2.0.1.tgz", + "integrity": "sha512-KpPns2e+Dp90JcavkshhTXBAmw4mAmQunCU5V1QsWFNSIWIubmcigf3BvWxBJBrw9R6gpA91L9fUQsSAjDV3Bg==", + "dependencies": { + "@react-financial-charts/annotations": "^2.0.0", + "@react-financial-charts/axes": "^2.0.0", + "@react-financial-charts/coordinates": "^2.0.0", + "@react-financial-charts/core": "^2.0.0", + "@react-financial-charts/indicators": "^2.0.0", + "@react-financial-charts/interactive": "^2.0.0", + "@react-financial-charts/scales": "^2.0.0", + "@react-financial-charts/series": "^2.0.0", + "@react-financial-charts/tooltip": "^2.0.0", + "@react-financial-charts/utils": "^2.0.1" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -3794,6 +4363,15 @@ "react-dom": ">=16.6.0" } }, + "node_modules/react-virtualized-auto-sizer": { + "version": "1.0.24", + "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.24.tgz", + "integrity": "sha512-3kCn7N9NEb3FlvJrSHWGQ4iVl+ydQObq2fHMn12i5wbtm74zHOPhz/i64OL3c1S1vi9i2GXtZqNqUJTQ+BnNfg==", + "peerDependencies": { + "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0", + "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0" + } + }, "node_modules/redux": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", diff --git a/package.json b/package.json index 1809f16..09b2381 100644 --- a/package.json +++ b/package.json @@ -11,10 +11,14 @@ }, "dependencies": { "@reduxjs/toolkit": "^2.2.1", + "axios": "^1.6.7", "bootstrap": "^5.3.3", + "d3-format": "^3.1.0", + "d3-time-format": "^4.1.0", "react": "^18.2.0", "react-bootstrap": "^2.10.1", "react-dom": "^18.2.0", + "react-financial-charts": "^2.0.1", "react-redux": "^9.1.0", "react-router-dom": "^6.22.3", "redux": "^5.0.1", diff --git a/src/components/invest/chart/MainChart.jsx b/src/components/invest/chart/MainChart.jsx new file mode 100644 index 0000000..651fc56 --- /dev/null +++ b/src/components/invest/chart/MainChart.jsx @@ -0,0 +1,251 @@ +import React, { useEffect, useState } from "react"; +import ReactDOM from "react-dom"; +import { format } from "d3-format"; +import { timeFormat } from "d3-time-format"; +import { + elderRay, + ema, + discontinuousTimeScaleProviderBuilder, + Chart, + ChartCanvas, + CurrentCoordinate, + BarSeries, + CandlestickSeries, + ElderRaySeries, + LineSeries, + MovingAverageTooltip, + OHLCTooltip, + SingleValueTooltip, + lastVisibleItemBasedZoomAnchor, + XAxis, + YAxis, + CrossHairCursor, + EdgeIndicator, + MouseCoordinateX, + MouseCoordinateY, + ZoomButtons, + withDeviceRatio, + withSize, + HoverTooltip, +} from "react-financial-charts"; +import { chartInstance } from '../../../lib/apis/api'; +import { useSelector, useDispatch } from 'react-redux'; +import { getChartDatas } from '../../../store/reducers/Chart/chart' + +export default function MainChart() { + const dataList = useSelector((state) => state.chart.datas) + const dispatch = useDispatch(); + const [datas, setDatas] = useState([]); + async function getData() { + const data = await chartInstance.post('/', { + "code" : "005930", + "start_date" : "20220101", + "end_date" : "20220809", + "time_format" : "D" + }) + setDatas(data.data); + } + + useEffect(() => { + getData(); + dispatch(getChartDatas()) + .then((res) => { + console.log('data payload',res.payload) + }) + + console.log('데이터:', dataList) + }, []) + + const ScaleProvider = discontinuousTimeScaleProviderBuilder().inputDateAccessor( + (d) => { + const year = d.date.substr(0, 4) + const month = d.date.substr(4, 2) + const day = d.date.substr(6, 2) + const nDate = `${year}-${month}-${day}` + return new Date(nDate) + } + ); + const margin = { left: 0, right: 78, top: 0, bottom: 24 }; + + const height = 800; + const width = 1200; + + // 이동평균선(EMA) 계산하는 함수 + // const ema12 = ema() + // .id(1) + // .options({ windowSize: 12 }) + // .merge((d, c) => { + // d.ema12 = c; + // }) + // .accessor((d) => d.ema12); + + // const ema26 = ema() + // .id(2) + // .options({ windowSize: 26 }) + // .merge((d, c) => { + // d.ema26 = c; + // }) + // .accessor((d) => d.ema26); + + // const elder = elderRay(); + + // const calculatedData = elder(ema26(ema12(initialData))); + const { data, xScale, xAccessor, displayXAccessor } = ScaleProvider( + datas.reverse() + ); + + // 소수점 이하 둘째짜리까지만 표현 + const pricesDisplayFormat = format(".2f"); + const x_max = xAccessor(data[data.length - 1]); + const x_min = xAccessor(data[Math.max(0, data.length - 100)]); + const xExtents = [x_min, x_max + 5]; + + const gridHeight = height - margin.top - margin.bottom; + + const elderRayHeight = 100; + const elderRayOrigin = (_, h) => [0, h]; + const barChartHeight = gridHeight / 4; + const barChartOrigin = (_, h) => [0, h - barChartHeight]; + const chartHeight = gridHeight - barChartHeight; + const yExtents = (data) => { + return [data.high, data.low]; + }; + const dateTimeFormat = "%d %b"; + const timeDisplayFormat = timeFormat(dateTimeFormat); + + const hoverTimeFormat = "%B %d, %Y"; + const HoverDisplayFormat = timeFormat(hoverTimeFormat); + + const barChartExtents = (data) => { + return data.volume; + }; + + const candleChartExtents = (data) => { + return [data.high, data.low]; + }; + + const yEdgeIndicator = (data) => { + return data.close; + }; + + const volumeColor = (data) => { + return data.close > data.open + ? "rgba(38, 166, 154, 0.3)" + : "rgba(239, 83, 80, 0.3)"; + }; + + const volumeSeries = (data) => { + return data.volume; + }; + + const openCloseColor = (data) => { + return data.close > data.open ? "#26a69a" : "#ef5350"; + }; + + function tooltipContent() { + return ({ currentItem, xAccessor }) => { + return { + x: HoverDisplayFormat(xAccessor(currentItem)), + y: [ + { + label: "시가", + value: currentItem.open && pricesDisplayFormat(currentItem.open) + }, + { + label: "고가", + value: currentItem.high && pricesDisplayFormat(currentItem.high) + }, + { + label: "저가", + value: currentItem.low && pricesDisplayFormat(currentItem.low) + }, + { + label: "종가", + value: currentItem.close && pricesDisplayFormat(currentItem.close) + }, + { + label: "거래량", + value: currentItem.volume && pricesDisplayFormat(currentItem.volume) + }, + ] + }; + }; + } + + function volumeContent() { + return ({ currentItem, xAccessor }) => { + return { + x: HoverDisplayFormat(xAccessor(currentItem)), + y: [ + { + label: "거래량", + value: currentItem.volume && pricesDisplayFormat(currentItem.volume) + }, + ] + }; + }; + } + + return ( + + + {/* 분봉 호버했을 때, 날짜/시가/종가/고가/저가 표시 */} + + + + + + + + + + + + + {/* 거래량 차트 */} + + {/* */} + + + + + + + + ); +} \ No newline at end of file diff --git a/src/lib/apis/.gitkeep b/src/lib/apis/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/lib/apis/api.jsx b/src/lib/apis/api.jsx new file mode 100644 index 0000000..24a4c77 --- /dev/null +++ b/src/lib/apis/api.jsx @@ -0,0 +1,7 @@ +import axios from "axios"; + +export const BASE_URL = 'http://127.0.0.1:3000/api'; + +export const chartInstance = axios.create({ + baseURL: BASE_URL + "/stockPrice", +}); \ No newline at end of file diff --git a/src/lib/apis/chart.jsx b/src/lib/apis/chart.jsx new file mode 100644 index 0000000..39f4773 --- /dev/null +++ b/src/lib/apis/chart.jsx @@ -0,0 +1,10 @@ +import { BASE_URL, chartInstance } from './api'; + +export async function getChartData() { + return await chartInstance.post('/', { + "code" : "005930", + "start_date" : "20220101", + "end_date" : "20220809", + "time_format" : "D" + }) +} \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index 9b9f5a2..df6b537 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -5,7 +5,7 @@ import "./index.css"; import "bootstrap/dist/css/bootstrap.min.css"; ReactDOM.createRoot(document.getElementById("root")).render( - + // - + // ); diff --git a/src/routes/Trading/TradingPage.jsx b/src/routes/Trading/TradingPage.jsx index 5d8368b..571169c 100644 --- a/src/routes/Trading/TradingPage.jsx +++ b/src/routes/Trading/TradingPage.jsx @@ -3,6 +3,7 @@ import MyStockList from "../../components/invest/left-bar/MyStockList"; import styled from "styled-components"; import Indicators from "../../components/invest/left-bar/Indicators"; import ChartIndicators from "../../components/invest/left-bar/ChartIndicators"; +import MainChart from '../../components/invest/chart/MainChart'; export default function TradingPage() { const [showIndicators, setShowIndicators] = useState(false); @@ -21,7 +22,8 @@ export default function TradingPage() { return ( - + + {/* @@ -33,7 +35,7 @@ export default function TradingPage() { - + */} ); } diff --git a/src/service/taLib.js b/src/service/taLib.js new file mode 100644 index 0000000..c820c32 --- /dev/null +++ b/src/service/taLib.js @@ -0,0 +1,878 @@ +import talib from 'talib'; + +function processData(stockData){ + let marketData = {open:[], high:[], low:[], close:[],volume:[]} + stockData.map(el=>{ + marketData.open.push(el.open) + marketData.high.push(el.high) + marketData.low.push(el.low) + marketData.close.push(el.close) + marketData.volume.push(el.volume) + }) + return marketData; +} + +function SMA(stockData, lineTime){ + const marketData = processData(stockData); + + var indicatorParams = { + name: "SMA", + startIdx: 0, + endIdx: marketData.close.length - 1, + inReal: marketData.close, + optInTimePeriod: lineTime, + }; + + talib.execute(indicatorParams, function (err, result) { + if (err) { + console.error("Error:", err); + } else { + return result; + } + }); +} + +function WMA(stockData, lineTime){ + const marketData = processData(stockData); + var indicatorParams = { + name: "WMA", + startIdx: 0, + endIdx: marketData.close.length - 1, + inReal: marketData.close, + optInTimePeriod: lineTime, + }; + talib.execute(indicatorParams, function (err, result) { + if (err) { + console.error("Error:", err); + } else { + console.log(result); + return result; + } + }); +} + +function BBANDS(stockData, lineTime, stdev){ + const marketData = processData(stockData); + var indicatorParams = { + name: "BBANDS", + startIdx: 0, + endIdx: marketData.close.length - 1, + inReal: marketData.close, + optInTimePeriod: lineTime, + optInNbDevUp: stdev, + optInNbDevDn: stdev, + optInMAType: 0, + }; + talib.execute(indicatorParams, function (err, result) { + if (err) { + console.error("Error:", err); + } else { + return result; + } + }); +} + +WMA( + [ + { + "open": 60600, + "close": 60000, + "high": 60700, + "low": 59600, + "volume": 18251170, + "date": "20220809" + }, + { + "open": 61400, + "close": 60800, + "high": 61400, + "low": 60600, + "volume": 11313150, + "date": "20220808" + }, + { + "open": 61700, + "close": 61500, + "high": 61900, + "low": 61200, + "volume": 9567620, + "date": "20220805" + }, + { + "open": 61700, + "close": 61500, + "high": 61800, + "low": 61200, + "volume": 9125439, + "date": "20220804" + }, + { + "open": 61600, + "close": 61300, + "high": 61600, + "low": 61000, + "volume": 10053861, + "date": "20220803" + }, + { + "open": 61200, + "close": 61700, + "high": 61900, + "low": 61000, + "volume": 13614895, + "date": "20220802" + }, + { + "open": 61000, + "close": 61300, + "high": 61700, + "low": 60300, + "volume": 13154816, + "date": "20220801" + }, + { + "open": 62400, + "close": 61400, + "high": 62600, + "low": 61300, + "volume": 15093120, + "date": "20220729" + }, + { + "open": 62300, + "close": 61900, + "high": 62600, + "low": 61600, + "volume": 10745302, + "date": "20220728" + }, + { + "open": 61300, + "close": 61800, + "high": 61900, + "low": 61200, + "volume": 7320997, + "date": "20220727" + }, + { + "open": 60800, + "close": 61700, + "high": 61900, + "low": 60800, + "volume": 6597211, + "date": "20220726" + }, + { + "open": 60900, + "close": 61100, + "high": 61900, + "low": 60800, + "volume": 9193681, + "date": "20220725" + }, + { + "open": 61800, + "close": 61300, + "high": 62200, + "low": 61200, + "volume": 10261310, + "date": "20220722" + }, + { + "open": 61100, + "close": 61800, + "high": 61900, + "low": 60700, + "volume": 12291374, + "date": "20220721" + }, + { + "open": 61800, + "close": 60500, + "high": 62100, + "low": 60500, + "volume": 16782238, + "date": "20220720" + }, + { + "open": 61400, + "close": 60900, + "high": 61500, + "low": 60200, + "volume": 15248261, + "date": "20220719" + }, + { + "open": 60600, + "close": 61900, + "high": 62000, + "low": 60500, + "volume": 20832517, + "date": "20220718" + }, + { + "open": 58400, + "close": 60000, + "high": 60000, + "low": 58100, + "volume": 18685583, + "date": "20220715" + }, + { + "open": 57500, + "close": 57500, + "high": 58200, + "low": 57400, + "volume": 15067012, + "date": "20220714" + }, + { + "open": 58300, + "close": 58000, + "high": 58600, + "low": 58000, + "volume": 10841315, + "date": "20220713" + }, + { + "open": 58600, + "close": 58100, + "high": 58700, + "low": 58100, + "volume": 9336061, + "date": "20220712" + }, + { + "open": 59300, + "close": 58800, + "high": 59600, + "low": 58700, + "volume": 13042624, + "date": "20220711" + }, + { + "open": 58600, + "close": 58700, + "high": 59300, + "low": 58200, + "volume": 15339271, + "date": "20220708" + }, + { + "open": 56400, + "close": 58200, + "high": 58700, + "low": 56300, + "volume": 21322833, + "date": "20220707" + }, + { + "open": 57300, + "close": 56400, + "high": 57300, + "low": 56400, + "volume": 16820461, + "date": "20220706" + }, + { + "open": 57600, + "close": 57200, + "high": 58200, + "low": 57200, + "volume": 14216539, + "date": "20220705" + }, + { + "open": 56100, + "close": 57100, + "high": 57400, + "low": 55700, + "volume": 17807126, + "date": "20220704" + }, + { + "open": 56900, + "close": 56200, + "high": 57500, + "low": 55900, + "volume": 24982097, + "date": "20220701" + }, + { + "open": 57200, + "close": 57000, + "high": 57600, + "low": 57000, + "volume": 18915142, + "date": "20220630" + }, + { + "open": 58500, + "close": 58000, + "high": 58800, + "low": 58000, + "volume": 14677138, + "date": "20220629" + }, + { + "open": 59200, + "close": 59400, + "high": 59500, + "low": 58700, + "volume": 13540538, + "date": "20220628" + }, + { + "open": 59000, + "close": 58800, + "high": 59900, + "low": 58300, + "volume": 18122236, + "date": "20220627" + }, + { + "open": 57900, + "close": 58400, + "high": 59100, + "low": 57700, + "volume": 23256103, + "date": "20220624" + }, + { + "open": 57700, + "close": 57400, + "high": 58000, + "low": 56800, + "volume": 28338608, + "date": "20220623" + }, + { + "open": 59000, + "close": 57600, + "high": 59100, + "low": 57600, + "volume": 23334687, + "date": "20220622" + }, + { + "open": 58700, + "close": 58500, + "high": 59200, + "low": 58200, + "volume": 25148109, + "date": "20220621" + }, + { + "open": 59800, + "close": 58700, + "high": 59900, + "low": 58100, + "volume": 34111306, + "date": "20220620" + }, + { + "open": 59400, + "close": 59800, + "high": 59900, + "low": 59400, + "volume": 29053450, + "date": "20220617" + }, + { + "open": 61300, + "close": 60900, + "high": 61800, + "low": 60500, + "volume": 23394895, + "date": "20220616" + }, + { + "open": 61300, + "close": 60700, + "high": 61500, + "low": 60200, + "volume": 26811224, + "date": "20220615" + }, + { + "open": 61200, + "close": 61900, + "high": 62200, + "low": 61100, + "volume": 24606419, + "date": "20220614" + }, + { + "open": 62400, + "close": 62100, + "high": 62800, + "low": 62100, + "volume": 22157816, + "date": "20220613" + }, + { + "open": 64000, + "close": 63800, + "high": 64400, + "low": 63800, + "volume": 22193552, + "date": "20220610" + }, + { + "open": 65100, + "close": 65200, + "high": 65200, + "low": 64500, + "volume": 25790725, + "date": "20220609" + }, + { + "open": 65400, + "close": 65300, + "high": 65700, + "low": 65300, + "volume": 12483180, + "date": "20220608" + }, + { + "open": 66200, + "close": 65500, + "high": 66400, + "low": 65400, + "volume": 19355755, + "date": "20220607" + }, + { + "open": 67200, + "close": 66800, + "high": 67300, + "low": 66800, + "volume": 8222883, + "date": "20220603" + }, + { + "open": 66600, + "close": 66700, + "high": 67000, + "low": 66400, + "volume": 14959443, + "date": "20220602" + }, + { + "open": 67500, + "close": 67400, + "high": 67500, + "low": 66700, + "volume": 24365002, + "date": "20220531" + }, + { + "open": 67500, + "close": 67700, + "high": 67800, + "low": 66900, + "volume": 14255484, + "date": "20220530" + }, + { + "open": 66700, + "close": 66500, + "high": 66900, + "low": 66200, + "volume": 11405555, + "date": "20220527" + }, + { + "open": 66300, + "close": 65900, + "high": 67200, + "low": 65500, + "volume": 15970890, + "date": "20220526" + }, + { + "open": 66700, + "close": 66400, + "high": 67100, + "low": 65900, + "volume": 15150490, + "date": "20220525" + }, + { + "open": 67500, + "close": 66500, + "high": 67700, + "low": 66500, + "volume": 15482576, + "date": "20220524" + }, + { + "open": 68800, + "close": 67900, + "high": 68800, + "low": 67600, + "volume": 13684088, + "date": "20220523" + }, + { + "open": 67800, + "close": 68000, + "high": 68400, + "low": 67700, + "volume": 12109671, + "date": "20220520" + }, + { + "open": 66500, + "close": 67500, + "high": 67600, + "low": 66500, + "volume": 17073727, + "date": "20220519" + }, + { + "open": 68300, + "close": 68100, + "high": 68700, + "low": 67600, + "volume": 16486319, + "date": "20220518" + }, + { + "open": 66600, + "close": 67600, + "high": 67900, + "low": 66600, + "volume": 15680447, + "date": "20220517" + }, + { + "open": 67100, + "close": 66300, + "high": 67400, + "low": 66100, + "volume": 11937555, + "date": "20220516" + }, + { + "open": 65300, + "close": 66500, + "high": 66700, + "low": 65200, + "volume": 14551536, + "date": "20220513" + }, + { + "open": 65200, + "close": 64900, + "high": 65500, + "low": 64900, + "volume": 16414188, + "date": "20220512" + }, + { + "open": 65500, + "close": 65700, + "high": 66300, + "low": 65200, + "volume": 12330920, + "date": "20220511" + }, + { + "open": 65900, + "close": 65700, + "high": 66300, + "low": 65300, + "volume": 17235605, + "date": "20220510" + }, + { + "open": 66300, + "close": 66100, + "high": 66900, + "low": 66100, + "volume": 11858736, + "date": "20220509" + }, + { + "open": 67000, + "close": 66500, + "high": 67100, + "low": 66500, + "volume": 14356156, + "date": "20220506" + }, + { + "open": 68000, + "close": 67900, + "high": 68400, + "low": 67500, + "volume": 11505248, + "date": "20220504" + }, + { + "open": 67400, + "close": 67500, + "high": 68400, + "low": 67300, + "volume": 14168875, + "date": "20220503" + }, + { + "open": 66600, + "close": 67300, + "high": 67600, + "low": 66500, + "volume": 14106184, + "date": "20220502" + }, + { + "open": 65100, + "close": 67400, + "high": 67600, + "low": 65000, + "volume": 26190390, + "date": "20220429" + }, + { + "open": 65400, + "close": 64800, + "high": 65500, + "low": 64500, + "volume": 16895527, + "date": "20220428" + }, + { + "open": 65400, + "close": 65000, + "high": 65500, + "low": 64900, + "volume": 18122084, + "date": "20220427" + }, + { + "open": 66400, + "close": 66100, + "high": 66700, + "low": 66100, + "volume": 12946923, + "date": "20220426" + }, + { + "open": 66500, + "close": 66300, + "high": 66700, + "low": 66300, + "volume": 11016474, + "date": "20220425" + }, + { + "open": 67200, + "close": 67000, + "high": 67300, + "low": 66700, + "volume": 11791478, + "date": "20220422" + }, + { + "open": 67600, + "close": 67700, + "high": 68300, + "low": 67500, + "volume": 12847448, + "date": "20220421" + }, + { + "open": 67000, + "close": 67400, + "high": 67400, + "low": 66500, + "volume": 16693293, + "date": "20220420" + }, + { + "open": 67100, + "close": 67300, + "high": 68000, + "low": 67000, + "volume": 12959434, + "date": "20220419" + }, + { + "open": 66500, + "close": 66700, + "high": 67100, + "low": 66100, + "volume": 10119203, + "date": "20220418" + }, + { + "open": 67200, + "close": 66600, + "high": 67300, + "low": 66500, + "volume": 13176415, + "date": "20220415" + }, + { + "open": 68700, + "close": 67500, + "high": 68700, + "low": 67500, + "volume": 16409494, + "date": "20220414" + }, + { + "open": 67300, + "close": 68700, + "high": 69000, + "low": 67200, + "volume": 17378619, + "date": "20220413" + }, + { + "open": 67600, + "close": 67000, + "high": 67700, + "low": 67000, + "volume": 13924389, + "date": "20220412" + }, + { + "open": 67800, + "close": 67900, + "high": 68100, + "low": 67400, + "volume": 12263735, + "date": "20220411" + }, + { + "open": 68100, + "close": 67800, + "high": 68300, + "low": 67700, + "volume": 15453191, + "date": "20220408" + }, + { + "open": 68500, + "close": 68000, + "high": 68500, + "low": 68000, + "volume": 20683327, + "date": "20220407" + }, + { + "open": 68600, + "close": 68500, + "high": 68800, + "low": 68500, + "volume": 15517308, + "date": "20220406" + }, + { + "open": 69400, + "close": 69200, + "high": 69600, + "low": 69100, + "volume": 8467248, + "date": "20220405" + }, + { + "open": 68900, + "close": 69300, + "high": 69300, + "low": 68600, + "volume": 11107905, + "date": "20220404" + }, + { + "open": 69500, + "close": 69100, + "high": 69500, + "low": 69000, + "volume": 15916846, + "date": "20220401" + }, + { + "open": 69900, + "close": 69600, + "high": 70200, + "low": 69600, + "volume": 12510366, + "date": "20220331" + }, + { + "open": 70300, + "close": 69900, + "high": 70500, + "low": 69800, + "volume": 12670187, + "date": "20220330" + }, + { + "open": 70000, + "close": 70200, + "high": 70300, + "low": 69800, + "volume": 13686208, + "date": "20220329" + }, + { + "open": 69500, + "close": 69700, + "high": 69900, + "low": 69200, + "volume": 12619289, + "date": "20220328" + }, + { + "open": 70100, + "close": 69800, + "high": 70200, + "low": 69600, + "volume": 12986010, + "date": "20220325" + }, + { + "open": 69600, + "close": 69800, + "high": 70300, + "low": 69600, + "volume": 37943357, + "date": "20220324" + }, + { + "open": 70600, + "close": 70500, + "high": 71200, + "low": 70300, + "volume": 12398025, + "date": "20220323" + }, + { + "open": 69900, + "close": 70300, + "high": 70500, + "low": 69900, + "volume": 9402666, + "date": "20220322" + }, + { + "open": 70900, + "close": 69900, + "high": 71000, + "low": 69900, + "volume": 11169002, + "date": "20220321" + }, + { + "open": 70600, + "close": 70700, + "high": 70900, + "low": 70200, + "volume": 14410038, + "date": "20220318" + } + ],5 +); \ No newline at end of file diff --git a/src/store/reducers/Chart/chart.jsx b/src/store/reducers/Chart/chart.jsx new file mode 100644 index 0000000..2035928 --- /dev/null +++ b/src/store/reducers/Chart/chart.jsx @@ -0,0 +1,29 @@ +import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; +import { getChartData } from '../../../lib/apis/chart' + +const initialState = { + datas: [], +}; + +export const getChartDatas = createAsyncThunk( + "chart/getData", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getChartData(); + return response.data; + } +) + +const chartSlice = createSlice({ + name: "chart", + initialState: initialState, + reducers: { + }, + extraReducers: (builder) => { + builder.addCase(getChartDatas.fulfilled, (state, action) => { + state.datas = action.payload; + }) + }, +}); + +export default chartSlice.reducer; diff --git a/src/store/store.js b/src/store/store.js index 0b2eed2..116f1ee 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -4,6 +4,7 @@ import storage from 'redux-persist/lib/storage'; import { FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE, persistReducer, persistStore } from 'redux-persist'; import tradingReducer from './reducers/Trading/trading'; +import chartReducer from './reducers/Chart/chart.jsx'; const rootPersistConfig = { key: 'root', @@ -16,6 +17,7 @@ const rootReducer = persistReducer( combineReducers({ // 임시 reducer trading: tradingReducer, + chart: chartReducer, }) ); From 35eb101b9efd92e492516c1fa9dc1175c271970a Mon Sep 17 00:00:00 2001 From: eunxoo Date: Thu, 14 Mar 2024 09:44:38 +0900 Subject: [PATCH 10/84] =?UTF-8?q?feat:=20=EC=A7=80=ED=91=9C=20=EB=B3=80?= =?UTF-8?q?=EC=88=98=20=EC=A0=95=EB=A6=AC=20json=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/Json/chartData.json | 208 ++++++++++++++++++ public/Json/indiData.json | 433 +++++++++++++++++++++++++++++++++++++ 2 files changed, 641 insertions(+) create mode 100644 public/Json/chartData.json create mode 100644 public/Json/indiData.json diff --git a/public/Json/chartData.json b/public/Json/chartData.json new file mode 100644 index 0000000..3007f31 --- /dev/null +++ b/public/Json/chartData.json @@ -0,0 +1,208 @@ +[ + { + "id": 0, + "name": "SMA", + "showName": "단순 이동평균선", + "vars": [ + { + "id": 0, + "key": "lineTime1", + "name": "5일 선", + "default": 5, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 1, + "key": "lineTime2", + "name": "20일 선", + "default": 20, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 2, + "key": "lineTime3", + "name": "60일 선", + "default": 60, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 3, + "key": "lineTime4", + "name": "120일 선", + "default": 120, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 4, + "key": "lineTime5", + "name": "240일 선", + "default": 240, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 1, + "name": "WMA", + "showName": "가중 이동평균선", + "vars": [ + { + "id": 0, + "key": "lineTime1", + "name": "5일 선", + "default": 5, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 1, + "key": "lineTime2", + "name": "20일 선", + "default": 20, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 2, + "key": "lineTime3", + "name": "60일 선", + "default": 60, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 3, + "key": "lineTime4", + "name": "120일 선", + "default": 120, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 4, + "key": "lineTime5", + "name": "240일 선", + "default": 240, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 2, + "name": "EMA", + "showName": "지수 이동평균선", + "vars": [ + { + "id": 0, + "key": "lineTime1", + "name": "5일 선", + "default": 5, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 1, + "key": "lineTime2", + "name": "20일 선", + "default": 20, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 2, + "key": "lineTime3", + "name": "60일 선", + "default": 60, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 3, + "key": "lineTime4", + "name": "120일 선", + "default": 120, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 4, + "key": "lineTime5", + "name": "240일 선", + "default": 240, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 3, + "name": "BBANDS", + "showName": "볼린저밴드", + "vars": [ + { + "id": 0, + "key": "lineTime", + "name": "기간", + "default": 20, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 1, + "key": "stdev", + "name": "승수", + "default": 2, + "val": 0.01, + "max": 3, + "min": 1 + } + ] + }, + { + "id": 4, + "name": "SAR", + "showName": "Parabolic SAR", + "vars": [ + { + "id": 0, + "key": "acc", + "name": "가속증가량", + "default": 0.02, + "val": 0.01, + "max": 100, + "min": 0.01 + }, + { + "id": 1, + "key": "accMax", + "name": "최대가속요소", + "default": 0.2, + "val": 0.01, + "max": 100, + "min": 0.01 + } + ] + } +] diff --git a/public/Json/indiData.json b/public/Json/indiData.json new file mode 100644 index 0000000..8eb47dd --- /dev/null +++ b/public/Json/indiData.json @@ -0,0 +1,433 @@ +[ + { + "id": 0, + "name": "MACD", + "showName": "MACD", + "vars": [ + { + "id": 0, + "key": "longPeriod", + "name": "장기", + "default": 26, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 1, + "key": "shortPeriod", + "name": "단기", + "default": 12, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 2, + "key": "signalPeriod", + "name": "시그널", + "default": 9, + "val": 1, + "max": 480, + "min": 1 + } + ] + }, + { + "id": 1, + "name": "STOCHF", + "showName": "Stochastic Fast", + "vars": [ + { + "id": 0, + "key": "K", + "name": "기간(%K)", + "default": 14, + "val": 1, + "max": 480, + "min": 1 + }, + { + "id": 1, + "key": "D", + "name": "기간(%D)", + "default": 3, + "val": 1, + "max": 480, + "min": 1 + } + ] + }, + { + "id": 2, + "name": "STOCH", + "showName": "Stochastic slow", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 14, + "val": 1, + "max": 480, + "min": 1 + }, + { + "id": 1, + "key": "K", + "name": "기간(%K)", + "default": 3, + "val": 1, + "max": 480, + "min": 1 + }, + { + "id": 2, + "key": "D", + "name": "기간(%D)", + "default": 3, + "val": 1, + "max": 480, + "min": 1 + } + ] + }, + { + "id": 3, + "name": "RSI", + "showName": "RSI", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 10, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 4, + "name": "CCI", + "showName": "CCI", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 20, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 5, + "name": "MOM", + "showName": "모멘텀", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 10, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 6, + "name": "ROC", + "showName": "ROC", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 10, + "val": 1, + "max": 480, + "min": 1 + } + ] + }, + { + "id": 7, + "name": "AD", + "showName": "AD Line", + "vars": [] + }, + { + "id": 8, + "name": "ATR", + "showName": "ATR", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 20, + "val": 1, + "max": 480, + "min": 1 + } + ] + }, + { + "id": 9, + "name": "MFI", + "showName": "MFI", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 14, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 10, + "name": "OBV", + "showName": "OBV", + "vars": [] + }, + { + "id": 11, + "name": "ADOSC", + "showName": "Chaikin Oscillator", + "vars": [ + { + "id": 0, + "key": "longPeriod", + "name": "장기", + "default": 10, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 1, + "key": "shortPeriod", + "name": "단기", + "default": 3, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 12, + "name": "TRIX", + "showName": "TRIX", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 12, + "val": 1, + "max": 480, + "min": 1 + } + ] + }, + { + "id": 13, + "name": "WILLR", + "showName": "Williams %R", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 14, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 14, + "name": "DX", + "showName": "DMI", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 14, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 15, + "name": "ADX", + "showName": "ADX", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 14, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 16, + "name": "ADXR", + "showName": "ADXR", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 14, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 17, + "name": "AROON", + "showName": "Aroon", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 25, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 18, + "name": "AROONOSC", + "showName": "Aroon Oscillator", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 25, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 19, + "name": "STOCHRSI", + "showName": "Stochastic RSI", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "RSI 기간", + "default": 14, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 1, + "key": "K", + "name": "기간(%K)", + "default": 14, + "val": 1, + "max": 480, + "min": 1 + }, + { + "id": 2, + "key": "D", + "name": "기간(%D)", + "default": 3, + "val": 1, + "max": 480, + "min": 1 + } + ] + }, + { + "id": 20, + "name": "ULTOSC", + "showName": "Ultimate Oscillator", + "vars": [ + { + "id": 0, + "key": "longPeriod", + "name": "장기", + "default": 28, + "val": 1, + "max": 480, + "min": 1 + }, + { + "id": 1, + "key": "middlePeriod", + "name": "중기", + "default": 14, + "val": 1, + "max": 480, + "min": 1 + }, + { + "id": 2, + "key": "shortPeriod", + "name": "단기", + "default": 7, + "val": 1, + "max": 480, + "min": 1 + } + ] + }, + { + "id": 21, + "name": "PPO", + "showName": "PPO", + "vars": [ + { + "id": 0, + "key": "longPeriod", + "name": "장기", + "default": 26, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 1, + "key": "shortPeriod", + "name": "단기", + "default": 12, + "val": 1, + "max": 480, + "min": 2 + } + ] + } +] From 46a93682c40ab4b772b6c8258613208e62f3dbdd Mon Sep 17 00:00:00 2001 From: eunxoo Date: Thu, 14 Mar 2024 09:46:07 +0900 Subject: [PATCH 11/84] =?UTF-8?q?fix:=20props=20warning=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../invest/left-bar/MyStockList.jsx | 456 ++++++++++++++++++ src/routes/Trading/TradingPage.jsx | 15 +- 2 files changed, 463 insertions(+), 8 deletions(-) create mode 100644 src/components/invest/left-bar/MyStockList.jsx diff --git a/src/components/invest/left-bar/MyStockList.jsx b/src/components/invest/left-bar/MyStockList.jsx new file mode 100644 index 0000000..226af6d --- /dev/null +++ b/src/components/invest/left-bar/MyStockList.jsx @@ -0,0 +1,456 @@ +import React, { useState, useEffect, useRef } from "react"; +import styled from "styled-components"; + +const MyStockList = () => { + const [showSearch, setShowSearch] = useState(false); + const [searchInput, setSearchInput] = useState(""); + const [searchResults, setSearchResults] = useState([]); + const [favoriteArr, setFavoriteArr] = useState([]); + const searchRef = useRef(null); + + useEffect(() => { + // 예시 + const fetchSearchResults = async () => { + const fakeSearchResults = [ + { + id: 1, + name: "삼성전자", + code: "005930", + index: "코스피", + favorite: true, + price: "72800", + returns: "0.55%", + accvolume: "333333", + prdy_vrss: "1100", + }, + { + id: 2, + name: "삼성SDI", + code: "006400", + index: "코스피", + favorite: false, + price: "450000", + returns: "8.83%", + accvolume: "44444444", + prdy_vrss: "1100", + }, + { + id: 3, + name: "삼성물산", + code: "028260", + index: "코스피", + favorite: false, + price: "162700", + returns: "-3.15%", + accvolume: "11111", + prdy_vrss: "-5500", + }, + { + id: 4, + name: "삼성생명", + code: "032830", + index: "코스피", + favorite: true, + price: "970100", + returns: "-5.82%", + accvolume: "66753", + prdy_vrss: "-2100", + }, + ]; + + const favoriteResults = fakeSearchResults.filter( + (result) => result.favorite + ); + setFavoriteArr(favoriteResults); + setSearchResults(fakeSearchResults); + }; + + if (searchInput) { + fetchSearchResults(); + } else { + setSearchResults([]); + } + }, [searchInput]); + + const addToFavorites = (result) => { + if (!result.favorite) { + const updatedResults = [...searchResults]; + updatedResults.forEach((item) => { + if (item.id === result.id) { + item.favorite = true; + setFavoriteArr((prevArr) => [...prevArr, item]); + } + }); + + console.log(`관심 종목으로 추가: ${result.name}`); + console.log(favoriteArr); + } else { + const updatedResults = [...searchResults]; + updatedResults.forEach((item) => { + if (item.id === result.id) { + item.favorite = false; + } + }); + const updatedFavoriteArr = favoriteArr.filter( + (item) => item.id !== result.id + ); + setFavoriteArr(updatedFavoriteArr); + console.log(`관심 종목에서 삭제: ${result.name}`); + console.log(favoriteArr); + } + }; + + return ( + + + 관심 종목 + setShowSearch(true)}> + {showSearch ? ( +
+ + search + setSearchInput(e.target.value)} + > + {searchInput && ( + setSearchInput("")}> + x + + )} + { + e.stopPropagation(); + setSearchInput(""); + setShowSearch(false); + }} + > + x + + + {searchResults.length > 0 && ( + + {searchResults.map((result) => ( + + + + {result.name} + + {result.code} + {result.index} + + + addToFavorites(result)} + src={ + result.favorite + ? "/icon/FilledStar.svg" + : "/icon/BlankStar.svg" + } + alt={result.favorite ? "filledstar" : "blankstar"} + /> + + ))} + + )} +
+ ) : ( + + search + 종목 검색 + + )} + + + {favoriteArr?.map((item, idx) => ( + + + + addToFavorites(item)} + src={ + item.favorite + ? "/icon/FilledStar.svg" + : "/icon/BlankStar.svg" + } + alt={item.favorite ? "filledstar" : "blankstar"} + /> + + + {item.name} + + {item.code} + {item.index} + {item.accvolume} + + + + {item.price} + {item.returns} + {item.prdy_vrss} + + + ))} + + + + ); +}; + +const LeftContainer = styled.section` + width: 250px; + height: calc(100vh - 57px); + border-right: 1px solid #e2e2e2; +`; + +const MyItemContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; +`; + +const MyItemDiv = styled.div` + color: #000; + text-align: center; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: normal; + padding-top: 10px; + padding-bottom: 10px; + width: 100%; + border-bottom: 1px solid #c9c9c9; +`; + +const SearchContainer = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + color: #000; + text-align: center; + font-size: 22px; + font-style: normal; + font-weight: 400; + line-height: normal; + width: 100%; + border-bottom: 1px solid #c9c9c9; +`; + +const SearchWrapper = styled.label` + position: relative; + display: flex; + width: 100%; + padding: 10px; + height: 50px; + background-color: #f3f3f3; +`; + +const Img = styled.img` + position: absolute; + top: 18px; + left: 18px; + color: grey; + width: 15px; +`; + +const SearchInput = styled.input` + width: 85%; + padding-left: 30px; + font-size: 15px; + border: none; + background-color: #f3f3f3; +`; + +const SearchClearBtn = styled.button` + position: absolute; + right: 50px; + top: 18px; + + border: none; + background: none; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +`; + +const SearchOutBtn = styled.button` + width: 10%; + margin-left: 5%; + border: none; + background: none; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +`; + +const SearchDiv = styled.div` + font-size: 18px; + width: 100%; + padding: 10px 30px; + &:hover { + background-color: #f3f3f3; + } +`; + +const SearchResults = styled.ul` + margin-top: 5px; + padding-left: 0; + list-style: none; +`; + +const SearchResult = styled.li` + display: flex; + flex-direction: row; + align-items: center; + padding: 5px 10px; + text-align: left; + height: 60px; + cursor: pointer; + &:hover { + background-color: #e8e8e8; + } +`; + +const StockDiv = styled.div` + display: flex; + flex-direction: column; + align-items: start; + width: 100%; +`; +const StockName = styled.div` + color: #000; + text-align: center; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; +`; + +const RowDiv = styled.div` + display: flex; + flex-direction: row; + color: #8c8c8c; + font-size: 12px; + font-style: normal; + font-weight: 300; + line-height: normal; +`; + +const StarImg = styled.img``; + +const MyListContainer = styled.div` + width: 100%; +`; + +const MyListDiv = styled.div` + display: flex; + flex-direction: row; + align-items: center; + padding: 5px 10px; + text-align: left; + height: 60px; +`; + +const StockCode = styled.div` + margin-right: 3px; + + ${MyListDiv}:hover & { + display: none; + } +`; + +const StockIndex = styled.div` + ${MyListDiv}:hover & { + display: none; + } +`; + +const StockVolume = styled.div` + display: none; + + ${MyListDiv}:hover & { + display: block; + } +`; + +const ToggleImg = styled.img` + width: 30px; + border-radius: 100px; + margin: 0px 10px; + + ${MyListDiv}:hover & { + display: none; + } +`; + +const ToggleImg2 = styled.img` + display: none; + + ${MyListDiv}:hover & { + display: block; + width: 15px; + border-radius: 100px; + text-align: center; + margin: 0px 10px; + } +`; + +const ImgDiv = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 30px; + margin: 0px 10px; +`; + +const PriceDiv = styled.div` + color: ${(props) => (parseFloat(props.returns) >= 0 ? "#ee2f2a" : "#2679ed")}; + text-align: right; + display: flex; + flex-direction: column; +`; + +const CurrentPrice = styled.div` + font-size: 14px; +`; + +const ChangeReturns = styled.div` + font-size: 12px; + ${MyListDiv}:hover & { + display: none; + } +`; + +const PrevVariance = styled.div` + display: none; + ${MyListDiv}:hover & { + display: block; + font-size: 12px; + } +`; + +export default MyStockList; diff --git a/src/routes/Trading/TradingPage.jsx b/src/routes/Trading/TradingPage.jsx index 5d8368b..3fe9b16 100644 --- a/src/routes/Trading/TradingPage.jsx +++ b/src/routes/Trading/TradingPage.jsx @@ -21,17 +21,16 @@ export default function TradingPage() { return ( - + - TradingPage - - + + {showCharts ? : <>} - - + + {showIndicators ? : <>} @@ -64,7 +63,7 @@ const ChartsContainer = styled.div` height: 100%; background-color: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); - transform: translateX(${(props) => (props.showCharts ? "0" : "-100%")}); + transform: translateX(${(props) => (props.$showcharts ? "0" : "-100%")}); transition: transform 0.3s ease; position: absolute; top: 0; @@ -77,7 +76,7 @@ const IndicatorsContainer = styled.div` height: 100%; background-color: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); - transform: translateX(${(props) => (props.showIndicators ? "0" : "-100%")}); + transform: translateX(${(props) => (props.$showindicators ? "0" : "-100%")}); transition: transform 0.3s ease; position: absolute; top: 0; From e3eb5a19140931d52f3a6c6dfe8f26e0df9a8c0f Mon Sep 17 00:00:00 2001 From: eunxoo Date: Thu, 14 Mar 2024 09:47:13 +0900 Subject: [PATCH 12/84] =?UTF-8?q?feat:=20=EC=B0=A8=ED=8A=B8-=EB=B3=B4?= =?UTF-8?q?=EC=A1=B0=EC=A7=80=ED=91=9C=20=EC=99=BC=EC=AA=BD=20=EB=B0=94=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../invest/left-bar/ChartIndicators.jsx | 68 +++++----- src/components/invest/left-bar/Indicators.jsx | 116 +++++++++++++++++- 2 files changed, 155 insertions(+), 29 deletions(-) diff --git a/src/components/invest/left-bar/ChartIndicators.jsx b/src/components/invest/left-bar/ChartIndicators.jsx index 4f51c35..5e0ad8b 100644 --- a/src/components/invest/left-bar/ChartIndicators.jsx +++ b/src/components/invest/left-bar/ChartIndicators.jsx @@ -1,28 +1,20 @@ import React, { useState } from "react"; import styled from "styled-components"; import IndicatorDetail from "./IndicatorDetail"; +import chartData from "../../../../public/Json/chartData.json"; const ChartIndicators = ({ onClose }) => { - const [showDetail, setShowDetail] = useState(false); - const toggleDetail = () => { - setShowDetail(!showDetail); - }; + const [showDetail, setShowDetail] = useState( + Array(chartData.length).fill(false) + ); - const chartJson = [ - { - id: 0, - name: "SMA", - showName: "단순 이동평균선", - var: ["lineTime"], - }, - { id: 1, name: "WMA", showName: "가중 이동평균선", var: ["lineTime"] }, - { - id: 2, - name: "BBANDS", - showName: "볼린저밴드", - var: ["lineTime", "stdev"], - }, - ]; + const toggleDetail = (index) => { + setShowDetail((prevShowDetail) => { + const newShowDetail = [...prevShowDetail]; + newShowDetail[index] = !newShowDetail[index]; + return newShowDetail; + }); + }; return ( @@ -30,14 +22,29 @@ const ChartIndicators = ({ onClose }) => { 차트지표 - - - 이동평균선 - 설정 - - - - + + {chartData.map((item, idx) => ( + + + {item.showName} + toggleDetail(idx)}>설정 + + {showDetail[idx] ? ( + toggleDetail(idx)} + initialValues={item.vars.map((item) => item.default)} + /> + ) : ( + <> + )} + + + ))} + ); }; @@ -75,6 +82,10 @@ const IndicatorDiv = styled.div` padding-bottom: 10px; `; +const ItemContainer = styled.div` + width: 100%; +`; + const ItemWrapper = styled.div` display: flex; height: 45px; @@ -136,12 +147,13 @@ const DetailContainer = styled.div` height: 100%; background-color: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); - transform: translateX(${(props) => (props.showDetail ? "0" : "-100%")}); + transform: translateX(${(props) => (props.$showdetail ? "0" : "-100%")}); transition: transform 0.3s ease; position: absolute; top: 0; left: 0; overflow: hidden; + z-index: 999; `; export default ChartIndicators; diff --git a/src/components/invest/left-bar/Indicators.jsx b/src/components/invest/left-bar/Indicators.jsx index 23bdef8..eeedfe5 100644 --- a/src/components/invest/left-bar/Indicators.jsx +++ b/src/components/invest/left-bar/Indicators.jsx @@ -1,13 +1,50 @@ -import React from "react"; +import React, { useState } from "react"; import styled from "styled-components"; +import IndicatorDetail from "./IndicatorDetail"; +import indiData from "../../../../public/Json/indiData.json"; const Indicators = ({ onClose }) => { + const [showDetail, setShowDetail] = useState( + Array(indiData.length).fill(false) + ); + + const toggleDetail = (index) => { + setShowDetail((prevShowDetail) => { + const newShowDetail = [...prevShowDetail]; + newShowDetail[index] = !newShowDetail[index]; + return newShowDetail; + }); + }; + return ( 보조지표 + + {indiData.map((item, idx) => ( + + + {item.showName} + toggleDetail(idx)}>설정 + + {showDetail[idx] ? ( + toggleDetail(idx)} + initialValues={item.vars.map((item) => item.default)} + /> + ) : ( + <> + )} + + + ))} + ); }; @@ -44,4 +81,81 @@ const IndicatorDiv = styled.div` padding-top: 10px; padding-bottom: 10px; `; + +const ItemContainer = styled.div` + width: 100%; + height: calc(100vh - 101px); + overflow: auto; +`; + +const ItemWrapper = styled.div` + display: flex; + height: 45px; + width: 100%; + align-items: center; + border-bottom: 1px solid #c9c9c9; + padding-right: 10px; +`; + +const CheckBox = styled.input` + position: relative; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + margin: 0px 10px; + width: 20px; + height: 20px; + border: 1.5px solid gainsboro; + border-radius: 5px; + background-color: white; + transition: background-color 0.3s, border-color 0.3s; + + &:checked { + border-color: transparent; + background-size: 100% 100%; + background-position: 50%; + background-repeat: no-repeat; + background-color: black; + + &::before { + content: "✓"; + font-size: 14px; + color: white; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } +`; + +const ItemDiv = styled.div``; + +const DetailBtn = styled.button` + margin-left: auto; + background: none; + border: 1px solid black; + border-radius: 100px; + + &:hover { + border: 1px solid black; + background-color: black; + color: white; + } +`; + +const DetailContainer = styled.div` + width: 250px; + height: 100%; + background-color: #fff; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); + transform: translateX(${(props) => (props.$showdetail ? "0" : "-100%")}); + transition: transform 0.3s ease; + position: absolute; + top: 0; + left: 0; + overflow: hidden; + z-index: 999; +`; + export default Indicators; From 346f48ba6bc5ac8ba0664d3570a2049a6ac200ce Mon Sep 17 00:00:00 2001 From: eunxoo Date: Thu, 14 Mar 2024 09:47:43 +0900 Subject: [PATCH 13/84] =?UTF-8?q?feat:=20=EC=A7=80=ED=91=9C=20=EB=B3=80?= =?UTF-8?q?=EC=88=98=20=EB=94=94=ED=85=8C=EC=9D=BC=EB=B0=94=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20=EB=B0=8F=20=EB=A6=AC=EB=8D=95=EC=8A=A4=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 17 +- package.json | 4 +- public/icon/+.svg | 4 + public/icon/+White.svg | 4 + public/icon/-.svg | 3 + public/icon/-White.svg | 3 + .../invest/left-bar/IndicatorDetail.jsx | 263 +++++++++++++++++- src/store/reducers/Trading/chartValues.js | 25 ++ src/store/reducers/Trading/indicatorValues.js | 42 +++ src/store/store.js | 41 ++- 10 files changed, 388 insertions(+), 18 deletions(-) create mode 100644 public/icon/+.svg create mode 100644 public/icon/+White.svg create mode 100644 public/icon/-.svg create mode 100644 public/icon/-White.svg create mode 100644 src/store/reducers/Trading/chartValues.js create mode 100644 src/store/reducers/Trading/indicatorValues.js diff --git a/package-lock.json b/package-lock.json index 210a263..03a75ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,9 @@ "react-redux": "^9.1.0", "react-router-dom": "^6.22.3", "redux": "^5.0.1", - "redux-persist": "^6.0.0" + "redux-logger": "^3.0.6", + "redux-persist": "^6.0.0", + "styled-components": "^6.1.8", }, "devDependencies": { "@types/react": "^18.2.56", @@ -1639,6 +1641,11 @@ } } }, + "node_modules/deep-diff": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz", + "integrity": "sha512-yVn6RZmHiGnxRKR9sJb3iVV2XTF1Ghh2DiWRZ3dMnGc43yUdWWF/kX6lQyk3+P84iprfWKU/8zFTrlkvtFm1ug==" + }, "node_modules/deep-is": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", @@ -3542,6 +3549,14 @@ "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==" }, + "node_modules/redux-logger": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz", + "integrity": "sha512-JoCIok7bg/XpqA1JqCqXFypuqBbQzGQySrhFzewB7ThcnysTO30l4VCst86AuB9T9tuT03MAA56Jw2PNhRSNCg==", + "dependencies": { + "deep-diff": "^0.3.5" + } + }, "node_modules/redux-persist": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz", diff --git a/package.json b/package.json index 9cb6c70..6aab957 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,9 @@ "react-redux": "^9.1.0", "react-router-dom": "^6.22.3", "redux": "^5.0.1", - "redux-persist": "^6.0.0" + "redux-logger": "^3.0.6", + "redux-persist": "^6.0.0", + "styled-components": "^6.1.8", }, "devDependencies": { "@types/react": "^18.2.56", diff --git a/public/icon/+.svg b/public/icon/+.svg new file mode 100644 index 0000000..2fd77ea --- /dev/null +++ b/public/icon/+.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/icon/+White.svg b/public/icon/+White.svg new file mode 100644 index 0000000..cadfc9d --- /dev/null +++ b/public/icon/+White.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/icon/-.svg b/public/icon/-.svg new file mode 100644 index 0000000..ce8a7eb --- /dev/null +++ b/public/icon/-.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icon/-White.svg b/public/icon/-White.svg new file mode 100644 index 0000000..8dff620 --- /dev/null +++ b/public/icon/-White.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/invest/left-bar/IndicatorDetail.jsx b/src/components/invest/left-bar/IndicatorDetail.jsx index c85b84b..d5968d8 100644 --- a/src/components/invest/left-bar/IndicatorDetail.jsx +++ b/src/components/invest/left-bar/IndicatorDetail.jsx @@ -1,7 +1,266 @@ import React from "react"; +import styled from "styled-components"; +import { useDispatch, useSelector } from "react-redux"; +import * as chartValuesModule from "../../../store/reducers/Trading/chartValues"; +import * as indicatorValuesModule from "../../../store/reducers/Trading/indicatorValues"; -const IndicatorDetail = () => { - return
; +const IndicatorDetail = ({ + indiType, + showName, + name, + vars, + onClose, + initialValues, +}) => { + const dispatch = useDispatch(); + + let setValuesReducer; + if (indiType === "chart") { + setValuesReducer = chartValuesModule; + } else if (indiType === "indi") { + setValuesReducer = indicatorValuesModule; + } + const { setValues } = setValuesReducer; + + const values = useSelector((state) => { + if (indiType === "chart") { + return state.chartValues.values[name]; + } else if (indiType === "indi") { + return state.indicatorValues.values[name]; + } + }); + + const decreaseValue = (idx) => { + const newValues = [...values]; + if (newValues[idx] > vars[idx].min) { + newValues[idx] = Math.round((newValues[idx] - vars[idx].val) * 100) / 100; + const payload = { [name]: newValues }; + dispatch(setValues(payload)); + } + }; + + const increaseValue = (idx) => { + const newValues = [...values]; + if (newValues[idx] < vars[idx].max) { + newValues[idx] = Math.round((newValues[idx] + vars[idx].val) * 100) / 100; + const payload = { [name]: newValues }; + dispatch(setValues(payload)); + } + }; + + return ( + + + {showName} + + + + {values.length !== 0 ? ( + + 변수 설정 + { + const payload = { [name]: initialValues }; + dispatch(setValues(payload)); + }} + > + 초기화 + + + ) : ( + + 변수가 없습니다. + + )} + {vars.map((item, idx) => ( + + {item.name} + + { + decreaseValue(idx); + }} + > + + + + { + const newValue = + e.target.value.trim() === "" + ? "" + : parseFloat(e.target.value); + const newValues = [...values]; + newValues[idx] = newValue; + const payload = { [name]: newValues }; + dispatch(setValues(payload)); + }} + onBlur={(e) => { + const newValue = + e.target.value.trim() === "" + ? item.default + : parseFloat(e.target.value); + const newValues = [...values]; + newValues[idx] = newValue; + const payload = { [name]: newValues }; + dispatch(setValues(payload)); + }} + /> + { + increaseValue(idx); + }} + > + + + + + + ))} + + + ); }; +const Container = styled.div` + display: flex; + flex-direction: column; + align-items: center; +`; + +const CloseButton = styled.img` + position: absolute; + right: 10px; + top: 8px; + width: 25px; + cursor: pointer; +`; + +const IndicatorsWrapper = styled.div` + display: flex; + flex-direction: row; + width: 100%; + border-bottom: 1px solid #c9c9c9; + justify-content: center; +`; + +const IndicatorDiv = styled.div` + color: #000; + text-align: center; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: normal; + padding-top: 10px; + padding-bottom: 10px; +`; + +const ItemContainer = styled.div` + width: 100%; +`; + +const RowDiv = styled.div` + display: flex; + align-items: center; + margin: 10px 10px 0px 0px; +`; + +const VarDiv = styled.div` + width: 100%; + margin-left: 10px; + font-size: 14px; + color: gray; +`; + +const ResetBtn = styled.button` + background: none; + font-size: 14px; + width: 80px; + height: 30px; + box-sizing: border-box; + border: none; + color: gray; + &:hover { + background-color: #ececec; + color: black; + } +`; + +const ItemWrapper = styled.div` + display: flex; + height: 50px; + width: 100%; + align-items: center; + border-bottom: 1px solid #c9c9c9; + padding-right: 10px; + justify-content: space-between; +`; + +const ItemDiv = styled.div` + margin-left: 10px; + font-size: 17px; +`; + +const ValueContainer = styled.div` + display: flex; + align-items: center; +`; + +const VarInput = styled.input` + width: 80px; + margin: 0 5px; + padding: 2px 9px; + font-size: 17px; + border: 0.5px solid black; + + /* 화살표 숨기기 */ + -webkit-appearance: none; + -moz-appearance: textfield; + appearance: none; + &::-webkit-inner-spin-button, + &::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } +`; + +const Img1 = styled.img` + width: 12px; +`; + +const Img2 = styled.img` + width: 12px; + display: none; +`; + +const Btn = styled.button` + display: flex; + justify-content: center; + align-items: center; + width: 20px; + height: 20px; + background: none; + border: 1px solid black; + border-radius: 100px; + text-align: center; + + &:hover { + background-color: black; + border: 1px solid black; + } + + &:hover > ${Img2} { + display: block; + } + + &:hover > ${Img1} { + display: none; + } +`; + export default IndicatorDetail; diff --git a/src/store/reducers/Trading/chartValues.js b/src/store/reducers/Trading/chartValues.js new file mode 100644 index 0000000..182a32a --- /dev/null +++ b/src/store/reducers/Trading/chartValues.js @@ -0,0 +1,25 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + values: { + SMA: [5, 20, 60, 120, 240], + WMA: [5, 20, 60, 120, 240], + EMA: [5, 20, 60, 120, 240], + BBANDS: [20, 2], + SAR: [0.02, 0.2], + }, +}; + +const chartValuesSlice = createSlice({ + name: "hartValues", + initialState: initialState, + reducers: { + setValues: (state, action) => { + state.values = { ...state.values, ...action.payload }; + }, + }, + extraReducers: (builder) => {}, +}); + +export const { setValues } = chartValuesSlice.actions; +export default chartValuesSlice.reducer; diff --git a/src/store/reducers/Trading/indicatorValues.js b/src/store/reducers/Trading/indicatorValues.js new file mode 100644 index 0000000..8740f77 --- /dev/null +++ b/src/store/reducers/Trading/indicatorValues.js @@ -0,0 +1,42 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + values: { + MACD: [26, 12, 9], + STOCHF: [14, 3], + STOCH: [14, 3, 3], + RSI: [10], + CCI: [20], + MOM: [10], + ROC: [10], + AD: [], + ATR: [20], + MFI: [14], + OBV: [], + ADOSC: [10, 3], + TRIX: [12], + WILLR: [14], + DX: [14], + ADX: [14], + ADXR: [14], + AROON: [25], + AROONOSC: [25], + STOCHRSI: [14, 14, 3], + ULTOSC: [28, 14, 7], + PPO: [26, 12], + }, +}; + +const indicatorValuesSlice = createSlice({ + name: "indicatorValues", + initialState: initialState, + reducers: { + setValues: (state, action) => { + state.values = { ...state.values, ...action.payload }; + }, + }, + extraReducers: (builder) => {}, +}); + +export const { setValues } = indicatorValuesSlice.actions; +export default indicatorValuesSlice.reducer; diff --git a/src/store/store.js b/src/store/store.js index 0b2eed2..ec844ba 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -1,32 +1,45 @@ -import React from 'react'; -import { combineReducers, configureStore } from '@reduxjs/toolkit'; -import storage from 'redux-persist/lib/storage'; -import { FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE, persistReducer, persistStore } from 'redux-persist'; - -import tradingReducer from './reducers/Trading/trading'; +import React from "react"; +import { combineReducers, configureStore } from "@reduxjs/toolkit"; +import storage from "redux-persist/lib/storage"; +import { + FLUSH, + PAUSE, + PERSIST, + PURGE, + REGISTER, + REHYDRATE, + persistReducer, + persistStore, +} from "redux-persist"; +import logger from "redux-logger"; +import tradingReducer from "./reducers/Trading/trading"; +import chartValuesReducer from "./reducers/Trading/chartValues"; +import indicatorValuesReducer from "./reducers/Trading/indicatorValues"; const rootPersistConfig = { - key: 'root', + key: "root", storage: storage, - whitelist: [] -} + // whitelist: ["chartValues", "indicatorValues"], +}; const rootReducer = persistReducer( rootPersistConfig, combineReducers({ // 임시 reducer trading: tradingReducer, + chartValues: chartValuesReducer, + indicatorValues: indicatorValuesReducer, }) ); - +const myMiddlewares = [logger]; export const store = configureStore({ reducer: rootReducer, - middleware: getDefaultMiddleware => + middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { - ignoreActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], + ignoreActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], }, - }), + }).concat(myMiddlewares), }); -export const persistor = persistStore(store); \ No newline at end of file +export const persistor = persistStore(store); From 5a376533984ef0d77367798cbb43574cb31f73a9 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Thu, 14 Mar 2024 10:51:18 +0900 Subject: [PATCH 14/84] =?UTF-8?q?feat:=20left-bar=20mainLayout=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/invest/left-bar/MyStockList.jsx | 11 +++++++++-- src/routes/mainLayout.jsx | 13 ++++++++++++- 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/components/invest/left-bar/MyStockList.jsx b/src/components/invest/left-bar/MyStockList.jsx index 4af6410..193b1f4 100644 --- a/src/components/invest/left-bar/MyStockList.jsx +++ b/src/components/invest/left-bar/MyStockList.jsx @@ -1,5 +1,7 @@ import React, { useState, useEffect, useRef } from "react"; +import { useDispatch } from "react-redux"; import styled from "styled-components"; +import clickCompany, { setClickCompany } from "../../../store/reducers/Chart/clickCompany"; const MyStockList = () => { const [showSearch, setShowSearch] = useState(false); @@ -114,6 +116,8 @@ const MyStockList = () => { } }; + const dispatch = useDispatch(); + return ( @@ -153,7 +157,10 @@ const MyStockList = () => { {searchResults.length > 0 && ( {searchResults.map((result) => ( - + { + console.log('') + dispatch(setClickCompany(result)) + }}> { }; const LeftContainer = styled.section` - width: 250px; + min-width: 250px; height: calc(100vh - 57px); border-right: 1px solid #e2e2e2; `; diff --git a/src/routes/mainLayout.jsx b/src/routes/mainLayout.jsx index 4049fde..59ed5c1 100644 --- a/src/routes/mainLayout.jsx +++ b/src/routes/mainLayout.jsx @@ -1,12 +1,23 @@ import React from "react"; import { Outlet } from "react-router-dom"; import MyNavbar from "../components/MyNavbar"; +import MainChart from "../components/invest/chart/MainChart"; +import MyStockList from "../components/invest/left-bar/MyStockList"; +import styled from "styled-components"; export default function MainLayout() { return ( <> - + + + + + ); } + +const Container = styled.div` + display: flex; +` From 18292b0b1350735313999c9549f398edc803c795 Mon Sep 17 00:00:00 2001 From: eunxoo <80334038+eunxoo@users.noreply.github.com> Date: Thu, 14 Mar 2024 10:53:54 +0900 Subject: [PATCH 15/84] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f00eea9..2e970af 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "redux": "^5.0.1", "redux-logger": "^3.0.6", "redux-persist": "^6.0.0", - "styled-components": "^6.1.8", + "styled-components": "^6.1.8" }, "devDependencies": { "@types/react": "^18.2.56", From 203ee3eedd5e0afcae51bf02617ec24a0605440f Mon Sep 17 00:00:00 2001 From: eunxoo <80334038+eunxoo@users.noreply.github.com> Date: Thu, 14 Mar 2024 10:54:12 +0900 Subject: [PATCH 16/84] Update package-lock.json --- package-lock.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 76dacbd..43af41b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,7 @@ "redux": "^5.0.1", "redux-logger": "^3.0.6", "redux-persist": "^6.0.0", - "styled-components": "^6.1.8", + "styled-components": "^6.1.8" }, "devDependencies": { "@types/react": "^18.2.56", From 9c4e81efdd6b3390f60a1c86025f4e796ede9edc Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Thu, 14 Mar 2024 10:54:41 +0900 Subject: [PATCH 17/84] =?UTF-8?q?feat:=20left-bar=20mainLayout=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/Trading/TradingPage.jsx | 5 ++--- src/store/store.js | 2 ++ 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/routes/Trading/TradingPage.jsx b/src/routes/Trading/TradingPage.jsx index 571169c..e370de7 100644 --- a/src/routes/Trading/TradingPage.jsx +++ b/src/routes/Trading/TradingPage.jsx @@ -3,7 +3,6 @@ import MyStockList from "../../components/invest/left-bar/MyStockList"; import styled from "styled-components"; import Indicators from "../../components/invest/left-bar/Indicators"; import ChartIndicators from "../../components/invest/left-bar/ChartIndicators"; -import MainChart from '../../components/invest/chart/MainChart'; export default function TradingPage() { const [showIndicators, setShowIndicators] = useState(false); @@ -21,8 +20,8 @@ export default function TradingPage() { return ( - - + {/* MainLayout으로 빼야할듯 */} + {/* */} {/* diff --git a/src/store/store.js b/src/store/store.js index 116f1ee..abad270 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -5,6 +5,7 @@ import { FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE, persistReducer, pers import tradingReducer from './reducers/Trading/trading'; import chartReducer from './reducers/Chart/chart.jsx'; +import companyReducer from './reducers/Chart/clickCompany.jsx'; const rootPersistConfig = { key: 'root', @@ -18,6 +19,7 @@ const rootReducer = persistReducer( // 임시 reducer trading: tradingReducer, chart: chartReducer, + company: companyReducer, }) ); From 25926aa431ac6c8181409b843df325e4e7a1e052 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Thu, 14 Mar 2024 11:24:07 +0900 Subject: [PATCH 18/84] =?UTF-8?q?feat:=20=EC=B0=A8=ED=8A=B8=EC=A7=80?= =?UTF-8?q?=ED=91=9C,=20=EB=B3=B4=EC=A1=B0=EC=A7=80=ED=91=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/invest/chart/MainChart.jsx | 233 +++++++++++++--------- src/routes/mainLayout.jsx | 78 +++++++- 2 files changed, 213 insertions(+), 98 deletions(-) diff --git a/src/components/invest/chart/MainChart.jsx b/src/components/invest/chart/MainChart.jsx index 651fc56..9f35285 100644 --- a/src/components/invest/chart/MainChart.jsx +++ b/src/components/invest/chart/MainChart.jsx @@ -31,31 +31,48 @@ import { import { chartInstance } from '../../../lib/apis/api'; import { useSelector, useDispatch } from 'react-redux'; import { getChartDatas } from '../../../store/reducers/Chart/chart' +import styled from "styled-components"; +import SMAChart from "./subChart/SMAChart"; -export default function MainChart() { - const dataList = useSelector((state) => state.chart.datas) - const dispatch = useDispatch(); +export default function MainChart({ toggleCharts, toggleIndicators }) { + // const dataList = useSelector((state) => state.chart.datas) + const company = useSelector((state) => state.company.data) + // const dispatch = useDispatch(); const [datas, setDatas] = useState([]); async function getData() { - const data = await chartInstance.post('/', { + const data = await chartInstance.post('/stockPrice', { "code" : "005930", - "start_date" : "20220101", - "end_date" : "20220809", + "start_date" : "19990101", + "end_date" : "20240313", + // 분, 일, 월, 연봉 "time_format" : "D" }) - setDatas(data.data); + setDatas(data.data.reverse()); } useEffect(() => { getData(); - dispatch(getChartDatas()) - .then((res) => { - console.log('data payload',res.payload) - }) + // dispatch(getChartDatas()) + // .then((res) => { + // console.log('data payload',res.payload) + // }) - console.log('데이터:', dataList) + // console.log('데이터:', dataList) }, []) + useEffect(() => { + console.log('company: ',company) + // accvolume: "333333" + // code: "005930" + // favorite: true + // id: 1 + // index: "코스피" + // name: "삼성전자" + // prdy_vrss: "1100" + // price: "72800" + // returns: "0.55%" + }, [company]) + const ScaleProvider = discontinuousTimeScaleProviderBuilder().inputDateAccessor( (d) => { const year = d.date.substr(0, 4) @@ -68,30 +85,10 @@ export default function MainChart() { const margin = { left: 0, right: 78, top: 0, bottom: 24 }; const height = 800; - const width = 1200; - - // 이동평균선(EMA) 계산하는 함수 - // const ema12 = ema() - // .id(1) - // .options({ windowSize: 12 }) - // .merge((d, c) => { - // d.ema12 = c; - // }) - // .accessor((d) => d.ema12); - - // const ema26 = ema() - // .id(2) - // .options({ windowSize: 26 }) - // .merge((d, c) => { - // d.ema26 = c; - // }) - // .accessor((d) => d.ema26); - - // const elder = elderRay(); - - // const calculatedData = elder(ema26(ema12(initialData))); + const width = 1150; + const { data, xScale, xAccessor, displayXAccessor } = ScaleProvider( - datas.reverse() + datas ); // 소수점 이하 둘째짜리까지만 표현 @@ -102,6 +99,7 @@ export default function MainChart() { const gridHeight = height - margin.top - margin.bottom; + const elder = elderRay(); const elderRayHeight = 100; const elderRayOrigin = (_, h) => [0, h]; const barChartHeight = gridHeight / 4; @@ -187,65 +185,110 @@ export default function MainChart() { } return ( - - - {/* 분봉 호버했을 때, 날짜/시가/종가/고가/저가 표시 */} - - - - - - - - - - - - - {/* 거래량 차트 */} - + + + + {company.name} + {company.code} {company.index} + + + + + + + - {/* */} - - - - - - - + {/* 거래량 차트 */} + + + + + + + {/* 분봉 호버했을 때, 날짜/시가/종가/고가/저가 표시 */} + + + + + + + + + + + + + + + + + ); -} \ No newline at end of file +} + +const Container = styled.div` + display: flex; + flex-direction: column; +` + +const CompanyContainer = styled.div` + display: flex; + align-items: center; + padding: 5px; +` + +const CompanyLogo = styled.img` + width: 40px; + height: 40px; + border-radius: 999px; + margin-right: 10px; +` + +const FontContainer = styled.div` + display: flex; + flex-direction: column; +` + +const MainFont = styled.span` + font-weight: 700; +` + +const SubFont = styled.span` + font-size: 12px; +` + +const Content = styled.div` + display: flex; + align-items: center; +`; \ No newline at end of file diff --git a/src/routes/mainLayout.jsx b/src/routes/mainLayout.jsx index 59ed5c1..3cdd615 100644 --- a/src/routes/mainLayout.jsx +++ b/src/routes/mainLayout.jsx @@ -1,17 +1,42 @@ -import React from "react"; +import React, { useState } from "react"; import { Outlet } from "react-router-dom"; import MyNavbar from "../components/MyNavbar"; import MainChart from "../components/invest/chart/MainChart"; import MyStockList from "../components/invest/left-bar/MyStockList"; import styled from "styled-components"; +import ChartIndicators from "../components/invest/left-bar/ChartIndicators"; +import Indicators from "../components/invest/left-bar/Indicators"; export default function MainLayout() { + const [showIndicators, setShowIndicators] = useState(false); + const [showCharts, setShowCharts] = useState(false); + + const toggleIndicators = () => { + setShowIndicators(!showIndicators); + setShowCharts(false); + }; + + const toggleCharts = () => { + setShowCharts(!showCharts); + setShowIndicators(false); + }; + return ( <> - - + + + + + {showCharts ? : <>} + + + {showIndicators ? : <>} + + + + @@ -21,3 +46,50 @@ export default function MainLayout() { const Container = styled.div` display: flex; ` + +const LeftContainer = styled.div` + display: flex; + flex-direction: row; + width: 100%; + height: 100%; + position: relative; + overflow: hidden; +`; + +const ContentContainer = styled.div` + display: flex; + flex-direction: column; + flex-grow: 1; + transition: margin-left 0.3s ease; +`; + +const Content = styled.div` + display: flex; + align-items: center; +`; + +const ChartsContainer = styled.div` + width: 250px; + height: 100%; + background-color: #fff; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); + transform: translateX(${(props) => (props.$showcharts ? "0" : "-100%")}); + transition: transform 0.3s ease; + position: absolute; + top: 0; + left: 0; + overflow: hidden; +`; + +const IndicatorsContainer = styled.div` + width: 250px; + height: 100%; + background-color: #fff; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); + transform: translateX(${(props) => (props.$showindicators ? "0" : "-100%")}); + transition: transform 0.3s ease; + position: absolute; + top: 0; + left: 0; + overflow: hidden; +`; From 4467fa4ba3584b8cc93c4afcca5a130fd10de3d3 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Thu, 14 Mar 2024 11:26:19 +0900 Subject: [PATCH 19/84] =?UTF-8?q?feat:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C=20=EB=B0=8F?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/invest/chart/MainChart.jsx | 6 +++--- src/lib/apis/api.jsx | 6 +++++- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/invest/chart/MainChart.jsx b/src/components/invest/chart/MainChart.jsx index 9f35285..182d7da 100644 --- a/src/components/invest/chart/MainChart.jsx +++ b/src/components/invest/chart/MainChart.jsx @@ -30,9 +30,9 @@ import { } from "react-financial-charts"; import { chartInstance } from '../../../lib/apis/api'; import { useSelector, useDispatch } from 'react-redux'; -import { getChartDatas } from '../../../store/reducers/Chart/chart' +// import { getChartDatas } from '../../../store/reducers/Chart/chart' import styled from "styled-components"; -import SMAChart from "./subChart/SMAChart"; +// import SMAChart from "./subChart/SMAChart"; export default function MainChart({ toggleCharts, toggleIndicators }) { // const dataList = useSelector((state) => state.chart.datas) @@ -232,7 +232,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { - + {/* */} Date: Thu, 14 Mar 2024 13:36:45 +0900 Subject: [PATCH 20/84] =?UTF-8?q?feat:=20=EC=82=AC=EC=9D=B4=EB=93=9C=20?= =?UTF-8?q?=EB=84=A4=EB=B9=84=EB=B0=94=20=EC=82=AC=EC=A7=84=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=97=85=EB=A1=9C=EB=93=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 33 --------------------------------- public/icon/feed.svg | 13 +++++++++++++ public/icon/feedOrange.svg | 13 +++++++++++++ public/icon/hot.svg | 5 +++++ public/icon/hotOrange.svg | 5 +++++ public/icon/market.svg | 19 +++++++++++++++++++ public/icon/marketOrange.svg | 19 +++++++++++++++++++ public/icon/mypage.svg | 6 ++++++ public/icon/mypageOrange.svg | 6 ++++++ public/icon/strategy.svg | 7 +++++++ public/icon/strategyOrange.svg | 7 +++++++ public/icon/trading.svg | 5 +++++ public/icon/tradingOrange.svg | 5 +++++ 13 files changed, 110 insertions(+), 33 deletions(-) create mode 100644 public/icon/feed.svg create mode 100644 public/icon/feedOrange.svg create mode 100644 public/icon/hot.svg create mode 100644 public/icon/hotOrange.svg create mode 100644 public/icon/market.svg create mode 100644 public/icon/marketOrange.svg create mode 100644 public/icon/mypage.svg create mode 100644 public/icon/mypageOrange.svg create mode 100644 public/icon/strategy.svg create mode 100644 public/icon/strategyOrange.svg create mode 100644 public/icon/trading.svg create mode 100644 public/icon/tradingOrange.svg diff --git a/package-lock.json b/package-lock.json index 2837b40..62cde45 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3853,11 +3853,6 @@ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "dev": true }, - "node_modules/nan": { - "version": "2.19.0", - "resolved": "https://registry.npmjs.org/nan/-/nan-2.19.0.tgz", - "integrity": "sha512-nO1xXxfh/RWNxfd/XPfbIfFk5vgLsAxUR9y5O0cHMJu/AW9U95JLXqthYHjEp+8gQ5p96K9jUp8nbVOxCdRbtw==" - }, "node_modules/nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", @@ -4879,34 +4874,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/talib": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/talib/-/talib-1.1.5.tgz", - "integrity": "sha512-at8OQzwnAt5h/6d28/rL6xEO6d7/WzkKNd7NUtNVNewFGPwazAeglXo/sqTNLBZ0zUtZ8w4sXwpapKzH3eIX6A==", - "funding": [ - { - "type": "PayPal", - "url": "https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=AZDHC49PNM7MY&item_name=talib" - }, - { - "type": "Coinbase", - "url": "https://commerce.coinbase.com/checkout/1da811db-5adf-4d02-9ab3-dd68e62234e1" - } - ], - "hasInstallScript": true, - "os": [ - "darwin", - "linux", - "freebsd", - "win32" - ], - "dependencies": { - "nan": "^2.17.0" - }, - "engines": { - "node": ">=8.16.0" - } - }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", diff --git a/public/icon/feed.svg b/public/icon/feed.svg new file mode 100644 index 0000000..3ffd703 --- /dev/null +++ b/public/icon/feed.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/icon/feedOrange.svg b/public/icon/feedOrange.svg new file mode 100644 index 0000000..bf0ceec --- /dev/null +++ b/public/icon/feedOrange.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/icon/hot.svg b/public/icon/hot.svg new file mode 100644 index 0000000..64c1ac4 --- /dev/null +++ b/public/icon/hot.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/icon/hotOrange.svg b/public/icon/hotOrange.svg new file mode 100644 index 0000000..de42fbe --- /dev/null +++ b/public/icon/hotOrange.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/icon/market.svg b/public/icon/market.svg new file mode 100644 index 0000000..36f70ee --- /dev/null +++ b/public/icon/market.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/icon/marketOrange.svg b/public/icon/marketOrange.svg new file mode 100644 index 0000000..509627c --- /dev/null +++ b/public/icon/marketOrange.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/icon/mypage.svg b/public/icon/mypage.svg new file mode 100644 index 0000000..b14d0c3 --- /dev/null +++ b/public/icon/mypage.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/icon/mypageOrange.svg b/public/icon/mypageOrange.svg new file mode 100644 index 0000000..3c13005 --- /dev/null +++ b/public/icon/mypageOrange.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/icon/strategy.svg b/public/icon/strategy.svg new file mode 100644 index 0000000..10fcec7 --- /dev/null +++ b/public/icon/strategy.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/icon/strategyOrange.svg b/public/icon/strategyOrange.svg new file mode 100644 index 0000000..9e329ee --- /dev/null +++ b/public/icon/strategyOrange.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/icon/trading.svg b/public/icon/trading.svg new file mode 100644 index 0000000..6f41295 --- /dev/null +++ b/public/icon/trading.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/icon/tradingOrange.svg b/public/icon/tradingOrange.svg new file mode 100644 index 0000000..84bb2fa --- /dev/null +++ b/public/icon/tradingOrange.svg @@ -0,0 +1,5 @@ + + + + + From bb5860e4a208906b89e20fd6d550ceef88e72bfc Mon Sep 17 00:00:00 2001 From: eunxoo Date: Thu, 14 Mar 2024 13:39:11 +0900 Subject: [PATCH 21/84] =?UTF-8?q?feat:=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/main-router.jsx | 71 +++++++++--------- src/routes/Feed/FeedPage.jsx | 15 ++++ src/routes/Feed/page.jsx | 7 -- src/routes/HotStock/HotStockPage.jsx | 15 ++++ src/routes/HotStock/page.jsx | 7 -- .../InvestStrategy/InvestStrategyPage.jsx | 15 ++++ src/routes/InvestStrategy/page.jsx | 7 -- src/routes/MarketInfo/MarketInfoPage.jsx | 15 ++++ src/routes/MarketInfo/page.jsx | 7 -- src/routes/MyPage/MyPage.jsx | 15 ++++ src/routes/MyPage/page.jsx | 7 -- src/routes/SideLayout.jsx | 24 +++++++ src/routes/Trading/TradingPage.jsx | 72 +------------------ src/routes/mainLayout.jsx | 15 +++- 14 files changed, 151 insertions(+), 141 deletions(-) create mode 100644 src/routes/Feed/FeedPage.jsx delete mode 100644 src/routes/Feed/page.jsx create mode 100644 src/routes/HotStock/HotStockPage.jsx delete mode 100644 src/routes/HotStock/page.jsx create mode 100644 src/routes/InvestStrategy/InvestStrategyPage.jsx delete mode 100644 src/routes/InvestStrategy/page.jsx create mode 100644 src/routes/MarketInfo/MarketInfoPage.jsx delete mode 100644 src/routes/MarketInfo/page.jsx create mode 100644 src/routes/MyPage/MyPage.jsx delete mode 100644 src/routes/MyPage/page.jsx create mode 100644 src/routes/SideLayout.jsx diff --git a/src/router/main-router.jsx b/src/router/main-router.jsx index ea4df1b..142f392 100644 --- a/src/router/main-router.jsx +++ b/src/router/main-router.jsx @@ -4,11 +4,12 @@ import MainLayout from "../routes/mainLayout"; // pages import TradingPage from "../routes/Trading/TradingPage"; -import MarketInfoPage from "../routes/MarketInfo/page"; -import InvestStrategyPage from "../routes/InvestStrategy/page"; -import HotStockPage from "../routes/HotStock/page"; -import FeedPage from "../routes/Feed/page"; -import MyPage from "../routes/MyPage/page"; +import MarketInfoPage from "../routes/MarketInfo/MarketInfoPage"; +import InvestStrategyPage from "../routes/InvestStrategy/InvestStrategyPage"; +import HotStockPage from "../routes/HotStock/HotStockPage"; +import FeedPage from "../routes/Feed/FeedPage"; +import MyPage from "../routes/MyPage/MyPage"; +import SideLayout from "../routes/SideLayout"; export const mainRoutes = [ { @@ -17,33 +18,39 @@ export const mainRoutes = [ children: [ { path: "", - element: , - index: true, - }, - { - path: "/market", - element: , - index: true, - }, - { - path: "/strategy", - element: , - index: true, - }, - { - path: "/hot", - element: , - index: true, - }, - { - path: "/feed", - element: , - index: true, - }, - { - path: "/mypage", - element: , - index: true, + element: , + children: [ + { + path: "", + element: , + index: true, + }, + { + path: "/market", + element: , + index: true, + }, + { + path: "/strategy", + element: , + index: true, + }, + { + path: "/hot", + element: , + index: true, + }, + { + path: "/feed", + element: , + index: true, + }, + { + path: "/mypage", + element: , + index: true, + }, + ], }, ], }, diff --git a/src/routes/Feed/FeedPage.jsx b/src/routes/Feed/FeedPage.jsx new file mode 100644 index 0000000..0775e8e --- /dev/null +++ b/src/routes/Feed/FeedPage.jsx @@ -0,0 +1,15 @@ +import React from "react"; +import styled from "styled-components"; + +export default function FeedPage() { + return FeedPage; +} + +const Container = styled.div` + display: flex; + flex-direction: row; + width: 100%; + height: 100%; + position: relative; + overflow: hidden; +`; diff --git a/src/routes/Feed/page.jsx b/src/routes/Feed/page.jsx deleted file mode 100644 index 95b9336..0000000 --- a/src/routes/Feed/page.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -export default function FeedPage() { - return ( -
FeedPage
- ) -} diff --git a/src/routes/HotStock/HotStockPage.jsx b/src/routes/HotStock/HotStockPage.jsx new file mode 100644 index 0000000..2ce6523 --- /dev/null +++ b/src/routes/HotStock/HotStockPage.jsx @@ -0,0 +1,15 @@ +import React from "react"; +import styled from "styled-components"; + +export default function HotStockPage() { + return HotStockPage; +} + +const Container = styled.div` + display: flex; + flex-direction: row; + width: 100%; + height: 100%; + position: relative; + overflow: hidden; +`; diff --git a/src/routes/HotStock/page.jsx b/src/routes/HotStock/page.jsx deleted file mode 100644 index 95db379..0000000 --- a/src/routes/HotStock/page.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -export default function HotStockPage() { - return ( -
HotStockPage
- ) -} diff --git a/src/routes/InvestStrategy/InvestStrategyPage.jsx b/src/routes/InvestStrategy/InvestStrategyPage.jsx new file mode 100644 index 0000000..b1f2847 --- /dev/null +++ b/src/routes/InvestStrategy/InvestStrategyPage.jsx @@ -0,0 +1,15 @@ +import React from "react"; +import styled from "styled-components"; + +export default function InvestStrategyPage() { + return InvestStrategyPage; +} + +const Container = styled.div` + display: flex; + flex-direction: row; + width: 100%; + height: 100%; + position: relative; + overflow: hidden; +`; diff --git a/src/routes/InvestStrategy/page.jsx b/src/routes/InvestStrategy/page.jsx deleted file mode 100644 index a60af54..0000000 --- a/src/routes/InvestStrategy/page.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -export default function InvestStrategyPage() { - return ( -
InvestStrategyPage
- ) -} diff --git a/src/routes/MarketInfo/MarketInfoPage.jsx b/src/routes/MarketInfo/MarketInfoPage.jsx new file mode 100644 index 0000000..486ef2d --- /dev/null +++ b/src/routes/MarketInfo/MarketInfoPage.jsx @@ -0,0 +1,15 @@ +import React from "react"; +import styled from "styled-components"; + +export default function MarketInfoPage() { + return MarketInfoPage; +} + +const Container = styled.div` + display: flex; + flex-direction: row; + width: 100%; + height: 100%; + position: relative; + overflow: hidden; +`; diff --git a/src/routes/MarketInfo/page.jsx b/src/routes/MarketInfo/page.jsx deleted file mode 100644 index ec8bcc7..0000000 --- a/src/routes/MarketInfo/page.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -export default function MarketInfoPage() { - return ( -
MarketInfoPage
- ) -} diff --git a/src/routes/MyPage/MyPage.jsx b/src/routes/MyPage/MyPage.jsx new file mode 100644 index 0000000..6843e11 --- /dev/null +++ b/src/routes/MyPage/MyPage.jsx @@ -0,0 +1,15 @@ +import React from "react"; +import styled from "styled-components"; + +export default function MyPage() { + return MyPage; +} + +const Container = styled.div` + display: flex; + flex-direction: row; + width: 100%; + height: 100%; + position: relative; + overflow: hidden; +`; diff --git a/src/routes/MyPage/page.jsx b/src/routes/MyPage/page.jsx deleted file mode 100644 index 487f4d6..0000000 --- a/src/routes/MyPage/page.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -export default function MyPage() { - return ( -
MyPage
- ) -} diff --git a/src/routes/SideLayout.jsx b/src/routes/SideLayout.jsx new file mode 100644 index 0000000..dc7dd66 --- /dev/null +++ b/src/routes/SideLayout.jsx @@ -0,0 +1,24 @@ +import React from "react"; +import { Outlet } from "react-router-dom"; +import styled from "styled-components"; +import SideNavbar from "~/components/side-bar/SideNavbar"; +const SideLayout = () => { + return ( + + + + + ); +}; + +const Container = styled.div` + display: flex; + flex-direction: column; + width: 480px; + position: relative; + overflow: hidden; + z-index: 999; + background-color: white; + border-left: 1px solid #e2e2e2; +`; +export default SideLayout; diff --git a/src/routes/Trading/TradingPage.jsx b/src/routes/Trading/TradingPage.jsx index 923cd41..04a6adc 100644 --- a/src/routes/Trading/TradingPage.jsx +++ b/src/routes/Trading/TradingPage.jsx @@ -1,40 +1,8 @@ import React, { useState } from "react"; -import MyStockList from "../../components/invest/left-bar/MyStockList"; import styled from "styled-components"; -import Indicators from "../../components/invest/left-bar/Indicators"; -import ChartIndicators from "../../components/invest/left-bar/ChartIndicators"; export default function TradingPage() { - const [showIndicators, setShowIndicators] = useState(false); - const [showCharts, setShowCharts] = useState(false); - - const toggleIndicators = () => { - setShowIndicators(!showIndicators); - setShowCharts(false); - }; - - const toggleCharts = () => { - setShowCharts(!showCharts); - setShowIndicators(false); - }; - - return ( - - {/* - - - - - - - {showCharts ? : <>} - - - {showIndicators ? : <>} - - */} - - ); + return TradingPage; } const Container = styled.div` @@ -45,41 +13,3 @@ const Container = styled.div` position: relative; overflow: hidden; `; - -const ContentContainer = styled.div` - display: flex; - flex-direction: column; - flex-grow: 1; - transition: margin-left 0.3s ease; -`; - -const Content = styled.div` - display: flex; - align-items: center; -`; - -const ChartsContainer = styled.div` - width: 250px; - height: 100%; - background-color: #fff; - box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); - transform: translateX(${(props) => (props.$showcharts ? "0" : "-100%")}); - transition: transform 0.3s ease; - position: absolute; - top: 0; - left: 0; - overflow: hidden; -`; - -const IndicatorsContainer = styled.div` - width: 250px; - height: 100%; - background-color: #fff; - box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); - transform: translateX(${(props) => (props.$showindicators ? "0" : "-100%")}); - transition: transform 0.3s ease; - position: absolute; - top: 0; - left: 0; - overflow: hidden; -`; diff --git a/src/routes/mainLayout.jsx b/src/routes/mainLayout.jsx index 3cdd615..dd242a7 100644 --- a/src/routes/mainLayout.jsx +++ b/src/routes/mainLayout.jsx @@ -32,11 +32,18 @@ export default function MainLayout() { {showCharts ? : <>} - {showIndicators ? : <>} + {showIndicators ? ( + + ) : ( + <> + )} - + @@ -45,7 +52,9 @@ export default function MainLayout() { const Container = styled.div` display: flex; -` + height: calc(100vh - 57px); + overflow: hidden; +`; const LeftContainer = styled.div` display: flex; From 4b2e45dcb15842291d22cb5d67f36d3ab715b70a Mon Sep 17 00:00:00 2001 From: eunxoo Date: Thu, 14 Mar 2024 13:39:29 +0900 Subject: [PATCH 22/84] =?UTF-8?q?feat:=20=EC=82=AC=EC=9D=B4=EB=93=9C=20?= =?UTF-8?q?=EB=84=A4=EB=B9=84=EB=B0=94=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/side-bar/SideNavbar.jsx | 145 +++++++++++++++++++++++++ 1 file changed, 145 insertions(+) create mode 100644 src/components/side-bar/SideNavbar.jsx diff --git a/src/components/side-bar/SideNavbar.jsx b/src/components/side-bar/SideNavbar.jsx new file mode 100644 index 0000000..634edfc --- /dev/null +++ b/src/components/side-bar/SideNavbar.jsx @@ -0,0 +1,145 @@ +import React from "react"; +import { Link, useLocation } from "react-router-dom"; +import styled from "styled-components"; + +const SideNavbar = () => { + const location = useLocation(); + return ( + + ); +}; + +const Nav = styled.nav` + display: flex; + align-items: center; + justify-content: center; + text-align: center; + /* z-index: 1000; */ + height: 62px; + border-top: 1px solid #e2e2e2; + /* border-bottom: 1px solid #e2e2e2; */ + img { + width: 22px; + } + + ul { + list-style: none; + display: flex; + justify-content: space-around; + width: 100%; + padding-left: 0px; + margin-bottom: 0px; + } + + li { + flex: 6; + } + + a { + text-decoration: none; + color: #4e5968; + font-size: 12px; + + &.active { + color: #ff8049; + } + } +`; + +export default SideNavbar; From 72848a2970d240b5fb4ef9ba43b1640f8c8e4900 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Thu, 14 Mar 2024 16:50:45 +0900 Subject: [PATCH 23/84] =?UTF-8?q?feat:=20=EB=B3=B4=EC=A1=B0=EC=A7=80?= =?UTF-8?q?=ED=91=9C=20=EC=B0=A8=ED=8A=B8=20=EA=B5=AC=ED=98=84=20=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 33 -- src/Json/chartData.json | 208 +++++++++ src/Json/indiData.json | 433 ++++++++++++++++++ src/assets/icon/+.svg | 4 + src/assets/icon/+White.svg | 4 + src/assets/icon/-.svg | 3 + src/assets/icon/-White.svg | 3 + src/assets/icon/BlankStar.svg | 3 + src/assets/icon/FilledStar.svg | 3 + src/assets/icon/X.svg | 4 + src/assets/icon/search.svg | 5 + src/assets/icon/searchGray.svg | 5 + src/components/invest/chart/MainChart.jsx | 23 +- .../invest/chart/subChart/MACDChart.jsx | 79 ++++ .../invest/chart/subChart/SMAChart.jsx | 38 ++ src/components/invest/chart/subChart/data.js | 213 +++++++++ .../invest/left-bar/ChartIndicators.jsx | 3 +- src/components/invest/left-bar/Indicators.jsx | 3 +- src/lib/apis/chart.jsx | 8 +- src/store/reducers/Chart/SubChart/sma.jsx | 29 ++ src/store/reducers/Chart/chart.jsx | 7 + src/store/reducers/Chart/clickCompany.jsx | 30 ++ 22 files changed, 1095 insertions(+), 46 deletions(-) create mode 100644 src/Json/chartData.json create mode 100644 src/Json/indiData.json create mode 100644 src/assets/icon/+.svg create mode 100644 src/assets/icon/+White.svg create mode 100644 src/assets/icon/-.svg create mode 100644 src/assets/icon/-White.svg create mode 100644 src/assets/icon/BlankStar.svg create mode 100644 src/assets/icon/FilledStar.svg create mode 100644 src/assets/icon/X.svg create mode 100644 src/assets/icon/search.svg create mode 100644 src/assets/icon/searchGray.svg create mode 100644 src/components/invest/chart/subChart/MACDChart.jsx create mode 100644 src/components/invest/chart/subChart/SMAChart.jsx create mode 100644 src/components/invest/chart/subChart/data.js create mode 100644 src/store/reducers/Chart/SubChart/sma.jsx create mode 100644 src/store/reducers/Chart/clickCompany.jsx diff --git a/package-lock.json b/package-lock.json index 2837b40..62cde45 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3853,11 +3853,6 @@ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "dev": true }, - "node_modules/nan": { - "version": "2.19.0", - "resolved": "https://registry.npmjs.org/nan/-/nan-2.19.0.tgz", - "integrity": "sha512-nO1xXxfh/RWNxfd/XPfbIfFk5vgLsAxUR9y5O0cHMJu/AW9U95JLXqthYHjEp+8gQ5p96K9jUp8nbVOxCdRbtw==" - }, "node_modules/nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", @@ -4879,34 +4874,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/talib": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/talib/-/talib-1.1.5.tgz", - "integrity": "sha512-at8OQzwnAt5h/6d28/rL6xEO6d7/WzkKNd7NUtNVNewFGPwazAeglXo/sqTNLBZ0zUtZ8w4sXwpapKzH3eIX6A==", - "funding": [ - { - "type": "PayPal", - "url": "https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=AZDHC49PNM7MY&item_name=talib" - }, - { - "type": "Coinbase", - "url": "https://commerce.coinbase.com/checkout/1da811db-5adf-4d02-9ab3-dd68e62234e1" - } - ], - "hasInstallScript": true, - "os": [ - "darwin", - "linux", - "freebsd", - "win32" - ], - "dependencies": { - "nan": "^2.17.0" - }, - "engines": { - "node": ">=8.16.0" - } - }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", diff --git a/src/Json/chartData.json b/src/Json/chartData.json new file mode 100644 index 0000000..3007f31 --- /dev/null +++ b/src/Json/chartData.json @@ -0,0 +1,208 @@ +[ + { + "id": 0, + "name": "SMA", + "showName": "단순 이동평균선", + "vars": [ + { + "id": 0, + "key": "lineTime1", + "name": "5일 선", + "default": 5, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 1, + "key": "lineTime2", + "name": "20일 선", + "default": 20, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 2, + "key": "lineTime3", + "name": "60일 선", + "default": 60, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 3, + "key": "lineTime4", + "name": "120일 선", + "default": 120, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 4, + "key": "lineTime5", + "name": "240일 선", + "default": 240, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 1, + "name": "WMA", + "showName": "가중 이동평균선", + "vars": [ + { + "id": 0, + "key": "lineTime1", + "name": "5일 선", + "default": 5, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 1, + "key": "lineTime2", + "name": "20일 선", + "default": 20, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 2, + "key": "lineTime3", + "name": "60일 선", + "default": 60, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 3, + "key": "lineTime4", + "name": "120일 선", + "default": 120, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 4, + "key": "lineTime5", + "name": "240일 선", + "default": 240, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 2, + "name": "EMA", + "showName": "지수 이동평균선", + "vars": [ + { + "id": 0, + "key": "lineTime1", + "name": "5일 선", + "default": 5, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 1, + "key": "lineTime2", + "name": "20일 선", + "default": 20, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 2, + "key": "lineTime3", + "name": "60일 선", + "default": 60, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 3, + "key": "lineTime4", + "name": "120일 선", + "default": 120, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 4, + "key": "lineTime5", + "name": "240일 선", + "default": 240, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 3, + "name": "BBANDS", + "showName": "볼린저밴드", + "vars": [ + { + "id": 0, + "key": "lineTime", + "name": "기간", + "default": 20, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 1, + "key": "stdev", + "name": "승수", + "default": 2, + "val": 0.01, + "max": 3, + "min": 1 + } + ] + }, + { + "id": 4, + "name": "SAR", + "showName": "Parabolic SAR", + "vars": [ + { + "id": 0, + "key": "acc", + "name": "가속증가량", + "default": 0.02, + "val": 0.01, + "max": 100, + "min": 0.01 + }, + { + "id": 1, + "key": "accMax", + "name": "최대가속요소", + "default": 0.2, + "val": 0.01, + "max": 100, + "min": 0.01 + } + ] + } +] diff --git a/src/Json/indiData.json b/src/Json/indiData.json new file mode 100644 index 0000000..8eb47dd --- /dev/null +++ b/src/Json/indiData.json @@ -0,0 +1,433 @@ +[ + { + "id": 0, + "name": "MACD", + "showName": "MACD", + "vars": [ + { + "id": 0, + "key": "longPeriod", + "name": "장기", + "default": 26, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 1, + "key": "shortPeriod", + "name": "단기", + "default": 12, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 2, + "key": "signalPeriod", + "name": "시그널", + "default": 9, + "val": 1, + "max": 480, + "min": 1 + } + ] + }, + { + "id": 1, + "name": "STOCHF", + "showName": "Stochastic Fast", + "vars": [ + { + "id": 0, + "key": "K", + "name": "기간(%K)", + "default": 14, + "val": 1, + "max": 480, + "min": 1 + }, + { + "id": 1, + "key": "D", + "name": "기간(%D)", + "default": 3, + "val": 1, + "max": 480, + "min": 1 + } + ] + }, + { + "id": 2, + "name": "STOCH", + "showName": "Stochastic slow", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 14, + "val": 1, + "max": 480, + "min": 1 + }, + { + "id": 1, + "key": "K", + "name": "기간(%K)", + "default": 3, + "val": 1, + "max": 480, + "min": 1 + }, + { + "id": 2, + "key": "D", + "name": "기간(%D)", + "default": 3, + "val": 1, + "max": 480, + "min": 1 + } + ] + }, + { + "id": 3, + "name": "RSI", + "showName": "RSI", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 10, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 4, + "name": "CCI", + "showName": "CCI", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 20, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 5, + "name": "MOM", + "showName": "모멘텀", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 10, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 6, + "name": "ROC", + "showName": "ROC", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 10, + "val": 1, + "max": 480, + "min": 1 + } + ] + }, + { + "id": 7, + "name": "AD", + "showName": "AD Line", + "vars": [] + }, + { + "id": 8, + "name": "ATR", + "showName": "ATR", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 20, + "val": 1, + "max": 480, + "min": 1 + } + ] + }, + { + "id": 9, + "name": "MFI", + "showName": "MFI", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 14, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 10, + "name": "OBV", + "showName": "OBV", + "vars": [] + }, + { + "id": 11, + "name": "ADOSC", + "showName": "Chaikin Oscillator", + "vars": [ + { + "id": 0, + "key": "longPeriod", + "name": "장기", + "default": 10, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 1, + "key": "shortPeriod", + "name": "단기", + "default": 3, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 12, + "name": "TRIX", + "showName": "TRIX", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 12, + "val": 1, + "max": 480, + "min": 1 + } + ] + }, + { + "id": 13, + "name": "WILLR", + "showName": "Williams %R", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 14, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 14, + "name": "DX", + "showName": "DMI", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 14, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 15, + "name": "ADX", + "showName": "ADX", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 14, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 16, + "name": "ADXR", + "showName": "ADXR", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 14, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 17, + "name": "AROON", + "showName": "Aroon", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 25, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 18, + "name": "AROONOSC", + "showName": "Aroon Oscillator", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "기간", + "default": 25, + "val": 1, + "max": 480, + "min": 2 + } + ] + }, + { + "id": 19, + "name": "STOCHRSI", + "showName": "Stochastic RSI", + "vars": [ + { + "id": 0, + "key": "Date", + "name": "RSI 기간", + "default": 14, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 1, + "key": "K", + "name": "기간(%K)", + "default": 14, + "val": 1, + "max": 480, + "min": 1 + }, + { + "id": 2, + "key": "D", + "name": "기간(%D)", + "default": 3, + "val": 1, + "max": 480, + "min": 1 + } + ] + }, + { + "id": 20, + "name": "ULTOSC", + "showName": "Ultimate Oscillator", + "vars": [ + { + "id": 0, + "key": "longPeriod", + "name": "장기", + "default": 28, + "val": 1, + "max": 480, + "min": 1 + }, + { + "id": 1, + "key": "middlePeriod", + "name": "중기", + "default": 14, + "val": 1, + "max": 480, + "min": 1 + }, + { + "id": 2, + "key": "shortPeriod", + "name": "단기", + "default": 7, + "val": 1, + "max": 480, + "min": 1 + } + ] + }, + { + "id": 21, + "name": "PPO", + "showName": "PPO", + "vars": [ + { + "id": 0, + "key": "longPeriod", + "name": "장기", + "default": 26, + "val": 1, + "max": 480, + "min": 2 + }, + { + "id": 1, + "key": "shortPeriod", + "name": "단기", + "default": 12, + "val": 1, + "max": 480, + "min": 2 + } + ] + } +] diff --git a/src/assets/icon/+.svg b/src/assets/icon/+.svg new file mode 100644 index 0000000..2fd77ea --- /dev/null +++ b/src/assets/icon/+.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icon/+White.svg b/src/assets/icon/+White.svg new file mode 100644 index 0000000..cadfc9d --- /dev/null +++ b/src/assets/icon/+White.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icon/-.svg b/src/assets/icon/-.svg new file mode 100644 index 0000000..ce8a7eb --- /dev/null +++ b/src/assets/icon/-.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon/-White.svg b/src/assets/icon/-White.svg new file mode 100644 index 0000000..8dff620 --- /dev/null +++ b/src/assets/icon/-White.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon/BlankStar.svg b/src/assets/icon/BlankStar.svg new file mode 100644 index 0000000..dda5362 --- /dev/null +++ b/src/assets/icon/BlankStar.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon/FilledStar.svg b/src/assets/icon/FilledStar.svg new file mode 100644 index 0000000..cf5ddc9 --- /dev/null +++ b/src/assets/icon/FilledStar.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon/X.svg b/src/assets/icon/X.svg new file mode 100644 index 0000000..6e2e13a --- /dev/null +++ b/src/assets/icon/X.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icon/search.svg b/src/assets/icon/search.svg new file mode 100644 index 0000000..03c1a82 --- /dev/null +++ b/src/assets/icon/search.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icon/searchGray.svg b/src/assets/icon/searchGray.svg new file mode 100644 index 0000000..9faeef6 --- /dev/null +++ b/src/assets/icon/searchGray.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/invest/chart/MainChart.jsx b/src/components/invest/chart/MainChart.jsx index 182d7da..46ed461 100644 --- a/src/components/invest/chart/MainChart.jsx +++ b/src/components/invest/chart/MainChart.jsx @@ -32,12 +32,16 @@ import { chartInstance } from '../../../lib/apis/api'; import { useSelector, useDispatch } from 'react-redux'; // import { getChartDatas } from '../../../store/reducers/Chart/chart' import styled from "styled-components"; -// import SMAChart from "./subChart/SMAChart"; +import SMAChart from "./subChart/SMAChart"; +import { getChartDatas, setSubDatas } from "../../../store/reducers/Chart/chart"; +import { fakeData } from "./subChart/data"; +import MACDChart from "./subChart/MACDChart"; export default function MainChart({ toggleCharts, toggleIndicators }) { - // const dataList = useSelector((state) => state.chart.datas) + const dataList = useSelector((state) => state.chart.datas) + const subDataList = useSelector((state) => state.chart.subDatas) const company = useSelector((state) => state.company.data) - // const dispatch = useDispatch(); + const dispatch = useDispatch(); const [datas, setDatas] = useState([]); async function getData() { const data = await chartInstance.post('/stockPrice', { @@ -50,14 +54,13 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { setDatas(data.data.reverse()); } + const subDatas = fakeData; useEffect(() => { getData(); - // dispatch(getChartDatas()) - // .then((res) => { - // console.log('data payload',res.payload) - // }) + dispatch(getChartDatas()) + dispatch(setSubDatas(subDatas)); - // console.log('데이터:', dataList) + console.log('모든 데이터:', dataList) }, []) useEffect(() => { @@ -88,7 +91,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { const width = 1150; const { data, xScale, xAccessor, displayXAccessor } = ScaleProvider( - datas + dataList ); // 소수점 이하 둘째짜리까지만 표현 @@ -221,6 +224,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { + {/* 분봉 호버했을 때, 날짜/시가/종가/고가/저가 표시 */} + ); } diff --git a/src/components/invest/chart/subChart/MACDChart.jsx b/src/components/invest/chart/subChart/MACDChart.jsx new file mode 100644 index 0000000..6c273a1 --- /dev/null +++ b/src/components/invest/chart/subChart/MACDChart.jsx @@ -0,0 +1,79 @@ +import React from 'react' +import { BarSeries, Chart, ChartCanvas, XAxis, YAxis, discontinuousTimeScaleProviderBuilder } from 'react-financial-charts' +import { fakeData } from './data'; +import { useSelector } from 'react-redux'; +import { format } from 'd3-format'; + +export default function MACDChart() { + const dataList = useSelector((state) => state.chart.datas) + const margin = { left: 0, right: 78, top: 0, bottom: 24 }; + + const height = 800; + const width = 1150; + + const ScaleProvider = discontinuousTimeScaleProviderBuilder().inputDateAccessor( + (d) => { + const year = d.date.substr(0, 4) + const month = d.date.substr(4, 2) + const day = d.date.substr(6, 2) + const nDate = `${year}-${month}-${day}` + return new Date(nDate) + } + ); + + const dataPoints = fakeData.result.outMACDHist.map((item, idx) => { + return { + date: dataList[fakeData.begIndex + idx].date, + y: item + } + }); + + const MACDData = (data) => { + return data.y; + } + + const { data, xScale, xAccessor, displayXAccessor } = ScaleProvider( + dataPoints + ); + + const barChartHeight = height - margin.top - margin.bottom / 4; + const barChartOrigin = (_, h) => [0, h - barChartHeight]; + + const pricesDisplayFormat = format(".2f"); + const x_max = xAccessor(data[data.length - 1]); + const x_min = xAccessor(data[Math.max(0, data.length - 100)]); + const xExtents = [x_min, x_max + 5]; + + console.log('MACD', data) + + const MACDExtents = (data) => { + return data.y; + }; + + return ( + + {/* MACD 차트 */} + + + + + + + ) +} diff --git a/src/components/invest/chart/subChart/SMAChart.jsx b/src/components/invest/chart/subChart/SMAChart.jsx new file mode 100644 index 0000000..2926d04 --- /dev/null +++ b/src/components/invest/chart/subChart/SMAChart.jsx @@ -0,0 +1,38 @@ +import React, { useEffect } from 'react'; +import { Chart, ChartCanvas, CurrentCoordinate, LineSeries, ema } from 'react-financial-charts'; +import { fakeData } from './data'; +import { useDispatch, useSelector } from 'react-redux'; +import { setSubDatas } from '../../../../store/reducers/Chart/chart'; + +export default function SMAChart({ema5, ema10, ema30, ema60, ema120}) { + + return ( + <> + {/* + + + + + + + + + */} + + ) +} diff --git a/src/components/invest/chart/subChart/data.js b/src/components/invest/chart/subChart/data.js new file mode 100644 index 0000000..0e5671b --- /dev/null +++ b/src/components/invest/chart/subChart/data.js @@ -0,0 +1,213 @@ +export const fakeData = { + "begIndex": 33, + "nbElement": 67, + "result": { + "outMACD": [ + -943.0898883153131, + -920.3258682098822, + -820.2078938456834, + -716.4663709809101, + -539.2732533976086, + -306.55188488194835, + -136.68127553341037, + 93.69235031553399, + 289.07120418218983, + 574.4640816653846, + 903.1968024095913, + 1158.435295272895, + 1361.1613475700942, + 1608.1841936995843, + 1775.416518231803, + 1942.0467836831886, + 2074.3975981116673, + 2058.7249017452414, + 1975.1212233755941, + 1926.9973018794262, + 1875.3104995461908, + 1925.1249934498192, + 1950.1919047025367, + 1907.7207735791235, + 1900.5685110342383, + 1833.4199462365723, + 1656.2132935177651, + 1514.4563628290416, + 1258.4991508896783, + 1107.4386668814695, + 976.4660521527403, + 894.6331938649455, + 852.2327129401601, + 920.9818209000514, + 932.4407308868686, + 914.837988216852, + 898.5983694501338, + 668.2271767474158, + 496.07621748749807, + 443.29610732672154, + 412.84677763009677, + 440.1261144474847, + 512.3235878577252, + 539.1184905254922, + 545.9906394472346, + 497.2894382953673, + 445.4889024835429, + 471.62251228927926, + 582.4494429087063, + 527.0295231044583, + 549.3981953592156, + 552.6853523068421, + 564.916767552917, + 607.9480271610519, + 690.5742501912318, + 755.4173109676776, + 781.6571185735374, + 833.1936388507893, + 888.0077941808267, + 944.7652344629896, + 938.580719191581, + 931.0164326491358, + 914.4801234475162, + 946.9433555721916, + 945.6317185693333, + 901.9188209908025, + 921.2102109678381 + ], + "outMACDSignal": [ + -1233.973107020408, + -1171.2436592583028, + -1101.0365061757789, + -1024.1224791368052, + -927.1526339889658, + -803.0324841675623, + -669.7622424407319, + -517.0713238894788, + -355.8428182751451, + -169.78143828703912, + 44.81420985228701, + 267.53842693640865, + 486.26301106314577, + 710.6472475904335, + 923.6011017187075, + 1127.2902381116037, + 1316.7117101116164, + 1465.1143484383415, + 1567.115723425792, + 1639.092039116519, + 1686.3357312024532, + 1734.0935836519263, + 1777.3132478620485, + 1803.3947530054634, + 1822.8295046112185, + 1824.9475929362893, + 1791.2007330525844, + 1735.8518590078759, + 1640.3813173842364, + 1533.792787283683, + 1422.3274402574946, + 1316.7885909789848, + 1223.8774153712197, + 1163.298296476986, + 1117.1267833589625, + 1076.6690243305404, + 1041.0548933544592, + 966.4893500330505, + 872.4067235239401, + 786.5846002844963, + 711.8370357536164, + 657.4948514923901, + 628.4605987654571, + 610.5921771174642, + 597.6718695834182, + 577.595383325808, + 551.174087157355, + 535.2637721837398, + 544.700906328733, + 541.1666296838781, + 542.8129428189457, + 544.7874247165249, + 548.8132932838033, + 560.6402400592531, + 586.6270420856488, + 620.3850958620545, + 652.6395004043511, + 688.7503280936387, + 728.6018213110763, + 771.8345039414589, + 805.1837469914833, + 830.3502841230138, + 847.1762519879143, + 867.1296727047697, + 882.8300818776825, + 886.6478297003065, + 893.5603059538128 + ], + "outMACDHist": [ + 290.8832187050948, + 250.91779104842067, + 280.82861233009544, + 307.656108155895, + 387.8793805913572, + 496.48059928561395, + 533.0809669073216, + 610.7636742050128, + 644.9140224573349, + 744.2455199524237, + 858.3825925573043, + 890.8968683364864, + 874.8983365069485, + 897.5369461091508, + 851.8154165130954, + 814.7565455715849, + 757.6858880000509, + 593.6105533068999, + 408.005499949802, + 287.90526276290734, + 188.97476834373765, + 191.03140979789282, + 172.87865684048825, + 104.32602057366012, + 77.73900642301987, + 8.472353300282975, + -134.98743953481926, + -221.39549617883426, + -381.8821664945581, + -426.35412040221354, + -445.86138810475427, + -422.15539711403926, + -371.6447024310596, + -242.31647557693464, + -184.68605247209393, + -161.83103611368847, + -142.45652390432542, + -298.26217328563473, + -376.330506036442, + -343.2884929577748, + -298.99025812351965, + -217.3687370449054, + -116.1370109077319, + -71.47368659197195, + -51.68123013618367, + -80.30594503044074, + -105.68518467381205, + -63.64125989446052, + 37.74853657997323, + -14.137106579419765, + 6.585252540269948, + 7.897927590317181, + 16.10347426911369, + 47.307787101798795, + 103.94720810558306, + 135.0322151056231, + 129.01761816918633, + 144.44331075715058, + 159.40597286975049, + 172.93073052153068, + 133.3969722000977, + 100.66614852612202, + 67.30387145960196, + 79.8136828674219, + 62.801636691650856, + 15.270991290496, + 27.649905014025308 + ] + } +} \ No newline at end of file diff --git a/src/components/invest/left-bar/ChartIndicators.jsx b/src/components/invest/left-bar/ChartIndicators.jsx index 5e0ad8b..08aeae8 100644 --- a/src/components/invest/left-bar/ChartIndicators.jsx +++ b/src/components/invest/left-bar/ChartIndicators.jsx @@ -1,7 +1,8 @@ import React, { useState } from "react"; import styled from "styled-components"; import IndicatorDetail from "./IndicatorDetail"; -import chartData from "../../../../public/Json/chartData.json"; +// import chartData from "../../../../public/Json/chartData.json"; +import chartData from '../../../Json/chartData.json' const ChartIndicators = ({ onClose }) => { const [showDetail, setShowDetail] = useState( diff --git a/src/components/invest/left-bar/Indicators.jsx b/src/components/invest/left-bar/Indicators.jsx index eeedfe5..2940ee1 100644 --- a/src/components/invest/left-bar/Indicators.jsx +++ b/src/components/invest/left-bar/Indicators.jsx @@ -1,7 +1,8 @@ import React, { useState } from "react"; import styled from "styled-components"; import IndicatorDetail from "./IndicatorDetail"; -import indiData from "../../../../public/Json/indiData.json"; +// import indiData from "../../../../public/Json/indiData.json"; +import indiData from '../../../Json/indiData.json' const Indicators = ({ onClose }) => { const [showDetail, setShowDetail] = useState( diff --git a/src/lib/apis/chart.jsx b/src/lib/apis/chart.jsx index 39f4773..9e1f13f 100644 --- a/src/lib/apis/chart.jsx +++ b/src/lib/apis/chart.jsx @@ -1,10 +1,14 @@ -import { BASE_URL, chartInstance } from './api'; +import { chartInstance, subChartInstance } from './api'; export async function getChartData() { - return await chartInstance.post('/', { + return await chartInstance.post('/stockPrice', { "code" : "005930", "start_date" : "20220101", "end_date" : "20220809", "time_format" : "D" }) +} + +export async function getSMA(data) { + return await subChartInstance.post('/SMA', data) } \ No newline at end of file diff --git a/src/store/reducers/Chart/SubChart/sma.jsx b/src/store/reducers/Chart/SubChart/sma.jsx new file mode 100644 index 0000000..c23dbb5 --- /dev/null +++ b/src/store/reducers/Chart/SubChart/sma.jsx @@ -0,0 +1,29 @@ +import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; +import { getSMA } from '../../../lib/apis/chart' + +const initialState = { + datas: [], +}; + +export const getSMAData = createAsyncThunk( + "subChart/getSMA", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getSMA(data); + return response.data; + } +) + +const smaSlice = createSlice({ + name: "subChart", + initialState: initialState, + reducers: { + }, + extraReducers: (builder) => { + builder.addCase(getSMAData.fulfilled, (state, action) => { + state.datas = action.payload; + }) + }, +}); + +export default smaSlice.reducer; diff --git a/src/store/reducers/Chart/chart.jsx b/src/store/reducers/Chart/chart.jsx index 2035928..844c5ec 100644 --- a/src/store/reducers/Chart/chart.jsx +++ b/src/store/reducers/Chart/chart.jsx @@ -3,6 +3,7 @@ import { getChartData } from '../../../lib/apis/chart' const initialState = { datas: [], + subDatas: [], }; export const getChartDatas = createAsyncThunk( @@ -18,6 +19,9 @@ const chartSlice = createSlice({ name: "chart", initialState: initialState, reducers: { + setSubDatas(state, action) { + state.subDatas = action.payload; + } }, extraReducers: (builder) => { builder.addCase(getChartDatas.fulfilled, (state, action) => { @@ -26,4 +30,7 @@ const chartSlice = createSlice({ }, }); +const { setSubDatas } = chartSlice.actions; +export { setSubDatas }; + export default chartSlice.reducer; diff --git a/src/store/reducers/Chart/clickCompany.jsx b/src/store/reducers/Chart/clickCompany.jsx new file mode 100644 index 0000000..607d42f --- /dev/null +++ b/src/store/reducers/Chart/clickCompany.jsx @@ -0,0 +1,30 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + data: { + accvolume: "333333", + code: "005930", + favorite: true, + id: 1, + index: "코스피", + name: "삼성전자", + prdy_vrss: "1100", + price: "72800", + returns: "0.55%", + } +}; + +const companySlice = createSlice({ + name: "company", + initialState: initialState, + reducers: { + setClickCompany(state, action) { + state.data = action.payload; + } + }, +}); + +const { setClickCompany } = companySlice.actions; +export { setClickCompany }; + +export default companySlice.reducer; From 03c38965238227fb76ea8c4814b58e02a9fc629d Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Fri, 15 Mar 2024 16:24:49 +0900 Subject: [PATCH 24/84] =?UTF-8?q?feat:=20=EB=B3=B4=EC=A1=B0=20=EC=A7=80?= =?UTF-8?q?=ED=91=9C=20=EC=B0=A8=ED=8A=B8=20=ED=94=84=EB=A1=9C=EC=84=B8?= =?UTF-8?q?=EC=8A=A4=20=EA=B5=AC=EC=84=B1=20=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/invest/chart/MainChart.jsx | 102 +++- .../invest/chart/subChart/BBANDSChart.jsx | 52 ++ .../invest/chart/subChart/MACDChart.jsx | 51 +- .../invest/chart/subChart/SMAChart.jsx | 67 ++- src/components/invest/chart/subChart/data.js | 547 +++++++++++------- .../invest/left-bar/ChartIndicators.jsx | 33 +- src/components/invest/left-bar/Indicators.jsx | 8 +- src/lib/apis/chart.jsx | 5 +- .../reducers/Chart/SubChart/clickSubChart.jsx | 20 + src/store/reducers/Chart/SubChart/sma.jsx | 29 - src/store/reducers/Chart/chart.jsx | 11 +- src/store/store.js | 2 + 12 files changed, 594 insertions(+), 333 deletions(-) create mode 100644 src/components/invest/chart/subChart/BBANDSChart.jsx create mode 100644 src/store/reducers/Chart/SubChart/clickSubChart.jsx delete mode 100644 src/store/reducers/Chart/SubChart/sma.jsx diff --git a/src/components/invest/chart/MainChart.jsx b/src/components/invest/chart/MainChart.jsx index 46ed461..1c86875 100644 --- a/src/components/invest/chart/MainChart.jsx +++ b/src/components/invest/chart/MainChart.jsx @@ -32,17 +32,17 @@ import { chartInstance } from '../../../lib/apis/api'; import { useSelector, useDispatch } from 'react-redux'; // import { getChartDatas } from '../../../store/reducers/Chart/chart' import styled from "styled-components"; -import SMAChart from "./subChart/SMAChart"; -import { getChartDatas, setSubDatas } from "../../../store/reducers/Chart/chart"; +import { getChartDatas } from "../../../store/reducers/Chart/chart"; import { fakeData } from "./subChart/data"; -import MACDChart from "./subChart/MACDChart"; +import SMAChart from "./subChart/SMAChart"; export default function MainChart({ toggleCharts, toggleIndicators }) { const dataList = useSelector((state) => state.chart.datas) - const subDataList = useSelector((state) => state.chart.subDatas) const company = useSelector((state) => state.company.data) const dispatch = useDispatch(); const [datas, setDatas] = useState([]); + const [click, setClick] = useState(false); + async function getData() { const data = await chartInstance.post('/stockPrice', { "code" : "005930", @@ -51,20 +51,19 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { // 분, 일, 월, 연봉 "time_format" : "D" }) + setDatas(data.data.reverse()); } - const subDatas = fakeData; useEffect(() => { - getData(); + getData() dispatch(getChartDatas()) - dispatch(setSubDatas(subDatas)); - console.log('모든 데이터:', dataList) + console.log('모든 데이터:', datas) }, []) useEffect(() => { - console.log('company: ',company) + // console.log('company: ',company) // accvolume: "333333" // code: "005930" // favorite: true @@ -87,11 +86,11 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { ); const margin = { left: 0, right: 78, top: 0, bottom: 24 }; - const height = 800; + const height = 760; const width = 1150; const { data, xScale, xAccessor, displayXAccessor } = ScaleProvider( - dataList + datas ); // 소수점 이하 둘째짜리까지만 표현 @@ -102,9 +101,6 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { const gridHeight = height - margin.top - margin.bottom; - const elder = elderRay(); - const elderRayHeight = 100; - const elderRayOrigin = (_, h) => [0, h]; const barChartHeight = gridHeight / 4; const barChartOrigin = (_, h) => [0, h - barChartHeight]; const chartHeight = gridHeight - barChartHeight; @@ -173,26 +169,56 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { }; } - function volumeContent() { - return ({ currentItem, xAccessor }) => { - return { - x: HoverDisplayFormat(xAccessor(currentItem)), - y: [ - { - label: "거래량", - value: currentItem.volume && pricesDisplayFormat(currentItem.volume) - }, - ] - }; - }; - } + // async function getSMA() { + // const data = await chartInstance.post('/subChart/SMA', { + // "chart" : datas, + // "lineTime1" : 5, + // "lineTime2" : 10, + // "lineTime3" : 30, + // "lineTime4" : 60, + // "lineTime5" : 120 + // }) + + // // 단순이동평균선 데이터 삽입 + // const responses = [data.data.response1, data.data.response2, data.data.response3, data.data.response4, data.data.response5]; + // responses.forEach((response, index) => { + // const l_idx = response.nbElement; + // const subData = response.result.outReal; + // for (let i = 0; i < l_idx; i++) { + // const smaKey = `sma${[5, 10, 30, 60, 100][index]}`; // 예시에서는 100이 마지막 값이지만, 실제 데이터에 따라 조정 필요 + // datas[i][smaKey] = subData[l_idx - 1 - i]; + // } + // }); + + // console.log(data.data) + // } + + // 단순이동평균선 데이터 삽입 + // useEffect(() => { + // if (datas.length > 0) { + // const responses = [fakeData.response1, fakeData.response2, fakeData.response3, fakeData.response4, fakeData.response5]; + // responses.forEach((response, index) => { + // const f_idx = response.begIndex; + // const l_idx = response.nbElement; + // const subData = response.result.outReal; + // for (let i = 0; i < l_idx; i++) { + // const smaKey = `sma${[5, 10, 30, 60, 100][index]}`; // 예시에서는 100이 마지막 값이지만, 실제 데이터에 따라 조정 필요 + // datas[datas.length - i - 1][smaKey] = subData[i]; + // } + // }); + // } + // }, []) return ( - {company.name} + { + // getSMA() + setClick(prev => !prev) + console.log(datas) + }}>{company.name} {company.code} {company.index} @@ -236,7 +262,23 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { - {/* */} + {click && } + {/* d.sma5} + strokeStyle='#b3009e' + /> + d.sma10} + strokeStyle='#b33300' + /> + d.sma30} + strokeStyle='#edda02' + /> + d.sma60} + strokeStyle='#00b33f' + /> */} - + {/* */} ); } diff --git a/src/components/invest/chart/subChart/BBANDSChart.jsx b/src/components/invest/chart/subChart/BBANDSChart.jsx new file mode 100644 index 0000000..5a4cf10 --- /dev/null +++ b/src/components/invest/chart/subChart/BBANDSChart.jsx @@ -0,0 +1,52 @@ +import React, { useEffect, useState } from 'react'; +import { fakeData } from './data'; +import { LineSeries } from 'react-financial-charts'; + +export default function BBANDSChart({ datas, click }) { + const [smaCalculated, setSmaCalculated] = useState(false); + + const calculateBBANDS = () => { + const responses = [fakeData.response1, fakeData.response2, fakeData.response3, fakeData.response4, fakeData.response5]; + responses.forEach((response, index) => { + const f_idx = response.begIndex; + const l_idx = response.nbElement; + const subData = response.result.outReal; + for (let i = 0; i < l_idx; i++) { + const smaKey = `sma${[5, 10, 30, 60, 100][index]}`; // 예시에서는 100이 마지막 값이지만, 실제 데이터에 따라 조정 필요 + datas[datas.length - i - 1][smaKey] = subData[i]; + } + }); + // setSmaCalculated(true); // SMA 계산 완료 + } + + useEffect(() => { + if (click) { + calculateBBANDS() + } + }, [click]); + + return ( + <> + d.sma5} + strokeStyle='#b3009e' + /> + d.sma10} + strokeStyle='#b33300' + /> + d.sma30} + strokeStyle='#edda02' + /> + d.sma60} + strokeStyle='#00b33f' + /> + d.sma100} + strokeStyle='#0277ed' + /> + + ) +} diff --git a/src/components/invest/chart/subChart/MACDChart.jsx b/src/components/invest/chart/subChart/MACDChart.jsx index 6c273a1..4858c16 100644 --- a/src/components/invest/chart/subChart/MACDChart.jsx +++ b/src/components/invest/chart/subChart/MACDChart.jsx @@ -44,36 +44,35 @@ export default function MACDChart() { const x_min = xAccessor(data[Math.max(0, data.length - 100)]); const xExtents = [x_min, x_max + 5]; - console.log('MACD', data) - const MACDExtents = (data) => { return data.y; }; return ( - - {/* MACD 차트 */} - - - - - - + <> + // + // {/* MACD 차트 */} + // + // + // + // + // + // ) } diff --git a/src/components/invest/chart/subChart/SMAChart.jsx b/src/components/invest/chart/subChart/SMAChart.jsx index 2926d04..3392939 100644 --- a/src/components/invest/chart/subChart/SMAChart.jsx +++ b/src/components/invest/chart/subChart/SMAChart.jsx @@ -1,38 +1,53 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { Chart, ChartCanvas, CurrentCoordinate, LineSeries, ema } from 'react-financial-charts'; import { fakeData } from './data'; import { useDispatch, useSelector } from 'react-redux'; -import { setSubDatas } from '../../../../store/reducers/Chart/chart'; -export default function SMAChart({ema5, ema10, ema30, ema60, ema120}) { - +export default function SMAChart({datas, click}) { + const [smaCalculated, setSmaCalculated] = useState(false); + + const calculateSMA = () => { + const responses = [fakeData.response1, fakeData.response2, fakeData.response3, fakeData.response4, fakeData.response5]; + responses.forEach((response, index) => { + const f_idx = response.begIndex; + const l_idx = response.nbElement; + const subData = response.result.outReal; + for (let i = 0; i < l_idx; i++) { + const smaKey = `sma${[5, 10, 30, 60, 100][index]}`; // 예시에서는 100이 마지막 값이지만, 실제 데이터에 따라 조정 필요 + datas[datas.length - i - 1][smaKey] = subData[i]; + } + }); + // setSmaCalculated(true); // SMA 계산 완료 + } + + useEffect(() => { + if (click) { + calculateSMA() + } + }, [click]); + return ( <> - {/* - - - d.sma5} + strokeStyle='#b3009e' /> - - d.sma10} + strokeStyle='#b33300' /> - - d.sma30} + strokeStyle='#edda02' /> - - */} + d.sma60} + strokeStyle='#00b33f' + /> + d.sma100} + strokeStyle='#0277ed' + /> ) } diff --git a/src/components/invest/chart/subChart/data.js b/src/components/invest/chart/subChart/data.js index 0e5671b..3a6712a 100644 --- a/src/components/invest/chart/subChart/data.js +++ b/src/components/invest/chart/subChart/data.js @@ -1,213 +1,340 @@ export const fakeData = { - "begIndex": 33, - "nbElement": 67, - "result": { - "outMACD": [ - -943.0898883153131, - -920.3258682098822, - -820.2078938456834, - -716.4663709809101, - -539.2732533976086, - -306.55188488194835, - -136.68127553341037, - 93.69235031553399, - 289.07120418218983, - 574.4640816653846, - 903.1968024095913, - 1158.435295272895, - 1361.1613475700942, - 1608.1841936995843, - 1775.416518231803, - 1942.0467836831886, - 2074.3975981116673, - 2058.7249017452414, - 1975.1212233755941, - 1926.9973018794262, - 1875.3104995461908, - 1925.1249934498192, - 1950.1919047025367, - 1907.7207735791235, - 1900.5685110342383, - 1833.4199462365723, - 1656.2132935177651, - 1514.4563628290416, - 1258.4991508896783, - 1107.4386668814695, - 976.4660521527403, - 894.6331938649455, - 852.2327129401601, - 920.9818209000514, - 932.4407308868686, - 914.837988216852, - 898.5983694501338, - 668.2271767474158, - 496.07621748749807, - 443.29610732672154, - 412.84677763009677, - 440.1261144474847, - 512.3235878577252, - 539.1184905254922, - 545.9906394472346, - 497.2894382953673, - 445.4889024835429, - 471.62251228927926, - 582.4494429087063, - 527.0295231044583, - 549.3981953592156, - 552.6853523068421, - 564.916767552917, - 607.9480271610519, - 690.5742501912318, - 755.4173109676776, - 781.6571185735374, - 833.1936388507893, - 888.0077941808267, - 944.7652344629896, - 938.580719191581, - 931.0164326491358, - 914.4801234475162, - 946.9433555721916, - 945.6317185693333, - 901.9188209908025, - 921.2102109678381 - ], - "outMACDSignal": [ - -1233.973107020408, - -1171.2436592583028, - -1101.0365061757789, - -1024.1224791368052, - -927.1526339889658, - -803.0324841675623, - -669.7622424407319, - -517.0713238894788, - -355.8428182751451, - -169.78143828703912, - 44.81420985228701, - 267.53842693640865, - 486.26301106314577, - 710.6472475904335, - 923.6011017187075, - 1127.2902381116037, - 1316.7117101116164, - 1465.1143484383415, - 1567.115723425792, - 1639.092039116519, - 1686.3357312024532, - 1734.0935836519263, - 1777.3132478620485, - 1803.3947530054634, - 1822.8295046112185, - 1824.9475929362893, - 1791.2007330525844, - 1735.8518590078759, - 1640.3813173842364, - 1533.792787283683, - 1422.3274402574946, - 1316.7885909789848, - 1223.8774153712197, - 1163.298296476986, - 1117.1267833589625, - 1076.6690243305404, - 1041.0548933544592, - 966.4893500330505, - 872.4067235239401, - 786.5846002844963, - 711.8370357536164, - 657.4948514923901, - 628.4605987654571, - 610.5921771174642, - 597.6718695834182, - 577.595383325808, - 551.174087157355, - 535.2637721837398, - 544.700906328733, - 541.1666296838781, - 542.8129428189457, - 544.7874247165249, - 548.8132932838033, - 560.6402400592531, - 586.6270420856488, - 620.3850958620545, - 652.6395004043511, - 688.7503280936387, - 728.6018213110763, - 771.8345039414589, - 805.1837469914833, - 830.3502841230138, - 847.1762519879143, - 867.1296727047697, - 882.8300818776825, - 886.6478297003065, - 893.5603059538128 - ], - "outMACDHist": [ - 290.8832187050948, - 250.91779104842067, - 280.82861233009544, - 307.656108155895, - 387.8793805913572, - 496.48059928561395, - 533.0809669073216, - 610.7636742050128, - 644.9140224573349, - 744.2455199524237, - 858.3825925573043, - 890.8968683364864, - 874.8983365069485, - 897.5369461091508, - 851.8154165130954, - 814.7565455715849, - 757.6858880000509, - 593.6105533068999, - 408.005499949802, - 287.90526276290734, - 188.97476834373765, - 191.03140979789282, - 172.87865684048825, - 104.32602057366012, - 77.73900642301987, - 8.472353300282975, - -134.98743953481926, - -221.39549617883426, - -381.8821664945581, - -426.35412040221354, - -445.86138810475427, - -422.15539711403926, - -371.6447024310596, - -242.31647557693464, - -184.68605247209393, - -161.83103611368847, - -142.45652390432542, - -298.26217328563473, - -376.330506036442, - -343.2884929577748, - -298.99025812351965, - -217.3687370449054, - -116.1370109077319, - -71.47368659197195, - -51.68123013618367, - -80.30594503044074, - -105.68518467381205, - -63.64125989446052, - 37.74853657997323, - -14.137106579419765, - 6.585252540269948, - 7.897927590317181, - 16.10347426911369, - 47.307787101798795, - 103.94720810558306, - 135.0322151056231, - 129.01761816918633, - 144.44331075715058, - 159.40597286975049, - 172.93073052153068, - 133.3969722000977, - 100.66614852612202, - 67.30387145960196, - 79.8136828674219, - 62.801636691650856, - 15.270991290496, - 27.649905014025308 - ] + "response1": { + "begIndex": 4, + "nbElement": 96, + "result": { + "outReal": [ + 73060, + 72820, + 72900, + 73400, + 73420, + 73620, + 73620, + 73440, + 73040, + 72980, + 72940, + 73020, + 73220, + 73200, + 73180, + 73380, + 73760, + 73820, + 74260, + 74540, + 74600, + 74600, + 74500, + 74040, + 74020, + 74040, + 73680, + 73780, + 74040, + 74220, + 74360, + 74620, + 74140, + 73540, + 73020, + 72780, + 72460, + 72760, + 73280, + 73700, + 74220, + 74920, + 75600, + 76280, + 77260, + 77660, + 77940, + 77940, + 77720, + 76800, + 76060, + 75140, + 74400, + 73880, + 73500, + 73100, + 73120, + 73140, + 73000, + 72680, + 72460, + 72000, + 71920, + 71800, + 72060, + 72260, + 72560, + 72300, + 72240, + 72160, + 72180, + 72200, + 72480, + 72640, + 72720, + 72600, + 72200, + 71740, + 71340, + 70840, + 70380, + 70400, + 70500, + 70320, + 70200, + 69940, + 69140, + 68420, + 67960, + 67360, + 67240, + 67560, + 67780, + 68080, + 68640, + 69140 + ] + } + }, + "response2": { + "begIndex": 9, + "nbElement": 91, + "result": { + "outReal": [ + 73340, + 73220, + 73170, + 73220, + 73200, + 73280, + 73320, + 73330, + 73120, + 73080, + 73160, + 73390, + 73520, + 73730, + 73860, + 73990, + 74180, + 74160, + 74150, + 74280, + 74320, + 74140, + 74140, + 74040, + 74120, + 74200, + 74150, + 73960, + 73790, + 73620, + 73570, + 73540, + 73450, + 73410, + 73360, + 73500, + 73690, + 74180, + 74780, + 75480, + 75940, + 76430, + 76770, + 77000, + 77030, + 76860, + 76540, + 76170, + 75800, + 75150, + 74580, + 74130, + 73770, + 73440, + 73090, + 72780, + 72560, + 72530, + 72400, + 72370, + 72360, + 72280, + 72110, + 72020, + 72110, + 72220, + 72380, + 72390, + 72440, + 72440, + 72390, + 72200, + 72110, + 71990, + 71780, + 71490, + 71300, + 71120, + 70830, + 70520, + 70160, + 69770, + 69460, + 69140, + 68780, + 68590, + 68350, + 68100, + 68020, + 68000, + 68190 + ] + } + }, + "response3": { + "begIndex": 29, + "nbElement": 71, + "result": { + "outReal": [ + 73606.66666666667, + 73583.33333333333, + 73610, + 73663.33333333333, + 73726.66666666667, + 73823.33333333333, + 73883.33333333333, + 73816.66666666667, + 73686.66666666667, + 73660, + 73683.33333333333, + 73690, + 73703.33333333333, + 73726.66666666667, + 73780, + 73896.66666666667, + 74006.66666666667, + 74100, + 74240, + 74460, + 74610, + 74703.33333333333, + 74786.66666666667, + 74816.66666666667, + 74836.66666666667, + 74853.33333333333, + 74793.33333333333, + 74770, + 74790, + 74750, + 74696.66666666667, + 74700, + 74663.33333333333, + 74616.66666666667, + 74493.33333333333, + 74380, + 74263.33333333333, + 74293.33333333333, + 74326.66666666667, + 74333.33333333333, + 74293.33333333333, + 74280, + 74216.66666666667, + 74153.33333333333, + 74076.66666666667, + 73953.33333333333, + 73826.66666666667, + 73696.66666666667, + 73546.66666666667, + 73320, + 73110, + 72870, + 72663.33333333333, + 72483.33333333333, + 72326.66666666667, + 72163.33333333333, + 72080, + 72013.33333333333, + 71890, + 71776.66666666667, + 71636.66666666667, + 71416.66666666667, + 71226.66666666667, + 71050, + 70890, + 70766.66666666667, + 70676.66666666667, + 70536.66666666667, + 70430, + 70320, + 70246.66666666667 + ] + } + }, + "response4": { + "begIndex": 59, + "nbElement": 41, + "result": { + "outReal": [ + 74151.66666666667, + 74141.66666666667, + 74136.66666666667, + 74140, + 74110, + 74101.66666666667, + 74073.33333333333, + 74055, + 74006.66666666667, + 73996.66666666667, + 73988.33333333333, + 73985, + 73960, + 73940, + 73928.33333333333, + 73925, + 73916.66666666667, + 73898.33333333333, + 73893.33333333333, + 73890, + 73860, + 73786.66666666667, + 73725, + 73650, + 73581.66666666667, + 73508.33333333333, + 73436.66666666667, + 73391.66666666667, + 73340, + 73263.33333333333, + 73166.66666666667, + 73058.33333333333, + 72945, + 72833.33333333333, + 72691.66666666667, + 72573.33333333333, + 72470, + 72415, + 72378.33333333333, + 72326.66666666667, + 72270 + ] + } + }, + "response5": { + "begIndex": 0, + "nbElement": 0, + "result": { + "outReal": [] + } } } \ No newline at end of file diff --git a/src/components/invest/left-bar/ChartIndicators.jsx b/src/components/invest/left-bar/ChartIndicators.jsx index 08aeae8..98fd671 100644 --- a/src/components/invest/left-bar/ChartIndicators.jsx +++ b/src/components/invest/left-bar/ChartIndicators.jsx @@ -1,8 +1,10 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import styled from "styled-components"; import IndicatorDetail from "./IndicatorDetail"; // import chartData from "../../../../public/Json/chartData.json"; import chartData from '../../../Json/chartData.json' +import { useDispatch, useSelector } from "react-redux"; +import { setClickSub } from "../../../store/reducers/Chart/SubChart/clickSubChart"; const ChartIndicators = ({ onClose }) => { const [showDetail, setShowDetail] = useState( @@ -17,6 +19,26 @@ const ChartIndicators = ({ onClose }) => { }); }; + // 데이터를 넣을 빈배열 + const [checkedList, setCheckedList] = useState([]); + // 1️⃣ onChange함수를 사용하여 이벤트 감지, 필요한 값 받아오기 + const onCheckedElement = (checked, item) => { + if (checked) { + setCheckedList([...checkedList, item]); + } else if (!checked) { + setCheckedList(checkedList.filter(el => el !== item)); + } + }; + + const dispatch = useDispatch(); + const checkSub = useSelector((state) => state.subChart) + + useEffect(() => { + dispatch(setClickSub(checkedList)) + }, [checkedList]) + + console.log('checksub', checkSub) + return ( @@ -26,7 +48,14 @@ const ChartIndicators = ({ onClose }) => { {chartData.map((item, idx) => ( - + { + onCheckedElement(e.target.checked, e.target.value); + }} + // 3️⃣ 체크표시 & 해제를 시키는 로직. 배열에 data가 있으면 true, 없으면 false + checked={checkedList.includes(item.showName) ? true : false} + > {item.showName} toggleDetail(idx)}>설정 diff --git a/src/components/invest/left-bar/Indicators.jsx b/src/components/invest/left-bar/Indicators.jsx index 2940ee1..3045fbd 100644 --- a/src/components/invest/left-bar/Indicators.jsx +++ b/src/components/invest/left-bar/Indicators.jsx @@ -1,8 +1,10 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import styled from "styled-components"; import IndicatorDetail from "./IndicatorDetail"; // import indiData from "../../../../public/Json/indiData.json"; import indiData from '../../../Json/indiData.json' +import { useDispatch, useSelector } from "react-redux"; +import { setClickSub } from "../../../store/reducers/Chart/SubChart/clickSubChart"; const Indicators = ({ onClose }) => { const [showDetail, setShowDetail] = useState( @@ -26,7 +28,9 @@ const Indicators = ({ onClose }) => { {indiData.map((item, idx) => ( - + {item.showName} toggleDetail(idx)}>설정 diff --git a/src/lib/apis/chart.jsx b/src/lib/apis/chart.jsx index 9e1f13f..5e26b8a 100644 --- a/src/lib/apis/chart.jsx +++ b/src/lib/apis/chart.jsx @@ -3,8 +3,9 @@ import { chartInstance, subChartInstance } from './api'; export async function getChartData() { return await chartInstance.post('/stockPrice', { "code" : "005930", - "start_date" : "20220101", - "end_date" : "20220809", + "start_date" : "19990101", + "end_date" : "20240313", + // 분, 일, 월, 연봉 "time_format" : "D" }) } diff --git a/src/store/reducers/Chart/SubChart/clickSubChart.jsx b/src/store/reducers/Chart/SubChart/clickSubChart.jsx new file mode 100644 index 0000000..6277d9f --- /dev/null +++ b/src/store/reducers/Chart/SubChart/clickSubChart.jsx @@ -0,0 +1,20 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + subChart: [], +}; + +const clickSubSlice = createSlice({ + name: "subChart", + initialState: initialState, + reducers: { + setClickSub(state, action) { + state.data = action.payload; + } + }, +}); + +const { setClickSub } = clickSubSlice.actions; +export { setClickSub }; + +export default clickSubSlice.reducer; diff --git a/src/store/reducers/Chart/SubChart/sma.jsx b/src/store/reducers/Chart/SubChart/sma.jsx deleted file mode 100644 index c23dbb5..0000000 --- a/src/store/reducers/Chart/SubChart/sma.jsx +++ /dev/null @@ -1,29 +0,0 @@ -import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; -import { getSMA } from '../../../lib/apis/chart' - -const initialState = { - datas: [], -}; - -export const getSMAData = createAsyncThunk( - "subChart/getSMA", - async (data, tunkAPI) => { - // const { code, start_date, end_date, time_format } = data; - const response = await getSMA(data); - return response.data; - } -) - -const smaSlice = createSlice({ - name: "subChart", - initialState: initialState, - reducers: { - }, - extraReducers: (builder) => { - builder.addCase(getSMAData.fulfilled, (state, action) => { - state.datas = action.payload; - }) - }, -}); - -export default smaSlice.reducer; diff --git a/src/store/reducers/Chart/chart.jsx b/src/store/reducers/Chart/chart.jsx index 844c5ec..219f494 100644 --- a/src/store/reducers/Chart/chart.jsx +++ b/src/store/reducers/Chart/chart.jsx @@ -3,7 +3,6 @@ import { getChartData } from '../../../lib/apis/chart' const initialState = { datas: [], - subDatas: [], }; export const getChartDatas = createAsyncThunk( @@ -19,18 +18,18 @@ const chartSlice = createSlice({ name: "chart", initialState: initialState, reducers: { - setSubDatas(state, action) { - state.subDatas = action.payload; + setChartDatas(state, action) { + state.datas = action.payload; } }, extraReducers: (builder) => { builder.addCase(getChartDatas.fulfilled, (state, action) => { - state.datas = action.payload; + state.datas = action.payload.reverse(); }) }, }); -const { setSubDatas } = chartSlice.actions; -export { setSubDatas }; +const { setChartDatas } = chartSlice.actions; +export { setChartDatas }; export default chartSlice.reducer; diff --git a/src/store/store.js b/src/store/store.js index 54a99ca..9f3dd94 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -17,6 +17,7 @@ import chartValuesReducer from "./reducers/Trading/chartValues"; import indicatorValuesReducer from "./reducers/Trading/indicatorValues"; import chartReducer from './reducers/Chart/chart.jsx'; import companyReducer from './reducers/Chart/clickCompany.jsx'; +import subChartReducer from './reducers/Chart/SubChart/clickSubChart.jsx'; const rootPersistConfig = { key: "root", @@ -33,6 +34,7 @@ const rootReducer = persistReducer( company: companyReducer, chartValues: chartValuesReducer, indicatorValues: indicatorValuesReducer, + subChart: subChartReducer, }) ); const myMiddlewares = [logger]; From f2c2ab0ea707270396d5ea1969a4ab2818b65fa1 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Sun, 17 Mar 2024 23:39:45 +0900 Subject: [PATCH 25/84] =?UTF-8?q?feat:=20=EC=B0=A8=ED=8A=B8=EC=A7=80?= =?UTF-8?q?=ED=91=9C=20api=20=EC=97=B0=EA=B2=B0=20=EB=B0=8F=20=EC=8B=9C?= =?UTF-8?q?=EA=B0=81=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/invest/chart/MainChart.jsx | 110 ++---- .../invest/chart/subChart/BBANDSChart.jsx | 76 ++-- .../invest/chart/subChart/EMAChart.jsx | 79 ++++ .../invest/chart/subChart/MACDChart.jsx | 44 --- .../invest/chart/subChart/SMAChart.jsx | 49 ++- .../invest/chart/subChart/WMAChart.jsx | 79 ++++ src/components/invest/chart/subChart/data.js | 340 ------------------ .../invest/left-bar/ChartIndicators.jsx | 21 +- src/components/invest/left-bar/Indicators.jsx | 2 - src/lib/apis/chart.jsx | 16 +- src/routes/mainLayout.jsx | 4 +- .../reducers/Chart/SubChart/clickSubChart.jsx | 18 +- .../reducers/Chart/SubChart/subChart.jsx | 53 +++ src/store/store.js | 3 + 14 files changed, 357 insertions(+), 537 deletions(-) create mode 100644 src/components/invest/chart/subChart/EMAChart.jsx create mode 100644 src/components/invest/chart/subChart/WMAChart.jsx delete mode 100644 src/components/invest/chart/subChart/data.js create mode 100644 src/store/reducers/Chart/SubChart/subChart.jsx diff --git a/src/components/invest/chart/MainChart.jsx b/src/components/invest/chart/MainChart.jsx index 1c86875..61ea641 100644 --- a/src/components/invest/chart/MainChart.jsx +++ b/src/components/invest/chart/MainChart.jsx @@ -33,48 +33,23 @@ import { useSelector, useDispatch } from 'react-redux'; // import { getChartDatas } from '../../../store/reducers/Chart/chart' import styled from "styled-components"; import { getChartDatas } from "../../../store/reducers/Chart/chart"; -import { fakeData } from "./subChart/data"; import SMAChart from "./subChart/SMAChart"; +import WMAChart from "./subChart/WMAChart"; +import EMAChart from "./subChart/EMAChart"; +import BBANDSChart from "./subChart/BBANDSChart"; export default function MainChart({ toggleCharts, toggleIndicators }) { const dataList = useSelector((state) => state.chart.datas) const company = useSelector((state) => state.company.data) const dispatch = useDispatch(); const [datas, setDatas] = useState([]); - const [click, setClick] = useState(false); - - async function getData() { - const data = await chartInstance.post('/stockPrice', { - "code" : "005930", - "start_date" : "19990101", - "end_date" : "20240313", - // 분, 일, 월, 연봉 - "time_format" : "D" - }) - - setDatas(data.data.reverse()); - } useEffect(() => { - getData() + // getData() dispatch(getChartDatas()) - console.log('모든 데이터:', datas) }, []) - useEffect(() => { - // console.log('company: ',company) - // accvolume: "333333" - // code: "005930" - // favorite: true - // id: 1 - // index: "코스피" - // name: "삼성전자" - // prdy_vrss: "1100" - // price: "72800" - // returns: "0.55%" - }, [company]) - const ScaleProvider = discontinuousTimeScaleProviderBuilder().inputDateAccessor( (d) => { const year = d.date.substr(0, 4) @@ -90,7 +65,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { const width = 1150; const { data, xScale, xAccessor, displayXAccessor } = ScaleProvider( - datas + dataList ); // 소수점 이하 둘째짜리까지만 표현 @@ -169,56 +144,29 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { }; } - // async function getSMA() { - // const data = await chartInstance.post('/subChart/SMA', { - // "chart" : datas, - // "lineTime1" : 5, - // "lineTime2" : 10, - // "lineTime3" : 30, - // "lineTime4" : 60, - // "lineTime5" : 120 - // }) - - // // 단순이동평균선 데이터 삽입 - // const responses = [data.data.response1, data.data.response2, data.data.response3, data.data.response4, data.data.response5]; - // responses.forEach((response, index) => { - // const l_idx = response.nbElement; - // const subData = response.result.outReal; - // for (let i = 0; i < l_idx; i++) { - // const smaKey = `sma${[5, 10, 30, 60, 100][index]}`; // 예시에서는 100이 마지막 값이지만, 실제 데이터에 따라 조정 필요 - // datas[i][smaKey] = subData[l_idx - 1 - i]; - // } - // }); + // const [click, setClick] = useState(false); + // const checkSub = useSelector((state) => state.subChart.subChart) - // console.log(data.data) - // } + // useEffect(() => { + // if (checkSub.includes('단순 이동평균선')) { + // setClick(true) + // } else { + // setClick(false) + // } + // }, [checkSub]) - // 단순이동평균선 데이터 삽입 // useEffect(() => { - // if (datas.length > 0) { - // const responses = [fakeData.response1, fakeData.response2, fakeData.response3, fakeData.response4, fakeData.response5]; - // responses.forEach((response, index) => { - // const f_idx = response.begIndex; - // const l_idx = response.nbElement; - // const subData = response.result.outReal; - // for (let i = 0; i < l_idx; i++) { - // const smaKey = `sma${[5, 10, 30, 60, 100][index]}`; // 예시에서는 100이 마지막 값이지만, 실제 데이터에 따라 조정 필요 - // datas[datas.length - i - 1][smaKey] = subData[i]; - // } - // }); + // if (dataList.length > 0) { + // setDatas(dataList); // } - // }, []) + // }, [click]) return ( - { - // getSMA() - setClick(prev => !prev) - console.log(datas) - }}>{company.name} + {company.name} {company.code} {company.index} @@ -262,23 +210,10 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { - {click && } - {/* d.sma5} - strokeStyle='#b3009e' - /> - d.sma10} - strokeStyle='#b33300' - /> - d.sma30} - strokeStyle='#edda02' - /> - d.sma60} - strokeStyle='#00b33f' - /> */} + + + + state.subChart.BBANDS); - const calculateBBANDS = () => { - const responses = [fakeData.response1, fakeData.response2, fakeData.response3, fakeData.response4, fakeData.response5]; - responses.forEach((response, index) => { - const f_idx = response.begIndex; - const l_idx = response.nbElement; - const subData = response.result.outReal; - for (let i = 0; i < l_idx; i++) { - const smaKey = `sma${[5, 10, 30, 60, 100][index]}`; // 예시에서는 100이 마지막 값이지만, 실제 데이터에 따라 조정 필요 - datas[datas.length - i - 1][smaKey] = subData[i]; - } - }); - // setSmaCalculated(true); // SMA 계산 완료 + const calculateBBANDS = (data) => { + console.log('bbands', data) + const newData = [...datas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const upData = data.result.outRealUpperBand; + const midData = data.result.outRealMiddleBand; + const lowData = data.result.outRealLowerBand; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["upper"]: upData[i], // 새로운 속성 추가 + ["middle"]: midData[i], // 새로운 속성 추가 + ["lower"]: lowData[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); } useEffect(() => { - if (click) { - calculateBBANDS() + if (isActive) { + const data = { + "chart": datas, + "lineTime" : 5, + "stdev" : 2, + } + dispatch(getBBANDSChart(data)) + .then((res) => calculateBBANDS(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.upper; + delete newItem.middle; + delete newItem.lower; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); } - }, [click]); + }, [isActive]); return ( <> d.sma5} + yAccessor={d => d.upper} strokeStyle='#b3009e' /> d.sma10} + yAccessor={d => d.middle} strokeStyle='#b33300' /> d.sma30} + yAccessor={d => d.lower} strokeStyle='#edda02' /> - d.sma60} - strokeStyle='#00b33f' - /> - d.sma100} - strokeStyle='#0277ed' - /> ) } diff --git a/src/components/invest/chart/subChart/EMAChart.jsx b/src/components/invest/chart/subChart/EMAChart.jsx new file mode 100644 index 0000000..a0a12d8 --- /dev/null +++ b/src/components/invest/chart/subChart/EMAChart.jsx @@ -0,0 +1,79 @@ +import React, { useEffect, useState } from 'react'; +import { Chart, ChartCanvas, CurrentCoordinate, LineSeries, ema } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../store/reducers/Chart/chart'; +import { getEMAChart, getWMAChart } from '../../../../store/reducers/Chart/SubChart/subChart'; + +export default function EMAChart({ datas }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.subChart.EMA); + + const calculateEMA = (data) => { + const responses = [data.response1, data.response2, data.response3, data.response4, data.response5]; + const newData = [...datas]; + responses.forEach((response, index) => { + const f_idx = response.begIndex; + const l_idx = response.nbElement; + const subData = response.result.outReal; + for (let i = 0; i < l_idx; i++) { + const emaKey = `ema${[5, 10, 30, 60, 100][index]}`; + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + [emaKey]: subData[i] // 새로운 속성 추가 + }; + } + }); + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "lineTime1" : 5, + "lineTime2" : 10, + "lineTime3" : 30, + "lineTime4" : 60, + "lineTime5" : 120 + } + dispatch(getEMAChart(data)) + .then((res) => calculateEMA(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.ema5; + delete newItem.ema10; + delete newItem.ema30; + delete newItem.ema60; + delete newItem.ema100; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive]); + + return ( + <> + d.ema5} + strokeStyle='#b3009e' + /> + d.ema10} + strokeStyle='#b33300' + /> + d.ema30} + strokeStyle='#edda02' + /> + d.ema60} + strokeStyle='#00b33f' + /> + d.ema100} + strokeStyle='#0277ed' + /> + + ) +} diff --git a/src/components/invest/chart/subChart/MACDChart.jsx b/src/components/invest/chart/subChart/MACDChart.jsx index 4858c16..412f998 100644 --- a/src/components/invest/chart/subChart/MACDChart.jsx +++ b/src/components/invest/chart/subChart/MACDChart.jsx @@ -1,53 +1,9 @@ import React from 'react' import { BarSeries, Chart, ChartCanvas, XAxis, YAxis, discontinuousTimeScaleProviderBuilder } from 'react-financial-charts' -import { fakeData } from './data'; import { useSelector } from 'react-redux'; import { format } from 'd3-format'; export default function MACDChart() { - const dataList = useSelector((state) => state.chart.datas) - const margin = { left: 0, right: 78, top: 0, bottom: 24 }; - - const height = 800; - const width = 1150; - - const ScaleProvider = discontinuousTimeScaleProviderBuilder().inputDateAccessor( - (d) => { - const year = d.date.substr(0, 4) - const month = d.date.substr(4, 2) - const day = d.date.substr(6, 2) - const nDate = `${year}-${month}-${day}` - return new Date(nDate) - } - ); - - const dataPoints = fakeData.result.outMACDHist.map((item, idx) => { - return { - date: dataList[fakeData.begIndex + idx].date, - y: item - } - }); - - const MACDData = (data) => { - return data.y; - } - - const { data, xScale, xAccessor, displayXAccessor } = ScaleProvider( - dataPoints - ); - - const barChartHeight = height - margin.top - margin.bottom / 4; - const barChartOrigin = (_, h) => [0, h - barChartHeight]; - - const pricesDisplayFormat = format(".2f"); - const x_max = xAccessor(data[data.length - 1]); - const x_min = xAccessor(data[Math.max(0, data.length - 100)]); - const xExtents = [x_min, x_max + 5]; - - const MACDExtents = (data) => { - return data.y; - }; - return ( <> // state.subChart.SMA); + // const smaChart = useSelector((state) => state.getSubChart.SMADatas); + console.log(isActive) - const calculateSMA = () => { - const responses = [fakeData.response1, fakeData.response2, fakeData.response3, fakeData.response4, fakeData.response5]; + const calculateSMA = (data) => { + const responses = [data.response1, data.response2, data.response3, data.response4, data.response5]; + const newData = [...datas]; responses.forEach((response, index) => { const f_idx = response.begIndex; const l_idx = response.nbElement; const subData = response.result.outReal; for (let i = 0; i < l_idx; i++) { - const smaKey = `sma${[5, 10, 30, 60, 100][index]}`; // 예시에서는 100이 마지막 값이지만, 실제 데이터에 따라 조정 필요 - datas[datas.length - i - 1][smaKey] = subData[i]; + const smaKey = `sma${[5, 10, 30, 60, 100][index]}`; + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + [smaKey]: subData[i] // 새로운 속성 추가 + }; } }); // setSmaCalculated(true); // SMA 계산 완료 + dispatch(setChartDatas(newData)); } useEffect(() => { - if (click) { - calculateSMA() + if (isActive) { + const data = { + "chart": datas, + "lineTime1" : 5, + "lineTime2" : 10, + "lineTime3" : 30, + "lineTime4" : 60, + "lineTime5" : 120 + } + dispatch(getSMAChart(data)) + .then((res) => calculateSMA(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.sma5; + delete newItem.sma10; + delete newItem.sma30; + delete newItem.sma60; + delete newItem.sma100; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); } - }, [click]); + }, [isActive]); return ( <> diff --git a/src/components/invest/chart/subChart/WMAChart.jsx b/src/components/invest/chart/subChart/WMAChart.jsx new file mode 100644 index 0000000..732b55a --- /dev/null +++ b/src/components/invest/chart/subChart/WMAChart.jsx @@ -0,0 +1,79 @@ +import React, { useEffect, useState } from 'react'; +import { Chart, ChartCanvas, CurrentCoordinate, LineSeries, ema } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../store/reducers/Chart/chart'; +import { getWMAChart } from '../../../../store/reducers/Chart/SubChart/subChart'; + +export default function WMAChart({ datas }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.subChart.WMA); + + const calculateWMA = (data) => { + const responses = [data.response1, data.response2, data.response3, data.response4, data.response5]; + const newData = [...datas]; + responses.forEach((response, index) => { + const f_idx = response.begIndex; + const l_idx = response.nbElement; + const subData = response.result.outReal; + for (let i = 0; i < l_idx; i++) { + const wmaKey = `wma${[5, 10, 30, 60, 100][index]}`; + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + [wmaKey]: subData[i] // 새로운 속성 추가 + }; + } + }); + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "lineTime1" : 5, + "lineTime2" : 10, + "lineTime3" : 30, + "lineTime4" : 60, + "lineTime5" : 120 + } + dispatch(getWMAChart(data)) + .then((res) => calculateWMA(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.wma5; + delete newItem.wma10; + delete newItem.wma30; + delete newItem.wma60; + delete newItem.wma100; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive]); + + return ( + <> + d.wma5} + strokeStyle='#b3009e' + /> + d.wma10} + strokeStyle='#b33300' + /> + d.wma30} + strokeStyle='#edda02' + /> + d.wma60} + strokeStyle='#00b33f' + /> + d.wma100} + strokeStyle='#0277ed' + /> + + ) +} diff --git a/src/components/invest/chart/subChart/data.js b/src/components/invest/chart/subChart/data.js deleted file mode 100644 index 3a6712a..0000000 --- a/src/components/invest/chart/subChart/data.js +++ /dev/null @@ -1,340 +0,0 @@ -export const fakeData = { - "response1": { - "begIndex": 4, - "nbElement": 96, - "result": { - "outReal": [ - 73060, - 72820, - 72900, - 73400, - 73420, - 73620, - 73620, - 73440, - 73040, - 72980, - 72940, - 73020, - 73220, - 73200, - 73180, - 73380, - 73760, - 73820, - 74260, - 74540, - 74600, - 74600, - 74500, - 74040, - 74020, - 74040, - 73680, - 73780, - 74040, - 74220, - 74360, - 74620, - 74140, - 73540, - 73020, - 72780, - 72460, - 72760, - 73280, - 73700, - 74220, - 74920, - 75600, - 76280, - 77260, - 77660, - 77940, - 77940, - 77720, - 76800, - 76060, - 75140, - 74400, - 73880, - 73500, - 73100, - 73120, - 73140, - 73000, - 72680, - 72460, - 72000, - 71920, - 71800, - 72060, - 72260, - 72560, - 72300, - 72240, - 72160, - 72180, - 72200, - 72480, - 72640, - 72720, - 72600, - 72200, - 71740, - 71340, - 70840, - 70380, - 70400, - 70500, - 70320, - 70200, - 69940, - 69140, - 68420, - 67960, - 67360, - 67240, - 67560, - 67780, - 68080, - 68640, - 69140 - ] - } - }, - "response2": { - "begIndex": 9, - "nbElement": 91, - "result": { - "outReal": [ - 73340, - 73220, - 73170, - 73220, - 73200, - 73280, - 73320, - 73330, - 73120, - 73080, - 73160, - 73390, - 73520, - 73730, - 73860, - 73990, - 74180, - 74160, - 74150, - 74280, - 74320, - 74140, - 74140, - 74040, - 74120, - 74200, - 74150, - 73960, - 73790, - 73620, - 73570, - 73540, - 73450, - 73410, - 73360, - 73500, - 73690, - 74180, - 74780, - 75480, - 75940, - 76430, - 76770, - 77000, - 77030, - 76860, - 76540, - 76170, - 75800, - 75150, - 74580, - 74130, - 73770, - 73440, - 73090, - 72780, - 72560, - 72530, - 72400, - 72370, - 72360, - 72280, - 72110, - 72020, - 72110, - 72220, - 72380, - 72390, - 72440, - 72440, - 72390, - 72200, - 72110, - 71990, - 71780, - 71490, - 71300, - 71120, - 70830, - 70520, - 70160, - 69770, - 69460, - 69140, - 68780, - 68590, - 68350, - 68100, - 68020, - 68000, - 68190 - ] - } - }, - "response3": { - "begIndex": 29, - "nbElement": 71, - "result": { - "outReal": [ - 73606.66666666667, - 73583.33333333333, - 73610, - 73663.33333333333, - 73726.66666666667, - 73823.33333333333, - 73883.33333333333, - 73816.66666666667, - 73686.66666666667, - 73660, - 73683.33333333333, - 73690, - 73703.33333333333, - 73726.66666666667, - 73780, - 73896.66666666667, - 74006.66666666667, - 74100, - 74240, - 74460, - 74610, - 74703.33333333333, - 74786.66666666667, - 74816.66666666667, - 74836.66666666667, - 74853.33333333333, - 74793.33333333333, - 74770, - 74790, - 74750, - 74696.66666666667, - 74700, - 74663.33333333333, - 74616.66666666667, - 74493.33333333333, - 74380, - 74263.33333333333, - 74293.33333333333, - 74326.66666666667, - 74333.33333333333, - 74293.33333333333, - 74280, - 74216.66666666667, - 74153.33333333333, - 74076.66666666667, - 73953.33333333333, - 73826.66666666667, - 73696.66666666667, - 73546.66666666667, - 73320, - 73110, - 72870, - 72663.33333333333, - 72483.33333333333, - 72326.66666666667, - 72163.33333333333, - 72080, - 72013.33333333333, - 71890, - 71776.66666666667, - 71636.66666666667, - 71416.66666666667, - 71226.66666666667, - 71050, - 70890, - 70766.66666666667, - 70676.66666666667, - 70536.66666666667, - 70430, - 70320, - 70246.66666666667 - ] - } - }, - "response4": { - "begIndex": 59, - "nbElement": 41, - "result": { - "outReal": [ - 74151.66666666667, - 74141.66666666667, - 74136.66666666667, - 74140, - 74110, - 74101.66666666667, - 74073.33333333333, - 74055, - 74006.66666666667, - 73996.66666666667, - 73988.33333333333, - 73985, - 73960, - 73940, - 73928.33333333333, - 73925, - 73916.66666666667, - 73898.33333333333, - 73893.33333333333, - 73890, - 73860, - 73786.66666666667, - 73725, - 73650, - 73581.66666666667, - 73508.33333333333, - 73436.66666666667, - 73391.66666666667, - 73340, - 73263.33333333333, - 73166.66666666667, - 73058.33333333333, - 72945, - 72833.33333333333, - 72691.66666666667, - 72573.33333333333, - 72470, - 72415, - 72378.33333333333, - 72326.66666666667, - 72270 - ] - } - }, - "response5": { - "begIndex": 0, - "nbElement": 0, - "result": { - "outReal": [] - } - } -} \ No newline at end of file diff --git a/src/components/invest/left-bar/ChartIndicators.jsx b/src/components/invest/left-bar/ChartIndicators.jsx index 98fd671..eabceae 100644 --- a/src/components/invest/left-bar/ChartIndicators.jsx +++ b/src/components/invest/left-bar/ChartIndicators.jsx @@ -4,7 +4,7 @@ import IndicatorDetail from "./IndicatorDetail"; // import chartData from "../../../../public/Json/chartData.json"; import chartData from '../../../Json/chartData.json' import { useDispatch, useSelector } from "react-redux"; -import { setClickSub } from "../../../store/reducers/Chart/SubChart/clickSubChart"; +import { setActiveSub, setDisactiveSub } from "../../../store/reducers/Chart/SubChart/clickSubChart"; const ChartIndicators = ({ onClose }) => { const [showDetail, setShowDetail] = useState( @@ -20,26 +20,19 @@ const ChartIndicators = ({ onClose }) => { }; // 데이터를 넣을 빈배열 - const [checkedList, setCheckedList] = useState([]); + const dispatch = useDispatch(); // 1️⃣ onChange함수를 사용하여 이벤트 감지, 필요한 값 받아오기 const onCheckedElement = (checked, item) => { if (checked) { - setCheckedList([...checkedList, item]); + dispatch(setActiveSub(item)) } else if (!checked) { - setCheckedList(checkedList.filter(el => el !== item)); + dispatch(setDisactiveSub(item)) } }; - const dispatch = useDispatch(); - const checkSub = useSelector((state) => state.subChart) - - useEffect(() => { - dispatch(setClickSub(checkedList)) - }, [checkedList]) - - console.log('checksub', checkSub) return ( + 차트지표 @@ -49,12 +42,10 @@ const ChartIndicators = ({ onClose }) => { {chartData.map((item, idx) => ( { onCheckedElement(e.target.checked, e.target.value); }} - // 3️⃣ 체크표시 & 해제를 시키는 로직. 배열에 data가 있으면 true, 없으면 false - checked={checkedList.includes(item.showName) ? true : false} > {item.showName} toggleDetail(idx)}>설정 diff --git a/src/components/invest/left-bar/Indicators.jsx b/src/components/invest/left-bar/Indicators.jsx index 3045fbd..4f80724 100644 --- a/src/components/invest/left-bar/Indicators.jsx +++ b/src/components/invest/left-bar/Indicators.jsx @@ -3,8 +3,6 @@ import styled from "styled-components"; import IndicatorDetail from "./IndicatorDetail"; // import indiData from "../../../../public/Json/indiData.json"; import indiData from '../../../Json/indiData.json' -import { useDispatch, useSelector } from "react-redux"; -import { setClickSub } from "../../../store/reducers/Chart/SubChart/clickSubChart"; const Indicators = ({ onClose }) => { const [showDetail, setShowDetail] = useState( diff --git a/src/lib/apis/chart.jsx b/src/lib/apis/chart.jsx index 5e26b8a..1bf5e8c 100644 --- a/src/lib/apis/chart.jsx +++ b/src/lib/apis/chart.jsx @@ -1,10 +1,12 @@ import { chartInstance, subChartInstance } from './api'; export async function getChartData() { + const date = new Date(); + const formattedDate = date.toISOString().slice(0, 10).replace(/-/g, ""); return await chartInstance.post('/stockPrice', { "code" : "005930", "start_date" : "19990101", - "end_date" : "20240313", + "end_date" : formattedDate, // 분, 일, 월, 연봉 "time_format" : "D" }) @@ -12,4 +14,16 @@ export async function getChartData() { export async function getSMA(data) { return await subChartInstance.post('/SMA', data) +} + +export async function getWMA(data) { + return await subChartInstance.post('/WMA', data) +} + +export async function getEMA(data) { + return await subChartInstance.post('/EMA', data) +} + +export async function getBBANDS(data) { + return await subChartInstance.post('/BBANDS', data) } \ No newline at end of file diff --git a/src/routes/mainLayout.jsx b/src/routes/mainLayout.jsx index dd242a7..6970745 100644 --- a/src/routes/mainLayout.jsx +++ b/src/routes/mainLayout.jsx @@ -59,7 +59,7 @@ const Container = styled.div` const LeftContainer = styled.div` display: flex; flex-direction: row; - width: 100%; + width: fit-content; height: 100%; position: relative; overflow: hidden; @@ -68,7 +68,7 @@ const LeftContainer = styled.div` const ContentContainer = styled.div` display: flex; flex-direction: column; - flex-grow: 1; + // flex-grow: 1; transition: margin-left 0.3s ease; `; diff --git a/src/store/reducers/Chart/SubChart/clickSubChart.jsx b/src/store/reducers/Chart/SubChart/clickSubChart.jsx index 6277d9f..235a142 100644 --- a/src/store/reducers/Chart/SubChart/clickSubChart.jsx +++ b/src/store/reducers/Chart/SubChart/clickSubChart.jsx @@ -1,20 +1,26 @@ import { createSlice } from "@reduxjs/toolkit"; const initialState = { - subChart: [], + SMA: false, + WMA: false, + EMA: false, + BBANDS: false, }; const clickSubSlice = createSlice({ name: "subChart", initialState: initialState, reducers: { - setClickSub(state, action) { - state.data = action.payload; - } + setActiveSub(state, action) { + state[action.payload] = true; + }, + setDisactiveSub(state, action) { + state[action.payload] = false; + }, }, }); -const { setClickSub } = clickSubSlice.actions; -export { setClickSub }; +const { setActiveSub, setDisactiveSub } = clickSubSlice.actions; +export { setActiveSub, setDisactiveSub }; export default clickSubSlice.reducer; diff --git a/src/store/reducers/Chart/SubChart/subChart.jsx b/src/store/reducers/Chart/SubChart/subChart.jsx new file mode 100644 index 0000000..f81540b --- /dev/null +++ b/src/store/reducers/Chart/SubChart/subChart.jsx @@ -0,0 +1,53 @@ +import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; +import { getBBANDS, getEMA, getSMA, getWMA } from "../../../../lib/apis/chart"; + +const initialState = { + SMADatas: [], +}; + +export const getSMAChart = createAsyncThunk( + "chart/getSMA", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getSMA(data); + return response.data; + } +) + +export const getWMAChart = createAsyncThunk( + "chart/getWMA", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getWMA(data); + return response.data; + } +) + +export const getEMAChart = createAsyncThunk( + "chart/getEMA", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getEMA(data); + return response.data; + } +) + +export const getBBANDSChart = createAsyncThunk( + "chart/getBBANDS", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getBBANDS(data); + return response.data; + } +) + +const subChartSlice = createSlice({ + name: "subChart", + initialState: initialState, + reducers: { + }, + extraReducers: (builder) => { + }, +}); + +export default subChartSlice.reducer; diff --git a/src/store/store.js b/src/store/store.js index 9f3dd94..b707ba8 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -18,11 +18,13 @@ import indicatorValuesReducer from "./reducers/Trading/indicatorValues"; import chartReducer from './reducers/Chart/chart.jsx'; import companyReducer from './reducers/Chart/clickCompany.jsx'; import subChartReducer from './reducers/Chart/SubChart/clickSubChart.jsx'; +import getSubChartReducer from './reducers/Chart/SubChart/subChart.jsx'; const rootPersistConfig = { key: "root", storage: storage, // whitelist: ["chartValues", "indicatorValues"], + blacklist: ["subChart", "getSubChart"] }; const rootReducer = persistReducer( @@ -35,6 +37,7 @@ const rootReducer = persistReducer( chartValues: chartValuesReducer, indicatorValues: indicatorValuesReducer, subChart: subChartReducer, + getSubChart: getSubChartReducer, }) ); const myMiddlewares = [logger]; From 5d1e9755e1e1cee3c6c54600ecf1890aa737fa70 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Mon, 18 Mar 2024 00:29:29 +0900 Subject: [PATCH 26/84] =?UTF-8?q?feat:=20=EC=B0=A8=ED=8A=B8=EC=A7=80?= =?UTF-8?q?=ED=91=9C=20api=20=EC=97=B0=EA=B2=B0=20=EB=B0=8F=20=EC=8B=9C?= =?UTF-8?q?=EA=B0=81=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/invest/chart/MainChart.jsx | 38 +++----------- .../invest/chart/subChart/BBANDSChart.jsx | 26 ++++------ .../invest/chart/subChart/EMAChart.jsx | 6 +-- .../invest/chart/subChart/SARChart.jsx | 50 +++++++++++++++++++ .../invest/chart/subChart/SMAChart.jsx | 6 +-- .../invest/chart/subChart/WMAChart.jsx | 4 +- src/lib/apis/chart.jsx | 5 ++ .../reducers/Chart/SubChart/clickSubChart.jsx | 1 + .../reducers/Chart/SubChart/subChart.jsx | 11 +++- 9 files changed, 92 insertions(+), 55 deletions(-) create mode 100644 src/components/invest/chart/subChart/SARChart.jsx diff --git a/src/components/invest/chart/MainChart.jsx b/src/components/invest/chart/MainChart.jsx index 61ea641..e7d37b4 100644 --- a/src/components/invest/chart/MainChart.jsx +++ b/src/components/invest/chart/MainChart.jsx @@ -3,19 +3,12 @@ import ReactDOM from "react-dom"; import { format } from "d3-format"; import { timeFormat } from "d3-time-format"; import { - elderRay, - ema, discontinuousTimeScaleProviderBuilder, Chart, ChartCanvas, - CurrentCoordinate, BarSeries, CandlestickSeries, - ElderRaySeries, - LineSeries, - MovingAverageTooltip, OHLCTooltip, - SingleValueTooltip, lastVisibleItemBasedZoomAnchor, XAxis, YAxis, @@ -24,25 +17,24 @@ import { MouseCoordinateX, MouseCoordinateY, ZoomButtons, - withDeviceRatio, - withSize, HoverTooltip, } from "react-financial-charts"; -import { chartInstance } from '../../../lib/apis/api'; + import { useSelector, useDispatch } from 'react-redux'; -// import { getChartDatas } from '../../../store/reducers/Chart/chart' import styled from "styled-components"; import { getChartDatas } from "../../../store/reducers/Chart/chart"; + +// 차트지표 import SMAChart from "./subChart/SMAChart"; import WMAChart from "./subChart/WMAChart"; import EMAChart from "./subChart/EMAChart"; import BBANDSChart from "./subChart/BBANDSChart"; +import SARChart from "./subChart/SARChart"; export default function MainChart({ toggleCharts, toggleIndicators }) { const dataList = useSelector((state) => state.chart.datas) const company = useSelector((state) => state.company.data) const dispatch = useDispatch(); - const [datas, setDatas] = useState([]); useEffect(() => { // getData() @@ -93,7 +85,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { }; const candleChartExtents = (data) => { - return [data.high, data.low]; + return [data.high + 2000, data.low - 2000]; }; const yEdgeIndicator = (data) => { @@ -144,23 +136,6 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { }; } - // const [click, setClick] = useState(false); - // const checkSub = useSelector((state) => state.subChart.subChart) - - // useEffect(() => { - // if (checkSub.includes('단순 이동평균선')) { - // setClick(true) - // } else { - // setClick(false) - // } - // }, [checkSub]) - - // useEffect(() => { - // if (dataList.length > 0) { - // setDatas(dataList); - // } - // }, [click]) - return ( @@ -210,10 +185,12 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { + {/* 차트지표 */} + state.subChart.BBANDS); const calculateBBANDS = (data) => { - console.log('bbands', data) const newData = [...datas]; const f_idx = data.begIndex; @@ -51,17 +50,14 @@ export default function BBANDSChart({ datas }) { return ( <> - d.upper} - strokeStyle='#b3009e' - /> - d.middle} - strokeStyle='#b33300' - /> - d.lower} - strokeStyle='#edda02' + ( + { + top: d.upper, + middle: d.middle, + bottom: d.lower + } + )} /> ) diff --git a/src/components/invest/chart/subChart/EMAChart.jsx b/src/components/invest/chart/subChart/EMAChart.jsx index a0a12d8..53612e5 100644 --- a/src/components/invest/chart/subChart/EMAChart.jsx +++ b/src/components/invest/chart/subChart/EMAChart.jsx @@ -1,8 +1,8 @@ -import React, { useEffect, useState } from 'react'; -import { Chart, ChartCanvas, CurrentCoordinate, LineSeries, ema } from 'react-financial-charts'; +import React, { useEffect } from 'react'; +import { LineSeries } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../store/reducers/Chart/chart'; -import { getEMAChart, getWMAChart } from '../../../../store/reducers/Chart/SubChart/subChart'; +import { getEMAChart } from '../../../../store/reducers/Chart/SubChart/subChart'; export default function EMAChart({ datas }) { const dispatch = useDispatch(); diff --git a/src/components/invest/chart/subChart/SARChart.jsx b/src/components/invest/chart/subChart/SARChart.jsx new file mode 100644 index 0000000..633d34a --- /dev/null +++ b/src/components/invest/chart/subChart/SARChart.jsx @@ -0,0 +1,50 @@ +import React, { useEffect } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../store/reducers/Chart/chart'; +import { getSARChart } from '../../../../store/reducers/Chart/SubChart/subChart'; +import { SARSeries } from 'react-financial-charts'; + +export default function SARChart({ datas }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.subChart.SAR); + + const calculateSAR = (data) => { + const newData = [...datas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const sarData = data.result.outReal; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["sar"]: sarData[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "acc" : 0.02, + "accMax" : 0.2, + } + dispatch(getSARChart(data)) + .then((res) => calculateSAR(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.sar; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive]); + + return ( + <> + d.sar} /> + + ) +} diff --git a/src/components/invest/chart/subChart/SMAChart.jsx b/src/components/invest/chart/subChart/SMAChart.jsx index c19889f..ffb0ef6 100644 --- a/src/components/invest/chart/subChart/SMAChart.jsx +++ b/src/components/invest/chart/subChart/SMAChart.jsx @@ -1,5 +1,5 @@ -import React, { useEffect, useState } from 'react'; -import { Chart, ChartCanvas, CurrentCoordinate, LineSeries, ema } from 'react-financial-charts'; +import React, { useEffect } from 'react'; +import { LineSeries } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../store/reducers/Chart/chart'; import { getSMAChart } from '../../../../store/reducers/Chart/SubChart/subChart'; @@ -7,8 +7,6 @@ import { getSMAChart } from '../../../../store/reducers/Chart/SubChart/subChart' export default function SMAChart({ datas }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.subChart.SMA); - // const smaChart = useSelector((state) => state.getSubChart.SMADatas); - console.log(isActive) const calculateSMA = (data) => { const responses = [data.response1, data.response2, data.response3, data.response4, data.response5]; diff --git a/src/components/invest/chart/subChart/WMAChart.jsx b/src/components/invest/chart/subChart/WMAChart.jsx index 732b55a..3e08c1e 100644 --- a/src/components/invest/chart/subChart/WMAChart.jsx +++ b/src/components/invest/chart/subChart/WMAChart.jsx @@ -1,5 +1,5 @@ -import React, { useEffect, useState } from 'react'; -import { Chart, ChartCanvas, CurrentCoordinate, LineSeries, ema } from 'react-financial-charts'; +import React, { useEffect } from 'react'; +import { LineSeries } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../store/reducers/Chart/chart'; import { getWMAChart } from '../../../../store/reducers/Chart/SubChart/subChart'; diff --git a/src/lib/apis/chart.jsx b/src/lib/apis/chart.jsx index 1bf5e8c..02e4ea2 100644 --- a/src/lib/apis/chart.jsx +++ b/src/lib/apis/chart.jsx @@ -3,6 +3,7 @@ import { chartInstance, subChartInstance } from './api'; export async function getChartData() { const date = new Date(); const formattedDate = date.toISOString().slice(0, 10).replace(/-/g, ""); + // 임시 데이터 return await chartInstance.post('/stockPrice', { "code" : "005930", "start_date" : "19990101", @@ -26,4 +27,8 @@ export async function getEMA(data) { export async function getBBANDS(data) { return await subChartInstance.post('/BBANDS', data) +} + +export async function getSAR(data) { + return await subChartInstance.post('/SAR', data) } \ No newline at end of file diff --git a/src/store/reducers/Chart/SubChart/clickSubChart.jsx b/src/store/reducers/Chart/SubChart/clickSubChart.jsx index 235a142..c75e900 100644 --- a/src/store/reducers/Chart/SubChart/clickSubChart.jsx +++ b/src/store/reducers/Chart/SubChart/clickSubChart.jsx @@ -5,6 +5,7 @@ const initialState = { WMA: false, EMA: false, BBANDS: false, + SAR: false, }; const clickSubSlice = createSlice({ diff --git a/src/store/reducers/Chart/SubChart/subChart.jsx b/src/store/reducers/Chart/SubChart/subChart.jsx index f81540b..12e3e00 100644 --- a/src/store/reducers/Chart/SubChart/subChart.jsx +++ b/src/store/reducers/Chart/SubChart/subChart.jsx @@ -1,5 +1,5 @@ import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; -import { getBBANDS, getEMA, getSMA, getWMA } from "../../../../lib/apis/chart"; +import { getBBANDS, getEMA, getSAR, getSMA, getWMA } from "../../../../lib/apis/chart"; const initialState = { SMADatas: [], @@ -41,6 +41,15 @@ export const getBBANDSChart = createAsyncThunk( } ) +export const getSARChart = createAsyncThunk( + "chart/getSAR", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getSAR(data); + return response.data; + } +) + const subChartSlice = createSlice({ name: "subChart", initialState: initialState, From 264c76ab552e869268fa565a436ef537e631475f Mon Sep 17 00:00:00 2001 From: eunxoo Date: Mon, 18 Mar 2024 08:23:58 +0900 Subject: [PATCH 27/84] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=20api=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0=20=EB=B0=8F=20=EB=A6=AC=EB=8D=95=EC=8A=A4=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=20=EA=B4=80=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 로그인은 관심종목 테스트 위해 임시로 연결했어요 --- package-lock.json | 66 ++++ package.json | 1 + .../invest/left-bar/MyStockList.jsx | 310 ++++++++++-------- src/lib/apis/api.jsx | 23 ++ src/lib/apis/cookie.jsx | 17 + src/lib/apis/search.jsx | 43 +++ src/lib/apis/user.jsx | 21 ++ src/store/reducers/Trading/chartValues.js | 25 ++ src/store/reducers/Trading/search.js | 84 +++++ src/store/reducers/User/user.js | 34 ++ src/store/store.js | 33 +- 11 files changed, 509 insertions(+), 148 deletions(-) create mode 100644 src/lib/apis/api.jsx create mode 100644 src/lib/apis/cookie.jsx create mode 100644 src/lib/apis/search.jsx create mode 100644 src/lib/apis/user.jsx create mode 100644 src/store/reducers/Trading/chartValues.js create mode 100644 src/store/reducers/Trading/search.js create mode 100644 src/store/reducers/User/user.js diff --git a/package-lock.json b/package-lock.json index a13bf27..32b6cc2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "bootstrap": "^5.3.3", "react": "^18.2.0", "react-bootstrap": "^2.10.1", + "react-cookie": "^7.1.0", "react-dom": "^18.2.0", "react-redux": "^9.1.0", "react-router-dom": "^6.22.3", @@ -1275,12 +1276,39 @@ "@babel/types": "^7.20.7" } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==" + }, + "node_modules/@types/d3-scale": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-3.3.5.tgz", + "integrity": "sha512-YOpKj0kIEusRf7ofeJcSZQsvKbnTwpe1DUF+P2qsotqG53kEsjm7EzzliqQxMkAWdkZcHrg5rRhB4JiDOQPX+A==", + "dependencies": { + "@types/d3-time": "^2" + } + }, + "node_modules/@types/d3-time": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.1.4.tgz", + "integrity": "sha512-BTfLsxTeo7yFxI/haOOf1ZwJ6xKgQLT9dCp+EcmQv87Gox6X+oKl4mLKfO6fnWm3P22+A6DknMNEZany8ql2Rw==" + }, "node_modules/@types/estree": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", "dev": true }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", + "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/prop-types": { "version": "15.7.11", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", @@ -1751,6 +1779,14 @@ "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", "dev": true }, + "node_modules/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==", + "engines": { + "node": ">= 0.6" + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -2722,6 +2758,14 @@ "node": ">= 0.4" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, "node_modules/ignore": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz", @@ -3692,6 +3736,19 @@ } } }, + "node_modules/react-cookie": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-7.1.0.tgz", + "integrity": "sha512-n2+Gt07/xxuShXary+SImk1sw5l7a1UguQOQEN55YewEW5LoA0opbR4nbeo8sY6OYwR37iCFJtqJ0AGEywqAtg==", + "dependencies": { + "@types/hoist-non-react-statics": "^3.3.5", + "hoist-non-react-statics": "^3.3.2", + "universal-cookie": "^7.0.0" + }, + "peerDependencies": { + "react": ">= 16.3.0" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -4462,6 +4519,15 @@ "react": ">=15.0.0" } }, + "node_modules/universal-cookie": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-7.1.0.tgz", + "integrity": "sha512-LCLHwP0whxTqkBYMptW1dzNS0xxIVJmU6c51N5CfPNheVxuJW7fVxPa6MUGX7boUSyOlpMveBO96hMs5Gee6Fg==", + "dependencies": { + "@types/cookie": "^0.6.0", + "cookie": "^0.6.0" + } + }, "node_modules/update-browserslist-db": { "version": "1.0.13", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz", diff --git a/package.json b/package.json index 1809f16..f36d480 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "bootstrap": "^5.3.3", "react": "^18.2.0", "react-bootstrap": "^2.10.1", + "react-cookie": "^7.1.0", "react-dom": "^18.2.0", "react-redux": "^9.1.0", "react-router-dom": "^6.22.3", diff --git a/src/components/invest/left-bar/MyStockList.jsx b/src/components/invest/left-bar/MyStockList.jsx index 4af6410..f6888d8 100644 --- a/src/components/invest/left-bar/MyStockList.jsx +++ b/src/components/invest/left-bar/MyStockList.jsx @@ -1,119 +1,110 @@ import React, { useState, useEffect, useRef } from "react"; +import { useDispatch, useSelector } from "react-redux"; import styled from "styled-components"; +import { + postSearch, + postSearchUser, + postLikeStock, +} from "~/store/reducers/Trading/search"; +import { postLogin } from "~/store/reducers/User/user"; +import { setFavoriteArr } from "~/store/reducers/Trading/search"; + +//TODO : 로고 사진 변경 +import default_Img from "../../../../public/icon/+.svg"; +import { getCookie } from "~/lib/apis/cookie"; const MyStockList = () => { + const isLogin = !!getCookie("token"); const [showSearch, setShowSearch] = useState(false); const [searchInput, setSearchInput] = useState(""); - const [searchResults, setSearchResults] = useState([]); - const [favoriteArr, setFavoriteArr] = useState([]); + // const [searchResults, setSearchResults] = useState([]); + // const [favoriteArr, setFavoriteArr] = useState([]); const searchRef = useRef(null); - // useEffect(() => { - // const handleClickOutside = (event) => { - // if (searchRef.current && !searchRef.current.contains(event.target)) { - // setShowSearch(false); - // } - // }; - - // document.addEventListener("mousedown", handleClickOutside); - // return () => { - // document.removeEventListener("mousedown", handleClickOutside); - // }; - // }, []); - - // 검색어 입력에 따라 검색 결과 가져오기 + const dispatch = useDispatch(); + const favoriteArr = useSelector((state) => state.search.favoriteArr); + const searchResults = useSelector((state) => state.search.searchResults); + console.log("favoriteArr", favoriteArr); useEffect(() => { - // 예시: 서버에서 검색 결과 가져오는 함수 (fetchSearchResults) - const fetchSearchResults = async () => { - const fakeSearchResults = [ - { - id: 1, - name: "삼성전자", - code: "005930", - index: "코스피", - favorite: true, - price: "72800", - returns: "0.55%", - accvolume: "333333", - prdy_vrss: "1100", - }, - { - id: 2, - name: "삼성SDI", - code: "006400", - index: "코스피", - favorite: false, - price: "450000", - returns: "8.83%", - accvolume: "44444444", - prdy_vrss: "1100", - }, - { - id: 3, - name: "삼성물산", - code: "028260", - index: "코스피", - favorite: false, - price: "162700", - returns: "-3.15%", - accvolume: "11111", - prdy_vrss: "-5500", - }, - { - id: 4, - name: "삼성생명", - code: "032830", - index: "코스피", - favorite: true, - price: "970100", - returns: "-5.82%", - accvolume: "66753", - prdy_vrss: "-2100", - }, - ]; - - const favoriteResults = fakeSearchResults.filter( - (result) => result.favorite - ); - setFavoriteArr(favoriteResults); - setSearchResults(fakeSearchResults); - }; + // 예시 + const fetchSearchResults = async () => {}; if (searchInput) { fetchSearchResults(); } else { - setSearchResults([]); + // setSearchResults([]); } }, [searchInput]); + const searchFunc = (prop) => { + const actionToDispatch = isLogin ? postSearchUser(prop) : postSearch(prop); + dispatch(actionToDispatch); + }; + + useEffect(() => { + searchFunc({ searchQuery: "" }); + setSearchInput(""); + setShowSearch(false); + }, []); + + useEffect(() => { + dispatch(postLogin({ email: "ddu@naver.com", password: "1234" })); + }, []); + + const onChangeInput = async (e) => { + setSearchInput(e.target.value); + console.log("searchInput", e.target.value); + searchFunc({ searchQuery: e.target.value }); + }; + const addToFavorites = (result) => { - if (!result.favorite) { - const updatedResults = [...searchResults]; - updatedResults.forEach((item) => { - if (item.id === result.id) { - item.favorite = true; - setFavoriteArr((prevArr) => [...prevArr, item]); - } - }); - - console.log(`관심 종목으로 추가: ${result.name}`); - console.log(favoriteArr); + console.log(result); + console.log("favoriteArr", favoriteArr); + if (!result.isLike) { + const updatedArr = [...favoriteArr, result.code]; // Update favoriteArr directly + dispatch(setFavoriteArr(updatedArr)); // Dispatch the updated favoriteArr + dispatch(postLikeStock({ likeStock: updatedArr })); + dispatch(postSearchUser({ searchQuery: searchInput })); + console.log(`관심 종목으로 추가: ${result.name} :${result.code} `); + console.log("favoriteArr", updatedArr); } else { - const updatedResults = [...searchResults]; - updatedResults.forEach((item) => { - if (item.id === result.id) { - item.favorite = false; - } - }); const updatedFavoriteArr = favoriteArr.filter( - (item) => item.id !== result.id + (item) => item !== result.code ); - setFavoriteArr(updatedFavoriteArr); // 해당 아이템을 favoriteArr에서 삭제 - console.log(`관심 종목에서 삭제: ${result.name}`); - console.log(favoriteArr); + dispatch(setFavoriteArr(updatedFavoriteArr)); // Dispatch the updated favoriteArr + dispatch(postLikeStock({ likeStock: updatedFavoriteArr })); + dispatch(postSearchUser({ searchQuery: searchInput })); + console.log(`관심 종목에서 삭제: ${result.name} :${result.code}`); + console.log("favoriteArr", updatedFavoriteArr); + } + }; + + const getLogoFileName = (name, code) => { + if (name.includes("스팩")) { + return "SPAC_230706"; + } else if (name.includes("ETN")) { + return "ETN_230706"; + } else if ( + name.includes("KODEX") || + name.includes("KOSEF") || + name.includes("KoAct") || + name.includes("TIGER") || + name.includes("ACE") || + name.includes("ARIRANG") || + name.includes("합성 H") || + name.includes("HANARO") || + name.includes("SOL") + ) { + return "ETF_230706"; + } else { + return `kr/${code}`; } }; + const onErrorImg = (e) => { + e.target.src = default_Img; + }; + return ( @@ -125,6 +116,7 @@ const MyStockList = () => { display: "flex", flexDirection: "column", width: "100%", + alignItems: "center", }} > @@ -133,10 +125,15 @@ const MyStockList = () => { type="text" placeholder="종목명 또는 코드" value={searchInput} - onChange={(e) => setSearchInput(e.target.value)} + onChange={(e) => onChangeInput(e)} > - {searchInput && ( // 검색 입력값이 있는 경우에만 초기화 버튼 표시 - setSearchInput("")}> + {searchInput && ( + { + setSearchInput(""); + searchFunc({ searchQuery: "" }); + }} + > x )} @@ -145,38 +142,49 @@ const MyStockList = () => { e.stopPropagation(); setSearchInput(""); setShowSearch(false); + searchFunc({ searchQuery: "" }); }} > - x +
닫기
 - {searchResults.length > 0 && ( + {searchResults?.length > 0 && ( - {searchResults.map((result) => ( - + {searchResults?.map((result) => ( + { + console.log(""); + // dispatch(setClickCompany(result)); + }} + > {result.name} {result.code} - {result.index} + {result.market} addToFavorites(result)} src={ - result.favorite + result.isLike ? "/icon/FilledStar.svg" : "/icon/BlankStar.svg" } - alt={result.favorite ? "filledstar" : "blankstar"} + alt={result.isLike ? "filledstar" : "blankstar"} /> ))} @@ -195,37 +203,39 @@ const MyStockList = () => { )} - {favoriteArr?.map((item, idx) => ( - - - ( */} + + + {/* addToFavorites(item)} src={ - item.favorite - ? "/icon/FilledStar.svg" - : "/icon/BlankStar.svg" + item.isLike ? "/icon/FilledStar.svg" : "/icon/BlankStar.svg" } - alt={item.favorite ? "filledstar" : "blankstar"} - /> - - - {item.name} - - {item.code} - {item.index} - {item.accvolume} - - - - {item.price} - {item.returns} - {item.prdy_vrss} - - - ))} + alt={item.isLike ? "filledstar" : "blankstar"} + /> */} + + + ㅎㅎ + + 12345 + kospi + 11111 + + + + 111 + 111 + 1111 + + + {/* ))} */} @@ -233,6 +243,7 @@ const MyStockList = () => { }; const LeftContainer = styled.section` + min-width: 250px; width: 250px; height: calc(100vh - 57px); border-right: 1px solid #e2e2e2; @@ -269,7 +280,6 @@ const SearchContainer = styled.div` font-weight: 400; line-height: normal; width: 100%; - border-bottom: 1px solid #c9c9c9; `; const SearchWrapper = styled.label` @@ -277,13 +287,13 @@ const SearchWrapper = styled.label` display: flex; width: 100%; padding: 10px; - height: 50px; + height: 44px; background-color: #f3f3f3; `; const Img = styled.img` position: absolute; - top: 18px; + top: 15.2px; left: 18px; color: grey; width: 15px; @@ -302,7 +312,7 @@ const SearchInput = styled.input` const SearchClearBtn = styled.button` position: absolute; right: 50px; - top: 18px; + top: 14px; border: none; background: none; @@ -313,7 +323,7 @@ const SearchClearBtn = styled.button` `; const SearchOutBtn = styled.button` - width: 10%; + width: 17%; margin-left: 5%; border: none; background: none; @@ -327,24 +337,38 @@ const SearchDiv = styled.div` font-size: 18px; width: 100%; padding: 10px 30px; + height: 44px; + &:hover { background-color: #f3f3f3; } `; const SearchResults = styled.ul` - margin-top: 5px; + position: relative; + width: 100%; padding-left: 0; list-style: none; + max-height: calc((100vh - 151px) / 2); + height: max-content; + overflow: auto; + padding-bottom: 5px; + box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.25); + background-color: white; + z-index: 999; + &::-webkit-scrollbar { + display: none; + } `; const SearchResult = styled.li` display: flex; flex-direction: row; align-items: center; - padding: 5px 10px; + padding: 10px 10px; text-align: left; - height: 60px; + min-height: 60px; + cursor: pointer; &:hover { background-color: #e8e8e8; @@ -359,13 +383,11 @@ const StockDiv = styled.div` `; const StockName = styled.div` color: #000; - text-align: center; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; - - /* margin-bottom: 1px; */ + word-break: break-all; `; const RowDiv = styled.div` @@ -381,7 +403,11 @@ const RowDiv = styled.div` const StarImg = styled.img``; const MyListContainer = styled.div` - width: 100%; + position: absolute; + top: 88px; + left: 0; + min-width: 250px; + width: 250px; `; const MyListDiv = styled.div` diff --git a/src/lib/apis/api.jsx b/src/lib/apis/api.jsx new file mode 100644 index 0000000..55d939c --- /dev/null +++ b/src/lib/apis/api.jsx @@ -0,0 +1,23 @@ +import axios from "axios"; +import { getCookie } from "./cookie"; + +export const BASE_URL = "http://127.0.0.1:3000/api"; + +export const chartInstance = axios.create({ + baseURL: BASE_URL, +}); + +export const subChartInstance = axios.create({ + baseURL: BASE_URL + "/subChart", +}); + +export const baseInstance = axios.create({ + baseURL: BASE_URL, +}); + +export const baseUserInstance = axios.create({ + baseURL: BASE_URL, + headers: { + Authorization: `Bearer ${getCookie("token")}`, + }, +}); diff --git a/src/lib/apis/cookie.jsx b/src/lib/apis/cookie.jsx new file mode 100644 index 0000000..21053fe --- /dev/null +++ b/src/lib/apis/cookie.jsx @@ -0,0 +1,17 @@ +import { Cookies } from "react-cookie"; + +const cookies = new Cookies(); + +export const setCookie = (name, value, option) => { + const tokenValue = value.replace("Bearer ", ""); + return cookies.set(name, tokenValue, { ...option }); +}; + +export const getCookie = (name) => { + const cookieValue = cookies.get(name); + return cookieValue; +}; + +export const removeCookie = (name) => { + return cookies.remove(name); +}; diff --git a/src/lib/apis/search.jsx b/src/lib/apis/search.jsx new file mode 100644 index 0000000..fef072d --- /dev/null +++ b/src/lib/apis/search.jsx @@ -0,0 +1,43 @@ +import { baseInstance, baseUserInstance } from "./api"; + +export const postSearch = async (searchQuery) => { + const baseUrl = "/stockCode/search"; + try { + const response = await baseInstance.post(baseUrl, { + searchQuery, + }); + const data = response.data; + console.log(data); + return data; + } catch (err) { + console.error(err); + } +}; + +export const postSearchUser = async (searchQuery) => { + const baseUrl = "/stockCode/userSearch"; + try { + const response = await baseUserInstance.post(baseUrl, { + searchQuery, + }); + const data = response.data; + console.log(data); + return data; + } catch (err) { + console.error(err); + } +}; + +export const postLikeStock = async (likeStock) => { + const baseUrl = "/stockCode/likeStock"; + try { + const response = await baseUserInstance.post(baseUrl, { + likeStock, + }); + const data = response.data.likeStock; + console.log(data); + return data; + } catch (err) { + console.error(err); + } +}; diff --git a/src/lib/apis/user.jsx b/src/lib/apis/user.jsx new file mode 100644 index 0000000..ff567dc --- /dev/null +++ b/src/lib/apis/user.jsx @@ -0,0 +1,21 @@ +import { baseInstance } from "./api"; +import { setCookie } from "~/lib/apis/cookie"; + +export const postLogin = async (email, password) => { + const baseUrl = "/user/login"; + try { + const response = await baseInstance.post(baseUrl, { + email, + password, + }); + setCookie("token", response.data.token, { + path: "/", + secure: true, + }); + const data = response.data; + console.log(data); + return data; + } catch (err) { + console.error(err); + } +}; diff --git a/src/store/reducers/Trading/chartValues.js b/src/store/reducers/Trading/chartValues.js new file mode 100644 index 0000000..84c98a7 --- /dev/null +++ b/src/store/reducers/Trading/chartValues.js @@ -0,0 +1,25 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + values: { + SMA: [5, 20, 60, 120, 240], + WMA: [5, 20, 60, 120, 240], + EMA: [5, 20, 60, 120, 240], + BBANDS: [20, 2], + SAR: [0.02, 0.2], + }, +}; + +const chartValuesSlice = createSlice({ + name: "chartValues", + initialState: initialState, + reducers: { + setValues: (state, action) => { + state.values = { ...state.values, ...action.payload }; + }, + }, + extraReducers: (builder) => {}, +}); + +export const { setValues } = chartValuesSlice.actions; +export default chartValuesSlice.reducer; diff --git a/src/store/reducers/Trading/search.js b/src/store/reducers/Trading/search.js new file mode 100644 index 0000000..f58e93a --- /dev/null +++ b/src/store/reducers/Trading/search.js @@ -0,0 +1,84 @@ +import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; +import { + postSearch as reqPostSearch, + postSearchUser as reqPostSearchUser, + postLikeStock as reqPostLikeStock, +} from "~/lib/apis/search"; + +const initialState = { + searchResults: [], + favoriteArr: [], + loading: "idle", +}; + +const postSearch = createAsyncThunk( + "search/postSearch", + async ({ searchQuery }, thunkAPI) => { + const response = await reqPostSearch(searchQuery); + return response; + } +); + +const postSearchUser = createAsyncThunk( + "search/postSearchUser", + async ({ searchQuery }, thunkAPI) => { + const response = await reqPostSearchUser(searchQuery); + return response; + } +); + +const postLikeStock = createAsyncThunk( + "search/postLikeStock", + async ({ likeStock }, thunkAPI) => { + const response = await reqPostLikeStock(likeStock); + return response; + } +); + +const searchSlice = createSlice({ + name: "search", + initialState: initialState, + reducers: { + setFavoriteArr: (state, action) => { + state.favoriteArr = action.payload; + }, + }, + extraReducers: (builder) => { + builder + .addCase(postSearch.fulfilled, (state, action) => { + state.searchResults = action.payload; + state.loading = "idle"; + }) + .addCase(postSearch.pending, (state) => { + state.loading = "pending"; + }) + .addCase(postSearch.rejected, (state) => { + state.loading = "rejected"; + }) + .addCase(postSearchUser.fulfilled, (state, action) => { + state.searchResults = action.payload; + state.loading = "idle"; + }) + .addCase(postSearchUser.pending, (state) => { + state.loading = "pending"; + }) + .addCase(postSearchUser.rejected, (state) => { + state.loading = "rejected"; + }) + .addCase(postLikeStock.fulfilled, (state, action) => { + console.log("payload", action.payload); + state.favoriteArr = action.payload; + state.loading = "idle"; + }) + .addCase(postLikeStock.pending, (state) => { + state.loading = "pending"; + }) + .addCase(postLikeStock.rejected, (state) => { + state.loading = "rejected"; + }); + }, +}); + +export const { setFavoriteArr } = searchSlice.actions; +export { postSearch, postSearchUser, postLikeStock }; +export default searchSlice.reducer; diff --git a/src/store/reducers/User/user.js b/src/store/reducers/User/user.js new file mode 100644 index 0000000..5739f19 --- /dev/null +++ b/src/store/reducers/User/user.js @@ -0,0 +1,34 @@ +import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; +import { postLogin as reqPostLogin } from "~/lib/apis/user"; + +const initialState = { + loading: "idle", +}; + +const postLogin = createAsyncThunk( + "user/login", + async ({ email, password }, thunkAPI) => { + await reqPostLogin(email, password); + } +); + +const userSlice = createSlice({ + name: "user", + initialState: initialState, + reducers: {}, + extraReducers: (builder) => { + builder + .addCase(postLogin.fulfilled, (state) => { + state.loading = "fulfilled"; + }) + .addCase(postLogin.pending, (state) => { + state.loading = "pending"; + }) + .addCase(postLogin.rejected, (state) => { + state.loading = "rejected"; + }); + }, +}); + +export { postLogin }; +export default userSlice.reducer; diff --git a/src/store/store.js b/src/store/store.js index 0b2eed2..6e7f707 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -1,21 +1,42 @@ -import React from 'react'; -import { combineReducers, configureStore } from '@reduxjs/toolkit'; -import storage from 'redux-persist/lib/storage'; -import { FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE, persistReducer, persistStore } from 'redux-persist'; +import React from "react"; +import { combineReducers, configureStore } from "@reduxjs/toolkit"; +import storage from "redux-persist/lib/storage"; +import { + FLUSH, + PAUSE, + PERSIST, + PURGE, + REGISTER, + REHYDRATE, + persistReducer, + persistStore, +} from "redux-persist"; +import logger from "redux-logger"; +import tradingReducer from "./reducers/Trading/trading"; +import chartValuesReducer from "./reducers/Trading/chartValues"; +import indicatorValuesReducer from "./reducers/Trading/indicatorValues"; +import chartReducer from "./reducers/Chart/chart.jsx"; +import searchReducer from "./reducers/Trading/search"; +import userReducer from "./reducers/User/user"; import tradingReducer from './reducers/Trading/trading'; const rootPersistConfig = { key: 'root', storage: storage, - whitelist: [] -} + whitelist: ["user", "chartValues", "indicatorValues", "search"], +}; const rootReducer = persistReducer( rootPersistConfig, combineReducers({ // 임시 reducer trading: tradingReducer, + chart: chartReducer, + chartValues: chartValuesReducer, + indicatorValues: indicatorValuesReducer, + search: searchReducer, + user: userReducer, }) ); From 244ee7432139173831b02743cee1d5836015cd02 Mon Sep 17 00:00:00 2001 From: eunxoo <80334038+eunxoo@users.noreply.github.com> Date: Mon, 18 Mar 2024 08:44:15 +0900 Subject: [PATCH 28/84] =?UTF-8?q?fix:=20=EC=A4=91=EB=B3=B5=EB=90=9C=20impo?= =?UTF-8?q?rt=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/store.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/store/store.js b/src/store/store.js index a6c2614..0c509c4 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -19,8 +19,6 @@ import chartReducer from "./reducers/Chart/chart.jsx"; import searchReducer from "./reducers/Trading/search"; import userReducer from "./reducers/User/user"; -import tradingReducer from './reducers/Trading/trading'; - const rootPersistConfig = { key: "root", storage: storage, From 49420674044ab44830a8b27cf58f8d905f6da827 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Mon, 18 Mar 2024 14:44:19 +0900 Subject: [PATCH 29/84] =?UTF-8?q?feat:=20=EC=B0=A8=ED=8A=B8=EC=A7=80?= =?UTF-8?q?=ED=91=9C=20=EC=83=81=ED=83=9C=20=EC=9C=A0=EC=A7=80=20=EB=B0=8F?= =?UTF-8?q?=20value=20=EB=B3=80=EA=B2=BD=20=EC=8B=9C=20=EC=B0=A8=ED=8A=B8?= =?UTF-8?q?=20=EC=8B=9C=EA=B0=81=ED=99=94=20=EC=97=85=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Json/chartData.json | 50 +- .../chart}/BBANDSChart.jsx | 30 +- .../chart/Indicators/chart/EMAChart.jsx | 76 ++ .../chart}/SARChart.jsx | 26 +- .../chart/Indicators/chart/SMAChart.jsx | 76 ++ .../chart/Indicators/chart/WMAChart.jsx | 75 ++ .../invest/chart/Indicators/sub/MACDChart.jsx | 82 ++ src/components/invest/chart/MainChart.jsx | 28 +- .../invest/chart/subChart/EMAChart.jsx | 79 -- .../invest/chart/subChart/MACDChart.jsx | 34 - .../invest/chart/subChart/SMAChart.jsx | 80 -- .../invest/chart/subChart/WMAChart.jsx | 79 -- .../invest/left-bar/ChartIndicators.jsx | 12 +- .../invest/left-bar/IndicatorDetail.jsx | 1 + src/lib/apis/chart.jsx | 4 + .../subChart.jsx => Indicators/chart.jsx} | 9 +- .../clickIndicators.jsx} | 1 + src/store/reducers/Chart/Indicators/sub.jsx | 26 + src/store/reducers/Chart/chart.jsx | 803 +++++++++++++++++- src/store/reducers/Trading/chartValues.js | 8 +- src/store/store.js | 12 +- 21 files changed, 1248 insertions(+), 343 deletions(-) rename src/components/invest/chart/{subChart => Indicators/chart}/BBANDSChart.jsx (63%) create mode 100644 src/components/invest/chart/Indicators/chart/EMAChart.jsx rename src/components/invest/chart/{subChart => Indicators/chart}/SARChart.jsx (60%) create mode 100644 src/components/invest/chart/Indicators/chart/SMAChart.jsx create mode 100644 src/components/invest/chart/Indicators/chart/WMAChart.jsx create mode 100644 src/components/invest/chart/Indicators/sub/MACDChart.jsx delete mode 100644 src/components/invest/chart/subChart/EMAChart.jsx delete mode 100644 src/components/invest/chart/subChart/MACDChart.jsx delete mode 100644 src/components/invest/chart/subChart/SMAChart.jsx delete mode 100644 src/components/invest/chart/subChart/WMAChart.jsx rename src/store/reducers/Chart/{SubChart/subChart.jsx => Indicators/chart.jsx} (86%) rename src/store/reducers/Chart/{SubChart/clickSubChart.jsx => Indicators/clickIndicators.jsx} (97%) create mode 100644 src/store/reducers/Chart/Indicators/sub.jsx diff --git a/src/Json/chartData.json b/src/Json/chartData.json index 3007f31..e6fae23 100644 --- a/src/Json/chartData.json +++ b/src/Json/chartData.json @@ -16,8 +16,8 @@ { "id": 1, "key": "lineTime2", - "name": "20일 선", - "default": 20, + "name": "10일 선", + "default": 10, "val": 1, "max": 480, "min": 2 @@ -25,8 +25,8 @@ { "id": 2, "key": "lineTime3", - "name": "60일 선", - "default": 60, + "name": "20일 선", + "default": 20, "val": 1, "max": 480, "min": 2 @@ -34,8 +34,8 @@ { "id": 3, "key": "lineTime4", - "name": "120일 선", - "default": 120, + "name": "60일 선", + "default": 60, "val": 1, "max": 480, "min": 2 @@ -43,8 +43,8 @@ { "id": 4, "key": "lineTime5", - "name": "240일 선", - "default": 240, + "name": "120일 선", + "default": 120, "val": 1, "max": 480, "min": 2 @@ -68,8 +68,8 @@ { "id": 1, "key": "lineTime2", - "name": "20일 선", - "default": 20, + "name": "10일 선", + "default": 10, "val": 1, "max": 480, "min": 2 @@ -77,8 +77,8 @@ { "id": 2, "key": "lineTime3", - "name": "60일 선", - "default": 60, + "name": "20일 선", + "default": 20, "val": 1, "max": 480, "min": 2 @@ -86,8 +86,8 @@ { "id": 3, "key": "lineTime4", - "name": "120일 선", - "default": 120, + "name": "60일 선", + "default": 60, "val": 1, "max": 480, "min": 2 @@ -95,8 +95,8 @@ { "id": 4, "key": "lineTime5", - "name": "240일 선", - "default": 240, + "name": "120일 선", + "default": 120, "val": 1, "max": 480, "min": 2 @@ -120,8 +120,8 @@ { "id": 1, "key": "lineTime2", - "name": "20일 선", - "default": 20, + "name": "10일 선", + "default": 10, "val": 1, "max": 480, "min": 2 @@ -129,8 +129,8 @@ { "id": 2, "key": "lineTime3", - "name": "60일 선", - "default": 60, + "name": "20일 선", + "default": 20, "val": 1, "max": 480, "min": 2 @@ -138,8 +138,8 @@ { "id": 3, "key": "lineTime4", - "name": "120일 선", - "default": 120, + "name": "60일 선", + "default": 60, "val": 1, "max": 480, "min": 2 @@ -147,8 +147,8 @@ { "id": 4, "key": "lineTime5", - "name": "240일 선", - "default": 240, + "name": "120일 선", + "default": 120, "val": 1, "max": 480, "min": 2 @@ -164,7 +164,7 @@ "id": 0, "key": "lineTime", "name": "기간", - "default": 20, + "default": 5, "val": 1, "max": 480, "min": 2 diff --git a/src/components/invest/chart/subChart/BBANDSChart.jsx b/src/components/invest/chart/Indicators/chart/BBANDSChart.jsx similarity index 63% rename from src/components/invest/chart/subChart/BBANDSChart.jsx rename to src/components/invest/chart/Indicators/chart/BBANDSChart.jsx index c0d7940..79a7d18 100644 --- a/src/components/invest/chart/subChart/BBANDSChart.jsx +++ b/src/components/invest/chart/Indicators/chart/BBANDSChart.jsx @@ -1,15 +1,26 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { BollingerSeries } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; -import { setChartDatas } from '../../../../store/reducers/Chart/chart'; -import { getBBANDSChart } from '../../../../store/reducers/Chart/SubChart/subChart'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getBBANDSChart } from '../../../../../store/reducers/Chart/Indicators/chart'; -export default function BBANDSChart({ datas }) { +export default function BBANDSChart({ datas, isShow }) { const dispatch = useDispatch(); - const isActive = useSelector((state) => state.subChart.BBANDS); + const isActive = useSelector((state) => state.clickIndicator.BBANDS); + const BBANDSValue = useSelector((state) => state.chartValues.values.BBANDS); const calculateBBANDS = (data) => { - const newData = [...datas]; + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.upper; + delete newItem.middle; + delete newItem.lower; + return newItem; + }); + + console.log('bbands', updatedDatas) + + const newData = [...updatedDatas]; const f_idx = data.begIndex; const l_idx = data.nbElement; @@ -28,11 +39,12 @@ export default function BBANDSChart({ datas }) { } useEffect(() => { + console.log('볼린저 들어옴') if (isActive) { const data = { "chart": datas, - "lineTime" : 5, - "stdev" : 2, + "lineTime" : BBANDSValue[0], + "stdev" : BBANDSValue[1], } dispatch(getBBANDSChart(data)) .then((res) => calculateBBANDS(res.payload)) @@ -46,7 +58,7 @@ export default function BBANDSChart({ datas }) { }); dispatch(setChartDatas(updatedDatas)); } - }, [isActive]); + }, [isActive, BBANDSValue, isShow]); return ( <> diff --git a/src/components/invest/chart/Indicators/chart/EMAChart.jsx b/src/components/invest/chart/Indicators/chart/EMAChart.jsx new file mode 100644 index 0000000..90cf93e --- /dev/null +++ b/src/components/invest/chart/Indicators/chart/EMAChart.jsx @@ -0,0 +1,76 @@ +import React, { useEffect } from 'react'; +import { LineSeries } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getEMAChart } from '../../../../../store/reducers/Chart/Indicators/chart'; + +export default function EMAChart({ datas, isShow }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.EMA); + const EMAValue = useSelector((state) => state.chartValues.values.EMA); + + const calculateEMA = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + Object.keys(item).forEach(key => { + if (key.includes('ema')) { + delete newItem[key]; + } + }); + return newItem; + }); + + const responses = [data.response1, data.response2, data.response3, data.response4, data.response5]; + const newData = [...updatedDatas]; + responses.forEach((response, index) => { + const f_idx = response.begIndex; + const l_idx = response.nbElement; + const subData = response.result.outReal; + for (let i = 0; i < l_idx; i++) { + const emaKey = `ema${[EMAValue[0], EMAValue[1], EMAValue[2], EMAValue[3], EMAValue[4]][index]}`; + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + [emaKey]: subData[i] // 새로운 속성 추가 + }; + } + }); + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + console.log('EMA 들어옴') + if (isActive) { + const data = { + "chart": datas, + "lineTime1" : EMAValue[0], + "lineTime2" : EMAValue[1], + "lineTime3" : EMAValue[2], + "lineTime4" : EMAValue[3], + "lineTime5" : EMAValue[4] + } + dispatch(getEMAChart(data)) + .then((res) => calculateEMA(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + EMAValue.forEach((value) => { + delete newItem[`ema${value}`]; + }); + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive, EMAValue, isShow]); + + return ( + <> + {EMAValue.map((value, index) => ( + d[`ema${value}`]} + strokeStyle={['#b3009e', '#b33300', '#edda02', '#00b33f', '#0277ed'][index]} + /> + ))} + + ) +} diff --git a/src/components/invest/chart/subChart/SARChart.jsx b/src/components/invest/chart/Indicators/chart/SARChart.jsx similarity index 60% rename from src/components/invest/chart/subChart/SARChart.jsx rename to src/components/invest/chart/Indicators/chart/SARChart.jsx index 633d34a..1f145df 100644 --- a/src/components/invest/chart/subChart/SARChart.jsx +++ b/src/components/invest/chart/Indicators/chart/SARChart.jsx @@ -1,15 +1,24 @@ import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { setChartDatas } from '../../../../store/reducers/Chart/chart'; -import { getSARChart } from '../../../../store/reducers/Chart/SubChart/subChart'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getSARChart } from '../../../../../store/reducers/Chart/Indicators/chart'; import { SARSeries } from 'react-financial-charts'; -export default function SARChart({ datas }) { +export default function SARChart({ datas, isShow }) { const dispatch = useDispatch(); - const isActive = useSelector((state) => state.subChart.SAR); + const isActive = useSelector((state) => state.clickIndicator.SAR); + const SARValue = useSelector((state) => state.chartValues.values.SAR); const calculateSAR = (data) => { - const newData = [...datas]; + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.sar; + return newItem; + }); + + console.log('sar', datas) + + const newData = [...updatedDatas]; const f_idx = data.begIndex; const l_idx = data.nbElement; @@ -24,11 +33,12 @@ export default function SARChart({ datas }) { } useEffect(() => { + console.log('SAR 들어옴') if (isActive) { const data = { "chart": datas, - "acc" : 0.02, - "accMax" : 0.2, + "acc" : SARValue[0], + "accMax" : SARValue[1], } dispatch(getSARChart(data)) .then((res) => calculateSAR(res.payload)) @@ -40,7 +50,7 @@ export default function SARChart({ datas }) { }); dispatch(setChartDatas(updatedDatas)); } - }, [isActive]); + }, [isActive, SARValue, isShow]); return ( <> diff --git a/src/components/invest/chart/Indicators/chart/SMAChart.jsx b/src/components/invest/chart/Indicators/chart/SMAChart.jsx new file mode 100644 index 0000000..10d43a6 --- /dev/null +++ b/src/components/invest/chart/Indicators/chart/SMAChart.jsx @@ -0,0 +1,76 @@ +import React, { useEffect } from 'react'; +import { LineSeries } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getSMAChart } from '../../../../../store/reducers/Chart/Indicators/chart'; + +export default function SMAChart({ datas, isShow }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.SMA); + const SMAValue = useSelector((state) => state.chartValues.values.SMA); + + const calculateSMA = (data) => { + const updatedDatas = datas.map((item) => { + const newItem = { ...item }; + Object.keys(item).forEach(key => { + if (key.includes('sma')) { + delete newItem[key]; + } + }); + return newItem; + }); + + const responses = [data.response1, data.response2, data.response3, data.response4, data.response5]; + const newData = [...updatedDatas]; + responses.forEach((response, index) => { + const f_idx = response.begIndex; + const l_idx = response.nbElement; + const subData = response.result.outReal; + for (let i = 0; i < l_idx; i++) { + const smaKey = `sma${[SMAValue[0], SMAValue[1], SMAValue[2], SMAValue[3], SMAValue[4]][index]}`; + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + [smaKey]: subData[i] // 새로운 속성 추가 + }; + } + }); + // setSmaCalculated(true); // SMA 계산 완료 + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "lineTime1" : SMAValue[0], + "lineTime2" : SMAValue[1], + "lineTime3" : SMAValue[2], + "lineTime4" : SMAValue[3], + "lineTime5" : SMAValue[4] + } + dispatch(getSMAChart(data)) + .then((res) => calculateSMA(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map((item) => { + const newItem = { ...item }; + SMAValue.forEach((value) => { + delete newItem[`sma${value}`]; + }); + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive, SMAValue, isShow]); + + return ( + <> + {SMAValue.map((value, index) => ( + d[`sma${value}`]} + strokeStyle={['#b3009e', '#b33300', '#edda02', '#00b33f', '#0277ed'][index]} + /> + ))} + + ) +} diff --git a/src/components/invest/chart/Indicators/chart/WMAChart.jsx b/src/components/invest/chart/Indicators/chart/WMAChart.jsx new file mode 100644 index 0000000..632de61 --- /dev/null +++ b/src/components/invest/chart/Indicators/chart/WMAChart.jsx @@ -0,0 +1,75 @@ +import React, { useEffect } from 'react'; +import { LineSeries } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getWMAChart } from '../../../../../store/reducers/Chart/Indicators/chart'; + +export default function WMAChart({ datas, isShow }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.WMA); + const WMAValue = useSelector((state) => state.chartValues.values.WMA); + + const calculateWMA = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + Object.keys(item).forEach(key => { + if (key.includes('wma')) { + delete newItem[key]; + } + }); + return newItem; + }); + + const responses = [data.response1, data.response2, data.response3, data.response4, data.response5]; + const newData = [...updatedDatas]; + responses.forEach((response, index) => { + const f_idx = response.begIndex; + const l_idx = response.nbElement; + const subData = response.result.outReal; + for (let i = 0; i < l_idx; i++) { + const wmaKey = `wma${[WMAValue[0], WMAValue[1], WMAValue[2], WMAValue[3], WMAValue[4]][index]}`; + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + [wmaKey]: subData[i] // 새로운 속성 추가 + }; + } + }); + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "lineTime1" : WMAValue[0], + "lineTime2" : WMAValue[1], + "lineTime3" : WMAValue[2], + "lineTime4" : WMAValue[3], + "lineTime5" : WMAValue[4] + } + dispatch(getWMAChart(data)) + .then((res) => calculateWMA(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + WMAValue.forEach((value) => { + delete newItem[`wma${value}`]; + }); + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive, WMAValue, isShow]); + + return ( + <> + {WMAValue.map((value, index) => ( + d[`wma${value}`]} + strokeStyle={['#b3009e', '#b33300', '#edda02', '#00b33f', '#0277ed'][index]} + /> + ))} + + ) +} diff --git a/src/components/invest/chart/Indicators/sub/MACDChart.jsx b/src/components/invest/chart/Indicators/sub/MACDChart.jsx new file mode 100644 index 0000000..944e3d4 --- /dev/null +++ b/src/components/invest/chart/Indicators/sub/MACDChart.jsx @@ -0,0 +1,82 @@ +import React, { useEffect } from 'react'; +import { Chart, LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getMACDChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { format } from 'd3-format'; + +export default function MACDChart({ datas }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.MACD); + + const calculateMACD = (data) => { + const newData = [...datas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const macd = data.result.outMACD; + const macdSignal = data.result.outMACDSignal; + const macdHist = data.result.outMACDHist; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["macd"]: macd[i], // 새로운 속성 추가 + ["macdSignal"]: macdSignal[i], // 새로운 속성 추가 + ["macdHist"]: macdHist[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "shortPeriod" : 12, + "longPeriod" : 26, + "signalPeriod" : 9 + } + dispatch(getMACDChart(data)) + .then((res) => calculateMACD(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.macd; + delete newItem.macdSignal; + delete newItem.macdHist; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive]); + + const barChartHeight = 250; + // const barChartOrigin = (w, h) => [0, h - barChartHeight]; + const pricesDisplayFormat = format(".2f"); + const MACDChartExtents = (data) => { + return data.macd; + }; + + return ( + <> + + + + d.macd} + strokeStyle='#b3009e' + /> + d.macdSignal} + strokeStyle='#b33300' + /> + {/* */} + + + ) +} diff --git a/src/components/invest/chart/MainChart.jsx b/src/components/invest/chart/MainChart.jsx index e7d37b4..38e261d 100644 --- a/src/components/invest/chart/MainChart.jsx +++ b/src/components/invest/chart/MainChart.jsx @@ -25,20 +25,25 @@ import styled from "styled-components"; import { getChartDatas } from "../../../store/reducers/Chart/chart"; // 차트지표 -import SMAChart from "./subChart/SMAChart"; -import WMAChart from "./subChart/WMAChart"; -import EMAChart from "./subChart/EMAChart"; -import BBANDSChart from "./subChart/BBANDSChart"; -import SARChart from "./subChart/SARChart"; +import SMAChart from "./Indicators/chart/SMAChart"; +import WMAChart from "./Indicators/chart/WMAChart"; +import EMAChart from "./Indicators/chart/EMAChart"; +import BBANDSChart from "./Indicators/chart/BBANDSChart"; +import SARChart from "./Indicators/chart/SARChart"; +import MACDChart from "./Indicators/sub/MACDChart"; export default function MainChart({ toggleCharts, toggleIndicators }) { const dataList = useSelector((state) => state.chart.datas) + console.log(dataList) const company = useSelector((state) => state.company.data) const dispatch = useDispatch(); + const [isShow, setIsShow] = useState(false); + useEffect(() => { // getData() dispatch(getChartDatas()) + .then(() => setIsShow(true)) }, []) @@ -174,7 +179,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { - + {/* 분봉 호버했을 때, 날짜/시가/종가/고가/저가 표시 */} {/* 차트지표 */} - - - - - + + + + + - {/* */} ); } diff --git a/src/components/invest/chart/subChart/EMAChart.jsx b/src/components/invest/chart/subChart/EMAChart.jsx deleted file mode 100644 index 53612e5..0000000 --- a/src/components/invest/chart/subChart/EMAChart.jsx +++ /dev/null @@ -1,79 +0,0 @@ -import React, { useEffect } from 'react'; -import { LineSeries } from 'react-financial-charts'; -import { useDispatch, useSelector } from 'react-redux'; -import { setChartDatas } from '../../../../store/reducers/Chart/chart'; -import { getEMAChart } from '../../../../store/reducers/Chart/SubChart/subChart'; - -export default function EMAChart({ datas }) { - const dispatch = useDispatch(); - const isActive = useSelector((state) => state.subChart.EMA); - - const calculateEMA = (data) => { - const responses = [data.response1, data.response2, data.response3, data.response4, data.response5]; - const newData = [...datas]; - responses.forEach((response, index) => { - const f_idx = response.begIndex; - const l_idx = response.nbElement; - const subData = response.result.outReal; - for (let i = 0; i < l_idx; i++) { - const emaKey = `ema${[5, 10, 30, 60, 100][index]}`; - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - [emaKey]: subData[i] // 새로운 속성 추가 - }; - } - }); - dispatch(setChartDatas(newData)); - } - - useEffect(() => { - if (isActive) { - const data = { - "chart": datas, - "lineTime1" : 5, - "lineTime2" : 10, - "lineTime3" : 30, - "lineTime4" : 60, - "lineTime5" : 120 - } - dispatch(getEMAChart(data)) - .then((res) => calculateEMA(res.payload)) - } else if (!isActive) { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.ema5; - delete newItem.ema10; - delete newItem.ema30; - delete newItem.ema60; - delete newItem.ema100; - return newItem; - }); - dispatch(setChartDatas(updatedDatas)); - } - }, [isActive]); - - return ( - <> - d.ema5} - strokeStyle='#b3009e' - /> - d.ema10} - strokeStyle='#b33300' - /> - d.ema30} - strokeStyle='#edda02' - /> - d.ema60} - strokeStyle='#00b33f' - /> - d.ema100} - strokeStyle='#0277ed' - /> - - ) -} diff --git a/src/components/invest/chart/subChart/MACDChart.jsx b/src/components/invest/chart/subChart/MACDChart.jsx deleted file mode 100644 index 412f998..0000000 --- a/src/components/invest/chart/subChart/MACDChart.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react' -import { BarSeries, Chart, ChartCanvas, XAxis, YAxis, discontinuousTimeScaleProviderBuilder } from 'react-financial-charts' -import { useSelector } from 'react-redux'; -import { format } from 'd3-format'; - -export default function MACDChart() { - return ( - <> - // - // {/* MACD 차트 */} - // - // - // - // - // - // - ) -} diff --git a/src/components/invest/chart/subChart/SMAChart.jsx b/src/components/invest/chart/subChart/SMAChart.jsx deleted file mode 100644 index ffb0ef6..0000000 --- a/src/components/invest/chart/subChart/SMAChart.jsx +++ /dev/null @@ -1,80 +0,0 @@ -import React, { useEffect } from 'react'; -import { LineSeries } from 'react-financial-charts'; -import { useDispatch, useSelector } from 'react-redux'; -import { setChartDatas } from '../../../../store/reducers/Chart/chart'; -import { getSMAChart } from '../../../../store/reducers/Chart/SubChart/subChart'; - -export default function SMAChart({ datas }) { - const dispatch = useDispatch(); - const isActive = useSelector((state) => state.subChart.SMA); - - const calculateSMA = (data) => { - const responses = [data.response1, data.response2, data.response3, data.response4, data.response5]; - const newData = [...datas]; - responses.forEach((response, index) => { - const f_idx = response.begIndex; - const l_idx = response.nbElement; - const subData = response.result.outReal; - for (let i = 0; i < l_idx; i++) { - const smaKey = `sma${[5, 10, 30, 60, 100][index]}`; - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - [smaKey]: subData[i] // 새로운 속성 추가 - }; - } - }); - // setSmaCalculated(true); // SMA 계산 완료 - dispatch(setChartDatas(newData)); - } - - useEffect(() => { - if (isActive) { - const data = { - "chart": datas, - "lineTime1" : 5, - "lineTime2" : 10, - "lineTime3" : 30, - "lineTime4" : 60, - "lineTime5" : 120 - } - dispatch(getSMAChart(data)) - .then((res) => calculateSMA(res.payload)) - } else if (!isActive) { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.sma5; - delete newItem.sma10; - delete newItem.sma30; - delete newItem.sma60; - delete newItem.sma100; - return newItem; - }); - dispatch(setChartDatas(updatedDatas)); - } - }, [isActive]); - - return ( - <> - d.sma5} - strokeStyle='#b3009e' - /> - d.sma10} - strokeStyle='#b33300' - /> - d.sma30} - strokeStyle='#edda02' - /> - d.sma60} - strokeStyle='#00b33f' - /> - d.sma100} - strokeStyle='#0277ed' - /> - - ) -} diff --git a/src/components/invest/chart/subChart/WMAChart.jsx b/src/components/invest/chart/subChart/WMAChart.jsx deleted file mode 100644 index 3e08c1e..0000000 --- a/src/components/invest/chart/subChart/WMAChart.jsx +++ /dev/null @@ -1,79 +0,0 @@ -import React, { useEffect } from 'react'; -import { LineSeries } from 'react-financial-charts'; -import { useDispatch, useSelector } from 'react-redux'; -import { setChartDatas } from '../../../../store/reducers/Chart/chart'; -import { getWMAChart } from '../../../../store/reducers/Chart/SubChart/subChart'; - -export default function WMAChart({ datas }) { - const dispatch = useDispatch(); - const isActive = useSelector((state) => state.subChart.WMA); - - const calculateWMA = (data) => { - const responses = [data.response1, data.response2, data.response3, data.response4, data.response5]; - const newData = [...datas]; - responses.forEach((response, index) => { - const f_idx = response.begIndex; - const l_idx = response.nbElement; - const subData = response.result.outReal; - for (let i = 0; i < l_idx; i++) { - const wmaKey = `wma${[5, 10, 30, 60, 100][index]}`; - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - [wmaKey]: subData[i] // 새로운 속성 추가 - }; - } - }); - dispatch(setChartDatas(newData)); - } - - useEffect(() => { - if (isActive) { - const data = { - "chart": datas, - "lineTime1" : 5, - "lineTime2" : 10, - "lineTime3" : 30, - "lineTime4" : 60, - "lineTime5" : 120 - } - dispatch(getWMAChart(data)) - .then((res) => calculateWMA(res.payload)) - } else if (!isActive) { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.wma5; - delete newItem.wma10; - delete newItem.wma30; - delete newItem.wma60; - delete newItem.wma100; - return newItem; - }); - dispatch(setChartDatas(updatedDatas)); - } - }, [isActive]); - - return ( - <> - d.wma5} - strokeStyle='#b3009e' - /> - d.wma10} - strokeStyle='#b33300' - /> - d.wma30} - strokeStyle='#edda02' - /> - d.wma60} - strokeStyle='#00b33f' - /> - d.wma100} - strokeStyle='#0277ed' - /> - - ) -} diff --git a/src/components/invest/left-bar/ChartIndicators.jsx b/src/components/invest/left-bar/ChartIndicators.jsx index eabceae..e780f9b 100644 --- a/src/components/invest/left-bar/ChartIndicators.jsx +++ b/src/components/invest/left-bar/ChartIndicators.jsx @@ -4,7 +4,7 @@ import IndicatorDetail from "./IndicatorDetail"; // import chartData from "../../../../public/Json/chartData.json"; import chartData from '../../../Json/chartData.json' import { useDispatch, useSelector } from "react-redux"; -import { setActiveSub, setDisactiveSub } from "../../../store/reducers/Chart/SubChart/clickSubChart"; +import { setActiveSub, setDisactiveSub } from "../../../store/reducers/Chart/Indicators/clickIndicators"; const ChartIndicators = ({ onClose }) => { const [showDetail, setShowDetail] = useState( @@ -30,6 +30,9 @@ const ChartIndicators = ({ onClose }) => { } }; + const isActive = useSelector((state) => state.clickIndicator); + console.log(isActive) + return ( @@ -43,9 +46,10 @@ const ChartIndicators = ({ onClose }) => { { - onCheckedElement(e.target.checked, e.target.value); - }} + checked={isActive[item.name]} + onChange={e => { + onCheckedElement(e.target.checked, e.target.value); + }} > {item.showName} toggleDetail(idx)}>설정 diff --git a/src/components/invest/left-bar/IndicatorDetail.jsx b/src/components/invest/left-bar/IndicatorDetail.jsx index d5968d8..ff6080e 100644 --- a/src/components/invest/left-bar/IndicatorDetail.jsx +++ b/src/components/invest/left-bar/IndicatorDetail.jsx @@ -3,6 +3,7 @@ import styled from "styled-components"; import { useDispatch, useSelector } from "react-redux"; import * as chartValuesModule from "../../../store/reducers/Trading/chartValues"; import * as indicatorValuesModule from "../../../store/reducers/Trading/indicatorValues"; +import { setChartDatas } from "../../../store/reducers/Chart/chart"; const IndicatorDetail = ({ indiType, diff --git a/src/lib/apis/chart.jsx b/src/lib/apis/chart.jsx index 02e4ea2..274275c 100644 --- a/src/lib/apis/chart.jsx +++ b/src/lib/apis/chart.jsx @@ -31,4 +31,8 @@ export async function getBBANDS(data) { export async function getSAR(data) { return await subChartInstance.post('/SAR', data) +} + +export async function getMACD(data) { + return await subChartInstance.post('/MACD', data) } \ No newline at end of file diff --git a/src/store/reducers/Chart/SubChart/subChart.jsx b/src/store/reducers/Chart/Indicators/chart.jsx similarity index 86% rename from src/store/reducers/Chart/SubChart/subChart.jsx rename to src/store/reducers/Chart/Indicators/chart.jsx index 12e3e00..49bac83 100644 --- a/src/store/reducers/Chart/SubChart/subChart.jsx +++ b/src/store/reducers/Chart/Indicators/chart.jsx @@ -50,13 +50,16 @@ export const getSARChart = createAsyncThunk( } ) -const subChartSlice = createSlice({ - name: "subChart", +const chartIndicatorSlice = createSlice({ + name: "chartIndicator", initialState: initialState, reducers: { }, extraReducers: (builder) => { + builder.addCase(getSMAChart.fulfilled, (state, action) => { + state.SMADatas = action.payload; + }) }, }); -export default subChartSlice.reducer; +export default chartIndicatorSlice.reducer; diff --git a/src/store/reducers/Chart/SubChart/clickSubChart.jsx b/src/store/reducers/Chart/Indicators/clickIndicators.jsx similarity index 97% rename from src/store/reducers/Chart/SubChart/clickSubChart.jsx rename to src/store/reducers/Chart/Indicators/clickIndicators.jsx index c75e900..9463a50 100644 --- a/src/store/reducers/Chart/SubChart/clickSubChart.jsx +++ b/src/store/reducers/Chart/Indicators/clickIndicators.jsx @@ -6,6 +6,7 @@ const initialState = { EMA: false, BBANDS: false, SAR: false, + MACD: false, }; const clickSubSlice = createSlice({ diff --git a/src/store/reducers/Chart/Indicators/sub.jsx b/src/store/reducers/Chart/Indicators/sub.jsx new file mode 100644 index 0000000..53e2baf --- /dev/null +++ b/src/store/reducers/Chart/Indicators/sub.jsx @@ -0,0 +1,26 @@ +import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; +import { getMACD } from "../../../../lib/apis/chart"; + +const initialState = { + MACDDatas: [], +}; + +export const getMACDChart = createAsyncThunk( + "chart/getMACD", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getMACD(data); + return response.data; + } +) + +const subIndicatorSlice = createSlice({ + name: "subIndicator", + initialState: initialState, + reducers: { + }, + extraReducers: (builder) => { + }, +}); + +export default subIndicatorSlice.reducer; diff --git a/src/store/reducers/Chart/chart.jsx b/src/store/reducers/Chart/chart.jsx index 219f494..fa79b59 100644 --- a/src/store/reducers/Chart/chart.jsx +++ b/src/store/reducers/Chart/chart.jsx @@ -2,7 +2,808 @@ import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; import { getChartData } from '../../../lib/apis/chart' const initialState = { - datas: [], + datas: [ + { + "open": 72600, + "close": 72900, + "high": 73000, + "low": 72500, + "volume": 8988858, + "date": "20240318" + }, + { + "open": 73400, + "close": 72300, + "high": 73700, + "low": 72300, + "volume": 22580556, + "date": "20240315" + }, + { + "open": 74400, + "close": 74300, + "high": 74500, + "low": 73600, + "volume": 22545540, + "date": "20240314" + }, + { + "open": 73700, + "close": 74100, + "high": 74100, + "low": 73500, + "volume": 15243134, + "date": "20240313" + }, + { + "open": 72600, + "close": 73300, + "high": 73500, + "low": 72100, + "volume": 13011654, + "date": "20240312" + }, + { + "open": 72900, + "close": 72400, + "high": 73100, + "low": 72300, + "volume": 9740504, + "date": "20240311" + }, + { + "open": 72800, + "close": 73300, + "high": 73400, + "low": 72600, + "volume": 19271348, + "date": "20240308" + }, + { + "open": 73100, + "close": 72200, + "high": 73300, + "low": 72200, + "volume": 14516963, + "date": "20240307" + }, + { + "open": 73200, + "close": 72900, + "high": 73500, + "low": 72700, + "volume": 21547904, + "date": "20240306" + }, + { + "open": 74600, + "close": 73700, + "high": 74800, + "low": 73700, + "volume": 19505124, + "date": "20240305" + }, + { + "open": 74300, + "close": 74900, + "high": 75000, + "low": 74000, + "volume": 23210474, + "date": "20240304" + }, + { + "open": 72600, + "close": 73400, + "high": 73400, + "low": 72000, + "volume": 21176404, + "date": "20240229" + }, + { + "open": 72900, + "close": 73200, + "high": 73900, + "low": 72800, + "volume": 11795859, + "date": "20240228" + }, + { + "open": 73100, + "close": 72900, + "high": 73400, + "low": 72700, + "volume": 13201981, + "date": "20240227" + }, + { + "open": 72300, + "close": 72800, + "high": 73200, + "low": 72200, + "volume": 14669352, + "date": "20240226" + }, + { + "open": 73600, + "close": 72900, + "high": 74200, + "low": 72900, + "volume": 16225166, + "date": "20240223" + }, + { + "open": 73800, + "close": 73100, + "high": 73900, + "low": 72700, + "volume": 15208934, + "date": "20240222" + }, + { + "open": 73400, + "close": 73000, + "high": 73700, + "low": 72900, + "volume": 11503495, + "date": "20240221" + }, + { + "open": 73700, + "close": 73300, + "high": 73700, + "low": 72800, + "volume": 14681477, + "date": "20240220" + }, + { + "open": 72800, + "close": 73800, + "high": 73900, + "low": 72800, + "volume": 12726404, + "date": "20240219" + }, + { + "open": 73300, + "close": 72800, + "high": 73400, + "low": 72500, + "volume": 13444781, + "date": "20240216" + }, + { + "open": 74200, + "close": 73000, + "high": 74400, + "low": 73000, + "volume": 14120600, + "date": "20240215" + }, + { + "open": 73700, + "close": 74000, + "high": 74300, + "low": 73700, + "volume": 12434945, + "date": "20240214" + }, + { + "open": 74800, + "close": 75200, + "high": 75200, + "low": 74400, + "volume": 21966744, + "date": "20240213" + }, + { + "open": 75000, + "close": 74100, + "high": 75200, + "low": 73600, + "volume": 20810708, + "date": "20240208" + }, + { + "open": 74600, + "close": 75000, + "high": 75500, + "low": 74300, + "volume": 16566445, + "date": "20240207" + }, + { + "open": 74300, + "close": 74400, + "high": 74700, + "low": 73300, + "volume": 14559254, + "date": "20240206" + }, + { + "open": 74200, + "close": 74300, + "high": 74800, + "low": 73500, + "volume": 19026020, + "date": "20240205" + }, + { + "open": 74000, + "close": 75200, + "high": 75200, + "low": 73700, + "volume": 14955881, + "date": "20240202" + }, + { + "open": 73000, + "close": 73600, + "high": 74200, + "low": 72900, + "volume": 19881032, + "date": "20240201" + }, + { + "open": 73400, + "close": 72700, + "high": 74000, + "low": 72500, + "volume": 15703560, + "date": "20240131" + }, + { + "open": 75000, + "close": 74300, + "high": 75300, + "low": 73700, + "volume": 12244418, + "date": "20240130" + }, + { + "open": 73800, + "close": 74400, + "high": 75200, + "low": 73500, + "volume": 13976521, + "date": "20240129" + }, + { + "open": 73700, + "close": 73400, + "high": 74500, + "low": 73300, + "volume": 11160062, + "date": "20240126" + }, + { + "open": 74200, + "close": 74100, + "high": 74800, + "low": 73700, + "volume": 11737747, + "date": "20240125" + }, + { + "open": 75200, + "close": 74000, + "high": 75200, + "low": 73500, + "volume": 12860661, + "date": "20240124" + }, + { + "open": 75700, + "close": 75200, + "high": 75800, + "low": 74300, + "volume": 14786224, + "date": "20240123" + }, + { + "open": 75900, + "close": 75100, + "high": 76000, + "low": 75000, + "volume": 19673376, + "date": "20240122" + }, + { + "open": 73500, + "close": 74700, + "high": 74700, + "low": 73000, + "volume": 23363428, + "date": "20240119" + }, + { + "open": 71600, + "close": 71700, + "high": 72000, + "low": 70700, + "volume": 17853396, + "date": "20240118" + }, + { + "open": 73100, + "close": 71000, + "high": 73300, + "low": 71000, + "volume": 22683660, + "date": "20240117" + }, + { + "open": 73500, + "close": 72600, + "high": 73700, + "low": 72500, + "volume": 14760415, + "date": "20240116" + }, + { + "open": 73200, + "close": 73900, + "high": 74000, + "low": 73200, + "volume": 13212339, + "date": "20240115" + }, + { + "open": 73000, + "close": 73100, + "high": 74100, + "low": 72800, + "volume": 13038939, + "date": "20240112" + }, + { + "open": 72900, + "close": 73200, + "high": 73600, + "low": 72700, + "volume": 57691264, + "date": "20240111" + }, + { + "open": 75000, + "close": 73600, + "high": 75200, + "low": 73200, + "volume": 20259528, + "date": "20240110" + }, + { + "open": 77400, + "close": 74700, + "high": 77700, + "low": 74300, + "volume": 26019248, + "date": "20240109" + }, + { + "open": 77000, + "close": 76500, + "high": 77500, + "low": 76400, + "volume": 11088724, + "date": "20240108" + }, + { + "open": 76700, + "close": 76600, + "high": 77100, + "low": 76400, + "volume": 11304316, + "date": "20240105" + }, + { + "open": 76100, + "close": 76600, + "high": 77300, + "low": 76100, + "volume": 15324439, + "date": "20240104" + }, + { + "open": 78500, + "close": 77000, + "high": 78800, + "low": 77000, + "volume": 21753644, + "date": "20240103" + }, + { + "open": 78200, + "close": 79600, + "high": 79800, + "low": 78200, + "volume": 17142848, + "date": "20240102" + }, + { + "open": 77700, + "close": 78500, + "high": 78500, + "low": 77500, + "volume": 17797536, + "date": "20231228" + }, + { + "open": 76700, + "close": 78000, + "high": 78000, + "low": 76500, + "volume": 20651042, + "date": "20231227" + }, + { + "open": 76100, + "close": 76600, + "high": 76700, + "low": 75700, + "volume": 13164909, + "date": "20231226" + }, + { + "open": 75800, + "close": 75900, + "high": 76300, + "low": 75400, + "volume": 14515608, + "date": "20231222" + }, + { + "open": 74600, + "close": 75000, + "high": 75000, + "low": 74300, + "volume": 13478766, + "date": "20231221" + }, + { + "open": 74200, + "close": 74800, + "high": 74900, + "low": 73800, + "volume": 16870156, + "date": "20231220" + }, + { + "open": 73000, + "close": 73400, + "high": 73400, + "low": 72800, + "volume": 8907632, + "date": "20231219" + }, + { + "open": 73300, + "close": 72900, + "high": 73400, + "low": 72800, + "volume": 9690551, + "date": "20231218" + }, + { + "open": 73800, + "close": 73300, + "high": 74000, + "low": 73200, + "volume": 15419815, + "date": "20231215" + }, + { + "open": 74100, + "close": 73100, + "high": 74300, + "low": 72500, + "volume": 27567592, + "date": "20231214" + }, + { + "open": 73300, + "close": 72800, + "high": 73500, + "low": 72800, + "volume": 13116766, + "date": "20231213" + }, + { + "open": 73300, + "close": 73500, + "high": 73500, + "low": 73100, + "volume": 13758646, + "date": "20231212" + }, + { + "open": 72800, + "close": 73000, + "high": 73000, + "low": 72200, + "volume": 9861960, + "date": "20231211" + }, + { + "open": 72100, + "close": 72600, + "high": 72800, + "low": 71900, + "volume": 10859463, + "date": "20231208" + }, + { + "open": 71800, + "close": 71500, + "high": 71900, + "low": 71100, + "volume": 8862017, + "date": "20231207" + }, + { + "open": 71800, + "close": 71700, + "high": 72100, + "low": 71600, + "volume": 8123087, + "date": "20231206" + }, + { + "open": 72300, + "close": 71200, + "high": 72400, + "low": 71200, + "volume": 12129682, + "date": "20231205" + }, + { + "open": 72800, + "close": 72600, + "high": 72900, + "low": 72400, + "volume": 10229267, + "date": "20231204" + }, + { + "open": 72400, + "close": 72000, + "high": 72500, + "low": 71700, + "volume": 9871284, + "date": "20231201" + }, + { + "open": 72700, + "close": 72800, + "high": 72800, + "low": 72200, + "volume": 15783714, + "date": "20231130" + }, + { + "open": 72400, + "close": 72700, + "high": 72800, + "low": 72200, + "volume": 9283933, + "date": "20231129" + }, + { + "open": 71400, + "close": 72700, + "high": 72700, + "low": 71300, + "volume": 13283081, + "date": "20231128" + }, + { + "open": 71500, + "close": 71300, + "high": 72100, + "low": 71100, + "volume": 9113857, + "date": "20231127" + }, + { + "open": 72400, + "close": 71700, + "high": 72600, + "low": 71700, + "volume": 6676685, + "date": "20231124" + }, + { + "open": 73000, + "close": 72400, + "high": 73200, + "low": 72200, + "volume": 6775614, + "date": "20231123" + }, + { + "open": 72200, + "close": 72800, + "high": 73000, + "low": 71900, + "volume": 11105143, + "date": "20231122" + }, + { + "open": 73100, + "close": 72800, + "high": 73400, + "low": 72700, + "volume": 9712881, + "date": "20231121" + }, + { + "open": 72100, + "close": 72700, + "high": 73000, + "low": 72100, + "volume": 10610157, + "date": "20231120" + }, + { + "open": 72300, + "close": 72500, + "high": 73000, + "low": 72300, + "volume": 11494644, + "date": "20231117" + }, + { + "open": 72500, + "close": 72800, + "high": 73000, + "low": 72300, + "volume": 15860451, + "date": "20231116" + }, + { + "open": 71600, + "close": 72200, + "high": 72200, + "low": 71500, + "volume": 20148676, + "date": "20231115" + }, + { + "open": 71000, + "close": 70800, + "high": 71100, + "low": 70600, + "volume": 9567984, + "date": "20231114" + }, + { + "open": 71300, + "close": 70400, + "high": 71300, + "low": 70300, + "volume": 9246919, + "date": "20231113" + }, + { + "open": 70000, + "close": 70500, + "high": 70500, + "low": 69500, + "volume": 9684347, + "date": "20231110" + }, + { + "open": 69900, + "close": 70300, + "high": 70800, + "low": 69600, + "volume": 12301373, + "date": "20231109" + }, + { + "open": 71300, + "close": 69900, + "high": 71400, + "low": 69700, + "volume": 12901310, + "date": "20231108" + }, + { + "open": 70600, + "close": 70900, + "high": 70900, + "low": 70000, + "volume": 17228732, + "date": "20231107" + }, + { + "open": 69800, + "close": 70900, + "high": 70900, + "low": 69300, + "volume": 22228488, + "date": "20231106" + }, + { + "open": 69700, + "close": 69600, + "high": 70200, + "low": 69500, + "volume": 10322234, + "date": "20231103" + }, + { + "open": 70000, + "close": 69700, + "high": 70000, + "low": 69400, + "volume": 16350031, + "date": "20231102" + }, + { + "open": 67500, + "close": 68600, + "high": 68900, + "low": 67300, + "volume": 13775256, + "date": "20231101" + }, + { + "open": 67600, + "close": 66900, + "high": 68300, + "low": 66900, + "volume": 14488892, + "date": "20231031" + }, + { + "open": 66800, + "close": 67300, + "high": 67800, + "low": 66700, + "volume": 10139270, + "date": "20231030" + }, + { + "open": 67100, + "close": 67300, + "high": 67300, + "low": 66700, + "volume": 11334726, + "date": "20231027" + }, + { + "open": 67000, + "close": 66700, + "high": 67900, + "low": 66700, + "volume": 15517624, + "date": "20231026" + }, + { + "open": 68800, + "close": 68000, + "high": 68800, + "low": 67900, + "volume": 10610703, + "date": "20231025" + }, + { + "open": 68700, + "close": 68500, + "high": 68800, + "low": 67700, + "volume": 12791710, + "date": "20231024" + }, + { + "open": 68700, + "close": 68400, + "high": 69100, + "low": 68200, + "volume": 11625959, + "date": "20231023" + } + ], }; export const getChartDatas = createAsyncThunk( diff --git a/src/store/reducers/Trading/chartValues.js b/src/store/reducers/Trading/chartValues.js index 182a32a..6f59c66 100644 --- a/src/store/reducers/Trading/chartValues.js +++ b/src/store/reducers/Trading/chartValues.js @@ -2,10 +2,10 @@ import { createSlice } from "@reduxjs/toolkit"; const initialState = { values: { - SMA: [5, 20, 60, 120, 240], - WMA: [5, 20, 60, 120, 240], - EMA: [5, 20, 60, 120, 240], - BBANDS: [20, 2], + SMA: [5, 10, 20, 60, 120], + WMA: [5, 10, 20, 60, 120], + EMA: [5, 10, 20, 60, 120], + BBANDS: [5, 2], SAR: [0.02, 0.2], }, }; diff --git a/src/store/store.js b/src/store/store.js index b707ba8..02fbe0c 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -17,14 +17,15 @@ import chartValuesReducer from "./reducers/Trading/chartValues"; import indicatorValuesReducer from "./reducers/Trading/indicatorValues"; import chartReducer from './reducers/Chart/chart.jsx'; import companyReducer from './reducers/Chart/clickCompany.jsx'; -import subChartReducer from './reducers/Chart/SubChart/clickSubChart.jsx'; -import getSubChartReducer from './reducers/Chart/SubChart/subChart.jsx'; +import clickIndicatorsReducer from './reducers/Chart/Indicators/clickIndicators.jsx'; +import getChartIndicatorReducer from './reducers/Chart/Indicators/chart.jsx'; +import getSubIndicatorReducer from './reducers/Chart/Indicators/sub.jsx'; const rootPersistConfig = { key: "root", storage: storage, // whitelist: ["chartValues", "indicatorValues"], - blacklist: ["subChart", "getSubChart"] + blacklist: ["getSubIndicator"] }; const rootReducer = persistReducer( @@ -36,8 +37,9 @@ const rootReducer = persistReducer( company: companyReducer, chartValues: chartValuesReducer, indicatorValues: indicatorValuesReducer, - subChart: subChartReducer, - getSubChart: getSubChartReducer, + clickIndicator: clickIndicatorsReducer, + getChartIndicator: getChartIndicatorReducer, + getSubIndicator: getSubIndicatorReducer, }) ); const myMiddlewares = [logger]; From a76d6ff208d829ea65a3d8c412f7074d024dff23 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Mon, 18 Mar 2024 15:43:07 +0900 Subject: [PATCH 30/84] =?UTF-8?q?feat:=20MACD=20=EC=B0=A8=ED=8A=B8=20?= =?UTF-8?q?=EC=8B=9C=EA=B0=81=ED=99=94=20=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../invest/chart/Indicators/sub/MACDChart.jsx | 48 +++++++++++-------- src/components/invest/chart/MainChart.jsx | 19 ++++++-- .../invest/left-bar/ChartIndicators.jsx | 5 +- src/components/invest/left-bar/Indicators.jsx | 22 ++++++++- 4 files changed, 65 insertions(+), 29 deletions(-) diff --git a/src/components/invest/chart/Indicators/sub/MACDChart.jsx b/src/components/invest/chart/Indicators/sub/MACDChart.jsx index 944e3d4..83e65bb 100644 --- a/src/components/invest/chart/Indicators/sub/MACDChart.jsx +++ b/src/components/invest/chart/Indicators/sub/MACDChart.jsx @@ -1,16 +1,34 @@ import React, { useEffect } from 'react'; -import { Chart, LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { Chart, LineSeries, MACDSeries, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getMACDChart } from '../../../../../store/reducers/Chart/Indicators/sub'; import { format } from 'd3-format'; +const macdAppearance = { + stroke: { + macd: "#FF0000", + signal: "#00F300", + }, + fill: { + divergence: "#4682B4" + }, +}; + export default function MACDChart({ datas }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.MACD); const calculateMACD = (data) => { - const newData = [...datas]; + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.macd; + delete newItem.macdSignal; + delete newItem.macdHist; + return newItem; + }); + + const newData = [...updatedDatas]; const f_idx = data.begIndex; const l_idx = data.nbElement; @@ -51,7 +69,7 @@ export default function MACDChart({ datas }) { }, [isActive]); const barChartHeight = 250; - // const barChartOrigin = (w, h) => [0, h - barChartHeight]; + const barChartOrigin = (_, h) => [0, h - barChartHeight]; const pricesDisplayFormat = format(".2f"); const MACDChartExtents = (data) => { return data.macd; @@ -59,24 +77,12 @@ export default function MACDChart({ datas }) { return ( <> - - - - d.macd} - strokeStyle='#b3009e' - /> - d.macdSignal} - strokeStyle='#b33300' - /> - {/* */} - + + + + d.macd} strokeStyle={'#b3009e'} + /> + ) } diff --git a/src/components/invest/chart/MainChart.jsx b/src/components/invest/chart/MainChart.jsx index 38e261d..bd32872 100644 --- a/src/components/invest/chart/MainChart.jsx +++ b/src/components/invest/chart/MainChart.jsx @@ -18,11 +18,12 @@ import { MouseCoordinateY, ZoomButtons, HoverTooltip, + MACDSeries, } from "react-financial-charts"; import { useSelector, useDispatch } from 'react-redux'; import styled from "styled-components"; -import { getChartDatas } from "../../../store/reducers/Chart/chart"; +import { getChartDatas, setChartDatas } from "../../../store/reducers/Chart/chart"; // 차트지표 import SMAChart from "./Indicators/chart/SMAChart"; @@ -31,6 +32,7 @@ import EMAChart from "./Indicators/chart/EMAChart"; import BBANDSChart from "./Indicators/chart/BBANDSChart"; import SARChart from "./Indicators/chart/SARChart"; import MACDChart from "./Indicators/sub/MACDChart"; +import { getMACDChart } from "../../../store/reducers/Chart/Indicators/sub"; export default function MainChart({ toggleCharts, toggleIndicators }) { const dataList = useSelector((state) => state.chart.datas) @@ -168,8 +170,8 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { zoomAnchor={lastVisibleItemBasedZoomAnchor} > {/* 거래량 차트 */} - + */} + + d.macd} + origin={barChartOrigin} + > + + + d.macd} /> - + {/* 분봉 호버했을 때, 날짜/시가/종가/고가/저가 표시 */} { }; const isActive = useSelector((state) => state.clickIndicator); - console.log(isActive) - return ( @@ -44,7 +42,8 @@ const ChartIndicators = ({ onClose }) => { {chartData.map((item, idx) => ( - { diff --git a/src/components/invest/left-bar/Indicators.jsx b/src/components/invest/left-bar/Indicators.jsx index 4f80724..1e687be 100644 --- a/src/components/invest/left-bar/Indicators.jsx +++ b/src/components/invest/left-bar/Indicators.jsx @@ -3,6 +3,8 @@ import styled from "styled-components"; import IndicatorDetail from "./IndicatorDetail"; // import indiData from "../../../../public/Json/indiData.json"; import indiData from '../../../Json/indiData.json' +import { useDispatch, useSelector } from "react-redux"; +import { setActiveSub, setDisactiveSub } from "../../../store/reducers/Chart/Indicators/clickIndicators"; const Indicators = ({ onClose }) => { const [showDetail, setShowDetail] = useState( @@ -17,6 +19,19 @@ const Indicators = ({ onClose }) => { }); }; + // 데이터를 넣을 빈배열 + const dispatch = useDispatch(); + // 1️⃣ onChange함수를 사용하여 이벤트 감지, 필요한 값 받아오기 + const onCheckedElement = (checked, item) => { + if (checked) { + dispatch(setActiveSub(item)) + } else if (!checked) { + dispatch(setDisactiveSub(item)) + } + }; + + const isActive = useSelector((state) => state.clickIndicator); + return ( @@ -27,7 +42,12 @@ const Indicators = ({ onClose }) => { {indiData.map((item, idx) => ( { + onCheckedElement(e.target.checked, e.target.value); + }} > {item.showName} toggleDetail(idx)}>설정 From cdc8cfe7709196b41a8a347672a2d5c744d3c6c8 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Tue, 19 Mar 2024 11:44:36 +0900 Subject: [PATCH 31/84] =?UTF-8?q?feat:=20=EB=B3=B4=EC=A1=B0=EC=A7=80?= =?UTF-8?q?=ED=91=9C=20=EC=B0=A8=ED=8A=B8=20=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/invest/chart/MainChart.jsx | 229 ++++++++++++++++-- src/lib/apis/chart.jsx | 84 +++++++ .../Chart/Indicators/clickIndicators.jsx | 21 ++ src/store/reducers/Chart/Indicators/sub.jsx | 191 ++++++++++++++- src/store/store.js | 1 + 5 files changed, 500 insertions(+), 26 deletions(-) diff --git a/src/components/invest/chart/MainChart.jsx b/src/components/invest/chart/MainChart.jsx index bd32872..bd35eb2 100644 --- a/src/components/invest/chart/MainChart.jsx +++ b/src/components/invest/chart/MainChart.jsx @@ -33,6 +33,24 @@ import BBANDSChart from "./Indicators/chart/BBANDSChart"; import SARChart from "./Indicators/chart/SARChart"; import MACDChart from "./Indicators/sub/MACDChart"; import { getMACDChart } from "../../../store/reducers/Chart/Indicators/sub"; +import STOCHFastChart from "./Indicators/sub/STOCHFast"; +import STOCHFChart from "./Indicators/sub/STOCHFast"; +import STOCHChart from "./Indicators/sub/STOCH"; +import RSIChart from "./Indicators/sub/RSIChart"; +import CCIChart from "./Indicators/sub/CCIChart"; +import MOMChart from "./Indicators/sub/MOMChart"; +import ROCChart from "./Indicators/sub/ROCChart"; +import ADChart from "./Indicators/sub/ADChart"; +import ATRChart from "./Indicators/sub/ATRChart"; +import MFIChart from "./Indicators/sub/MFIChart"; +import OBVChart from "./Indicators/sub/OBVChart"; +import ADOSCChart from "./Indicators/sub/ADOSCChart"; +import TRIXChart from "./Indicators/sub/TRIXChart"; +import WILLRChart from "./Indicators/sub/WILLRChart"; +import DMIChart from "./Indicators/sub/DMIChart"; +import ADXChart from "./Indicators/sub/ADXChart"; +import ADXRChart from "./Indicators/sub/ADXRChart"; +import AROONChart from "./Indicators/sub/AROONChart"; export default function MainChart({ toggleCharts, toggleIndicators }) { const dataList = useSelector((state) => state.chart.datas) @@ -76,8 +94,14 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { const gridHeight = height - margin.top - margin.bottom; const barChartHeight = gridHeight / 4; - const barChartOrigin = (_, h) => [0, h - barChartHeight]; - const chartHeight = gridHeight - barChartHeight; + + // 차트 추가될 때마다 origin 변경해주어야 함 + const barChartOrigin = (_, h) => [0, gridHeight - 2 * barChartHeight]; + const MACDChartOrigin = (_, h) => [0 , gridHeight - barChartHeight]; + + // * (차트 개수) + const chartHeight = gridHeight - barChartHeight * 2; + const yExtents = (data) => { return [data.high, data.low]; }; @@ -88,7 +112,11 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { const HoverDisplayFormat = timeFormat(hoverTimeFormat); const barChartExtents = (data) => { - return data.volume; + return [data.volume - 10000000, data.volume + 10000000]; + }; + + const STOCHFChartExtents = (data) => { + return [data.outFastK - 50, data.outFastD + 50]; }; const candleChartExtents = (data) => { @@ -143,6 +171,20 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { }; } + function BarChartContent() { + return ({ currentItem, xAccessor }) => { + return { + x: HoverDisplayFormat(xAccessor(currentItem)), + y: [ + { + label: "거래량", + value: currentItem.volume && pricesDisplayFormat(currentItem.volume) + }, + ] + }; + }; + } + return ( @@ -169,28 +211,8 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { xExtents={xExtents} zoomAnchor={lastVisibleItemBasedZoomAnchor} > - {/* 거래량 차트 */} - {/* - - - - */} - - d.macd} - origin={barChartOrigin} - > - - - d.macd} /> - - - + {/* 일반 차트 */} + {/* 분봉 호버했을 때, 날짜/시가/종가/고가/저가 표시 */} + + {/* 거래량 차트 */} + + + + + + + {/* MACD 차트 */} + {/* d.macd} + origin={MACDChartOrigin} + > + + */} + + {/* STOCHF 차트 */} + {/* [data.outFastK - 50, data.outFastD + 50]} + origin={MACDChartOrigin} + > + + */} + + {/* STOCHF 차트 */} + {/* [data.outSlowK - 50, data.outSlowD + 50]} + origin={MACDChartOrigin} + > + + */} + + {/* RSI 차트 */} + {/* [data.rsi - 20, data.rsi + 20]} + origin={MACDChartOrigin} + > + + */} + + {/* CCI 차트 */} + {/* [data.cci - 100, data.cci + 100]} + origin={MACDChartOrigin} + > + + */} + + {/* MOM 차트 */} + {/* [data.mom - 1000, data.mom + 1000]} + origin={MACDChartOrigin} + > + + */} + + {/* ROC 차트 */} + {/* [data.roc - 5, data.roc + 5]} + origin={MACDChartOrigin} + > + + */} + + {/* AD 차트 */} + {/* [data.ad - 5000000, data.ad + 5000000]} + origin={MACDChartOrigin} + > + + */} + + {/* ATR 차트 */} + {/* [data.atr - 100, data.atr + 100]} + origin={MACDChartOrigin} + > + + */} + + {/* MFI 차트 */} + {/* [data.mfi - 10, data.mfi + 10]} + origin={MACDChartOrigin} + > + + */} + + {/* OBV 차트 */} + {/* [data.obv - 50000000, data.obv + 50000000]} + origin={MACDChartOrigin} + > + + */} + + {/* ADOSC 차트 */} + {/* [data.adosc - 10000000, data.adosc + 10000000]} + origin={MACDChartOrigin} + > + + */} + + {/* TRIX 차트 */} + {/* [data.trix - 0.1, data.trix + 0.1]} + origin={MACDChartOrigin} + > + + */} + + {/* WILLR 차트 */} + {/* [data.willr - 30, data.willr + 30]} + origin={MACDChartOrigin} + > + + */} + + {/* DMI (DX) 차트 */} + {/* 값 제대로 받아오는지 확인 필요 */} + {/* [data.dx - 10, data.dx + 10]} + origin={MACDChartOrigin} + > + + */} + + {/* ADX 차트 */} + {/* [data.adx - 5, data.adx + 5]} + origin={MACDChartOrigin} + > + + */} + + {/* ADXR 차트 */} + {/* [data.adxr - 10, data.adxr + 10]} + origin={MACDChartOrigin} + > + + */} + + {/* ADXR 차트 */} + [data.aroon - 10, data.aroon + 10]} + origin={MACDChartOrigin} + > + + ); diff --git a/src/lib/apis/chart.jsx b/src/lib/apis/chart.jsx index 274275c..e3ef359 100644 --- a/src/lib/apis/chart.jsx +++ b/src/lib/apis/chart.jsx @@ -35,4 +35,88 @@ export async function getSAR(data) { export async function getMACD(data) { return await subChartInstance.post('/MACD', data) +} + +export async function getSTOCHF(data) { + return await subChartInstance.post('/STOCHF', data) +} + +export async function getSTOCH(data) { + return await subChartInstance.post('/STOCH', data) +} + +export async function getRSI(data) { + return await subChartInstance.post('/RSI', data) +} + +export async function getCCI(data) { + return await subChartInstance.post('/CCI', data) +} + +export async function getMOM(data) { + return await subChartInstance.post('/MOM', data) +} + +export async function getROC(data) { + return await subChartInstance.post('/ROC', data) +} + +export async function getAD(data) { + return await subChartInstance.post('/AD', data) +} + +export async function getATR(data) { + return await subChartInstance.post('/ATR', data) +} + +export async function getMFI(data) { + return await subChartInstance.post('/MFI', data) +} + +export async function getOBV(data) { + return await subChartInstance.post('/OBV', data) +} + +export async function getADOSC(data) { + return await subChartInstance.post('/ADOSC', data) +} + +export async function getTRIX(data) { + return await subChartInstance.post('/TRIX', data) +} + +export async function getWILLR(data) { + return await subChartInstance.post('/WILLR', data) +} + +export async function getDX(data) { + return await subChartInstance.post('/DX', data) +} + +export async function getADX(data) { + return await subChartInstance.post('/ADX', data) +} + +export async function getADXR(data) { + return await subChartInstance.post('/ADXR', data) +} + +export async function getAROON(data) { + return await subChartInstance.post('/AROON', data) +} + +export async function getAROONOSC(data) { + return await subChartInstance.post('/AROONOSC', data) +} + +export async function getSTOCHRSI(data) { + return await subChartInstance.post('/STOCHRSI', data) +} + +export async function getULTOSC(data) { + return await subChartInstance.post('/ULTOSC', data) +} + +export async function getPPO(data) { + return await subChartInstance.post('/PPO', data) } \ No newline at end of file diff --git a/src/store/reducers/Chart/Indicators/clickIndicators.jsx b/src/store/reducers/Chart/Indicators/clickIndicators.jsx index 9463a50..1ecc655 100644 --- a/src/store/reducers/Chart/Indicators/clickIndicators.jsx +++ b/src/store/reducers/Chart/Indicators/clickIndicators.jsx @@ -7,6 +7,27 @@ const initialState = { BBANDS: false, SAR: false, MACD: false, + STOCHF: false, + STOCH: false, + RSI: false, + CCI: false, + MOM: false, + ROC: false, + AD: false, + ATR: false, + MFI: false, + OBV: false, + ADOSC: false, + TRIX: false, + WILLR: false, + DX: false, + ADX: false, + ADXR: false, + AROON: false, + AROONOSC: false, + STOCHRSI: false, + ULTOSC: false, + PPO: false, }; const clickSubSlice = createSlice({ diff --git a/src/store/reducers/Chart/Indicators/sub.jsx b/src/store/reducers/Chart/Indicators/sub.jsx index 53e2baf..210bc96 100644 --- a/src/store/reducers/Chart/Indicators/sub.jsx +++ b/src/store/reducers/Chart/Indicators/sub.jsx @@ -1,5 +1,5 @@ import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; -import { getMACD } from "../../../../lib/apis/chart"; +import { getAD, getADOSC, getADX, getADXR, getAROON, getAROONOSC, getATR, getCCI, getDX, getMACD, getMFI, getMOM, getOBV, getPPO, getROC, getRSI, getSTOCH, getSTOCHF, getSTOCHRSI, getTRIX, getULTOSC, getWILLR } from "../../../../lib/apis/chart"; const initialState = { MACDDatas: [], @@ -14,6 +14,195 @@ export const getMACDChart = createAsyncThunk( } ) +export const getSTOCHFChart = createAsyncThunk( + "chart/getSTOCHF", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getSTOCHF(data); + return response.data; + } +) + +export const getSTOCHChart = createAsyncThunk( + "chart/getSTOCH", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getSTOCH(data); + return response.data; + } +) + +export const getRSIChart = createAsyncThunk( + "chart/getRSI", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getRSI(data); + return response.data; + } +) + +export const getCCIChart = createAsyncThunk( + "chart/getCCI", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getCCI(data); + return response.data; + } +) + +export const getMOMChart = createAsyncThunk( + "chart/getMOM", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getMOM(data); + return response.data; + } +) + +export const getROCChart = createAsyncThunk( + "chart/getROC", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getROC(data); + return response.data; + } +) + +export const getADChart = createAsyncThunk( + "chart/getAD", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getAD(data); + return response.data; + } +) + +export const getATRChart = createAsyncThunk( + "chart/getATR", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getATR(data); + return response.data; + } +) + +export const getMFIChart = createAsyncThunk( + "chart/getMFI", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getMFI(data); + return response.data; + } +) + +export const getOBVChart = createAsyncThunk( + "chart/getOBV", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getOBV(data); + return response.data; + } +) + +export const getADOSCChart = createAsyncThunk( + "chart/getADOSC", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getADOSC(data); + return response.data; + } +) + +export const getTRIXChart = createAsyncThunk( + "chart/getTRIX", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getTRIX(data); + return response.data; + } +) + +export const getWILLRChart = createAsyncThunk( + "chart/getWILLR", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getWILLR(data); + return response.data; + } +) + +export const getDXChart = createAsyncThunk( + "chart/getDX", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getDX(data); + return response.data; + } +) + +export const getADXChart = createAsyncThunk( + "chart/getADX", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getADX(data); + return response.data; + } +) + +export const getADXRChart = createAsyncThunk( + "chart/getADXR", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getADXR(data); + return response.data; + } +) + +export const getAROONChart = createAsyncThunk( + "chart/getAROON", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getAROON(data); + return response.data; + } +) + +export const getAROONOSCChart = createAsyncThunk( + "chart/getAROONOSC", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getAROONOSC(data); + return response.data; + } +) + +export const getSTOCHRSIChart = createAsyncThunk( + "chart/getSTOCHRSI", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getSTOCHRSI(data); + return response.data; + } +) + +export const getULTOSCChart = createAsyncThunk( + "chart/getULTOSC", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getULTOSC(data); + return response.data; + } +) + +export const getPPOChart = createAsyncThunk( + "chart/getPPO", + async (data, tunkAPI) => { + // const { code, start_date, end_date, time_format } = data; + const response = await getPPO(data); + return response.data; + } +) + const subIndicatorSlice = createSlice({ name: "subIndicator", initialState: initialState, diff --git a/src/store/store.js b/src/store/store.js index aea975d..83e6bf4 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -37,6 +37,7 @@ const rootReducer = persistReducer( // 임시 reducer trading: tradingReducer, chart: chartReducer, + company: companyReducer, chartValues: chartValuesReducer, indicatorValues: indicatorValuesReducer, clickIndicator: clickIndicatorsReducer, From c172fbaac40817860f44d57b16a55ca1fa7c91ac Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Tue, 19 Mar 2024 11:46:38 +0900 Subject: [PATCH 32/84] =?UTF-8?q?feat:=20BBANDSChart=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/invest/chart/Indicators/chart/BBANDSChart.jsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/invest/chart/Indicators/chart/BBANDSChart.jsx b/src/components/invest/chart/Indicators/chart/BBANDSChart.jsx index 79a7d18..e96f083 100644 --- a/src/components/invest/chart/Indicators/chart/BBANDSChart.jsx +++ b/src/components/invest/chart/Indicators/chart/BBANDSChart.jsx @@ -18,8 +18,6 @@ export default function BBANDSChart({ datas, isShow }) { return newItem; }); - console.log('bbands', updatedDatas) - const newData = [...updatedDatas]; const f_idx = data.begIndex; @@ -39,7 +37,6 @@ export default function BBANDSChart({ datas, isShow }) { } useEffect(() => { - console.log('볼린저 들어옴') if (isActive) { const data = { "chart": datas, From d0377561f6c10352830260d3aaef9a2bf5ed875d Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Tue, 19 Mar 2024 11:46:50 +0900 Subject: [PATCH 33/84] =?UTF-8?q?feat:=20EMAChart=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/invest/chart/Indicators/chart/EMAChart.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/invest/chart/Indicators/chart/EMAChart.jsx b/src/components/invest/chart/Indicators/chart/EMAChart.jsx index 90cf93e..d5fc21f 100644 --- a/src/components/invest/chart/Indicators/chart/EMAChart.jsx +++ b/src/components/invest/chart/Indicators/chart/EMAChart.jsx @@ -38,7 +38,6 @@ export default function EMAChart({ datas, isShow }) { } useEffect(() => { - console.log('EMA 들어옴') if (isActive) { const data = { "chart": datas, From 10bf29d963363a0104ada9aa9e218d5fb451a8ca Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Tue, 19 Mar 2024 11:46:59 +0900 Subject: [PATCH 34/84] =?UTF-8?q?feat:=20SARChart=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/invest/chart/Indicators/chart/SARChart.jsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/invest/chart/Indicators/chart/SARChart.jsx b/src/components/invest/chart/Indicators/chart/SARChart.jsx index 1f145df..25114b0 100644 --- a/src/components/invest/chart/Indicators/chart/SARChart.jsx +++ b/src/components/invest/chart/Indicators/chart/SARChart.jsx @@ -16,8 +16,6 @@ export default function SARChart({ datas, isShow }) { return newItem; }); - console.log('sar', datas) - const newData = [...updatedDatas]; const f_idx = data.begIndex; @@ -33,7 +31,6 @@ export default function SARChart({ datas, isShow }) { } useEffect(() => { - console.log('SAR 들어옴') if (isActive) { const data = { "chart": datas, From 1168bba104a2d65590e4835e6d62e8ee3f64e5a4 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Tue, 19 Mar 2024 11:47:06 +0900 Subject: [PATCH 35/84] =?UTF-8?q?feat:=20ADChart=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../invest/chart/Indicators/sub/ADChart.jsx | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 src/components/invest/chart/Indicators/sub/ADChart.jsx diff --git a/src/components/invest/chart/Indicators/sub/ADChart.jsx b/src/components/invest/chart/Indicators/sub/ADChart.jsx new file mode 100644 index 0000000..2bc7426 --- /dev/null +++ b/src/components/invest/chart/Indicators/sub/ADChart.jsx @@ -0,0 +1,59 @@ +import React, { useEffect } from 'react'; +import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getADChart, getCCIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { format } from 'd3-format'; + +export default function ADChart({ datas }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.AD); + + const calculateAD = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.ad; + return newItem; + }); + + const newData = [...updatedDatas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const ad = data.result.outReal; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["ad"]: ad[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + } + dispatch(getADChart(data)) + .then((res) => calculateAD(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.ad; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive]); + + const pricesDisplayFormat = format(".2f"); + + return ( + <> + + + d.ad} strokeStyle='#680A08' /> + + ) +} From 379aa5aec745dba2d5e45c4c8998f90c442c840e Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Tue, 19 Mar 2024 11:47:17 +0900 Subject: [PATCH 36/84] =?UTF-8?q?feat:=20ADOSCChart=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chart/Indicators/sub/ADOSCChart.jsx | 62 +++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 src/components/invest/chart/Indicators/sub/ADOSCChart.jsx diff --git a/src/components/invest/chart/Indicators/sub/ADOSCChart.jsx b/src/components/invest/chart/Indicators/sub/ADOSCChart.jsx new file mode 100644 index 0000000..172fa09 --- /dev/null +++ b/src/components/invest/chart/Indicators/sub/ADOSCChart.jsx @@ -0,0 +1,62 @@ +import React, { useEffect } from 'react'; +import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getADChart, getADOSCChart, getATRChart, getCCIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { format } from 'd3-format'; + +export default function ADOSCChart({ datas }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.ADOSC); + const ADOSCValue = useSelector((state) => state.indicatorValues.values.ADOSC); + + const calculateADOSC = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.adosc; + return newItem; + }); + + const newData = [...updatedDatas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const adosc = data.result.outReal; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["adosc"]: adosc[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "longPeriod": ADOSCValue[0], + "shortPeriod": ADOSCValue[1], + } + dispatch(getADOSCChart(data)) + .then((res) => calculateADOSC(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.adosc; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive]); + + const pricesDisplayFormat = format(".2f"); + + return ( + <> + + + d.adosc} strokeStyle='#680A08' /> + + ) +} From e3f2987e8d14039079738491f4e38ec0a3d3bcd8 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Tue, 19 Mar 2024 11:47:28 +0900 Subject: [PATCH 37/84] =?UTF-8?q?feat:=20ADXChart=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../invest/chart/Indicators/sub/ADXChart.jsx | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 src/components/invest/chart/Indicators/sub/ADXChart.jsx diff --git a/src/components/invest/chart/Indicators/sub/ADXChart.jsx b/src/components/invest/chart/Indicators/sub/ADXChart.jsx new file mode 100644 index 0000000..3bbb2fe --- /dev/null +++ b/src/components/invest/chart/Indicators/sub/ADXChart.jsx @@ -0,0 +1,61 @@ +import React, { useEffect } from 'react'; +import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getADChart, getADXChart, getATRChart, getCCIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { format } from 'd3-format'; + +export default function ADXChart({ datas }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.ADX); + const ADXValue = useSelector((state) => state.indicatorValues.values.ADX); + + const calculateADX = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.adx; + return newItem; + }); + + const newData = [...updatedDatas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const adx = data.result.outReal; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["adx"]: adx[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "Date": ADXValue[0], + } + dispatch(getADXChart(data)) + .then((res) => calculateADX(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.adx; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive]); + + const pricesDisplayFormat = format(".2f"); + + return ( + <> + + + d.adx} strokeStyle='#680A08' /> + + ) +} From dc5f9bc637e9bac6488e4ac005b43dd6cb594a9f Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Tue, 19 Mar 2024 11:47:40 +0900 Subject: [PATCH 38/84] =?UTF-8?q?feat:=20ADXRChart=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../invest/chart/Indicators/sub/ADXRChart.jsx | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 src/components/invest/chart/Indicators/sub/ADXRChart.jsx diff --git a/src/components/invest/chart/Indicators/sub/ADXRChart.jsx b/src/components/invest/chart/Indicators/sub/ADXRChart.jsx new file mode 100644 index 0000000..6f14f6a --- /dev/null +++ b/src/components/invest/chart/Indicators/sub/ADXRChart.jsx @@ -0,0 +1,61 @@ +import React, { useEffect } from 'react'; +import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getADChart, getADXChart, getADXRChart, getATRChart, getCCIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { format } from 'd3-format'; + +export default function ADXRChart({ datas }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.ADXR); + const ADXRValue = useSelector((state) => state.indicatorValues.values.ADXR); + + const calculateADXR = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.adxr; + return newItem; + }); + + const newData = [...updatedDatas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const adxr = data.result.outReal; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["adxr"]: adxr[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "Date": ADXRValue[0], + } + dispatch(getADXRChart(data)) + .then((res) => calculateADXR(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.adxr; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive]); + + const pricesDisplayFormat = format(".2f"); + + return ( + <> + + + d.adxr} strokeStyle='#680A08' /> + + ) +} From 0b2bc0963b611fdca81cb5d17ccb6c3e06d26da5 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Tue, 19 Mar 2024 11:47:52 +0900 Subject: [PATCH 39/84] =?UTF-8?q?feat:=20AROONChart=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chart/Indicators/sub/AROONChart.jsx | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 src/components/invest/chart/Indicators/sub/AROONChart.jsx diff --git a/src/components/invest/chart/Indicators/sub/AROONChart.jsx b/src/components/invest/chart/Indicators/sub/AROONChart.jsx new file mode 100644 index 0000000..055b538 --- /dev/null +++ b/src/components/invest/chart/Indicators/sub/AROONChart.jsx @@ -0,0 +1,61 @@ +import React, { useEffect } from 'react'; +import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getADChart, getADXChart, getADXRChart, getAROONChart, getATRChart, getCCIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { format } from 'd3-format'; + +export default function AROONChart({ datas }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.AROON); + const AROONValue = useSelector((state) => state.indicatorValues.values.AROON); + + const calculateAROON = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.aroon; + return newItem; + }); + + const newData = [...updatedDatas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const aroon = data.result.outAroonDown; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["aroon"]: aroon[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "Date": AROONValue[0], + } + dispatch(getAROONChart(data)) + .then((res) => calculateAROON(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.aroon; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive]); + + const pricesDisplayFormat = format(".2f"); + + return ( + <> + + + d.aroon} strokeStyle='#680A08' /> + + ) +} From 3d429bbf87e1d1991772ffc749cad30a307fd234 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Tue, 19 Mar 2024 11:48:01 +0900 Subject: [PATCH 40/84] =?UTF-8?q?feat:=20ATRChart=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../invest/chart/Indicators/sub/ATRChart.jsx | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 src/components/invest/chart/Indicators/sub/ATRChart.jsx diff --git a/src/components/invest/chart/Indicators/sub/ATRChart.jsx b/src/components/invest/chart/Indicators/sub/ATRChart.jsx new file mode 100644 index 0000000..61e3777 --- /dev/null +++ b/src/components/invest/chart/Indicators/sub/ATRChart.jsx @@ -0,0 +1,61 @@ +import React, { useEffect } from 'react'; +import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getADChart, getATRChart, getCCIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { format } from 'd3-format'; + +export default function ATRChart({ datas }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.ATR); + const ATRValue = useSelector((state) => state.indicatorValues.values.ATR); + + const calculateATR = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.atr; + return newItem; + }); + + const newData = [...updatedDatas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const atr = data.result.outReal; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["atr"]: atr[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "Date": ATRValue[0], + } + dispatch(getATRChart(data)) + .then((res) => calculateATR(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.atr; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive]); + + const pricesDisplayFormat = format(".2f"); + + return ( + <> + + + d.atr} strokeStyle='#680A08' /> + + ) +} From 7dc85adb768fe3bcb4b79409e56b6364f82a7e5f Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Tue, 19 Mar 2024 11:48:10 +0900 Subject: [PATCH 41/84] =?UTF-8?q?feat:=20CCIChart=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../invest/chart/Indicators/sub/CCIChart.jsx | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 src/components/invest/chart/Indicators/sub/CCIChart.jsx diff --git a/src/components/invest/chart/Indicators/sub/CCIChart.jsx b/src/components/invest/chart/Indicators/sub/CCIChart.jsx new file mode 100644 index 0000000..5d3ac92 --- /dev/null +++ b/src/components/invest/chart/Indicators/sub/CCIChart.jsx @@ -0,0 +1,61 @@ +import React, { useEffect } from 'react'; +import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getCCIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { format } from 'd3-format'; + +export default function CCIChart({ datas }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.CCI); + const CCIValue = useSelector((state) => state.indicatorValues.values.CCI); + + const calculateCCI = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.cci; + return newItem; + }); + + const newData = [...updatedDatas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const cci = data.result.outReal; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["cci"]: cci[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "Date" : CCIValue[0], + } + dispatch(getCCIChart(data)) + .then((res) => calculateCCI(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.cci; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive]); + + const pricesDisplayFormat = format(".2f"); + + return ( + <> + + + d.cci} strokeStyle='#680A08' /> + + ) +} From 17971f07f45ee5dec9e7bb4191f67d8c717a6c2a Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Tue, 19 Mar 2024 11:48:20 +0900 Subject: [PATCH 42/84] =?UTF-8?q?feat:=20DMIChart=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../invest/chart/Indicators/sub/DMIChart.jsx | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 src/components/invest/chart/Indicators/sub/DMIChart.jsx diff --git a/src/components/invest/chart/Indicators/sub/DMIChart.jsx b/src/components/invest/chart/Indicators/sub/DMIChart.jsx new file mode 100644 index 0000000..e590c44 --- /dev/null +++ b/src/components/invest/chart/Indicators/sub/DMIChart.jsx @@ -0,0 +1,61 @@ +import React, { useEffect } from 'react'; +import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getADChart, getATRChart, getCCIChart, getDXChart, getTRIXChart, getWILLRChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { format } from 'd3-format'; + +export default function DMIChart({ datas }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.DX); + const DXValue = useSelector((state) => state.indicatorValues.values.DX); + + const calculateDX = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.dx; + return newItem; + }); + + const newData = [...updatedDatas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const dx = data.result.outReal; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["dx"]: dx[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "Date": DXValue[0], + } + dispatch(getDXChart(data)) + .then((res) => calculateDX(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.dx; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive]); + + const pricesDisplayFormat = format(".2f"); + + return ( + <> + + + d.dx} strokeStyle='#680A08' /> + + ) +} From e5ad02172b1832daf3c52779e00e91325349761e Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Tue, 19 Mar 2024 11:48:34 +0900 Subject: [PATCH 43/84] =?UTF-8?q?feat:=20MFIChart=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../invest/chart/Indicators/sub/MFIChart.jsx | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 src/components/invest/chart/Indicators/sub/MFIChart.jsx diff --git a/src/components/invest/chart/Indicators/sub/MFIChart.jsx b/src/components/invest/chart/Indicators/sub/MFIChart.jsx new file mode 100644 index 0000000..8751780 --- /dev/null +++ b/src/components/invest/chart/Indicators/sub/MFIChart.jsx @@ -0,0 +1,61 @@ +import React, { useEffect } from 'react'; +import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getADChart, getATRChart, getCCIChart, getMFIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { format } from 'd3-format'; + +export default function MFIChart({ datas }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.MFI); + const MFIValue = useSelector((state) => state.indicatorValues.values.MFI); + + const calculateMFI = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.mfi; + return newItem; + }); + + const newData = [...updatedDatas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const mfi = data.result.outReal; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["mfi"]: mfi[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "Date": MFIValue[0], + } + dispatch(getMFIChart(data)) + .then((res) => calculateMFI(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.mfi; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive]); + + const pricesDisplayFormat = format(".2f"); + + return ( + <> + + + d.mfi} strokeStyle='#680A08' /> + + ) +} From 9aeaa781c67097bab463675c78e3edaff8570a04 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Tue, 19 Mar 2024 11:48:42 +0900 Subject: [PATCH 44/84] =?UTF-8?q?feat:=20MOMChart=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../invest/chart/Indicators/sub/MOMChart.jsx | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 src/components/invest/chart/Indicators/sub/MOMChart.jsx diff --git a/src/components/invest/chart/Indicators/sub/MOMChart.jsx b/src/components/invest/chart/Indicators/sub/MOMChart.jsx new file mode 100644 index 0000000..ad9d925 --- /dev/null +++ b/src/components/invest/chart/Indicators/sub/MOMChart.jsx @@ -0,0 +1,61 @@ +import React, { useEffect } from 'react'; +import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getCCIChart, getMOMChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { format } from 'd3-format'; + +export default function MOMChart({ datas }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.MOM); + const MOMValue = useSelector((state) => state.indicatorValues.values.MOM); + + const calculateMOM = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.mom; + return newItem; + }); + + const newData = [...updatedDatas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const mom = data.result.outReal; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["mom"]: mom[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "Date" : MOMValue[0], + } + dispatch(getMOMChart(data)) + .then((res) => calculateMOM(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.mom; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive]); + + const pricesDisplayFormat = format(".2f"); + + return ( + <> + + + d.mom} strokeStyle='#680A08' /> + + ) +} From 1ae9aa48c604386096f5b012b2f7fe7a619f219c Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Tue, 19 Mar 2024 11:48:52 +0900 Subject: [PATCH 45/84] =?UTF-8?q?feat:=20OBVChart=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../invest/chart/Indicators/sub/OBVChart.jsx | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 src/components/invest/chart/Indicators/sub/OBVChart.jsx diff --git a/src/components/invest/chart/Indicators/sub/OBVChart.jsx b/src/components/invest/chart/Indicators/sub/OBVChart.jsx new file mode 100644 index 0000000..8eadb44 --- /dev/null +++ b/src/components/invest/chart/Indicators/sub/OBVChart.jsx @@ -0,0 +1,59 @@ +import React, { useEffect } from 'react'; +import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getADChart, getATRChart, getCCIChart, getMFIChart, getOBVChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { format } from 'd3-format'; + +export default function OBVChart({ datas }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.OBV); + + const calculateOBV = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.obv; + return newItem; + }); + + const newData = [...updatedDatas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const obv = data.result.outReal; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["obv"]: obv[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + } + dispatch(getOBVChart(data)) + .then((res) => calculateOBV(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.obv; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive]); + + const pricesDisplayFormat = format(".2f"); + + return ( + <> + + + d.obv} strokeStyle='#680A08' /> + + ) +} From 9218607dd84fda0a32c033aa1985a973aad01b09 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Tue, 19 Mar 2024 11:49:01 +0900 Subject: [PATCH 46/84] =?UTF-8?q?feat:=20ROCChart=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../invest/chart/Indicators/sub/ROCChart.jsx | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 src/components/invest/chart/Indicators/sub/ROCChart.jsx diff --git a/src/components/invest/chart/Indicators/sub/ROCChart.jsx b/src/components/invest/chart/Indicators/sub/ROCChart.jsx new file mode 100644 index 0000000..300c97d --- /dev/null +++ b/src/components/invest/chart/Indicators/sub/ROCChart.jsx @@ -0,0 +1,61 @@ +import React, { useEffect } from 'react'; +import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getCCIChart, getMOMChart, getROCChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { format } from 'd3-format'; + +export default function ROCChart({ datas }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.ROC); + const ROCValue = useSelector((state) => state.indicatorValues.values.ROC); + + const calculateROC = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.roc; + return newItem; + }); + + const newData = [...updatedDatas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const roc = data.result.outReal; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["roc"]: roc[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "Date" : ROCValue[0], + } + dispatch(getROCChart(data)) + .then((res) => calculateROC(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.roc; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive]); + + const pricesDisplayFormat = format(".2f"); + + return ( + <> + + + d.roc} strokeStyle='#680A08' /> + + ) +} From e51a3da27fd8a58717f4ea2a2b249b67d46a2506 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Tue, 19 Mar 2024 11:49:10 +0900 Subject: [PATCH 47/84] =?UTF-8?q?feat:=20RSIChart=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../invest/chart/Indicators/sub/RSIChart.jsx | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 src/components/invest/chart/Indicators/sub/RSIChart.jsx diff --git a/src/components/invest/chart/Indicators/sub/RSIChart.jsx b/src/components/invest/chart/Indicators/sub/RSIChart.jsx new file mode 100644 index 0000000..7855486 --- /dev/null +++ b/src/components/invest/chart/Indicators/sub/RSIChart.jsx @@ -0,0 +1,61 @@ +import React, { useEffect } from 'react'; +import { BarSeries, Chart, LineSeries, MACDSeries, XAxis, YAxis } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getMACDChart, getRSIChart, getSTOCHChart, getSTOCHFChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { format } from 'd3-format'; + +export default function RSIChart({ datas }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.RSI); + const RSIValue = useSelector((state) => state.indicatorValues.values.RSI); + + const calculateRSI = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.rsi; + return newItem; + }); + + const newData = [...updatedDatas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const rsi = data.result.outReal; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["rsi"]: rsi[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "Date" : RSIValue[0], + } + dispatch(getRSIChart(data)) + .then((res) => calculateRSI(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.rsi; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive]); + + const pricesDisplayFormat = format(".2f"); + + return ( + <> + + + d.rsi} strokeStyle='#680A08' /> + + ) +} From 13886001d343f53a4e2cd73c88089248ccccf617 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Tue, 19 Mar 2024 11:49:19 +0900 Subject: [PATCH 48/84] =?UTF-8?q?feat:=20STOCHChart=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../invest/chart/Indicators/sub/STOCH.jsx | 68 +++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 src/components/invest/chart/Indicators/sub/STOCH.jsx diff --git a/src/components/invest/chart/Indicators/sub/STOCH.jsx b/src/components/invest/chart/Indicators/sub/STOCH.jsx new file mode 100644 index 0000000..7ad6266 --- /dev/null +++ b/src/components/invest/chart/Indicators/sub/STOCH.jsx @@ -0,0 +1,68 @@ +import React, { useEffect } from 'react'; +import { BarSeries, Chart, LineSeries, MACDSeries, XAxis, YAxis } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getMACDChart, getSTOCHChart, getSTOCHFChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { format } from 'd3-format'; + +export default function STOCHChart({ datas }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.STOCH); + const STOCHValue = useSelector((state) => state.indicatorValues.values.STOCH); + + const calculateSTOCH = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.outSlowK; + delete newItem.outSlowD; + return newItem; + }); + + const newData = [...updatedDatas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const outSlowK = data.result.outSlowK; + const outSlowD = data.result.outSlowD; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["outSlowK"]: outSlowK[i], // 새로운 속성 추가 + ["outSlowD"]: outSlowD[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "Date" : STOCHValue[0], + "period_K" : STOCHValue[1], + "period_D" : STOCHValue[2] + } + dispatch(getSTOCHChart(data)) + .then((res) => calculateSTOCH(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.outSlowK; + delete newItem.outSlowD; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive]); + + const pricesDisplayFormat = format(".2f"); + + return ( + <> + + + d.outSlowK} strokeStyle='#680A08' /> + d.outSlowD} strokeStyle='#A8693D' /> + + ) +} From 287b834b26d5bf3d33040fecc71f86fbf2b7e723 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Tue, 19 Mar 2024 11:49:31 +0900 Subject: [PATCH 49/84] =?UTF-8?q?feat:=20STOCHFastChart=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../invest/chart/Indicators/sub/STOCHFast.jsx | 67 +++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 src/components/invest/chart/Indicators/sub/STOCHFast.jsx diff --git a/src/components/invest/chart/Indicators/sub/STOCHFast.jsx b/src/components/invest/chart/Indicators/sub/STOCHFast.jsx new file mode 100644 index 0000000..81cfeaa --- /dev/null +++ b/src/components/invest/chart/Indicators/sub/STOCHFast.jsx @@ -0,0 +1,67 @@ +import React, { useEffect } from 'react'; +import { BarSeries, Chart, LineSeries, MACDSeries, XAxis, YAxis } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getMACDChart, getSTOCHFChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { format } from 'd3-format'; + +export default function STOCHFChart({ datas }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.STOCHF); + const STOCHFValue = useSelector((state) => state.indicatorValues.values.STOCHF); + + const calculateSTOCHF = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.outFastK; + delete newItem.outFastD; + return newItem; + }); + + const newData = [...updatedDatas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const outFastK = data.result.outFastK; + const outFastD = data.result.outFastD; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["outFastK"]: outFastK[i], // 새로운 속성 추가 + ["outFastD"]: outFastD[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "period_K" : STOCHFValue[0], + "period_D" : STOCHFValue[1] + } + dispatch(getSTOCHFChart(data)) + .then((res) => calculateSTOCHF(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.outFastK; + delete newItem.outFastD; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive]); + + const pricesDisplayFormat = format(".2f"); + + return ( + <> + + + d.outFastK} strokeStyle='#680A08' /> + d.outFastD} strokeStyle='#A8693D' /> + + ) +} From 056f87e46e3a6e353ce6f1d1c049080463a7f73c Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Tue, 19 Mar 2024 11:49:42 +0900 Subject: [PATCH 50/84] =?UTF-8?q?feat:=20TRIXChart=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../invest/chart/Indicators/sub/TRIXChart.jsx | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 src/components/invest/chart/Indicators/sub/TRIXChart.jsx diff --git a/src/components/invest/chart/Indicators/sub/TRIXChart.jsx b/src/components/invest/chart/Indicators/sub/TRIXChart.jsx new file mode 100644 index 0000000..4c74b0e --- /dev/null +++ b/src/components/invest/chart/Indicators/sub/TRIXChart.jsx @@ -0,0 +1,61 @@ +import React, { useEffect } from 'react'; +import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getADChart, getATRChart, getCCIChart, getTRIXChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { format } from 'd3-format'; + +export default function TRIXChart({ datas }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.TRIX); + const TRIXValue = useSelector((state) => state.indicatorValues.values.TRIX); + + const calculateTRIX = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.trix; + return newItem; + }); + + const newData = [...updatedDatas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const trix = data.result.outReal; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["trix"]: trix[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "Date": TRIXValue[0], + } + dispatch(getTRIXChart(data)) + .then((res) => calculateTRIX(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.trix; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive]); + + const pricesDisplayFormat = format(".2f"); + + return ( + <> + + + d.trix} strokeStyle='#680A08' /> + + ) +} From fd2b12d6ef5596bb95394a12dcec77e7026f1058 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Tue, 19 Mar 2024 11:49:53 +0900 Subject: [PATCH 51/84] =?UTF-8?q?feat:=20WILLRChart=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chart/Indicators/sub/WILLRChart.jsx | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 src/components/invest/chart/Indicators/sub/WILLRChart.jsx diff --git a/src/components/invest/chart/Indicators/sub/WILLRChart.jsx b/src/components/invest/chart/Indicators/sub/WILLRChart.jsx new file mode 100644 index 0000000..a9abb43 --- /dev/null +++ b/src/components/invest/chart/Indicators/sub/WILLRChart.jsx @@ -0,0 +1,61 @@ +import React, { useEffect } from 'react'; +import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getADChart, getATRChart, getCCIChart, getTRIXChart, getWILLRChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { format } from 'd3-format'; + +export default function WILLRChart({ datas }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.WILLR); + const WILLRValue = useSelector((state) => state.indicatorValues.values.WILLR); + + const calculateWILLR = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.willr; + return newItem; + }); + + const newData = [...updatedDatas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const willr = data.result.outReal; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["willr"]: willr[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "Date": WILLRValue[0], + } + dispatch(getWILLRChart(data)) + .then((res) => calculateWILLR(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.willr; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive]); + + const pricesDisplayFormat = format(".2f"); + + return ( + <> + + + d.willr} strokeStyle='#680A08' /> + + ) +} From 89876a9dac385e8fbdd016ef751a0c5fe55af2da Mon Sep 17 00:00:00 2001 From: eunxoo Date: Tue, 19 Mar 2024 15:44:58 +0900 Subject: [PATCH 52/84] =?UTF-8?q?feat:=20=EC=82=AC=EC=A7=84=20=EB=B0=8F=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icon/Comment.svg | 4 ++++ public/icon/FilledHeart.svg | 3 +++ public/icon/Heart.svg | 3 +++ public/icon/picture.svg | 7 +++++++ public/icon/pictureGray.svg | 7 +++++++ public/icon/test.png | Bin 0 -> 32154 bytes public/icon/user.svg | 5 +++++ public/icon/vote.svg | 5 +++++ 8 files changed, 34 insertions(+) create mode 100644 public/icon/Comment.svg create mode 100644 public/icon/FilledHeart.svg create mode 100644 public/icon/Heart.svg create mode 100644 public/icon/picture.svg create mode 100644 public/icon/pictureGray.svg create mode 100644 public/icon/test.png create mode 100644 public/icon/user.svg create mode 100644 public/icon/vote.svg diff --git a/public/icon/Comment.svg b/public/icon/Comment.svg new file mode 100644 index 0000000..a4f7d0f --- /dev/null +++ b/public/icon/Comment.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/icon/FilledHeart.svg b/public/icon/FilledHeart.svg new file mode 100644 index 0000000..5bda550 --- /dev/null +++ b/public/icon/FilledHeart.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icon/Heart.svg b/public/icon/Heart.svg new file mode 100644 index 0000000..469fdf7 --- /dev/null +++ b/public/icon/Heart.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icon/picture.svg b/public/icon/picture.svg new file mode 100644 index 0000000..bc32e7f --- /dev/null +++ b/public/icon/picture.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/icon/pictureGray.svg b/public/icon/pictureGray.svg new file mode 100644 index 0000000..5b09103 --- /dev/null +++ b/public/icon/pictureGray.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/icon/test.png b/public/icon/test.png new file mode 100644 index 0000000000000000000000000000000000000000..2bd0d7f54e2110cb604a3a573c19f1abc0731625 GIT binary patch literal 32154 zcmY(KWl)<3vwHS9XQR|r{hx@yWx!_-WXA3KR+2fA3RhyZf=yW`JDSeaz%PAvRy9LJ@Sl}vh4j2vhAydF0QW<0-l$r{mxx| zlDDYduBd!W9_P}%-)ftn34RV2tpQK1K5vh;Z!11v8Ok{cNWdE;z^C{1 zu6F#wqkY`S+oN-J-5Xl=w)}LR-n-^=ot$SF&%Z6wy6Nw8F`MA;cHt2K@z8tfJrQE6 zL4JF^c-wedYVFa$A=tu=r;Dk zyR6^)gLlj9m!`EP)Vh4gLqKMbugS|lKMJmETlS{Cbx<&N8+UoUaNhB3-bGn(A7{B- zJZ8C6ecd#3-1r+i=_CI%T>mIavM6!chwWbnNhuXAf&4@kciw6{8Sb2hh@IHS(}hez zV&A0v92V}5?FI5mKZcK_o(MeOmP&9u-abqRyxKt$1S&S2)_h`b;_cCTpZB0DKCNz^8-4q26~&Yr z)iX9o`MKQlw|N6U?|yL3mMPm=`oe44$Jk!R?^rAExckEI;>59OR<2v(K14$Q>}~Vq z+{0&t+*O5!-STkgb(`w7z~gF&7?S&XTMF?%Y4xwnh7@4?m4V2m9w%(XwQ_M?Cx4V5dpEkPp;@|EQ-k4v8B_n(87i;}>R^o$a((%p@S*jO}qo>9x;mYR)>;&(HBBfqqpR?xfn`wz&NQ}vIA*5|YtmfvE#N%v& zw>*Wr_64-?kKOPzN9&p=)bMXr44Y=rmbUPjJkM4;5BJemM@jUQa z|8HU)8~NQWc0a9O_*ct0Z%yz`pBlL@>Xb}M_ZoSuy92~YJeuR-9RGNAD7@soJ>-r1 zYf-5({ z=$y8ONEi;?zKM#zwT9vvD+83E4xBIo+zNLBHt!BhAB#69Z%J!g(i zY|FH=NLqpJ{qQc`cT1mZQMC0%KKfqxY_jE?kg~jk%O$}~!=+&qmHcgQ;n?%r`nx-8 z_fNszhsh0}jho!L{i_!niKpLtPdz6eXm96v!tv(p;e`tGb*n!u;(N92CMl2I1s1pt zliJ)`P4a04)+lO33O5A>x8Kew`>Z-Ne&p$51|ZFP9pvcky6=sphN&2IK%ozfaveaf5!F4P$4HqJxzqVWPsEEER ziMAAgwm6W}V!E@b&!f5brswVDf|&NDv-hdfU*e0%!56BF<6p_Sx5dC0PD9s8{yo3! zC+Pg|iLKw1jq-+cEO(Fb?3PoJsBH|?kBIK`?De?9=KNGI>FShZ;_hFMVW(ATC^RCM z!2?s=qLN;3xc#bw&?A3#s0UoVm)Va^{I}NaQNjWbeJ|D!hbasg?H}WLN~pkpVvKJK zfmA!(7@mVl);RbV4n5T0<;h)SkC1l~rWQF@Y@oxEN)b4Gp~#e@yaC3J(M)Eq5@9@ibUGDj} zSxVrv>z^J%;)yM`{T}D@I0Nu!(z|vUs<){|K#~!j+A#7 zkv3pRxB3vl$PaV9u@u)kGBoI<8flXcAutT5UTdv?wQtLxCIDvM#LFdJhRcl_{#^n} zYLU7GrYQ%)SaK{gW|!=2pVyJ5oKz@JRLGBqo3`?3r6tj7X4J{Oq z^rr94t8_0}ZR~*AJZ20ge4h#& zL0VhCg*~i zH{!YJ`S&;qX$N)fX@k`I+sNe3lJ!e0NK2-~BnBBg5SC*7mFLPepM5JZn20D97%Z!5# zMpIGVnF)i&hHeqW0rY(5CMHD1SzZ$6Z4}}J^yNQ7lzz9fdz~AfpDw8>=GAy03rLQo z0iN$Jd=EsFH>r93YT_nsXEBEbQN&tUW;8C(r3)40^oh-Ag9SoTRn+@wg?ox7K?yea z29oR>nf^E(H_x{jHy!)mNpz&sBjpd1RO#4qN1p6_@)R-NU0e6eeZU2jKc&D9I7=#> zm*m_v`rN#RPoBlY!3Ta_rj$+_{_)rQ<;27!-o8DmpPo?kTwD<|y%5 zTYV)4>G-0b@c7F$)ecKY%Dp{E405=(8D`1T!kTozRa6EmI$t7qddV5LaA*3yLha5j zzEGtyRNFvqjfDt`Z@+%hdlbG)$?02Ue21d62~ZdlNw-|CxM)w$rY+0j_cc?a9 zn748JLon69_#SRJ$sQAZQey){v6z%*?lE(}!Lv_{v`W{0o~eJQ-Zavt#L*l!%m)Q| z4s%5zAenHw2fE3nUw~|d!$sAfSE80<$qQJPS3)<;KG0EJ7h-!#@H7YeMtFUe?#hkA za>ax&IPG@_iSIbteWpJp=LJX75XVY~?=W-u5Qqwn$Q*9+(Rp4R+kAJm5It6VyD`L| zx+oO88_~*pTmaN6>)r07Bp(W&*{b<`ddmn$w`Y|sh>UB*kq-*{`KNGK-@vR-Gn9u| zMgaw>fBg4Cil|W-)a=C1uvgFvTYqI5dW1vqz;j=Xaw9tBN)i3rPvubyBX`+@*$Qp7 zn{E)mquxV610o&+r5`?ceoTqAu{KQHiR9KNJ*7-xu+o|qi-$iWWV=}ND9!oCO2aLe zfn(D2&S}gCd6tH0Oz-JSz)o=C6-5k_s7I)eR|yfHdRDGrA=Pjhj!vxnnM`{JBkc_G zR?h|nEDy+<-DwZ;OSNNj08Y+j`d=5PY3oy3YB_E?Es=(M_;ViOle}R5kxU&=<$;h>bRT#J*nT_NQ2a zrsjz^Qq!4YV<#*K*+@%k?RJ8nxgXcHo*qOn;HGztS900WjDi<`4#QwicTy8y3$nV2 zph<6lQ5A3En-i{nl57FIYrVgc&K{XusGPTK`ajKC>&AL-l+=AZ;dK2ik6gvvKY@mc zW5?Dn*S?tYTj(Hreif=ekV1_y$TXIeZBW~AB2}r7#z3?ic9qrP;n?P>srCZIhV1f9 zXGL@i(n3{DBvtIDXgaH8zK?NCfW)OSew>40(R6!ZT`u|=8wIdrRMc4pMyXpcb@q;s zSYDs*G?gazl(QY#6N>0qIP=RUiLooc&UaN!FKD z`4RjX-8*S^h>O^A!j5ISAnq6$Gu0-9az)<6Q*byBQUdyu;ZbmFuv!lzlM&*{)}qR3E5*`J9y2jxw)2O-G{uvepS9S zU=7>MlMxubAd7YUborX7$nFd0SiJeN9;{jv_Ik%lc$D&i;di7;P{Fim; zt9f}BB#T_c=-u%0Am7KQEcDslox+$yYt*91uTureBv=N>Wv^<(5b%>d`i2i>o#>0ef+$DHCc7ARc*OFwIE}2C{p;N;HemRbg$8eTX-KpTj=iM`%rL%~fTY$}4s|G~hzaQ$!My z(oJd^g_V-7E7^$djSA$bvRHs!j6|v_rsFm=wSjIducJ3#y|?78q5t_1F!rj8ZLAqmlJGI9AVd(~op3 z$Ir=5V}DjHD8ScA7xgI zU4SHwMj}yxem_JAmqLx@*h9mu;_j2n(taGxK-PVr9(}!|D}O3^1W5*lC=dz zHTUCKTJW6@0ZWyX(9JG;+qRdRj$mn>7de;D?{TGIebmsBajBJ!O4R62#vLm~H|&it zltLDP@{BA_+L|>%huZL42J$rnV5Q9^V@uio&!hf*9)_O-m)g;U^Wf zv25?dVJaG1kvi!j=gfL-Ud0ly$d=K42QXhhm7p(*T3AEyt()G=wQ;A9gLQv zuB4<_Pcm%Bvp+&-LOsr*y^CeZnyfZSX=w;bKkwx%2V5)0RlXI(Vo zl>mDYs9t2PgP&{PUS+zMdebtgoE4%aEZZr|l0k+6zkL$;4UqI0AWqnZ51onR7zD;T z=xiw;`t5Fh!1e3lvfg%H43QgQ7RZdL6i5`Pa*vdV=cwzR@fhS&cO7CNK7ck+K_wWr z5I>&0^^q&A_L7ns0r7r?njnhZ*PL=#3`d%8fjE@0c!;m?!}l;w+`2HPgIu4lG~*}% za*HN3vt@ew!U8h#Jc`aeD?08BM!lVos}U-bp3V_UpA-PcegS(1ioT?og*(h|W9L4^ zZYW@A7F5PDe-E*ZZ>$W(pC%j4@qauj0d~D=pLJq_Cy({yR2)sqtVTYR>-93?MGZFb zlnM!_-P;@AWWDyoqm6e>abuejuzx%_g2kRNOsE)*j1V+slRo31QAHDooHE4wQyz49 znx<#k%(!R``|+(22hc`96JHU)Kd!!|Dd8AEq}lv_qXDwtPn>K1QZ=arHucw3s6iL)^FHZg4}>*60pLr=PU=)PlOIwQ*qk-L zKAvDVwSMy-Vl&o2v%T(s--it62>x4f+Rcp#hrb_I6t0SjZ(3F-7B@v@*jH|MwNx$b z(0`yPWvx5m3fH`L9cm*SW;$xDIi8rTM$Uv0g7zXj`X{rlD9(~aQE?M<=WZ81m+1rJ z9p>#46=1Sy66Dmbl^s4sfqn^zci9Ts>-5%Sif;dH7gcpvts4Y6`o=h`E&Kx;KQTC< z4PSyXDjZ(@Xkw<=J;4yQhx*%!M8uLhinBh$v=g*At1PDBZN6;=@YLh9(7!5^7poAg z)=7^liO_eqRWl?q{>aYwE1vdb2Dq`DMS@*_+<-15pRNG?hnd5{nU{Y`>PJ-2%7p2V zetlS5)3Y-0b{+7_J`i@nd}<=MzmY8TthmV;$#I|DPx3ebRMdT_4fh$M?D|maFKD2* zHp18T&9B>*Cb!Zb(()whtm6*aV>1i2W8R9^-%g(lQA9@dMXNt@zT? zre&G`#g})R?wHei83$M0Yk7h`Gn;q0`q%k+qsm}8uw@)*+hyd-Va=!B1>s=dFn^kK zBVHB89sfiNk9G(7PY(KVEEB&&x89GIqYE1zga9@Kyh6Vz}V~5wdkS-fZA^BG&h~`j%zaHYJ)SSfiA)oRr>f~NK)B!v*wcxht z-!^$hD;DWS-&iiT+EZJ~U6YhJs~Pjib0=f@lBKPp_@+f0C7he5zjmJKjuF{f2uZ>p zkLGwEmzPk86_L3%6oT!KyuODk(7VO&=$ZJrkH!}|1pyNqCLu;n{|+s@3h@Ms>rkTk zw0td!7m&;VNuLDt8ham=l=$uHV}3AB_K*y)Y5Qg?`8Eo$pG^@j&2zv?bJB6gV}X;Z z5GscsFr||io;)#mdj#gPvN;l-8S!DzcPQt6PSug_oxvRoB(;YwZAOZLPOyXj$eEj@ z*nWPpt7!Qb2*zrbKhKt*e)&|HWj{O5w{^<)3f$&(& zzwf)BmNL$YubNkn_r3(c&u~zLwa(DTqlvu*EP#C8$%TS za+vYWEvr8MygAy86Idz3(0x$7i)vXQa{T>8JCyn}m)EHB||QVooy{wgQa7>XBc=+u4Z9W{i#lhm<6^&<7T~-wKJD;KqZjI`z`pB+Vql+T*QAGAT%X*^cocv1!J57l60SM?ado zR^vw8F7FGgxD`jttFnPDc00psjpGLP`GDj20FJa`5*RH)C)%>7BqDN zT&zrl&^#ErNVCgWB$$g~SB!Dga?I{l0f_(2B-Q9AEX_;*-C$h&(ab$Efb1?^e*%&} zLETxf>vu$Zds#5Jdz9c|+w6Fn5k!$RKYbpv#Zr##y9Hl;pqccMLGVo7)qLBu>exw# zABQ~TNA)1Sft&GjUN$S!5X|33^sYvM9d;ZVC5v2DnXKK?Omx9vcp%+~oh@(0;*f*) zm*M34vDGSEE!wD~g3YWH23|?(ltk4$`rN8{R9M845I?;GG#h>n`~ywVNiUw!+#+`D zf-M8}eD+&)PwAx48iSz~F`VkuPcDAbJ7UajC`Y8sQ}*HaDC|yjkyuh_>8L>fTwU%+ zoSKo#7z8&pI$mqEbJ!2YiB2qHtlNW4GR?w(mq@j(UHk z%=aj43p0zDG!lxa(@HaQ$F)2QBJra_Vc-f$iYu(&(7U%Ze1CG%+?Ov9u$MD|ss89P z9fqVy{H+}SQ!=8Z78}~xI32NS_g>m(rBzRHr9k2p1YTFn3tEJVggdT1DdUL>!CQ&j@;<7zXQGDK<`ukpH6UN??kL&y3cxNq`?JX|OGNff`T_D-Qi;c*yHNT%R{V$wt#$upTarkKT& zQGh5?rNzOy!!PzgZv;=fCOLx*&>d`WtYM47rT_ArJTkq|3VT$)eQTfPlPPqAg6 zdPyZ#p<9_owO~!?UW13(DUW`&wi3M-u(mV0QCn%_?a)B0>9zhA-%l z56hw?mE;;UHD)~4OIi~z_2v_Ibz`e2Az{OI=A($rfY_67cUsn45M2Z4)VNAe5eluZwWHZ>X?aQ5Td7G_ydQ?oI)U5<%{8gsb9N< zjlTs(cn%TjrL@m;TQ;HpsUm(<=e#>MzGf`k5+R^6pLzh5!1`HtEryz9b7zB;F^$Rm zv`+|5u#emQfKmqr^!?m6WwTU{VS%Gt4+nWB0t^vdGkntN?;Ps-e!7MFyu)wCm^a~< zdN;kx?UoA0%(PaJnUG-m5fUUM%yt$!!Cp=H6n|;Tu6p?CT*;;WFAK@8Me~n%^h)am z!_B%ElP(Fk-_H^;JxDPzyw+xm=$}w%xwu04h`iLxYH+8+2@>u2j5l;%KCLd~{%JdE zM0x%&9&S*~4$k_5iIuCGe2C$DMqzyGyZv}>GL0$#k@hx`lhSq)H0h&u>H3{lWwjhD zU@m!BO0vM8U1W0H-&0>!9)4hkNH^n+^$TKOxZ`&N2e%R}Wf_m0NjK&#qHKO8Es>l< z_88w|*MHvhap2;qVu+2;X|lXj-%t0>m3W}6uVs{zf671LN} zRG1Qz&4ju|HYU_2Le;8H_2?>ggf)8li^Hx@UhgEUULM6uf`qGHRytt{;$70<8yALy zZuCPZ53X`2xvd=PTAsbgW~|v)A2*56$cP0z2r7EGTYq7|_&Go=ZDb6hqNrW39X@VS>pT@J}Q@@+{TS3R#^vVMZ= zB14Cmn;oJ__}$ZIJ`{BdeH(Ql(IJoUc5*Q{<5@)8fl6=}wpb=Sd$P)#I>jnJ}2@VejgA=B|E8M~4O4_B!%C_|VRVE?y7J zVb^?NOHbApkK~oDhZRWFXOBEnEYHI$G8Gx&mhlT?hs*5qd+4uFPHQZAY(M6$&ya-L zmsYeq7zSpd(8C7aIGGmz_K-qR=tunh;KG>_98#pO%3%yCc3O;s;Zqu!I+mA_O8Ww> zHhuk2ill(BFYBg}QD+dtaosw~vK*QucKvxwB@o97Nl&JVR1W|Ij%6CAyej2%3g4w% zD9wg^nB*AsEs!kV+?z;oG|lGy5cO3y73pjf!$!%Ao-S@@mpaLKyiJ^aRoH8`mA63l z6CYB7VOabkL_;d1{{5+UEZH(W6K@09mO1XTr4sIWw6>|`oF9p<^qo;S2t)Kb%sYVe z6YXMhM`VMU=ZLUJA$i>{w~W0#mZo)PLKFtwEv(RthkKqf><=e9uXji=jHmBdBj&ev;Z0C8&!x#%Y{B5Kbh8?||TI*}YRe#C7KP__6 z#p@)$bep``{}_Qmi~b_hs-U8}NiDvYar|7$4{lD)AvScDVkr;VqW6=Jzs-K@J^JXx zdM!r;hP6oG*-UEzVVN(;bBOHjY-k=QPBO2tmgMjRfpBv?lD}0|W98Uf`c2!O2H7j- zPJ3G7*d9aB0n@)5l;=^C{5HU{2||uFxnULgAszBTb(#(l!Bnk3Du;rup-i(0+zR^zzN` zY5x{_H5=b@dg@Ui@ob{~3uU;VU&BdFC(%w0h5`_q)tNg9yqYLaX`oPE-9nEYhpQlv z2(n@1+XXq$2u$Br=yg{ZYMseX^=(H`8RMz8;u>i`mu{#c4*b#9%hp6_lpX51HEVyq( zW;d$Qk|nlHjSr#tS<^_o933UeU9DXG%NVBy0yrbJ)<1W5u43T^2FJiN#VDVikmAQF z{Yf0Jc$e-)G|WKRHKzs>cfECft^MzrzbIk8G?=+@Gex`m{=6M8RmwN-3vLPM7+Ent zNJz)Lj(mYD(CmmJr=Bz$ZeFXW#qXgb^(U|`nFdjH3)`(rVQvcQYM+oGhLh%y0b=ky z3O84z+=K^^4VuGf;8T!Ff`97cyYoA5#$jwCfZ*^n^S7QSE#_xK1qdkAg3{$@GoQ>9 zaSfxxzZ*-$*u?$GK^PIkM@Lo)1dwfb-ZuCAwn{fr>P0JZ3z{vi*~s-dHxQM25i(JK zzwbo2s9lE#OD8(LBhGHK#BUK3s{yn7qsIOh0%AeK(74I#H6BulBnyTtlge0|tBJ8} zXmJxDe0-Ubq}>fSCk!Q#Y#` zbtfC8ei^2|jvYoLjc#uYgRz+UP?Ah)-;CV0#-pAPe|N%%^|klq@0?lHCmNa?4%3?0 zR6=Uz(9r(vQB=Om(=4L6w@%}>)n;y}E-55bQc>}NCR-R{vp667;bt?Ft%@@Su0;}< zbcY^)SMBKOIWI43D9l~8JHW(?$J@&pu#8Q@$P4sGUIjoRS?Bi;*G%*qu`m~>Q8otd zn3XPe$YNWB-4umrKT>U41=2ibP$^ak9ZHzVYf(i44mIDXMZ)q)#i3*UJg}zxX{}v) zOCibdW^jTksmX;H7O6%SI0MYr4$cQdBwAlKdQVL939_apg&qDuhv zDCb4TDO|IP=515*aA5JwtJ%tDi5iz|ZF1ao4a`teB5{66Ayd5P)?h8(9Z;@9_it$N z45_!0vT0}u6^jU?$D4;Q+BtIy@F8vbmvT|$&c7fb<&iR}btrmI(7j6vYeh3b!Qwq! zzPgOSAbZv3p}&%X{fE}WKZ|dNhqnrhK37-=O3kujx4XcbR@z2!(!^kQvm6e*5xH0t zi6--;qVZU!ckNQ3VF`8ecg|L~H#hs~I^QeG@G|M6S&*A3vvDh=Nh4wjuSk=P64J9n zaltGcZHSHDo9v!gmT`d|GWwz>d{o?^+Sh%=-JtqPy0go)8_qsw(hs@)@db8AV>hrX zEFElLyc6uUYN`_TvmJZRooZ+6uqc6ZHf|?gq~>sPFsE(RN%+t)xnnLg93-3l3Hdud zt{lC}ot+SVeM*Yza*#NqW?~6eZ8gydi&n4{>Er!prs1_{pCQe^_ncBR3J9_CLhMx_ z5`<|$n@k=*$0mtyy#2)&SHF))80@m8302bb$d8+A;o{MC*yaWF`k9PtcRp(|g8LWh z z$rI5^vi#nmO2z;#>GSSNn{UoSU;<<`=;98 z%>nOuJS=Ped2|XB?~@LpJ{&F2ygu%41-xOY{2Fp+t9DxE%8zQJuP-y6$Rsat(al^pcvUvSbL{1?i>c>CD3_t#o`?y4)p#x3=P zUhj95Sy{>*>Fule5UBZoqu^Ah2=X$OjqLWscaGGJEkw=Yz=76f^*?_q=0qX>a`S7K z?5qZR@(ExkBo|MfG)2rvMHJn@Eyqf=oMdV^{0>5mO--0BWK~&JtZlvqR++VaA9O=M zmx?sO=;E4aDUXyJ=w&y3k+~jI&oC;rBxERRdap!IWmQODNd0|a?nQA=PCQiNuKMY7^(NgKc<;8B591gZI=y=5k#_<&bWc5@VmpZ$A+%b(1(WXhfQp5j70 zK`OkrR&E7?q&LGUSIOujj04$5RA{oQf{Kni^SZuT;?fifncyIOCWo)mNrtEf)eYBC zp)+^%MOfc3;cBDL|3wmk>w|9jRG9D2ViXp>*~2%0DAr-LeUz8nxDThHd0_uOC3Vg) zY3Gl7z8%p`*Skf)?miC0loJD7R+|FfaMtY4k~;w!OsatEnk3CBjk!^Nu?UC@)nXrj z?0J(Px57p)k^o1@LDy2DN{n0lRtR3jL@v)=iYm{!A9aWt`9zCYy#Cj=?Ql)W z4pp&V2&D8U;N(+~^3I@Wq5YiHZn6g9j=aBaJNv4naU5wwH~~YW$H$99C#q|ObDd4< z)|#j`{A7zM*^v-hlBD(Fh(!t=B)BR(-8NUR0Cw*FImY5D&rpRjR2()jrRN1m>UYKu6Z{c7^3gr-(&-G)JCkrj_58lQu&n}rxtjSm=&eKfo+|G^ML}8S%1DNaF3f(#$D5xYGh{Cx>trTP=a9a zp(yk{k2nTB?0xA6{h zYMO??8K#$k84dH;waX4ey1d@b_N!00 z(%PZ>^$$mn3Uiy%s#Rsb)OJY2+L%SqIN6S%{hX*dJN(!??pkGbD)h&9aDy)W|55)i7#Pek z-?K3hP{Ee*4bTZHjeB^S8FenZ7h<{h#AB-k%SY`NHX*?l-ZIN7u^rDa{D2Qfy$C;$ zHB(2>aNqFF@ZYtnH}w*Gj9aYIbR{N{oBEgD|FmytFik)h7D#QBES)dwOR&g);V}y! zPCbwm&Xr+~6a`@qgVfV{C%dV;LAcYTyb9t_VrOvC478+47J9=cggO&^(Ztl`k9q-j zdaf0rx%&EpwB_D?q&dONDv5_C*9-^>s=fhn@^8`aLB!XVU*o!h9_p-br4RzM zWfxs`LR7wXT@9DqSD+|>x$)dNbBK3Fen~siqTSMW4}W*-i9R%PPN=FEl9*r-7|^Ux zRzwjze*Tw}ugp=NVa6XjP5bMDGe~a|3icE%{aXTy)6e-2-rr>orFWiY`rNu^=+YYOSE308NlW>sZVeItJPP@hh z=&XOo0F@ptuXMUj7@`k_f<2+J^vHQ>#BGIqlEfc3YefS6$2M+`R5Y{_>mqzZ?Bbza zh_Wc2ANrHJDE%USP3+K#$c8h6G69NU5II^*@*O(RM5}sSvgZHmjQf`dik<;{aD|sM&=VqE(s7zwtf9bha<)R90AHQ3(Z_k^mO{^@Uhim z-6?O(9%mr>J-Gv+zTgPhsSH|)DF$Vpg9A}sfY&8Esa(Be)U^xdK|`*=GL7KwTw_>7 zbX9kPeHQZQ8KOP0BjNCSJInZ%SM9zS9a5BF{^d|ECX6!5^h9<<{K^N!G zs)0|QYLHPxmJoe9!eJI=Oo^=8K0NgHF#1d}RuIB)%ZGMn-LAKaw{6`%sg*QUSY3|wcM|#ax zmM}ak_2SbN;5f(US|fGGoT(nTppnpT;f}1O7wqKk{R5LFe~h;HW+kd`3T;GS zX#=cj@Wj{w6Qf1RQGpG-8Y*SG#*O(UY$L_LSOEF~EBhhZ3sBT#5yLc6nM|dMc-1l1 ztY7uiL1hJ*^5|*Y6`ZgF&xgQPKdUnP4Wkv#?IR`s71+YG4v7Wwv~_NEBDG(fd|uwE zr(+nw$+s6i7miP?cbyh%ZAM78u$1}h(SF7(oIFd5jMR4V)Z5GObmyYNsdLcMck_US zsMOL78=~S}4t2jvYCpiUf-0Z0d0Y2?)@hj0D*4*_07F2xTyr2M9g{F}*^(dukcjZ0 z7Yb~9Vo?lNPurW3ABO+j=iRgGaW1aGd8CGYAwR0b#p`dc4+rVT6hBRSw}R2f?zgEy zrNWthnBj$XyBOnvyfPR7NYrCuERXPev?i>|$htLdrb0T|q?-n7{<6)zV*5r)eU_9o z)osLM^+5(2yZHu2S-kR3sL}7e2= zp;msdqw%I}P$ZQD8UYt{*0WVAh0pz%--jM##j`0chTib5|H?uXDsr_0Ax0a$W&PdC zga=YP4JdK&ERpaPD1-BFN`APqN8i91fbO$B4oL>eFj3fh)HVw9EAxgw9(I*YACVe$ zszz^wUPQ_+*y0UPB%jjH$2RL1rkXU0I0FCStG8}YK%P%+PDMz9A%g)waiXj8!wigEvg;>aF z)YCplDXJjrb}ois9ig5aIyq7>WPt))sJx%nU8zkaghkdCY}(&YsZQWD3AN|!oDj$u~W0Ro`$lLP5xpUe*)G{&4@Vx+JtX}b1@c;Y_vm1I##+LStuh2dU1y081j$Ws&ybl z0^_nY&D$M4EK?=N31@B|oDn z!u6|UH-dM~B_=C$D#z{$Keaoz+FYOsA%Y3*KiK4_0zu&gX z^*0o8=tnX?QX&0mHC>1Yr_tb*?!_AVZ)GrT)ZJc z&K>et+w`n&V|8KLZ#qs2JaXP0va>G7DHPDlyi-#gW-W(Fsw9j(L6JcvUf}FdJ-`i} zbHiRD?Tfx4Dy$j?%7rTREAz4>n5s&=-124|s|X{xRKLGXNHvlEHEXl4Gcg+tLoK^p zh=ape^5;o+gr)%M30GqP$CM9wbS;uFH!Gv!Cz@EQR#^9KugS%H){wi90kSL$Kz%*l z+64Xswd`cJl_k+zv-R^>hh2KjpF4ATg>XcfgTC(uP(6iGB-()#z)4r^cE(Z#O(|2L z>)+ot#B^DuV4TtsF!?%NG_E_pOm8B-H@B#`@aSVuMvu!|vZ`=->%;!{^ru7s!m;qw z4$Y%cs0u+PqcEh}Y6cRQs^)*4yq7y1b%>NOtAF*Tft$D&T25e$iSksJ%YlMYSC|0B z>5D{!ICU~uLYAf*lkLPtZnHn>SqoPDpUxt_lIBwnn0r5ro8+#dGfIBm)(IKhZGk1z zZRquD;&2k4;&(EGkz=r4Zd@5(3e>;a_uf~*@Rucwi3v4iMpGJS?{YstT+7S;@C|y$ z?iLyii3oDW9ok;$p>oC^){$jo#=0g5^QTB~CRR4oF4WELImtN@$|&Sj=mky_{r8ti-X(6cTvMOXle`bcE|j{*j}g!92GMn=f<}r zq`-h>L4G>kfvy)I_A>@>n}6-bxC`ZU`5@adJ^jIKR5TZK`UzM0O#OEyk;iW+px+u>7 zukCby=_Qq$r*Wywd=_G{_^9g7M1;>?pFo)SPo-4}I7rQ)`E2v*?OuoNt^9q_uTFsq zz!=n)lwYf9q~cJ^GzL{{2@1yYKKi5@njcZ~{#YGOWW$Ai1%u1yk0w;f6|jwdqqflb z&$U%q3>92vYLvBXMK0hmU@q){%^*&i*VGvBHdYYME8{0LU1V9;vZ4G}Sy^+#iKxS3 zOUf!h-87bfFKC29rC6TGVezZ*!O+HAqneQ%+)D!@#A!ROhz3%_tf*y2 z`W9n_JYLq_YF}CNFkH!ofZZBccxA_)O7S3^Y-@9y0D1Gpd+?iF(0jd61vnMdVfj*F z-GdlqcG3T7>#U=qjNW}OA>G~54$V*s4Ba5zQWA=kNC`s-NY~Ka-QC??(kWenNP~dD zdB@+q_nf=d`N!p2t|c=s``!E5&-49$zId@zUt_p&g$HTlH>rooR%v-#8P|6t91Z;o zVd-C8u{MXw)=&nS-hIhnY$;)-{L{fzUGdg2j`;bu_iqMPafIQs1(XrwZoozK05`hJ zYb^6FNKc@}@;Fdq)<$J(7v*j}hVbJKgm^X?%{BS1f;BD$d!nUCyKiCU^0F}wQ0C!W zbL%mM^B>R8d!lq32Cs%O^>Z-2GQkB21(`cz;Lj?QLsb^vEtLB(n&}*BhCW}MRaofC z;3C_0lWl9*4fa_i5l&SP=(CBk+mGaM=40iZ>(S46*Crr>$c4lWD$$w097$BD! z7VK1tW-7p4nz`Do(oT9Te42yiGUiOAel<&qLcQH5lavR;WQJn|PCGyh`*gCQLpSLs zqA{y29p=$gy7O)~U&^pMM$Nt`huEi6hGcpr=7f$+qkV66t9+fH2l>9=RwxwWN*RSH z#j>NEW8p~5&keo26LTyIY?I+X74SC|J07jNq0;hW7?0h_-aI$^zpTxo;SQWY$xhp$xr zk0LPwqC%4%J#B7N-zZ#Qiq3Q(E*Wx)CdX_0^Q1^HaoBYM>(XZSm&Wg0%)2mMdt>cC zLE0EGrx=vYuu~Ny#Fx=YxNls!tCp<|=J6!+3}B*n2O8z#8XuAAB+n{b+e^vT+iv^L zyTv!PM>vA9o3Yp=dRojJ)NIkhWf0>i8%0l7vJN|pJtq+>MH|dlKdE{GpbaYDK(wknp>?3 ztsarwWYW!f`gdiEx5Y0vZL{APo0vi0`5Z)z7gar@6)a_bwPX=X@CaTSA(Yk`sW7KU{F-tUW-cBrC_5$ik|YA{O3x6Fc!b>6 zVuU|eI;``@D0q_c#^Fs8+wWvONN|dsyvhr3mzl`3-f*z8z*V_fM}a0#OE+HRNUO5H zqf@H*NhTO9S&R_i2lZ1YoOntbY>K=XdN*Xlp*x@$M_F3vG}MCEcD4l>@ZeZbA4`05 z2kZz`PRjc`h{eO;LhZ!3uv2k2ZxV(BJ{obtt?zqFZeje+b@3|vXnFnE^{CmJP8Am8 zzR@-JzgtNI2@asRO zLE*(re?#putG;`uGp~+8f$4>5ETy|EqKRurU&vJA)+8<$(`C~L012l%+rq9-6+2Dzz zd!LhLW^%@va43)4R>;eQv+W;4O!`_J)cP?VH=Al?!mOdKsQdI_@`AT++KXY0x*ql< z*=bG_f~C>%DnC3<+EL30*&_QkkIem5010(XfQ0Vm9OxURQf~RRBPU|WGu?WB;_6K``*h?^png16{SwAIT13VVln~kRBk)|P&Qzy?b zyqg^aY>ZY~9k}M`$pcU$$8kNWj)^ePvu1jedaTr&>s1|`pt1!=>iuZT!M}XhW=tMh zb&=*F5@l0BC+kh&EXEADCtDNs)2c?Dnq>pjo^Ceer}-+zb~K+$idD~H)Ht8`HRL5z zoc3O#=s+=d2Ogk7uO9W#PUN<|A{W3fc7w zDEeqJd8>k{@Y#lxJXPWUuLFqp6y9VoC%j}gfU)C}8!NCgC)r2XG61K4_;O`y4~j{c zI51PYTWi2$TX2jwH3N4e;wW9&QOh$1`l=J%e_2rj+DkTb@6CSF=@>0{#?lzU{c*wC ziAM5-qW>v1p7U-VTb+jxL5xhnPqp^>HkoNp{ZB@tC%F}ZqV*t3A#2Ans1?&B}#d6da>$g4Z?XX`c8YttW7+xcjOAVcJ6ttA4yT4Zf+{s7> zmqPV>^P$V2 z${I`&Es>8uW3oAiVsea)3^qq^w|X$S*o*tE7j2q=x%C&Fzi9H6A3hnDlyDC5&6&so3Z-3I)#}&u4Y10ql8`c8+>Fa(`>*bGo|!i3Y@A|5g(`h z74Cl`AB%2P0ZTDTg~;K&@eAUqUP(7wa$WaQ>JZxZ5JePwgWv{ZfW6N7t5VJS?&G(W zuDD6{yW(dx;Gumf=OG2KjGxw{ER@dXD0VAn_1`VL-^`9ZBEj~Me@a1{N!8fs@5~7O z@y5duLip=kc~&H;t+$~{6+;1I-z!@BM~$y*5KjCE7AEQ&x9!oPEZt2rZ@!l=Cy9Lnz?og$4!(+++R8C za?S$}^j?O@{Qbs+tOR17g3O=D+&X#0&M?tv0qzh^gi?HJHnoXig>p;oXL#}7ihE0V z2|Y1}x?;$PH|5__Tpb~zFqrN=NPqD}3U{QCBUdl^T@8#UiSo;+L}a!_?Odka48|ox zVp>MhUt?IG)4fO17nNVYcuzu12O^SI+O&ER>ZV7@&nDp3&|pg+N6F*^kxCvaex;Z^ zMw-DCvxee!#@f5^K-T;;fPiaE2{%BSnS}Kl=!r8gkL57zQl4oO)Ly2HCSg!!nfNgna{U7gSj6 zDDt&C#I!~`Szd>yJPf5AIU0UrhnRtdU{MSWS1{}F2d&O`eK10Ix$vP-(dic!l491Q zLzu(Cd4*)uKEG;NJ#(;2@zZ^2^t)bmEZWC8iF{|_nE#;p2kXxem8uW6=tvaPh>huR zbsrY1-(*&(?PVE1l6;XpK~vEFK}x3DR_?ep%>uo%mob&bPIr|&_O!biW!6wwz7hf! zrjb?T9u*$br|*sV&0EChBv2%x>+;66W!-17;*@iFI}a<8QSt`9b4Bbl`D!3*Y0kb? zVzZp2D;A|Ts0!~~k_{{@i7;VPq|Mx$ZDl5KuU?Mj&S(Fnw?%YL#H{)95B_aI+7i}} zgLij30h?x6QNrGG!*tnyX)7HzJz@;x6xnZ>JTeB8N)$Tme!r>!V`NNuNmj_18FC$} z4qQbbc#UQ8@3rCPn9;fw0FrB$wcc7Q%5|xdfr#}VmXGLlhAt^ znOT{N`>Br+k>-m3zu^ zdaa01ed!bAGQv_AcXU#}VEkZ1!HCw#F}6>$Y_7)mv`h>IA->18ZX9d;&Z!;k1R6A z8c_k3@4MQ5yHv7G3bG^bJ?*J3U$@hG8~=n07ahHfRZ=adQI09roQ{cq>N-+OKU+g* zd0NVR&<7V?#x`hhz9$2zp#)s#d*ZueA9pF0MIbTCo-Hg0xPIwDe;LPZJY%jsFW-tm zJV7dP4rUU+^?((0??Y|$sYwTT5G!w5$axi)$hPsd!E&TL!X=VTYW2%;JH1Ke64wzj zLM4Hx?T=wU(H^{}6<)?y*?-DZyp&_`C7Py{?_rk=01pc2{^2|+{pm~ghDcJ2M(z_) z?7hb4dQyvtp!_%B*{jnD=PkBCb4mDmQ{_0SHiRYFnb!H_}f$E$#1*8(-M; zbYMdU04|5~4wQ(&zOPknq~x`x8WEu?qxA&81Rc+3f5^&^TBcpg&jJ~mp2HW32mUQ? z?Ff?uG~7~sTbWgN&JOnPc)v^c?N;!RBg4r)^XsS95(?N#CJ~WK4`Gur z+|^}}Y8f#NmZR7AQLWpeBVOiiz_KVZg1Re<5v zn)f^W5eBA5-|@wb>kMY3cndtqxUy}+g-?tcp=P%^s?I1?%`}Sf;<5n-;>cw#vE#i0 z#F%Vox@vB{6JgU7DBj9CafY!(ECqXqGLyle=*gU(_*u`!> zWD9^<^R`>@0%U_ETKU$4B*PASW9c=To)6RGKlBR)1(cPN5Vt<;w9|9(&|We-ligg! zE~o_7K^Gtx&Fb8-3*D)3m8qhKz&=82)+bZyih4ZsX7v`A_j^T11?iBm`xxwKKQshb zN!dGzEI6wjkGuCfeNw>!(g1fZ z$?&Ve<=6NGG@St!+hfhvmM5B{nP5>Ega@bWuq=!_mV-xH6(M<_g*TA8c7rAQqf}-D zn&8nw5D(8E1}tgrmA&wk*Bd@aBeXoHpa{+yC!Erl_lB75QL?MN;#Pdb)TLT~J`#=L z4?r{0c{C-Kecqof)!LoMeG0-Cp2>8_=c~16_5r9$&3sAssDL386n`W9@+z9)1?zU9z1Fe%eR8r&eAF5VP^>F4YC z5!=;ofB>z3@L*&O7RzP@p0SfA?`~Hp$x-Ddbl?osc3&uZRg6%&=t1Vw%MQ&-3k(Ra z^G<9Wd`;F6@J`vDv+#RrDJQ<2a>HJjWc7St#I^N`pKNr!9X{D}i@Aox=tN4oV}bB( zhf|vI-19!9J;I|X4uX$t6pB+9%hm^l?ti1~7aSwhC%37Oh+F9FEvf}o>cINe1xn}C zj-ufQWG`Kwkej(br8sqO?p|=(L?N-2%SAZ&2ZN5z4yXa2(~<8*$_yUDInS|sP)L4Q zu@0Fky9m(RgS!Su*x>dBD#8EVz90+dO8ieB^M7M628^2-7_<|$M6Wx2*wMxxj5J;k zv#R%Ikl%lk&0ncDUHPyzl&jbKwWK*AE}FbMgYu?PVnrDGGNUQqW8AP zwKj+Jc+KuJa=~AfHQp*Q2=`^nJhlfHA2N|I6WjIdiaXN8N{o%PP-z=ymS2G+5TPL= znd&LBUR`?~iad7ES}@T)a9}l4yi#|@PR(cHuJVN}E8dfP)RenT4n%y2)B?@;MC*$Q1ZdCzHsgDg4%+Le+87-AScKg!B-~#o#Z5rfJtAU9 zAFnTCEOkP+8#hLs%VWy;+aGy8+9V*6c+mDOLuLI6VI;e zc9$!o*k|RX4_lCA*{GDK=7ysfOUm?o2Fir_@kR5zCAUw6&03CY@oDavemFu!T%7_1 z9;C9*1rxClmZF{PxUHqytAij{so>x$rohh;LSYeL7JHkvOv##o5D`TI_x;xj>@q|V z()zMp6~TiJARcK7bXaC=3q=E1&lUY#$)68 z#c0@lhVA^2=ggs#Pcif$_1}7Eoz{eYiLYuej5Av%tgb^yrdK}ZWE1l2P;MN=ZDR5_ zy#&1)Dntk}=HJnk6fBhV(PsSXgAa(J;$Bwb7!2RbO`$+CiS&X~@{bK^Obk?1LSqrl zeJAth*UF?)^!iRblKH%Z>SC~MBgCnLw+6H(WuhO{2d?xy}-7oL@kyNB_Nc&@+P$uFgjLe4#M%Dgv3 zKcmFOcfi||UhX~T7D6>`Kaa0u7t1Y?q0B+ab&nocVx*forK&G%;QLS?QXM2t?t{++ ze!jWger1AvEP=|d6>}(Q>XgzWFf2`a z6p`osEs?jcn?bo*W?fl?*PC;57f^_AO9Jtv(BS#A?Pr2@2xlX^L$ri3Oe?1H9`>Hn~=>9`2IeR?}DRBTRKu72`KD1eZ))XaTV9m$Xf(%x0UC@c-%NfWTOc& zQq-B!VWk<6Dn<~V6>~M)v!@xo_K|4tr}+eJ_>i#6Q`}N zY9~5PgQbW0tX*%+jF!@nh}KL?H|)8p;9NFKpCY*i4DvjI-)x7PF9gSptoj>{p1G9Dw-Q;SbQ^W}vXTOY-4ns_Gn-@`A`Svr>1_d+~d6lmUyyvzh)#7xe^ zk{_byr7gQkMgai=JE&OdrA|b3m0Wynv68jgS9ax*Y=x*j8-H>U(tK7%i&J$S`QgJl zvNROt=T*QBH?A`vnOzSLR!qvG#@Lf`Xf>B%S)1|J?Db{hwTvSX-Skhy$>RY^d-e<+ z5mn|q-ASx?mXEfCSO`-I%vy1kHXAP8_q_7vX+ENL+)7gm2QLQ6 z&=qkaSh?cm*@=mm#rgJju~I0?`rulP4Kmy}Xd3dY;%9s|ixJ;^nfRvn(5qmn^?41e zj-!t^ho?j~CZM|8Um3+X%Ch{wfOgI&pJyydz>O|qcbxIJ*0lv~7g~s9Yj|Xf*cGt` z7{GnK%M!QQWp~fQ9n#{^MVp{61l&OSNyLT*dhH!SkCpp-)?4Jn&|r@UkYky( zIP#kSZRu~`!yf@O^;56e=pyuwi9R1Y{6@GF2=A9Rt2WgVY3Z1SDQWq8QDF4D>?t|E zi-Pg)6Zi>LbEEaIK?H_#5^gUi`4n(Kmkya;%XA$MH~Bq`=4d}vreE+6oP8q<=?`7S zi-k`FlmB0p#MUBk&zyj2!3Wm01}l6*RAB@PjlGPOc@tzEz3Ro)&Nw~Ms;Z$-gJwD2 zdd+_w$xCk|JyY_AGIW6dA`5GezW%ry3h3LaiA>{p;3Lc)?dBZoTf}DlXhjsbqo7a2 zpSZubVc4RK^*?P)1j4m~g+;!Jnbg^ySL9@r!{9Q(7ujHP<~(2Pp7tC@Ecq2CKdJU0 zkmKLtE2hkXS=GI`yo{Ja$Hlf7A{By*fm$falCi~4U6E`~qLu64=eBp!1!&-RVXk@g z=NTF=6+(7_6NvkBd*$%oM9a@KpDXPqU>*w7N7U>nH6TV-p{7V{L;`$|PfId8XLVpb z8rAjW0h&HQqNj&*z)K!b5*PGim#8sL!BJ5K@x3R}XBknAAcZp~gBJfWJLy89rZNHv z7FDs_nbc+R7b@b@Muam6Z>cWv+8bVt2(RWCvO$V@5fkuGt-TQ(Zi)!?v-B0HbEI& zc1i}s7d})W*5Bv?Xa%nh0^^m7>4xhf^Dk=pMzcc>4*BFAUi4ewLQcCR)7n^&7Ysk0 zw7a>*5R5Wz3%dyXp=jgl)7yU*FCjJk^OP!HFBY?KI4!H-{V>vb zc<#pC=JR6hLBgGUnIS&BKEF2l%uI9ToZ5Ft>M}q0vjaq6E^@qL&X9a5-GNU%N?o z^6=i(i&DduwyeO~q-UUeGx=-#uTbPW#_n?L=cb1GzoChW)VD8Ami`(lmp~L{{Z6Yr z=+$-(Xp$>=ffddym3aVqODE_g7RPo{$l-C%=ko@SrH5eRLYQY;fvzd36tVAH+2a=1 zV~(5ap@se`4-Wfsm3&{@_Mqr>wPUz06XT!2S8drQ*c9ER8?@mEPZ`BwYHsdm3q3Ka zfKVIh#KPE7Z&jG_=1K32!tL# ze9p2XH-vnZW&<@IcICL7WRl!d@xZx4&7x_~So)%#xV`HreB7WyV&YDyxUP|lcJinc zN}FJq;@Ht#7^HUAA}>>$X#dnLo-1&y+B@K>zD={e|~1_BaWD$vE}T z2?*VoM55*0_cH@mS0b^emR_qpM1jG}o--5knZU+V8!9^0A1bb$9ze`;h-QE>Lnl$n z0Q898iYHt!lr6K_^teC`s@0PV1OJrulywVl{h)oBVb}%bhr0O6`D=|I&Gl6Qy=a`V zkXw_ozhx)K_sU5gfB)`_t(*LQfp=G?M18x`fVO6Cq;Di_y$+X!KL8EJhER$jRr%Tq zp@_>eD(Zw84)`|YM@B2O7I!!dA3<53ANIw0m(NNh)u7bW(#Oc@ z5o)Yl`84*ol52BMUtq|k?Aw?DKx=?BFR}vpe)9FEbvM}>t@8Xb#W>lu#;q{$aIsCu zf|~oq!4lMmKji{ev7gM@emU)XWBTUJ+np~Ov>F34?SoV6Fjwj@Roe3j?4#U<`#S0) zNp{wf6YBMw9}XCy0BUPVuCoWY>F1R9{DFh%_arz*mTYUsN5B~^&5uKJ0x! zBH@9<4NIZz{AGp@K)1}e!itl`w53w5)*P}7hf8%n&qs+7-cNHH@d^k|w+tJY(={<_ z6I^fH(m8kyJa*tbK-!o?U!cbeGs6qMm2`@QC9m)eqP2mX${UpW(uyzgM8clS7;!&+ zgz^41pMu?*EI5zlfG!%0E}}`^pcAKJUPDMon^EYmy%^ioN&^W)`lcldN>#C*Ina{k znR@36P6*Hvt*GNE?odD9v3RV;3BvRXbbX(pUQ~^}$AzCn+@LdXKIUfsYTeTbN+Vv^ z6Z3m~W!sltAY1F6fkSJHoPN^1TOD|FI^=Vd%21r__qN${Bs?Xf?KWhV5KT9O7GEcs z@a{9GQ*ljx!!K1aC$4Y`iVxTdKu>&|#^B)Nk;E1rUrIvXjKZ@gh!Oc#ChQ<8TTmJ^ z)zDn)O9pUELZYM-$(}j#pjv8MJB>39J`QgD?E3HleeY1c*bbOxEDx^k8FFnBa?tt48YnD7Bx0|&1>$aA0-*z=ib8+ zVDhrBd9Oj|4gMJ8!{{&Hvixi%30w@Es;~ahmO-3ZVTBOV4hzOmI7bsf%CTE%9Uk2l zT!wf9Gd$v$AMQuxnB7Z-AMXPNJ4~h1t6P zbGYQUnkpFREwMvC-Frn_B{{1B!-p>>KX*I0~5GplPBW9x`EzR_4B!oEtHXu$#xt4N2 zTv4|TO#GUfXS5`=j2}>Ye8#aKefU!Prm$G%KQcf6h{RALkY`4`2Rc2CvZKu51L_oc zh>jp0osf-rJ6Gy11cwhGXFV%|4NXGlu}9!VdSak@SnsYwvhA6%1yTrG1Q z2G5rGixkb_e7*r!`ZJPHc;(dQwXVIhxov_r3COQoY%11%`q!Bv2*Z94o8Yk{|8;B= z8aduNUc-w=+;R-nsQo7>3+WHvnpzTj$q@MW8-Jdrbx&KGa{DkxbJsaT*w^ zUcT0!bk|8RQUt0+f`)b%rq{m21VW{#31rw;b9g`4>l2Zmp-l+?11IJOe{k4i=F$0Q z%LEF~9}v1r*BRwk#EnZ-G@o-jFVatl?27}*&f(DukL!^+DdNvW9V%l zOkZFCQHsRKhtoC)1f^VP z44$Bh{gLqIxs(&TQ$M*osyulB!epq11TK1CJXTTNV6ADYOu=RJX}a6InYUx&ZMQGQ zZWT`aUi^L6T(J+i-H9E&fkDoP)&fY4n<%E58wBowZE`J@s3L#4?fR^2+!o%pte)lO z%8}xOAGDpE)B&rEn4z(#j?v;sh*`@HV$+uyF8 zEAHN*e+tDOtZvgCXU00{>`?*D|I1a=Kutgl<(a_zcOAe4vIG98HAlE&cF}BD=WnRDVrfpxOvhim@>h;r2xFsalwF?3DQi&WLd_GN7D|6m@++c8$<%e@9a+!@w z-L$9MaUNfDkgrev&9`gjylwe%FV&vYZeGR$z#d6h^=3Z&vTRrIaTbYkG@PXK=GVQmF?tG0gF0#ERQ^F#{j{ipW@ zr}Wq;bg`F42iAHL@-ky_1yE?X;{yMpd!Nzb0a0Y!go@mtzfAk?0jQ0QCB5V=S1qMD zRlV!j#EGW5s+A@%b?_rf;co`%5+%s4s#`nUJpO~7Y1N*-kIU+lxC zD)BlTmEWqV8l5ILD#c^;kk0e)t2{JPP`^k`|%r){$W#+J91~==81A(5z;nG$0<04QThN7kc>qCjyNio2e79JP# zH4twtjMz8M$!U(BKo0;!${G{u(_^mD zAx^S--T@I;#oll97KBmHu>GFD82`+I)U%rUCF0A5=~B-r%(X4oJ7a$x0GjCVsO!$uxo{jDdO5Ka&!*|18WRw#ZqFl_5=1gaYT~*aHLX(L4<%# zK#Ly*fv4Sh;TSeHwnU^C@) zP6kRY`aoh5pGPyIa5AR%v;_Asq+8Nd{<*OSY2yK(TMpA21w!meo)%W7*EGjFg`L}) zjV3EM4`M6u3j4S8x_{!d(p@3IByRs}=kSdR7DVHI&_$Y87-O$~#{uQoPHMN{NkFz8 zNEm+_R{iSe{adbubLR#KLEG0t0f{7{n-%)+*m zOKro2uQ1#|uN3m&OCXUdg=sE%pjAM$Fg>B+HMf?;4rav-Z$$;e3l4G_;kQwE{98FG z{JYDS2RnXw(!23-lT(VM$x5J&2IZMJE=kNB!t2!f=eX03#Wsc1h|^iapEMTYW@M*m zmJ>=N4x%!{xrf*UB9+#DJw;QDUF~4X1jk640L*BnL?*5@xuEaXIk5y|-^h1v;hA3W z3Tc$wbyuY58SEFxK#&qjRTIufh=^%7GCq`=6(h6ilwbC^@v`mcxH9-sYMY( zA^JL44w4h~!;?+sU*$E3VVvS_RbtLiIm+2u=7tSFy@PakvMl0*mpKV$xXqGQFJxiA;*BCtsnHv)D$I9 zw0QF^WDxYurXyBvk)O2iZ&WBjjMAtFuu=#{iP=CB&jnaiv$->nb9gfYhg!M_@wc?v zW+Cy1&k+`c08jP^zmM+bU(kB)xy0BB$NSR~w?_4}gjc_e#*^vly-G7oNv9CT!UPPr5%+1|0#kA(mlWV~|yF>4tLdR`AJXdYk-akMOZ^e)1GV80d$QpGGfRtsH^$9j@QI(_d%YFcp{=djW$tHZ}r}inFFqytHl8A2KDnPgI^54ii2&n z5G~*6eawki06KY({9}z^ZtE=x0A?k+FF2`hhf75--4IJK*VOO&uTIYTC`V%iTK4&_ zt*M}~x3`mW`oq*X<%z#ij18|r=JimCtQ(Myu?19PJ)+TQGUtznr}Q~~Kvtf|?hUP4 z-jGwN68>3?xrd~(vwXshCI5$1{22J}7CpU~8?@_ny;S%L2cAoWWu!112EKU}wvmsq zy#{z^kp?+LH?L5l+D~@@D~FJ{Ps4jY5s;~glRX+=gIyA)g(nq|ruT3`R1eqs>fVcL z>_`Xa($LC*9|3?*=c`4U(oHl#!0}4G!>SZx}U?*tfxA8kdjs^*M?8fWjKqA+TxJ1tkCBN;7%SjBx{`piFl9p4G zI~#@kw*MP5W4sO?{I@|+Y7S&dm|lEHwVPi7jyXjgFPC{A$4B7uVMu`SO1BI2lTdN_ ziIMXY!4LR-fXAKhl@db<{MPx@c(34S=mA#8-smG#WzRhEe!6D@E~|y=J48{#{iG(V zK%aD5QIH}JtprgIx`?dde9{ycpNLl7(dZdl;rgq3@ES+>SCwcp-PgX?SQWXo^338A3aIGHjA}Y6=F%mMZ;l?*n|Xq zZ;8?9{K-?K=MICe!QO;aOs4~xp~=|{-~n&UTNVP4=l54D)eLkyv{gfqZPfd%>C4{vn9(gPMg+pS z*`jV?kr9R(pvD4qvX|E?=bx+Jz7N(i64)2Ju8!o`nH9+7M|TTvV_w*v3Rw8LT=MyX z7Adq`X#HL;#uCLRM!2ME^0{QsGU#-Rw6n=Gr3tvJxdWdd`r}}l5ltAR>{8Q)lh%I# zsf1XV>F@U-(K@{N@A(0gkTm8DAY3jXKB=O3g5osIEqSktYFmQ7wPBi%BwX(oeV!X2 z=ew!se7w_{{t8Euv{l3L=lO`PM%M*_{nQm_fOo2PjFSG&!XHhw(B2zo{0!R(;eIN^XG{JBI#^mHB#h^q zxZZ9XkZie;l^i1f0nOHZk&~sB&%M~APvXHUe^eH0n(3#Y<1(}mw#{*hiU?5J(bvaM zekb%5v__LTG=~0)Hjsy(s$9m_L<;H1%RqTO&n6vu=@xFpeKXXBM=_UxfV^}?1OEW4 zV9T6b+i|+H4MZY`cJAjXBPLCeW;)x)Hs>7BhA#BW^?NRxhL11L|Y|p6tYlMspm-|%Mh-51K+FSzkM6tRO!r--KXSWDx6MRpG zF}CzQGc%Bb@AMdsV8#D*n_P)=YDiV~ykG1(mmpF5E{M#B@# zH+r#n!n_^w_RG1HJM+z_Qqe3eWurS;<~ShpGT#+|JzVd{|Gj+J^YWbJojZlN_^ouu^_1w<*B-4zI8l6ILvOJ^Y(u_q^~;4|&xdgi zqg7H%UKeSy7A308GtK+rmA9tiLm&Unkrqo9w7nNstS!yJ8wLm_=e11XYhUl8sq_t9 z44qOKQ)O;jT(tw40yU7Omp@>LokyUJ+T!E6lUHZ0Iv>e-f>-_8HQi;N1(PmkOoeo| z3-e^;f=+~nx<(t73!{U+U`AD}-H_||cJq6p5Xp+Q@>`lUVu{kP@8|}a_cILS(_Svh z-c3Yf);`wlZvESlmL*K3aYGmxA4qfe-JcnoE3Q)HRP34%36Je!oLP(eGsv{&w^yK zJv;>%XroO%c+*FGh%sgCI#TygnUGqvSTL|AiIeG9HbC_LvJ9e;^f~<@GQs88Quk207CJ3Q6@6@S-~i_g^%ZZuic$ZKGR#NU zH+-Zy7~vWM@)r)kSn2Y+pn@nM=ifEmHVBo0EDnEF9hLK$RX$x?R~NoN^eszx_cjTZ10BEe zC)~9;c>Va9=Unre8BMw1Bh9<9r8#lVcQm7hWRf;3-?|ty(OfdUu74(WLzhO4b>v4} zQ#Xvx2yOt*`r}{Pn9|H2CCW6rU15)bN$|8eU-J$d3B~q5GDF1C>t9yv0_34d>O4i) z6RQS`ypow~(Wv^Q((q`TzGXQ&p^>*qXG08;zn*e|^go_5iR#kGz1F>7%kOB|A7Azj z*OsFD4ffv){>+O-v2LS_X`l*g6Qlcnnh=#;Wpl9vuXrl=)a#*o6E+DhcnMd<_!d8& z+a+mtz>D)Ux}zx$Ckqj{LSZ%$>;Kk4{F0!2S?pjYV2T+~PG&*7|F0lL z7MV}T0ax{0`+UGC?K?+^sclqqJX*a0R(b;cuh@o?PRyqlrO71v1HOXOK$QA31sN5< J1^@2be*s + + + + diff --git a/public/icon/vote.svg b/public/icon/vote.svg new file mode 100644 index 0000000..22353ac --- /dev/null +++ b/public/icon/vote.svg @@ -0,0 +1,5 @@ + + + + + From 9d484bc6d72192699deb1e73f4299b72dad94561 Mon Sep 17 00:00:00 2001 From: eunxoo Date: Tue, 19 Mar 2024 15:45:51 +0900 Subject: [PATCH 53/84] =?UTF-8?q?fix:=20=EC=82=AC=EC=9D=B4=EB=93=9C?= =?UTF-8?q?=EB=B0=94=20width=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/invest/left-bar/MyStockList.jsx | 12 ++++++------ src/routes/HotStock/HotStockPage.jsx | 2 +- src/routes/InvestStrategy/InvestStrategyPage.jsx | 2 +- src/routes/MarketInfo/MarketInfoPage.jsx | 2 +- src/routes/MyPage/MyPage.jsx | 2 +- src/routes/SideLayout.jsx | 5 ++--- src/routes/Trading/TradingPage.jsx | 2 +- 7 files changed, 13 insertions(+), 14 deletions(-) diff --git a/src/components/invest/left-bar/MyStockList.jsx b/src/components/invest/left-bar/MyStockList.jsx index 0d3a6da..9bafd50 100644 --- a/src/components/invest/left-bar/MyStockList.jsx +++ b/src/components/invest/left-bar/MyStockList.jsx @@ -10,10 +10,9 @@ import { postLogin } from "~/store/reducers/User/user"; import { setFavoriteArr } from "~/store/reducers/Trading/search"; //TODO : 로고 사진 변경 -import default_Img from "../../../../public/icon/+.svg"; +import default_Img from "/icon/+.svg"; import { getCookie } from "~/lib/apis/cookie"; -import clickCompany, { setClickCompany } from "../../../store/reducers/Chart/clickCompany"; - +// import clickCompany, { setClickCompany } from "../../../store/reducers/Chart/clickCompany"; const MyStockList = () => { const isLogin = !!getCookie("token"); @@ -22,7 +21,7 @@ const MyStockList = () => { // const [searchResults, setSearchResults] = useState([]); // const [favoriteArr, setFavoriteArr] = useState([]); const searchRef = useRef(null); - + const dispatch = useDispatch(); const favoriteArr = useSelector((state) => state.search.favoriteArr); const searchResults = useSelector((state) => state.search.searchResults); @@ -231,7 +230,7 @@ const MyStockList = () => { 11111 - + 111 111 1111 @@ -472,7 +471,8 @@ const ImgDiv = styled.div` `; const PriceDiv = styled.div` - color: ${(props) => (parseFloat(props.returns) >= 0 ? "#ee2f2a" : "#2679ed")}; + color: ${(props) => + parseFloat(props.$returns) >= 0 ? "#ee2f2a" : "#2679ed"}; text-align: right; display: flex; flex-direction: column; diff --git a/src/routes/HotStock/HotStockPage.jsx b/src/routes/HotStock/HotStockPage.jsx index 2ce6523..b413092 100644 --- a/src/routes/HotStock/HotStockPage.jsx +++ b/src/routes/HotStock/HotStockPage.jsx @@ -8,7 +8,7 @@ export default function HotStockPage() { const Container = styled.div` display: flex; flex-direction: row; - width: 100%; + width: 400px; height: 100%; position: relative; overflow: hidden; diff --git a/src/routes/InvestStrategy/InvestStrategyPage.jsx b/src/routes/InvestStrategy/InvestStrategyPage.jsx index b1f2847..1e7971d 100644 --- a/src/routes/InvestStrategy/InvestStrategyPage.jsx +++ b/src/routes/InvestStrategy/InvestStrategyPage.jsx @@ -8,7 +8,7 @@ export default function InvestStrategyPage() { const Container = styled.div` display: flex; flex-direction: row; - width: 100%; + width: 400px; height: 100%; position: relative; overflow: hidden; diff --git a/src/routes/MarketInfo/MarketInfoPage.jsx b/src/routes/MarketInfo/MarketInfoPage.jsx index 486ef2d..5b49131 100644 --- a/src/routes/MarketInfo/MarketInfoPage.jsx +++ b/src/routes/MarketInfo/MarketInfoPage.jsx @@ -8,7 +8,7 @@ export default function MarketInfoPage() { const Container = styled.div` display: flex; flex-direction: row; - width: 100%; + width: 400px; height: 100%; position: relative; overflow: hidden; diff --git a/src/routes/MyPage/MyPage.jsx b/src/routes/MyPage/MyPage.jsx index 6843e11..0750dcc 100644 --- a/src/routes/MyPage/MyPage.jsx +++ b/src/routes/MyPage/MyPage.jsx @@ -8,7 +8,7 @@ export default function MyPage() { const Container = styled.div` display: flex; flex-direction: row; - width: 100%; + width: 400px; height: 100%; position: relative; overflow: hidden; diff --git a/src/routes/SideLayout.jsx b/src/routes/SideLayout.jsx index dc7dd66..d881550 100644 --- a/src/routes/SideLayout.jsx +++ b/src/routes/SideLayout.jsx @@ -11,12 +11,11 @@ const SideLayout = () => { ); }; -const Container = styled.div` +const Container = styled.section` display: flex; flex-direction: column; - width: 480px; + width: 400px; position: relative; - overflow: hidden; z-index: 999; background-color: white; border-left: 1px solid #e2e2e2; diff --git a/src/routes/Trading/TradingPage.jsx b/src/routes/Trading/TradingPage.jsx index 04a6adc..41994ad 100644 --- a/src/routes/Trading/TradingPage.jsx +++ b/src/routes/Trading/TradingPage.jsx @@ -8,7 +8,7 @@ export default function TradingPage() { const Container = styled.div` display: flex; flex-direction: row; - width: 100%; + width: 400px; height: 100%; position: relative; overflow: hidden; From 1a18e8118f79e90daa1364224a2a6b573b9dee5c Mon Sep 17 00:00:00 2001 From: eunxoo Date: Tue, 19 Mar 2024 15:46:14 +0900 Subject: [PATCH 54/84] =?UTF-8?q?feat:=20=EA=B8=80=EC=93=B0=EA=B8=B0=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Feed/FeedWriting.jsx | 202 ++++++++++++++++++++++++++++ 1 file changed, 202 insertions(+) create mode 100644 src/components/Feed/FeedWriting.jsx diff --git a/src/components/Feed/FeedWriting.jsx b/src/components/Feed/FeedWriting.jsx new file mode 100644 index 0000000..5c9a97e --- /dev/null +++ b/src/components/Feed/FeedWriting.jsx @@ -0,0 +1,202 @@ +import React, { useState, useRef, useCallback } from "react"; +import styled from "styled-components"; + +const FeedWriting = ({ setIsWrite }) => { + const inputRef = useRef(); + const [previewImage, setPreviewImage] = useState(null); + const [selectedImage, setSelectedImage] = useState(null); + + const [isVote, setIsVote] = useState(false); + + const onUploadImage = useCallback((e) => { + const file = e.target.files[0]; + setSelectedImage(file); + if (!file) { + return; + } + const reader = new FileReader(); + reader.onloadend = () => { + setPreviewImage(reader.result); + console.log("reader.result", reader.result); + }; + reader.readAsDataURL(file); + console.log("reader", reader); + }, []); + + const onUploadImageButtonClick = useCallback(() => { + if (!inputRef.current) { + return; + } + inputRef.current.click(); + }, []); + + const clickVote = () => { + setIsVote(!isVote); + setSelectedImage(null); + setPreviewImage(null); + }; + return ( + + + 프로필 + 양똥개 + x setIsWrite(false)} + /> + + {isVote ? ( + <> + + O / X 투표 + + + + ) : ( + + )} + + {previewImage && ( + + 업로드된 이미지 + + )} + + + + 사진 +
사진
+ + + 투표 +
투표
+ + 게시 + + + ); +}; + +const Container = styled.div` + display: flex; + flex-direction: column; + padding: 20px 25px 0px 25px; + background-color: white; + margin-bottom: 5px; +`; + +const UserContainer = styled.div` + display: flex; + flex-direction: row; + align-items: center; +`; + +const UserNickname = styled.div` + margin-left: 13px; + font-size: 16px; + font-weight: 600; + line-height: normal; +`; + +const StyledTextarea = styled.textarea` + margin: 10px; + resize: none; + border: none; + height: 100px; + padding-left: 10px; + padding-right: 10px; + &::-webkit-scrollbar { + display: none; + } +`; + +const UploadContainer = styled.div` + border-top: 1px solid #dadada; + display: flex; + flex-direction: row; + padding: 10px; +`; + +const ButtonDiv = styled.button` + display: flex; + flex-direction: row; + width: 80px; + gap: 5px; + cursor: pointer; + margin-right: 10px; + border: none; + background: none; +`; + +const UploadBtn = styled.button` + margin-left: auto; + border-radius: 7px; + border: none; + background: #ff8049; + width: 53px; + height: 29px; + color: #fefefe; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: normal; + + &:hover { + background: #ff5208; + } +`; + +const PreviewImageContainer = styled.div` + display: flex; + justify-content: center; + margin-top: 10px; +`; + +const VoteWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + margin: 15px 0px; +`; + +const VoteDiv = styled.div` + margin-right: auto; + margin-left: 20px; +`; + +const VoteTextarea = styled.textarea` + display: flex; + resize: none; + width: 90%; + height: 70px; + padding: 10px 10px; + margin: 10px 0px 10px 0px; + border-radius: 7px; + border: 1px solid #d9d9d9; + + &::-webkit-scrollbar { + display: none; + } +`; + +export default FeedWriting; From 49e016a5265ea4766cf4473d516e1a05c7cafced Mon Sep 17 00:00:00 2001 From: eunxoo Date: Tue, 19 Mar 2024 15:46:31 +0900 Subject: [PATCH 55/84] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/Feed/FeedPage.jsx | 412 ++++++++++++++++++++++++++++++++++- 1 file changed, 407 insertions(+), 5 deletions(-) diff --git a/src/routes/Feed/FeedPage.jsx b/src/routes/Feed/FeedPage.jsx index 0775e8e..f2b34f7 100644 --- a/src/routes/Feed/FeedPage.jsx +++ b/src/routes/Feed/FeedPage.jsx @@ -1,15 +1,417 @@ -import React from "react"; +import React, { useState } from "react"; import styled from "styled-components"; +import FeedWriting from "../../components/Feed/FeedWriting"; -export default function FeedPage() { - return FeedPage; -} +//TODO : 로고 사진 변경 +import default_Img from "/icon/+.svg"; + +const FeedPage = () => { + const [isWrite, setIsWrite] = useState(false); + + const write = () => { + setIsWrite(true); + }; + + const getLogoFileName = (name, code) => { + if (name.includes("스팩")) { + return "SPAC_230706"; + } else if (name.includes("ETN")) { + return "ETN_230706"; + } else if ( + name.includes("KODEX") || + name.includes("KOSEF") || + name.includes("KoAct") || + name.includes("TIGER") || + name.includes("ACE") || + name.includes("ARIRANG") || + name.includes("합성 H") || + name.includes("HANARO") || + name.includes("SOL") + ) { + return "ETF_230706"; + } else { + return `kr/${code}`; + } + }; + + const onErrorImg = (e) => { + e.target.src = default_Img; + }; + return ( + + {isWrite ? ( + + ) : ( + + 프로필 + 무슨 생각을 하고 계신가요? + + )} + + + + 게시글 쓰는 미나리 + 2024.03.08 + + + + 저번주 공시인데 괜찮아 보이네요! 시가배당률도 매년 올라가고 있어서 + 눈여겨 보는 중입니다. + + 본문 사진 + + + + 좋아요 +
3
+ + + 댓글 +
7
+ + + + + + 매수한 미나리 + 2024.03.08 + + + + + 삼성생명 + 10주 + 매수 + + + + + 좋아요 +
3
+ + + 댓글 +
7
+ + + + + + 수익률 공유한 미나리 + 2024.03.08 + + + + 나의 전체 수익률은? + 0.01% + + + + + 좋아요 +
3
+ + + 댓글 +
7
+ + + + + + 투표 아직 안 한 미나리 + 2024.03.08 + + + + 티웨이 항공 vs 에어부산, 에어부산이 더 오른다 + + + + O + + + X + + + + + + + 투표한 미나리 + 2024.03.08 + + + + 티웨이 항공 vs 에어부산, 에어부산이 더 오른다 + + + + O
+ 32% + + + + + + + X
+ 68% + + + + + + + ); +}; const Container = styled.div` + display: flex; + flex-direction: column; + width: 400px; + height: 100%; + position: relative; + overflow: hidden; + background-color: #f3f3f3; +`; + +const WritingContainer = styled.div` display: flex; flex-direction: row; + padding: 20px 35px; + gap: 15px; + cursor: pointer; + background-color: white; + height: 80px; width: 100%; + margin-bottom: 5px; +`; + +const InputDiv = styled.div` + width: 361px; + height: 40px; + border-radius: 20px; + background: #f3f3f3; + display: flex; + flex-direction: row; + align-items: center; + padding-left: 22px; + + color: #7e7e7e; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: normal; +`; + +const FeedContainer = styled.div` + display: flex; + flex-direction: column; height: 100%; + overflow: auto; + &::-webkit-scrollbar { + display: none; + } +`; + +const FeedWrapper = styled.div` + display: flex; + flex-direction: column; + background-color: white; + margin-bottom: 5px; +`; + +const UserDiv = styled.div` + margin: 20px 25px 0px 25px; +`; + +const UserNickname = styled.div` + font-size: 16px; + font-weight: 600; + line-height: normal; + margin-bottom: 5px; +`; + +const DateDiv = styled.div` + color: #c1c1c1; + font-size: 13px; + font-style: normal; + font-weight: 600; + line-height: normal; +`; + +const BodyWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + margin: 15px 25px 0px 25px; +`; + +const BodyDiv = styled.div` + margin-bottom: 15px; + font-weight: ${(props) => props.$weight || "400"}; +`; + +const Img = styled.img` + width: 100%; + /* object-fit: cover; */ +`; + +const BottomWrapper = styled.div` + display: flex; + margin: 20px 25px 0px 25px; + padding: 15px 0px; + border-top: 1px solid #dadada; + gap: 20px; +`; + +const IconDiv = styled.div` + display: flex; + align-items: center; +`; + +const Div = styled.div``; + +const StockWrapper = styled.div` + display: flex; + flex-direction: row; + align-items: center; + width: 95%; + padding: 11px 22px; + border-radius: 10px; + background-color: ${(props) => + props.$buy === "sell" + ? "#FFE3D7" + : props.$buy === "returns" + ? "#EFEFEF" + : "#BEE4FF"}; +`; + +const StockDiv = styled.div` + margin-left: ${(props) => props.$margin || "10px"}; + color: #000; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: normal; +`; + +const QuantityDiv = styled.div` + margin-left: 7px; + color: #000; + font-size: 16px; + font-weight: 500; +`; + +const OrderDiv = styled.div` + margin-left: 7px; + color: #000; + font-size: 16px; + font-weight: 500; +`; + +const ReturnDiv = styled.div` + margin-left: auto; + color: ${(props) => + parseFloat(props.$returns) >= 0 ? "#ee2f2a" : "#2679ed"}; +`; + +const ButtonWrapper = styled.div` + display: flex; + gap: 30px; + margin-bottom: 25px; + margin-top: 5px; +`; + +const VoteBtn = styled.button` + width: 150px; + height: 44px; + border: none; + border-radius: 10px; + background: ${(props) => props.color}; + + color: #fff; + font-size: 25px; + font-weight: 600; + + &:hover { + background: ${(props) => props.$hover}; + } +`; + +const BarDiv = styled.div` position: relative; - overflow: hidden; + width: 250px; + height: 30px; + /* background-color: #ffe3d7; + border-radius: 10px; */ +`; + +const ODiv = styled.div` + position: absolute; + left: 0; + top: 0; + width: 32%; + height: 30px; + border-radius: 10px 0px 0px 10px; + background: #bee4ff; +`; + +const XDiv = styled.div` + position: absolute; + right: 0; + top: 0; + width: 68%; + height: 30px; + border-radius: 0px 10px 10px 0px; + background: #ffe3d7; `; + +const OXWrapper = styled.div` + display: flex; + gap: 10px; + margin-bottom: 25px; + margin-top: 5px; +`; + +const OXDiv = styled.div` + text-align: center; + font-size: 15px; +`; + +export default FeedPage; From 4772b61d8ea3262d66bd4e6581bfea027faa1e3e Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Tue, 19 Mar 2024 15:50:32 +0900 Subject: [PATCH 56/84] =?UTF-8?q?feat:=20=EB=B3=B4=EC=A1=B0=EC=A7=80?= =?UTF-8?q?=ED=91=9C=20=EC=8B=9C=EA=B0=81=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../invest/chart/Indicators/sub/ADChart.jsx | 6 +- .../chart/Indicators/sub/ADOSCChart.jsx | 6 +- .../invest/chart/Indicators/sub/ADXChart.jsx | 6 +- .../invest/chart/Indicators/sub/ADXRChart.jsx | 6 +- .../chart/Indicators/sub/AROONChart.jsx | 6 +- .../chart/Indicators/sub/AROONOSCChart.jsx | 70 ++ .../invest/chart/Indicators/sub/ATRChart.jsx | 6 +- .../invest/chart/Indicators/sub/CCIChart.jsx | 4 +- .../invest/chart/Indicators/sub/DMIChart.jsx | 6 +- .../invest/chart/Indicators/sub/MACDChart.jsx | 17 +- .../invest/chart/Indicators/sub/MFIChart.jsx | 6 +- .../invest/chart/Indicators/sub/MOMChart.jsx | 6 +- .../invest/chart/Indicators/sub/OBVChart.jsx | 6 +- .../invest/chart/Indicators/sub/PPOChart.jsx | 62 ++ .../invest/chart/Indicators/sub/ROCChart.jsx | 6 +- .../invest/chart/Indicators/sub/RSIChart.jsx | 8 +- .../invest/chart/Indicators/sub/STOCH.jsx | 8 +- .../invest/chart/Indicators/sub/STOCHFast.jsx | 8 +- .../chart/Indicators/sub/STOCHRSIChart.jsx | 68 ++ .../invest/chart/Indicators/sub/TRIXChart.jsx | 6 +- .../chart/Indicators/sub/ULTOSCChart.jsx | 63 ++ .../chart/Indicators/sub/WILLRChart.jsx | 6 +- src/components/invest/chart/MainChart.jsx | 424 ++++++--- src/components/invest/left-bar/Indicators.jsx | 9 +- .../invest/left-bar/MyStockList.jsx | 2 +- src/lib/apis/chart.jsx | 13 +- .../Chart/Indicators/clickIndicators.jsx | 8 +- src/store/reducers/Chart/chart.jsx | 806 +----------------- src/store/store.js | 13 +- 29 files changed, 634 insertions(+), 1027 deletions(-) create mode 100644 src/components/invest/chart/Indicators/sub/AROONOSCChart.jsx create mode 100644 src/components/invest/chart/Indicators/sub/PPOChart.jsx create mode 100644 src/components/invest/chart/Indicators/sub/STOCHRSIChart.jsx create mode 100644 src/components/invest/chart/Indicators/sub/ULTOSCChart.jsx diff --git a/src/components/invest/chart/Indicators/sub/ADChart.jsx b/src/components/invest/chart/Indicators/sub/ADChart.jsx index 2bc7426..39eb895 100644 --- a/src/components/invest/chart/Indicators/sub/ADChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ADChart.jsx @@ -2,10 +2,10 @@ import React, { useEffect } from 'react'; import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; -import { getADChart, getCCIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { getADChart } from '../../../../../store/reducers/Chart/Indicators/sub'; import { format } from 'd3-format'; -export default function ADChart({ datas }) { +export default function ADChart({ datas, isShow }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.AD); @@ -45,7 +45,7 @@ export default function ADChart({ datas }) { }); dispatch(setChartDatas(updatedDatas)); } - }, [isActive]); + }, [isActive, isShow]); const pricesDisplayFormat = format(".2f"); diff --git a/src/components/invest/chart/Indicators/sub/ADOSCChart.jsx b/src/components/invest/chart/Indicators/sub/ADOSCChart.jsx index 172fa09..8facebd 100644 --- a/src/components/invest/chart/Indicators/sub/ADOSCChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ADOSCChart.jsx @@ -2,10 +2,10 @@ import React, { useEffect } from 'react'; import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; -import { getADChart, getADOSCChart, getATRChart, getCCIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { getADOSCChart } from '../../../../../store/reducers/Chart/Indicators/sub'; import { format } from 'd3-format'; -export default function ADOSCChart({ datas }) { +export default function ADOSCChart({ datas, isShow }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.ADOSC); const ADOSCValue = useSelector((state) => state.indicatorValues.values.ADOSC); @@ -48,7 +48,7 @@ export default function ADOSCChart({ datas }) { }); dispatch(setChartDatas(updatedDatas)); } - }, [isActive]); + }, [isActive, ADOSCValue, isShow]); const pricesDisplayFormat = format(".2f"); diff --git a/src/components/invest/chart/Indicators/sub/ADXChart.jsx b/src/components/invest/chart/Indicators/sub/ADXChart.jsx index 3bbb2fe..ad3b6ce 100644 --- a/src/components/invest/chart/Indicators/sub/ADXChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ADXChart.jsx @@ -2,10 +2,10 @@ import React, { useEffect } from 'react'; import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; -import { getADChart, getADXChart, getATRChart, getCCIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { getADXChart } from '../../../../../store/reducers/Chart/Indicators/sub'; import { format } from 'd3-format'; -export default function ADXChart({ datas }) { +export default function ADXChart({ datas, isShow }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.ADX); const ADXValue = useSelector((state) => state.indicatorValues.values.ADX); @@ -47,7 +47,7 @@ export default function ADXChart({ datas }) { }); dispatch(setChartDatas(updatedDatas)); } - }, [isActive]); + }, [isActive, ADXValue, isShow]); const pricesDisplayFormat = format(".2f"); diff --git a/src/components/invest/chart/Indicators/sub/ADXRChart.jsx b/src/components/invest/chart/Indicators/sub/ADXRChart.jsx index 6f14f6a..710fb69 100644 --- a/src/components/invest/chart/Indicators/sub/ADXRChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ADXRChart.jsx @@ -2,10 +2,10 @@ import React, { useEffect } from 'react'; import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; -import { getADChart, getADXChart, getADXRChart, getATRChart, getCCIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { getADXRChart } from '../../../../../store/reducers/Chart/Indicators/sub'; import { format } from 'd3-format'; -export default function ADXRChart({ datas }) { +export default function ADXRChart({ datas, isShow }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.ADXR); const ADXRValue = useSelector((state) => state.indicatorValues.values.ADXR); @@ -47,7 +47,7 @@ export default function ADXRChart({ datas }) { }); dispatch(setChartDatas(updatedDatas)); } - }, [isActive]); + }, [isActive, ADXRValue, isShow]); const pricesDisplayFormat = format(".2f"); diff --git a/src/components/invest/chart/Indicators/sub/AROONChart.jsx b/src/components/invest/chart/Indicators/sub/AROONChart.jsx index 055b538..8df48ac 100644 --- a/src/components/invest/chart/Indicators/sub/AROONChart.jsx +++ b/src/components/invest/chart/Indicators/sub/AROONChart.jsx @@ -2,10 +2,10 @@ import React, { useEffect } from 'react'; import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; -import { getADChart, getADXChart, getADXRChart, getAROONChart, getATRChart, getCCIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { getAROONChart } from '../../../../../store/reducers/Chart/Indicators/sub'; import { format } from 'd3-format'; -export default function AROONChart({ datas }) { +export default function AROONChart({ datas, isShow }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.AROON); const AROONValue = useSelector((state) => state.indicatorValues.values.AROON); @@ -47,7 +47,7 @@ export default function AROONChart({ datas }) { }); dispatch(setChartDatas(updatedDatas)); } - }, [isActive]); + }, [isActive, AROONValue, isShow]); const pricesDisplayFormat = format(".2f"); diff --git a/src/components/invest/chart/Indicators/sub/AROONOSCChart.jsx b/src/components/invest/chart/Indicators/sub/AROONOSCChart.jsx new file mode 100644 index 0000000..c205604 --- /dev/null +++ b/src/components/invest/chart/Indicators/sub/AROONOSCChart.jsx @@ -0,0 +1,70 @@ +import React, { useEffect } from 'react'; +import { BarSeries, XAxis, YAxis } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getAROONOSCChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { format } from 'd3-format'; + +export default function AROONOSCChart({ datas, isShow }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.AROONOSC); + const AROONOSCValue = useSelector((state) => state.indicatorValues.values.AROONOSC); + + const calculateAROONOSC = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.aroonosc; + return newItem; + }); + + const newData = [...updatedDatas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const aroonosc = data.result.outReal; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["aroonosc"]: aroonosc[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "Date": AROONOSCValue[0], + } + dispatch(getAROONOSCChart(data)) + .then((res) => calculateAROONOSC(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.aroonosc; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive, AROONOSCValue, isShow]); + + const pricesDisplayFormat = format(".2f"); + const volumeColor = (data) => { + return data.aroonosc > 0 + ? "#EDD02B" + : "#2679ED"; + }; + + return ( + <> + + + d.aroonosc} + baseAt={(xScale, yScale, d) => yScale(0)} + /> + + ) +} diff --git a/src/components/invest/chart/Indicators/sub/ATRChart.jsx b/src/components/invest/chart/Indicators/sub/ATRChart.jsx index 61e3777..74d8299 100644 --- a/src/components/invest/chart/Indicators/sub/ATRChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ATRChart.jsx @@ -2,10 +2,10 @@ import React, { useEffect } from 'react'; import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; -import { getADChart, getATRChart, getCCIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { getATRChart } from '../../../../../store/reducers/Chart/Indicators/sub'; import { format } from 'd3-format'; -export default function ATRChart({ datas }) { +export default function ATRChart({ datas, isShow }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.ATR); const ATRValue = useSelector((state) => state.indicatorValues.values.ATR); @@ -47,7 +47,7 @@ export default function ATRChart({ datas }) { }); dispatch(setChartDatas(updatedDatas)); } - }, [isActive]); + }, [isActive, ATRValue, isShow]); const pricesDisplayFormat = format(".2f"); diff --git a/src/components/invest/chart/Indicators/sub/CCIChart.jsx b/src/components/invest/chart/Indicators/sub/CCIChart.jsx index 5d3ac92..d935c71 100644 --- a/src/components/invest/chart/Indicators/sub/CCIChart.jsx +++ b/src/components/invest/chart/Indicators/sub/CCIChart.jsx @@ -5,7 +5,7 @@ import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getCCIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; import { format } from 'd3-format'; -export default function CCIChart({ datas }) { +export default function CCIChart({ datas, isShow }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.CCI); const CCIValue = useSelector((state) => state.indicatorValues.values.CCI); @@ -47,7 +47,7 @@ export default function CCIChart({ datas }) { }); dispatch(setChartDatas(updatedDatas)); } - }, [isActive]); + }, [isActive, CCIValue, isShow]); const pricesDisplayFormat = format(".2f"); diff --git a/src/components/invest/chart/Indicators/sub/DMIChart.jsx b/src/components/invest/chart/Indicators/sub/DMIChart.jsx index e590c44..20dba9a 100644 --- a/src/components/invest/chart/Indicators/sub/DMIChart.jsx +++ b/src/components/invest/chart/Indicators/sub/DMIChart.jsx @@ -2,10 +2,10 @@ import React, { useEffect } from 'react'; import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; -import { getADChart, getATRChart, getCCIChart, getDXChart, getTRIXChart, getWILLRChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { getDXChart } from '../../../../../store/reducers/Chart/Indicators/sub'; import { format } from 'd3-format'; -export default function DMIChart({ datas }) { +export default function DMIChart({ datas, isShow }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.DX); const DXValue = useSelector((state) => state.indicatorValues.values.DX); @@ -47,7 +47,7 @@ export default function DMIChart({ datas }) { }); dispatch(setChartDatas(updatedDatas)); } - }, [isActive]); + }, [isActive, DXValue, isShow]); const pricesDisplayFormat = format(".2f"); diff --git a/src/components/invest/chart/Indicators/sub/MACDChart.jsx b/src/components/invest/chart/Indicators/sub/MACDChart.jsx index 83e65bb..987c870 100644 --- a/src/components/invest/chart/Indicators/sub/MACDChart.jsx +++ b/src/components/invest/chart/Indicators/sub/MACDChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { Chart, LineSeries, MACDSeries, XAxis, YAxis } from 'react-financial-charts'; +import { BarSeries, Chart, LineSeries, MACDSeries, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getMACDChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -15,7 +15,7 @@ const macdAppearance = { }, }; -export default function MACDChart({ datas }) { +export default function MACDChart({ datas, isShow }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.MACD); @@ -66,7 +66,7 @@ export default function MACDChart({ datas }) { }); dispatch(setChartDatas(updatedDatas)); } - }, [isActive]); + }, [isActive, isShow]); const barChartHeight = 250; const barChartOrigin = (_, h) => [0, h - barChartHeight]; @@ -77,12 +77,11 @@ export default function MACDChart({ datas }) { return ( <> - - - - d.macd} strokeStyle={'#b3009e'} - /> - + + + d.macd} strokeStyle='#680A08' /> + d.macdSignal} strokeStyle='#A8693D' /> + d.macdHist} /> ) } diff --git a/src/components/invest/chart/Indicators/sub/MFIChart.jsx b/src/components/invest/chart/Indicators/sub/MFIChart.jsx index 8751780..0d0b544 100644 --- a/src/components/invest/chart/Indicators/sub/MFIChart.jsx +++ b/src/components/invest/chart/Indicators/sub/MFIChart.jsx @@ -2,10 +2,10 @@ import React, { useEffect } from 'react'; import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; -import { getADChart, getATRChart, getCCIChart, getMFIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { getMFIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; import { format } from 'd3-format'; -export default function MFIChart({ datas }) { +export default function MFIChart({ datas, isShow }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.MFI); const MFIValue = useSelector((state) => state.indicatorValues.values.MFI); @@ -47,7 +47,7 @@ export default function MFIChart({ datas }) { }); dispatch(setChartDatas(updatedDatas)); } - }, [isActive]); + }, [isActive, MFIValue, isShow]); const pricesDisplayFormat = format(".2f"); diff --git a/src/components/invest/chart/Indicators/sub/MOMChart.jsx b/src/components/invest/chart/Indicators/sub/MOMChart.jsx index ad9d925..4383e4a 100644 --- a/src/components/invest/chart/Indicators/sub/MOMChart.jsx +++ b/src/components/invest/chart/Indicators/sub/MOMChart.jsx @@ -2,10 +2,10 @@ import React, { useEffect } from 'react'; import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; -import { getCCIChart, getMOMChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { getMOMChart } from '../../../../../store/reducers/Chart/Indicators/sub'; import { format } from 'd3-format'; -export default function MOMChart({ datas }) { +export default function MOMChart({ datas, isShow }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.MOM); const MOMValue = useSelector((state) => state.indicatorValues.values.MOM); @@ -47,7 +47,7 @@ export default function MOMChart({ datas }) { }); dispatch(setChartDatas(updatedDatas)); } - }, [isActive]); + }, [isActive, MOMValue, isShow]); const pricesDisplayFormat = format(".2f"); diff --git a/src/components/invest/chart/Indicators/sub/OBVChart.jsx b/src/components/invest/chart/Indicators/sub/OBVChart.jsx index 8eadb44..13a07c5 100644 --- a/src/components/invest/chart/Indicators/sub/OBVChart.jsx +++ b/src/components/invest/chart/Indicators/sub/OBVChart.jsx @@ -2,10 +2,10 @@ import React, { useEffect } from 'react'; import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; -import { getADChart, getATRChart, getCCIChart, getMFIChart, getOBVChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { getOBVChart } from '../../../../../store/reducers/Chart/Indicators/sub'; import { format } from 'd3-format'; -export default function OBVChart({ datas }) { +export default function OBVChart({ datas, isShow }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.OBV); @@ -45,7 +45,7 @@ export default function OBVChart({ datas }) { }); dispatch(setChartDatas(updatedDatas)); } - }, [isActive]); + }, [isActive, isShow]); const pricesDisplayFormat = format(".2f"); diff --git a/src/components/invest/chart/Indicators/sub/PPOChart.jsx b/src/components/invest/chart/Indicators/sub/PPOChart.jsx new file mode 100644 index 0000000..656ee18 --- /dev/null +++ b/src/components/invest/chart/Indicators/sub/PPOChart.jsx @@ -0,0 +1,62 @@ +import React, { useEffect } from 'react'; +import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getPPOChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { format } from 'd3-format'; + +export default function PPOChart({ datas, isShow }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.PPO); + const PPOValue = useSelector((state) => state.indicatorValues.values.PPO); + + const calculatePPO = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.ppo; + return newItem; + }); + + const newData = [...updatedDatas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const ppo = data.result.outReal; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["ppo"]: ppo[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "longPeriod": PPOValue[0], + "shortPeriod": PPOValue[1] + } + dispatch(getPPOChart(data)) + .then((res) => calculatePPO(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.ppo; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive, PPOValue, isShow]); + + const pricesDisplayFormat = format(".2f"); + + return ( + <> + + + d.ppo} strokeStyle='#680A08' /> + + ) +} diff --git a/src/components/invest/chart/Indicators/sub/ROCChart.jsx b/src/components/invest/chart/Indicators/sub/ROCChart.jsx index 300c97d..07f3362 100644 --- a/src/components/invest/chart/Indicators/sub/ROCChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ROCChart.jsx @@ -2,10 +2,10 @@ import React, { useEffect } from 'react'; import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; -import { getCCIChart, getMOMChart, getROCChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { getROCChart } from '../../../../../store/reducers/Chart/Indicators/sub'; import { format } from 'd3-format'; -export default function ROCChart({ datas }) { +export default function ROCChart({ datas, isShow }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.ROC); const ROCValue = useSelector((state) => state.indicatorValues.values.ROC); @@ -47,7 +47,7 @@ export default function ROCChart({ datas }) { }); dispatch(setChartDatas(updatedDatas)); } - }, [isActive]); + }, [isActive, ROCValue, isShow]); const pricesDisplayFormat = format(".2f"); diff --git a/src/components/invest/chart/Indicators/sub/RSIChart.jsx b/src/components/invest/chart/Indicators/sub/RSIChart.jsx index 7855486..37ee3c1 100644 --- a/src/components/invest/chart/Indicators/sub/RSIChart.jsx +++ b/src/components/invest/chart/Indicators/sub/RSIChart.jsx @@ -1,11 +1,11 @@ import React, { useEffect } from 'react'; -import { BarSeries, Chart, LineSeries, MACDSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; -import { getMACDChart, getRSIChart, getSTOCHChart, getSTOCHFChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { getRSIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; import { format } from 'd3-format'; -export default function RSIChart({ datas }) { +export default function RSIChart({ datas, isShow }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.RSI); const RSIValue = useSelector((state) => state.indicatorValues.values.RSI); @@ -47,7 +47,7 @@ export default function RSIChart({ datas }) { }); dispatch(setChartDatas(updatedDatas)); } - }, [isActive]); + }, [isActive, RSIValue, isShow]); const pricesDisplayFormat = format(".2f"); diff --git a/src/components/invest/chart/Indicators/sub/STOCH.jsx b/src/components/invest/chart/Indicators/sub/STOCH.jsx index 7ad6266..9deed61 100644 --- a/src/components/invest/chart/Indicators/sub/STOCH.jsx +++ b/src/components/invest/chart/Indicators/sub/STOCH.jsx @@ -1,11 +1,11 @@ import React, { useEffect } from 'react'; -import { BarSeries, Chart, LineSeries, MACDSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; -import { getMACDChart, getSTOCHChart, getSTOCHFChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { getSTOCHChart } from '../../../../../store/reducers/Chart/Indicators/sub'; import { format } from 'd3-format'; -export default function STOCHChart({ datas }) { +export default function STOCHChart({ datas, isShow }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.STOCH); const STOCHValue = useSelector((state) => state.indicatorValues.values.STOCH); @@ -53,7 +53,7 @@ export default function STOCHChart({ datas }) { }); dispatch(setChartDatas(updatedDatas)); } - }, [isActive]); + }, [isActive, STOCHValue, isShow]); const pricesDisplayFormat = format(".2f"); diff --git a/src/components/invest/chart/Indicators/sub/STOCHFast.jsx b/src/components/invest/chart/Indicators/sub/STOCHFast.jsx index 81cfeaa..07d98f6 100644 --- a/src/components/invest/chart/Indicators/sub/STOCHFast.jsx +++ b/src/components/invest/chart/Indicators/sub/STOCHFast.jsx @@ -1,11 +1,11 @@ import React, { useEffect } from 'react'; -import { BarSeries, Chart, LineSeries, MACDSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; -import { getMACDChart, getSTOCHFChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { getSTOCHFChart } from '../../../../../store/reducers/Chart/Indicators/sub'; import { format } from 'd3-format'; -export default function STOCHFChart({ datas }) { +export default function STOCHFChart({ datas, isShow }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.STOCHF); const STOCHFValue = useSelector((state) => state.indicatorValues.values.STOCHF); @@ -52,7 +52,7 @@ export default function STOCHFChart({ datas }) { }); dispatch(setChartDatas(updatedDatas)); } - }, [isActive]); + }, [isActive, STOCHFValue, isShow]); const pricesDisplayFormat = format(".2f"); diff --git a/src/components/invest/chart/Indicators/sub/STOCHRSIChart.jsx b/src/components/invest/chart/Indicators/sub/STOCHRSIChart.jsx new file mode 100644 index 0000000..f824a65 --- /dev/null +++ b/src/components/invest/chart/Indicators/sub/STOCHRSIChart.jsx @@ -0,0 +1,68 @@ +import React, { useEffect } from 'react'; +import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getSTOCHRSIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { format } from 'd3-format'; + +export default function STOCHRSIChart({ datas, isShow }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.STOCHRSI); + const STOCHRSIValue = useSelector((state) => state.indicatorValues.values.STOCHRSI); + + const calculateSTOCHRSI = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.stochRsiK; + delete newItem.stochRsiD; + return newItem; + }); + + const newData = [...updatedDatas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const outFastK = data.result.outFastK; + const outFastD = data.result.outFastD; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["stochRsiK"]: outFastK[i], // 새로운 속성 추가 + ["stochRsiD"]: outFastD[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "Date" : STOCHRSIValue[0], + "period_K" : STOCHRSIValue[1], + "period_D" : STOCHRSIValue[2] + } + dispatch(getSTOCHRSIChart(data)) + .then((res) => calculateSTOCHRSI(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.stochRsiK; + delete newItem.stochRsiD; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive, STOCHRSIValue, isShow]); + + const pricesDisplayFormat = format(".2f"); + + return ( + <> + + + d.stochRsiK} strokeStyle='#680A08' /> + d.stochRsiD} strokeStyle='#A8693D' /> + + ) +} diff --git a/src/components/invest/chart/Indicators/sub/TRIXChart.jsx b/src/components/invest/chart/Indicators/sub/TRIXChart.jsx index 4c74b0e..6166e7f 100644 --- a/src/components/invest/chart/Indicators/sub/TRIXChart.jsx +++ b/src/components/invest/chart/Indicators/sub/TRIXChart.jsx @@ -2,10 +2,10 @@ import React, { useEffect } from 'react'; import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; -import { getADChart, getATRChart, getCCIChart, getTRIXChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { getTRIXChart } from '../../../../../store/reducers/Chart/Indicators/sub'; import { format } from 'd3-format'; -export default function TRIXChart({ datas }) { +export default function TRIXChart({ datas, isShow }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.TRIX); const TRIXValue = useSelector((state) => state.indicatorValues.values.TRIX); @@ -47,7 +47,7 @@ export default function TRIXChart({ datas }) { }); dispatch(setChartDatas(updatedDatas)); } - }, [isActive]); + }, [isActive, TRIXValue, isShow]); const pricesDisplayFormat = format(".2f"); diff --git a/src/components/invest/chart/Indicators/sub/ULTOSCChart.jsx b/src/components/invest/chart/Indicators/sub/ULTOSCChart.jsx new file mode 100644 index 0000000..be3d111 --- /dev/null +++ b/src/components/invest/chart/Indicators/sub/ULTOSCChart.jsx @@ -0,0 +1,63 @@ +import React, { useEffect } from 'react'; +import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { useDispatch, useSelector } from 'react-redux'; +import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; +import { getULTOSCChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { format } from 'd3-format'; + +export default function ULTOSCChart({ datas, isShow }) { + const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator.ULTOSC); + const ULTOSCValue = useSelector((state) => state.indicatorValues.values.ULTOSC); + + const calculateULTOSC = (data) => { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.ultosc; + return newItem; + }); + + const newData = [...updatedDatas]; + + const f_idx = data.begIndex; + const l_idx = data.nbElement; + const ultosc = data.result.outReal; + for (let i = 0; i < l_idx; i++) { + newData[f_idx + i] = { + ...newData[f_idx + i], // 기존 객체를 복사 + ["ultosc"]: ultosc[i], // 새로운 속성 추가 + }; + } + dispatch(setChartDatas(newData)); + } + + useEffect(() => { + if (isActive) { + const data = { + "chart": datas, + "longPeriod" : ULTOSCValue[0], + "middlePeriod" : ULTOSCValue[1], + "shortPeriod" : ULTOSCValue[2] + } + dispatch(getULTOSCChart(data)) + .then((res) => calculateULTOSC(res.payload)) + } else if (!isActive) { + const updatedDatas = datas.map(item => { + const newItem = { ...item }; + delete newItem.ultosc; + return newItem; + }); + dispatch(setChartDatas(updatedDatas)); + } + }, [isActive, ULTOSCValue, isShow]); + + const pricesDisplayFormat = format(".2f"); + + return ( + <> + + + d.ultosc} strokeStyle='#680A08' /> + + ) +} diff --git a/src/components/invest/chart/Indicators/sub/WILLRChart.jsx b/src/components/invest/chart/Indicators/sub/WILLRChart.jsx index a9abb43..14853df 100644 --- a/src/components/invest/chart/Indicators/sub/WILLRChart.jsx +++ b/src/components/invest/chart/Indicators/sub/WILLRChart.jsx @@ -2,10 +2,10 @@ import React, { useEffect } from 'react'; import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; -import { getADChart, getATRChart, getCCIChart, getTRIXChart, getWILLRChart } from '../../../../../store/reducers/Chart/Indicators/sub'; +import { getWILLRChart } from '../../../../../store/reducers/Chart/Indicators/sub'; import { format } from 'd3-format'; -export default function WILLRChart({ datas }) { +export default function WILLRChart({ datas, isShow }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.WILLR); const WILLRValue = useSelector((state) => state.indicatorValues.values.WILLR); @@ -47,7 +47,7 @@ export default function WILLRChart({ datas }) { }); dispatch(setChartDatas(updatedDatas)); } - }, [isActive]); + }, [isActive, WILLRValue, isShow]); const pricesDisplayFormat = format(".2f"); diff --git a/src/components/invest/chart/MainChart.jsx b/src/components/invest/chart/MainChart.jsx index bd35eb2..4a67710 100644 --- a/src/components/invest/chart/MainChart.jsx +++ b/src/components/invest/chart/MainChart.jsx @@ -21,6 +21,8 @@ import { MACDSeries, } from "react-financial-charts"; +import default_Img from "../../../../public/icon/+.svg"; + import { useSelector, useDispatch } from 'react-redux'; import styled from "styled-components"; import { getChartDatas, setChartDatas } from "../../../store/reducers/Chart/chart"; @@ -32,8 +34,6 @@ import EMAChart from "./Indicators/chart/EMAChart"; import BBANDSChart from "./Indicators/chart/BBANDSChart"; import SARChart from "./Indicators/chart/SARChart"; import MACDChart from "./Indicators/sub/MACDChart"; -import { getMACDChart } from "../../../store/reducers/Chart/Indicators/sub"; -import STOCHFastChart from "./Indicators/sub/STOCHFast"; import STOCHFChart from "./Indicators/sub/STOCHFast"; import STOCHChart from "./Indicators/sub/STOCH"; import RSIChart from "./Indicators/sub/RSIChart"; @@ -51,21 +51,55 @@ import DMIChart from "./Indicators/sub/DMIChart"; import ADXChart from "./Indicators/sub/ADXChart"; import ADXRChart from "./Indicators/sub/ADXRChart"; import AROONChart from "./Indicators/sub/AROONChart"; +import AROONOSCChart from "./Indicators/sub/AROONOSCChart"; +import STOCHRSIChart from "./Indicators/sub/STOCHRSIChart"; +import ULTOSCChart from "./Indicators/sub/ULTOSCChart"; +import PPOChart from "./Indicators/sub/PPOChart"; export default function MainChart({ toggleCharts, toggleIndicators }) { const dataList = useSelector((state) => state.chart.datas) - console.log(dataList) const company = useSelector((state) => state.company.data) const dispatch = useDispatch(); const [isShow, setIsShow] = useState(false); + + function getData(format) { + const date = new Date(); + const formattedDate = date.toISOString().slice(0, 10).replace(/-/g, ""); + const data = { + "code" : company.code, + "start_date" : "19990101", + "end_date" : formattedDate, + "time_format" : format + } + + dispatch(getChartDatas(data)) + } useEffect(() => { - // getData() - dispatch(getChartDatas()) - .then(() => setIsShow(true)) + // 초기 데이터 '일' + const date = new Date(); + const formattedDate = date.toISOString().slice(0, 10).replace(/-/g, ""); + const data = { + "code" : company.code, + "start_date" : "19990101", + "end_date" : formattedDate, + "time_format" : "D" + } + + dispatch(getChartDatas(data)) + .then(() => setIsShow(prev => !prev)) + + // // 1분마다 요청 보내기 + // const intervalId = setInterval(() => { + // dispatch(getChartDatas(data)) + // .then(() => setIsShow(prev => !prev)) + // }, 60000); // 1분 = 60,000 밀리초 - }, []) + // // 컴포넌트가 언마운트될 때 타이머 정리 + // return () => clearInterval(intervalId); + + }, [company]) const ScaleProvider = discontinuousTimeScaleProviderBuilder().inputDateAccessor( (d) => { @@ -89,18 +123,21 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { const pricesDisplayFormat = format(".2f"); const x_max = xAccessor(data[data.length - 1]); const x_min = xAccessor(data[Math.max(0, data.length - 100)]); - const xExtents = [x_min, x_max + 5]; + const xExtents = [x_min, x_max + 2]; const gridHeight = height - margin.top - margin.bottom; + + // 클릭한 보조지표 + const subIndi = useSelector((state) => state.clickIndicator.subIndi); - const barChartHeight = gridHeight / 4; + // default : 4 + const barChartHeight = subIndi.length < 3 ? gridHeight / 4 : gridHeight / 6; // 차트 추가될 때마다 origin 변경해주어야 함 - const barChartOrigin = (_, h) => [0, gridHeight - 2 * barChartHeight]; - const MACDChartOrigin = (_, h) => [0 , gridHeight - barChartHeight]; + const barChartOrigin = (_, h) => [0, gridHeight - (subIndi.length + 1) * barChartHeight]; // * (차트 개수) - const chartHeight = gridHeight - barChartHeight * 2; + const chartHeight = gridHeight - barChartHeight * (subIndi.length + 1); const yExtents = (data) => { return [data.high, data.low]; @@ -112,11 +149,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { const HoverDisplayFormat = timeFormat(hoverTimeFormat); const barChartExtents = (data) => { - return [data.volume - 10000000, data.volume + 10000000]; - }; - - const STOCHFChartExtents = (data) => { - return [data.outFastK - 50, data.outFastD + 50]; + return [data.volume, data.volume]; }; const candleChartExtents = (data) => { @@ -171,33 +204,59 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { }; } - function BarChartContent() { - return ({ currentItem, xAccessor }) => { - return { - x: HoverDisplayFormat(xAccessor(currentItem)), - y: [ - { - label: "거래량", - value: currentItem.volume && pricesDisplayFormat(currentItem.volume) - }, - ] - }; - }; - } + const getLogoFileName = (name, code) => { + if (name.includes("스팩")) { + return "SPAC_230706"; + } else if (name.includes("ETN")) { + return "ETN_230706"; + } else if ( + name.includes("KODEX") || + name.includes("KOSEF") || + name.includes("KoAct") || + name.includes("TIGER") || + name.includes("ACE") || + name.includes("ARIRANG") || + name.includes("합성 H") || + name.includes("HANARO") || + name.includes("SOL") + ) { + return "ETF_230706"; + } else { + return `kr/${code}`; + } + }; + + const onErrorImg = (e) => { + e.target.src = default_Img; + }; return ( - + {company.name} {company.code} {company.index} - - - - + + + + + + + + + + + + - + yScale(0)} + /> {/* MACD 차트 */} @@ -270,141 +333,216 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { */} {/* STOCHF 차트 */} - {/* [data.outFastK - 50, data.outFastD + 50]} - origin={MACDChartOrigin} - > - - */} + {subIndi.includes('STOCHF') && ( + [data.outFastK - 50, data.outFastD + 50]} + origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('STOCHF')) * barChartHeight]} + > + + + )} {/* STOCHF 차트 */} - {/* [data.outSlowK - 50, data.outSlowD + 50]} - origin={MACDChartOrigin} - > - - */} + {subIndi.includes('STOCH') && ( + [data.outSlowK - 50, data.outSlowD + 50]} + origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('STOCH')) * barChartHeight]} + > + + + )} {/* RSI 차트 */} - {/* [data.rsi - 20, data.rsi + 20]} - origin={MACDChartOrigin} - > - - */} + {subIndi.includes('RSI') && ( + [data.rsi - 20, data.rsi + 20]} + origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('RSI')) * barChartHeight]} + > + + + )} {/* CCI 차트 */} - {/* [data.cci - 100, data.cci + 100]} - origin={MACDChartOrigin} - > - - */} + {subIndi.includes('CCI') && ( + [data.cci - 100, data.cci + 100]} + origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('CCI')) * barChartHeight]} + > + + + )} {/* MOM 차트 */} - {/* [data.mom - 1000, data.mom + 1000]} - origin={MACDChartOrigin} - > - - */} + {subIndi.includes('MOM') && ( + [data.mom - 1000, data.mom + 1000]} + origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('MOM')) * barChartHeight]} + > + + + )} {/* ROC 차트 */} - {/* [data.roc - 5, data.roc + 5]} - origin={MACDChartOrigin} - > - - */} + {subIndi.includes('ROC') && ( + [data.roc - 5, data.roc + 5]} + origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ROC')) * barChartHeight]} + > + + + )} {/* AD 차트 */} - {/* [data.ad - 5000000, data.ad + 5000000]} - origin={MACDChartOrigin} - > - - */} + {subIndi.includes('AD') && ( + [data.ad - 5000000, data.ad + 5000000]} + origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('AD')) * barChartHeight]} + > + + + )} {/* ATR 차트 */} - {/* [data.atr - 100, data.atr + 100]} - origin={MACDChartOrigin} - > - - */} + {subIndi.includes('ATR') && ( + [data.atr - 100, data.atr + 100]} + origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ATR')) * barChartHeight]} + > + + + )} {/* MFI 차트 */} - {/* [data.mfi - 10, data.mfi + 10]} - origin={MACDChartOrigin} - > - - */} + {subIndi.includes('MFI') && ( + [data.mfi - 10, data.mfi + 10]} + origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('MFI')) * barChartHeight]} + > + + + )} {/* OBV 차트 */} - {/* [data.obv - 50000000, data.obv + 50000000]} - origin={MACDChartOrigin} - > - - */} + {subIndi.includes('OBV') && ( + [data.obv - 50000000, data.obv + 50000000]} + origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('OBV')) * barChartHeight]} + > + + + )} {/* ADOSC 차트 */} - {/* [data.adosc - 10000000, data.adosc + 10000000]} - origin={MACDChartOrigin} - > - - */} + {subIndi.includes('ADOSC') && ( + [data.adosc - 10000000, data.adosc + 10000000]} + origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ADOSC')) * barChartHeight]} + > + + + )} {/* TRIX 차트 */} - {/* [data.trix - 0.1, data.trix + 0.1]} - origin={MACDChartOrigin} - > - - */} + {subIndi.includes('TRIX') && ( + [data.trix - 0.1, data.trix + 0.1]} + origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('TRIX')) * barChartHeight]} + > + + + )} {/* WILLR 차트 */} - {/* [data.willr - 30, data.willr + 30]} - origin={MACDChartOrigin} - > - - */} + {subIndi.includes('WILLR') && ( + [data.willr - 30, data.willr + 30]} + origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('WILLR')) * barChartHeight]} + > + + + )} {/* DMI (DX) 차트 */} {/* 값 제대로 받아오는지 확인 필요 */} - {/* [data.dx - 10, data.dx + 10]} - origin={MACDChartOrigin} - > - - */} + {subIndi.includes('DX') && ( + [data.dx - 10, data.dx + 10]} + origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('DX')) * barChartHeight]} + > + + + )} {/* ADX 차트 */} - {/* [data.adx - 5, data.adx + 5]} - origin={MACDChartOrigin} - > - - */} - - {/* ADXR 차트 */} - {/* [data.adxr - 10, data.adxr + 10]} - origin={MACDChartOrigin} - > - - */} + {subIndi.includes('ADX') && ( + [data.adx - 5, data.adx + 5]} + origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ADX')) * barChartHeight]} + > + + + )} {/* ADXR 차트 */} - [data.aroon - 10, data.aroon + 10]} - origin={MACDChartOrigin} - > - - + {subIndi.includes('ADXR') && ( + [data.adxr - 10, data.adxr + 10]} + origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ADXR')) * barChartHeight]} + > + + + )} + + {/* AROON 차트 */} + {subIndi.includes('AROON') && ( + [data.aroon - 10, data.aroon + 10]} + origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('AROON')) * barChartHeight]} + > + + + )} + + {/* AROONOSC 차트 */} + {subIndi.includes('AROONOSC') && ( + [data.aroonosc - 10, data.aroonosc + 10]} + origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('AROONOSC')) * barChartHeight]} + > + + + )} + + {/* STOCHRSI 차트 */} + {subIndi.includes('STOCHRSI') && ( + [data.stochRsiK - 10, data.stochRsiD + 10]} + origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('STOCHRSI')) * barChartHeight]} + > + + + )} + + {/* ULTOSC 차트 */} + {subIndi.includes('ULTOSC') && ( + [data.ultosc - 10, data.ultosc + 10]} + origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ULTOSC')) * barChartHeight]} + > + + + )} + + {/* PPO 차트 */} + {/* PPO Signal 데이터인듯 */} + {subIndi.includes('PPO') && ( + [data.ppo - 1, data.ppo + 1]} + origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('PPO')) * barChartHeight]} + > + + + )} ); @@ -446,4 +584,8 @@ const SubFont = styled.span` const Content = styled.div` display: flex; align-items: center; -`; \ No newline at end of file +`; + +const BtnContainer = styled.div` + display: flex; +` \ No newline at end of file diff --git a/src/components/invest/left-bar/Indicators.jsx b/src/components/invest/left-bar/Indicators.jsx index 1e687be..ef5745b 100644 --- a/src/components/invest/left-bar/Indicators.jsx +++ b/src/components/invest/left-bar/Indicators.jsx @@ -4,7 +4,7 @@ import IndicatorDetail from "./IndicatorDetail"; // import indiData from "../../../../public/Json/indiData.json"; import indiData from '../../../Json/indiData.json' import { useDispatch, useSelector } from "react-redux"; -import { setActiveSub, setDisactiveSub } from "../../../store/reducers/Chart/Indicators/clickIndicators"; +import { setActiveSub, setDisactiveSub, setSubIndi } from "../../../store/reducers/Chart/Indicators/clickIndicators"; const Indicators = ({ onClose }) => { const [showDetail, setShowDetail] = useState( @@ -19,19 +19,20 @@ const Indicators = ({ onClose }) => { }); }; - // 데이터를 넣을 빈배열 const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator); + const subIndi = useSelector((state) => state.clickIndicator.subIndi); // 1️⃣ onChange함수를 사용하여 이벤트 감지, 필요한 값 받아오기 const onCheckedElement = (checked, item) => { if (checked) { dispatch(setActiveSub(item)) + dispatch(setSubIndi([...subIndi, item])) } else if (!checked) { dispatch(setDisactiveSub(item)) + dispatch(setSubIndi(subIndi.filter(el => el !== item))) } }; - const isActive = useSelector((state) => state.clickIndicator); - return ( diff --git a/src/components/invest/left-bar/MyStockList.jsx b/src/components/invest/left-bar/MyStockList.jsx index 0d3a6da..28c8962 100644 --- a/src/components/invest/left-bar/MyStockList.jsx +++ b/src/components/invest/left-bar/MyStockList.jsx @@ -157,7 +157,7 @@ const MyStockList = () => { key={result._id} onClick={() => { console.log(""); - // dispatch(setClickCompany(result)); + dispatch(setClickCompany(result)); }} > { - // const { code, start_date, end_date, time_format } = data; - const response = await getChartData(); + const response = await getChartData(data); return response.data; } ) diff --git a/src/store/store.js b/src/store/store.js index 83e6bf4..93b40c8 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -27,8 +27,17 @@ const rootPersistConfig = { key: "root", storage: storage, // whitelist: ["chartValues", "indicatorValues"], - blacklist: ["getSubIndicator"], - whitelist: ["user", "chartValues", "indicatorValues", "search"], + whitelist: [ + "user", + "chartValues", + "indicatorValues", + "search", + "chart", + "clickIndicator", + "getChartIndicator", + "getSubIndicator", + "company" + ], }; const rootReducer = persistReducer( From c8ca8cee6f2d1d42418ccf9e483b076bafa78440 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Wed, 20 Mar 2024 08:29:05 +0900 Subject: [PATCH 57/84] =?UTF-8?q?feat:=20=EB=B3=B4=EC=A1=B0=EC=A7=80?= =?UTF-8?q?=ED=91=9C=20valuetooltip=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../invest/chart/Indicators/sub/ADChart.jsx | 10 +++- .../chart/Indicators/sub/ADOSCChart.jsx | 10 +++- .../invest/chart/Indicators/sub/ADXChart.jsx | 10 +++- .../invest/chart/Indicators/sub/ADXRChart.jsx | 10 +++- .../chart/Indicators/sub/AROONChart.jsx | 10 +++- .../chart/Indicators/sub/AROONOSCChart.jsx | 10 +++- .../invest/chart/Indicators/sub/ATRChart.jsx | 10 +++- .../invest/chart/Indicators/sub/CCIChart.jsx | 10 +++- .../invest/chart/Indicators/sub/DMIChart.jsx | 10 +++- .../invest/chart/Indicators/sub/MFIChart.jsx | 10 +++- .../invest/chart/Indicators/sub/MOMChart.jsx | 10 +++- .../invest/chart/Indicators/sub/OBVChart.jsx | 10 +++- .../invest/chart/Indicators/sub/PPOChart.jsx | 10 +++- .../invest/chart/Indicators/sub/ROCChart.jsx | 10 +++- .../invest/chart/Indicators/sub/RSIChart.jsx | 10 +++- .../invest/chart/Indicators/sub/STOCH.jsx | 10 +++- .../invest/chart/Indicators/sub/STOCHFast.jsx | 10 +++- .../chart/Indicators/sub/STOCHRSIChart.jsx | 10 +++- .../invest/chart/Indicators/sub/TRIXChart.jsx | 2 +- .../chart/Indicators/sub/ULTOSCChart.jsx | 2 +- .../chart/Indicators/sub/WILLRChart.jsx | 2 +- src/components/invest/chart/MainChart.jsx | 55 +++++++++++++------ src/lib/apis/chart.jsx | 4 ++ src/store/reducers/Chart/Indicators/chart.jsx | 25 ++++++++- src/store/reducers/Chart/chart.jsx | 13 ++++- src/store/reducers/Chart/clickCompany.jsx | 12 +--- 26 files changed, 223 insertions(+), 72 deletions(-) diff --git a/src/components/invest/chart/Indicators/sub/ADChart.jsx b/src/components/invest/chart/Indicators/sub/ADChart.jsx index 39eb895..16b3a7e 100644 --- a/src/components/invest/chart/Indicators/sub/ADChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ADChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getADChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -47,13 +47,19 @@ export default function ADChart({ datas, isShow }) { } }, [isActive, isShow]); - const pricesDisplayFormat = format(".2f"); + const pricesDisplayFormat = format(","); return ( <> d.ad} strokeStyle='#680A08' /> + d.ad} + yLabel="AD Line" + yDisplayFormat={format(",")} + /> ) } diff --git a/src/components/invest/chart/Indicators/sub/ADOSCChart.jsx b/src/components/invest/chart/Indicators/sub/ADOSCChart.jsx index 8facebd..e085dc2 100644 --- a/src/components/invest/chart/Indicators/sub/ADOSCChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ADOSCChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getADOSCChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -50,13 +50,19 @@ export default function ADOSCChart({ datas, isShow }) { } }, [isActive, ADOSCValue, isShow]); - const pricesDisplayFormat = format(".2f"); + const pricesDisplayFormat = format(","); return ( <> d.adosc} strokeStyle='#680A08' /> + d.adosc} + yLabel="Chaikin Oscillator" + yDisplayFormat={format(",")} + /> ) } diff --git a/src/components/invest/chart/Indicators/sub/ADXChart.jsx b/src/components/invest/chart/Indicators/sub/ADXChart.jsx index ad3b6ce..da69133 100644 --- a/src/components/invest/chart/Indicators/sub/ADXChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ADXChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getADXChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -49,13 +49,19 @@ export default function ADXChart({ datas, isShow }) { } }, [isActive, ADXValue, isShow]); - const pricesDisplayFormat = format(".2f"); + const pricesDisplayFormat = format(","); return ( <> d.adx} strokeStyle='#680A08' /> + d.adx} + yLabel="ADX" + yDisplayFormat={format(",")} + /> ) } diff --git a/src/components/invest/chart/Indicators/sub/ADXRChart.jsx b/src/components/invest/chart/Indicators/sub/ADXRChart.jsx index 710fb69..45a7bcc 100644 --- a/src/components/invest/chart/Indicators/sub/ADXRChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ADXRChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getADXRChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -49,13 +49,19 @@ export default function ADXRChart({ datas, isShow }) { } }, [isActive, ADXRValue, isShow]); - const pricesDisplayFormat = format(".2f"); + const pricesDisplayFormat = format(","); return ( <> d.adxr} strokeStyle='#680A08' /> + d.adxr} + yLabel="ADXR" + yDisplayFormat={format(",")} + /> ) } diff --git a/src/components/invest/chart/Indicators/sub/AROONChart.jsx b/src/components/invest/chart/Indicators/sub/AROONChart.jsx index 8df48ac..8841fae 100644 --- a/src/components/invest/chart/Indicators/sub/AROONChart.jsx +++ b/src/components/invest/chart/Indicators/sub/AROONChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getAROONChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -49,13 +49,19 @@ export default function AROONChart({ datas, isShow }) { } }, [isActive, AROONValue, isShow]); - const pricesDisplayFormat = format(".2f"); + const pricesDisplayFormat = format(","); return ( <> d.aroon} strokeStyle='#680A08' /> + d.aroon} + yLabel="Aroon" + yDisplayFormat={format(",")} + /> ) } diff --git a/src/components/invest/chart/Indicators/sub/AROONOSCChart.jsx b/src/components/invest/chart/Indicators/sub/AROONOSCChart.jsx index c205604..8aa4981 100644 --- a/src/components/invest/chart/Indicators/sub/AROONOSCChart.jsx +++ b/src/components/invest/chart/Indicators/sub/AROONOSCChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { BarSeries, XAxis, YAxis } from 'react-financial-charts'; +import { BarSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getAROONOSCChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -49,7 +49,7 @@ export default function AROONOSCChart({ datas, isShow }) { } }, [isActive, AROONOSCValue, isShow]); - const pricesDisplayFormat = format(".2f"); + const pricesDisplayFormat = format(","); const volumeColor = (data) => { return data.aroonosc > 0 ? "#EDD02B" @@ -65,6 +65,12 @@ export default function AROONOSCChart({ datas, isShow }) { yAccessor={d => d.aroonosc} baseAt={(xScale, yScale, d) => yScale(0)} /> + d.aroonosc} + yLabel="Aroon Oscillator" + yDisplayFormat={format(",")} + /> ) } diff --git a/src/components/invest/chart/Indicators/sub/ATRChart.jsx b/src/components/invest/chart/Indicators/sub/ATRChart.jsx index 74d8299..47f87b1 100644 --- a/src/components/invest/chart/Indicators/sub/ATRChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ATRChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getATRChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -49,13 +49,19 @@ export default function ATRChart({ datas, isShow }) { } }, [isActive, ATRValue, isShow]); - const pricesDisplayFormat = format(".2f"); + const pricesDisplayFormat = format(","); return ( <> d.atr} strokeStyle='#680A08' /> + d.atr} + yLabel="ATR" + yDisplayFormat={format(",")} + /> ) } diff --git a/src/components/invest/chart/Indicators/sub/CCIChart.jsx b/src/components/invest/chart/Indicators/sub/CCIChart.jsx index d935c71..e74575c 100644 --- a/src/components/invest/chart/Indicators/sub/CCIChart.jsx +++ b/src/components/invest/chart/Indicators/sub/CCIChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getCCIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -49,13 +49,19 @@ export default function CCIChart({ datas, isShow }) { } }, [isActive, CCIValue, isShow]); - const pricesDisplayFormat = format(".2f"); + const pricesDisplayFormat = format(","); return ( <> d.cci} strokeStyle='#680A08' /> + d.cci} + yLabel="CCI" + yDisplayFormat={format(",")} + /> ) } diff --git a/src/components/invest/chart/Indicators/sub/DMIChart.jsx b/src/components/invest/chart/Indicators/sub/DMIChart.jsx index 20dba9a..cd95c5b 100644 --- a/src/components/invest/chart/Indicators/sub/DMIChart.jsx +++ b/src/components/invest/chart/Indicators/sub/DMIChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getDXChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -49,13 +49,19 @@ export default function DMIChart({ datas, isShow }) { } }, [isActive, DXValue, isShow]); - const pricesDisplayFormat = format(".2f"); + const pricesDisplayFormat = format(","); return ( <> d.dx} strokeStyle='#680A08' /> + d.dx} + yLabel="DMI" + yDisplayFormat={format(",")} + /> ) } diff --git a/src/components/invest/chart/Indicators/sub/MFIChart.jsx b/src/components/invest/chart/Indicators/sub/MFIChart.jsx index 0d0b544..ba510a6 100644 --- a/src/components/invest/chart/Indicators/sub/MFIChart.jsx +++ b/src/components/invest/chart/Indicators/sub/MFIChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getMFIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -49,13 +49,19 @@ export default function MFIChart({ datas, isShow }) { } }, [isActive, MFIValue, isShow]); - const pricesDisplayFormat = format(".2f"); + const pricesDisplayFormat = format(","); return ( <> d.mfi} strokeStyle='#680A08' /> + d.mfi} + yLabel="MFI" + yDisplayFormat={format(",")} + /> ) } diff --git a/src/components/invest/chart/Indicators/sub/MOMChart.jsx b/src/components/invest/chart/Indicators/sub/MOMChart.jsx index 4383e4a..c7b4ed3 100644 --- a/src/components/invest/chart/Indicators/sub/MOMChart.jsx +++ b/src/components/invest/chart/Indicators/sub/MOMChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getMOMChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -49,13 +49,19 @@ export default function MOMChart({ datas, isShow }) { } }, [isActive, MOMValue, isShow]); - const pricesDisplayFormat = format(".2f"); + const pricesDisplayFormat = format(","); return ( <> d.mom} strokeStyle='#680A08' /> + d.mom} + yLabel="모멘텀" + yDisplayFormat={format(",")} + /> ) } diff --git a/src/components/invest/chart/Indicators/sub/OBVChart.jsx b/src/components/invest/chart/Indicators/sub/OBVChart.jsx index 13a07c5..66f755d 100644 --- a/src/components/invest/chart/Indicators/sub/OBVChart.jsx +++ b/src/components/invest/chart/Indicators/sub/OBVChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getOBVChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -47,13 +47,19 @@ export default function OBVChart({ datas, isShow }) { } }, [isActive, isShow]); - const pricesDisplayFormat = format(".2f"); + const pricesDisplayFormat = format(","); return ( <> d.obv} strokeStyle='#680A08' /> + d.obv} + yLabel="OBV" + yDisplayFormat={format(",")} + /> ) } diff --git a/src/components/invest/chart/Indicators/sub/PPOChart.jsx b/src/components/invest/chart/Indicators/sub/PPOChart.jsx index 656ee18..4c0b70d 100644 --- a/src/components/invest/chart/Indicators/sub/PPOChart.jsx +++ b/src/components/invest/chart/Indicators/sub/PPOChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getPPOChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -50,13 +50,19 @@ export default function PPOChart({ datas, isShow }) { } }, [isActive, PPOValue, isShow]); - const pricesDisplayFormat = format(".2f"); + const pricesDisplayFormat = format(","); return ( <> d.ppo} strokeStyle='#680A08' /> + d.ppo} + yLabel="PPO" + yDisplayFormat={format(",")} + /> ) } diff --git a/src/components/invest/chart/Indicators/sub/ROCChart.jsx b/src/components/invest/chart/Indicators/sub/ROCChart.jsx index 07f3362..6ed023b 100644 --- a/src/components/invest/chart/Indicators/sub/ROCChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ROCChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getROCChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -49,13 +49,19 @@ export default function ROCChart({ datas, isShow }) { } }, [isActive, ROCValue, isShow]); - const pricesDisplayFormat = format(".2f"); + const pricesDisplayFormat = format(","); return ( <> d.roc} strokeStyle='#680A08' /> + d.roc} + yLabel="ROC" + yDisplayFormat={format(",")} + /> ) } diff --git a/src/components/invest/chart/Indicators/sub/RSIChart.jsx b/src/components/invest/chart/Indicators/sub/RSIChart.jsx index 37ee3c1..08abb16 100644 --- a/src/components/invest/chart/Indicators/sub/RSIChart.jsx +++ b/src/components/invest/chart/Indicators/sub/RSIChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getRSIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -49,13 +49,19 @@ export default function RSIChart({ datas, isShow }) { } }, [isActive, RSIValue, isShow]); - const pricesDisplayFormat = format(".2f"); + const pricesDisplayFormat = format(","); return ( <> d.rsi} strokeStyle='#680A08' /> + d.rsi} + yLabel="RSI" + yDisplayFormat={format(",")} + /> ) } diff --git a/src/components/invest/chart/Indicators/sub/STOCH.jsx b/src/components/invest/chart/Indicators/sub/STOCH.jsx index 9deed61..a8641ec 100644 --- a/src/components/invest/chart/Indicators/sub/STOCH.jsx +++ b/src/components/invest/chart/Indicators/sub/STOCH.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getSTOCHChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -55,7 +55,7 @@ export default function STOCHChart({ datas, isShow }) { } }, [isActive, STOCHValue, isShow]); - const pricesDisplayFormat = format(".2f"); + const pricesDisplayFormat = format(","); return ( <> @@ -63,6 +63,12 @@ export default function STOCHChart({ datas, isShow }) { d.outSlowK} strokeStyle='#680A08' /> d.outSlowD} strokeStyle='#A8693D' /> + d.outSlowK} + yLabel="Stochastic Slow" + yDisplayFormat={format(",")} + /> ) } diff --git a/src/components/invest/chart/Indicators/sub/STOCHFast.jsx b/src/components/invest/chart/Indicators/sub/STOCHFast.jsx index 07d98f6..aef20c7 100644 --- a/src/components/invest/chart/Indicators/sub/STOCHFast.jsx +++ b/src/components/invest/chart/Indicators/sub/STOCHFast.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getSTOCHFChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -54,7 +54,7 @@ export default function STOCHFChart({ datas, isShow }) { } }, [isActive, STOCHFValue, isShow]); - const pricesDisplayFormat = format(".2f"); + const pricesDisplayFormat = format(","); return ( <> @@ -62,6 +62,12 @@ export default function STOCHFChart({ datas, isShow }) { d.outFastK} strokeStyle='#680A08' /> d.outFastD} strokeStyle='#A8693D' /> + d.outFastK} + yLabel="Stochastic Fast" + yDisplayFormat={format(",")} + /> ) } diff --git a/src/components/invest/chart/Indicators/sub/STOCHRSIChart.jsx b/src/components/invest/chart/Indicators/sub/STOCHRSIChart.jsx index f824a65..69ccc90 100644 --- a/src/components/invest/chart/Indicators/sub/STOCHRSIChart.jsx +++ b/src/components/invest/chart/Indicators/sub/STOCHRSIChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getSTOCHRSIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -55,7 +55,7 @@ export default function STOCHRSIChart({ datas, isShow }) { } }, [isActive, STOCHRSIValue, isShow]); - const pricesDisplayFormat = format(".2f"); + const pricesDisplayFormat = format(","); return ( <> @@ -63,6 +63,12 @@ export default function STOCHRSIChart({ datas, isShow }) { d.stochRsiK} strokeStyle='#680A08' /> d.stochRsiD} strokeStyle='#A8693D' /> + d.stochRsiK} + yLabel="Stochastic RSI" + yDisplayFormat={format(",")} + /> ) } diff --git a/src/components/invest/chart/Indicators/sub/TRIXChart.jsx b/src/components/invest/chart/Indicators/sub/TRIXChart.jsx index 6166e7f..2ccedc3 100644 --- a/src/components/invest/chart/Indicators/sub/TRIXChart.jsx +++ b/src/components/invest/chart/Indicators/sub/TRIXChart.jsx @@ -49,7 +49,7 @@ export default function TRIXChart({ datas, isShow }) { } }, [isActive, TRIXValue, isShow]); - const pricesDisplayFormat = format(".2f"); + const pricesDisplayFormat = format(","); return ( <> diff --git a/src/components/invest/chart/Indicators/sub/ULTOSCChart.jsx b/src/components/invest/chart/Indicators/sub/ULTOSCChart.jsx index be3d111..0c637da 100644 --- a/src/components/invest/chart/Indicators/sub/ULTOSCChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ULTOSCChart.jsx @@ -51,7 +51,7 @@ export default function ULTOSCChart({ datas, isShow }) { } }, [isActive, ULTOSCValue, isShow]); - const pricesDisplayFormat = format(".2f"); + const pricesDisplayFormat = format(","); return ( <> diff --git a/src/components/invest/chart/Indicators/sub/WILLRChart.jsx b/src/components/invest/chart/Indicators/sub/WILLRChart.jsx index 14853df..1df2ff2 100644 --- a/src/components/invest/chart/Indicators/sub/WILLRChart.jsx +++ b/src/components/invest/chart/Indicators/sub/WILLRChart.jsx @@ -49,7 +49,7 @@ export default function WILLRChart({ datas, isShow }) { } }, [isActive, WILLRValue, isShow]); - const pricesDisplayFormat = format(".2f"); + const pricesDisplayFormat = format(","); return ( <> diff --git a/src/components/invest/chart/MainChart.jsx b/src/components/invest/chart/MainChart.jsx index 4a67710..41761a2 100644 --- a/src/components/invest/chart/MainChart.jsx +++ b/src/components/invest/chart/MainChart.jsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react"; import ReactDOM from "react-dom"; -import { format } from "d3-format"; +import { format, formatLocale } from "d3-format"; import { timeFormat } from "d3-time-format"; import { discontinuousTimeScaleProviderBuilder, @@ -19,13 +19,15 @@ import { ZoomButtons, HoverTooltip, MACDSeries, + MovingAverageTooltip, + SingleValueTooltip, } from "react-financial-charts"; import default_Img from "../../../../public/icon/+.svg"; import { useSelector, useDispatch } from 'react-redux'; import styled from "styled-components"; -import { getChartDatas, setChartDatas } from "../../../store/reducers/Chart/chart"; +import { getChartDatas, getMinuteDatas, setChartDatas } from "../../../store/reducers/Chart/chart"; // 차트지표 import SMAChart from "./Indicators/chart/SMAChart"; @@ -76,6 +78,24 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { dispatch(getChartDatas(data)) } + // function getMinuteData(code) { + // const data = { + // "code" : code, + // } + + // dispatch(getMinuteDatas(data)) + // .then(() => setIsShow(prev => !prev)) + + // // 1분마다 요청 보내기 + // const intervalId = setInterval(() => { + // dispatch(getMinuteDatas(data)) + // .then(() => setIsShow(prev => !prev)) + // }, 60000); // 1분 = 60,000 밀리초 + + // // 컴포넌트가 언마운트될 때 타이머 정리 + // return () => clearInterval(intervalId); + // } + useEffect(() => { // 초기 데이터 '일' const date = new Date(); @@ -88,16 +108,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { } dispatch(getChartDatas(data)) - .then(() => setIsShow(prev => !prev)) - - // // 1분마다 요청 보내기 - // const intervalId = setInterval(() => { - // dispatch(getChartDatas(data)) - // .then(() => setIsShow(prev => !prev)) - // }, 60000); // 1분 = 60,000 밀리초 - - // // 컴포넌트가 언마운트될 때 타이머 정리 - // return () => clearInterval(intervalId); + .then(() => setIsShow(prev => !prev)) }, [company]) @@ -113,14 +124,15 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { const margin = { left: 0, right: 78, top: 0, bottom: 24 }; const height = 760; - const width = 1150; + const width = 1190; const { data, xScale, xAccessor, displayXAccessor } = ScaleProvider( dataList ); // 소수점 이하 둘째짜리까지만 표현 - const pricesDisplayFormat = format(".2f"); + const pricesDisplayFormat = format(','); + const x_max = xAccessor(data[data.length - 1]); const x_min = xAccessor(data[Math.max(0, data.length - 100)]); const xExtents = [x_min, x_max + 2]; @@ -251,6 +263,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { + @@ -316,11 +329,17 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { yExtents={barChartExtents} > - + yScale(0)} + /> + + d.volume} + yLabel="거래량" + yDisplayFormat={format(",")} /> @@ -335,7 +354,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { {/* STOCHF 차트 */} {subIndi.includes('STOCHF') && ( [data.outFastK - 50, data.outFastD + 50]} + yExtents={data => [data.outFastK - 50, data.outFastK + 50]} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('STOCHF')) * barChartHeight]} > @@ -345,7 +364,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { {/* STOCHF 차트 */} {subIndi.includes('STOCH') && ( [data.outSlowK - 50, data.outSlowD + 50]} + yExtents={data => [data.outSlowK - 50, data.outSlowK + 50]} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('STOCH')) * barChartHeight]} > diff --git a/src/lib/apis/chart.jsx b/src/lib/apis/chart.jsx index 7042162..730f026 100644 --- a/src/lib/apis/chart.jsx +++ b/src/lib/apis/chart.jsx @@ -4,6 +4,10 @@ export async function getChartData(data) { return await chartInstance.post('/stockPrice', data) } +export async function getMinuteData(data) { + return await chartInstance.post('/stockPrice/minute', data) +} + export async function getSMA(data) { return await subChartInstance.post('/SMA', data) } diff --git a/src/store/reducers/Chart/Indicators/chart.jsx b/src/store/reducers/Chart/Indicators/chart.jsx index 49bac83..b165947 100644 --- a/src/store/reducers/Chart/Indicators/chart.jsx +++ b/src/store/reducers/Chart/Indicators/chart.jsx @@ -3,6 +3,10 @@ import { getBBANDS, getEMA, getSAR, getSMA, getWMA } from "../../../../lib/apis/ const initialState = { SMADatas: [], + WMADatas: [], + EMADatas: [], + BBANDSDatas: [], + SARDatas: [], }; export const getSMAChart = createAsyncThunk( @@ -54,12 +58,27 @@ const chartIndicatorSlice = createSlice({ name: "chartIndicator", initialState: initialState, reducers: { + setSMADatas(state, action) { + state.SMADatas = action.payload; + }, + setWMADatas(state, action) { + state.WMADatas = action.payload; + }, + setEMADatas(state, action) { + state.EMADatas = action.payload; + }, + setBBANDSDatas(state, action) { + state.BBANDSDatas = action.payload; + }, + setSARDatas(state, action) { + state.SARDatas = action.payload; + }, }, extraReducers: (builder) => { - builder.addCase(getSMAChart.fulfilled, (state, action) => { - state.SMADatas = action.payload; - }) }, }); +const { setSMADatas, setWMADatas, setEMADatas, setBBANDSDatas, setSARDatas } = chartIndicatorSlice.actions; +export { setSMADatas, setWMADatas, setEMADatas, setBBANDSDatas, setSARDatas }; + export default chartIndicatorSlice.reducer; diff --git a/src/store/reducers/Chart/chart.jsx b/src/store/reducers/Chart/chart.jsx index e4f5b96..dceb463 100644 --- a/src/store/reducers/Chart/chart.jsx +++ b/src/store/reducers/Chart/chart.jsx @@ -1,5 +1,5 @@ import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; -import { getChartData } from '../../../lib/apis/chart' +import { getChartData, getMinuteData } from '../../../lib/apis/chart' const initialState = { datas: [], @@ -13,6 +13,14 @@ export const getChartDatas = createAsyncThunk( } ) +export const getMinuteDatas = createAsyncThunk( + "chart/getMinuteData", + async (data, tunkAPI) => { + const response = await getMinuteData(data); + return response.data; + } +) + const chartSlice = createSlice({ name: "chart", initialState: initialState, @@ -24,6 +32,9 @@ const chartSlice = createSlice({ extraReducers: (builder) => { builder.addCase(getChartDatas.fulfilled, (state, action) => { state.datas = action.payload.reverse(); + }), + builder.addCase(getMinuteDatas.fulfilled, (state, action) => { + state.datas = action.payload.reverse(); }) }, }); diff --git a/src/store/reducers/Chart/clickCompany.jsx b/src/store/reducers/Chart/clickCompany.jsx index 607d42f..8556f78 100644 --- a/src/store/reducers/Chart/clickCompany.jsx +++ b/src/store/reducers/Chart/clickCompany.jsx @@ -1,17 +1,7 @@ import { createSlice } from "@reduxjs/toolkit"; const initialState = { - data: { - accvolume: "333333", - code: "005930", - favorite: true, - id: 1, - index: "코스피", - name: "삼성전자", - prdy_vrss: "1100", - price: "72800", - returns: "0.55%", - } + data: {} }; const companySlice = createSlice({ From 4781511e8a39f00e023c834d073f0fe9a3a84596 Mon Sep 17 00:00:00 2001 From: chaeheonjeong Date: Wed, 20 Mar 2024 08:29:27 +0900 Subject: [PATCH 58/84] feat: rigt-bar price book --- package-lock.json | 15 +- package.json | 3 +- src/components/invest/chart/MainChart.jsx | 528 +++++++++--------- .../invest/left-bar/MyStockList.jsx | 5 +- src/components/invest/right-bar/OrderBook.jsx | 12 + src/components/invest/right-bar/PriceBook.jsx | 160 ++++++ src/routes/SideLayout.jsx | 3 +- src/routes/Trading/TradingPage.jsx | 160 +++++- src/routes/mainLayout.jsx | 6 +- 9 files changed, 608 insertions(+), 284 deletions(-) create mode 100644 src/components/invest/right-bar/OrderBook.jsx create mode 100644 src/components/invest/right-bar/PriceBook.jsx diff --git a/package-lock.json b/package-lock.json index ed361c5..64c7513 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,8 @@ "redux": "^5.0.1", "redux-logger": "^3.0.6", "redux-persist": "^6.0.0", - "styled-components": "^6.1.8" + "styled-components": "^6.1.8", + "uuid": "^9.0.1" }, "devDependencies": { "@types/react": "^18.2.56", @@ -5120,6 +5121,18 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/uuid": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", + "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/vite": { "version": "5.1.5", "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.5.tgz", diff --git a/package.json b/package.json index 8111c68..0205388 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,8 @@ "redux": "^5.0.1", "redux-logger": "^3.0.6", "redux-persist": "^6.0.0", - "styled-components": "^6.1.8" + "styled-components": "^6.1.8", + "uuid": "^9.0.1" }, "devDependencies": { "@types/react": "^18.2.56", diff --git a/src/components/invest/chart/MainChart.jsx b/src/components/invest/chart/MainChart.jsx index 182d7da..461b3b4 100644 --- a/src/components/invest/chart/MainChart.jsx +++ b/src/components/invest/chart/MainChart.jsx @@ -1,294 +1,294 @@ -import React, { useEffect, useState } from "react"; -import ReactDOM from "react-dom"; -import { format } from "d3-format"; -import { timeFormat } from "d3-time-format"; -import { - elderRay, - ema, - discontinuousTimeScaleProviderBuilder, - Chart, - ChartCanvas, - CurrentCoordinate, - BarSeries, - CandlestickSeries, - ElderRaySeries, - LineSeries, - MovingAverageTooltip, - OHLCTooltip, - SingleValueTooltip, - lastVisibleItemBasedZoomAnchor, - XAxis, - YAxis, - CrossHairCursor, - EdgeIndicator, - MouseCoordinateX, - MouseCoordinateY, - ZoomButtons, - withDeviceRatio, - withSize, - HoverTooltip, -} from "react-financial-charts"; -import { chartInstance } from '../../../lib/apis/api'; -import { useSelector, useDispatch } from 'react-redux'; -// import { getChartDatas } from '../../../store/reducers/Chart/chart' -import styled from "styled-components"; -// import SMAChart from "./subChart/SMAChart"; +// import React, { useEffect, useState } from "react"; +// import ReactDOM from "react-dom"; +// import { format } from "d3-format"; +// import { timeFormat } from "d3-time-format"; +// import { +// elderRay, +// ema, +// discontinuousTimeScaleProviderBuilder, +// Chart, +// ChartCanvas, +// CurrentCoordinate, +// BarSeries, +// CandlestickSeries, +// ElderRaySeries, +// LineSeries, +// MovingAverageTooltip, +// OHLCTooltip, +// SingleValueTooltip, +// lastVisibleItemBasedZoomAnchor, +// XAxis, +// YAxis, +// CrossHairCursor, +// EdgeIndicator, +// MouseCoordinateX, +// MouseCoordinateY, +// ZoomButtons, +// withDeviceRatio, +// withSize, +// HoverTooltip, +// } from "react-financial-charts"; +// import { chartInstance } from '../../../lib/apis/api'; +// import { useSelector, useDispatch } from 'react-redux'; +// // import { getChartDatas } from '../../../store/reducers/Chart/chart' +// import styled from "styled-components"; +// // import SMAChart from "./subChart/SMAChart"; -export default function MainChart({ toggleCharts, toggleIndicators }) { - // const dataList = useSelector((state) => state.chart.datas) - const company = useSelector((state) => state.company.data) - // const dispatch = useDispatch(); - const [datas, setDatas] = useState([]); - async function getData() { - const data = await chartInstance.post('/stockPrice', { - "code" : "005930", - "start_date" : "19990101", - "end_date" : "20240313", - // 분, 일, 월, 연봉 - "time_format" : "D" - }) - setDatas(data.data.reverse()); - } +// export default function MainChart({ toggleCharts, toggleIndicators }) { +// // const dataList = useSelector((state) => state.chart.datas) +// const company = useSelector((state) => state.company.data) +// // const dispatch = useDispatch(); +// const [datas, setDatas] = useState([]); +// async function getData() { +// const data = await chartInstance.post('/stockPrice', { +// "code" : "005930", +// "start_date" : "19990101", +// "end_date" : "20240313", +// // 분, 일, 월, 연봉 +// "time_format" : "D" +// }) +// setDatas(data.data.reverse()); +// } - useEffect(() => { - getData(); - // dispatch(getChartDatas()) - // .then((res) => { - // console.log('data payload',res.payload) - // }) +// useEffect(() => { +// getData(); +// // dispatch(getChartDatas()) +// // .then((res) => { +// // console.log('data payload',res.payload) +// // }) - // console.log('데이터:', dataList) - }, []) +// // console.log('데이터:', dataList) +// }, []) - useEffect(() => { - console.log('company: ',company) - // accvolume: "333333" - // code: "005930" - // favorite: true - // id: 1 - // index: "코스피" - // name: "삼성전자" - // prdy_vrss: "1100" - // price: "72800" - // returns: "0.55%" - }, [company]) +// useEffect(() => { +// console.log('company: ',company) +// // accvolume: "333333" +// // code: "005930" +// // favorite: true +// // id: 1 +// // index: "코스피" +// // name: "삼성전자" +// // prdy_vrss: "1100" +// // price: "72800" +// // returns: "0.55%" +// }, [company]) - const ScaleProvider = discontinuousTimeScaleProviderBuilder().inputDateAccessor( - (d) => { - const year = d.date.substr(0, 4) - const month = d.date.substr(4, 2) - const day = d.date.substr(6, 2) - const nDate = `${year}-${month}-${day}` - return new Date(nDate) - } - ); - const margin = { left: 0, right: 78, top: 0, bottom: 24 }; +// const ScaleProvider = discontinuousTimeScaleProviderBuilder().inputDateAccessor( +// (d) => { +// const year = d.date.substr(0, 4) +// const month = d.date.substr(4, 2) +// const day = d.date.substr(6, 2) +// const nDate = `${year}-${month}-${day}` +// return new Date(nDate) +// } +// ); +// const margin = { left: 0, right: 78, top: 0, bottom: 24 }; - const height = 800; - const width = 1150; +// const height = 800; +// const width = 1150; - const { data, xScale, xAccessor, displayXAccessor } = ScaleProvider( - datas - ); +// const { data, xScale, xAccessor, displayXAccessor } = ScaleProvider( +// datas +// ); - // 소수점 이하 둘째짜리까지만 표현 - const pricesDisplayFormat = format(".2f"); - const x_max = xAccessor(data[data.length - 1]); - const x_min = xAccessor(data[Math.max(0, data.length - 100)]); - const xExtents = [x_min, x_max + 5]; +// // 소수점 이하 둘째짜리까지만 표현 +// const pricesDisplayFormat = format(".2f"); +// const x_max = xAccessor(data[data.length - 1]); +// const x_min = xAccessor(data[Math.max(0, data.length - 100)]); +// const xExtents = [x_min, x_max + 5]; - const gridHeight = height - margin.top - margin.bottom; +// const gridHeight = height - margin.top - margin.bottom; - const elder = elderRay(); - const elderRayHeight = 100; - const elderRayOrigin = (_, h) => [0, h]; - const barChartHeight = gridHeight / 4; - const barChartOrigin = (_, h) => [0, h - barChartHeight]; - const chartHeight = gridHeight - barChartHeight; - const yExtents = (data) => { - return [data.high, data.low]; - }; - const dateTimeFormat = "%d %b"; - const timeDisplayFormat = timeFormat(dateTimeFormat); +// const elder = elderRay(); +// const elderRayHeight = 100; +// const elderRayOrigin = (_, h) => [0, h]; +// const barChartHeight = gridHeight / 4; +// const barChartOrigin = (_, h) => [0, h - barChartHeight]; +// const chartHeight = gridHeight - barChartHeight; +// const yExtents = (data) => { +// return [data.high, data.low]; +// }; +// const dateTimeFormat = "%d %b"; +// const timeDisplayFormat = timeFormat(dateTimeFormat); - const hoverTimeFormat = "%B %d, %Y"; - const HoverDisplayFormat = timeFormat(hoverTimeFormat); +// const hoverTimeFormat = "%B %d, %Y"; +// const HoverDisplayFormat = timeFormat(hoverTimeFormat); - const barChartExtents = (data) => { - return data.volume; - }; +// const barChartExtents = (data) => { +// return data.volume; +// }; - const candleChartExtents = (data) => { - return [data.high, data.low]; - }; +// const candleChartExtents = (data) => { +// return [data.high, data.low]; +// }; - const yEdgeIndicator = (data) => { - return data.close; - }; +// const yEdgeIndicator = (data) => { +// return data.close; +// }; - const volumeColor = (data) => { - return data.close > data.open - ? "rgba(38, 166, 154, 0.3)" - : "rgba(239, 83, 80, 0.3)"; - }; +// const volumeColor = (data) => { +// return data.close > data.open +// ? "rgba(38, 166, 154, 0.3)" +// : "rgba(239, 83, 80, 0.3)"; +// }; - const volumeSeries = (data) => { - return data.volume; - }; +// const volumeSeries = (data) => { +// return data.volume; +// }; - const openCloseColor = (data) => { - return data.close > data.open ? "#26a69a" : "#ef5350"; - }; +// const openCloseColor = (data) => { +// return data.close > data.open ? "#26a69a" : "#ef5350"; +// }; - function tooltipContent() { - return ({ currentItem, xAccessor }) => { - return { - x: HoverDisplayFormat(xAccessor(currentItem)), - y: [ - { - label: "시가", - value: currentItem.open && pricesDisplayFormat(currentItem.open) - }, - { - label: "고가", - value: currentItem.high && pricesDisplayFormat(currentItem.high) - }, - { - label: "저가", - value: currentItem.low && pricesDisplayFormat(currentItem.low) - }, - { - label: "종가", - value: currentItem.close && pricesDisplayFormat(currentItem.close) - }, - { - label: "거래량", - value: currentItem.volume && pricesDisplayFormat(currentItem.volume) - }, - ] - }; - }; - } +// function tooltipContent() { +// return ({ currentItem, xAccessor }) => { +// return { +// x: HoverDisplayFormat(xAccessor(currentItem)), +// y: [ +// { +// label: "시가", +// value: currentItem.open && pricesDisplayFormat(currentItem.open) +// }, +// { +// label: "고가", +// value: currentItem.high && pricesDisplayFormat(currentItem.high) +// }, +// { +// label: "저가", +// value: currentItem.low && pricesDisplayFormat(currentItem.low) +// }, +// { +// label: "종가", +// value: currentItem.close && pricesDisplayFormat(currentItem.close) +// }, +// { +// label: "거래량", +// value: currentItem.volume && pricesDisplayFormat(currentItem.volume) +// }, +// ] +// }; +// }; +// } - function volumeContent() { - return ({ currentItem, xAccessor }) => { - return { - x: HoverDisplayFormat(xAccessor(currentItem)), - y: [ - { - label: "거래량", - value: currentItem.volume && pricesDisplayFormat(currentItem.volume) - }, - ] - }; - }; - } +// function volumeContent() { +// return ({ currentItem, xAccessor }) => { +// return { +// x: HoverDisplayFormat(xAccessor(currentItem)), +// y: [ +// { +// label: "거래량", +// value: currentItem.volume && pricesDisplayFormat(currentItem.volume) +// }, +// ] +// }; +// }; +// } - return ( - - - - - {company.name} - {company.code} {company.index} - - - - - - - - {/* 거래량 차트 */} - - - - - - - {/* 분봉 호버했을 때, 날짜/시가/종가/고가/저가 표시 */} - - - - +// return ( +// +// +// +// +// {company.name} +// {company.code} {company.index} +// +// +// +// +// +// +// +// {/* 거래량 차트 */} +// +// +// +// +// +// +// {/* 분봉 호버했을 때, 날짜/시가/종가/고가/저가 표시 */} +// +// +// +// - {/* */} +// {/* */} - - - +// +// +// - - - - - - - ); -} +// +// +// +// +// +// +// ); +// } -const Container = styled.div` - display: flex; - flex-direction: column; -` +// const Container = styled.div` +// display: flex; +// flex-direction: column; +// ` -const CompanyContainer = styled.div` - display: flex; - align-items: center; - padding: 5px; -` +// const CompanyContainer = styled.div` +// display: flex; +// align-items: center; +// padding: 5px; +// ` -const CompanyLogo = styled.img` - width: 40px; - height: 40px; - border-radius: 999px; - margin-right: 10px; -` +// const CompanyLogo = styled.img` +// width: 40px; +// height: 40px; +// border-radius: 999px; +// margin-right: 10px; +// ` -const FontContainer = styled.div` - display: flex; - flex-direction: column; -` +// const FontContainer = styled.div` +// display: flex; +// flex-direction: column; +// ` -const MainFont = styled.span` - font-weight: 700; -` +// const MainFont = styled.span` +// font-weight: 700; +// ` -const SubFont = styled.span` - font-size: 12px; -` +// const SubFont = styled.span` +// font-size: 12px; +// ` -const Content = styled.div` - display: flex; - align-items: center; -`; \ No newline at end of file +// const Content = styled.div` +// display: flex; +// align-items: center; +// `; diff --git a/src/components/invest/left-bar/MyStockList.jsx b/src/components/invest/left-bar/MyStockList.jsx index 0d3a6da..1b990ae 100644 --- a/src/components/invest/left-bar/MyStockList.jsx +++ b/src/components/invest/left-bar/MyStockList.jsx @@ -12,8 +12,7 @@ import { setFavoriteArr } from "~/store/reducers/Trading/search"; //TODO : 로고 사진 변경 import default_Img from "../../../../public/icon/+.svg"; import { getCookie } from "~/lib/apis/cookie"; -import clickCompany, { setClickCompany } from "../../../store/reducers/Chart/clickCompany"; - +// import clickCompany, { setClickCompany } from "../../../store/reducers/Chart/clickCompany"; const MyStockList = () => { const isLogin = !!getCookie("token"); @@ -22,7 +21,7 @@ const MyStockList = () => { // const [searchResults, setSearchResults] = useState([]); // const [favoriteArr, setFavoriteArr] = useState([]); const searchRef = useRef(null); - + const dispatch = useDispatch(); const favoriteArr = useSelector((state) => state.search.favoriteArr); const searchResults = useSelector((state) => state.search.searchResults); diff --git a/src/components/invest/right-bar/OrderBook.jsx b/src/components/invest/right-bar/OrderBook.jsx new file mode 100644 index 0000000..6af22d7 --- /dev/null +++ b/src/components/invest/right-bar/OrderBook.jsx @@ -0,0 +1,12 @@ +import React, { useState, useEffect, useRef } from "react"; + +const OrderBook = () => { + return ( +
+ {/* 지정가 + 시장가 */} +
+ ); +}; + +export default OrderBook; diff --git a/src/components/invest/right-bar/PriceBook.jsx b/src/components/invest/right-bar/PriceBook.jsx new file mode 100644 index 0000000..5d06cc7 --- /dev/null +++ b/src/components/invest/right-bar/PriceBook.jsx @@ -0,0 +1,160 @@ +import React, { useState, useEffect, useRef } from "react"; +import { v4 as uuidv4 } from "uuid"; + +const PriceBook = () => { + // 매도 + const sellPriceData = [ + 72200, + 72300, + 72300, + 72300, + 72300, + 72300, + 72300, + 72300, + 72300, + "", + ]; + + // 매수 + const buyPriceData = [ + 72100, + 71000, + 71000, + 71000, + 71000, + 71000, + 71000, + 71000, + 71000, + "", + ]; + + // 매도 잔량 + const sellQuantityData = [ + 260000, + 260000, + 260000, + 260000, + 260000, + 260000, + 260000, + 260000, + 260000, + "", + ]; + + // 매수 잔량 + const buyQuantityData = [ + 260000, + 260000, + 260000, + 260000, + 260000, + 260000, + 260000, + 260000, + 260000, + "", + ]; + + const [sellPrice, setSellPrice] = useState(sellPriceData); + const [buyPrice, setBuyPrice] = useState(buyPriceData); + const [sellQuantity, setSellQuantity] = useState(sellQuantityData); + const [buyQuantity, setBuyQuantity] = useState(buyQuantityData); + const [currentPrice, setCurrentPrice] = useState(72200); + const containerRef = useRef(null); + + const adjustScroll = () => { + const container = containerRef.current; + if (container) { + const scrollTop = (container.scrollHeight - container.clientHeight) / 2; + container.scrollTop = scrollTop; + } + }; + + useEffect(() => { + adjustScroll(); //스크롤 조정 + }, []); + + return ( +
+
+ {Array.from({ length: 10 }) + .map((_, index) => ( +
+ {sellPrice[index] !== "" && ( + <> + + {sellPrice[index].toLocaleString()} + + + {sellQuantity[index].toLocaleString()} + + + )} +
+ )) + .reverse()} +
+ +
+ {Array.from({ length: 10 }).map((_, index) => ( +
+ {buyPrice[index] !== "" && ( + <> + + {buyPrice[index].toLocaleString()} + + + {buyQuantity[index].toLocaleString()} + + + )} +
+ ))} +
+
+ ); +}; + +export default PriceBook; diff --git a/src/routes/SideLayout.jsx b/src/routes/SideLayout.jsx index dc7dd66..8aa8762 100644 --- a/src/routes/SideLayout.jsx +++ b/src/routes/SideLayout.jsx @@ -14,9 +14,8 @@ const SideLayout = () => { const Container = styled.div` display: flex; flex-direction: column; - width: 480px; + width: 400px; position: relative; - overflow: hidden; z-index: 999; background-color: white; border-left: 1px solid #e2e2e2; diff --git a/src/routes/Trading/TradingPage.jsx b/src/routes/Trading/TradingPage.jsx index 04a6adc..c06f05a 100644 --- a/src/routes/Trading/TradingPage.jsx +++ b/src/routes/Trading/TradingPage.jsx @@ -1,15 +1,155 @@ import React, { useState } from "react"; import styled from "styled-components"; +import default_Img from "../../../public/icon/+.svg"; +import { Container } from "react-bootstrap"; +import PriceBook from "../../components/invest/right-bar/PriceBook"; +import OrderBook from "../../components/invest/right-bar/OrderBook"; export default function TradingPage() { - return TradingPage; -} + const [selectedTab, setSelectedTab] = useState("매수"); + + const handleTabClick = (tab) => { + setSelectedTab(tab); + }; + + const getLogoFileName = (name, code) => { + if (name.includes("스팩")) { + return "SPAC_230706"; + } else if (name.includes("ETN")) { + return "ETN_230706"; + } else if ( + name.includes("KODEX") || + name.includes("KOSEF") || + name.includes("KoAct") || + name.includes("TIGER") || + name.includes("ACE") || + name.includes("ARIRANG") || + name.includes("합성 H") || + name.includes("HANARO") || + name.includes("SOL") + ) { + return "ETF_230706"; + } else { + return `kr/${code}`; + } + }; -const Container = styled.div` - display: flex; - flex-direction: row; - width: 100%; - height: 100%; - position: relative; - overflow: hidden; -`; + const onErrorImg = (e) => { + e.target.src = default_Img; + }; + + const Container = styled.div` + width: 400px; + height: 100%; + position: relative; + overflow: hidden; + `; + + return ( + +
+
+ +
+
+
삼성전자
+
+ 005930 + 코스피 +
+
+
+
+
handleTabClick("매수")} + > + 매수 +
+
handleTabClick("매도")} + > + 매도 +
+
handleTabClick("주문내역")} + > + 주문내역 +
+
+ {selectedTab === "매수" || selectedTab === "매도" ? ( +
+ +
+ ) : null} + + ); +} diff --git a/src/routes/mainLayout.jsx b/src/routes/mainLayout.jsx index dd242a7..c08f1f2 100644 --- a/src/routes/mainLayout.jsx +++ b/src/routes/mainLayout.jsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import { Outlet } from "react-router-dom"; import MyNavbar from "../components/MyNavbar"; -import MainChart from "../components/invest/chart/MainChart"; +// import MainChart from "../components/invest/chart/MainChart"; import MyStockList from "../components/invest/left-bar/MyStockList"; import styled from "styled-components"; import ChartIndicators from "../components/invest/left-bar/ChartIndicators"; @@ -40,10 +40,10 @@ export default function MainLayout() { - + /> */} From 395a0786b075a395b9e8633a128d45948d402026 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Wed, 20 Mar 2024 08:29:55 +0900 Subject: [PATCH 59/84] =?UTF-8?q?feat:=20=EB=B3=B4=EC=A1=B0=EC=A7=80?= =?UTF-8?q?=ED=91=9C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/invest/left-bar/MyStockList.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/invest/left-bar/MyStockList.jsx b/src/components/invest/left-bar/MyStockList.jsx index c96d6af..21cb66b 100644 --- a/src/components/invest/left-bar/MyStockList.jsx +++ b/src/components/invest/left-bar/MyStockList.jsx @@ -12,7 +12,7 @@ import { setFavoriteArr } from "~/store/reducers/Trading/search"; //TODO : 로고 사진 변경 import default_Img from "/icon/+.svg"; import { getCookie } from "~/lib/apis/cookie"; -// import clickCompany, { setClickCompany } from "../../../store/reducers/Chart/clickCompany"; +import clickCompany, { setClickCompany } from "../../../store/reducers/Chart/clickCompany"; const MyStockList = () => { const isLogin = !!getCookie("token"); From 0d9c24601a53558e71e83e7ecbbac6be0aa288d6 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Wed, 20 Mar 2024 08:42:33 +0900 Subject: [PATCH 60/84] =?UTF-8?q?refactor:=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/invest/chart/Indicators/sub/TRIXChart.jsx | 8 +++++++- .../invest/chart/Indicators/sub/ULTOSCChart.jsx | 8 +++++++- src/components/invest/chart/Indicators/sub/WILLRChart.jsx | 8 +++++++- src/components/invest/chart/MainChart.jsx | 4 ++-- src/routes/mainLayout.jsx | 6 +++--- 5 files changed, 26 insertions(+), 8 deletions(-) diff --git a/src/components/invest/chart/Indicators/sub/TRIXChart.jsx b/src/components/invest/chart/Indicators/sub/TRIXChart.jsx index 2ccedc3..80a7b57 100644 --- a/src/components/invest/chart/Indicators/sub/TRIXChart.jsx +++ b/src/components/invest/chart/Indicators/sub/TRIXChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getTRIXChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -56,6 +56,12 @@ export default function TRIXChart({ datas, isShow }) { d.trix} strokeStyle='#680A08' /> + d.trix} + yLabel="TRIX" + yDisplayFormat={format(",")} + /> ) } diff --git a/src/components/invest/chart/Indicators/sub/ULTOSCChart.jsx b/src/components/invest/chart/Indicators/sub/ULTOSCChart.jsx index 0c637da..c256f0c 100644 --- a/src/components/invest/chart/Indicators/sub/ULTOSCChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ULTOSCChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getULTOSCChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -58,6 +58,12 @@ export default function ULTOSCChart({ datas, isShow }) { d.ultosc} strokeStyle='#680A08' /> + d.ultosc} + yLabel="Ultimate Oscillator" + yDisplayFormat={format(",")} + /> ) } diff --git a/src/components/invest/chart/Indicators/sub/WILLRChart.jsx b/src/components/invest/chart/Indicators/sub/WILLRChart.jsx index 1df2ff2..ae86da7 100644 --- a/src/components/invest/chart/Indicators/sub/WILLRChart.jsx +++ b/src/components/invest/chart/Indicators/sub/WILLRChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getWILLRChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -56,6 +56,12 @@ export default function WILLRChart({ datas, isShow }) { d.willr} strokeStyle='#680A08' /> + d.willr} + yLabel="Williams %R" + yDisplayFormat={format(",")} + /> ) } diff --git a/src/components/invest/chart/MainChart.jsx b/src/components/invest/chart/MainChart.jsx index b3d152a..f3807b0 100644 --- a/src/components/invest/chart/MainChart.jsx +++ b/src/components/invest/chart/MainChart.jsx @@ -124,7 +124,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { const margin = { left: 0, right: 78, top: 0, bottom: 24 }; const height = 760; - const width = 1190; + const width = 1250; const { data, xScale, xAccessor, displayXAccessor } = ScaleProvider( dataList @@ -570,7 +570,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { const Container = styled.div` display: flex; flex-direction: column; - width: calc(100vw - 720px); + width: calc(100vw - 650px); padding: 0 10px; ` diff --git a/src/routes/mainLayout.jsx b/src/routes/mainLayout.jsx index 9916d40..6970745 100644 --- a/src/routes/mainLayout.jsx +++ b/src/routes/mainLayout.jsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import { Outlet } from "react-router-dom"; import MyNavbar from "../components/MyNavbar"; -// import MainChart from "../components/invest/chart/MainChart"; +import MainChart from "../components/invest/chart/MainChart"; import MyStockList from "../components/invest/left-bar/MyStockList"; import styled from "styled-components"; import ChartIndicators from "../components/invest/left-bar/ChartIndicators"; @@ -40,10 +40,10 @@ export default function MainLayout() { - {/* */} + /> From 09ba7ddd0f44e4bb95830214988e4677d6bd9adc Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Wed, 20 Mar 2024 08:50:19 +0900 Subject: [PATCH 61/84] =?UTF-8?q?fix:=20=EC=98=A4=EB=A5=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/reducers/Chart/clickCompany.jsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/store/reducers/Chart/clickCompany.jsx b/src/store/reducers/Chart/clickCompany.jsx index 8556f78..895375a 100644 --- a/src/store/reducers/Chart/clickCompany.jsx +++ b/src/store/reducers/Chart/clickCompany.jsx @@ -1,7 +1,14 @@ import { createSlice } from "@reduxjs/toolkit"; const initialState = { - data: {} + data: { + code: "005930", + market: "kospi", + market_code: "KR7005930003", + name: "삼성전자", + __v: 0, + _id: "65f24176b5fd9b9fdc483b63", + } }; const companySlice = createSlice({ From daf0654b6ec514c6a90d2c70fb4d0c0a2b63000b Mon Sep 17 00:00:00 2001 From: Tomk2d <150140536+Tomk2d@users.noreply.github.com> Date: Wed, 20 Mar 2024 15:43:55 +0900 Subject: [PATCH 62/84] Add files via upload --- src/store/nowPrice.js | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 src/store/nowPrice.js diff --git a/src/store/nowPrice.js b/src/store/nowPrice.js new file mode 100644 index 0000000..57d08ac --- /dev/null +++ b/src/store/nowPrice.js @@ -0,0 +1,32 @@ +import io from 'socket.io-client'; +const SERVER_URL = 'http://localhost:3000'; + +const socket = io(SERVER_URL); + +export const joinRoom = (stockCode) => { + if (stockCode) { + socket.emit('joinRoom', stockCode); + } +}; + +export const leaveRoom = (stockCode) => { + if (stockCode) { + socket.emit('leaveRoom', stockCode); + } +}; + +export const subscribeNowPrice = (callback) => { + socket.on('nowPrice', message => { + callback(message); + }); + + return () => socket.off('nowPrice'); +}; + +export const subscribeAskPrice = (callback) => { + socket.on('askPrice', message => { + callback(message); + }); + + return () => socket.off('askPrice'); +}; \ No newline at end of file From d8dd7fdbfe8b273039a243d1b05f1f4266b403ff Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Wed, 20 Mar 2024 16:46:22 +0900 Subject: [PATCH 63/84] =?UTF-8?q?feat:=20=EB=B3=B4=EC=A1=B0=EC=A7=80?= =?UTF-8?q?=ED=91=9C=20=EB=94=94=ED=85=8C=EC=9D=BC=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EB=B0=8F=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95=20=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chart/Indicators/chart/BBANDSChart.jsx | 12 +- .../chart/Indicators/chart/EMAChart.jsx | 9 +- .../chart/Indicators/chart/SARChart.jsx | 8 +- .../chart/Indicators/chart/SMAChart.jsx | 9 +- .../chart/Indicators/chart/WMAChart.jsx | 9 +- .../invest/chart/Indicators/sub/ADChart.jsx | 6 +- .../chart/Indicators/sub/ADOSCChart.jsx | 6 +- .../invest/chart/Indicators/sub/ADXChart.jsx | 6 +- .../invest/chart/Indicators/sub/ADXRChart.jsx | 6 +- .../chart/Indicators/sub/AROONChart.jsx | 6 +- .../chart/Indicators/sub/AROONOSCChart.jsx | 3 +- .../invest/chart/Indicators/sub/ATRChart.jsx | 6 +- .../invest/chart/Indicators/sub/CCIChart.jsx | 6 +- .../invest/chart/Indicators/sub/DMIChart.jsx | 6 +- .../invest/chart/Indicators/sub/MACDChart.jsx | 64 ++-- .../invest/chart/Indicators/sub/MFIChart.jsx | 6 +- .../invest/chart/Indicators/sub/MOMChart.jsx | 6 +- .../invest/chart/Indicators/sub/OBVChart.jsx | 6 +- .../invest/chart/Indicators/sub/PPOChart.jsx | 6 +- .../invest/chart/Indicators/sub/ROCChart.jsx | 6 +- .../invest/chart/Indicators/sub/RSIChart.jsx | 6 +- .../invest/chart/Indicators/sub/STOCH.jsx | 17 +- .../invest/chart/Indicators/sub/STOCHFast.jsx | 17 +- .../chart/Indicators/sub/STOCHRSIChart.jsx | 17 +- .../invest/chart/Indicators/sub/TRIXChart.jsx | 6 +- .../chart/Indicators/sub/ULTOSCChart.jsx | 6 +- .../chart/Indicators/sub/WILLRChart.jsx | 6 +- src/components/invest/chart/MainChart.jsx | 339 +++++++++++------- .../invest/left-bar/ChartIndicators.jsx | 25 +- src/components/invest/left-bar/Indicators.jsx | 18 +- .../Chart/Indicators/clickIndicators.jsx | 8 +- src/store/reducers/Chart/chart.jsx | 8 +- src/store/reducers/Chart/clickCompany.jsx | 12 +- 33 files changed, 456 insertions(+), 221 deletions(-) diff --git a/src/components/invest/chart/Indicators/chart/BBANDSChart.jsx b/src/components/invest/chart/Indicators/chart/BBANDSChart.jsx index e96f083..fc62290 100644 --- a/src/components/invest/chart/Indicators/chart/BBANDSChart.jsx +++ b/src/components/invest/chart/Indicators/chart/BBANDSChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { BollingerSeries } from 'react-financial-charts'; +import { BollingerBandTooltip, BollingerSeries } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getBBANDSChart } from '../../../../../store/reducers/Chart/Indicators/chart'; @@ -59,6 +59,16 @@ export default function BBANDSChart({ datas, isShow }) { return ( <> + {/* ( + { + top: d.upper, + middle: d.middle, + bottom: d.lower + } + )} + /> */} ( { diff --git a/src/components/invest/chart/Indicators/chart/EMAChart.jsx b/src/components/invest/chart/Indicators/chart/EMAChart.jsx index d5fc21f..bc41385 100644 --- a/src/components/invest/chart/Indicators/chart/EMAChart.jsx +++ b/src/components/invest/chart/Indicators/chart/EMAChart.jsx @@ -1,10 +1,10 @@ import React, { useEffect } from 'react'; -import { LineSeries } from 'react-financial-charts'; +import { LineSeries, SingleTooltip } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getEMAChart } from '../../../../../store/reducers/Chart/Indicators/chart'; -export default function EMAChart({ datas, isShow }) { +export default function EMAChart({ datas, isShow, chartIndi }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.EMA); const EMAValue = useSelector((state) => state.chartValues.values.EMA); @@ -63,6 +63,11 @@ export default function EMAChart({ datas, isShow }) { return ( <> + {EMAValue.map((value, index) => ( state.clickIndicator.SAR); const SARValue = useSelector((state) => state.chartValues.values.SAR); @@ -51,6 +51,10 @@ export default function SARChart({ datas, isShow }) { return ( <> + d.sar} /> ) diff --git a/src/components/invest/chart/Indicators/chart/SMAChart.jsx b/src/components/invest/chart/Indicators/chart/SMAChart.jsx index 10d43a6..e156038 100644 --- a/src/components/invest/chart/Indicators/chart/SMAChart.jsx +++ b/src/components/invest/chart/Indicators/chart/SMAChart.jsx @@ -1,10 +1,11 @@ import React, { useEffect } from 'react'; -import { LineSeries } from 'react-financial-charts'; +import { Label, LineSeries, MovingAverageTooltip, SingleTooltip, SingleValueTooltip, ToolTipTSpanLabel, ToolTipText } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getSMAChart } from '../../../../../store/reducers/Chart/Indicators/chart'; +import styled from 'styled-components'; -export default function SMAChart({ datas, isShow }) { +export default function SMAChart({ datas, isShow, chartIndi }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.SMA); const SMAValue = useSelector((state) => state.chartValues.values.SMA); @@ -64,6 +65,10 @@ export default function SMAChart({ datas, isShow }) { return ( <> + {SMAValue.map((value, index) => ( state.clickIndicator.WMA); const WMAValue = useSelector((state) => state.chartValues.values.WMA); @@ -63,6 +63,11 @@ export default function WMAChart({ datas, isShow }) { return ( <> + {WMAValue.map((value, index) => ( - d.ad} strokeStyle='#680A08' /> + + d.ad} strokeStyle='#09b01f' strokeWidth={1.3} /> d.ad} yLabel="AD Line" yDisplayFormat={format(",")} + labelFill='#09b01f' /> ) diff --git a/src/components/invest/chart/Indicators/sub/ADOSCChart.jsx b/src/components/invest/chart/Indicators/sub/ADOSCChart.jsx index e085dc2..26b9038 100644 --- a/src/components/invest/chart/Indicators/sub/ADOSCChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ADOSCChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, StraightLine, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getADOSCChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -56,12 +56,14 @@ export default function ADOSCChart({ datas, isShow }) { <> - d.adosc} strokeStyle='#680A08' /> + + d.adosc} strokeStyle='#680A08' strokeWidth={1.3} /> d.adosc} yLabel="Chaikin Oscillator" yDisplayFormat={format(",")} + labelFill='#680A08' /> ) diff --git a/src/components/invest/chart/Indicators/sub/ADXChart.jsx b/src/components/invest/chart/Indicators/sub/ADXChart.jsx index da69133..2425f4c 100644 --- a/src/components/invest/chart/Indicators/sub/ADXChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ADXChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, StraightLine, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getADXChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -55,12 +55,14 @@ export default function ADXChart({ datas, isShow }) { <> - d.adx} strokeStyle='#680A08' /> + + d.adx} strokeStyle='#09b06d' strokeWidth={1.3} /> d.adx} yLabel="ADX" yDisplayFormat={format(",")} + labelFill='#09b06d' /> ) diff --git a/src/components/invest/chart/Indicators/sub/ADXRChart.jsx b/src/components/invest/chart/Indicators/sub/ADXRChart.jsx index 45a7bcc..3982f1d 100644 --- a/src/components/invest/chart/Indicators/sub/ADXRChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ADXRChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, StraightLine, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getADXRChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -55,12 +55,14 @@ export default function ADXRChart({ datas, isShow }) { <> - d.adxr} strokeStyle='#680A08' /> + + d.adxr} strokeStyle='#0989b0' strokeWidth={1.3} /> d.adxr} yLabel="ADXR" yDisplayFormat={format(",")} + labelFill='#0989b0' /> ) diff --git a/src/components/invest/chart/Indicators/sub/AROONChart.jsx b/src/components/invest/chart/Indicators/sub/AROONChart.jsx index 8841fae..8d0f8a5 100644 --- a/src/components/invest/chart/Indicators/sub/AROONChart.jsx +++ b/src/components/invest/chart/Indicators/sub/AROONChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, StraightLine, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getAROONChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -55,12 +55,14 @@ export default function AROONChart({ datas, isShow }) { <> - d.aroon} strokeStyle='#680A08' /> + + d.aroon} strokeStyle='#680A08' strokeWidth={1.3} /> d.aroon} yLabel="Aroon" yDisplayFormat={format(",")} + labelFill='#680A08' /> ) diff --git a/src/components/invest/chart/Indicators/sub/AROONOSCChart.jsx b/src/components/invest/chart/Indicators/sub/AROONOSCChart.jsx index 8aa4981..0829c8f 100644 --- a/src/components/invest/chart/Indicators/sub/AROONOSCChart.jsx +++ b/src/components/invest/chart/Indicators/sub/AROONOSCChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { BarSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; +import { BarSeries, SingleValueTooltip, StraightLine, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getAROONOSCChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -60,6 +60,7 @@ export default function AROONOSCChart({ datas, isShow }) { <> + d.aroonosc} diff --git a/src/components/invest/chart/Indicators/sub/ATRChart.jsx b/src/components/invest/chart/Indicators/sub/ATRChart.jsx index 47f87b1..98d010b 100644 --- a/src/components/invest/chart/Indicators/sub/ATRChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ATRChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, StraightLine, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getATRChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -55,12 +55,14 @@ export default function ATRChart({ datas, isShow }) { <> - d.atr} strokeStyle='#680A08' /> + + d.atr} strokeStyle='#0991b0' strokeWidth={1.3} /> d.atr} yLabel="ATR" yDisplayFormat={format(",")} + labelFill='#0991b0' /> ) diff --git a/src/components/invest/chart/Indicators/sub/CCIChart.jsx b/src/components/invest/chart/Indicators/sub/CCIChart.jsx index e74575c..92fe8ac 100644 --- a/src/components/invest/chart/Indicators/sub/CCIChart.jsx +++ b/src/components/invest/chart/Indicators/sub/CCIChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, StraightLine, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getCCIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -55,12 +55,14 @@ export default function CCIChart({ datas, isShow }) { <> - d.cci} strokeStyle='#680A08' /> + + d.cci} strokeStyle='#6a1cad' strokeWidth={1.3} /> d.cci} yLabel="CCI" yDisplayFormat={format(",")} + labelFill='#6a1cad' /> ) diff --git a/src/components/invest/chart/Indicators/sub/DMIChart.jsx b/src/components/invest/chart/Indicators/sub/DMIChart.jsx index cd95c5b..4a18f78 100644 --- a/src/components/invest/chart/Indicators/sub/DMIChart.jsx +++ b/src/components/invest/chart/Indicators/sub/DMIChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, StraightLine, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getDXChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -55,12 +55,14 @@ export default function DMIChart({ datas, isShow }) { <> - d.dx} strokeStyle='#680A08' /> + + d.dx} strokeStyle='#8109b0' strokeWidth={1.3} /> d.dx} yLabel="DMI" yDisplayFormat={format(",")} + labelFill='#8109b0' /> ) diff --git a/src/components/invest/chart/Indicators/sub/MACDChart.jsx b/src/components/invest/chart/Indicators/sub/MACDChart.jsx index 987c870..6a0396e 100644 --- a/src/components/invest/chart/Indicators/sub/MACDChart.jsx +++ b/src/components/invest/chart/Indicators/sub/MACDChart.jsx @@ -1,23 +1,14 @@ import React, { useEffect } from 'react'; -import { BarSeries, Chart, LineSeries, MACDSeries, XAxis, YAxis } from 'react-financial-charts'; +import { BarSeries, Chart, LineSeries, MACDSeries, MACDTooltip, StraightLine, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getMACDChart } from '../../../../../store/reducers/Chart/Indicators/sub'; import { format } from 'd3-format'; -const macdAppearance = { - stroke: { - macd: "#FF0000", - signal: "#00F300", - }, - fill: { - divergence: "#4682B4" - }, -}; - export default function MACDChart({ datas, isShow }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.MACD); + const MACDValue = useSelector((state) => state.indicatorValues.values.MACD); const calculateMACD = (data) => { const updatedDatas = datas.map(item => { @@ -50,9 +41,9 @@ export default function MACDChart({ datas, isShow }) { if (isActive) { const data = { "chart": datas, - "shortPeriod" : 12, - "longPeriod" : 26, - "signalPeriod" : 9 + "longPeriod" : MACDValue[0], + "shortPeriod" : MACDValue[1], + "signalPeriod" : MACDValue[2] } dispatch(getMACDChart(data)) .then((res) => calculateMACD(res.payload)) @@ -66,22 +57,47 @@ export default function MACDChart({ datas, isShow }) { }); dispatch(setChartDatas(updatedDatas)); } - }, [isActive, isShow]); + }, [isActive, MACDValue, isShow]); - const barChartHeight = 250; - const barChartOrigin = (_, h) => [0, h - barChartHeight]; - const pricesDisplayFormat = format(".2f"); - const MACDChartExtents = (data) => { - return data.macd; - }; + const pricesDisplayFormat = format(","); return ( <> - d.macd} strokeStyle='#680A08' /> - d.macdSignal} strokeStyle='#A8693D' /> - d.macdHist} /> + + ({ + divergence: d.macdHist, + macd: d.macd, + signal: d.macdSignal + })} + strokeStyle={{ + macd: '#680A08', + signal: '#A8693D' + }} + fillStyle={{divergence: d => d.macdHist > 0 ? '#F5E872' : '#A3E79A'}} + /> + ({ + divergence: d.macdHist, + macd: d.macd, + signal: d.macdSignal + })} + appearance={{ + strokeStyle: { + macd: '#680A08', + signal: '#A8693D' + }, + fillStyle: {divergence: d => d.macdHist > 0 ? '#F5E872' : '#A3E79A'} + }} + /> ) } diff --git a/src/components/invest/chart/Indicators/sub/MFIChart.jsx b/src/components/invest/chart/Indicators/sub/MFIChart.jsx index ba510a6..cb3eba9 100644 --- a/src/components/invest/chart/Indicators/sub/MFIChart.jsx +++ b/src/components/invest/chart/Indicators/sub/MFIChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, StraightLine, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getMFIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -55,12 +55,14 @@ export default function MFIChart({ datas, isShow }) { <> - d.mfi} strokeStyle='#680A08' /> + + d.mfi} strokeStyle='#b05109' strokeWidth={1.3} /> d.mfi} yLabel="MFI" yDisplayFormat={format(",")} + labelFill='#b05109' /> ) diff --git a/src/components/invest/chart/Indicators/sub/MOMChart.jsx b/src/components/invest/chart/Indicators/sub/MOMChart.jsx index c7b4ed3..0ea7f97 100644 --- a/src/components/invest/chart/Indicators/sub/MOMChart.jsx +++ b/src/components/invest/chart/Indicators/sub/MOMChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, StraightLine, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getMOMChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -55,12 +55,14 @@ export default function MOMChart({ datas, isShow }) { <> - d.mom} strokeStyle='#680A08' /> + + d.mom} strokeStyle='#c215ae' strokeWidth={1.3} /> d.mom} yLabel="모멘텀" yDisplayFormat={format(",")} + labelFill='#c215ae' /> ) diff --git a/src/components/invest/chart/Indicators/sub/OBVChart.jsx b/src/components/invest/chart/Indicators/sub/OBVChart.jsx index 66f755d..4faccef 100644 --- a/src/components/invest/chart/Indicators/sub/OBVChart.jsx +++ b/src/components/invest/chart/Indicators/sub/OBVChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, StraightLine, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getOBVChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -53,12 +53,14 @@ export default function OBVChart({ datas, isShow }) { <> - d.obv} strokeStyle='#680A08' /> + + d.obv} strokeStyle='#b09409' strokeWidth={1.3} /> d.obv} yLabel="OBV" yDisplayFormat={format(",")} + labelFill='#b09409' /> ) diff --git a/src/components/invest/chart/Indicators/sub/PPOChart.jsx b/src/components/invest/chart/Indicators/sub/PPOChart.jsx index 4c0b70d..173744d 100644 --- a/src/components/invest/chart/Indicators/sub/PPOChart.jsx +++ b/src/components/invest/chart/Indicators/sub/PPOChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, StraightLine, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getPPOChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -56,12 +56,14 @@ export default function PPOChart({ datas, isShow }) { <> - d.ppo} strokeStyle='#680A08' /> + + d.ppo} strokeStyle='#0c5fad' strokeWidth={1.3} /> d.ppo} yLabel="PPO" yDisplayFormat={format(",")} + labelFill='#0c5fad' /> ) diff --git a/src/components/invest/chart/Indicators/sub/ROCChart.jsx b/src/components/invest/chart/Indicators/sub/ROCChart.jsx index 6ed023b..b46000e 100644 --- a/src/components/invest/chart/Indicators/sub/ROCChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ROCChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, StraightLine, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getROCChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -55,12 +55,14 @@ export default function ROCChart({ datas, isShow }) { <> - d.roc} strokeStyle='#680A08' /> + + d.roc} strokeStyle='#c2155a' strokeWidth={1.3} /> d.roc} yLabel="ROC" yDisplayFormat={format(",")} + labelFill='#c2155a' /> ) diff --git a/src/components/invest/chart/Indicators/sub/RSIChart.jsx b/src/components/invest/chart/Indicators/sub/RSIChart.jsx index 08abb16..0ff6ac8 100644 --- a/src/components/invest/chart/Indicators/sub/RSIChart.jsx +++ b/src/components/invest/chart/Indicators/sub/RSIChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, StraightLine, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getRSIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -55,12 +55,14 @@ export default function RSIChart({ datas, isShow }) { <> - d.rsi} strokeStyle='#680A08' /> + + d.rsi} strokeStyle='#15857b' strokeWidth={1.3} /> d.rsi} yLabel="RSI" yDisplayFormat={format(",")} + labelFill='#15857b' /> ) diff --git a/src/components/invest/chart/Indicators/sub/STOCH.jsx b/src/components/invest/chart/Indicators/sub/STOCH.jsx index a8641ec..35f9475 100644 --- a/src/components/invest/chart/Indicators/sub/STOCH.jsx +++ b/src/components/invest/chart/Indicators/sub/STOCH.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, StraightLine, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getSTOCHChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -61,13 +61,22 @@ export default function STOCHChart({ datas, isShow }) { <> - d.outSlowK} strokeStyle='#680A08' /> - d.outSlowD} strokeStyle='#A8693D' /> + + d.outSlowK} strokeStyle='#363602' strokeWidth={1.3} /> + d.outSlowD} strokeStyle='#87870b' strokeWidth={1.3} /> d.outSlowK} - yLabel="Stochastic Slow" + yLabel="Slow STO %K" yDisplayFormat={format(",")} + labelFill='#363602' + /> + d.outSlowD} + yLabel="Slow STO %D" + yDisplayFormat={format(",")} + labelFill='#87870b' /> ) diff --git a/src/components/invest/chart/Indicators/sub/STOCHFast.jsx b/src/components/invest/chart/Indicators/sub/STOCHFast.jsx index aef20c7..3ae0586 100644 --- a/src/components/invest/chart/Indicators/sub/STOCHFast.jsx +++ b/src/components/invest/chart/Indicators/sub/STOCHFast.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, StraightLine, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getSTOCHFChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -60,13 +60,22 @@ export default function STOCHFChart({ datas, isShow }) { <> - d.outFastK} strokeStyle='#680A08' /> - d.outFastD} strokeStyle='#A8693D' /> + + d.outFastK} strokeStyle='#680A08' strokeWidth={1.3} /> + d.outFastD} strokeStyle='#B87A80' strokeWidth={1.3} /> d.outFastK} - yLabel="Stochastic Fast" + yLabel="Fast STO %K" yDisplayFormat={format(",")} + labelFill='#680A08' + /> + d.outFastD} + yLabel="Fast STO %D" + yDisplayFormat={format(",")} + labelFill='#B87A80' /> ) diff --git a/src/components/invest/chart/Indicators/sub/STOCHRSIChart.jsx b/src/components/invest/chart/Indicators/sub/STOCHRSIChart.jsx index 69ccc90..5651de3 100644 --- a/src/components/invest/chart/Indicators/sub/STOCHRSIChart.jsx +++ b/src/components/invest/chart/Indicators/sub/STOCHRSIChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, StraightLine, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getSTOCHRSIChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -61,13 +61,22 @@ export default function STOCHRSIChart({ datas, isShow }) { <> - d.stochRsiK} strokeStyle='#680A08' /> - d.stochRsiD} strokeStyle='#A8693D' /> + + d.stochRsiK} strokeStyle='#04590b' strokeWidth={1.3} /> + d.stochRsiD} strokeStyle='#55a35b' strokeWidth={1.3} /> d.stochRsiK} - yLabel="Stochastic RSI" + yLabel="Stochastic RSI %K" yDisplayFormat={format(",")} + labelFill='#04590b' + /> + d.stochRsiD} + yLabel="Stochastic RSI %D" + yDisplayFormat={format(",")} + labelFill='#55a35b' /> ) diff --git a/src/components/invest/chart/Indicators/sub/TRIXChart.jsx b/src/components/invest/chart/Indicators/sub/TRIXChart.jsx index 80a7b57..aaabc1f 100644 --- a/src/components/invest/chart/Indicators/sub/TRIXChart.jsx +++ b/src/components/invest/chart/Indicators/sub/TRIXChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, StraightLine, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getTRIXChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -55,12 +55,14 @@ export default function TRIXChart({ datas, isShow }) { <> - d.trix} strokeStyle='#680A08' /> + + d.trix} strokeStyle='#b03609' strokeWidth={1.3} /> d.trix} yLabel="TRIX" yDisplayFormat={format(",")} + labelFill='#b03609' /> ) diff --git a/src/components/invest/chart/Indicators/sub/ULTOSCChart.jsx b/src/components/invest/chart/Indicators/sub/ULTOSCChart.jsx index c256f0c..67badc6 100644 --- a/src/components/invest/chart/Indicators/sub/ULTOSCChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ULTOSCChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, StraightLine, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getULTOSCChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -57,12 +57,14 @@ export default function ULTOSCChart({ datas, isShow }) { <> - d.ultosc} strokeStyle='#680A08' /> + + d.ultosc} strokeStyle='#ada50c' strokeWidth={1.3} /> d.ultosc} yLabel="Ultimate Oscillator" yDisplayFormat={format(",")} + labelFill='#ada50c' /> ) diff --git a/src/components/invest/chart/Indicators/sub/WILLRChart.jsx b/src/components/invest/chart/Indicators/sub/WILLRChart.jsx index ae86da7..f35e60c 100644 --- a/src/components/invest/chart/Indicators/sub/WILLRChart.jsx +++ b/src/components/invest/chart/Indicators/sub/WILLRChart.jsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { LineSeries, SingleValueTooltip, XAxis, YAxis } from 'react-financial-charts'; +import { LineSeries, SingleValueTooltip, StraightLine, XAxis, YAxis } from 'react-financial-charts'; import { useDispatch, useSelector } from 'react-redux'; import { setChartDatas } from '../../../../../store/reducers/Chart/chart'; import { getWILLRChart } from '../../../../../store/reducers/Chart/Indicators/sub'; @@ -55,12 +55,14 @@ export default function WILLRChart({ datas, isShow }) { <> - d.willr} strokeStyle='#680A08' /> + + d.willr} strokeStyle='#095db0' strokeWidth={1.3} /> d.willr} yLabel="Williams %R" yDisplayFormat={format(",")} + labelFill='#095db0' /> ) diff --git a/src/components/invest/chart/MainChart.jsx b/src/components/invest/chart/MainChart.jsx index f3807b0..1e39ea6 100644 --- a/src/components/invest/chart/MainChart.jsx +++ b/src/components/invest/chart/MainChart.jsx @@ -27,7 +27,7 @@ import default_Img from "../../../../public/icon/+.svg"; import { useSelector, useDispatch } from 'react-redux'; import styled from "styled-components"; -import { getChartDatas, getMinuteDatas, setChartDatas } from "../../../store/reducers/Chart/chart"; +import { getChartDatas, getMinuteDatas, setChartDatas, setClickDate } from "../../../store/reducers/Chart/chart"; // 차트지표 import SMAChart from "./Indicators/chart/SMAChart"; @@ -57,15 +57,23 @@ import AROONOSCChart from "./Indicators/sub/AROONOSCChart"; import STOCHRSIChart from "./Indicators/sub/STOCHRSIChart"; import ULTOSCChart from "./Indicators/sub/ULTOSCChart"; import PPOChart from "./Indicators/sub/PPOChart"; +import { setCompanyCode } from "../../../store/reducers/Chart/clickCompany"; +import { setChartIndi, setDisactiveSub, setSubIndi } from "../../../store/reducers/Chart/Indicators/clickIndicators"; export default function MainChart({ toggleCharts, toggleIndicators }) { - const dataList = useSelector((state) => state.chart.datas) - const company = useSelector((state) => state.company.data) - const dispatch = useDispatch(); + const dataList = useSelector((state) => state.chart.datas); + const clickDate = useSelector((state) => state.chart.date); + const company = useSelector((state) => state.company.data); + const companyCode = useSelector((state) => state.company.companyCode); + + // 클릭한 보조지표 + const subIndi = useSelector((state) => state.clickIndicator.subIndi); + const chartIndi = useSelector((state) => state.clickIndicator.chartIndi); - const [isShow, setIsShow] = useState(false); + const dispatch = useDispatch(); function getData(format) { + console.log('버튼 클릭 시 데이터 새로 받아옴') const date = new Date(); const formattedDate = date.toISOString().slice(0, 10).replace(/-/g, ""); const data = { @@ -76,42 +84,45 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { } dispatch(getChartDatas(data)) - } - - // function getMinuteData(code) { - // const data = { - // "code" : code, - // } - // dispatch(getMinuteDatas(data)) - // .then(() => setIsShow(prev => !prev)) - - // // 1분마다 요청 보내기 - // const intervalId = setInterval(() => { - // dispatch(getMinuteDatas(data)) - // .then(() => setIsShow(prev => !prev)) - // }, 60000); // 1분 = 60,000 밀리초 - - // // 컴포넌트가 언마운트될 때 타이머 정리 - // return () => clearInterval(intervalId); - // } + // TODO : 일, 주, 월, 년 선택시 지표 초기화되는거 고민해보기 + // 실시간 데이터 받아올 때 수정해야할 수도 있는 부분 + // 차트지표, 보조지표 초기화 + // 새로운 기업의 데이터를 불러올 때는 초기화를 시켜줘야함 + subIndi.map((item, idx) => + dispatch(setDisactiveSub(item)) + ) + + chartIndi.map((item, idx) => + dispatch(setDisactiveSub(item)) + ) + + dispatch(setSubIndi([])) + dispatch(setChartIndi([])) + } useEffect(() => { - // 초기 데이터 '일' - const date = new Date(); - const formattedDate = date.toISOString().slice(0, 10).replace(/-/g, ""); - const data = { - "code" : company.code, - "start_date" : "19990101", - "end_date" : formattedDate, - "time_format" : "D" + // 실시간 데이터 받아올 때 수정해야할 수도 있는 부분 + // 새로운 기업을 클릭했을 때만 데이터 갱신 + if (companyCode !== company.code) { + getData(company.code) + dispatch(setCompanyCode(company.code)) } - - dispatch(getChartDatas(data)) - .then(() => setIsShow(prev => !prev)) }, [company]) + // 일, 주, 월, 년 버튼 색상 변경 + useEffect(() => { + const allBtnArr = ["D", "W", "M", "Y"]; + document.getElementById(clickDate).style.backgroundColor = '#FFE3D7'; + const nonTargetedBtnArr = allBtnArr.filter((item) => item != clickDate); + nonTargetedBtnArr.map((item) => { + document.getElementById(item).style.backgroundColor = "#fff"; + return null; + }); + + }, [clickDate]) + const ScaleProvider = discontinuousTimeScaleProviderBuilder().inputDateAccessor( (d) => { const year = d.date.substr(0, 4) @@ -123,8 +134,9 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { ); const margin = { left: 0, right: 78, top: 0, bottom: 24 }; - const height = 760; - const width = 1250; + // window 사이즈에 맞춘 넓이/높이 + const height = window.innerHeight - 160; + const width = window.innerWidth - 660; const { data, xScale, xAccessor, displayXAccessor } = ScaleProvider( dataList @@ -138,14 +150,11 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { const xExtents = [x_min, x_max + 2]; const gridHeight = height - margin.top - margin.bottom; - - // 클릭한 보조지표 - const subIndi = useSelector((state) => state.clickIndicator.subIndi); // default : 4 const barChartHeight = subIndi.length < 3 ? gridHeight / 4 : gridHeight / 6; - // 차트 추가될 때마다 origin 변경해주어야 함 + // 차트 추가될 때마다 origin 변경 const barChartOrigin = (_, h) => [0, gridHeight - (subIndi.length + 1) * barChartHeight]; // * (차트 개수) @@ -154,18 +163,18 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { const yExtents = (data) => { return [data.high, data.low]; }; - const dateTimeFormat = "%d %b"; + const dateTimeFormat = "%Y/%m/%d"; const timeDisplayFormat = timeFormat(dateTimeFormat); - const hoverTimeFormat = "%B %d, %Y"; + const hoverTimeFormat = "%Y년 %m월 %d일"; const HoverDisplayFormat = timeFormat(hoverTimeFormat); const barChartExtents = (data) => { - return [data.volume, data.volume]; + return data.volume; }; const candleChartExtents = (data) => { - return [data.high + 2000, data.low - 2000]; + return [data.high, data.low]; }; const yEdgeIndicator = (data) => { @@ -195,6 +204,10 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { label: "시가", value: currentItem.open && pricesDisplayFormat(currentItem.open) }, + { + label: "종가", + value: currentItem.close && pricesDisplayFormat(currentItem.close) + }, { label: "고가", value: currentItem.high && pricesDisplayFormat(currentItem.high) @@ -203,10 +216,6 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { label: "저가", value: currentItem.low && pricesDisplayFormat(currentItem.low) }, - { - label: "종가", - value: currentItem.close && pricesDisplayFormat(currentItem.close) - }, { label: "거래량", value: currentItem.volume && pricesDisplayFormat(currentItem.volume) @@ -259,15 +268,27 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { - - + 차트지표 + 보조지표 - - - - - + {/* */} + { + getData("D") + dispatch(setClickDate('D')) + }}>일 + { + getData("W"); + dispatch(setClickDate('W')) + }}>주 + { + getData("M") + dispatch(setClickDate('M')) + }}>월 + { + getData("Y") + dispatch(setClickDate('Y')) + }}>년 {/* 일반 차트 */} - + {/* 분봉 호버했을 때, 날짜/시가/종가/고가/저가 표시 */} {/* 차트지표 */} - - - - - + {chartIndi.includes('SMA') && ( + + )} + {chartIndi.includes('WMA') && ( + + )} + {chartIndi.includes('EMA') && ( + + )} + {chartIndi.includes('BBANDS') && ( + + )} + {chartIndi.includes('SAR') && ( + + )} - + @@ -327,9 +368,13 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { height={barChartHeight} origin={barChartOrigin} yExtents={barChartExtents} + padding={{ + top: 30, + bottom: 0 + }} > - + {/* MACD 차트 */} - {/* d.macd} - origin={MACDChartOrigin} - > - - */} + {subIndi.includes('MACD') && ( + d.macd} + padding={20} + origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('MACD')) * barChartHeight]} + > + + + )} {/* STOCHF 차트 */} {subIndi.includes('STOCHF') && ( [data.outFastK - 50, data.outFastK + 50]} + yExtents={data => data.outFastK} + padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('STOCHF')) * barChartHeight]} > - + )} {/* STOCHF 차트 */} {subIndi.includes('STOCH') && ( [data.outSlowK - 50, data.outSlowK + 50]} + yExtents={data => data.outSlowK} + padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('STOCH')) * barChartHeight]} > - + )} {/* RSI 차트 */} {subIndi.includes('RSI') && ( [data.rsi - 20, data.rsi + 20]} + yExtents={data => data.rsi} + padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('RSI')) * barChartHeight]} > - + )} {/* CCI 차트 */} {subIndi.includes('CCI') && ( [data.cci - 100, data.cci + 100]} + yExtents={data => data.cci} + padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('CCI')) * barChartHeight]} > - + )} {/* MOM 차트 */} {subIndi.includes('MOM') && ( [data.mom - 1000, data.mom + 1000]} + yExtents={data => data.mom} + padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('MOM')) * barChartHeight]} > - + )} {/* ROC 차트 */} {subIndi.includes('ROC') && ( [data.roc - 5, data.roc + 5]} + yExtents={data => data.roc} + padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ROC')) * barChartHeight]} > - + )} {/* AD 차트 */} {subIndi.includes('AD') && ( [data.ad - 5000000, data.ad + 5000000]} + yExtents={data => data.ad} + padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('AD')) * barChartHeight]} > - + )} {/* ATR 차트 */} {subIndi.includes('ATR') && ( [data.atr - 100, data.atr + 100]} + yExtents={data => data.atr} + padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ATR')) * barChartHeight]} > - + )} {/* MFI 차트 */} {subIndi.includes('MFI') && ( [data.mfi - 10, data.mfi + 10]} + yExtents={data => data.mfi} + padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('MFI')) * barChartHeight]} > - + )} {/* OBV 차트 */} {subIndi.includes('OBV') && ( [data.obv - 50000000, data.obv + 50000000]} + yExtents={data => data.obv} + padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('OBV')) * barChartHeight]} > - + )} {/* ADOSC 차트 */} {subIndi.includes('ADOSC') && ( [data.adosc - 10000000, data.adosc + 10000000]} + yExtents={data => data.adosc} + padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ADOSC')) * barChartHeight]} > - + )} {/* TRIX 차트 */} {subIndi.includes('TRIX') && ( [data.trix - 0.1, data.trix + 0.1]} + yExtents={data => data.trix} + padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('TRIX')) * barChartHeight]} > - + )} {/* WILLR 차트 */} {subIndi.includes('WILLR') && ( [data.willr - 30, data.willr + 30]} + yExtents={data => data.willr} + padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('WILLR')) * barChartHeight]} > - + )} @@ -485,70 +546,77 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { {/* 값 제대로 받아오는지 확인 필요 */} {subIndi.includes('DX') && ( [data.dx - 10, data.dx + 10]} + yExtents={data => data.dx} + padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('DX')) * barChartHeight]} > - + )} {/* ADX 차트 */} {subIndi.includes('ADX') && ( [data.adx - 5, data.adx + 5]} + yExtents={data => data.adx} + padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ADX')) * barChartHeight]} > - + )} {/* ADXR 차트 */} {subIndi.includes('ADXR') && ( [data.adxr - 10, data.adxr + 10]} + yExtents={data => data.adxr} + padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ADXR')) * barChartHeight]} > - + )} {/* AROON 차트 */} {subIndi.includes('AROON') && ( [data.aroon - 10, data.aroon + 10]} + yExtents={data => data.aroon} + padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('AROON')) * barChartHeight]} > - + )} {/* AROONOSC 차트 */} {subIndi.includes('AROONOSC') && ( [data.aroonosc - 10, data.aroonosc + 10]} + yExtents={data => data.aroonosc} + padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('AROONOSC')) * barChartHeight]} > - + )} {/* STOCHRSI 차트 */} {subIndi.includes('STOCHRSI') && ( [data.stochRsiK - 10, data.stochRsiD + 10]} + yExtents={data => data.stochRsiK} + padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('STOCHRSI')) * barChartHeight]} > - + )} {/* ULTOSC 차트 */} {subIndi.includes('ULTOSC') && ( [data.ultosc - 10, data.ultosc + 10]} + yExtents={data => data.ultosc} + padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ULTOSC')) * barChartHeight]} > - + )} @@ -556,10 +624,11 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { {/* PPO Signal 데이터인듯 */} {subIndi.includes('PPO') && ( [data.ppo - 1, data.ppo + 1]} + yExtents={data => data.ppo} + padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('PPO')) * barChartHeight]} > - + )} @@ -577,7 +646,7 @@ const Container = styled.div` const CompanyContainer = styled.div` display: flex; align-items: center; - padding: 5px; + padding: 10px 5px; ` const CompanyLogo = styled.img` @@ -602,9 +671,35 @@ const SubFont = styled.span` const Content = styled.div` display: flex; - align-items: center; + gap: 6px; `; const BtnContainer = styled.div` display: flex; + justify-content: space-between; + padding: 3px; +` + +const IndiBtn = styled.button` + background-color: #fff; + border: 1px solid #bdbebf; + border-radius: 999px; + padding: 5px 15px; + font-size: 14px; + + &:hover { + background: #FFE3D7; + } +` + +const DateBtn = styled.button` + background-color: #fff; + border: 1px solid #bdbebf; + border-radius: 10px; + padding: 5px 15px; + font-size: 14px; + + &:hover { + background: #FFE3D7; + } ` diff --git a/src/components/invest/left-bar/ChartIndicators.jsx b/src/components/invest/left-bar/ChartIndicators.jsx index 8835411..e0641cb 100644 --- a/src/components/invest/left-bar/ChartIndicators.jsx +++ b/src/components/invest/left-bar/ChartIndicators.jsx @@ -4,7 +4,7 @@ import IndicatorDetail from "./IndicatorDetail"; // import chartData from "../../../../public/Json/chartData.json"; import chartData from '../../../Json/chartData.json' import { useDispatch, useSelector } from "react-redux"; -import { setActiveSub, setDisactiveSub } from "../../../store/reducers/Chart/Indicators/clickIndicators"; +import { setActiveSub, setChartIndi, setDisactiveSub } from "../../../store/reducers/Chart/Indicators/clickIndicators"; const ChartIndicators = ({ onClose }) => { const [showDetail, setShowDetail] = useState( @@ -19,19 +19,30 @@ const ChartIndicators = ({ onClose }) => { }); }; - // 데이터를 넣을 빈배열 const dispatch = useDispatch(); + const isActive = useSelector((state) => state.clickIndicator); + const chartIndi = useSelector((state) => state.clickIndicator.chartIndi); // 1️⃣ onChange함수를 사용하여 이벤트 감지, 필요한 값 받아오기 const onCheckedElement = (checked, item) => { - if (checked) { - dispatch(setActiveSub(item)) - } else if (!checked) { + if (chartIndi.length < 4) { + if (checked) { + dispatch(setActiveSub(item)) + dispatch(setChartIndi([...chartIndi, item])) + } + } else { + if (checked) { + dispatch(setActiveSub(item)) + dispatch(setChartIndi([...chartIndi.filter((el, idx) => idx !== 0), item])) + dispatch(setDisactiveSub(chartIndi[0])) + } + } + + if (!checked) { dispatch(setDisactiveSub(item)) + dispatch(setChartIndi(chartIndi.filter(el => el !== item))) } }; - const isActive = useSelector((state) => state.clickIndicator); - return ( diff --git a/src/components/invest/left-bar/Indicators.jsx b/src/components/invest/left-bar/Indicators.jsx index ef5745b..cf3c4b3 100644 --- a/src/components/invest/left-bar/Indicators.jsx +++ b/src/components/invest/left-bar/Indicators.jsx @@ -24,10 +24,20 @@ const Indicators = ({ onClose }) => { const subIndi = useSelector((state) => state.clickIndicator.subIndi); // 1️⃣ onChange함수를 사용하여 이벤트 감지, 필요한 값 받아오기 const onCheckedElement = (checked, item) => { - if (checked) { - dispatch(setActiveSub(item)) - dispatch(setSubIndi([...subIndi, item])) - } else if (!checked) { + if (subIndi.length < 4) { + if (checked) { + dispatch(setActiveSub(item)) + dispatch(setSubIndi([...subIndi, item])) + } + } else { + if (checked) { + dispatch(setActiveSub(item)) + dispatch(setSubIndi([...subIndi.filter((el, idx) => idx !== 0), item])) + dispatch(setDisactiveSub(subIndi[0])) + } + } + + if (!checked) { dispatch(setDisactiveSub(item)) dispatch(setSubIndi(subIndi.filter(el => el !== item))) } diff --git a/src/store/reducers/Chart/Indicators/clickIndicators.jsx b/src/store/reducers/Chart/Indicators/clickIndicators.jsx index f90d16c..d627cd9 100644 --- a/src/store/reducers/Chart/Indicators/clickIndicators.jsx +++ b/src/store/reducers/Chart/Indicators/clickIndicators.jsx @@ -28,6 +28,7 @@ const initialState = { STOCHRSI: false, ULTOSC: false, PPO: false, + chartIndi: [], subIndi: [], }; @@ -41,13 +42,16 @@ const clickSubSlice = createSlice({ setDisactiveSub(state, action) { state[action.payload] = false; }, + setChartIndi(state, action) { + state.chartIndi = action.payload; + }, setSubIndi(state, action) { state.subIndi = action.payload; } }, }); -const { setActiveSub, setDisactiveSub, setSubIndi } = clickSubSlice.actions; -export { setActiveSub, setDisactiveSub, setSubIndi }; +const { setActiveSub, setDisactiveSub, setChartIndi, setSubIndi } = clickSubSlice.actions; +export { setActiveSub, setDisactiveSub, setChartIndi, setSubIndi }; export default clickSubSlice.reducer; diff --git a/src/store/reducers/Chart/chart.jsx b/src/store/reducers/Chart/chart.jsx index dceb463..78b4b1c 100644 --- a/src/store/reducers/Chart/chart.jsx +++ b/src/store/reducers/Chart/chart.jsx @@ -3,6 +3,7 @@ import { getChartData, getMinuteData } from '../../../lib/apis/chart' const initialState = { datas: [], + date: "D", }; export const getChartDatas = createAsyncThunk( @@ -27,6 +28,9 @@ const chartSlice = createSlice({ reducers: { setChartDatas(state, action) { state.datas = action.payload; + }, + setClickDate(state, action) { + state.date = action.payload; } }, extraReducers: (builder) => { @@ -39,7 +43,7 @@ const chartSlice = createSlice({ }, }); -const { setChartDatas } = chartSlice.actions; -export { setChartDatas }; +const { setChartDatas, setClickDate } = chartSlice.actions; +export { setChartDatas, setClickDate }; export default chartSlice.reducer; diff --git a/src/store/reducers/Chart/clickCompany.jsx b/src/store/reducers/Chart/clickCompany.jsx index 895375a..8d2bc1a 100644 --- a/src/store/reducers/Chart/clickCompany.jsx +++ b/src/store/reducers/Chart/clickCompany.jsx @@ -8,7 +8,8 @@ const initialState = { name: "삼성전자", __v: 0, _id: "65f24176b5fd9b9fdc483b63", - } + }, + companyCode: "005930", }; const companySlice = createSlice({ @@ -17,11 +18,14 @@ const companySlice = createSlice({ reducers: { setClickCompany(state, action) { state.data = action.payload; - } + }, + setCompanyCode(state, action) { + state.companyCode = action.payload; + }, }, }); -const { setClickCompany } = companySlice.actions; -export { setClickCompany }; +const { setClickCompany, setCompanyCode } = companySlice.actions; +export { setClickCompany, setCompanyCode }; export default companySlice.reducer; From 501a5c579715dbcfa106c4843d531b379d11b89b Mon Sep 17 00:00:00 2001 From: eunxoo Date: Wed, 20 Mar 2024 18:58:34 +0900 Subject: [PATCH 64/84] =?UTF-8?q?refactor:=20jsx=20=ED=98=95=EC=8B=9D?= =?UTF-8?q?=EC=9E=90=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.jsx | 2 +- src/store/reducers/Feed/feed.jsx | 118 ++++++++++++++++++ .../{chartValues.js => chartValues.jsx} | 0 ...indicatorValues.js => indicatorValues.jsx} | 0 .../Trading/{search.js => search.jsx} | 0 .../Trading/{trading.js => trading.jsx} | 0 src/store/reducers/User/{user.js => user.jsx} | 7 +- 7 files changed, 124 insertions(+), 3 deletions(-) create mode 100644 src/store/reducers/Feed/feed.jsx rename src/store/reducers/Trading/{chartValues.js => chartValues.jsx} (100%) rename src/store/reducers/Trading/{indicatorValues.js => indicatorValues.jsx} (100%) rename src/store/reducers/Trading/{search.js => search.jsx} (100%) rename src/store/reducers/Trading/{trading.js => trading.jsx} (100%) rename src/store/reducers/User/{user.js => user.jsx} (79%) diff --git a/src/main.jsx b/src/main.jsx index df6b537..febb347 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -6,6 +6,6 @@ import "bootstrap/dist/css/bootstrap.min.css"; ReactDOM.createRoot(document.getElementById("root")).render( // - + // ); diff --git a/src/store/reducers/Feed/feed.jsx b/src/store/reducers/Feed/feed.jsx new file mode 100644 index 0000000..9765eeb --- /dev/null +++ b/src/store/reducers/Feed/feed.jsx @@ -0,0 +1,118 @@ +import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; +import { + fetchAFeed as reqFetchAFeed, + fetchMyFeed as reqFetchMyFeed, + fetchAllFeed as reqFetchcAllFeed, + postBoardFeed as reqPostBoardFeed, + postVoteFeed as reqPostVoteFeed, +} from "~/lib/apis/feed"; + +const initialState = { + myFeed: [], + allFeed: [], + aFeed: null, + loading: "idle", +}; + +const fetchAFeed = createAsyncThunk( + "feed/fetchAFeed", + async (feedId, thunkAPI) => { + const response = await reqFetchAFeed(feedId); + console.log("response", response); + return response; + } +); + +const fetchMyFeed = createAsyncThunk( + "feed/fetchMyFeed", + async (userId, thunkAPI) => { + const response = await reqFetchMyFeed(userId); + console.log("response", response); + return response; + } +); + +const fetchAllFeed = createAsyncThunk( + "feed/fetchAllFeed", + async (data, thunkAPI) => { + const response = await reqFetchcAllFeed(); + console.log("response", response); + return response; + } +); + +const postBoardFeed = createAsyncThunk( + "feed/postBoardFeed", + async (formdata, thunkAPI) => { + const response = await reqPostBoardFeed(formdata); + return response; + } +); + +const postVoteFeed = createAsyncThunk( + "feed/postVoteFeed", + async (body, thunkAPI) => { + const response = await reqPostVoteFeed(body); + return response; + } +); + +const feedSlice = createSlice({ + name: "feed", + initialState: initialState, + reducers: {}, + extraReducers: (builder) => { + builder + .addCase(fetchAFeed.fulfilled, (state, action) => { + state.loading = "fulfilled"; + state.aFeed = action.payload; + }) + .addCase(fetchAFeed.pending, (state) => { + state.loading = "pending"; + }) + .addCase(fetchAFeed.rejected, (state) => { + state.loading = "rejected"; + }) + .addCase(fetchMyFeed.fulfilled, (state, action) => { + state.loading = "fulfilled"; + state.myFeed = action.payload; + }) + .addCase(fetchMyFeed.pending, (state) => { + state.loading = "pending"; + }) + .addCase(fetchMyFeed.rejected, (state) => { + state.loading = "rejected"; + }) + .addCase(fetchAllFeed.fulfilled, (state, action) => { + state.loading = "fulfilled"; + state.allFeed = action.payload; + }) + .addCase(fetchAllFeed.pending, (state) => { + state.loading = "pending"; + }) + .addCase(fetchAllFeed.rejected, (state) => { + state.loading = "rejected"; + }) + .addCase(postBoardFeed.fulfilled, (state) => { + state.loading = "fulfilled"; + }) + .addCase(postBoardFeed.pending, (state) => { + state.loading = "pending"; + }) + .addCase(postBoardFeed.rejected, (state) => { + state.loading = "rejected"; + }) + .addCase(postVoteFeed.fulfilled, (state) => { + state.loading = "fulfilled"; + }) + .addCase(postVoteFeed.pending, (state) => { + state.loading = "pending"; + }) + .addCase(postVoteFeed.rejected, (state) => { + state.loading = "rejected"; + }); + }, +}); + +export { fetchAFeed, fetchMyFeed, fetchAllFeed, postBoardFeed, postVoteFeed }; +export default feedSlice.reducer; diff --git a/src/store/reducers/Trading/chartValues.js b/src/store/reducers/Trading/chartValues.jsx similarity index 100% rename from src/store/reducers/Trading/chartValues.js rename to src/store/reducers/Trading/chartValues.jsx diff --git a/src/store/reducers/Trading/indicatorValues.js b/src/store/reducers/Trading/indicatorValues.jsx similarity index 100% rename from src/store/reducers/Trading/indicatorValues.js rename to src/store/reducers/Trading/indicatorValues.jsx diff --git a/src/store/reducers/Trading/search.js b/src/store/reducers/Trading/search.jsx similarity index 100% rename from src/store/reducers/Trading/search.js rename to src/store/reducers/Trading/search.jsx diff --git a/src/store/reducers/Trading/trading.js b/src/store/reducers/Trading/trading.jsx similarity index 100% rename from src/store/reducers/Trading/trading.js rename to src/store/reducers/Trading/trading.jsx diff --git a/src/store/reducers/User/user.js b/src/store/reducers/User/user.jsx similarity index 79% rename from src/store/reducers/User/user.js rename to src/store/reducers/User/user.jsx index 5739f19..32ceac4 100644 --- a/src/store/reducers/User/user.js +++ b/src/store/reducers/User/user.jsx @@ -2,13 +2,15 @@ import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; import { postLogin as reqPostLogin } from "~/lib/apis/user"; const initialState = { + user: null, loading: "idle", }; const postLogin = createAsyncThunk( "user/login", async ({ email, password }, thunkAPI) => { - await reqPostLogin(email, password); + const response = await reqPostLogin(email, password); + return response; } ); @@ -18,7 +20,8 @@ const userSlice = createSlice({ reducers: {}, extraReducers: (builder) => { builder - .addCase(postLogin.fulfilled, (state) => { + .addCase(postLogin.fulfilled, (state, action) => { + state.user = action.payload; state.loading = "fulfilled"; }) .addCase(postLogin.pending, (state) => { From 7c9a9862ddb12f92764e0b094bdb93af80e562a3 Mon Sep 17 00:00:00 2001 From: eunxoo Date: Wed, 20 Mar 2024 18:59:23 +0900 Subject: [PATCH 65/84] =?UTF-8?q?feat:=20=EA=B8=80=EB=A1=9C=EB=B2=8C?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/HotStock/HotStockPage.jsx | 12 +- .../InvestStrategy/InvestStrategyPage.jsx | 12 +- src/routes/MarketInfo/MarketInfoPage.jsx | 12 +- src/routes/MyPage/MyPage.jsx | 120 +++++++++++++++++- src/style/GlobalStyle.js | 92 ++++++++++++++ 5 files changed, 212 insertions(+), 36 deletions(-) create mode 100644 src/style/GlobalStyle.js diff --git a/src/routes/HotStock/HotStockPage.jsx b/src/routes/HotStock/HotStockPage.jsx index b413092..2fb8c12 100644 --- a/src/routes/HotStock/HotStockPage.jsx +++ b/src/routes/HotStock/HotStockPage.jsx @@ -1,15 +1,7 @@ import React from "react"; import styled from "styled-components"; +import * as S from "../../style/GlobalStyle"; export default function HotStockPage() { - return HotStockPage; + return HotStockPage; } - -const Container = styled.div` - display: flex; - flex-direction: row; - width: 400px; - height: 100%; - position: relative; - overflow: hidden; -`; diff --git a/src/routes/InvestStrategy/InvestStrategyPage.jsx b/src/routes/InvestStrategy/InvestStrategyPage.jsx index 1e7971d..6230025 100644 --- a/src/routes/InvestStrategy/InvestStrategyPage.jsx +++ b/src/routes/InvestStrategy/InvestStrategyPage.jsx @@ -1,15 +1,7 @@ import React from "react"; import styled from "styled-components"; +import * as S from "../../style/GlobalStyle"; export default function InvestStrategyPage() { - return InvestStrategyPage; + return InvestStrategyPage; } - -const Container = styled.div` - display: flex; - flex-direction: row; - width: 400px; - height: 100%; - position: relative; - overflow: hidden; -`; diff --git a/src/routes/MarketInfo/MarketInfoPage.jsx b/src/routes/MarketInfo/MarketInfoPage.jsx index 5b49131..a0113ed 100644 --- a/src/routes/MarketInfo/MarketInfoPage.jsx +++ b/src/routes/MarketInfo/MarketInfoPage.jsx @@ -1,15 +1,7 @@ import React from "react"; import styled from "styled-components"; +import * as S from "../../style/GlobalStyle"; export default function MarketInfoPage() { - return MarketInfoPage; + return MarketInfoPage; } - -const Container = styled.div` - display: flex; - flex-direction: row; - width: 400px; - height: 100%; - position: relative; - overflow: hidden; -`; diff --git a/src/routes/MyPage/MyPage.jsx b/src/routes/MyPage/MyPage.jsx index 0750dcc..2ac8a1a 100644 --- a/src/routes/MyPage/MyPage.jsx +++ b/src/routes/MyPage/MyPage.jsx @@ -1,15 +1,123 @@ -import React from "react"; +import React, { useState } from "react"; import styled from "styled-components"; +import * as S from "../../style/GlobalStyle"; + +import Feed from "../../components/Feed/FeedShow/Feed"; +import Account from "../../components/Feed/Account"; export default function MyPage() { - return MyPage; + const [selectedTab, setSelectedTab] = useState("내 피드"); + const handleTabClick = (tab) => { + setSelectedTab(tab); + }; + return ( + +
+
handleTabClick("내 피드")} + > + 내 피드 +
+
handleTabClick("내 종목")} + > + 내 종목 +
+
+ + + 유저 + 양똥개 + + + 게시물 + 12 + + + 친구 + 20 + + + + {selectedTab === "내 피드" ? : <>} + {selectedTab === "내 종목" ? : <>} + + + ); } -const Container = styled.div` +const UserContainer = styled.div` display: flex; flex-direction: row; - width: 400px; + padding: 35px 40px; + justify-content: space-around; + align-items: center; + background-color: white; + margin-bottom: 5px; +`; + +const ImgDiv = styled.div` + display: flex; + flex-direction: column; + align-items: center; +`; + +const NicknameDiv = styled.div` + font-size: 17px; +`; + +const ColumnDiv = styled.div` + display: flex; + flex-direction: column; + align-items: center; + width: 60px; + font-size: 20px; + + cursor: ${(props) => props.$pointer || "default"}; +`; + +const ItemDiv = styled.div``; + +const NumDiv = styled.div``; + +const ContentContainer = styled.div` + display: flex; + flex-direction: column; height: 100%; - position: relative; - overflow: hidden; + overflow: auto; + &::-webkit-scrollbar { + display: none; + } `; diff --git a/src/style/GlobalStyle.js b/src/style/GlobalStyle.js new file mode 100644 index 0000000..8b24c06 --- /dev/null +++ b/src/style/GlobalStyle.js @@ -0,0 +1,92 @@ +import styled from "styled-components"; + +// Sidebar +export const Container = styled.div` + display: flex; + flex-direction: column; + width: 400px; + height: 100%; + position: relative; + overflow: hidden; + background-color: #f3f3f3; +`; + +// FeedShow +export const FeedWrapper = styled.div` + display: flex; + flex-direction: column; + background-color: white; + margin-bottom: 5px; +`; + +export const UserDiv = styled.div` + margin: 20px 25px 0px 25px; +`; + +export const UserNickname = styled.div` + font-size: 16px; + font-weight: 600; + line-height: normal; + margin-bottom: 5px; +`; + +export const DateDiv = styled.div` + color: #c1c1c1; + font-size: 13px; + font-style: normal; + font-weight: 600; + line-height: normal; +`; + +export const BodyWrapper = styled.div` + display: flex; + flex-direction: column; + margin: 15px 25px 0px 25px; +`; + +export const BodyCenter = styled.div` + display: flex; + flex-direction: column; + align-items: center; +`; + +export const BodyDiv = styled.div` + margin-bottom: 15px; + font-weight: ${(props) => props.$weight || "400"}; +`; + +export const BottomWrapper = styled.div` + display: flex; + margin: 20px 25px 0px 25px; + padding: 15px 0px; + border-top: 1px solid #dadada; + gap: 20px; +`; + +export const IconDiv = styled.div` + display: flex; + align-items: center; +`; + +export const StockWrapper = styled.div` + display: flex; + flex-direction: row; + align-items: center; + width: 95%; + padding: 11px 22px; + border-radius: 10px; + background-color: ${(props) => + props.$buy === "sell" + ? "#FFE3D7" + : props.$buy === "returns" + ? "#EFEFEF" + : "#BEE4FF"}; +`; + +export const StockDiv = styled.div` + margin-left: ${(props) => props.$margin || "10px"}; + color: #000; + font-size: 17px; + font-style: normal; + font-weight: 550; +`; From bac717624c6de0a8f6d367910c56f6d84f03b578 Mon Sep 17 00:00:00 2001 From: eunxoo Date: Wed, 20 Mar 2024 19:00:29 +0900 Subject: [PATCH 66/84] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=ED=99=94=20=EB=B0=8F=20=ED=94=BC=EB=93=9C=20get=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Feed/FeedDetail.jsx | 31 ++ src/components/Feed/FeedShow/Feed.jsx | 74 ++++ src/components/Feed/FeedShow/FeedBoard.jsx | 52 +++ src/components/Feed/FeedShow/FeedOrder.jsx | 98 +++++ src/components/Feed/FeedShow/FeedReturns.jsx | 51 +++ src/components/Feed/FeedShow/FeedVoteNot.jsx | 55 +++ src/components/Feed/FeedShow/FeedVoteYes.jsx | 79 ++++ src/lib/apis/api.jsx | 7 + src/lib/apis/feed.jsx | 60 ++++ src/routes/Feed/FeedPage.jsx | 358 +------------------ src/store/store.js | 24 +- 11 files changed, 526 insertions(+), 363 deletions(-) create mode 100644 src/components/Feed/FeedDetail.jsx create mode 100644 src/components/Feed/FeedShow/Feed.jsx create mode 100644 src/components/Feed/FeedShow/FeedBoard.jsx create mode 100644 src/components/Feed/FeedShow/FeedOrder.jsx create mode 100644 src/components/Feed/FeedShow/FeedReturns.jsx create mode 100644 src/components/Feed/FeedShow/FeedVoteNot.jsx create mode 100644 src/components/Feed/FeedShow/FeedVoteYes.jsx create mode 100644 src/lib/apis/feed.jsx diff --git a/src/components/Feed/FeedDetail.jsx b/src/components/Feed/FeedDetail.jsx new file mode 100644 index 0000000..0dd645b --- /dev/null +++ b/src/components/Feed/FeedDetail.jsx @@ -0,0 +1,31 @@ +import React from "react"; +import FeedBoard from "./FeedShow/FeedBoard"; +import * as S from "../../style/GlobalStyle"; +import styled from "styled-components"; + +const FeedDetail = ({ setShowDetail }) => { + console.log("detail"); + return ( + + + setShowDetail(false)} + src="/icon/X.svg" + alt="x" + /> + + + + ); +}; + +const BtnDiv = styled.div` + display: flex; + background-color: white; +`; + +const CloseButton = styled.img` + margin: 10px 10px 10px auto; +`; + +export default FeedDetail; diff --git a/src/components/Feed/FeedShow/Feed.jsx b/src/components/Feed/FeedShow/Feed.jsx new file mode 100644 index 0000000..38eee56 --- /dev/null +++ b/src/components/Feed/FeedShow/Feed.jsx @@ -0,0 +1,74 @@ +import React, { useEffect, useState } from "react"; +import FeedBoard from "./FeedBoard"; +import FeedOrder from "./FeedOrder"; +import FeedReturns from "./FeedReturns"; +import FeedVoteNot from "./FeedVoteNot"; +import FeedVoteYes from "./FeedVoteYes"; +import FeedDetail from "../FeedDetail"; +import styled from "styled-components"; +import { fetchAllFeed } from "../../../store/reducers/Feed/feed"; +import { useDispatch, useSelector } from "react-redux"; + +const Feed = () => { + const [showDetail, setShowDetail] = useState(false); + const toggleDetail = () => { + setShowDetail(true); + }; + + useEffect(() => { + setShowDetail(false); + dispatch(fetchAllFeed()); + }, []); + console.log(showDetail); + + const dispatch = useDispatch(); + const allFeedData = useSelector((state) => state.feed.allFeed); + console.log("allFeedData", allFeedData); + return ( + <> + {allFeedData.map((item, idx) => { + console.log("item", item); + return ( +
+ {item.isOrder ? ( + + ) : item.isProfit ? ( + + ) : item.isVote && item.myVote ? ( + + ) : item.isVote ? ( + + ) : ( + + )} +
+ ); + })} + + + {showDetail ? ( + <> + + + ) : ( + <> + )} + + + ); +}; + +const DetailContainer = styled.div` + width: 400px; + height: 100%; + background-color: #fff; + transform: translateX(${(props) => (props.$showdetail ? "0" : "100%")}); + transition: transform 0.3s ease; + position: absolute; + top: 0; + left: 0; + overflow: hidden; + z-index: 999; +`; + +export default Feed; diff --git a/src/components/Feed/FeedShow/FeedBoard.jsx b/src/components/Feed/FeedShow/FeedBoard.jsx new file mode 100644 index 0000000..9af8833 --- /dev/null +++ b/src/components/Feed/FeedShow/FeedBoard.jsx @@ -0,0 +1,52 @@ +import React from "react"; +import styled from "styled-components"; +import * as S from "../../../style/GlobalStyle"; + +const FeedBoard = ({ item, toggleDetail }) => { + console.log("board", item); + return ( + <> + + + {item.user.nickname} + {item.createdAt} + + + {item.body} + {item.photoUrl ? ( + + 본문 사진 + + ) : ( + <> + )} + + + + 좋아요 +
{item.like}
+ + + 댓글 +
7
+ + + + + ); +}; + +const Img = styled.img` + width: 100%; + /* object-fit: cover; */ +`; + +export default FeedBoard; diff --git a/src/components/Feed/FeedShow/FeedOrder.jsx b/src/components/Feed/FeedShow/FeedOrder.jsx new file mode 100644 index 0000000..674040e --- /dev/null +++ b/src/components/Feed/FeedShow/FeedOrder.jsx @@ -0,0 +1,98 @@ +import React from "react"; +import styled from "styled-components"; +import * as S from "../../../style/GlobalStyle"; + +//TODO : 로고 사진 변경 +import default_Img from "/icon/+.svg"; +const FeedOrder = ({ item }) => { + console.log("order", item); + const getLogoFileName = (name, code) => { + if (name.includes("스팩")) { + return "SPAC_230706"; + } else if (name.includes("ETN")) { + return "ETN_230706"; + } else if ( + name.includes("KODEX") || + name.includes("KOSEF") || + name.includes("KoAct") || + name.includes("TIGER") || + name.includes("ACE") || + name.includes("ARIRANG") || + name.includes("합성 H") || + name.includes("HANARO") || + name.includes("SOL") + ) { + return "ETF_230706"; + } else { + return `kr/${code}`; + } + }; + + const onErrorImg = (e) => { + e.target.src = default_Img; + }; + return ( + <> + + + {item.user.nickname} + {item.createdAt} + + + + + + 삼성생명 + 10주 + 매수 + + + + + + 좋아요 +
{item.like}
+ + + 댓글 +
7
+ + + + + ); +}; + +const QuantityDiv = styled.div` + margin-left: 7px; + color: #000; + font-size: 16px; + font-weight: 500; +`; + +const OrderDiv = styled.div` + margin-left: 7px; + color: #000; + font-size: 16px; + font-weight: 500; +`; + +export default FeedOrder; diff --git a/src/components/Feed/FeedShow/FeedReturns.jsx b/src/components/Feed/FeedShow/FeedReturns.jsx new file mode 100644 index 0000000..b5c2620 --- /dev/null +++ b/src/components/Feed/FeedShow/FeedReturns.jsx @@ -0,0 +1,51 @@ +import React from "react"; +import styled from "styled-components"; +import * as S from "../../../style/GlobalStyle"; + +const FeedReturns = ({ item }) => { + console.log("profit", item); + return ( + <> + + + {item.user.nickname} + {item.createdAt} + + + + + 나의 전체 수익률은? + {item.profit} + + + + + + 좋아요 +
{item.like}
+ + + 댓글 +
7
+ + + + + ); +}; + +const ReturnDiv = styled.div` + margin-left: auto; + color: ${(props) => + parseFloat(props.$returns) >= 0 ? "#ee2f2a" : "#2679ed"}; +`; + +export default FeedReturns; diff --git a/src/components/Feed/FeedShow/FeedVoteNot.jsx b/src/components/Feed/FeedShow/FeedVoteNot.jsx new file mode 100644 index 0000000..655ad21 --- /dev/null +++ b/src/components/Feed/FeedShow/FeedVoteNot.jsx @@ -0,0 +1,55 @@ +import React from "react"; +import styled from "styled-components"; +import * as S from "../../../style/GlobalStyle"; + +const FeedVoteNot = ({ item }) => { + console.log("votenot", item); + return ( + <> + + + {item.user.nickname} + {item.createdAt} + + + + {item.body} + + + O + + + X + + + + + + + ); +}; + +const ButtonWrapper = styled.div` + display: flex; + gap: 30px; + margin-bottom: 25px; + margin-top: 5px; +`; + +const VoteBtn = styled.button` + width: 150px; + height: 44px; + border: none; + border-radius: 10px; + background: ${(props) => props.color}; + + color: #fff; + font-size: 25px; + font-weight: 600; + + &:hover { + background: ${(props) => props.$hover}; + } +`; + +export default FeedVoteNot; diff --git a/src/components/Feed/FeedShow/FeedVoteYes.jsx b/src/components/Feed/FeedShow/FeedVoteYes.jsx new file mode 100644 index 0000000..bf8dda2 --- /dev/null +++ b/src/components/Feed/FeedShow/FeedVoteYes.jsx @@ -0,0 +1,79 @@ +import React from "react"; +import styled from "styled-components"; +import * as S from "../../../style/GlobalStyle"; + +const FeedVoteYes = ({ item }) => { + console.log("voteyes", item); + const calc = (num) => { + return Math.round((num / (item.vote.yes + item.vote.no)) * 100); + }; + return ( + <> + + + {item.user.nickname} + {item.createdAt} + + + + {item.body} + + + O
+ {calc(item.vote.yes)}% + + + + + + + X
+ {calc(item.vote.no)}% + + + + + + + ); +}; + +const BarDiv = styled.div` + position: relative; + width: 250px; + height: 30px; +`; + +const ODiv = styled.div` + position: absolute; + left: 0; + top: 0; + width: ${(props) => props.$width}%; + height: 30px; + border-radius: 10px 0px 0px 10px; + background: #bee4ff; +`; + +const XDiv = styled.div` + position: absolute; + right: 0; + top: 0; + width: ${(props) => props.$width}%; + height: 30px; + border-radius: 0px 10px 10px 0px; + background: #ffe3d7; +`; + +const OXWrapper = styled.div` + display: flex; + gap: 10px; + margin-bottom: 25px; + margin-top: 5px; +`; + +const OXDiv = styled.div` + text-align: center; + font-size: 15px; +`; + +export default FeedVoteYes; diff --git a/src/lib/apis/api.jsx b/src/lib/apis/api.jsx index ae786db..d53f757 100644 --- a/src/lib/apis/api.jsx +++ b/src/lib/apis/api.jsx @@ -22,3 +22,10 @@ export const baseUserInstance = axios.create({ }, }); +export const formdataInstance = axios.create({ + baseURL: BASE_URL, + headers: { + "Content-Type": "multipart/form-data", + Authorization: `Bearer ${getCookie("token")}`, + }, +}); diff --git a/src/lib/apis/feed.jsx b/src/lib/apis/feed.jsx new file mode 100644 index 0000000..8c9074f --- /dev/null +++ b/src/lib/apis/feed.jsx @@ -0,0 +1,60 @@ +import { baseUserInstance, formdataInstance } from "./api"; + +export const fetchAFeed = async (feedId) => { + const baseUrl = `/feed/${feedId}`; + try { + const response = await baseUserInstance.get(baseUrl); + const data = response.data; + return data; + } catch (err) { + console.error(err); + } +}; + +export const fetchMyFeed = async (userId) => { + const baseUrl = `/feed/user/${userId}`; + try { + const response = await baseUserInstance.get(baseUrl); + const data = response.data; + return data; + } catch (err) { + console.error(err); + } +}; + +export const fetchAllFeed = async () => { + const baseUrl = `/feed`; + try { + const response = await baseUserInstance.get(baseUrl); + const data = response.data; + return data; + } catch (err) { + console.error(err); + } +}; + +export const postBoardFeed = async (formData) => { + const baseUrl = "/feed"; + try { + const response = await formdataInstance.post(baseUrl, formData); + const data = response.data; + console.log(data); + return data; + } catch (err) { + console.error(err); + } +}; + +export const postVoteFeed = async (body) => { + const baseUrl = "/feed/vote"; + try { + const response = await baseUserInstance.post(baseUrl, { + body, + }); + const data = response.data; + console.log(data); + return data; + } catch (err) { + console.error(err); + } +}; diff --git a/src/routes/Feed/FeedPage.jsx b/src/routes/Feed/FeedPage.jsx index f2b34f7..c0613f0 100644 --- a/src/routes/Feed/FeedPage.jsx +++ b/src/routes/Feed/FeedPage.jsx @@ -1,9 +1,9 @@ import React, { useState } from "react"; import styled from "styled-components"; -import FeedWriting from "../../components/Feed/FeedWriting"; +import * as S from "../../style/GlobalStyle"; -//TODO : 로고 사진 변경 -import default_Img from "/icon/+.svg"; +import FeedWriting from "~/components/Feed/FeedWriting"; +import Feed from "../../components/Feed/FeedShow/Feed"; const FeedPage = () => { const [isWrite, setIsWrite] = useState(false); @@ -12,33 +12,8 @@ const FeedPage = () => { setIsWrite(true); }; - const getLogoFileName = (name, code) => { - if (name.includes("스팩")) { - return "SPAC_230706"; - } else if (name.includes("ETN")) { - return "ETN_230706"; - } else if ( - name.includes("KODEX") || - name.includes("KOSEF") || - name.includes("KoAct") || - name.includes("TIGER") || - name.includes("ACE") || - name.includes("ARIRANG") || - name.includes("합성 H") || - name.includes("HANARO") || - name.includes("SOL") - ) { - return "ETF_230706"; - } else { - return `kr/${code}`; - } - }; - - const onErrorImg = (e) => { - e.target.src = default_Img; - }; return ( - + {isWrite ? ( ) : ( @@ -48,168 +23,12 @@ const FeedPage = () => { )} - - - 게시글 쓰는 미나리 - 2024.03.08 - - - - 저번주 공시인데 괜찮아 보이네요! 시가배당률도 매년 올라가고 있어서 - 눈여겨 보는 중입니다. - - 본문 사진 - - - - 좋아요 -
3
- - - 댓글 -
7
- - - - - - 매수한 미나리 - 2024.03.08 - - - - - 삼성생명 - 10주 - 매수 - - - - - 좋아요 -
3
- - - 댓글 -
7
- - - - - - 수익률 공유한 미나리 - 2024.03.08 - - - - 나의 전체 수익률은? - 0.01% - - - - - 좋아요 -
3
- - - 댓글 -
7
- - - - - - 투표 아직 안 한 미나리 - 2024.03.08 - - - - 티웨이 항공 vs 에어부산, 에어부산이 더 오른다 - - - - O - - - X - - - - - - - 투표한 미나리 - 2024.03.08 - - - - 티웨이 항공 vs 에어부산, 에어부산이 더 오른다 - - - - O
- 32% - - - - - - - X
- 68% - - - - + - + ); }; -const Container = styled.div` - display: flex; - flex-direction: column; - width: 400px; - height: 100%; - position: relative; - overflow: hidden; - background-color: #f3f3f3; -`; - const WritingContainer = styled.div` display: flex; flex-direction: row; @@ -249,169 +68,4 @@ const FeedContainer = styled.div` } `; -const FeedWrapper = styled.div` - display: flex; - flex-direction: column; - background-color: white; - margin-bottom: 5px; -`; - -const UserDiv = styled.div` - margin: 20px 25px 0px 25px; -`; - -const UserNickname = styled.div` - font-size: 16px; - font-weight: 600; - line-height: normal; - margin-bottom: 5px; -`; - -const DateDiv = styled.div` - color: #c1c1c1; - font-size: 13px; - font-style: normal; - font-weight: 600; - line-height: normal; -`; - -const BodyWrapper = styled.div` - display: flex; - flex-direction: column; - align-items: center; - margin: 15px 25px 0px 25px; -`; - -const BodyDiv = styled.div` - margin-bottom: 15px; - font-weight: ${(props) => props.$weight || "400"}; -`; - -const Img = styled.img` - width: 100%; - /* object-fit: cover; */ -`; - -const BottomWrapper = styled.div` - display: flex; - margin: 20px 25px 0px 25px; - padding: 15px 0px; - border-top: 1px solid #dadada; - gap: 20px; -`; - -const IconDiv = styled.div` - display: flex; - align-items: center; -`; - -const Div = styled.div``; - -const StockWrapper = styled.div` - display: flex; - flex-direction: row; - align-items: center; - width: 95%; - padding: 11px 22px; - border-radius: 10px; - background-color: ${(props) => - props.$buy === "sell" - ? "#FFE3D7" - : props.$buy === "returns" - ? "#EFEFEF" - : "#BEE4FF"}; -`; - -const StockDiv = styled.div` - margin-left: ${(props) => props.$margin || "10px"}; - color: #000; - font-size: 18px; - font-style: normal; - font-weight: 600; - line-height: normal; -`; - -const QuantityDiv = styled.div` - margin-left: 7px; - color: #000; - font-size: 16px; - font-weight: 500; -`; - -const OrderDiv = styled.div` - margin-left: 7px; - color: #000; - font-size: 16px; - font-weight: 500; -`; - -const ReturnDiv = styled.div` - margin-left: auto; - color: ${(props) => - parseFloat(props.$returns) >= 0 ? "#ee2f2a" : "#2679ed"}; -`; - -const ButtonWrapper = styled.div` - display: flex; - gap: 30px; - margin-bottom: 25px; - margin-top: 5px; -`; - -const VoteBtn = styled.button` - width: 150px; - height: 44px; - border: none; - border-radius: 10px; - background: ${(props) => props.color}; - - color: #fff; - font-size: 25px; - font-weight: 600; - - &:hover { - background: ${(props) => props.$hover}; - } -`; - -const BarDiv = styled.div` - position: relative; - width: 250px; - height: 30px; - /* background-color: #ffe3d7; - border-radius: 10px; */ -`; - -const ODiv = styled.div` - position: absolute; - left: 0; - top: 0; - width: 32%; - height: 30px; - border-radius: 10px 0px 0px 10px; - background: #bee4ff; -`; - -const XDiv = styled.div` - position: absolute; - right: 0; - top: 0; - width: 68%; - height: 30px; - border-radius: 0px 10px 10px 0px; - background: #ffe3d7; -`; - -const OXWrapper = styled.div` - display: flex; - gap: 10px; - margin-bottom: 25px; - margin-top: 5px; -`; - -const OXDiv = styled.div` - text-align: center; - font-size: 15px; -`; - export default FeedPage; diff --git a/src/store/store.js b/src/store/store.js index 93b40c8..880a844 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -15,28 +15,29 @@ import logger from "redux-logger"; import tradingReducer from "./reducers/Trading/trading"; import chartValuesReducer from "./reducers/Trading/chartValues"; import indicatorValuesReducer from "./reducers/Trading/indicatorValues"; -import chartReducer from './reducers/Chart/chart.jsx'; -import companyReducer from './reducers/Chart/clickCompany.jsx'; -import clickIndicatorsReducer from './reducers/Chart/Indicators/clickIndicators.jsx'; -import getChartIndicatorReducer from './reducers/Chart/Indicators/chart.jsx'; -import getSubIndicatorReducer from './reducers/Chart/Indicators/sub.jsx'; +import chartReducer from "./reducers/Chart/chart.jsx"; +import companyReducer from "./reducers/Chart/clickCompany.jsx"; +import clickIndicatorsReducer from "./reducers/Chart/Indicators/clickIndicators.jsx"; +import getChartIndicatorReducer from "./reducers/Chart/Indicators/chart.jsx"; +import getSubIndicatorReducer from "./reducers/Chart/Indicators/sub.jsx"; import searchReducer from "./reducers/Trading/search"; import userReducer from "./reducers/User/user"; +import feedReducer from "./reducers/Feed/feed"; const rootPersistConfig = { key: "root", storage: storage, // whitelist: ["chartValues", "indicatorValues"], whitelist: [ - "user", - "chartValues", - "indicatorValues", - "search", + "user", + "chartValues", + "indicatorValues", + "search", "chart", "clickIndicator", - "getChartIndicator", + "getChartIndicator", "getSubIndicator", - "company" + "company", ], }; @@ -54,6 +55,7 @@ const rootReducer = persistReducer( getSubIndicator: getSubIndicatorReducer, search: searchReducer, user: userReducer, + feed: feedReducer, }) ); const myMiddlewares = [logger]; From d7078d661ec37041324230f76890a50a68d57688 Mon Sep 17 00:00:00 2001 From: eunxoo Date: Wed, 20 Mar 2024 19:00:49 +0900 Subject: [PATCH 67/84] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1=ED=95=98=EA=B8=B0=20api=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icon/me.svg | 4 +++ src/components/Feed/FeedWriting.jsx | 54 +++++++++++++++++++++++++---- 2 files changed, 52 insertions(+), 6 deletions(-) create mode 100644 public/icon/me.svg diff --git a/public/icon/me.svg b/public/icon/me.svg new file mode 100644 index 0000000..004cdf0 --- /dev/null +++ b/public/icon/me.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Feed/FeedWriting.jsx b/src/components/Feed/FeedWriting.jsx index 5c9a97e..615043e 100644 --- a/src/components/Feed/FeedWriting.jsx +++ b/src/components/Feed/FeedWriting.jsx @@ -1,13 +1,19 @@ import React, { useState, useRef, useCallback } from "react"; import styled from "styled-components"; +import { postBoardFeed, postVoteFeed } from "../../store/reducers/Feed/feed"; +import { useDispatch, useSelector } from "react-redux"; const FeedWriting = ({ setIsWrite }) => { const inputRef = useRef(); const [previewImage, setPreviewImage] = useState(null); const [selectedImage, setSelectedImage] = useState(null); + const [body, setBody] = useState(""); const [isVote, setIsVote] = useState(false); + const dispatch = useDispatch(); + const userNickname = useSelector((state) => state.user.user.nickname); + const onUploadImage = useCallback((e) => { const file = e.target.files[0]; setSelectedImage(file); @@ -17,10 +23,8 @@ const FeedWriting = ({ setIsWrite }) => { const reader = new FileReader(); reader.onloadend = () => { setPreviewImage(reader.result); - console.log("reader.result", reader.result); }; reader.readAsDataURL(file); - console.log("reader", reader); }, []); const onUploadImageButtonClick = useCallback(() => { @@ -35,11 +39,39 @@ const FeedWriting = ({ setIsWrite }) => { setSelectedImage(null); setPreviewImage(null); }; + + const onSubmit = () => { + try { + const formData = new FormData(); + if (isVote) { + dispatch(postVoteFeed(body)); + window.location.reload(); + } else { + formData.append("body", body); + + if (selectedImage) { + formData.append("file", selectedImage); + } + dispatch(postBoardFeed(formData)); + window.location.reload(); + } + for (let key of formData.keys()) { + console.log(key); + } + + for (let value of formData.values()) { + console.log(value); + } + } catch (err) { + console.error(err); + } + }; + return ( 프로필 - 양똥개 + {userNickname} x { <> O / X 투표 - + { + setBody(e.target.value); + console.log("body", body); + }} + /> ) : ( - + setBody(e.target.value)} + /> )} {previewImage && ( @@ -91,7 +133,7 @@ const FeedWriting = ({ setIsWrite }) => { 투표
투표
- 게시 + 게시 ); From 9c379c7552612fa81fb83158fdac03dca820285c Mon Sep 17 00:00:00 2001 From: Tomk2d Date: Thu, 21 Mar 2024 14:29:27 +0900 Subject: [PATCH 68/84] =?UTF-8?q?=EC=9B=B9=EC=86=8C=EC=BC=93=20=EA=B0=80?= =?UTF-8?q?=EC=A0=B8=EC=98=A4=EA=B8=B0=20=EC=97=85=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/side-bar/webSocketTest.jsx | 63 +++++++++++++++++++++++ src/store/{ => webSocket}/nowPrice.js | 0 2 files changed, 63 insertions(+) create mode 100644 src/components/side-bar/webSocketTest.jsx rename src/store/{ => webSocket}/nowPrice.js (100%) diff --git a/src/components/side-bar/webSocketTest.jsx b/src/components/side-bar/webSocketTest.jsx new file mode 100644 index 0000000..76de011 --- /dev/null +++ b/src/components/side-bar/webSocketTest.jsx @@ -0,0 +1,63 @@ +import React, { useState, useEffect, useRef } from "react"; +import { joinRoom, leaveRoom, subscribeAskPrice, subscribeNowPrice } from '../../../store/webSocket/nowPrice.js'; // 경로는 실제 프로젝트 구조에 따라 조정해주세요. + +const PriceBook = () => { + const containerRef = useRef(null); + const [nowPrice, setNowPrice] = useState(null); + const [askPrice, setAskPrice] = useState(null); + const [stockCode, setStockCode] = useState(''); + + useEffect(() => { + const settingNowPrice = subscribeNowPrice((nowPriceMessage) => { + setNowPrice(nowPriceMessage); + }); + + const settingAskPrice = subscribeAskPrice((askPriceMessage) => { + setAskPrice(askPriceMessage); + }); + + return () => { + settingNowPrice(); + settingAskPrice(); + }; + }, [nowPrice, askPrice]); + + useEffect(() => { + const adjustScroll = () => { + const container = containerRef.current; + if (container) { + const scrollTop = (container.scrollHeight - container.clientHeight) / 2; + container.scrollTop = scrollTop; + } + }; + + adjustScroll(); // 스크롤 조정 + }, []); + + // joinRoom 및 leaveRoom 함수는 여기에서 직접 호출합니다. + + return ( +
+ setStockCode(e.target.value)} + placeholder="Enter stock code" + /> + + +
+

Real-time Data:

+ {nowPrice ? 
{JSON.stringify(nowPrice, null, 2)}
:

데이터 없음

} +
+
+

Real-time Data2:

+ {askPrice ? 
{JSON.stringify(askPrice, null, 2)}
:

데이터 없음

} +
+
+ ); +}; + +export default PriceBook; \ No newline at end of file diff --git a/src/store/nowPrice.js b/src/store/webSocket/nowPrice.js similarity index 100% rename from src/store/nowPrice.js rename to src/store/webSocket/nowPrice.js From 5c6d6a822abd87ff684477fb247cb645dfaebf01 Mon Sep 17 00:00:00 2001 From: Tomk2d Date: Thu, 21 Mar 2024 14:33:09 +0900 Subject: [PATCH 69/84] update package.json --- package-lock.json | 92 +++++++++++++++++++++++++++++++++++++++++++---- package.json | 3 +- 2 files changed, 87 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 64c7513..8547ee2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "redux": "^5.0.1", "redux-logger": "^3.0.6", "redux-persist": "^6.0.0", + "socket.io-client": "^4.7.5", "styled-components": "^6.1.8", "uuid": "^9.0.1" }, @@ -34,7 +35,7 @@ "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", - "vite": "^5.1.4" + "vite": "^5.1.6" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -1517,6 +1518,11 @@ "win32" ] }, + "node_modules/@socket.io/component-emitter": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz", + "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==" + }, "node_modules/@swc/helpers": { "version": "0.5.6", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.6.tgz", @@ -2287,7 +2293,6 @@ "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", - "dev": true, "dependencies": { "ms": "2.1.2" }, @@ -2388,6 +2393,26 @@ "integrity": "sha512-I7q3BbQi6e4tJJN5CRcyvxhK0iJb34TV8eJQcgh+fR2fQ8miMgZcEInckCo1U9exDHbfz7DLDnFn8oqH/VcRKw==", "dev": true }, + "node_modules/engine.io-client": { + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.3.tgz", + "integrity": "sha512-9Z0qLB0NIisTRt1DZ/8U2k12RJn8yls/nXMZLn+/N8hANT3TcYjKFKcwbw5zFQiN4NTde3TSY9zb79e1ij6j9Q==", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.1", + "engine.io-parser": "~5.2.1", + "ws": "~8.11.0", + "xmlhttprequest-ssl": "~2.0.0" + } + }, + "node_modules/engine.io-parser": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.2.tgz", + "integrity": "sha512-RcyUFKA93/CXH20l4SoVvzZfrSDMOTUS3bWVpTt2FuFP+XYrL8i8oonHP7WInRyVHXh0n/ORtoeiE1os+8qkSw==", + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/es-abstract": { "version": "1.22.5", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.5.tgz", @@ -3882,8 +3907,7 @@ "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", - "dev": true + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" }, "node_modules/nanoid": { "version": "3.3.7", @@ -4729,6 +4753,32 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/socket.io-client": { + "version": "4.7.5", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.5.tgz", + "integrity": "sha512-sJ/tqHOCe7Z50JCBCXrsY3I2k03iOiUe+tj1OmKeD2lXPiGH/RUCdTZFoqVyN7l1MnpIzPrGtLcijffmeouNlQ==", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.2", + "engine.io-client": "~6.5.2", + "socket.io-parser": "~4.2.4" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/socket.io-parser": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz", + "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/source-map-js": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", @@ -5134,9 +5184,9 @@ } }, "node_modules/vite": { - "version": "5.1.5", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.5.tgz", - "integrity": "sha512-BdN1xh0Of/oQafhU+FvopafUp6WaYenLU/NFoL5WyJL++GxkNfieKzBhM24H3HVsPQrlAqB7iJYTHabzaRed5Q==", + "version": "5.1.6", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.6.tgz", + "integrity": "sha512-yYIAZs9nVfRJ/AiOLCA91zzhjsHUgMjB+EigzFb6W2XTLO8JixBCKCjvhKZaye+NKYHCrkv3Oh50dH9EdLU2RA==", "dev": true, "dependencies": { "esbuild": "^0.19.3", @@ -5296,6 +5346,34 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, + "node_modules/ws": { + "version": "8.11.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz", + "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/xmlhttprequest-ssl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz", + "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", diff --git a/package.json b/package.json index 0205388..9beb1d3 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "redux": "^5.0.1", "redux-logger": "^3.0.6", "redux-persist": "^6.0.0", + "socket.io-client": "^4.7.5", "styled-components": "^6.1.8", "uuid": "^9.0.1" }, @@ -36,6 +37,6 @@ "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", - "vite": "^5.1.4" + "vite": "^5.1.6" } } From b1516f984fb378627ac0c81d17d942916264dd32 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Thu, 21 Mar 2024 15:12:04 +0900 Subject: [PATCH 70/84] =?UTF-8?q?fix:=20=EC=B0=A8=ED=8A=B8/=EB=B3=B4?= =?UTF-8?q?=EC=A1=B0=20=EC=A7=80=ED=91=9C=20reducer=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chart/Indicators/chart/BBANDSChart.jsx | 34 +- .../chart/Indicators/chart/EMAChart.jsx | 33 +- .../chart/Indicators/chart/SARChart.jsx | 25 +- .../chart/Indicators/chart/SMAChart.jsx | 32 +- .../chart/Indicators/chart/WMAChart.jsx | 31 +- .../invest/chart/Indicators/sub/ADChart.jsx | 23 +- .../chart/Indicators/sub/ADOSCChart.jsx | 23 +- .../invest/chart/Indicators/sub/ADXChart.jsx | 23 +- .../invest/chart/Indicators/sub/ADXRChart.jsx | 23 +- .../chart/Indicators/sub/AROONChart.jsx | 40 +- .../chart/Indicators/sub/AROONOSCChart.jsx | 23 +- .../invest/chart/Indicators/sub/ATRChart.jsx | 23 +- .../invest/chart/Indicators/sub/CCIChart.jsx | 23 +- .../invest/chart/Indicators/sub/DMIChart.jsx | 23 +- .../invest/chart/Indicators/sub/MACDChart.jsx | 29 +- .../invest/chart/Indicators/sub/MFIChart.jsx | 23 +- .../invest/chart/Indicators/sub/MOMChart.jsx | 23 +- .../invest/chart/Indicators/sub/OBVChart.jsx | 23 +- .../invest/chart/Indicators/sub/PPOChart.jsx | 23 +- .../invest/chart/Indicators/sub/ROCChart.jsx | 23 +- .../invest/chart/Indicators/sub/RSIChart.jsx | 23 +- .../invest/chart/Indicators/sub/STOCH.jsx | 26 +- .../invest/chart/Indicators/sub/STOCHFast.jsx | 26 +- .../chart/Indicators/sub/STOCHRSIChart.jsx | 26 +- .../invest/chart/Indicators/sub/TRIXChart.jsx | 23 +- .../chart/Indicators/sub/ULTOSCChart.jsx | 23 +- .../chart/Indicators/sub/WILLRChart.jsx | 23 +- src/components/invest/chart/MainChart.jsx | 80 +- src/store/reducers/Chart/chart.jsx | 1055 ++++++++++++++++- 29 files changed, 1257 insertions(+), 571 deletions(-) diff --git a/src/components/invest/chart/Indicators/chart/BBANDSChart.jsx b/src/components/invest/chart/Indicators/chart/BBANDSChart.jsx index fc62290..abb5169 100644 --- a/src/components/invest/chart/Indicators/chart/BBANDSChart.jsx +++ b/src/components/invest/chart/Indicators/chart/BBANDSChart.jsx @@ -8,32 +8,13 @@ export default function BBANDSChart({ datas, isShow }) { const dispatch = useDispatch(); const isActive = useSelector((state) => state.clickIndicator.BBANDS); const BBANDSValue = useSelector((state) => state.chartValues.values.BBANDS); - + const calculateBBANDS = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.upper; - delete newItem.middle; - delete newItem.lower; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const upData = data.result.outRealUpperBand; - const midData = data.result.outRealMiddleBand; - const lowData = data.result.outRealLowerBand; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["upper"]: upData[i], // 새로운 속성 추가 - ["middle"]: midData[i], // 새로운 속성 추가 - ["lower"]: lowData[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'BBANDS' + })); } useEffect(() => { @@ -44,7 +25,8 @@ export default function BBANDSChart({ datas, isShow }) { "stdev" : BBANDSValue[1], } dispatch(getBBANDSChart(data)) - .then((res) => calculateBBANDS(res.payload)) + .then((res) => calculateBBANDS(res.payload)) + } else if (!isActive) { const updatedDatas = datas.map(item => { const newItem = { ...item }; diff --git a/src/components/invest/chart/Indicators/chart/EMAChart.jsx b/src/components/invest/chart/Indicators/chart/EMAChart.jsx index bc41385..8f3ce14 100644 --- a/src/components/invest/chart/Indicators/chart/EMAChart.jsx +++ b/src/components/invest/chart/Indicators/chart/EMAChart.jsx @@ -10,31 +10,12 @@ export default function EMAChart({ datas, isShow, chartIndi }) { const EMAValue = useSelector((state) => state.chartValues.values.EMA); const calculateEMA = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - Object.keys(item).forEach(key => { - if (key.includes('ema')) { - delete newItem[key]; - } - }); - return newItem; - }); - - const responses = [data.response1, data.response2, data.response3, data.response4, data.response5]; - const newData = [...updatedDatas]; - responses.forEach((response, index) => { - const f_idx = response.begIndex; - const l_idx = response.nbElement; - const subData = response.result.outReal; - for (let i = 0; i < l_idx; i++) { - const emaKey = `ema${[EMAValue[0], EMAValue[1], EMAValue[2], EMAValue[3], EMAValue[4]][index]}`; - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - [emaKey]: subData[i] // 새로운 속성 추가 - }; - } - }); - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'EMA', + value: EMAValue, + })); } useEffect(() => { @@ -48,7 +29,7 @@ export default function EMAChart({ datas, isShow, chartIndi }) { "lineTime5" : EMAValue[4] } dispatch(getEMAChart(data)) - .then((res) => calculateEMA(res.payload)) + .then((res) => calculateEMA(res.payload)) } else if (!isActive) { const updatedDatas = datas.map(item => { const newItem = { ...item }; diff --git a/src/components/invest/chart/Indicators/chart/SARChart.jsx b/src/components/invest/chart/Indicators/chart/SARChart.jsx index 87cfe74..988694a 100644 --- a/src/components/invest/chart/Indicators/chart/SARChart.jsx +++ b/src/components/invest/chart/Indicators/chart/SARChart.jsx @@ -10,24 +10,11 @@ export default function SARChart({ datas, isShow, chartIndi }) { const SARValue = useSelector((state) => state.chartValues.values.SAR); const calculateSAR = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.sar; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const sarData = data.result.outReal; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["sar"]: sarData[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'SAR' + })); } useEffect(() => { @@ -38,7 +25,7 @@ export default function SARChart({ datas, isShow, chartIndi }) { "accMax" : SARValue[1], } dispatch(getSARChart(data)) - .then((res) => calculateSAR(res.payload)) + .then((res) => calculateSAR(res.payload)) } else if (!isActive) { const updatedDatas = datas.map(item => { const newItem = { ...item }; diff --git a/src/components/invest/chart/Indicators/chart/SMAChart.jsx b/src/components/invest/chart/Indicators/chart/SMAChart.jsx index e156038..1a7fbef 100644 --- a/src/components/invest/chart/Indicators/chart/SMAChart.jsx +++ b/src/components/invest/chart/Indicators/chart/SMAChart.jsx @@ -11,32 +11,12 @@ export default function SMAChart({ datas, isShow, chartIndi }) { const SMAValue = useSelector((state) => state.chartValues.values.SMA); const calculateSMA = (data) => { - const updatedDatas = datas.map((item) => { - const newItem = { ...item }; - Object.keys(item).forEach(key => { - if (key.includes('sma')) { - delete newItem[key]; - } - }); - return newItem; - }); - - const responses = [data.response1, data.response2, data.response3, data.response4, data.response5]; - const newData = [...updatedDatas]; - responses.forEach((response, index) => { - const f_idx = response.begIndex; - const l_idx = response.nbElement; - const subData = response.result.outReal; - for (let i = 0; i < l_idx; i++) { - const smaKey = `sma${[SMAValue[0], SMAValue[1], SMAValue[2], SMAValue[3], SMAValue[4]][index]}`; - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - [smaKey]: subData[i] // 새로운 속성 추가 - }; - } - }); - // setSmaCalculated(true); // SMA 계산 완료 - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'SMA', + value: SMAValue, + })); } useEffect(() => { diff --git a/src/components/invest/chart/Indicators/chart/WMAChart.jsx b/src/components/invest/chart/Indicators/chart/WMAChart.jsx index 7ded683..4e4acbc 100644 --- a/src/components/invest/chart/Indicators/chart/WMAChart.jsx +++ b/src/components/invest/chart/Indicators/chart/WMAChart.jsx @@ -10,31 +10,12 @@ export default function WMAChart({ datas, isShow, chartIndi }) { const WMAValue = useSelector((state) => state.chartValues.values.WMA); const calculateWMA = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - Object.keys(item).forEach(key => { - if (key.includes('wma')) { - delete newItem[key]; - } - }); - return newItem; - }); - - const responses = [data.response1, data.response2, data.response3, data.response4, data.response5]; - const newData = [...updatedDatas]; - responses.forEach((response, index) => { - const f_idx = response.begIndex; - const l_idx = response.nbElement; - const subData = response.result.outReal; - for (let i = 0; i < l_idx; i++) { - const wmaKey = `wma${[WMAValue[0], WMAValue[1], WMAValue[2], WMAValue[3], WMAValue[4]][index]}`; - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - [wmaKey]: subData[i] // 새로운 속성 추가 - }; - } - }); - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'WMA', + value: WMAValue, + })); } useEffect(() => { diff --git a/src/components/invest/chart/Indicators/sub/ADChart.jsx b/src/components/invest/chart/Indicators/sub/ADChart.jsx index ef2bc50..4e1ad01 100644 --- a/src/components/invest/chart/Indicators/sub/ADChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ADChart.jsx @@ -10,24 +10,11 @@ export default function ADChart({ datas, isShow }) { const isActive = useSelector((state) => state.clickIndicator.AD); const calculateAD = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.ad; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const ad = data.result.outReal; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["ad"]: ad[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'AD' + })); } useEffect(() => { diff --git a/src/components/invest/chart/Indicators/sub/ADOSCChart.jsx b/src/components/invest/chart/Indicators/sub/ADOSCChart.jsx index 26b9038..706491b 100644 --- a/src/components/invest/chart/Indicators/sub/ADOSCChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ADOSCChart.jsx @@ -11,24 +11,11 @@ export default function ADOSCChart({ datas, isShow }) { const ADOSCValue = useSelector((state) => state.indicatorValues.values.ADOSC); const calculateADOSC = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.adosc; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const adosc = data.result.outReal; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["adosc"]: adosc[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'ADOSC' + })); } useEffect(() => { diff --git a/src/components/invest/chart/Indicators/sub/ADXChart.jsx b/src/components/invest/chart/Indicators/sub/ADXChart.jsx index 2425f4c..23c0c90 100644 --- a/src/components/invest/chart/Indicators/sub/ADXChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ADXChart.jsx @@ -11,24 +11,11 @@ export default function ADXChart({ datas, isShow }) { const ADXValue = useSelector((state) => state.indicatorValues.values.ADX); const calculateADX = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.adx; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const adx = data.result.outReal; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["adx"]: adx[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'ADX' + })); } useEffect(() => { diff --git a/src/components/invest/chart/Indicators/sub/ADXRChart.jsx b/src/components/invest/chart/Indicators/sub/ADXRChart.jsx index 3982f1d..bef47c5 100644 --- a/src/components/invest/chart/Indicators/sub/ADXRChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ADXRChart.jsx @@ -11,24 +11,11 @@ export default function ADXRChart({ datas, isShow }) { const ADXRValue = useSelector((state) => state.indicatorValues.values.ADXR); const calculateADXR = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.adxr; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const adxr = data.result.outReal; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["adxr"]: adxr[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'ADXR' + })); } useEffect(() => { diff --git a/src/components/invest/chart/Indicators/sub/AROONChart.jsx b/src/components/invest/chart/Indicators/sub/AROONChart.jsx index 8d0f8a5..9aaf8bb 100644 --- a/src/components/invest/chart/Indicators/sub/AROONChart.jsx +++ b/src/components/invest/chart/Indicators/sub/AROONChart.jsx @@ -11,24 +11,11 @@ export default function AROONChart({ datas, isShow }) { const AROONValue = useSelector((state) => state.indicatorValues.values.AROON); const calculateAROON = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.aroon; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const aroon = data.result.outAroonDown; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["aroon"]: aroon[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'AROON' + })); } useEffect(() => { @@ -42,7 +29,8 @@ export default function AROONChart({ datas, isShow }) { } else if (!isActive) { const updatedDatas = datas.map(item => { const newItem = { ...item }; - delete newItem.aroon; + delete newItem.aroonDown; + delete newItem.aroonUp; return newItem; }); dispatch(setChartDatas(updatedDatas)); @@ -56,11 +44,19 @@ export default function AROONChart({ datas, isShow }) { - d.aroon} strokeStyle='#680A08' strokeWidth={1.3} /> + d.aroonUp} strokeStyle='#EDD02B' strokeWidth={1.3} /> + d.aroonDown} strokeStyle='#680A08' strokeWidth={1.3} /> d.aroon} - yLabel="Aroon" + yAccessor={d => d.aroonUp} + yLabel="Aroon Up" + yDisplayFormat={format(",")} + labelFill='#EDD02B' + /> + d.aroonDown} + yLabel="Aroon Down" yDisplayFormat={format(",")} labelFill='#680A08' /> diff --git a/src/components/invest/chart/Indicators/sub/AROONOSCChart.jsx b/src/components/invest/chart/Indicators/sub/AROONOSCChart.jsx index 0829c8f..c1e3ada 100644 --- a/src/components/invest/chart/Indicators/sub/AROONOSCChart.jsx +++ b/src/components/invest/chart/Indicators/sub/AROONOSCChart.jsx @@ -11,24 +11,11 @@ export default function AROONOSCChart({ datas, isShow }) { const AROONOSCValue = useSelector((state) => state.indicatorValues.values.AROONOSC); const calculateAROONOSC = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.aroonosc; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const aroonosc = data.result.outReal; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["aroonosc"]: aroonosc[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'AROONOSC' + })); } useEffect(() => { diff --git a/src/components/invest/chart/Indicators/sub/ATRChart.jsx b/src/components/invest/chart/Indicators/sub/ATRChart.jsx index 98d010b..8a7fd91 100644 --- a/src/components/invest/chart/Indicators/sub/ATRChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ATRChart.jsx @@ -11,24 +11,11 @@ export default function ATRChart({ datas, isShow }) { const ATRValue = useSelector((state) => state.indicatorValues.values.ATR); const calculateATR = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.atr; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const atr = data.result.outReal; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["atr"]: atr[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'ATR' + })); } useEffect(() => { diff --git a/src/components/invest/chart/Indicators/sub/CCIChart.jsx b/src/components/invest/chart/Indicators/sub/CCIChart.jsx index 92fe8ac..e508b1d 100644 --- a/src/components/invest/chart/Indicators/sub/CCIChart.jsx +++ b/src/components/invest/chart/Indicators/sub/CCIChart.jsx @@ -11,24 +11,11 @@ export default function CCIChart({ datas, isShow }) { const CCIValue = useSelector((state) => state.indicatorValues.values.CCI); const calculateCCI = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.cci; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const cci = data.result.outReal; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["cci"]: cci[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'CCI' + })); } useEffect(() => { diff --git a/src/components/invest/chart/Indicators/sub/DMIChart.jsx b/src/components/invest/chart/Indicators/sub/DMIChart.jsx index 4a18f78..c4b4824 100644 --- a/src/components/invest/chart/Indicators/sub/DMIChart.jsx +++ b/src/components/invest/chart/Indicators/sub/DMIChart.jsx @@ -11,24 +11,11 @@ export default function DMIChart({ datas, isShow }) { const DXValue = useSelector((state) => state.indicatorValues.values.DX); const calculateDX = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.dx; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const dx = data.result.outReal; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["dx"]: dx[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'DMI' + })); } useEffect(() => { diff --git a/src/components/invest/chart/Indicators/sub/MACDChart.jsx b/src/components/invest/chart/Indicators/sub/MACDChart.jsx index 6a0396e..c9819d0 100644 --- a/src/components/invest/chart/Indicators/sub/MACDChart.jsx +++ b/src/components/invest/chart/Indicators/sub/MACDChart.jsx @@ -11,30 +11,11 @@ export default function MACDChart({ datas, isShow }) { const MACDValue = useSelector((state) => state.indicatorValues.values.MACD); const calculateMACD = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.macd; - delete newItem.macdSignal; - delete newItem.macdHist; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const macd = data.result.outMACD; - const macdSignal = data.result.outMACDSignal; - const macdHist = data.result.outMACDHist; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["macd"]: macd[i], // 새로운 속성 추가 - ["macdSignal"]: macdSignal[i], // 새로운 속성 추가 - ["macdHist"]: macdHist[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'MACD' + })); } useEffect(() => { diff --git a/src/components/invest/chart/Indicators/sub/MFIChart.jsx b/src/components/invest/chart/Indicators/sub/MFIChart.jsx index cb3eba9..e1755c2 100644 --- a/src/components/invest/chart/Indicators/sub/MFIChart.jsx +++ b/src/components/invest/chart/Indicators/sub/MFIChart.jsx @@ -11,24 +11,11 @@ export default function MFIChart({ datas, isShow }) { const MFIValue = useSelector((state) => state.indicatorValues.values.MFI); const calculateMFI = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.mfi; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const mfi = data.result.outReal; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["mfi"]: mfi[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'MFI' + })); } useEffect(() => { diff --git a/src/components/invest/chart/Indicators/sub/MOMChart.jsx b/src/components/invest/chart/Indicators/sub/MOMChart.jsx index 0ea7f97..ff0ee51 100644 --- a/src/components/invest/chart/Indicators/sub/MOMChart.jsx +++ b/src/components/invest/chart/Indicators/sub/MOMChart.jsx @@ -11,24 +11,11 @@ export default function MOMChart({ datas, isShow }) { const MOMValue = useSelector((state) => state.indicatorValues.values.MOM); const calculateMOM = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.mom; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const mom = data.result.outReal; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["mom"]: mom[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'MOM' + })); } useEffect(() => { diff --git a/src/components/invest/chart/Indicators/sub/OBVChart.jsx b/src/components/invest/chart/Indicators/sub/OBVChart.jsx index 4faccef..7addf3d 100644 --- a/src/components/invest/chart/Indicators/sub/OBVChart.jsx +++ b/src/components/invest/chart/Indicators/sub/OBVChart.jsx @@ -10,24 +10,11 @@ export default function OBVChart({ datas, isShow }) { const isActive = useSelector((state) => state.clickIndicator.OBV); const calculateOBV = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.obv; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const obv = data.result.outReal; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["obv"]: obv[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'OBV' + })); } useEffect(() => { diff --git a/src/components/invest/chart/Indicators/sub/PPOChart.jsx b/src/components/invest/chart/Indicators/sub/PPOChart.jsx index 173744d..c08c012 100644 --- a/src/components/invest/chart/Indicators/sub/PPOChart.jsx +++ b/src/components/invest/chart/Indicators/sub/PPOChart.jsx @@ -11,24 +11,11 @@ export default function PPOChart({ datas, isShow }) { const PPOValue = useSelector((state) => state.indicatorValues.values.PPO); const calculatePPO = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.ppo; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const ppo = data.result.outReal; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["ppo"]: ppo[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'PPO' + })); } useEffect(() => { diff --git a/src/components/invest/chart/Indicators/sub/ROCChart.jsx b/src/components/invest/chart/Indicators/sub/ROCChart.jsx index b46000e..6d94041 100644 --- a/src/components/invest/chart/Indicators/sub/ROCChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ROCChart.jsx @@ -11,24 +11,11 @@ export default function ROCChart({ datas, isShow }) { const ROCValue = useSelector((state) => state.indicatorValues.values.ROC); const calculateROC = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.roc; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const roc = data.result.outReal; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["roc"]: roc[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'ROC' + })); } useEffect(() => { diff --git a/src/components/invest/chart/Indicators/sub/RSIChart.jsx b/src/components/invest/chart/Indicators/sub/RSIChart.jsx index 0ff6ac8..d28494a 100644 --- a/src/components/invest/chart/Indicators/sub/RSIChart.jsx +++ b/src/components/invest/chart/Indicators/sub/RSIChart.jsx @@ -11,24 +11,11 @@ export default function RSIChart({ datas, isShow }) { const RSIValue = useSelector((state) => state.indicatorValues.values.RSI); const calculateRSI = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.rsi; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const rsi = data.result.outReal; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["rsi"]: rsi[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'RSI' + })); } useEffect(() => { diff --git a/src/components/invest/chart/Indicators/sub/STOCH.jsx b/src/components/invest/chart/Indicators/sub/STOCH.jsx index 35f9475..aa8989e 100644 --- a/src/components/invest/chart/Indicators/sub/STOCH.jsx +++ b/src/components/invest/chart/Indicators/sub/STOCH.jsx @@ -11,27 +11,11 @@ export default function STOCHChart({ datas, isShow }) { const STOCHValue = useSelector((state) => state.indicatorValues.values.STOCH); const calculateSTOCH = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.outSlowK; - delete newItem.outSlowD; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const outSlowK = data.result.outSlowK; - const outSlowD = data.result.outSlowD; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["outSlowK"]: outSlowK[i], // 새로운 속성 추가 - ["outSlowD"]: outSlowD[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'STOCH' + })); } useEffect(() => { diff --git a/src/components/invest/chart/Indicators/sub/STOCHFast.jsx b/src/components/invest/chart/Indicators/sub/STOCHFast.jsx index 3ae0586..36e4b78 100644 --- a/src/components/invest/chart/Indicators/sub/STOCHFast.jsx +++ b/src/components/invest/chart/Indicators/sub/STOCHFast.jsx @@ -11,27 +11,11 @@ export default function STOCHFChart({ datas, isShow }) { const STOCHFValue = useSelector((state) => state.indicatorValues.values.STOCHF); const calculateSTOCHF = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.outFastK; - delete newItem.outFastD; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const outFastK = data.result.outFastK; - const outFastD = data.result.outFastD; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["outFastK"]: outFastK[i], // 새로운 속성 추가 - ["outFastD"]: outFastD[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'STOCHF' + })); } useEffect(() => { diff --git a/src/components/invest/chart/Indicators/sub/STOCHRSIChart.jsx b/src/components/invest/chart/Indicators/sub/STOCHRSIChart.jsx index 5651de3..284b55d 100644 --- a/src/components/invest/chart/Indicators/sub/STOCHRSIChart.jsx +++ b/src/components/invest/chart/Indicators/sub/STOCHRSIChart.jsx @@ -11,27 +11,11 @@ export default function STOCHRSIChart({ datas, isShow }) { const STOCHRSIValue = useSelector((state) => state.indicatorValues.values.STOCHRSI); const calculateSTOCHRSI = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.stochRsiK; - delete newItem.stochRsiD; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const outFastK = data.result.outFastK; - const outFastD = data.result.outFastD; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["stochRsiK"]: outFastK[i], // 새로운 속성 추가 - ["stochRsiD"]: outFastD[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'STOCHRSI' + })); } useEffect(() => { diff --git a/src/components/invest/chart/Indicators/sub/TRIXChart.jsx b/src/components/invest/chart/Indicators/sub/TRIXChart.jsx index aaabc1f..00b882a 100644 --- a/src/components/invest/chart/Indicators/sub/TRIXChart.jsx +++ b/src/components/invest/chart/Indicators/sub/TRIXChart.jsx @@ -11,24 +11,11 @@ export default function TRIXChart({ datas, isShow }) { const TRIXValue = useSelector((state) => state.indicatorValues.values.TRIX); const calculateTRIX = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.trix; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const trix = data.result.outReal; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["trix"]: trix[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'TRIX' + })); } useEffect(() => { diff --git a/src/components/invest/chart/Indicators/sub/ULTOSCChart.jsx b/src/components/invest/chart/Indicators/sub/ULTOSCChart.jsx index 67badc6..d45b089 100644 --- a/src/components/invest/chart/Indicators/sub/ULTOSCChart.jsx +++ b/src/components/invest/chart/Indicators/sub/ULTOSCChart.jsx @@ -11,24 +11,11 @@ export default function ULTOSCChart({ datas, isShow }) { const ULTOSCValue = useSelector((state) => state.indicatorValues.values.ULTOSC); const calculateULTOSC = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.ultosc; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const ultosc = data.result.outReal; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["ultosc"]: ultosc[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'ULTOSC' + })); } useEffect(() => { diff --git a/src/components/invest/chart/Indicators/sub/WILLRChart.jsx b/src/components/invest/chart/Indicators/sub/WILLRChart.jsx index f35e60c..2548f9c 100644 --- a/src/components/invest/chart/Indicators/sub/WILLRChart.jsx +++ b/src/components/invest/chart/Indicators/sub/WILLRChart.jsx @@ -11,24 +11,11 @@ export default function WILLRChart({ datas, isShow }) { const WILLRValue = useSelector((state) => state.indicatorValues.values.WILLR); const calculateWILLR = (data) => { - const updatedDatas = datas.map(item => { - const newItem = { ...item }; - delete newItem.willr; - return newItem; - }); - - const newData = [...updatedDatas]; - - const f_idx = data.begIndex; - const l_idx = data.nbElement; - const willr = data.result.outReal; - for (let i = 0; i < l_idx; i++) { - newData[f_idx + i] = { - ...newData[f_idx + i], // 기존 객체를 복사 - ["willr"]: willr[i], // 새로운 속성 추가 - }; - } - dispatch(setChartDatas(newData)); + dispatch(setChartDatas({ + newData: datas, + data: data, + name: 'WILLR' + })); } useEffect(() => { diff --git a/src/components/invest/chart/MainChart.jsx b/src/components/invest/chart/MainChart.jsx index 1e39ea6..482d01e 100644 --- a/src/components/invest/chart/MainChart.jsx +++ b/src/components/invest/chart/MainChart.jsx @@ -59,21 +59,24 @@ import ULTOSCChart from "./Indicators/sub/ULTOSCChart"; import PPOChart from "./Indicators/sub/PPOChart"; import { setCompanyCode } from "../../../store/reducers/Chart/clickCompany"; import { setChartIndi, setDisactiveSub, setSubIndi } from "../../../store/reducers/Chart/Indicators/clickIndicators"; +import { getBBANDSChart, getSARChart } from "../../../store/reducers/Chart/Indicators/chart"; export default function MainChart({ toggleCharts, toggleIndicators }) { const dataList = useSelector((state) => state.chart.datas); const clickDate = useSelector((state) => state.chart.date); const company = useSelector((state) => state.company.data); const companyCode = useSelector((state) => state.company.companyCode); + const dispatch = useDispatch(); + const [isShow, setIsShow] = useState(false); // 클릭한 보조지표 const subIndi = useSelector((state) => state.clickIndicator.subIndi); const chartIndi = useSelector((state) => state.clickIndicator.chartIndi); - const dispatch = useDispatch(); + console.log('보조지표', subIndi); + console.log('차트지표', chartIndi); function getData(format) { - console.log('버튼 클릭 시 데이터 새로 받아옴') const date = new Date(); const formattedDate = date.toISOString().slice(0, 10).replace(/-/g, ""); const data = { @@ -84,8 +87,20 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { } dispatch(getChartDatas(data)) + .then(() => setIsShow(prev => !prev)) + } - // TODO : 일, 주, 월, 년 선택시 지표 초기화되는거 고민해보기 + function getNewData(format) { + const date = new Date(); + const formattedDate = date.toISOString().slice(0, 10).replace(/-/g, ""); + const data = { + "code" : company.code, + "start_date" : "19990101", + "end_date" : formattedDate, + "time_format" : format + } + + dispatch(getChartDatas(data)) // 실시간 데이터 받아올 때 수정해야할 수도 있는 부분 // 차트지표, 보조지표 초기화 // 새로운 기업의 데이터를 불러올 때는 초기화를 시켜줘야함 @@ -102,10 +117,11 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { } useEffect(() => { + // getData('D') // 실시간 데이터 받아올 때 수정해야할 수도 있는 부분 // 새로운 기업을 클릭했을 때만 데이터 갱신 if (companyCode !== company.code) { - getData(company.code) + getNewData(company.code) dispatch(setCompanyCode(company.code)) } @@ -328,19 +344,19 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { {/* 차트지표 */} {chartIndi.includes('SMA') && ( - + )} {chartIndi.includes('WMA') && ( - + )} {chartIndi.includes('EMA') && ( - + )} {chartIndi.includes('BBANDS') && ( - + )} {chartIndi.includes('SAR') && ( - + )} @@ -395,7 +411,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('MACD')) * barChartHeight]} > - + )} @@ -406,7 +422,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('STOCHF')) * barChartHeight]} > - + )} @@ -417,7 +433,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('STOCH')) * barChartHeight]} > - + )} @@ -428,7 +444,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('RSI')) * barChartHeight]} > - + )} @@ -439,7 +455,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('CCI')) * barChartHeight]} > - + )} @@ -450,7 +466,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('MOM')) * barChartHeight]} > - + )} @@ -461,7 +477,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ROC')) * barChartHeight]} > - + )} @@ -472,7 +488,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('AD')) * barChartHeight]} > - + )} @@ -483,7 +499,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ATR')) * barChartHeight]} > - + )} @@ -494,7 +510,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('MFI')) * barChartHeight]} > - + )} @@ -505,7 +521,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('OBV')) * barChartHeight]} > - + )} @@ -516,7 +532,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ADOSC')) * barChartHeight]} > - + )} @@ -527,7 +543,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('TRIX')) * barChartHeight]} > - + )} @@ -538,7 +554,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('WILLR')) * barChartHeight]} > - + )} @@ -550,7 +566,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('DX')) * barChartHeight]} > - + )} @@ -561,7 +577,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ADX')) * barChartHeight]} > - + )} @@ -572,18 +588,18 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ADXR')) * barChartHeight]} > - + )} {/* AROON 차트 */} {subIndi.includes('AROON') && ( data.aroon} + yExtents={data => data.aroonDown} padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('AROON')) * barChartHeight]} > - + )} @@ -594,7 +610,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('AROONOSC')) * barChartHeight]} > - + )} @@ -605,7 +621,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('STOCHRSI')) * barChartHeight]} > - + )} @@ -616,7 +632,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ULTOSC')) * barChartHeight]} > - + )} @@ -628,7 +644,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { padding={20} origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('PPO')) * barChartHeight]} > - + )} diff --git a/src/store/reducers/Chart/chart.jsx b/src/store/reducers/Chart/chart.jsx index 78b4b1c..b193195 100644 --- a/src/store/reducers/Chart/chart.jsx +++ b/src/store/reducers/Chart/chart.jsx @@ -2,7 +2,809 @@ import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; import { getChartData, getMinuteData } from '../../../lib/apis/chart' const initialState = { - datas: [], + // default : 삼성전자 + datas: [ + { + "open": 67000, + "close": 66700, + "high": 67900, + "low": 66700, + "volume": 15517624, + "date": "20231026" + }, + { + "open": 67100, + "close": 67300, + "high": 67300, + "low": 66700, + "volume": 11334726, + "date": "20231027" + }, + { + "open": 66800, + "close": 67300, + "high": 67800, + "low": 66700, + "volume": 10139270, + "date": "20231030" + }, + { + "open": 67600, + "close": 66900, + "high": 68300, + "low": 66900, + "volume": 14488892, + "date": "20231031" + }, + { + "open": 67500, + "close": 68600, + "high": 68900, + "low": 67300, + "volume": 13775256, + "date": "20231101" + }, + { + "open": 70000, + "close": 69700, + "high": 70000, + "low": 69400, + "volume": 16350031, + "date": "20231102" + }, + { + "open": 69700, + "close": 69600, + "high": 70200, + "low": 69500, + "volume": 10322234, + "date": "20231103" + }, + { + "open": 69800, + "close": 70900, + "high": 70900, + "low": 69300, + "volume": 22228488, + "date": "20231106" + }, + { + "open": 70600, + "close": 70900, + "high": 70900, + "low": 70000, + "volume": 17228732, + "date": "20231107" + }, + { + "open": 71300, + "close": 69900, + "high": 71400, + "low": 69700, + "volume": 12901310, + "date": "20231108" + }, + { + "open": 69900, + "close": 70300, + "high": 70800, + "low": 69600, + "volume": 12301373, + "date": "20231109" + }, + { + "open": 70000, + "close": 70500, + "high": 70500, + "low": 69500, + "volume": 9684347, + "date": "20231110" + }, + { + "open": 71300, + "close": 70400, + "high": 71300, + "low": 70300, + "volume": 9246919, + "date": "20231113" + }, + { + "open": 71000, + "close": 70800, + "high": 71100, + "low": 70600, + "volume": 9567984, + "date": "20231114" + }, + { + "open": 71600, + "close": 72200, + "high": 72200, + "low": 71500, + "volume": 20148676, + "date": "20231115" + }, + { + "open": 72500, + "close": 72800, + "high": 73000, + "low": 72300, + "volume": 15860451, + "date": "20231116" + }, + { + "open": 72300, + "close": 72500, + "high": 73000, + "low": 72300, + "volume": 11494644, + "date": "20231117" + }, + { + "open": 72100, + "close": 72700, + "high": 73000, + "low": 72100, + "volume": 10610157, + "date": "20231120" + }, + { + "open": 73100, + "close": 72800, + "high": 73400, + "low": 72700, + "volume": 9712881, + "date": "20231121" + }, + { + "open": 72200, + "close": 72800, + "high": 73000, + "low": 71900, + "volume": 11105143, + "date": "20231122" + }, + { + "open": 73000, + "close": 72400, + "high": 73200, + "low": 72200, + "volume": 6775614, + "date": "20231123" + }, + { + "open": 72400, + "close": 71700, + "high": 72600, + "low": 71700, + "volume": 6676685, + "date": "20231124" + }, + { + "open": 71500, + "close": 71300, + "high": 72100, + "low": 71100, + "volume": 9113857, + "date": "20231127" + }, + { + "open": 71400, + "close": 72700, + "high": 72700, + "low": 71300, + "volume": 13283081, + "date": "20231128" + }, + { + "open": 72400, + "close": 72700, + "high": 72800, + "low": 72200, + "volume": 9283933, + "date": "20231129" + }, + { + "open": 72700, + "close": 72800, + "high": 72800, + "low": 72200, + "volume": 15783714, + "date": "20231130" + }, + { + "open": 72400, + "close": 72000, + "high": 72500, + "low": 71700, + "volume": 9871284, + "date": "20231201" + }, + { + "open": 72800, + "close": 72600, + "high": 72900, + "low": 72400, + "volume": 10229267, + "date": "20231204" + }, + { + "open": 72300, + "close": 71200, + "high": 72400, + "low": 71200, + "volume": 12129682, + "date": "20231205" + }, + { + "open": 71800, + "close": 71700, + "high": 72100, + "low": 71600, + "volume": 8123087, + "date": "20231206" + }, + { + "open": 71800, + "close": 71500, + "high": 71900, + "low": 71100, + "volume": 8862017, + "date": "20231207" + }, + { + "open": 72100, + "close": 72600, + "high": 72800, + "low": 71900, + "volume": 10859463, + "date": "20231208" + }, + { + "open": 72800, + "close": 73000, + "high": 73000, + "low": 72200, + "volume": 9861960, + "date": "20231211" + }, + { + "open": 73300, + "close": 73500, + "high": 73500, + "low": 73100, + "volume": 13758646, + "date": "20231212" + }, + { + "open": 73300, + "close": 72800, + "high": 73500, + "low": 72800, + "volume": 13116766, + "date": "20231213" + }, + { + "open": 74100, + "close": 73100, + "high": 74300, + "low": 72500, + "volume": 27567592, + "date": "20231214" + }, + { + "open": 73800, + "close": 73300, + "high": 74000, + "low": 73200, + "volume": 15419815, + "date": "20231215" + }, + { + "open": 73300, + "close": 72900, + "high": 73400, + "low": 72800, + "volume": 9690551, + "date": "20231218" + }, + { + "open": 73000, + "close": 73400, + "high": 73400, + "low": 72800, + "volume": 8907632, + "date": "20231219" + }, + { + "open": 74200, + "close": 74800, + "high": 74900, + "low": 73800, + "volume": 16870156, + "date": "20231220" + }, + { + "open": 74600, + "close": 75000, + "high": 75000, + "low": 74300, + "volume": 13478766, + "date": "20231221" + }, + { + "open": 75800, + "close": 75900, + "high": 76300, + "low": 75400, + "volume": 14515608, + "date": "20231222" + }, + { + "open": 76100, + "close": 76600, + "high": 76700, + "low": 75700, + "volume": 13164909, + "date": "20231226" + }, + { + "open": 76700, + "close": 78000, + "high": 78000, + "low": 76500, + "volume": 20651042, + "date": "20231227" + }, + { + "open": 77700, + "close": 78500, + "high": 78500, + "low": 77500, + "volume": 17797536, + "date": "20231228" + }, + { + "open": 78200, + "close": 79600, + "high": 79800, + "low": 78200, + "volume": 17142848, + "date": "20240102" + }, + { + "open": 78500, + "close": 77000, + "high": 78800, + "low": 77000, + "volume": 21753644, + "date": "20240103" + }, + { + "open": 76100, + "close": 76600, + "high": 77300, + "low": 76100, + "volume": 15324439, + "date": "20240104" + }, + { + "open": 76700, + "close": 76600, + "high": 77100, + "low": 76400, + "volume": 11304316, + "date": "20240105" + }, + { + "open": 77000, + "close": 76500, + "high": 77500, + "low": 76400, + "volume": 11088724, + "date": "20240108" + }, + { + "open": 77400, + "close": 74700, + "high": 77700, + "low": 74300, + "volume": 26019248, + "date": "20240109" + }, + { + "open": 75000, + "close": 73600, + "high": 75200, + "low": 73200, + "volume": 20259528, + "date": "20240110" + }, + { + "open": 72900, + "close": 73200, + "high": 73600, + "low": 72700, + "volume": 57691264, + "date": "20240111" + }, + { + "open": 73000, + "close": 73100, + "high": 74100, + "low": 72800, + "volume": 13038939, + "date": "20240112" + }, + { + "open": 73200, + "close": 73900, + "high": 74000, + "low": 73200, + "volume": 13212339, + "date": "20240115" + }, + { + "open": 73500, + "close": 72600, + "high": 73700, + "low": 72500, + "volume": 14760415, + "date": "20240116" + }, + { + "open": 73100, + "close": 71000, + "high": 73300, + "low": 71000, + "volume": 22683660, + "date": "20240117" + }, + { + "open": 71600, + "close": 71700, + "high": 72000, + "low": 70700, + "volume": 17853396, + "date": "20240118" + }, + { + "open": 73500, + "close": 74700, + "high": 74700, + "low": 73000, + "volume": 23363428, + "date": "20240119" + }, + { + "open": 75900, + "close": 75100, + "high": 76000, + "low": 75000, + "volume": 19673376, + "date": "20240122" + }, + { + "open": 75700, + "close": 75200, + "high": 75800, + "low": 74300, + "volume": 14786224, + "date": "20240123" + }, + { + "open": 75200, + "close": 74000, + "high": 75200, + "low": 73500, + "volume": 12860661, + "date": "20240124" + }, + { + "open": 74200, + "close": 74100, + "high": 74800, + "low": 73700, + "volume": 11737747, + "date": "20240125" + }, + { + "open": 73700, + "close": 73400, + "high": 74500, + "low": 73300, + "volume": 11160062, + "date": "20240126" + }, + { + "open": 73800, + "close": 74400, + "high": 75200, + "low": 73500, + "volume": 13976521, + "date": "20240129" + }, + { + "open": 75000, + "close": 74300, + "high": 75300, + "low": 73700, + "volume": 12244418, + "date": "20240130" + }, + { + "open": 73400, + "close": 72700, + "high": 74000, + "low": 72500, + "volume": 15703560, + "date": "20240131" + }, + { + "open": 73000, + "close": 73600, + "high": 74200, + "low": 72900, + "volume": 19881032, + "date": "20240201" + }, + { + "open": 74000, + "close": 75200, + "high": 75200, + "low": 73700, + "volume": 14955881, + "date": "20240202" + }, + { + "open": 74200, + "close": 74300, + "high": 74800, + "low": 73500, + "volume": 19026020, + "date": "20240205" + }, + { + "open": 74300, + "close": 74400, + "high": 74700, + "low": 73300, + "volume": 14559254, + "date": "20240206" + }, + { + "open": 74600, + "close": 75000, + "high": 75500, + "low": 74300, + "volume": 16566445, + "date": "20240207" + }, + { + "open": 75000, + "close": 74100, + "high": 75200, + "low": 73600, + "volume": 20810708, + "date": "20240208" + }, + { + "open": 74800, + "close": 75200, + "high": 75200, + "low": 74400, + "volume": 21966744, + "date": "20240213" + }, + { + "open": 73700, + "close": 74000, + "high": 74300, + "low": 73700, + "volume": 12434945, + "date": "20240214" + }, + { + "open": 74200, + "close": 73000, + "high": 74400, + "low": 73000, + "volume": 14120600, + "date": "20240215" + }, + { + "open": 73300, + "close": 72800, + "high": 73400, + "low": 72500, + "volume": 13444781, + "date": "20240216" + }, + { + "open": 72800, + "close": 73800, + "high": 73900, + "low": 72800, + "volume": 12726404, + "date": "20240219" + }, + { + "open": 73700, + "close": 73300, + "high": 73700, + "low": 72800, + "volume": 14681477, + "date": "20240220" + }, + { + "open": 73400, + "close": 73000, + "high": 73700, + "low": 72900, + "volume": 11503495, + "date": "20240221" + }, + { + "open": 73800, + "close": 73100, + "high": 73900, + "low": 72700, + "volume": 15208934, + "date": "20240222" + }, + { + "open": 73600, + "close": 72900, + "high": 74200, + "low": 72900, + "volume": 16225166, + "date": "20240223" + }, + { + "open": 72300, + "close": 72800, + "high": 73200, + "low": 72200, + "volume": 14669352, + "date": "20240226" + }, + { + "open": 73100, + "close": 72900, + "high": 73400, + "low": 72700, + "volume": 13201981, + "date": "20240227" + }, + { + "open": 72900, + "close": 73200, + "high": 73900, + "low": 72800, + "volume": 11795859, + "date": "20240228" + }, + { + "open": 72600, + "close": 73400, + "high": 73400, + "low": 72000, + "volume": 21176404, + "date": "20240229" + }, + { + "open": 74300, + "close": 74900, + "high": 75000, + "low": 74000, + "volume": 23210474, + "date": "20240304" + }, + { + "open": 74600, + "close": 73700, + "high": 74800, + "low": 73700, + "volume": 19505124, + "date": "20240305" + }, + { + "open": 73200, + "close": 72900, + "high": 73500, + "low": 72700, + "volume": 21547904, + "date": "20240306" + }, + { + "open": 73100, + "close": 72200, + "high": 73300, + "low": 72200, + "volume": 14516963, + "date": "20240307" + }, + { + "open": 72800, + "close": 73300, + "high": 73400, + "low": 72600, + "volume": 19271348, + "date": "20240308" + }, + { + "open": 72900, + "close": 72400, + "high": 73100, + "low": 72300, + "volume": 9740504, + "date": "20240311" + }, + { + "open": 72600, + "close": 73300, + "high": 73500, + "low": 72100, + "volume": 13011654, + "date": "20240312" + }, + { + "open": 73700, + "close": 74100, + "high": 74100, + "low": 73500, + "volume": 15243134, + "date": "20240313" + }, + { + "open": 74400, + "close": 74300, + "high": 74500, + "low": 73600, + "volume": 22545540, + "date": "20240314" + }, + { + "open": 73400, + "close": 72300, + "high": 73700, + "low": 72300, + "volume": 22580556, + "date": "20240315" + }, + { + "open": 72600, + "close": 72800, + "high": 73000, + "low": 72500, + "volume": 11520348, + "date": "20240318" + }, + { + "open": 72300, + "close": 72800, + "high": 73000, + "low": 71700, + "volume": 15376066, + "date": "20240319" + }, + { + "open": 73700, + "close": 76900, + "high": 77200, + "low": 73400, + "volume": 50106296, + "date": "20240320" + }, + { + "open": 79200, + "close": 79100, + "high": 79200, + "low": 77700, + "volume": 36822460, + "date": "20240321" + } + ], date: "D", }; @@ -27,7 +829,256 @@ const chartSlice = createSlice({ initialState: initialState, reducers: { setChartDatas(state, action) { - state.datas = action.payload; + const f_idx = action.payload.data.begIndex; + const l_idx = action.payload.data.nbElement; + const getIndi = action.payload.data.result; + if (action.payload.name === 'MACD') { + state.datas.map(item => { + delete item.macd; + delete item.macdSignal; + delete item.macdHist; + }); + + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["macd"] = getIndi.outMACD[i] + state.datas[f_idx + i]["macdSignal"] = getIndi.outMACDSignal[i] // 새로운 속성 추가 + state.datas[f_idx + i]["macdHist"] = getIndi.outMACDHist[i] // 새로운 속성 추가 + } + } else if (action.payload.name === 'STOCHF') { + state.datas.map(item => { + delete item.outFastK; + delete item.outFastD; + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["outFastK"] = getIndi.outFastK[i] + state.datas[f_idx + i]["outFastD"] = getIndi.outFastD[i] // 새로운 속성 추가 + } + } else if (action.payload.name === 'STOCH') { + state.datas.map(item => { + delete item.outSlowK; + delete item.outSlowD; + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["outSlowK"] = getIndi.outSlowK[i] + state.datas[f_idx + i]["outSlowD"] = getIndi.outSlowD[i] // 새로운 속성 추가 + } + } else if (action.payload.name === 'RSI') { + state.datas.map(item => { + delete item.rsi; + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["rsi"] = getIndi.outReal[i] + } + } else if (action.payload.name === 'CCI') { + state.datas.map(item => { + delete item.cci; + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["cci"] = getIndi.outReal[i] + } + } else if (action.payload.name === 'MOM') { + state.datas.map(item => { + delete item.mom; + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["mom"] = getIndi.outReal[i] + } + } else if (action.payload.name === 'ROC') { + state.datas.map(item => { + delete item.roc; + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["roc"] = getIndi.outReal[i] + } + } else if (action.payload.name === 'AD') { + state.datas.map(item => { + delete item.ad; + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["ad"] = getIndi.outReal[i] + } + } else if (action.payload.name === 'ATR') { + state.datas.map(item => { + delete item.atr; + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["atr"] = getIndi.outReal[i] + } + } else if (action.payload.name === 'MFI') { + state.datas.map(item => { + delete item.mfi; + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["mfi"] = getIndi.outReal[i] + } + } else if (action.payload.name === 'OBV') { + state.datas.map(item => { + delete item.obv; + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["obv"] = getIndi.outReal[i] + } + } else if (action.payload.name === 'ADOSC') { + state.datas.map(item => { + delete item.adosc; + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["adosc"] = getIndi.outReal[i] + } + } else if (action.payload.name === 'TRIX') { + state.datas.map(item => { + delete item.trix; + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["trix"] = getIndi.outReal[i] + } + } else if (action.payload.name === 'WILLR') { + state.datas.map(item => { + delete item.willr; + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["willr"] = getIndi.outReal[i] + } + } else if (action.payload.name === 'DMI') { + state.datas.map(item => { + delete item.dx; + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["dx"] = getIndi.outReal[i] + } + } else if (action.payload.name === 'ADX') { + state.datas.map(item => { + delete item.adx; + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["adx"] = getIndi.outReal[i] + } + } else if (action.payload.name === 'ADXR') { + state.datas.map(item => { + delete item.adxr; + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["adxr"] = getIndi.outReal[i] + } + } else if (action.payload.name === 'AROON') { + state.datas.map(item => { + delete item.aroonDown; + delete item.aroonUp; + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["aroonDown"] = getIndi.outAroonDown[i] + state.datas[f_idx + i]["aroonUp"] = getIndi.outAroonUp[i] + } + } else if (action.payload.name === 'AROONOSC') { + state.datas.map(item => { + delete item.aroonosc; + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["aroonosc"] = getIndi.outReal[i] + } + } else if (action.payload.name === 'STOCHRSI') { + state.datas.map(item => { + delete item.stochRsiK; + delete item.stochRsiD; + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["stochRsiK"] = getIndi.outFastK[i]; + state.datas[f_idx + i]["stochRsiD"] = getIndi.outFastD[i]; + } + } else if (action.payload.name === 'ULTOSC') { + state.datas.map(item => { + delete item.ultosc; + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["ultosc"] = getIndi.outReal[i]; + } + } else if (action.payload.name === 'PPO') { + state.datas.map(item => { + delete item.ppo; + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["ppo"] = getIndi.outReal[i]; + } + } else if (action.payload.name === 'BBANDS') { + state.datas.map(item => { + delete item.upper; + delete item.middle; + delete item.lower; + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["upper"] = getIndi.outRealUpperBand[i]; + state.datas[f_idx + i]["middle"] = getIndi.outRealMiddleBand[i]; + state.datas[f_idx + i]["lower"] = getIndi.outRealLowerBand[i]; + } + } else if (action.payload.name === 'SAR') { + state.datas.map(item => { + delete item.sar; + + }); + for (let i = 0; i < l_idx; i++) { + state.datas[f_idx + i]["sar"] = getIndi.outReal[i]; + } + } else if (action.payload.name === 'EMA') { + state.datas.map(item => { + Object.keys(item).forEach(key => { + if (key.includes('ema')) { + delete item[key]; + } + }); + }); + + const responses = [action.payload.data.response1, action.payload.data.response2, action.payload.data.response3, action.payload.data.response4, action.payload.data.response5]; + const EMAValue = action.payload.value; + responses.forEach((response, index) => { + const f_idx = response.begIndex; + const l_idx = response.nbElement; + const subData = response.result.outReal; + for (let i = 0; i < l_idx; i++) { + const emaKey = `ema${[EMAValue[0], EMAValue[1], EMAValue[2], EMAValue[3], EMAValue[4]][index]}`; + state.datas[f_idx + i][emaKey] = subData[i]; + } + }); + } else if (action.payload.name === 'SMA') { + state.datas.map(item => { + Object.keys(item).forEach(key => { + if (key.includes('sma')) { + delete item[key]; + } + }); + }); + + const responses = [action.payload.data.response1, action.payload.data.response2, action.payload.data.response3, action.payload.data.response4, action.payload.data.response5]; + const SMAValue = action.payload.value; + responses.forEach((response, index) => { + const f_idx = response.begIndex; + const l_idx = response.nbElement; + const subData = response.result.outReal; + for (let i = 0; i < l_idx; i++) { + const smaKey = `sma${[SMAValue[0], SMAValue[1], SMAValue[2], SMAValue[3], SMAValue[4]][index]}`; + state.datas[f_idx + i][smaKey] = subData[i]; + } + }); + } else if (action.payload.name === 'WMA') { + state.datas.map(item => { + Object.keys(item).forEach(key => { + if (key.includes('wma')) { + delete item[key]; + } + }); + }); + + const responses = [action.payload.data.response1, action.payload.data.response2, action.payload.data.response3, action.payload.data.response4, action.payload.data.response5]; + const WMAValue = action.payload.value; + responses.forEach((response, index) => { + const f_idx = response.begIndex; + const l_idx = response.nbElement; + const subData = response.result.outReal; + for (let i = 0; i < l_idx; i++) { + const wmaKey = `wma${[WMAValue[0], WMAValue[1], WMAValue[2], WMAValue[3], WMAValue[4]][index]}`; + state.datas[f_idx + i][wmaKey] = subData[i]; + } + }); + } }, setClickDate(state, action) { state.date = action.payload; From 6efcf0066688deb5b74c3a55f26e77d0fb3ee1d3 Mon Sep 17 00:00:00 2001 From: chaeheonjeong Date: Thu, 21 Mar 2024 15:16:58 +0900 Subject: [PATCH 71/84] feat: Add trading --- src/App.jsx | 12 +- src/components/invest/chart/MainChart.jsx | 478 +++++++++++------- src/components/invest/right-bar/OrderBook.jsx | 12 - .../right-bar/OrderHistory/CancleIcon.jsx | 24 + .../invest/right-bar/OrderHistory/NewIcon.jsx | 24 + .../OrderHistory/OrderFilledItem.jsx | 68 +++ .../OrderHistory/OrderHistoryList.jsx | 113 +++++ .../OrderHistory/OrderPendingItem.jsx | 71 +++ .../Button/TradingInputButton.jsx | 38 ++ .../OrderManagement/Modal/ErrorOrderModal.jsx | 94 ++++ .../OrderManagement/Modal/OrderModal.jsx | 204 ++++++++ .../right-bar/OrderManagement/OrderBook.jsx | 375 ++++++++++++++ .../{ => OrderManagement}/PriceBook.jsx | 43 +- src/routes/Feed/FeedPage.jsx | 1 + src/routes/Trading/TradingPage.jsx | 158 +++++- src/store/reducers/Chart/clickCompany.jsx | 4 +- 16 files changed, 1504 insertions(+), 215 deletions(-) delete mode 100644 src/components/invest/right-bar/OrderBook.jsx create mode 100644 src/components/invest/right-bar/OrderHistory/CancleIcon.jsx create mode 100644 src/components/invest/right-bar/OrderHistory/NewIcon.jsx create mode 100644 src/components/invest/right-bar/OrderHistory/OrderFilledItem.jsx create mode 100644 src/components/invest/right-bar/OrderHistory/OrderHistoryList.jsx create mode 100644 src/components/invest/right-bar/OrderHistory/OrderPendingItem.jsx create mode 100644 src/components/invest/right-bar/OrderManagement/Button/TradingInputButton.jsx create mode 100644 src/components/invest/right-bar/OrderManagement/Modal/ErrorOrderModal.jsx create mode 100644 src/components/invest/right-bar/OrderManagement/Modal/OrderModal.jsx create mode 100644 src/components/invest/right-bar/OrderManagement/OrderBook.jsx rename src/components/invest/right-bar/{ => OrderManagement}/PriceBook.jsx (78%) diff --git a/src/App.jsx b/src/App.jsx index 806d1d1..a59580c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,8 +1,8 @@ -import { RouterProvider } from 'react-router-dom'; -import mainRouter from './router/main-router'; -import { Provider } from 'react-redux'; -import { PersistGate } from 'redux-persist/integration/react'; -import { store, persistor } from './store/store'; +import { RouterProvider } from "react-router-dom"; +import mainRouter from "./router/main-router"; +import { Provider } from "react-redux"; +import { PersistGate } from "redux-persist/integration/react"; +import { store, persistor } from "./store/store"; function App() { return ( @@ -11,7 +11,7 @@ function App() { - ) + ); } export default App; diff --git a/src/components/invest/chart/MainChart.jsx b/src/components/invest/chart/MainChart.jsx index f3807b0..ba83ec5 100644 --- a/src/components/invest/chart/MainChart.jsx +++ b/src/components/invest/chart/MainChart.jsx @@ -25,9 +25,13 @@ import { import default_Img from "../../../../public/icon/+.svg"; -import { useSelector, useDispatch } from 'react-redux'; +import { useSelector, useDispatch } from "react-redux"; import styled from "styled-components"; -import { getChartDatas, getMinuteDatas, setChartDatas } from "../../../store/reducers/Chart/chart"; +import { + getChartDatas, + getMinuteDatas, + setChartDatas, +} from "../../../store/reducers/Chart/chart"; // 차트지표 import SMAChart from "./Indicators/chart/SMAChart"; @@ -59,23 +63,23 @@ import ULTOSCChart from "./Indicators/sub/ULTOSCChart"; import PPOChart from "./Indicators/sub/PPOChart"; export default function MainChart({ toggleCharts, toggleIndicators }) { - const dataList = useSelector((state) => state.chart.datas) - const company = useSelector((state) => state.company.data) + const dataList = useSelector((state) => state.chart.datas); + const company = useSelector((state) => state.company.data); const dispatch = useDispatch(); const [isShow, setIsShow] = useState(false); - + function getData(format) { const date = new Date(); const formattedDate = date.toISOString().slice(0, 10).replace(/-/g, ""); const data = { - "code" : company.code, - "start_date" : "19990101", - "end_date" : formattedDate, - "time_format" : format - } + code: company.code, + start_date: "19990101", + end_date: formattedDate, + time_format: format, + }; - dispatch(getChartDatas(data)) + dispatch(getChartDatas(data)); } // function getMinuteData(code) { @@ -101,44 +105,39 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { const date = new Date(); const formattedDate = date.toISOString().slice(0, 10).replace(/-/g, ""); const data = { - "code" : company.code, - "start_date" : "19990101", - "end_date" : formattedDate, - "time_format" : "D" - } - - dispatch(getChartDatas(data)) - .then(() => setIsShow(prev => !prev)) - - }, [company]) - - const ScaleProvider = discontinuousTimeScaleProviderBuilder().inputDateAccessor( - (d) => { - const year = d.date.substr(0, 4) - const month = d.date.substr(4, 2) - const day = d.date.substr(6, 2) - const nDate = `${year}-${month}-${day}` - return new Date(nDate) - } - ); + code: company.code, + start_date: "19990101", + end_date: formattedDate, + time_format: "D", + }; + + dispatch(getChartDatas(data)).then(() => setIsShow((prev) => !prev)); + }, []); + + const ScaleProvider = + discontinuousTimeScaleProviderBuilder().inputDateAccessor((d) => { + const year = d.date.substr(0, 4); + const month = d.date.substr(4, 2); + const day = d.date.substr(6, 2); + const nDate = `${year}-${month}-${day}`; + return new Date(nDate); + }); const margin = { left: 0, right: 78, top: 0, bottom: 24 }; const height = 760; const width = 1250; - const { data, xScale, xAccessor, displayXAccessor } = ScaleProvider( - dataList - ); + const { data, xScale, xAccessor, displayXAccessor } = ScaleProvider(dataList); // 소수점 이하 둘째짜리까지만 표현 - const pricesDisplayFormat = format(','); + const pricesDisplayFormat = format(","); const x_max = xAccessor(data[data.length - 1]); const x_min = xAccessor(data[Math.max(0, data.length - 100)]); const xExtents = [x_min, x_max + 2]; const gridHeight = height - margin.top - margin.bottom; - + // 클릭한 보조지표 const subIndi = useSelector((state) => state.clickIndicator.subIndi); @@ -146,8 +145,11 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { const barChartHeight = subIndi.length < 3 ? gridHeight / 4 : gridHeight / 6; // 차트 추가될 때마다 origin 변경해주어야 함 - const barChartOrigin = (_, h) => [0, gridHeight - (subIndi.length + 1) * barChartHeight]; - + const barChartOrigin = (_, h) => [ + 0, + gridHeight - (subIndi.length + 1) * barChartHeight, + ]; + // * (차트 개수) const chartHeight = gridHeight - barChartHeight * (subIndi.length + 1); @@ -193,50 +195,51 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { y: [ { label: "시가", - value: currentItem.open && pricesDisplayFormat(currentItem.open) + value: currentItem.open && pricesDisplayFormat(currentItem.open), }, { label: "고가", - value: currentItem.high && pricesDisplayFormat(currentItem.high) + value: currentItem.high && pricesDisplayFormat(currentItem.high), }, { label: "저가", - value: currentItem.low && pricesDisplayFormat(currentItem.low) + value: currentItem.low && pricesDisplayFormat(currentItem.low), }, { label: "종가", - value: currentItem.close && pricesDisplayFormat(currentItem.close) + value: currentItem.close && pricesDisplayFormat(currentItem.close), }, { label: "거래량", - value: currentItem.volume && pricesDisplayFormat(currentItem.volume) + value: + currentItem.volume && pricesDisplayFormat(currentItem.volume), }, - ] + ], }; }; } - const getLogoFileName = (name, code) => { - if (name.includes("스팩")) { - return "SPAC_230706"; - } else if (name.includes("ETN")) { - return "ETN_230706"; - } else if ( - name.includes("KODEX") || - name.includes("KOSEF") || - name.includes("KoAct") || - name.includes("TIGER") || - name.includes("ACE") || - name.includes("ARIRANG") || - name.includes("합성 H") || - name.includes("HANARO") || - name.includes("SOL") - ) { - return "ETF_230706"; - } else { - return `kr/${code}`; - } - }; + // const getLogoFileName = (name, code) => { + // if (name.includes("스팩")) { + // return "SPAC_230706"; + // } else if (name.includes("ETN")) { + // return "ETN_230706"; + // } else if ( + // name.includes("KODEX") || + // name.includes("KOSEF") || + // name.includes("KoAct") || + // name.includes("TIGER") || + // name.includes("ACE") || + // name.includes("ARIRANG") || + // name.includes("합성 H") || + // name.includes("HANARO") || + // name.includes("SOL") + // ) { + // return "ETF_230706"; + // } else { + // return `kr/${code}`; + // } + // }; const onErrorImg = (e) => { e.target.src = default_Img; @@ -245,16 +248,18 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { return ( - + /> */} {company.name} - {company.code} {company.index} + + {company.code} {company.index} + @@ -288,7 +293,7 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { {/* 분봉 호버했을 때, 날짜/시가/종가/고가/저가 표시 */} @@ -307,18 +312,18 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { rectWidth={margin.right} displayFormat={pricesDisplayFormat} /> - + - + {/* 거래량 차트 */} @@ -330,16 +335,13 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { > - + d.volume} + yAccessor={(d) => d.volume} yLabel="거래량" - yDisplayFormat={format(",")} + yDisplayFormat={format(",")} /> @@ -352,130 +354,208 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { */} {/* STOCHF 차트 */} - {subIndi.includes('STOCHF') && ( - [data.outFastK - 50, data.outFastK + 50]} - origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('STOCHF')) * barChartHeight]} + {subIndi.includes("STOCHF") && ( + [data.outFastK - 50, data.outFastK + 50]} + origin={(_, h) => [ + 0, + gridHeight - + (subIndi.length - subIndi.indexOf("STOCHF")) * barChartHeight, + ]} > )} {/* STOCHF 차트 */} - {subIndi.includes('STOCH') && ( - [data.outSlowK - 50, data.outSlowK + 50]} - origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('STOCH')) * barChartHeight]} + {subIndi.includes("STOCH") && ( + [data.outSlowK - 50, data.outSlowK + 50]} + origin={(_, h) => [ + 0, + gridHeight - + (subIndi.length - subIndi.indexOf("STOCH")) * barChartHeight, + ]} > )} {/* RSI 차트 */} - {subIndi.includes('RSI') && ( - [data.rsi - 20, data.rsi + 20]} - origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('RSI')) * barChartHeight]} + {subIndi.includes("RSI") && ( + [data.rsi - 20, data.rsi + 20]} + origin={(_, h) => [ + 0, + gridHeight - + (subIndi.length - subIndi.indexOf("RSI")) * barChartHeight, + ]} > )} {/* CCI 차트 */} - {subIndi.includes('CCI') && ( - [data.cci - 100, data.cci + 100]} - origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('CCI')) * barChartHeight]} + {subIndi.includes("CCI") && ( + [data.cci - 100, data.cci + 100]} + origin={(_, h) => [ + 0, + gridHeight - + (subIndi.length - subIndi.indexOf("CCI")) * barChartHeight, + ]} > )} {/* MOM 차트 */} - {subIndi.includes('MOM') && ( - [data.mom - 1000, data.mom + 1000]} - origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('MOM')) * barChartHeight]} + {subIndi.includes("MOM") && ( + [data.mom - 1000, data.mom + 1000]} + origin={(_, h) => [ + 0, + gridHeight - + (subIndi.length - subIndi.indexOf("MOM")) * barChartHeight, + ]} > )} {/* ROC 차트 */} - {subIndi.includes('ROC') && ( - [data.roc - 5, data.roc + 5]} - origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ROC')) * barChartHeight]} + {subIndi.includes("ROC") && ( + [data.roc - 5, data.roc + 5]} + origin={(_, h) => [ + 0, + gridHeight - + (subIndi.length - subIndi.indexOf("ROC")) * barChartHeight, + ]} > )} {/* AD 차트 */} - {subIndi.includes('AD') && ( - [data.ad - 5000000, data.ad + 5000000]} - origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('AD')) * barChartHeight]} + {subIndi.includes("AD") && ( + [data.ad - 5000000, data.ad + 5000000]} + origin={(_, h) => [ + 0, + gridHeight - + (subIndi.length - subIndi.indexOf("AD")) * barChartHeight, + ]} > )} {/* ATR 차트 */} - {subIndi.includes('ATR') && ( - [data.atr - 100, data.atr + 100]} - origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ATR')) * barChartHeight]} + {subIndi.includes("ATR") && ( + [data.atr - 100, data.atr + 100]} + origin={(_, h) => [ + 0, + gridHeight - + (subIndi.length - subIndi.indexOf("ATR")) * barChartHeight, + ]} > )} {/* MFI 차트 */} - {subIndi.includes('MFI') && ( - [data.mfi - 10, data.mfi + 10]} - origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('MFI')) * barChartHeight]} + {subIndi.includes("MFI") && ( + [data.mfi - 10, data.mfi + 10]} + origin={(_, h) => [ + 0, + gridHeight - + (subIndi.length - subIndi.indexOf("MFI")) * barChartHeight, + ]} > )} {/* OBV 차트 */} - {subIndi.includes('OBV') && ( - [data.obv - 50000000, data.obv + 50000000]} - origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('OBV')) * barChartHeight]} + {subIndi.includes("OBV") && ( + [data.obv - 50000000, data.obv + 50000000]} + origin={(_, h) => [ + 0, + gridHeight - + (subIndi.length - subIndi.indexOf("OBV")) * barChartHeight, + ]} > )} {/* ADOSC 차트 */} - {subIndi.includes('ADOSC') && ( - [data.adosc - 10000000, data.adosc + 10000000]} - origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ADOSC')) * barChartHeight]} + {subIndi.includes("ADOSC") && ( + [data.adosc - 10000000, data.adosc + 10000000]} + origin={(_, h) => [ + 0, + gridHeight - + (subIndi.length - subIndi.indexOf("ADOSC")) * barChartHeight, + ]} > )} {/* TRIX 차트 */} - {subIndi.includes('TRIX') && ( - [data.trix - 0.1, data.trix + 0.1]} - origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('TRIX')) * barChartHeight]} + {subIndi.includes("TRIX") && ( + [data.trix - 0.1, data.trix + 0.1]} + origin={(_, h) => [ + 0, + gridHeight - + (subIndi.length - subIndi.indexOf("TRIX")) * barChartHeight, + ]} > )} {/* WILLR 차트 */} - {subIndi.includes('WILLR') && ( - [data.willr - 30, data.willr + 30]} - origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('WILLR')) * barChartHeight]} + {subIndi.includes("WILLR") && ( + [data.willr - 30, data.willr + 30]} + origin={(_, h) => [ + 0, + gridHeight - + (subIndi.length - subIndi.indexOf("WILLR")) * barChartHeight, + ]} > @@ -483,70 +563,112 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { {/* DMI (DX) 차트 */} {/* 값 제대로 받아오는지 확인 필요 */} - {subIndi.includes('DX') && ( - [data.dx - 10, data.dx + 10]} - origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('DX')) * barChartHeight]} + {subIndi.includes("DX") && ( + [data.dx - 10, data.dx + 10]} + origin={(_, h) => [ + 0, + gridHeight - + (subIndi.length - subIndi.indexOf("DX")) * barChartHeight, + ]} > )} {/* ADX 차트 */} - {subIndi.includes('ADX') && ( - [data.adx - 5, data.adx + 5]} - origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ADX')) * barChartHeight]} + {subIndi.includes("ADX") && ( + [data.adx - 5, data.adx + 5]} + origin={(_, h) => [ + 0, + gridHeight - + (subIndi.length - subIndi.indexOf("ADX")) * barChartHeight, + ]} > )} {/* ADXR 차트 */} - {subIndi.includes('ADXR') && ( - [data.adxr - 10, data.adxr + 10]} - origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ADXR')) * barChartHeight]} + {subIndi.includes("ADXR") && ( + [data.adxr - 10, data.adxr + 10]} + origin={(_, h) => [ + 0, + gridHeight - + (subIndi.length - subIndi.indexOf("ADXR")) * barChartHeight, + ]} > )} {/* AROON 차트 */} - {subIndi.includes('AROON') && ( - [data.aroon - 10, data.aroon + 10]} - origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('AROON')) * barChartHeight]} + {subIndi.includes("AROON") && ( + [data.aroon - 10, data.aroon + 10]} + origin={(_, h) => [ + 0, + gridHeight - + (subIndi.length - subIndi.indexOf("AROON")) * barChartHeight, + ]} > )} {/* AROONOSC 차트 */} - {subIndi.includes('AROONOSC') && ( - [data.aroonosc - 10, data.aroonosc + 10]} - origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('AROONOSC')) * barChartHeight]} + {subIndi.includes("AROONOSC") && ( + [data.aroonosc - 10, data.aroonosc + 10]} + origin={(_, h) => [ + 0, + gridHeight - + (subIndi.length - subIndi.indexOf("AROONOSC")) * barChartHeight, + ]} > )} {/* STOCHRSI 차트 */} - {subIndi.includes('STOCHRSI') && ( - [data.stochRsiK - 10, data.stochRsiD + 10]} - origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('STOCHRSI')) * barChartHeight]} + {subIndi.includes("STOCHRSI") && ( + [data.stochRsiK - 10, data.stochRsiD + 10]} + origin={(_, h) => [ + 0, + gridHeight - + (subIndi.length - subIndi.indexOf("STOCHRSI")) * barChartHeight, + ]} > )} {/* ULTOSC 차트 */} - {subIndi.includes('ULTOSC') && ( - [data.ultosc - 10, data.ultosc + 10]} - origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('ULTOSC')) * barChartHeight]} + {subIndi.includes("ULTOSC") && ( + [data.ultosc - 10, data.ultosc + 10]} + origin={(_, h) => [ + 0, + gridHeight - + (subIndi.length - subIndi.indexOf("ULTOSC")) * barChartHeight, + ]} > @@ -554,10 +676,16 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { {/* PPO 차트 */} {/* PPO Signal 데이터인듯 */} - {subIndi.includes('PPO') && ( - [data.ppo - 1, data.ppo + 1]} - origin={(_, h) => [0 , gridHeight - (subIndi.length - subIndi.indexOf('PPO')) * barChartHeight]} + {subIndi.includes("PPO") && ( + [data.ppo - 1, data.ppo + 1]} + origin={(_, h) => [ + 0, + gridHeight - + (subIndi.length - subIndi.indexOf("PPO")) * barChartHeight, + ]} > @@ -572,33 +700,33 @@ const Container = styled.div` flex-direction: column; width: calc(100vw - 650px); padding: 0 10px; -` +`; const CompanyContainer = styled.div` display: flex; align-items: center; padding: 5px; -` +`; const CompanyLogo = styled.img` width: 40px; height: 40px; border-radius: 999px; margin-right: 10px; -` +`; const FontContainer = styled.div` display: flex; flex-direction: column; -` +`; const MainFont = styled.span` font-weight: 700; -` +`; const SubFont = styled.span` font-size: 12px; -` +`; const Content = styled.div` display: flex; @@ -607,4 +735,4 @@ const Content = styled.div` const BtnContainer = styled.div` display: flex; -` +`; diff --git a/src/components/invest/right-bar/OrderBook.jsx b/src/components/invest/right-bar/OrderBook.jsx deleted file mode 100644 index 6af22d7..0000000 --- a/src/components/invest/right-bar/OrderBook.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import React, { useState, useEffect, useRef } from "react"; - -const OrderBook = () => { - return ( -
- {/* 지정가 - 시장가 */} -
- ); -}; - -export default OrderBook; diff --git a/src/components/invest/right-bar/OrderHistory/CancleIcon.jsx b/src/components/invest/right-bar/OrderHistory/CancleIcon.jsx new file mode 100644 index 0000000..9b84273 --- /dev/null +++ b/src/components/invest/right-bar/OrderHistory/CancleIcon.jsx @@ -0,0 +1,24 @@ +const CancleIcon = () => { + return ( +
+ × +
+ ); +}; + +export default CancleIcon; diff --git a/src/components/invest/right-bar/OrderHistory/NewIcon.jsx b/src/components/invest/right-bar/OrderHistory/NewIcon.jsx new file mode 100644 index 0000000..f770199 --- /dev/null +++ b/src/components/invest/right-bar/OrderHistory/NewIcon.jsx @@ -0,0 +1,24 @@ +const NewIcon = () => { + return ( +
+ N +
+ ); +}; + +export default NewIcon; diff --git a/src/components/invest/right-bar/OrderHistory/OrderFilledItem.jsx b/src/components/invest/right-bar/OrderHistory/OrderFilledItem.jsx new file mode 100644 index 0000000..5e9bea1 --- /dev/null +++ b/src/components/invest/right-bar/OrderHistory/OrderFilledItem.jsx @@ -0,0 +1,68 @@ +import React, { useState } from "react"; + +const OrderFilledItem = ({ order }) => { + const [isHovered, setIsHovered] = useState(false); + + return ( +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > +
+
{order.createdAt}
+
+ +
+
{order.name}
+ +
+
+ {order.orderType} +
+
{order.price.toLocaleString()}원
+
·
+
{order.quantity}주
+
+
+ +
+
+ {(order.price * order.quantity).toLocaleString()}원 +
+
+
+ ); +}; + +export default OrderFilledItem; diff --git a/src/components/invest/right-bar/OrderHistory/OrderHistoryList.jsx b/src/components/invest/right-bar/OrderHistory/OrderHistoryList.jsx new file mode 100644 index 0000000..a05e7bb --- /dev/null +++ b/src/components/invest/right-bar/OrderHistory/OrderHistoryList.jsx @@ -0,0 +1,113 @@ +import React, { useState, useEffect } from "react"; +import OrderPendingItem from "./OrderPendingItem"; +import OrderFilledItem from "./OrderFilledItem"; +import { v4 as uuidv4 } from "uuid"; + +const OrderHistoryList = ({ pedingOrderList, filledOrderList }) => { + const [pendingOrders, setPendingOrders] = useState(pedingOrderList); + const [filledOrders, setFilledOrders] = useState(filledOrderList); + + return ( + <> +
+
+ 미체결 +
+ {pendingOrders.length !== 0 ? ( +
+ {pendingOrders.map((order) => ( + + ))} +
+ ) : ( +
+ 미체결 내역이 없습니다. +
+ )} +
+ +
+
+ 체결 +
+ {filledOrderList.length !== 0 ? ( +
+ {filledOrders.map((order) => ( + + ))} +
+ ) : ( +
+ 체결 내역이 없습니다. +
+ )} +
+ + ); +}; +export default OrderHistoryList; diff --git a/src/components/invest/right-bar/OrderHistory/OrderPendingItem.jsx b/src/components/invest/right-bar/OrderHistory/OrderPendingItem.jsx new file mode 100644 index 0000000..cc89f6d --- /dev/null +++ b/src/components/invest/right-bar/OrderHistory/OrderPendingItem.jsx @@ -0,0 +1,71 @@ +import React, { useState } from "react"; +import CancleIcon from "./CancleIcon"; + +const OrderPendingItem = ({ order }) => { + const [isHovered, setIsHovered] = useState(false); + + return ( +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > +
+ +
+ +
+
{order.name}
+ +
+
+ {order.orderType} +
+
{order.price.toLocaleString()}원
+
·
+
{order.quantity}주
+
+
+ +
+
{order.remaining}주
+
+
남음
+
+
+ +
+ ); +}; + +export default OrderPendingItem; diff --git a/src/components/invest/right-bar/OrderManagement/Button/TradingInputButton.jsx b/src/components/invest/right-bar/OrderManagement/Button/TradingInputButton.jsx new file mode 100644 index 0000000..8031c62 --- /dev/null +++ b/src/components/invest/right-bar/OrderManagement/Button/TradingInputButton.jsx @@ -0,0 +1,38 @@ +import React from "react"; + +const TradingInputButton = ({ onClick, children, borderRadius, disabled }) => { + return ( + + ); +}; + +export default TradingInputButton; diff --git a/src/components/invest/right-bar/OrderManagement/Modal/ErrorOrderModal.jsx b/src/components/invest/right-bar/OrderManagement/Modal/ErrorOrderModal.jsx new file mode 100644 index 0000000..f2f3ac0 --- /dev/null +++ b/src/components/invest/right-bar/OrderManagement/Modal/ErrorOrderModal.jsx @@ -0,0 +1,94 @@ +import React, { useState, useEffect } from "react"; + +const ErrorOrderModal = ({ isOpen, onClose, content }) => { + const [modalStyle, setModalStyle] = useState({ + opacity: 0, + pointerEvents: "none", + }); + + useEffect(() => { + if (isOpen) { + setTimeout(() => { + setModalStyle({ + opacity: 1, + pointerEvents: "auto", + }); + }, 100); + } else { + setModalStyle({ + opacity: 0, + pointerEvents: "none", + }); + setTimeout(() => { + setModalStyle({ + opacity: 0, + pointerEvents: "none", + transition: "none", + }); + }, 300); + } + }, [isOpen]); + + if (!isOpen) return null; + + return ( +
+
e.stopPropagation()} + > +
+ {content} +
+ +
+
+ ); +}; + +export default ErrorOrderModal; diff --git a/src/components/invest/right-bar/OrderManagement/Modal/OrderModal.jsx b/src/components/invest/right-bar/OrderManagement/Modal/OrderModal.jsx new file mode 100644 index 0000000..7381b6e --- /dev/null +++ b/src/components/invest/right-bar/OrderManagement/Modal/OrderModal.jsx @@ -0,0 +1,204 @@ +import React, { useState, useEffect } from "react"; + +const OrderModal = ({ isOpen, onClose, userOrderType, price, quantity }) => { + const [modalStyle, setModalStyle] = useState({ + opacity: 0, + pointerEvents: "none", + }); + + useEffect(() => { + if (isOpen) { + setTimeout(() => { + setModalStyle({ + opacity: 1, + pointerEvents: "auto", + }); + }, 100); + } else { + setModalStyle({ + opacity: 0, + pointerEvents: "none", + }); + } + }, [isOpen]); + + if (!isOpen) return null; + + return ( +
+
e.stopPropagation()} + > + +
+
삼성전자
+
+ {userOrderType} +
+
+ +
+
+
주문단가
+
+
{price.toLocaleString()}
+
원
+
+
+ +
+
주문수량
+
+
{quantity}
+
주
+
+
+ +
+ +
+
총 주문금액
+
+
{(price * quantity).toLocaleString()}
+
원
+
+
+
+ +
+ + +
+
+
+ ); +}; + +export default OrderModal; diff --git a/src/components/invest/right-bar/OrderManagement/OrderBook.jsx b/src/components/invest/right-bar/OrderManagement/OrderBook.jsx new file mode 100644 index 0000000..40f82e1 --- /dev/null +++ b/src/components/invest/right-bar/OrderManagement/OrderBook.jsx @@ -0,0 +1,375 @@ +import React, { useState, useEffect } from "react"; +import TradingInputButton from "./Button/TradingInputButton"; +import OrderModal from "./Modal/OrderModal"; +import ErrorOrderModal from "./Modal/ErrorOrderModal"; + +const OrderBook = ({ + currentPrice, + newPriceGap, + maxQuatity, + balance, + orderType, + selectedPrice, +}) => { + const [selectedType, setSelectedType] = useState("지정가"); + const [price, setPrice] = useState(selectedPrice); + const [quantity, setQuantity] = useState(0); + const [priceGap, setPriceGap] = useState(newPriceGap); + const [disablePriceInput, setDisablePriceInput] = useState(false); + const [userMaxQuantity, setUserQuantity] = useState(maxQuatity); + const [userBalance, setUserBalance] = useState(balance); + const [userOrderType, setUserOrderType] = useState(orderType); + const [isModalOpen, setIsModalOpen] = useState(false); + const [isErrorModalOpen, setIsErrorModalOpen] = useState(false); + + const openModal = () => { + setIsModalOpen(true); + }; + + const closeModal = () => { + setIsModalOpen(false); + }; + + const openErrorModal = () => { + setIsErrorModalOpen(true); + }; + + const closeErrorModal = () => { + setIsErrorModalOpen(false); + }; + + const handleTypeChange = (type) => { + setSelectedType(type); + if (type === "시장가") { + setDisablePriceInput(true); + setQuantity(0); + setPrice(0); + } else { + setDisablePriceInput(false); + setPrice(currentPrice); + setQuantity(0); + } + }; + + const increasePrice = () => { + setPrice(price + priceGap); + }; + + const decreasePrice = () => { + const newPrice = price - priceGap; + setPrice(newPrice < 0 ? 0 : newPrice); + }; + + const increaseQuantity = () => { + setQuantity(parseInt(quantity) + 1); + }; + + const decreaseQuantity = () => { + if (quantity > 0) { + setQuantity(parseInt(quantity) - 1); + } + }; + + return ( + <> + + + +
+
+
handleTypeChange("지정가")} + style={{ + backgroundColor: + selectedType === "지정가" ? "#FFE3D7" : "#F5F5F5", + padding: "0.3rem 0.6rem", + borderRadius: "0.3rem 0 0 0.3rem", + display: "flex", + flexDirection: "row", + justifyContent: "center", + alignItems: "center", + fontSize: "0.9rem", + cursor: "pointer", + }} + > + 지정가 +
+
handleTypeChange("시장가")} + style={{ + backgroundColor: + selectedType === "시장가" ? "#FFE3D7" : "#F5F5F5", + padding: "0.3rem 0.6rem", + borderRadius: "0 0.3rem 0.3rem 0", + display: "flex", + flexDirection: "row", + justifyContent: "center", + alignItems: "center", + fontSize: "0.9rem", + cursor: "pointer", + }} + > + 시장가 +
+
+ +
+
가격
+
+ + setPrice(e.target.value === "" ? 0 : parseFloat(e.target.value)) + } + style={{ + padding: "0.2rem 1.8rem", + borderRadius: "0.3rem 0 0 0.3rem", + width: "100%", + textAlign: "right", + border: "solid 1px #D9D9D9", + backgroundColor: disablePriceInput ? "#F0F0F0" : "white", + pointerEvents: disablePriceInput ? "none" : "auto", + }} + disabled={disablePriceInput} + /> + + 원 + +
+ + ▲ + + + ▼ + +
+
+
+ +
+
+
수량
+
+ 최대 + + {userOrderType === "매수" + ? price !== 0 + ? Math.floor(userMaxQuantity / price).toLocaleString() + : 0 + : Math.floor(userMaxQuantity).toLocaleString()}{" "} + + 주 +
+
+ +
+ + setQuantity( + e.target.value === "" ? 0 : parseFloat(e.target.value) + ) + } + style={{ + padding: "0.2rem 1.8rem", + borderRadius: "0.3rem 0 0 0.3rem", + width: "100%", + textAlign: "right", + border: "solid 1px #D9D9D9", + }} + /> + + 주 + +
+ + ▲ + + + ▼ + +
+
+
+ +
+ {orderType === "매수" ? ( +
+
최대
+
+ {userBalance.toLocaleString()} +
+
원
+
+ ) : null} +
+
+ 주문총액 +
+
+
{(price * quantity).toLocaleString()}
+
원
+
+
+ + +
+
+ + ); +}; + +export default OrderBook; diff --git a/src/components/invest/right-bar/PriceBook.jsx b/src/components/invest/right-bar/OrderManagement/PriceBook.jsx similarity index 78% rename from src/components/invest/right-bar/PriceBook.jsx rename to src/components/invest/right-bar/OrderManagement/PriceBook.jsx index 5d06cc7..ca20560 100644 --- a/src/components/invest/right-bar/PriceBook.jsx +++ b/src/components/invest/right-bar/OrderManagement/PriceBook.jsx @@ -1,7 +1,11 @@ import React, { useState, useEffect, useRef } from "react"; import { v4 as uuidv4 } from "uuid"; -const PriceBook = () => { +const PriceBook = ({ + onPriceUpdate, + onPriceGapUpdate, + onSelectedPriceUpdate, +}) => { // 매도 const sellPriceData = [ 72200, @@ -65,6 +69,11 @@ const PriceBook = () => { const [currentPrice, setCurrentPrice] = useState(72200); const containerRef = useRef(null); + useEffect(() => { + onPriceUpdate(currentPrice); + onPriceGapUpdate(sellPrice[1] - sellPrice[0]); + }, []); + const adjustScroll = () => { const container = containerRef.current; if (container) { @@ -89,8 +98,8 @@ const PriceBook = () => { }} >
- {Array.from({ length: 10 }) - .map((_, index) => ( + {sellPrice + .map((price, index) => (
{ alignItems: "center", justifyContent: "space-between", padding: "0 1rem", - border: - sellPrice[index] === currentPrice - ? "1px solid black" - : "none", + border: price === currentPrice ? "1px solid black" : "none", + }} + onClick={() => { + if (price !== "") { + onSelectedPriceUpdate(price); + } }} > - {sellPrice[index] !== "" && ( + {price !== "" && ( <> - {sellPrice[index].toLocaleString()} + {price.toLocaleString()} {sellQuantity[index].toLocaleString()} @@ -124,7 +135,7 @@ const PriceBook = () => {
- {Array.from({ length: 10 }).map((_, index) => ( + {buyPrice.map((price, index) => (
{ alignItems: "center", justifyContent: "space-between", padding: "0 1rem", - border: - buyPrice[index] === currentPrice ? "1px solid black" : "none", + border: price === currentPrice ? "1px solid black" : "none", + }} + onClick={() => { + if (price !== "") { + onSelectedPriceUpdate(price); + } }} > - {buyPrice[index] !== "" && ( + {price !== "" && ( <> - {buyPrice[index].toLocaleString()} + {price.toLocaleString()} {buyQuantity[index].toLocaleString()} diff --git a/src/routes/Feed/FeedPage.jsx b/src/routes/Feed/FeedPage.jsx index f2b34f7..ce82f68 100644 --- a/src/routes/Feed/FeedPage.jsx +++ b/src/routes/Feed/FeedPage.jsx @@ -37,6 +37,7 @@ const FeedPage = () => { const onErrorImg = (e) => { e.target.src = default_Img; }; + return ( {isWrite ? ( diff --git a/src/routes/Trading/TradingPage.jsx b/src/routes/Trading/TradingPage.jsx index c06f05a..a0ecc28 100644 --- a/src/routes/Trading/TradingPage.jsx +++ b/src/routes/Trading/TradingPage.jsx @@ -1,15 +1,138 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import styled from "styled-components"; import default_Img from "../../../public/icon/+.svg"; -import { Container } from "react-bootstrap"; -import PriceBook from "../../components/invest/right-bar/PriceBook"; -import OrderBook from "../../components/invest/right-bar/OrderBook"; +import PriceBook from "../../components/invest/right-bar/OrderManagement/PriceBook"; +import OrderBook from "../../components/invest/right-bar/OrderManagement/OrderBook"; +import OrderList from "../../components/invest/right-bar/OrderHistory/OrderHistoryList"; +import NewIcon from "../../components/invest/right-bar/OrderHistory/NewIcon"; export default function TradingPage() { + const pendingOrders = [ + { + code: "005930", + name: "삼성전자", + orderType: "매수", + price: 78400, + quantity: 5, + remaining: 3, + }, + { + code: "005930", + name: "삼성전자", + orderType: "매수", + price: 78400, + quantity: 5, + remaining: 5, + }, + { + code: "003720", + name: "삼영", + orderType: "매도", + price: 3915, + quantity: 20, + remaining: 13, + }, + { + code: "003720", + name: "삼영", + orderType: "매도", + price: 3915, + quantity: 20, + remaining: 13, + }, + { + code: "003720", + name: "삼영", + orderType: "매도", + price: 3915, + quantity: 20, + remaining: 13, + }, + ]; + + const filledOrders = [ + { + code: "005930", + name: "삼성전자", + orderType: "매수", + price: 78400, + quantity: 2, + createdAt: "09: 28", + }, + { + code: "005930", + name: "삼영", + orderType: "매도", + price: 3915, + quantity: 10, + createdAt: "09: 28", + }, + { + code: "003720", + name: "삼영", + orderType: "매도", + price: 3915, + quantity: 7, + createdAt: "09: 28", + }, + { + code: "003720", + name: "삼영", + orderType: "매도", + price: 3915, + quantity: 7, + createdAt: "09: 28", + }, + { + code: "003720", + name: "삼영", + orderType: "매도", + price: 3915, + quantity: 7, + createdAt: "09: 28", + }, + { + code: "003720", + name: "삼영", + orderType: "매도", + price: 3915, + quantity: 7, + createdAt: "09: 28", + }, + ]; + const [selectedTab, setSelectedTab] = useState("매수"); + const [currentPrice, setCurrentPrice] = useState(0); + const [priceGap, setPriceGap] = useState(0); + const [maxQuantity, setMaxQuantity] = useState(0); + const [balance, setBalace] = useState(2000000); + const [selectedPrice, setSelectedPrice] = useState(0); + + useEffect(() => { + setSelectedPrice(currentPrice); + }, [currentPrice]); + + const handleSelectPriceUpdate = (price) => { + setSelectedPrice(price); + }; + + const handlePriceUpdate = (newPrice) => { + setCurrentPrice(newPrice); + }; const handleTabClick = (tab) => { setSelectedTab(tab); + if (tab === "매수") { + setMaxQuantity(balance); + handleSelectPriceUpdate(currentPrice); + } else if (tab === "매도") { + setMaxQuantity(30); + handleSelectPriceUpdate(currentPrice); + } + }; + + const handlePriceGap = (newPriceGap) => { + setPriceGap(newPriceGap); }; const getLogoFileName = (name, code) => { @@ -136,6 +259,7 @@ export default function TradingPage() { onClick={() => handleTabClick("주문내역")} > 주문내역 +
{selectedTab === "매수" || selectedTab === "매도" ? ( @@ -144,12 +268,34 @@ export default function TradingPage() { display: "flex", flexDirection: "row", height: "100%", + width: "100%", overflow: "auto", }} > - + +
+ +
+
+ ) : ( +
+
- ) : null} + )} ); } diff --git a/src/store/reducers/Chart/clickCompany.jsx b/src/store/reducers/Chart/clickCompany.jsx index 895375a..b618ef3 100644 --- a/src/store/reducers/Chart/clickCompany.jsx +++ b/src/store/reducers/Chart/clickCompany.jsx @@ -8,7 +8,7 @@ const initialState = { name: "삼성전자", __v: 0, _id: "65f24176b5fd9b9fdc483b63", - } + }, }; const companySlice = createSlice({ @@ -17,7 +17,7 @@ const companySlice = createSlice({ reducers: { setClickCompany(state, action) { state.data = action.payload; - } + }, }, }); From 8edee8285b912deb6ff89d9744fb8994b7a4a7e9 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Thu, 21 Mar 2024 16:18:54 +0900 Subject: [PATCH 72/84] =?UTF-8?q?fix:=20=EC=83=88=EB=A1=9C=EC=9A=B4=20?= =?UTF-8?q?=EA=B8=B0=EC=97=85=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/invest/chart/MainChart.jsx | 30 ++--------------------- src/routes/MyPage/MyPage.jsx | 8 +++--- 2 files changed, 6 insertions(+), 32 deletions(-) diff --git a/src/components/invest/chart/MainChart.jsx b/src/components/invest/chart/MainChart.jsx index 482d01e..2f18e0c 100644 --- a/src/components/invest/chart/MainChart.jsx +++ b/src/components/invest/chart/MainChart.jsx @@ -90,38 +90,12 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { .then(() => setIsShow(prev => !prev)) } - function getNewData(format) { - const date = new Date(); - const formattedDate = date.toISOString().slice(0, 10).replace(/-/g, ""); - const data = { - "code" : company.code, - "start_date" : "19990101", - "end_date" : formattedDate, - "time_format" : format - } - - dispatch(getChartDatas(data)) - // 실시간 데이터 받아올 때 수정해야할 수도 있는 부분 - // 차트지표, 보조지표 초기화 - // 새로운 기업의 데이터를 불러올 때는 초기화를 시켜줘야함 - subIndi.map((item, idx) => - dispatch(setDisactiveSub(item)) - ) - - chartIndi.map((item, idx) => - dispatch(setDisactiveSub(item)) - ) - - dispatch(setSubIndi([])) - dispatch(setChartIndi([])) - } - useEffect(() => { - // getData('D') // 실시간 데이터 받아올 때 수정해야할 수도 있는 부분 // 새로운 기업을 클릭했을 때만 데이터 갱신 if (companyCode !== company.code) { - getNewData(company.code) + getData('D') + dispatch(setClickDate('D')) dispatch(setCompanyCode(company.code)) } diff --git a/src/routes/MyPage/MyPage.jsx b/src/routes/MyPage/MyPage.jsx index 2ac8a1a..9882081 100644 --- a/src/routes/MyPage/MyPage.jsx +++ b/src/routes/MyPage/MyPage.jsx @@ -2,8 +2,8 @@ import React, { useState } from "react"; import styled from "styled-components"; import * as S from "../../style/GlobalStyle"; -import Feed from "../../components/Feed/FeedShow/Feed"; -import Account from "../../components/Feed/Account"; +// import Feed from "../../components/Feed/FeedShow/Feed"; +// import Account from "../../components/Feed/Account"; export default function MyPage() { const [selectedTab, setSelectedTab] = useState("내 피드"); @@ -71,8 +71,8 @@ export default function MyPage() { - {selectedTab === "내 피드" ? : <>} - {selectedTab === "내 종목" ? : <>} + {/* {selectedTab === "내 피드" ? : <>} + {selectedTab === "내 종목" ? : <>} */} ); From db817bdb67e50a2816a0855f681ec3a63a70fd70 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Thu, 21 Mar 2024 16:50:50 +0900 Subject: [PATCH 73/84] =?UTF-8?q?feat:=20=EC=9D=B8=EA=B8=B0=EC=A3=BC?= =?UTF-8?q?=EC=8B=9D/=ED=95=AB=EC=9D=B4=EC=8A=88=20=EC=A2=85=EB=AA=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/HotStock/HotStockPage.jsx | 56 +++++++++++++++++++++++++++- src/routes/MyPage/MyPage.jsx | 8 ++-- 2 files changed, 58 insertions(+), 6 deletions(-) diff --git a/src/routes/HotStock/HotStockPage.jsx b/src/routes/HotStock/HotStockPage.jsx index 2fb8c12..429ee65 100644 --- a/src/routes/HotStock/HotStockPage.jsx +++ b/src/routes/HotStock/HotStockPage.jsx @@ -1,7 +1,59 @@ -import React from "react"; +import React, { useState } from "react"; import styled from "styled-components"; import * as S from "../../style/GlobalStyle"; export default function HotStockPage() { - return HotStockPage; + const [selectedTab, setSelectedTab] = useState("인기 주식"); + const handleTabClick = (tab) => { + setSelectedTab(tab); + }; + + return ( + +
+
handleTabClick("인기 주식")} + > + 인기 주식 +
+
handleTabClick("핫이슈 종목")} + > + 핫이슈 종목 +
+
+ + ); } diff --git a/src/routes/MyPage/MyPage.jsx b/src/routes/MyPage/MyPage.jsx index 2ac8a1a..9882081 100644 --- a/src/routes/MyPage/MyPage.jsx +++ b/src/routes/MyPage/MyPage.jsx @@ -2,8 +2,8 @@ import React, { useState } from "react"; import styled from "styled-components"; import * as S from "../../style/GlobalStyle"; -import Feed from "../../components/Feed/FeedShow/Feed"; -import Account from "../../components/Feed/Account"; +// import Feed from "../../components/Feed/FeedShow/Feed"; +// import Account from "../../components/Feed/Account"; export default function MyPage() { const [selectedTab, setSelectedTab] = useState("내 피드"); @@ -71,8 +71,8 @@ export default function MyPage() { - {selectedTab === "내 피드" ? : <>} - {selectedTab === "내 종목" ? : <>} + {/* {selectedTab === "내 피드" ? : <>} + {selectedTab === "내 종목" ? : <>} */} ); From 22441d9507ac627fc71e546bd3929bbf0a9877cd Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Fri, 22 Mar 2024 14:26:50 +0900 Subject: [PATCH 74/84] =?UTF-8?q?feat:=20Hot=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84=20=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/apis/api.jsx | 4 + src/lib/apis/hot.jsx | 9 ++ src/routes/HotStock/HotStockPage.jsx | 202 +++++++++++++++++++----- src/store/reducers/Hot/getStockInfo.jsx | 39 +++++ src/store/store.js | 2 + 5 files changed, 213 insertions(+), 43 deletions(-) create mode 100644 src/lib/apis/hot.jsx create mode 100644 src/store/reducers/Hot/getStockInfo.jsx diff --git a/src/lib/apis/api.jsx b/src/lib/apis/api.jsx index d53f757..2698f25 100644 --- a/src/lib/apis/api.jsx +++ b/src/lib/apis/api.jsx @@ -11,6 +11,10 @@ export const subChartInstance = axios.create({ baseURL: BASE_URL + "/subChart", }); +export const shinhanInstance = axios.create({ + baseURL: BASE_URL + "/shinhanInfo", +}); + export const baseInstance = axios.create({ baseURL: BASE_URL, }); diff --git a/src/lib/apis/hot.jsx b/src/lib/apis/hot.jsx new file mode 100644 index 0000000..0762028 --- /dev/null +++ b/src/lib/apis/hot.jsx @@ -0,0 +1,9 @@ +import { shinhanInstance } from './api'; + +export async function getPopularStock() { + return await shinhanInstance.get('/popularStock') +} + +export async function getHotStock(paramId) { + return await shinhanInstance.get(`/hotStock/${paramId}`) +} \ No newline at end of file diff --git a/src/routes/HotStock/HotStockPage.jsx b/src/routes/HotStock/HotStockPage.jsx index 429ee65..e4bf845 100644 --- a/src/routes/HotStock/HotStockPage.jsx +++ b/src/routes/HotStock/HotStockPage.jsx @@ -1,59 +1,175 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import styled from "styled-components"; import * as S from "../../style/GlobalStyle"; +import { useDispatch, useSelector } from "react-redux"; +import { getHotDatas, getPopularDatas } from "../../store/reducers/Hot/getStockInfo"; +import default_Img from "../../../public/icon/+.svg"; export default function HotStockPage() { + const dispatch = useDispatch(); const [selectedTab, setSelectedTab] = useState("인기 주식"); const handleTabClick = (tab) => { setSelectedTab(tab); }; + const popularData = useSelector((state) => state.hot.popularData); + const hotData = useSelector((state) => state.hot.hotData); + const [selectNum, setSelectNum] = useState(1); + + console.log('hotData', hotData) + + useEffect(() => { + dispatch(getPopularDatas()); + dispatch(getHotDatas(selectNum)); + }, [selectNum]) + + const getLogoFileName = (name, code) => { + if (name.includes("스팩")) { + return "SPAC_230706"; + } else if (name.includes("ETN")) { + return "ETN_230706"; + } else if ( + name.includes("KODEX") || + name.includes("KOSEF") || + name.includes("KoAct") || + name.includes("TIGER") || + name.includes("ACE") || + name.includes("ARIRANG") || + name.includes("합성 H") || + name.includes("HANARO") || + name.includes("SOL") + ) { + return "ETF_230706"; + } else { + return `kr/${code}`; + } + }; + + const onErrorImg = (e) => { + e.target.src = default_Img; + }; + return ( -
-
handleTabClick("인기 주식")} - > - 인기 주식 + + {/* 인기 주식 */} +
+ + + 인기 주식 + + + {popularData.map((item, idx) => + + {item.now_rank}. +
+ + {item.stbd_nm} +
+ + )}
-
handleTabClick("핫이슈 종목")} - > - 핫이슈 종목 + + {/* 핫이슈 종목 */} +
+ + + 핫이슈 종목 + + + + setSelectNum(1)}>거래량 + setSelectNum(2)}>주가상승률 + setSelectNum(3)}>외국인순매수 + setSelectNum(4)}>기관순매수 + + {hotData.map((item, idx) => + + {item.rank}. +
+ + {item.stbd_nm} +
+ + )}
-
+ ); } + +const Container = styled.div` + background-color: #FFF; + height: 100vh; +` + +const TitleDiv = styled.div` + display: flex; + align-items: center; + justify-content: center; + padding: 15px 0; + gap: 8px; +` + +const MainFont = styled.span` + font-size: 18px; + font-weight: 700; +` + +const IconImg = styled.img` + width: 45px; + height: 45px; +` + +const RankDiv = styled.div` + display: flex; + align-items: center; + justify-content: center; + padding: 15px 0; + gap: 10px; +` + +const RankFont = styled.span` + font-size: 16px; + font-weight: 700; +` + +const BtnDiv = styled.div` + display: flex; + justify-content: space-evenly; + padding: 0 0 20px 0; +` + +const SelectBtn = styled.div` + padding: 8px 15px; + border-radius: 999px; + background-color: #D9D9D9; + font-size: 13px; + font-weight: 600; + + &:hover{ + cursor: pointer; + } + + &:nth-child(${(props) => props.num}) { + background-color: #FFE3D7; + } +` +const CompanyLogo = styled.img` + width: 35px; + height: 35px; + border-radius: 999px; + margin-right: 10px; +`; \ No newline at end of file diff --git a/src/store/reducers/Hot/getStockInfo.jsx b/src/store/reducers/Hot/getStockInfo.jsx new file mode 100644 index 0000000..eb59a36 --- /dev/null +++ b/src/store/reducers/Hot/getStockInfo.jsx @@ -0,0 +1,39 @@ +import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; +import { getHotStock, getPopularStock } from "../../../lib/apis/hot"; + +const initialState = { + popularData: [], + hotData: [], +}; + +export const getPopularDatas = createAsyncThunk( + "chart/getPopularData", + async (data, tunkAPI) => { + const response = await getPopularStock(); + return response.data; + } +) + +export const getHotDatas = createAsyncThunk( + "chart/getHotData", + async (data, tunkAPI) => { + const response = await getHotStock(data); + return response.data; + } +) + +const hotStockSlice = createSlice({ + name: "hotStock", + initialState: initialState, + reducers: {}, + extraReducers: (builder) => { + builder.addCase(getPopularDatas.fulfilled, (state, action) => { + state.popularData = action.payload; + }), + builder.addCase(getHotDatas.fulfilled, (state, action) => { + state.hotData = action.payload; + }) + }, +}); + +export default hotStockSlice.reducer; diff --git a/src/store/store.js b/src/store/store.js index 880a844..b9bf931 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -23,6 +23,7 @@ import getSubIndicatorReducer from "./reducers/Chart/Indicators/sub.jsx"; import searchReducer from "./reducers/Trading/search"; import userReducer from "./reducers/User/user"; import feedReducer from "./reducers/Feed/feed"; +import hotStockReducer from './reducers/Hot/getStockInfo.jsx'; const rootPersistConfig = { key: "root", @@ -56,6 +57,7 @@ const rootReducer = persistReducer( search: searchReducer, user: userReducer, feed: feedReducer, + hot: hotStockReducer, }) ); const myMiddlewares = [logger]; From c06bc40611f499a3c7661bf726c16547645a658f Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Fri, 22 Mar 2024 16:51:23 +0900 Subject: [PATCH 75/84] =?UTF-8?q?feat:=20=EC=9D=B8=EA=B8=B0=EC=A3=BC?= =?UTF-8?q?=EC=8B=9D/=ED=95=AB=EC=9D=B4=EC=8A=88=20=EC=A2=85=EB=AA=A9=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/HotStock/HotStockPage.jsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/routes/HotStock/HotStockPage.jsx b/src/routes/HotStock/HotStockPage.jsx index e4bf845..d75a76b 100644 --- a/src/routes/HotStock/HotStockPage.jsx +++ b/src/routes/HotStock/HotStockPage.jsx @@ -53,7 +53,7 @@ export default function HotStockPage() { {/* 인기 주식 */} -
+
인기 주식 @@ -77,7 +77,7 @@ export default function HotStockPage() {
{/* 핫이슈 종목 */} -
+
핫이슈 종목 @@ -118,8 +118,8 @@ const Container = styled.div` const TitleDiv = styled.div` display: flex; align-items: center; - justify-content: center; - padding: 15px 0; + // justify-content: center; + padding: 15px 0 15px 20px; gap: 8px; ` @@ -136,8 +136,8 @@ const IconImg = styled.img` const RankDiv = styled.div` display: flex; align-items: center; - justify-content: center; - padding: 15px 0; + // justify-content: center; + padding: 15px 0 15px 20px; gap: 10px; ` @@ -172,4 +172,4 @@ const CompanyLogo = styled.img` height: 35px; border-radius: 999px; margin-right: 10px; -`; \ No newline at end of file +`; From 3dbfca41fa493de1d656729225cdfd304481779a Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Mon, 25 Mar 2024 09:03:38 +0900 Subject: [PATCH 76/84] =?UTF-8?q?feat:=20hotStock=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/HotStock/HotStockPage.jsx | 64 +++++++++++++++---------- src/store/reducers/Hot/getStockInfo.jsx | 3 ++ 2 files changed, 43 insertions(+), 24 deletions(-) diff --git a/src/routes/HotStock/HotStockPage.jsx b/src/routes/HotStock/HotStockPage.jsx index d75a76b..d4c1182 100644 --- a/src/routes/HotStock/HotStockPage.jsx +++ b/src/routes/HotStock/HotStockPage.jsx @@ -53,14 +53,14 @@ export default function HotStockPage() { {/* 인기 주식 */} -
+
인기 주식 {popularData.map((item, idx) => - + {item.now_rank}.
{/* 핫이슈 종목 */} -
+
핫이슈 종목 @@ -89,20 +89,26 @@ export default function HotStockPage() { setSelectNum(3)}>외국인순매수 setSelectNum(4)}>기관순매수 - {hotData.map((item, idx) => - - {item.rank}. -
- - {item.stbd_nm} -
- + {hotData.length > 0 ? ( + hotData.map((item, idx) => + + {item.rank}. +
+ + {item.stbd_nm} +
+ + ) + ) : ( + + 조건에 맞는 데이터가 없습니다. + )}
@@ -118,8 +124,7 @@ const Container = styled.div` const TitleDiv = styled.div` display: flex; align-items: center; - // justify-content: center; - padding: 15px 0 15px 20px; + padding: 20px 5px; gap: 8px; ` @@ -129,16 +134,19 @@ const MainFont = styled.span` ` const IconImg = styled.img` - width: 45px; - height: 45px; + width: 35px; + height: 35px; ` const RankDiv = styled.div` + // background-color: ${(props) => props.num % 2 ? "rgba(255, 227, 215, 0.4)" : "rgba(0, 0, 0, 0.03)"}; display: flex; align-items: center; - // justify-content: center; - padding: 15px 0 15px 20px; + padding: 13px 0 13px 20px; gap: 10px; + box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.05); + border-radius: 10px; + margin-bottom: 8px; ` const RankFont = styled.span` @@ -164,12 +172,20 @@ const SelectBtn = styled.div` } &:nth-child(${(props) => props.num}) { - background-color: #FFE3D7; + background-color: #ffd4c2; } ` + const CompanyLogo = styled.img` width: 35px; height: 35px; border-radius: 999px; margin-right: 10px; `; + +const ErrorDiv = styled.div` + display: flex; + padding: 150px 0; + justify-content: center; + align-items: center; +` \ No newline at end of file diff --git a/src/store/reducers/Hot/getStockInfo.jsx b/src/store/reducers/Hot/getStockInfo.jsx index eb59a36..fb88cb5 100644 --- a/src/store/reducers/Hot/getStockInfo.jsx +++ b/src/store/reducers/Hot/getStockInfo.jsx @@ -32,6 +32,9 @@ const hotStockSlice = createSlice({ }), builder.addCase(getHotDatas.fulfilled, (state, action) => { state.hotData = action.payload; + }), + builder.addCase(getHotDatas.rejected, (state, action) => { + state.hotData = []; }) }, }); From 6089c17052de82df3e24c5c0a61e9fa4d85f879e Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Mon, 25 Mar 2024 11:16:23 +0900 Subject: [PATCH 77/84] =?UTF-8?q?feat:=20=ED=88=AC=EC=9E=90=EC=A0=84?= =?UTF-8?q?=EB=9E=B5=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icon/restart.svg | 11 ++ src/lib/apis/strategy.jsx | 5 + src/routes/HotStock/HotStockPage.jsx | 58 +++++--- .../InvestStrategy/InvestStrategyPage.jsx | 136 +++++++++++++++++- src/store/reducers/Strategy/getStrategy.jsx | 27 ++++ src/store/store.js | 2 + 6 files changed, 214 insertions(+), 25 deletions(-) create mode 100644 public/icon/restart.svg create mode 100644 src/lib/apis/strategy.jsx create mode 100644 src/store/reducers/Strategy/getStrategy.jsx diff --git a/public/icon/restart.svg b/public/icon/restart.svg new file mode 100644 index 0000000..b0e53a3 --- /dev/null +++ b/public/icon/restart.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/lib/apis/strategy.jsx b/src/lib/apis/strategy.jsx new file mode 100644 index 0000000..b5d907a --- /dev/null +++ b/src/lib/apis/strategy.jsx @@ -0,0 +1,5 @@ +import { shinhanInstance } from './api'; + +export async function getStrategy() { + return await shinhanInstance.get('/strategy') +} diff --git a/src/routes/HotStock/HotStockPage.jsx b/src/routes/HotStock/HotStockPage.jsx index d4c1182..dd516d3 100644 --- a/src/routes/HotStock/HotStockPage.jsx +++ b/src/routes/HotStock/HotStockPage.jsx @@ -4,20 +4,15 @@ import * as S from "../../style/GlobalStyle"; import { useDispatch, useSelector } from "react-redux"; import { getHotDatas, getPopularDatas } from "../../store/reducers/Hot/getStockInfo"; import default_Img from "../../../public/icon/+.svg"; +import restart_Img from '../../../public/icon/restart.svg'; export default function HotStockPage() { const dispatch = useDispatch(); - const [selectedTab, setSelectedTab] = useState("인기 주식"); - const handleTabClick = (tab) => { - setSelectedTab(tab); - }; const popularData = useSelector((state) => state.hot.popularData); const hotData = useSelector((state) => state.hot.hotData); const [selectNum, setSelectNum] = useState(1); - console.log('hotData', hotData) - useEffect(() => { dispatch(getPopularDatas()); dispatch(getHotDatas(selectNum)); @@ -59,20 +54,26 @@ export default function HotStockPage() { 인기 주식 - {popularData.map((item, idx) => - - {item.now_rank}. -
- - {item.stbd_nm} -
- + {popularData.length > 0 ? ( + popularData.map((item, idx) => + + {item.now_rank}. +
+ + {item.stbd_nm} +
+ + ) + ) : ( + + dispatch(getPopularDatas())} /> + )}
@@ -106,9 +107,9 @@ export default function HotStockPage() { ) ) : ( - + 조건에 맞는 데이터가 없습니다. - + )}
@@ -183,9 +184,20 @@ const CompanyLogo = styled.img` margin-right: 10px; `; -const ErrorDiv = styled.div` +const ErrorDiv1 = styled.div` + display: flex; + padding: 90px 0; + justify-content: center; + align-items: center; +` + +const ErrorDiv2 = styled.div` display: flex; padding: 150px 0; justify-content: center; align-items: center; +` + +const ReIcon = styled.img` + width: 20px; ` \ No newline at end of file diff --git a/src/routes/InvestStrategy/InvestStrategyPage.jsx b/src/routes/InvestStrategy/InvestStrategyPage.jsx index 6230025..d83e42a 100644 --- a/src/routes/InvestStrategy/InvestStrategyPage.jsx +++ b/src/routes/InvestStrategy/InvestStrategyPage.jsx @@ -1,7 +1,139 @@ -import React from "react"; +import React, { useEffect } from "react"; import styled from "styled-components"; import * as S from "../../style/GlobalStyle"; +import { useDispatch, useSelector } from "react-redux"; +import { getStrategyDatas } from "../../store/reducers/Strategy/getStrategy"; export default function InvestStrategyPage() { - return InvestStrategyPage; + const dispatch = useDispatch(); + const strategy = useSelector((state) => state.strategy.strategy); + + const marketIssue = strategy.marketIssue.content.split('\n\n')[0]; + const corporateAnalysis = strategy.corporateAnalysis.content.split('\n\n\n')[0]; + + useEffect(() => { + dispatch(getStrategyDatas()) + }, []) + + return ( + + + <> + + + {strategy.shinhanDaily.bbs_name} + + + {strategy.shinhanDaily.title}.pdf + + + <> + + + {strategy.marketIssue.bbs_name} + + + {strategy.marketIssue.title}.pdf + + {marketIssue.split('\n').map((item, idx) => + + • + {item.replace(/·/g, "·").replace(/ /g, "")} + + )} + + <> + + + {strategy.economicAnalysis.bbs_name} + + + {strategy.economicAnalysis.title}.pdf + + {strategy.economicAnalysis.content.replace(/ /g, "")} + + <> + + + {strategy.corporateAnalysis.bbs_name} + + + {strategy.corporateAnalysis.title}.pdf + + {corporateAnalysis.split('\n').map((item, idx) => + + • + {item.replace(/·/g, "·").replace(/ /g, "")} + + )} + + + + ) } + +const Container = styled.div` + background-color: #FFF; + overflow-y: scroll; + + &::-webkit-scrollbar { + width: 10px; + } + + &::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.2); + border-radius: 20px; + } + + &::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.05); + border-radius: 20px; + } +` + +const MainDiv = styled.div` + display: flex; + align-items: center; + gap: 6px; + padding: 20px 15px; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); +` + +const IconImg = styled.img` + width: 30px; + height: 30px; +` + +const MainFont = styled.div` + font-weight: 600; + font-size: 18px; +` + +const FileDiv = styled.a` + text-decoration: none; +` + +const FileFont = styled.div` + color: #FF7D75; + font-weight: 600; + padding: 20px; +` + +const SubDiv = styled.div` + display: flex; + align-items: center; + padding: 8px 20px; + gap: 10px; +` + +const SubFont = styled.div` + word-break: keep-all; + font-weight: 600; +` + +const ContentFont = styled.div` + white-space: pre-line; + padding: 10px 20px; + font-size: 15px; + font-weight: 600; +` \ No newline at end of file diff --git a/src/store/reducers/Strategy/getStrategy.jsx b/src/store/reducers/Strategy/getStrategy.jsx new file mode 100644 index 0000000..42facfc --- /dev/null +++ b/src/store/reducers/Strategy/getStrategy.jsx @@ -0,0 +1,27 @@ +import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; +import { getStrategy } from "../../../lib/apis/strategy"; + +const initialState = { + strategy: {}, +}; + +export const getStrategyDatas = createAsyncThunk( + "chart/getStrategyDatas", + async (data, tunkAPI) => { + const response = await getStrategy(); + return response.data; + } +) + +const strategySlice = createSlice({ + name: "strategy", + initialState: initialState, + reducers: {}, + extraReducers: (builder) => { + builder.addCase(getStrategyDatas.fulfilled, (state, action) => { + state.strategy = action.payload; + }) + }, +}); + +export default strategySlice.reducer; diff --git a/src/store/store.js b/src/store/store.js index b9bf931..2869f31 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -24,6 +24,7 @@ import searchReducer from "./reducers/Trading/search"; import userReducer from "./reducers/User/user"; import feedReducer from "./reducers/Feed/feed"; import hotStockReducer from './reducers/Hot/getStockInfo.jsx'; +import strategyReducer from './reducers/Strategy/getStrategy.jsx'; const rootPersistConfig = { key: "root", @@ -58,6 +59,7 @@ const rootReducer = persistReducer( user: userReducer, feed: feedReducer, hot: hotStockReducer, + strategy: strategyReducer, }) ); const myMiddlewares = [logger]; From 524914e019e512de96f9ecf245b449609ef81e34 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Mon, 25 Mar 2024 12:57:29 +0900 Subject: [PATCH 78/84] =?UTF-8?q?fix:=20=ED=88=AC=EC=9E=90=EC=A0=84?= =?UTF-8?q?=EB=9E=B5=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 16 +++ package.json | 1 + .../InvestStrategy/InvestStrategyPage.jsx | 108 +++++++++--------- 3 files changed, 70 insertions(+), 55 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8547ee2..c54bdd7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "bootstrap": "^5.3.3", "d3-format": "^3.1.0", "d3-time-format": "^4.1.0", + "html-entities": "^2.5.2", "react": "^18.2.0", "react-bootstrap": "^2.10.1", "react-cookie": "^7.1.0", @@ -3295,6 +3296,21 @@ "react-is": "^16.7.0" } }, + "node_modules/html-entities": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.5.2.tgz", + "integrity": "sha512-K//PSRMQk4FZ78Kyau+mZurHn3FH0Vwr+H36eE0rPbeYkRRi9YxceYPhuN60UwWorxyKHhqoAJl2OFKa4BVtaA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/mdevils" + }, + { + "type": "patreon", + "url": "https://patreon.com/mdevils" + } + ] + }, "node_modules/ignore": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz", diff --git a/package.json b/package.json index 9beb1d3..7af1d42 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "bootstrap": "^5.3.3", "d3-format": "^3.1.0", "d3-time-format": "^4.1.0", + "html-entities": "^2.5.2", "react": "^18.2.0", "react-bootstrap": "^2.10.1", "react-cookie": "^7.1.0", diff --git a/src/routes/InvestStrategy/InvestStrategyPage.jsx b/src/routes/InvestStrategy/InvestStrategyPage.jsx index d83e42a..795bec2 100644 --- a/src/routes/InvestStrategy/InvestStrategyPage.jsx +++ b/src/routes/InvestStrategy/InvestStrategyPage.jsx @@ -3,71 +3,67 @@ import styled from "styled-components"; import * as S from "../../style/GlobalStyle"; import { useDispatch, useSelector } from "react-redux"; import { getStrategyDatas } from "../../store/reducers/Strategy/getStrategy"; +import { decode } from "html-entities"; export default function InvestStrategyPage() { const dispatch = useDispatch(); const strategy = useSelector((state) => state.strategy.strategy); - const marketIssue = strategy.marketIssue.content.split('\n\n')[0]; - const corporateAnalysis = strategy.corporateAnalysis.content.split('\n\n\n')[0]; - useEffect(() => { dispatch(getStrategyDatas()) }, []) return ( - - <> - - - {strategy.shinhanDaily.bbs_name} - - - {strategy.shinhanDaily.title}.pdf - - - <> - - - {strategy.marketIssue.bbs_name} - - - {strategy.marketIssue.title}.pdf - - {marketIssue.split('\n').map((item, idx) => - - • - {item.replace(/·/g, "·").replace(/ /g, "")} - - )} - - <> - - - {strategy.economicAnalysis.bbs_name} - - - {strategy.economicAnalysis.title}.pdf - - {strategy.economicAnalysis.content.replace(/ /g, "")} - - <> - - - {strategy.corporateAnalysis.bbs_name} - - - {strategy.corporateAnalysis.title}.pdf - - {corporateAnalysis.split('\n').map((item, idx) => - - • - {item.replace(/·/g, "·").replace(/ /g, "")} - - )} - - + {strategy && ( + + <> + + + {strategy.shinhanDaily?.bbs_name} + + + {strategy.shinhanDaily?.title}.pdf + + + <> + + + {strategy.marketIssue?.bbs_name} + + + {strategy.marketIssue?.title}.pdf + + {/* {decode(strategy.marketIssue?.content)} */} + {strategy.marketIssue?.content.split('\n\n')[0].split('\n').map((item, idx) => + + • + {decode(item)} + + )} + + <> + + + {strategy.economicAnalysis?.bbs_name} + + + {strategy.economicAnalysis?.title}.pdf + + {decode(strategy.economicAnalysis?.content)} + + <> + + + {strategy.corporateAnalysis?.bbs_name} + + + {strategy.corporateAnalysis?.title}.pdf + + {decode(strategy.corporateAnalysis?.content)} + + + )} ) } @@ -110,7 +106,7 @@ const MainFont = styled.div` ` const FileDiv = styled.a` - text-decoration: none; + color: #FF7D75; ` const FileFont = styled.div` @@ -129,9 +125,11 @@ const SubDiv = styled.div` const SubFont = styled.div` word-break: keep-all; font-weight: 600; + font-size: 15px; ` const ContentFont = styled.div` + // box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3); white-space: pre-line; padding: 10px 20px; font-size: 15px; From 518766a3297757fde96c7e4b944cfabd4c323253 Mon Sep 17 00:00:00 2001 From: chaeheonjeong Date: Mon, 25 Mar 2024 13:07:39 +0900 Subject: [PATCH 79/84] feat/trading --- src/App.jsx | 5 +- src/components/Feed/FeedShow/Feed.jsx | 2 +- .../right-bar/OrderManagement/OrderBook.jsx | 43 ++--- .../right-bar/OrderManagement/PriceBook.jsx | 172 ++++-------------- .../right-bar/OrderManagement/PriceItem.jsx | 31 ++++ src/components/side-bar/webSocketTest.jsx | 59 +++--- src/lib/hooks/useWebSocket.jsx | 53 ++++++ src/routes/MyPage/MyPage.jsx | 3 +- src/routes/Trading/TradingPage.jsx | 163 ++--------------- src/store/reducers/Trading/trading.jsx | 28 ++- src/store/store.js | 1 - src/store/webSocket/nowPrice.js | 24 +-- 12 files changed, 234 insertions(+), 350 deletions(-) create mode 100644 src/components/invest/right-bar/OrderManagement/PriceItem.jsx create mode 100644 src/lib/hooks/useWebSocket.jsx diff --git a/src/App.jsx b/src/App.jsx index a59580c..9740a1d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -3,12 +3,15 @@ import mainRouter from "./router/main-router"; import { Provider } from "react-redux"; import { PersistGate } from "redux-persist/integration/react"; import { store, persistor } from "./store/store"; +import { WebSocketProvider } from "./lib/hooks/useWebSocket"; function App() { return ( - + + + ); diff --git a/src/components/Feed/FeedShow/Feed.jsx b/src/components/Feed/FeedShow/Feed.jsx index 38eee56..e0a109a 100644 --- a/src/components/Feed/FeedShow/Feed.jsx +++ b/src/components/Feed/FeedShow/Feed.jsx @@ -26,7 +26,7 @@ const Feed = () => { console.log("allFeedData", allFeedData); return ( <> - {allFeedData.map((item, idx) => { + {allFeedData?.map((item, idx) => { console.log("item", item); return (
diff --git a/src/components/invest/right-bar/OrderManagement/OrderBook.jsx b/src/components/invest/right-bar/OrderManagement/OrderBook.jsx index 40f82e1..9077bb5 100644 --- a/src/components/invest/right-bar/OrderManagement/OrderBook.jsx +++ b/src/components/invest/right-bar/OrderManagement/OrderBook.jsx @@ -2,25 +2,23 @@ import React, { useState, useEffect } from "react"; import TradingInputButton from "./Button/TradingInputButton"; import OrderModal from "./Modal/OrderModal"; import ErrorOrderModal from "./Modal/ErrorOrderModal"; +import { useDispatch, useSelector } from "react-redux"; -const OrderBook = ({ - currentPrice, - newPriceGap, - maxQuatity, - balance, - orderType, - selectedPrice, -}) => { - const [selectedType, setSelectedType] = useState("지정가"); - const [price, setPrice] = useState(selectedPrice); - const [quantity, setQuantity] = useState(0); - const [priceGap, setPriceGap] = useState(newPriceGap); - const [disablePriceInput, setDisablePriceInput] = useState(false); - const [userMaxQuantity, setUserQuantity] = useState(maxQuatity); - const [userBalance, setUserBalance] = useState(balance); - const [userOrderType, setUserOrderType] = useState(orderType); +const OrderBook = () => { + // const [priceGap, setPriceGap] = useState(newPriceGap); + // const [userMaxQuantity, setUserQuantity] = useState(maxQuatity); + // const [userBalance, setUserBalance] = useState(balance); + // const [userOrderType, setUserOrderType] = useState(orderType); const [isModalOpen, setIsModalOpen] = useState(false); const [isErrorModalOpen, setIsErrorModalOpen] = useState(false); + const [balance, setBalance] = useState(2000000); + const [selectedType, setSelectedType] = useState("지정가"); // 지정가, 시장가 + const [disablePriceInput, setDisablePriceInput] = useState(false); + // const [price, setPrice] = useState(selectedPrice); + const [quantity, setQuantity] = useState(0); + + const dispatch = useDispatch(); + const { selectedPrice } = useSelector((state) => state.trading); const openModal = () => { setIsModalOpen(true); @@ -43,21 +41,20 @@ const OrderBook = ({ if (type === "시장가") { setDisablePriceInput(true); setQuantity(0); - setPrice(0); + // setPrice(0); } else { setDisablePriceInput(false); - setPrice(currentPrice); setQuantity(0); } }; const increasePrice = () => { - setPrice(price + priceGap); + // setPrice(price + priceGap); }; const decreasePrice = () => { - const newPrice = price - priceGap; - setPrice(newPrice < 0 ? 0 : newPrice); + // const newPrice = price - priceGap; + // setPrice(newPrice < 0 ? 0 : newPrice); }; const increaseQuantity = () => { @@ -72,7 +69,7 @@ const OrderBook = ({ return ( <> -
-
+
*/} ); }; diff --git a/src/components/invest/right-bar/OrderManagement/PriceBook.jsx b/src/components/invest/right-bar/OrderManagement/PriceBook.jsx index ca20560..ad18ff6 100644 --- a/src/components/invest/right-bar/OrderManagement/PriceBook.jsx +++ b/src/components/invest/right-bar/OrderManagement/PriceBook.jsx @@ -1,94 +1,30 @@ -import React, { useState, useEffect, useRef } from "react"; +import React, { useEffect, useRef } from "react"; import { v4 as uuidv4 } from "uuid"; +import { useWebSocket } from "../../../../lib/hooks/useWebSocket"; +import PriceItem from "./PriceItem"; +import { setScrollPosition } from "../../../../store/reducers/Trading/trading"; +import { useDispatch, useSelector } from "react-redux"; -const PriceBook = ({ - onPriceUpdate, - onPriceGapUpdate, - onSelectedPriceUpdate, -}) => { - // 매도 - const sellPriceData = [ - 72200, - 72300, - 72300, - 72300, - 72300, - 72300, - 72300, - 72300, - 72300, - "", - ]; - - // 매수 - const buyPriceData = [ - 72100, - 71000, - 71000, - 71000, - 71000, - 71000, - 71000, - 71000, - 71000, - "", - ]; - - // 매도 잔량 - const sellQuantityData = [ - 260000, - 260000, - 260000, - 260000, - 260000, - 260000, - 260000, - 260000, - 260000, - "", - ]; - - // 매수 잔량 - const buyQuantityData = [ - 260000, - 260000, - 260000, - 260000, - 260000, - 260000, - 260000, - 260000, - 260000, - "", - ]; - - const [sellPrice, setSellPrice] = useState(sellPriceData); - const [buyPrice, setBuyPrice] = useState(buyPriceData); - const [sellQuantity, setSellQuantity] = useState(sellQuantityData); - const [buyQuantity, setBuyQuantity] = useState(buyQuantityData); - const [currentPrice, setCurrentPrice] = useState(72200); +const PriceBook = () => { const containerRef = useRef(null); + const dispatch = useDispatch(); + const { askPrice, nowPrice } = useWebSocket(); + const { scrollPosition } = useSelector((state) => state.trading); useEffect(() => { - onPriceUpdate(currentPrice); - onPriceGapUpdate(sellPrice[1] - sellPrice[0]); - }, []); - - const adjustScroll = () => { - const container = containerRef.current; - if (container) { - const scrollTop = (container.scrollHeight - container.clientHeight) / 2; - container.scrollTop = scrollTop; + if (containerRef.current) { + containerRef.current.scrollTop = scrollPosition; } - }; + }, [scrollPosition, askPrice]); - useEffect(() => { - adjustScroll(); //스크롤 조정 - }, []); + const handleScroll = (e) => { + dispatch(setScrollPosition(e.target.scrollTop)); + }; return (
- {sellPrice + {askPrice?.message?.sellPrice .map((price, index) => ( -
{ - if (price !== "") { - onSelectedPriceUpdate(price); - } - }} - > - {price !== "" && ( - <> - - {price.toLocaleString()} - - - {sellQuantity[index].toLocaleString()} - - - )} -
+ price={price} + amount={askPrice?.message?.sellAmount[index]} + backgroundColor="#E7F0FD" + textColor="#015FFF" + nowPrice={nowPrice} + /> )) .reverse()}
- {buyPrice.map((price, index) => ( -
( + { - if (price !== "") { - onSelectedPriceUpdate(price); - } - }} - > - {price !== "" && ( - <> - - {price.toLocaleString()} - - - {buyQuantity[index].toLocaleString()} - - - )} -
+ price={price} + amount={askPrice?.message?.buyAmount[index]} + backgroundColor="#FDE8E7" + textColor="red" + nowPrice={nowPrice} + /> ))}
diff --git a/src/components/invest/right-bar/OrderManagement/PriceItem.jsx b/src/components/invest/right-bar/OrderManagement/PriceItem.jsx new file mode 100644 index 0000000..28ee9e7 --- /dev/null +++ b/src/components/invest/right-bar/OrderManagement/PriceItem.jsx @@ -0,0 +1,31 @@ +import React from "react"; + +const PriceItem = ({ price, amount, backgroundColor, textColor, nowPrice }) => { + return ( +
+ {price !== "" && ( + <> + {price.toLocaleString()} + + {amount.toLocaleString()} + + + )} +
+ ); +}; + +export default PriceItem; diff --git a/src/components/side-bar/webSocketTest.jsx b/src/components/side-bar/webSocketTest.jsx index 76de011..9e48920 100644 --- a/src/components/side-bar/webSocketTest.jsx +++ b/src/components/side-bar/webSocketTest.jsx @@ -1,11 +1,16 @@ import React, { useState, useEffect, useRef } from "react"; -import { joinRoom, leaveRoom, subscribeAskPrice, subscribeNowPrice } from '../../../store/webSocket/nowPrice.js'; // 경로는 실제 프로젝트 구조에 따라 조정해주세요. +import { + joinRoom, + leaveRoom, + subscribeAskPrice, + subscribeNowPrice, +} from "../../store/webSocket/nowPrice"; // 경로는 실제 프로젝트 구조에 따라 조정해주세요. -const PriceBook = () => { +const WebSocketTest = () => { const containerRef = useRef(null); const [nowPrice, setNowPrice] = useState(null); const [askPrice, setAskPrice] = useState(null); - const [stockCode, setStockCode] = useState(''); + const [stockCode, setStockCode] = useState(""); useEffect(() => { const settingNowPrice = subscribeNowPrice((nowPriceMessage) => { @@ -38,26 +43,38 @@ const PriceBook = () => { return (
- setStockCode(e.target.value)} - placeholder="Enter stock code" - /> - - -
-

Real-time Data:

- {nowPrice ? 
{JSON.stringify(nowPrice, null, 2)}
:

데이터 없음

} -
-
-

Real-time Data2:

- {askPrice ? 
{JSON.stringify(askPrice, null, 2)}
:

데이터 없음

} -
+ }} + > + Join Room + + +
+

Real-time Data:

+ {nowPrice ? ( + 
{JSON.stringify(nowPrice, null, 2)}
+ ) : ( +

데이터 없음

+ )} +
+
+

Real-time Data2:

+ {askPrice ? ( + 
{JSON.stringify(askPrice, null, 2)}
+ ) : ( +

데이터 없음

+ )} +
); }; -export default PriceBook; \ No newline at end of file +export default WebSocketTest; diff --git a/src/lib/hooks/useWebSocket.jsx b/src/lib/hooks/useWebSocket.jsx new file mode 100644 index 0000000..521338a --- /dev/null +++ b/src/lib/hooks/useWebSocket.jsx @@ -0,0 +1,53 @@ +import React, { createContext, useContext, useEffect, useState } from "react"; +import { + joinRoom, + leaveRoom, + subscribeNowPrice, + subscribeAskPrice, +} from "../../store/webSocket/nowPrice"; + +const useWebSocketConnection = () => { + const [askPrice, setAskPrice] = useState(null); + const [nowPrice, setNowPrice] = useState(null); + const [stockCode, setStockCode] = useState("005930"); + + useEffect(() => { + joinRoom(stockCode); + + return () => { + leaveRoom(stockCode); + }; + }, [stockCode]); + + useEffect(() => { + const settingAskPrice = subscribeAskPrice((askPriceMessage) => { + setAskPrice(askPriceMessage); + }); + + const settingNowPrice = subscribeNowPrice((nowPriceMessage) => { + setNowPrice(nowPriceMessage); + }); + + return () => { + settingAskPrice(); + settingNowPrice(); + }; + }, []); + + return { askPrice, nowPrice, setStockCode }; +}; + +const WebSocketContext = createContext(); + +export const WebSocketProvider = ({ children }) => { + const webSocketData = useWebSocketConnection(); + + return ( + + {children} + + ); +}; + +// 커스텀 훅 +export const useWebSocket = () => useContext(WebSocketContext); diff --git a/src/routes/MyPage/MyPage.jsx b/src/routes/MyPage/MyPage.jsx index 2ac8a1a..8aceaa6 100644 --- a/src/routes/MyPage/MyPage.jsx +++ b/src/routes/MyPage/MyPage.jsx @@ -3,7 +3,6 @@ import styled from "styled-components"; import * as S from "../../style/GlobalStyle"; import Feed from "../../components/Feed/FeedShow/Feed"; -import Account from "../../components/Feed/Account"; export default function MyPage() { const [selectedTab, setSelectedTab] = useState("내 피드"); @@ -72,7 +71,7 @@ export default function MyPage() { {selectedTab === "내 피드" ? : <>} - {selectedTab === "내 종목" ? : <>} + {/* {selectedTab === "내 종목" ? : <>} */} ); diff --git a/src/routes/Trading/TradingPage.jsx b/src/routes/Trading/TradingPage.jsx index a0ecc28..0815320 100644 --- a/src/routes/Trading/TradingPage.jsx +++ b/src/routes/Trading/TradingPage.jsx @@ -5,134 +5,15 @@ import PriceBook from "../../components/invest/right-bar/OrderManagement/PriceBo import OrderBook from "../../components/invest/right-bar/OrderManagement/OrderBook"; import OrderList from "../../components/invest/right-bar/OrderHistory/OrderHistoryList"; import NewIcon from "../../components/invest/right-bar/OrderHistory/NewIcon"; +import { useDispatch, useSelector } from "react-redux"; +import { setSelectedTab } from "../../store/reducers/Trading/trading"; export default function TradingPage() { - const pendingOrders = [ - { - code: "005930", - name: "삼성전자", - orderType: "매수", - price: 78400, - quantity: 5, - remaining: 3, - }, - { - code: "005930", - name: "삼성전자", - orderType: "매수", - price: 78400, - quantity: 5, - remaining: 5, - }, - { - code: "003720", - name: "삼영", - orderType: "매도", - price: 3915, - quantity: 20, - remaining: 13, - }, - { - code: "003720", - name: "삼영", - orderType: "매도", - price: 3915, - quantity: 20, - remaining: 13, - }, - { - code: "003720", - name: "삼영", - orderType: "매도", - price: 3915, - quantity: 20, - remaining: 13, - }, - ]; - - const filledOrders = [ - { - code: "005930", - name: "삼성전자", - orderType: "매수", - price: 78400, - quantity: 2, - createdAt: "09: 28", - }, - { - code: "005930", - name: "삼영", - orderType: "매도", - price: 3915, - quantity: 10, - createdAt: "09: 28", - }, - { - code: "003720", - name: "삼영", - orderType: "매도", - price: 3915, - quantity: 7, - createdAt: "09: 28", - }, - { - code: "003720", - name: "삼영", - orderType: "매도", - price: 3915, - quantity: 7, - createdAt: "09: 28", - }, - { - code: "003720", - name: "삼영", - orderType: "매도", - price: 3915, - quantity: 7, - createdAt: "09: 28", - }, - { - code: "003720", - name: "삼영", - orderType: "매도", - price: 3915, - quantity: 7, - createdAt: "09: 28", - }, - ]; - - const [selectedTab, setSelectedTab] = useState("매수"); - const [currentPrice, setCurrentPrice] = useState(0); - const [priceGap, setPriceGap] = useState(0); - const [maxQuantity, setMaxQuantity] = useState(0); - const [balance, setBalace] = useState(2000000); - const [selectedPrice, setSelectedPrice] = useState(0); - - useEffect(() => { - setSelectedPrice(currentPrice); - }, [currentPrice]); - - const handleSelectPriceUpdate = (price) => { - setSelectedPrice(price); - }; - - const handlePriceUpdate = (newPrice) => { - setCurrentPrice(newPrice); - }; + const dispatch = useDispatch(); + const { selectedTab } = useSelector((state) => state.trading); const handleTabClick = (tab) => { - setSelectedTab(tab); - if (tab === "매수") { - setMaxQuantity(balance); - handleSelectPriceUpdate(currentPrice); - } else if (tab === "매도") { - setMaxQuantity(30); - handleSelectPriceUpdate(currentPrice); - } - }; - - const handlePriceGap = (newPriceGap) => { - setPriceGap(newPriceGap); + dispatch(setSelectedTab(tab)); }; const getLogoFileName = (name, code) => { @@ -221,6 +102,7 @@ export default function TradingPage() { ? "1.5px solid red" : "1.5px solid #D9D9D9", fontSize: "0.85rem", + cursor: "pointer", }} onClick={() => handleTabClick("매수")} > @@ -238,6 +120,7 @@ export default function TradingPage() { ? "1.5px solid red" : "1.5px solid #D9D9D9", fontSize: "0.85rem", + cursor: "pointer", }} onClick={() => handleTabClick("매도")} > @@ -255,6 +138,7 @@ export default function TradingPage() { ? "1.5px solid red" : "1.5px solid #D9D9D9", fontSize: "0.85rem", + cursor: "pointer", }} onClick={() => handleTabClick("주문내역")} > @@ -269,32 +153,19 @@ export default function TradingPage() { flexDirection: "row", height: "100%", width: "100%", - overflow: "auto", }} > - -
- -
+ + {/* */}
) : ( -
- -
+ <> + //
+ // + //
)} ); diff --git a/src/store/reducers/Trading/trading.jsx b/src/store/reducers/Trading/trading.jsx index 959dda7..a877509 100644 --- a/src/store/reducers/Trading/trading.jsx +++ b/src/store/reducers/Trading/trading.jsx @@ -1,16 +1,38 @@ import { createSlice } from "@reduxjs/toolkit"; const initialState = { - + selectedTab: "매수", + priceGap: 0, + maxQuantity: 0, + selectedPrice: 0, + scrollPosition: 100, }; const tradingSlice = createSlice({ name: "trading", initialState: initialState, reducers: { + setSelectedTab(state, action) { + state.selectedTab = action.payload; + }, + setPriceGap(state, action) { + state.priceGap = action.payload; + }, + setSelectedPrice(state, action) { + state.selectedPrice = action.payload; + }, + setScrollPosition(state, action) { + state.scrollPosition = action.payload; + }, }, - extraReducers: (builder) => { - }, + extraReducers: (builder) => {}, }); +export const { + setPriceGap, + selectedPrice, + setSelectedPrice, + setScrollPosition, + setSelectedTab, +} = tradingSlice.actions; export default tradingSlice.reducer; diff --git a/src/store/store.js b/src/store/store.js index 880a844..1da06aa 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -44,7 +44,6 @@ const rootPersistConfig = { const rootReducer = persistReducer( rootPersistConfig, combineReducers({ - // 임시 reducer trading: tradingReducer, chart: chartReducer, company: companyReducer, diff --git a/src/store/webSocket/nowPrice.js b/src/store/webSocket/nowPrice.js index 57d08ac..db3c98b 100644 --- a/src/store/webSocket/nowPrice.js +++ b/src/store/webSocket/nowPrice.js @@ -1,32 +1,32 @@ -import io from 'socket.io-client'; -const SERVER_URL = 'http://localhost:3000'; +import io from "socket.io-client"; +const SERVER_URL = "http://localhost:3000"; const socket = io(SERVER_URL); export const joinRoom = (stockCode) => { if (stockCode) { - socket.emit('joinRoom', stockCode); + socket.emit("joinRoom", stockCode); } }; export const leaveRoom = (stockCode) => { if (stockCode) { - socket.emit('leaveRoom', stockCode); + socket.emit("leaveRoom", stockCode); } }; export const subscribeNowPrice = (callback) => { - socket.on('nowPrice', message => { + socket.on("nowPrice", (message) => { callback(message); }); - return () => socket.off('nowPrice'); + return () => socket.off("nowPrice"); }; export const subscribeAskPrice = (callback) => { - socket.on('askPrice', message => { - callback(message); - }); - - return () => socket.off('askPrice'); -}; \ No newline at end of file + socket.on("askPrice", (message) => { + callback(message); + }); + + return () => socket.off("askPrice"); +}; From 4077cecfcf00d5e2bc60ad4f1a2690f38bd464e2 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Mon, 25 Mar 2024 15:01:47 +0900 Subject: [PATCH 80/84] =?UTF-8?q?fix:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EB=9D=BC=EC=9A=B0=ED=84=B0=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/invest/chart/MainChart.jsx | 6 ++++++ src/components/side-bar/SideNavbar.jsx | 24 ++++------------------- src/router/main-router.jsx | 5 ----- 3 files changed, 10 insertions(+), 25 deletions(-) diff --git a/src/components/invest/chart/MainChart.jsx b/src/components/invest/chart/MainChart.jsx index 972f0aa..17e17b4 100644 --- a/src/components/invest/chart/MainChart.jsx +++ b/src/components/invest/chart/MainChart.jsx @@ -60,6 +60,7 @@ import PPOChart from "./Indicators/sub/PPOChart"; import { setCompanyCode } from "../../../store/reducers/Chart/clickCompany"; import { setChartIndi, setDisactiveSub, setSubIndi } from "../../../store/reducers/Chart/Indicators/clickIndicators"; import { getBBANDSChart, getSARChart } from "../../../store/reducers/Chart/Indicators/chart"; +import { useWebSocket } from "../../../lib/hooks/useWebSocket"; export default function MainChart({ toggleCharts, toggleIndicators }) { const dataList = useSelector((state) => state.chart.datas); @@ -75,6 +76,11 @@ export default function MainChart({ toggleCharts, toggleIndicators }) { console.log('보조지표', subIndi); console.log('차트지표', chartIndi); + + // const { askPrice, nowPrice } = useWebSocket(); + // useEffect(() => { + // console.log('nowPrice',nowPrice) + // }, [nowPrice]) function getData(format) { const date = new Date(); diff --git a/src/components/side-bar/SideNavbar.jsx b/src/components/side-bar/SideNavbar.jsx index 634edfc..4f97200 100644 --- a/src/components/side-bar/SideNavbar.jsx +++ b/src/components/side-bar/SideNavbar.jsx @@ -20,22 +20,6 @@ const SideNavbar = () => {
트레이딩
-
  • - - 트레이딩 -
    시장정보
    - -
  • { ? "/icon/strategyOrange.svg" : "/icon/strategy.svg" } - alt="트레이딩" + alt="투자전략" />
    투자전략
    @@ -63,7 +47,7 @@ const SideNavbar = () => { ? "/icon/hotOrange.svg" : "/icon/hot.svg" } - alt="트레이딩" + alt="HOT" />
    HOT
    @@ -79,7 +63,7 @@ const SideNavbar = () => { ? "/icon/feedOrange.svg" : "/icon/feed.svg" } - alt="트레이딩" + alt="피드" />
    피드
    @@ -95,7 +79,7 @@ const SideNavbar = () => { ? "/icon/mypageOrange.svg" : "/icon/mypage.svg" } - alt="트레이딩" + alt="마이페이지" />
    마이페이지
    diff --git a/src/router/main-router.jsx b/src/router/main-router.jsx index 142f392..2c86eb8 100644 --- a/src/router/main-router.jsx +++ b/src/router/main-router.jsx @@ -25,11 +25,6 @@ export const mainRoutes = [ element: , index: true, }, - { - path: "/market", - element: , - index: true, - }, { path: "/strategy", element: , From d1c2b4d56f6b8edb533027a3f08bb2c9656398c3 Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Mon, 25 Mar 2024 16:02:16 +0900 Subject: [PATCH 81/84] =?UTF-8?q?refactor:=20=EB=A1=9C=EB=94=A9=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 10 ++ package.json | 1 + src/routes/HotStock/HotStockPage.jsx | 6 +- .../InvestStrategy/InvestStrategyPage.jsx | 102 +++++++++--------- src/store/reducers/Strategy/getStrategy.jsx | 5 + 5 files changed, 72 insertions(+), 52 deletions(-) diff --git a/package-lock.json b/package-lock.json index c54bdd7..838ff3c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "react-financial-charts": "^2.0.1", "react-redux": "^9.1.0", "react-router-dom": "^6.22.3", + "react-spinners": "^0.13.8", "redux": "^5.0.1", "redux-logger": "^3.0.6", "redux-persist": "^6.0.0", @@ -4433,6 +4434,15 @@ "react-dom": ">=16.8" } }, + "node_modules/react-spinners": { + "version": "0.13.8", + "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz", + "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==", + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/package.json b/package.json index 7af1d42..268eb4c 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "react-financial-charts": "^2.0.1", "react-redux": "^9.1.0", "react-router-dom": "^6.22.3", + "react-spinners": "^0.13.8", "redux": "^5.0.1", "redux-logger": "^3.0.6", "redux-persist": "^6.0.0", diff --git a/src/routes/HotStock/HotStockPage.jsx b/src/routes/HotStock/HotStockPage.jsx index dd516d3..1b0f2be 100644 --- a/src/routes/HotStock/HotStockPage.jsx +++ b/src/routes/HotStock/HotStockPage.jsx @@ -51,13 +51,13 @@ export default function HotStockPage() {
    - 인기 주식 + 실시간 인기 주식 {popularData.length > 0 ? ( popularData.map((item, idx) => - {item.now_rank}. + {item.now_rank}위
    state.strategy.strategy); + const loading = useSelector((state) => state.strategy.loading); useEffect(() => { dispatch(getStrategyDatas()) @@ -15,55 +17,55 @@ export default function InvestStrategyPage() { return ( - {strategy && ( - - <> - - - {strategy.shinhanDaily?.bbs_name} - - - {strategy.shinhanDaily?.title}.pdf - - - <> - - - {strategy.marketIssue?.bbs_name} - - - {strategy.marketIssue?.title}.pdf - - {/* {decode(strategy.marketIssue?.content)} */} - {strategy.marketIssue?.content.split('\n\n')[0].split('\n').map((item, idx) => - - • - {decode(item)} - - )} - - <> - - - {strategy.economicAnalysis?.bbs_name} - - - {strategy.economicAnalysis?.title}.pdf - - {decode(strategy.economicAnalysis?.content)} - - <> - - - {strategy.corporateAnalysis?.bbs_name} - - - {strategy.corporateAnalysis?.title}.pdf - - {decode(strategy.corporateAnalysis?.content)} - - - )} + + {loading ? ( +
    + +
    + ) : ( + strategy && ( + <> + + + {strategy.shinhanDaily?.bbs_name} + + + {strategy.shinhanDaily?.title}.pdf + + + + {strategy.marketIssue?.bbs_name} + + + {strategy.marketIssue?.title}.pdf + + {/* {decode(strategy.marketIssue?.content)} */} + {strategy.marketIssue?.content.split('\n\n')[0].split('\n').map((item, idx) => + + • + {decode(item)} + + )} + + + {strategy.economicAnalysis?.bbs_name} + + + {strategy.economicAnalysis?.title}.pdf + + {decode(strategy.economicAnalysis?.content)} + + + {strategy.corporateAnalysis?.bbs_name} + + + {strategy.corporateAnalysis?.title}.pdf + + {decode(strategy.corporateAnalysis?.content)} + + ) + )} +     ) } @@ -71,6 +73,7 @@ export default function InvestStrategyPage() { const Container = styled.div` background-color: #FFF; overflow-y: scroll; + height: 100vh; &::-webkit-scrollbar { width: 10px; @@ -134,4 +137,5 @@ const ContentFont = styled.div` padding: 10px 20px; font-size: 15px; font-weight: 600; + color: rgba(0, 0, 0, 0.8) ` \ No newline at end of file diff --git a/src/store/reducers/Strategy/getStrategy.jsx b/src/store/reducers/Strategy/getStrategy.jsx index 42facfc..397aa85 100644 --- a/src/store/reducers/Strategy/getStrategy.jsx +++ b/src/store/reducers/Strategy/getStrategy.jsx @@ -3,6 +3,7 @@ import { getStrategy } from "../../../lib/apis/strategy"; const initialState = { strategy: {}, + loading: false, }; export const getStrategyDatas = createAsyncThunk( @@ -18,8 +19,12 @@ const strategySlice = createSlice({ initialState: initialState, reducers: {}, extraReducers: (builder) => { + builder.addCase(getStrategyDatas.pending, (state, action) => { + state.loading = true; + }), builder.addCase(getStrategyDatas.fulfilled, (state, action) => { state.strategy = action.payload; + state.loading = false; }) }, }); From 3186a4c8739a61ec17dedf18745925e0f9ed794a Mon Sep 17 00:00:00 2001 From: yjp8842 Date: Mon, 25 Mar 2024 16:50:22 +0900 Subject: [PATCH 82/84] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B3=A0=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icon/logo.svg | 20 ++++++++++++++++++ src/App.css | 42 ------------------------------------- src/components/MyNavbar.jsx | 6 +++++- src/index.css | 9 ++++++++ src/routes/mainLayout.jsx | 2 +- 5 files changed, 35 insertions(+), 44 deletions(-) create mode 100644 public/icon/logo.svg delete mode 100644 src/App.css diff --git a/public/icon/logo.svg b/public/icon/logo.svg new file mode 100644 index 0000000..6b7cade --- /dev/null +++ b/public/icon/logo.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/App.css b/src/App.css deleted file mode 100644 index b9d355d..0000000 --- a/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/src/components/MyNavbar.jsx b/src/components/MyNavbar.jsx index 673a46f..ea19d7e 100644 --- a/src/components/MyNavbar.jsx +++ b/src/components/MyNavbar.jsx @@ -6,6 +6,7 @@ import { Link } from "react-router-dom"; // import { IsLoginContext, useIsLoginState } from "~/lib/hooks/isLoginContext"; // import useAuth from "~/lib/hooks/useAuth"; import { useSelector } from "react-redux"; +import LogoIcon from '../../public/icon/logo.svg' const EXPAND_BREAKPOINT = "md"; @@ -55,7 +56,10 @@ const MyNavbar = ({ offCanvasTitle }) => { style={{ borderBottom: "1px solid black" }} > - invest-SNS + + + StockMate + Date: Mon, 25 Mar 2024 17:30:47 +0900 Subject: [PATCH 83/84] =?UTF-8?q?=EC=B1=97=EB=B4=87=20=EC=97=85=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 344 +++++++++++++++++---------------- package.json | 3 +- src/components/MyNavbar.jsx | 115 +++++------ src/lib/apis/chatBot.jsx | 13 ++ src/router/main-router.jsx | 1 + src/routes/MyPage/MyPage.jsx | 4 +- src/routes/chatBot/chatBot.css | 146 ++++++++++++++ src/routes/chatBot/chatBot.jsx | 99 ++++++++++ src/service/commander.jsx | 17 ++ 9 files changed, 513 insertions(+), 229 deletions(-) create mode 100644 src/lib/apis/chatBot.jsx create mode 100644 src/routes/chatBot/chatBot.css create mode 100644 src/routes/chatBot/chatBot.jsx create mode 100644 src/service/commander.jsx diff --git a/package-lock.json b/package-lock.json index 64c7513..cb650aa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "bootstrap": "^5.3.3", "d3-format": "^3.1.0", "d3-time-format": "^4.1.0", + "html-entities": "^2.5.2", "react": "^18.2.0", "react-bootstrap": "^2.10.1", "react-cookie": "^7.1.0", @@ -34,7 +35,7 @@ "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", - "vite": "^5.1.4" + "vite": "^5.2.6" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -416,9 +417,9 @@ "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==" }, "node_modules/@esbuild/aix-ppc64": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz", - "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz", + "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==", "cpu": [ "ppc64" ], @@ -432,9 +433,9 @@ } }, "node_modules/@esbuild/android-arm": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz", - "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz", + "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==", "cpu": [ "arm" ], @@ -448,9 +449,9 @@ } }, "node_modules/@esbuild/android-arm64": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz", - "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz", + "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==", "cpu": [ "arm64" ], @@ -464,9 +465,9 @@ } }, "node_modules/@esbuild/android-x64": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz", - "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz", + "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==", "cpu": [ "x64" ], @@ -480,9 +481,9 @@ } }, "node_modules/@esbuild/darwin-arm64": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz", - "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz", + "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==", "cpu": [ "arm64" ], @@ -496,9 +497,9 @@ } }, "node_modules/@esbuild/darwin-x64": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz", - "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz", + "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==", "cpu": [ "x64" ], @@ -512,9 +513,9 @@ } }, "node_modules/@esbuild/freebsd-arm64": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz", - "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz", + "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==", "cpu": [ "arm64" ], @@ -528,9 +529,9 @@ } }, "node_modules/@esbuild/freebsd-x64": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz", - "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz", + "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==", "cpu": [ "x64" ], @@ -544,9 +545,9 @@ } }, "node_modules/@esbuild/linux-arm": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz", - "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz", + "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==", "cpu": [ "arm" ], @@ -560,9 +561,9 @@ } }, "node_modules/@esbuild/linux-arm64": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz", - "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz", + "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==", "cpu": [ "arm64" ], @@ -576,9 +577,9 @@ } }, "node_modules/@esbuild/linux-ia32": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz", - "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz", + "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==", "cpu": [ "ia32" ], @@ -592,9 +593,9 @@ } }, "node_modules/@esbuild/linux-loong64": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz", - "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz", + "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==", "cpu": [ "loong64" ], @@ -608,9 +609,9 @@ } }, "node_modules/@esbuild/linux-mips64el": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz", - "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz", + "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==", "cpu": [ "mips64el" ], @@ -624,9 +625,9 @@ } }, "node_modules/@esbuild/linux-ppc64": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz", - "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz", + "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==", "cpu": [ "ppc64" ], @@ -640,9 +641,9 @@ } }, "node_modules/@esbuild/linux-riscv64": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz", - "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz", + "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==", "cpu": [ "riscv64" ], @@ -656,9 +657,9 @@ } }, "node_modules/@esbuild/linux-s390x": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz", - "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz", + "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==", "cpu": [ "s390x" ], @@ -672,9 +673,9 @@ } }, "node_modules/@esbuild/linux-x64": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz", - "integrity": "sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz", + "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==", "cpu": [ "x64" ], @@ -688,9 +689,9 @@ } }, "node_modules/@esbuild/netbsd-x64": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz", - "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz", + "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==", "cpu": [ "x64" ], @@ -704,9 +705,9 @@ } }, "node_modules/@esbuild/openbsd-x64": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz", - "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz", + "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==", "cpu": [ "x64" ], @@ -720,9 +721,9 @@ } }, "node_modules/@esbuild/sunos-x64": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz", - "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz", + "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==", "cpu": [ "x64" ], @@ -736,9 +737,9 @@ } }, "node_modules/@esbuild/win32-arm64": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz", - "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz", + "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==", "cpu": [ "arm64" ], @@ -752,9 +753,9 @@ } }, "node_modules/@esbuild/win32-ia32": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz", - "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz", + "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==", "cpu": [ "ia32" ], @@ -768,9 +769,9 @@ } }, "node_modules/@esbuild/win32-x64": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz", - "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz", + "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==", "cpu": [ "x64" ], @@ -1349,9 +1350,9 @@ } }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.12.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.12.1.tgz", - "integrity": "sha512-iU2Sya8hNn1LhsYyf0N+L4Gf9Qc+9eBTJJJsaOGUp+7x4n2M9dxTt8UvhJl3oeftSjblSlpCfvjA/IfP3g5VjQ==", + "version": "4.13.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz", + "integrity": "sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==", "cpu": [ "arm" ], @@ -1362,9 +1363,9 @@ ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.12.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.12.1.tgz", - "integrity": "sha512-wlzcWiH2Ir7rdMELxFE5vuM7D6TsOcJ2Yw0c3vaBR3VOsJFVTx9xvwnAvhgU5Ii8Gd6+I11qNHwndDscIm0HXg==", + "version": "4.13.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz", + "integrity": "sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==", "cpu": [ "arm64" ], @@ -1375,9 +1376,9 @@ ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.12.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.12.1.tgz", - "integrity": "sha512-YRXa1+aZIFN5BaImK+84B3uNK8C6+ynKLPgvn29X9s0LTVCByp54TB7tdSMHDR7GTV39bz1lOmlLDuedgTwwHg==", + "version": "4.13.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz", + "integrity": "sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==", "cpu": [ "arm64" ], @@ -1388,9 +1389,9 @@ ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.12.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.12.1.tgz", - "integrity": "sha512-opjWJ4MevxeA8FhlngQWPBOvVWYNPFkq6/25rGgG+KOy0r8clYwL1CFd+PGwRqqMFVQ4/Qd3sQu5t7ucP7C/Uw==", + "version": "4.13.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz", + "integrity": "sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==", "cpu": [ "x64" ], @@ -1401,9 +1402,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.12.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.12.1.tgz", - "integrity": "sha512-uBkwaI+gBUlIe+EfbNnY5xNyXuhZbDSx2nzzW8tRMjUmpScd6lCQYKY2V9BATHtv5Ef2OBq6SChEP8h+/cxifQ==", + "version": "4.13.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz", + "integrity": "sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==", "cpu": [ "arm" ], @@ -1414,9 +1415,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.12.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.12.1.tgz", - "integrity": "sha512-0bK9aG1kIg0Su7OcFTlexkVeNZ5IzEsnz1ept87a0TUgZ6HplSgkJAnFpEVRW7GRcikT4GlPV0pbtVedOaXHQQ==", + "version": "4.13.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz", + "integrity": "sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==", "cpu": [ "arm64" ], @@ -1427,9 +1428,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.12.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.12.1.tgz", - "integrity": "sha512-qB6AFRXuP8bdkBI4D7UPUbE7OQf7u5OL+R94JE42Z2Qjmyj74FtDdLGeriRyBDhm4rQSvqAGCGC01b8Fu2LthQ==", + "version": "4.13.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz", + "integrity": "sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==", "cpu": [ "arm64" ], @@ -1440,9 +1441,9 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.12.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.12.1.tgz", - "integrity": "sha512-sHig3LaGlpNgDj5o8uPEoGs98RII8HpNIqFtAI8/pYABO8i0nb1QzT0JDoXF/pxzqO+FkxvwkHZo9k0NJYDedg==", + "version": "4.13.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz", + "integrity": "sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==", "cpu": [ "riscv64" ], @@ -1453,9 +1454,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.12.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.12.1.tgz", - "integrity": "sha512-nD3YcUv6jBJbBNFvSbp0IV66+ba/1teuBcu+fBBPZ33sidxitc6ErhON3JNavaH8HlswhWMC3s5rgZpM4MtPqQ==", + "version": "4.13.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz", + "integrity": "sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==", "cpu": [ "x64" ], @@ -1466,9 +1467,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.12.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.12.1.tgz", - "integrity": "sha512-7/XVZqgBby2qp/cO0TQ8uJK+9xnSdJ9ct6gSDdEr4MfABrjTyrW6Bau7HQ73a2a5tPB7hno49A0y1jhWGDN9OQ==", + "version": "4.13.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz", + "integrity": "sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==", "cpu": [ "x64" ], @@ -1479,9 +1480,9 @@ ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.12.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.12.1.tgz", - "integrity": "sha512-CYc64bnICG42UPL7TrhIwsJW4QcKkIt9gGlj21gq3VV0LL6XNb1yAdHVp1pIi9gkts9gGcT3OfUYHjGP7ETAiw==", + "version": "4.13.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz", + "integrity": "sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==", "cpu": [ "arm64" ], @@ -1492,9 +1493,9 @@ ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.12.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.12.1.tgz", - "integrity": "sha512-LN+vnlZ9g0qlHGlS920GR4zFCqAwbv2lULrR29yGaWP9u7wF5L7GqWu9Ah6/kFZPXPUkpdZwd//TNR+9XC9hvA==", + "version": "4.13.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz", + "integrity": "sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==", "cpu": [ "ia32" ], @@ -1505,9 +1506,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.12.1", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.12.1.tgz", - "integrity": "sha512-n+vkrSyphvmU0qkQ6QBNXCGr2mKjhP08mPRM/Xp5Ck2FV4NrHU+y6axzDeixUrCBHVUS51TZhjqrKBBsHLKb2Q==", + "version": "4.13.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz", + "integrity": "sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==", "cpu": [ "x64" ], @@ -2531,9 +2532,9 @@ } }, "node_modules/esbuild": { - "version": "0.19.12", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz", - "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz", + "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==", "dev": true, "hasInstallScript": true, "bin": { @@ -2543,29 +2544,29 @@ "node": ">=12" }, "optionalDependencies": { - "@esbuild/aix-ppc64": "0.19.12", - "@esbuild/android-arm": "0.19.12", - "@esbuild/android-arm64": "0.19.12", - "@esbuild/android-x64": "0.19.12", - "@esbuild/darwin-arm64": "0.19.12", - "@esbuild/darwin-x64": "0.19.12", - "@esbuild/freebsd-arm64": "0.19.12", - "@esbuild/freebsd-x64": "0.19.12", - "@esbuild/linux-arm": "0.19.12", - "@esbuild/linux-arm64": "0.19.12", - "@esbuild/linux-ia32": "0.19.12", - "@esbuild/linux-loong64": "0.19.12", - "@esbuild/linux-mips64el": "0.19.12", - "@esbuild/linux-ppc64": "0.19.12", - "@esbuild/linux-riscv64": "0.19.12", - "@esbuild/linux-s390x": "0.19.12", - "@esbuild/linux-x64": "0.19.12", - "@esbuild/netbsd-x64": "0.19.12", - "@esbuild/openbsd-x64": "0.19.12", - "@esbuild/sunos-x64": "0.19.12", - "@esbuild/win32-arm64": "0.19.12", - "@esbuild/win32-ia32": "0.19.12", - "@esbuild/win32-x64": "0.19.12" + "@esbuild/aix-ppc64": "0.20.2", + "@esbuild/android-arm": "0.20.2", + "@esbuild/android-arm64": "0.20.2", + "@esbuild/android-x64": "0.20.2", + "@esbuild/darwin-arm64": "0.20.2", + "@esbuild/darwin-x64": "0.20.2", + "@esbuild/freebsd-arm64": "0.20.2", + "@esbuild/freebsd-x64": "0.20.2", + "@esbuild/linux-arm": "0.20.2", + "@esbuild/linux-arm64": "0.20.2", + "@esbuild/linux-ia32": "0.20.2", + "@esbuild/linux-loong64": "0.20.2", + "@esbuild/linux-mips64el": "0.20.2", + "@esbuild/linux-ppc64": "0.20.2", + "@esbuild/linux-riscv64": "0.20.2", + "@esbuild/linux-s390x": "0.20.2", + "@esbuild/linux-x64": "0.20.2", + "@esbuild/netbsd-x64": "0.20.2", + "@esbuild/openbsd-x64": "0.20.2", + "@esbuild/sunos-x64": "0.20.2", + "@esbuild/win32-arm64": "0.20.2", + "@esbuild/win32-ia32": "0.20.2", + "@esbuild/win32-x64": "0.20.2" } }, "node_modules/escalade": { @@ -3270,6 +3271,21 @@ "react-is": "^16.7.0" } }, + "node_modules/html-entities": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.5.2.tgz", + "integrity": "sha512-K//PSRMQk4FZ78Kyau+mZurHn3FH0Vwr+H36eE0rPbeYkRRi9YxceYPhuN60UwWorxyKHhqoAJl2OFKa4BVtaA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/mdevils" + }, + { + "type": "patreon", + "url": "https://patreon.com/mdevils" + } + ] + }, "node_modules/ignore": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz", @@ -4135,9 +4151,9 @@ } }, "node_modules/postcss": { - "version": "8.4.35", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz", - "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==", + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", "dev": true, "funding": [ { @@ -4156,7 +4172,7 @@ "dependencies": { "nanoid": "^3.3.7", "picocolors": "^1.0.0", - "source-map-js": "^1.0.2" + "source-map-js": "^1.2.0" }, "engines": { "node": "^10 || ^12 || >=14" @@ -4547,9 +4563,9 @@ } }, "node_modules/rollup": { - "version": "4.12.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.12.1.tgz", - "integrity": "sha512-ggqQKvx/PsB0FaWXhIvVkSWh7a/PCLQAsMjBc+nA2M8Rv2/HG0X6zvixAB7KyZBRtifBUhy5k8voQX/mRnABPg==", + "version": "4.13.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.0.tgz", + "integrity": "sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==", "dev": true, "dependencies": { "@types/estree": "1.0.5" @@ -4562,19 +4578,19 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.12.1", - "@rollup/rollup-android-arm64": "4.12.1", - "@rollup/rollup-darwin-arm64": "4.12.1", - "@rollup/rollup-darwin-x64": "4.12.1", - "@rollup/rollup-linux-arm-gnueabihf": "4.12.1", - "@rollup/rollup-linux-arm64-gnu": "4.12.1", - "@rollup/rollup-linux-arm64-musl": "4.12.1", - "@rollup/rollup-linux-riscv64-gnu": "4.12.1", - "@rollup/rollup-linux-x64-gnu": "4.12.1", - "@rollup/rollup-linux-x64-musl": "4.12.1", - "@rollup/rollup-win32-arm64-msvc": "4.12.1", - "@rollup/rollup-win32-ia32-msvc": "4.12.1", - "@rollup/rollup-win32-x64-msvc": "4.12.1", + "@rollup/rollup-android-arm-eabi": "4.13.0", + "@rollup/rollup-android-arm64": "4.13.0", + "@rollup/rollup-darwin-arm64": "4.13.0", + "@rollup/rollup-darwin-x64": "4.13.0", + "@rollup/rollup-linux-arm-gnueabihf": "4.13.0", + "@rollup/rollup-linux-arm64-gnu": "4.13.0", + "@rollup/rollup-linux-arm64-musl": "4.13.0", + "@rollup/rollup-linux-riscv64-gnu": "4.13.0", + "@rollup/rollup-linux-x64-gnu": "4.13.0", + "@rollup/rollup-linux-x64-musl": "4.13.0", + "@rollup/rollup-win32-arm64-msvc": "4.13.0", + "@rollup/rollup-win32-ia32-msvc": "4.13.0", + "@rollup/rollup-win32-x64-msvc": "4.13.0", "fsevents": "~2.3.2" } }, @@ -4730,9 +4746,9 @@ } }, "node_modules/source-map-js": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", - "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", + "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", "engines": { "node": ">=0.10.0" } @@ -5134,14 +5150,14 @@ } }, "node_modules/vite": { - "version": "5.1.5", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.5.tgz", - "integrity": "sha512-BdN1xh0Of/oQafhU+FvopafUp6WaYenLU/NFoL5WyJL++GxkNfieKzBhM24H3HVsPQrlAqB7iJYTHabzaRed5Q==", + "version": "5.2.6", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.6.tgz", + "integrity": "sha512-FPtnxFlSIKYjZ2eosBQamz4CbyrTizbZ3hnGJlh/wMtCrlp1Hah6AzBLjGI5I2urTfNnpovpHdrL6YRuBOPnCA==", "dev": true, "dependencies": { - "esbuild": "^0.19.3", - "postcss": "^8.4.35", - "rollup": "^4.2.0" + "esbuild": "^0.20.1", + "postcss": "^8.4.36", + "rollup": "^4.13.0" }, "bin": { "vite": "bin/vite.js" diff --git a/package.json b/package.json index 0205388..3b214c7 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "bootstrap": "^5.3.3", "d3-format": "^3.1.0", "d3-time-format": "^4.1.0", + "html-entities": "^2.5.2", "react": "^18.2.0", "react-bootstrap": "^2.10.1", "react-cookie": "^7.1.0", @@ -36,6 +37,6 @@ "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", - "vite": "^5.1.4" + "vite": "^5.2.6" } } diff --git a/src/components/MyNavbar.jsx b/src/components/MyNavbar.jsx index 673a46f..b49be56 100644 --- a/src/components/MyNavbar.jsx +++ b/src/components/MyNavbar.jsx @@ -1,15 +1,19 @@ import React, { useContext, useEffect, useState, useMemo } from "react"; -import { Container, Navbar, Nav, Offcanvas } from "react-bootstrap"; +import { Container, Navbar, Nav, Offcanvas, Button, Modal } from "react-bootstrap"; import { Link } from "react-router-dom"; // import { fetchAboutUser, logout } from "~/lib/apis/user"; // import { getCookie, removeCookie } from "~/lib/apis/cookie"; // import { IsLoginContext, useIsLoginState } from "~/lib/hooks/isLoginContext"; // import useAuth from "~/lib/hooks/useAuth"; import { useSelector } from "react-redux"; +import ChatBot from "../routes/chatBot/chatBot"; const EXPAND_BREAKPOINT = "md"; const MyNavbar = ({ offCanvasTitle }) => { + const [showChatBot, setShowChatBot] = useState(false); // ChatBot 표시 상태 + const toggleChatBot = () => setShowChatBot(prev => !prev); + // const [user, setUser] = useState(""); // const [userId, setUserId] = useState(""); // const [isLogin, setIsLogin] = useState(false); @@ -49,67 +53,54 @@ const MyNavbar = ({ offCanvasTitle }) => { // } // }, [token]); return ( - - - invest-SNS - - - - - {offCanvasTitle || "invest-SNS"} - - - - - - - - + <> + + + invest-SNS + + + + {/* Offcanvas 내용 */} + + + {offCanvasTitle || "invest-SNS"} + + + + + + + + + + {/* ChatBot 모달 */} + + + ChatBot + + + + + + + + + ); }; diff --git a/src/lib/apis/chatBot.jsx b/src/lib/apis/chatBot.jsx new file mode 100644 index 0000000..472d258 --- /dev/null +++ b/src/lib/apis/chatBot.jsx @@ -0,0 +1,13 @@ +import { baseInstance } from "./api"; + +export async function fetchChatBot(input){ + const url = `/chatBot`; + try { + const response = await baseInstance.post(url, {prompt : input}); + console.log(response); + const data = response.data; + return data; + } catch (err) { + console.error(err); + } +} diff --git a/src/router/main-router.jsx b/src/router/main-router.jsx index 142f392..823a91c 100644 --- a/src/router/main-router.jsx +++ b/src/router/main-router.jsx @@ -10,6 +10,7 @@ import HotStockPage from "../routes/HotStock/HotStockPage"; import FeedPage from "../routes/Feed/FeedPage"; import MyPage from "../routes/MyPage/MyPage"; import SideLayout from "../routes/SideLayout"; +import ChatBot from "../routes/chatBot/chatBot"; export const mainRoutes = [ { diff --git a/src/routes/MyPage/MyPage.jsx b/src/routes/MyPage/MyPage.jsx index 2ac8a1a..17fc79a 100644 --- a/src/routes/MyPage/MyPage.jsx +++ b/src/routes/MyPage/MyPage.jsx @@ -3,7 +3,7 @@ import styled from "styled-components"; import * as S from "../../style/GlobalStyle"; import Feed from "../../components/Feed/FeedShow/Feed"; -import Account from "../../components/Feed/Account"; +//import Account from "../../components/Feed/Account"; export default function MyPage() { const [selectedTab, setSelectedTab] = useState("내 피드"); @@ -72,7 +72,7 @@ export default function MyPage() { {selectedTab === "내 피드" ? : <>} - {selectedTab === "내 종목" ? : <>} + {/* {selectedTab === "내 종목" ? : <>} */} ); diff --git a/src/routes/chatBot/chatBot.css b/src/routes/chatBot/chatBot.css new file mode 100644 index 0000000..2658fb9 --- /dev/null +++ b/src/routes/chatBot/chatBot.css @@ -0,0 +1,146 @@ +.App-header { + background-color: #282c34; + min-height: 20vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.chat-box { + margin: 0px; + padding: 10px; + border: 1px solid #ddd; + height: 50vh; + overflow-y: auto; +} + +.message { + margin: 5px; + padding: 10px; + border-radius: 10px; +} + +.user { + background-color: #007bff; + color: white; + text-align: right; /* 사용자 메시지 오른쪽 정렬을 위해 text-align 사용 */ + margin-left: auto; /* 메시지 박스를 오른쪽으로 밀어내기 */ + width: fit-content; /* 메시지 내용에 맞게 너비 조절 */ + max-width: 60%; /* 최대 너비 설정 */ +} + +.bot { + background-color: #d3d2d2; + color: black; + text-align: left; /* 챗봇 메시지 왼쪽 정렬을 위해 text-align 사용 */ + margin-right: auto; /* 메시지 박스를 왼쪽으로 밀어내기 */ + width: fit-content; /* 메시지 내용에 맞게 너비 조절 */ + max-width: 60%; /* 최대 너비 설정 */ +} + +form { + display: flex; + margin: 20px; /* 폼 주위에 마진 추가 */ + width: calc(100% - 40px); /* 채팅 박스 마진 고려하여 폼 너비 조절 */ +} + +input { + flex-grow: 1; + padding: 10px; + margin-right: 5px; /* 입력 필드와 버튼 사이의 간격 */ +} + +button { + padding: 10px; +} + +.loading-message { + padding: 10px 10px; /* 말풍선 내부의 여백을 조정 */ + min-width: 80px; /* 말풍선의 최소 너비를 설정 */ + /* 필요에 따라 추가 스타일링 */ + } + + +.loader10:before{ + content: ""; + position: absolute; + top: 0px; + left: -25px; + height: 12px; + width: 12px; + border-radius: 12px; + -webkit-animation: loader10g 3s ease-in-out infinite; + animation: loader10g 3s ease-in-out infinite; +} + +.loader10{ + position: relative; + width: 12px; + height: 12px; + top: 46%; + left: 46%; + border-radius: 12px; + -webkit-animation: loader10m 3s ease-in-out infinite; + animation: loader10m 3s ease-in-out infinite; +} + + +.loader10:after{ + content: ""; + position: absolute; + top: 0px; + left: 25px; + height: 10px; + width: 10px; + border-radius: 10px; + -webkit-animation: loader10d 3s ease-in-out infinite; + animation: loader10d 3s ease-in-out infinite; +} + +@-webkit-keyframes loader10g{ + 0%{background-color: rgba(255, 255, 255, .2);} + 25%{background-color: rgba(255, 255, 255, 1);} + 50%{background-color: rgba(255, 255, 255, .2);} + 75%{background-color: rgba(255, 255, 255, .2);} + 100%{background-color: rgba(255, 255, 255, .2);} +} +@keyframes loader10g{ + 0%{background-color: rgba(255, 255, 255, .2);} + 25%{background-color: rgba(255, 255, 255, 1);} + 50%{background-color: rgba(255, 255, 255, .2);} + 75%{background-color: rgba(255, 255, 255, .2);} + 100%{background-color: rgba(255, 255, 255, .2);} +} + +@-webkit-keyframes loader10m{ + 0%{background-color: rgba(255, 255, 255, .2);} + 25%{background-color: rgba(255, 255, 255, .2);} + 50%{background-color: rgba(255, 255, 255, 1);} + 75%{background-color: rgba(255, 255, 255, .2);} + 100%{background-color: rgba(255, 255, 255, .2);} +} +@keyframes loader10m{ + 0%{background-color: rgba(255, 255, 255, .2);} + 25%{background-color: rgba(255, 255, 255, .2);} + 50%{background-color: rgba(255, 255, 255, 1);} + 75%{background-color: rgba(255, 255, 255, .2);} + 100%{background-color: rgba(255, 255, 255, .2);} +} + +@-webkit-keyframes loader10d{ + 0%{background-color: rgba(255, 255, 255, .2);} + 25%{background-color: rgba(255, 255, 255, .2);} + 50%{background-color: rgba(255, 255, 255, .2);} + 75%{background-color: rgba(255, 255, 255, 1);} + 100%{background-color: rgba(255, 255, 255, .2);} +} +@keyframes loader10d{ + 0%{background-color: rgba(255, 255, 255, .2);} + 25%{background-color: rgba(255, 255, 255, .2);} + 50%{background-color: rgba(255, 255, 255, .2);} + 75%{background-color: rgba(255, 255, 255, 1);} + 100%{background-color: rgba(255, 255, 255, .2);} +} \ No newline at end of file diff --git a/src/routes/chatBot/chatBot.jsx b/src/routes/chatBot/chatBot.jsx new file mode 100644 index 0000000..0509c0c --- /dev/null +++ b/src/routes/chatBot/chatBot.jsx @@ -0,0 +1,99 @@ +import React, { useState, useRef, useEffect } from 'react'; +import { fetchChatBot } from '../../lib/apis/chatBot'; +import { Container, Form, Button, InputGroup, FormControl, Row, Col} from 'react-bootstrap'; +import './chatBot.css'; +import { commander } from '../../service/commander'; + +function ChatBot() { + const [messages, setMessages] = useState([]); + const [input, setInput] = useState(''); + const [isWaitingForResponse, setIsWaitingForResponse] = useState(false); + const chatBoxRef = useRef(null); + + useEffect(() => { + // 챗봇의 초기 메시지를 추가 + const initialMessage = { + text: '안녕하세요? 챗봇이에요', + sender: 'bot' + }; + setMessages([initialMessage]); + }, []); + + const sendMessage = async (e) => { + e.preventDefault(); + if (!input.trim()) return; + if (input[0] === '/') { + try { + const response = commander(input); + const userMessage = { text: input, sender: 'user' }; + setMessages(messages => [...messages, userMessage]); + const botMessage = { text: response, sender: 'bot' }; + setMessages(messages => [...messages, botMessage]); + setInput(''); + } catch (err) { + console.error(err); + } finally { + setIsWaitingForResponse(false); + } + }else{ + const userMessage = { text: input, sender: 'user' }; + setMessages((messages) => [...messages, userMessage]); + setInput(''); + setIsWaitingForResponse(true); + + try { + const response = await fetchChatBot(input); + const botMessage = { text: response.gpt, sender: 'bot' }; + setMessages((messages) => [...messages, botMessage]); + } catch (err) { + console.error(err); + } finally { + setIsWaitingForResponse(false); + } + } + + }; + + useEffect(() => { + if (chatBoxRef.current) { + chatBoxRef.current.scrollTop = chatBoxRef.current.scrollHeight; + } + }, [messages]); + + return ( + + + +
    + {messages.map((message, index) => ( +
    + {message.text} +
    + ))} + {isWaitingForResponse && ( +
    +
    +
    + )} +
    +
    +
    + + setInput(e.target.value)} + placeholder="챗봇에서 질문하세요!" + aria-label="챗봇에서 질문하세요!" + /> + + +
    +
    + +     + 활용 Tip💡 /가이드 /매수매도 /차트지표 /보조지표 /SNS 등의 커멘더키를 사용해보세요! +     + ); +} + +export default ChatBot; diff --git a/src/service/commander.jsx b/src/service/commander.jsx new file mode 100644 index 0000000..5196876 --- /dev/null +++ b/src/service/commander.jsx @@ -0,0 +1,17 @@ + +export function commander(prompt){ + const text = prompt.slice(0,5); + if(text === '/가이드'){ + return "다음은 stock mate 사이트 이용에 대한 기본적인 가이드 입니다. \n\n 1. 오른쪽 상단의 로그인 및 회원가입을 실행합니다. \n 2. 왼쪽 사이드 바의 검색을 통하여 종목을 선정합니다 \n 3. 선정한 종목의 주가 및 보조 지표를 확인합니다. \n 4. 오른쪽 사이드바의 매수/매도를 통하여 선택종목을 거래합니다." + }else if(text === '/매수매도'){ + return "매수와 매도는 오른쪽 사이드바에서 진행하실 수 있습니다. 매수는 종목 '구매', 매도는 종목 '판매' 라고 이해하셔도 됩니다. \n 선택한 종목의 호가와 실시간 거래가를 확인한 후, 매수 매도를 진행해주세요!" + }else if(text === '/차트지표'){ + return "차트 지표는 차트 지표는 주가 또는 거래량 등의 데이터를 분석하여 시장의 흐름과 추세를 파악하는 데 도움을 주는 기술적 지표들을 말합니다. 주로 주가 차트에 함께 표시되어 사용되며, 주가의 움직임을 그래픽으로 표현하여 투자자들이 시장의 동향을 파악하고 결정을 내릴 때 유용하게 활용됩니다. \n\n 차트 위쪽의 차트지표를 클릭하면 현재 보고있는 종목의 차트지표를 제공합니다. \n 각 차트지표에 대한 설명이 궁금하시면 'ex) AD Line은 뭐에요?' 와 같이 질문해주세요." + }else if(text === '/보조지표'){ + return "보조 지표는 주가 차트의 움직임을 분석하고 예측하기 위해 가격 데이터를 기반으로 계산된 보조적인 지표를 말합니다. 보조 지표는 가격 데이터의 변화에 대한 신호를 제공하고, 추세의 방향성, 강도, 변화 등을 확인하는 데 도움을 줍니다. \n\n 차트 위쪽의 보조지표를 클릭하면 현재 보고있는 종목의 보조지표를 제공합니다. \n 각 보조지표에 대한 설명이 궁금하시면 'ex) AD Line은 뭐에요?' 와 같이 질문해주세요." + }else if(text === '/sns' || text==='/SNS'){ + return "SNS 기능은 투자 고수와 초보 등 다양한 투자자들을 연결해주는 소셜 네트워크 입니다. 자신의 투자 수익률과 투자 전략을 공유하고, 인플루언서에 도전해보세요! 마음에 드는 인플루언서를 팔로우 하여 투자 전략을 참고할 수 있습니다! \n\n 오른쪽 사이드바 하단의 '피드' 와 '마이페이지' 를 통하여 이용하실 수 있습니다." + }else{ + return "잘못된 커멘더 키 입니다. 하단의 커멘더 키를 확인하시거나, 질문사항을 등록해주세요." + } +} From d5164f5e93de1345466fb39f016a244d2ec2ef81 Mon Sep 17 00:00:00 2001 From: Tomk2d Date: Mon, 25 Mar 2024 18:27:10 +0900 Subject: [PATCH 84/84] =?UTF-8?q?=EC=97=90=EB=9F=AC=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 9 ++++----- package.json | 2 +- src/components/MyNavbar.jsx | 28 ++++++++++++++-------------- 3 files changed, 19 insertions(+), 20 deletions(-) diff --git a/package-lock.json b/package-lock.json index ddd4288..a06dc51 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,8 +37,7 @@ "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", - "vite": "^5.1.6" - + "vite": "^5.2.6" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -5211,9 +5210,9 @@ } }, "node_modules/vite": { - "version": "5.1.6", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.6.tgz", - "integrity": "sha512-yYIAZs9nVfRJ/AiOLCA91zzhjsHUgMjB+EigzFb6W2XTLO8JixBCKCjvhKZaye+NKYHCrkv3Oh50dH9EdLU2RA==", + "version": "5.2.6", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.6.tgz", + "integrity": "sha512-FPtnxFlSIKYjZ2eosBQamz4CbyrTizbZ3hnGJlh/wMtCrlp1Hah6AzBLjGI5I2urTfNnpovpHdrL6YRuBOPnCA==", "dev": true, "dependencies": { "esbuild": "^0.20.1", diff --git a/package.json b/package.json index 268eb4c..c2adf23 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,6 @@ "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", - "vite": "^5.1.6" + "vite": "^5.2.6" } } diff --git a/src/components/MyNavbar.jsx b/src/components/MyNavbar.jsx index 1824ac0..ad17177 100644 --- a/src/components/MyNavbar.jsx +++ b/src/components/MyNavbar.jsx @@ -119,25 +119,25 @@ const MyNavbar = ({ offCanvasTitle }) => { )} */} + {/* ChatBot 모달 */} + + + ChatBot + + + + + + + +     - {/* ChatBot 모달 */} - - - ChatBot - - - - - - - - ); };