From 0300e0993cbcb2949f7726480a0106a2d7aa68ef Mon Sep 17 00:00:00 2001 From: BEOKS Date: Fri, 4 Feb 2022 14:34:02 +0900 Subject: [PATCH 1/2] Feat : install reduxjs/tookit and create sotre.js Task : #148 --- client/package.json | 1 + client/src/store.js | 5 +++++ client/yarn.lock | 27 +++++++++++++++++++++++++++ 3 files changed, 33 insertions(+) create mode 100644 client/src/store.js diff --git a/client/package.json b/client/package.json index d29acfb9..d6f5c394 100644 --- a/client/package.json +++ b/client/package.json @@ -9,6 +9,7 @@ "@mui/material": "^5.2.5", "@mui/styled-engine": "^5.1.1", "@mui/x-data-grid": "^5.0.1", + "@reduxjs/toolkit": "^1.7.2", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", diff --git a/client/src/store.js b/client/src/store.js new file mode 100644 index 00000000..21eb6c93 --- /dev/null +++ b/client/src/store.js @@ -0,0 +1,5 @@ +import { configureStore } from '@reduxjs/toolkit' + +export default configureStore({ + reducer:{}, +}) diff --git a/client/yarn.lock b/client/yarn.lock index 6608eb1d..007c8d40 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -1617,6 +1617,16 @@ resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.0.tgz" integrity sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ== +"@reduxjs/toolkit@^1.7.2": + version "1.7.2" + resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.7.2.tgz#b428aaef92582379464f9de698dbb71957eafb02" + integrity sha512-wwr3//Ar8ZhM9bS58O+HCIaMlR4Y6SNHfuszz9hKnQuFIKvwaL3Kmjo6fpDKUOjo4Lv54Yi299ed8rofCJ/Vjw== + dependencies: + immer "^9.0.7" + redux "^4.1.2" + redux-thunk "^2.4.1" + reselect "^4.1.5" + "@rollup/plugin-node-resolve@^7.1.1": version "7.1.3" resolved "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz" @@ -5960,6 +5970,11 @@ immer@8.0.1: resolved "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz" integrity sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA== +immer@^9.0.7: + version "9.0.12" + resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.12.tgz#2d33ddf3ee1d247deab9d707ca472c8c942a0f20" + integrity sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA== + import-cwd@^2.0.0: version "2.1.0" resolved "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz" @@ -9544,6 +9559,18 @@ redent@^3.0.0: indent-string "^4.0.0" strip-indent "^3.0.0" +redux-thunk@^2.4.1: + version "2.4.1" + resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz#0dd8042cf47868f4b29699941de03c9301a75714" + integrity sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q== + +redux@^4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.2.tgz#140f35426d99bb4729af760afcf79eaaac407104" + integrity sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw== + dependencies: + "@babel/runtime" "^7.9.2" + regenerate-unicode-properties@^9.0.0: version "9.0.0" resolved "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-9.0.0.tgz" From 38f099b2e50e941d19c9e71721333aebc429fc0b Mon Sep 17 00:00:00 2001 From: BEOKS Date: Fri, 4 Feb 2022 16:10:33 +0900 Subject: [PATCH 2/2] Feat : add store.js and ProjecDrawer actions and slice MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit index.js가 store에 접근하기 위해 sotre.js를 생성하여 추가해주고 ProjectDrawerActions.js과 ProjectDrawerSlice.js를 생성해줌 Task : #148 --- client/package.json | 4 ++ client/src/App.js | 3 +- .../Drawer/state/ProjectDrawerActions.js | 2 + .../Drawer/state/ProjectDrawerSlice.js | 13 ++++++ client/src/{ => component/HomePage}/Page.js | 12 ++--- client/src/index.js | 10 ++-- client/src/reducer.js | 3 ++ client/src/store.js | 18 ++++++-- client/yarn.lock | 46 ++++++++++++++++++- 9 files changed, 95 insertions(+), 16 deletions(-) create mode 100644 client/src/component/Drawer/state/ProjectDrawerActions.js create mode 100644 client/src/component/Drawer/state/ProjectDrawerSlice.js rename client/src/{ => component/HomePage}/Page.js (92%) create mode 100644 client/src/reducer.js diff --git a/client/package.json b/client/package.json index d6f5c394..a139dbc2 100644 --- a/client/package.json +++ b/client/package.json @@ -22,9 +22,13 @@ "http-proxy-middleware": "^2.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-redux": "^7.2.6", "react-router": "^6.2.1", "react-router-dom": "^6.2.1", "react-scripts": "4.0.3", + "redux": "^4.1.2", + "redux-devtools-extension": "^2.13.9", + "redux-thunk": "^2.4.1", "web-vitals": "^1.0.1" }, "scripts": { diff --git a/client/src/App.js b/client/src/App.js index f1517449..6454e27f 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,8 +1,9 @@ import * as React from 'react' import {useState} from 'react'; -import Page from './Page' +import Page from './component/HomePage/Page' import LoadingPage from './component/Login/Loading'; import { chcekLoginStatusAsync } from './component/Login/Login'; + export default function App(){ const [loginStatus,setLoginStatus]=useState(); if(loginStatus===undefined){ diff --git a/client/src/component/Drawer/state/ProjectDrawerActions.js b/client/src/component/Drawer/state/ProjectDrawerActions.js new file mode 100644 index 00000000..462448e5 --- /dev/null +++ b/client/src/component/Drawer/state/ProjectDrawerActions.js @@ -0,0 +1,2 @@ +export const OPEN_PROJECT_DRAWER='OPEN_PROJECT_DRAWER' +export const CLOSE_PROJECT_DRAWER='CLOSE_PROJECT_DRAWER' \ No newline at end of file diff --git a/client/src/component/Drawer/state/ProjectDrawerSlice.js b/client/src/component/Drawer/state/ProjectDrawerSlice.js new file mode 100644 index 00000000..7b66a61f --- /dev/null +++ b/client/src/component/Drawer/state/ProjectDrawerSlice.js @@ -0,0 +1,13 @@ +import {OPEN_PROJECT_DRAWER,CLOSE_PROJECT_DRAWER} from "./ProjectDrawerActions"; + +const projectDrawerOpenInitialState='close'; +export const projectDrawerReducer=(state=projectDrawerOpenInitialState,action)=>{ + switch (action.type){ + case OPEN_PROJECT_DRAWER: + return 'open' + case CLOSE_PROJECT_DRAWER: + return 'close' + default: + return state + } +} \ No newline at end of file diff --git a/client/src/Page.js b/client/src/component/HomePage/Page.js similarity index 92% rename from client/src/Page.js rename to client/src/component/HomePage/Page.js index a886248a..a3212fc1 100644 --- a/client/src/Page.js +++ b/client/src/component/HomePage/Page.js @@ -2,12 +2,12 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import CssBaseline from '@mui/material/CssBaseline'; import { CircularProgress,Stack,Typography } from '@mui/material'; -import DicomTable from "./component/Table/DicomTable"; -import UpDownloadToolbar from "./component/Toolbar/UpDownloadToolbar"; -import { DrawerHeader } from './component/Drawer/ProjectDrawer'; -import ProjectDrawer from './component/Drawer/ProjectDrawer' -import BaseAppBar from './component/AppBar/BaseAppBar'; -import LoadingPage from './component/Login/Loading'; +import DicomTable from "../Table/DicomTable"; +import UpDownloadToolbar from "../Toolbar/UpDownloadToolbar"; +import { DrawerHeader } from '../Drawer/ProjectDrawer'; +import ProjectDrawer from '../Drawer/ProjectDrawer' +import BaseAppBar from '../AppBar/BaseAppBar'; +import LoadingPage from '../Login/Loading'; import axios from 'axios'; axios.defaults.maxRedirects=0; export default function Page() { diff --git a/client/src/index.js b/client/src/index.js index dd83ddc1..425d2e9b 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -4,12 +4,16 @@ import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from 'react-router-dom'; +import { Provider } from 'react-redux' +import store from './store' ReactDOM.render( - - - + + + + + , document.getElementById('root') ); diff --git a/client/src/reducer.js b/client/src/reducer.js new file mode 100644 index 00000000..e158a9ba --- /dev/null +++ b/client/src/reducer.js @@ -0,0 +1,3 @@ +import { combineReducers } from 'redux'; + +export default combineReducers({ }); \ No newline at end of file diff --git a/client/src/store.js b/client/src/store.js index 21eb6c93..a8caee1c 100644 --- a/client/src/store.js +++ b/client/src/store.js @@ -1,5 +1,15 @@ -import { configureStore } from '@reduxjs/toolkit' +/** + * reducer는 store에 들어갈 state와 state를 바꿀 함수를 정의하는 곳입니다. + * 기본적으로 순수함수로 코딩하고, 불변성을 지켜야 합니다. + * + */ +import { createStore, applyMiddleware } from 'redux' +import thunkMiddleware from 'redux-thunk' +import { composeWithDevTools } from 'redux-devtools-extension' +import reducer from './reducer' -export default configureStore({ - reducer:{}, -}) +const composedEnhancer = composeWithDevTools(applyMiddleware(thunkMiddleware)) + +// The store now has the ability to accept thunk functions in `dispatch` +const store = createStore(reducer, composedEnhancer) +export default store \ No newline at end of file diff --git a/client/yarn.lock b/client/yarn.lock index 007c8d40..6972d14b 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -1039,6 +1039,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.15.4": + version "7.17.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.0.tgz#b8d142fc0f7664fb3d9b5833fd40dcbab89276c0" + integrity sha512-etcO/ohMNaNA2UBdaXBBSX/3aEzFMRrVfaPv8Ptc0k+cWpWW0QFiGZ2XnVqQZI1Cf734LbPGmqBKWESfW4x/dQ== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/runtime@^7.7.6": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa" @@ -1900,6 +1907,14 @@ dependencies: "@types/node" "*" +"@types/hoist-non-react-statics@^3.3.0": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/html-minifier-terser@^5.0.0": version "5.1.2" resolved "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz" @@ -1991,6 +2006,16 @@ dependencies: "@types/react" "*" +"@types/react-redux@^7.1.20": + version "7.1.22" + resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.22.tgz#0eab76a37ef477cc4b53665aeaf29cb60631b72a" + integrity sha512-GxIA1kM7ClU73I6wg9IRTVwSO9GS+SAKZKe0Enj+82HMU6aoESFU2HNAdNi3+J53IaOHPiUfT3kSG4L828joDQ== + dependencies: + "@types/hoist-non-react-statics" "^3.3.0" + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + redux "^4.0.0" + "@types/react-transition-group@^4.4.4": version "4.4.4" resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz" @@ -5744,7 +5769,7 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: 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== @@ -9383,6 +9408,18 @@ react-is@^17.0.1, react-is@^17.0.2: resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== +react-redux@^7.2.6: + version "7.2.6" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.6.tgz#49633a24fe552b5f9caf58feb8a138936ddfe9aa" + integrity sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ== + dependencies: + "@babel/runtime" "^7.15.4" + "@types/react-redux" "^7.1.20" + hoist-non-react-statics "^3.3.2" + loose-envify "^1.4.0" + prop-types "^15.7.2" + react-is "^17.0.2" + react-refresh@^0.8.3: version "0.8.3" resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz" @@ -9559,12 +9596,17 @@ redent@^3.0.0: indent-string "^4.0.0" strip-indent "^3.0.0" +redux-devtools-extension@^2.13.9: + version "2.13.9" + resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz#6b764e8028b507adcb75a1cae790f71e6be08ae7" + integrity sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A== + redux-thunk@^2.4.1: version "2.4.1" resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz#0dd8042cf47868f4b29699941de03c9301a75714" integrity sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q== -redux@^4.1.2: +redux@^4.0.0, redux@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.2.tgz#140f35426d99bb4729af760afcf79eaaac407104" integrity sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==