Submain

package.json

@@ -12,6 +12,7 @@
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
     "@toast-ui/react-editor": "^3.1.8",
+    "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-bootstrap": "^2.4.0",
     "react-dom": "^18.2.0",
@@ -21,6 +22,8 @@
     "react-router-dom": "5.3.0",
     "react-scripts": "5.0.1",
     "redux": "^4.2.0",
+    "redux-persist": "^6.0.0",
+    "redux-thunk": "^2.4.1",
     "remark-gfm": "^3.0.1",
     "styled-components": "^5.3.5",
     "web-vitals": "^2.1.0"

src/components/Register/Register.jsx

@@ -2,12 +2,15 @@ import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
 import './style.css'
 import React from 'react';
+import {useDispatch} from 'react-redux'
+import { registerUser } from '../../redux/modules/user';
 
 export default function Register(props) {
     let emailRef = React.useRef(null);
     let nameRef = React.useRef(null);
     let pwRef = React.useRef(null);
     let pwRef2 = React.useRef(null);
+    const dispatch = useDispatch()
 
     const characterCheck=(obj)=>{
         let regExp;
@@ -23,7 +26,6 @@ export default function Register(props) {
     }
 
     const isPassword=(obj)=>{
-        console.log(obj.current.value)
         var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{8,30}$/;
         if(obj.current.value.length>1 && !regExp.test(obj.current.value)){
             obj.current.focus();
@@ -40,6 +42,16 @@ export default function Register(props) {
         }
     }
 
+    function submitHandler(event) {
+        event.preventDefault()
+        const newUser = {
+            email: emailRef.current.value,
+            nickname: nameRef.current.value,
+            password: pwRef2.current.value
+        }
+        dispatch(registerUser(newUser))        
+    }
+
     return (
         <>
             <Form className='form-register'>
@@ -121,7 +133,7 @@ export default function Register(props) {
                     className='mt-5' 
                     variant="dark" 
                     type="submit" 
-                    onClick={props.userToggle}
+                    onClick={submitHandler}
                     >
                         회원가입
                     </Button>

src/redux/configStore.js

@@ -1,8 +1,15 @@
-import {createStore, combineReducers} from 'redux';
+import {createStore, combineReducers, applyMiddleware} from 'redux';
 import note from './modules/note'
+import user from './modules/user'
 import comment from './modules/comment'
 
-const rootReducer = combineReducers({note, comment});
-const store = createStore(rootReducer);
+// 미들웨어용
+import thunk from "redux-thunk"
+
+const middlewares = [thunk];
+const rootReducer = combineReducers({note, user, comment});
+const enhancer = applyMiddleware(...middlewares)
+
+const store = createStore(rootReducer, enhancer);
 
 export default store;

src/redux/modules/note.js

@@ -4,7 +4,7 @@ const initialNote = [
         'note_id': 0,
         "author": '작성자',
         "title": '노트 제목1', 
-        "content": <div><h2>노트의 내용1</h2></div>,
+        "content": <div>노트의 내용1</div>,
         "series": '시리즈',
         "createdAt": '0000-00-00',
         "updatedAt": '0000-00-00'

src/redux/modules/user.js

@@ -1,18 +1,47 @@
-// const userState = 'user/state';
-// const init = false;
-// export function createNote(login) {
-// 	return { type: userState, login };
-// }
+import Axios from "axios";
 
+const LOGIN = "user/LOGIN";
+const REGISTER = "user/REGISTER";
 
+const initialState = {}
 
-// // Reducer
-// export default function reducer(state = initialNote, action = {}) {
-// 	switch (action.type) {
-// 	case 'note/CREATE': {
-//         const new_note_list = [...initialNote, action.note];
-//         return new_note_list;
-//     }
-// 	default: return state;
-// 	}
-// }
+export function loginAction(user){
+    return {type: LOGIN, user};
+}
+
+export function registerAction (user){
+    return {type: REGISTER, user};
+}
+
+export const loginUser = () => {
+    return async function (dispatch) {
+    dispatch(loginUser());
+    }
+}
+
+export const registerUser = (user) => {
+    console.log(user)
+    return async function (dispatch) {
+    try {
+        let test = await Axios.post("/register", user)
+        // let test = await Axios.get("https://jsonplaceholder.typicode.com/users")
+        console.log(test.data)
+    }
+    catch(e) {
+        console.log(e)
+    }
+    }
+}
+
+  export default function reducer(state = initialState, action = {}) {
+    switch (action.type) {
+      case "user/LOGIN": {
+        return state;
+      }
+      case "user/REGISTER": {
+          return state;
+      }
+      default:
+        return state;
+    }
+  }

yarn.lock

@@ -2747,6 +2747,14 @@ axe-core@^4.4.3:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.3.tgz#11c74d23d5013c0fa5d183796729bc3482bd2f6f"
   integrity sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w==
 
+axios@^0.27.2:
+  version "0.27.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
+  integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==
+  dependencies:
+    follow-redirects "^1.14.9"
+    form-data "^4.0.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -4612,7 +4620,7 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.6.tgz#022e9218c637f9f3fc9c35ab9c9193f05add60b2"
   integrity sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ==
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.14.9:
   version "1.15.1"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5"
   integrity sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==
@@ -4645,6 +4653,15 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -8308,6 +8325,16 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redux-persist@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"
+  integrity sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==
+
+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.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"