[Update] Register, Login Redux Setting

@@ -10380,6 +10380,11 @@
       "integrity": "sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==",
       "dev": true
     },
+    "redux-thunk": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
+      "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q=="
+    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",

@@ -18,6 +18,7 @@
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "redux": "^4.1.2",
+    "redux-thunk": "^2.4.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

 import React, { useCallback, useState } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
 import { login } from "../../../modules/user";
 import "../style/LoginPage.scss"
 
 function LoginPage(props) {
   const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  const loginResult = useSelector((state) => state.user.loginSuccess);
 
   const [Id, setId] = useState("");
   const [Password, setPassword] = useState("");
@@ -58,20 +62,25 @@ function LoginPage(props) {
     if (!checkLoginError) {
       const UserData = {
         id: Id,
-        password: Password,
+        password: Password
       };
 
-      dispatch(login(UserData))
-        .then(res => {
-          if (res.payload.loginSuccess) {
-            props.history.push('/register');
-          } else {
-            alert(res.payload.error);
-          }
-        })
+      dispatch(login(UserData));
+      loginResult.then((result) => {
+        console.log(result);
+ 
+        if (result.loginSuccess === true) {
+          alert('로그인 완료!');
+          navigate('/');
+        } 
+        else {
+         alert('로그인 실패ㅜㅜ');
+        }
+      })
+
     }
 
-  }, [checkIdError, checkPasswordError, Password]);
+  }, [checkIdError, checkPasswordError, Password, dispatch, loginResult]);
 
   return (
     <div id = "body">

@@ -6,9 +6,9 @@ import { useNavigate } from "react-router-dom";
 
 function RegisterPage(props) {
   const dispatch = useDispatch();
-  const naviagte = useNavigate();
+  const navigate = useNavigate();
 
-  const registerResult = useSelector(state => state.user.registerSuccess);
+  const registerResult = useSelector((state) => state.user.registerSuccess);
 
   const [Name, setName] = useState("");
   const [Sex, setSex] = useState("");
@@ -103,15 +103,23 @@ function RegisterPage(props) {
         password: Password,
         gender: Sex,
       };
-        
-     dispatch(register(UserData));
 
-     if (registerResult) {
-        alert('회원가입에 성공하였습니다.');
-        naviagte('/login');
-      } else {
-        alert('회원가입에 실패하였습니다.');
-      }
+
+     dispatch(register(UserData));
+     registerResult.then((result) => {
+       console.log(result);
+
+       if (result.registerSuccess === '1') {
+         alert('회원 가입 완료!');
+         navigate('/login');
+       } 
+       else if (result.registerSuccess === '0') {
+        alert('중복된 아이디 존재ㅠㅠ');
+       }
+       else {
+        alert('회원 가입 실패ㅜㅜ');
+       }
+     })
      
     };
 

@@ -3,13 +3,14 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import { Provider } from 'react-redux';
-import { createStore } from 'redux';
+import { applyMiddleware, createStore } from 'redux';
 import reportWebVitals from './reportWebVitals';
 import { BrowserRouter } from 'react-router-dom';
 import rootReducer from './modules/Index';
 import { composeWithDevTools } from 'redux-devtools-extension';
+import ReduxThunk from 'redux-thunk';
 
-const store = createStore(rootReducer, composeWithDevTools());
+const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(ReduxThunk)));
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

 import axios from 'axios';
 
-const REGISTER = 'user/REGISTER';
-const LOGIN = 'user/LOGIN';
+const USER_REGISTER = 'user/REGISTER';
+const USER_LOGIN = 'user/LOGIN';
 
-export function register(data) {
-  const req = axios.post('http://localhost:4000/api/register', data)
+export function register(dataToSubmit) {
+
+  const req = axios.post('http://localhost:4000/api/register', dataToSubmit)
     .then(res => res.data);
 
     return {
-      type: REGISTER,
+      type: USER_REGISTER,
       payload: req,
     }
-}
+};
 
-export function login(data) {
-  const req = axios.post('http://localhost:4000/api/login', data)
-    .then(res => res.date);
+export function login(dataToSubmit) {
+  const req = axios.post('http://localhost:4000/api/login', dataToSubmit)
+    .then(res => res.data);
 
     return {
-      type: LOGIN,
+      type: USER_LOGIN,
       payload: req,
     }
-}
+};
 
 export default function (state = {}, action) {
   switch (action.type) {
-    case REGISTER:
+    case USER_REGISTER:
       return { ...state, registerSuccess: action.payload };
-    case LOGIN:
+      break;
+    case USER_LOGIN:
       return { ...state, loginSuccess: action.payload };
+      break;
     default:
       return state;
   }