Set user-action & register form

-import {BrowserRouter as Router, Route, Routes, Link} from "react-router-dom";
+import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
 import MainPage from "./component/views/MainPage/MainPage";
 import LoginPage from "./component/views/LoginPage/LoginPage";
 import RegisterPage from "./component/views/RegisterPage/RegisterPage";

 export const LOGIN_USER = "login_user";
+export const REGISTER_USER = "register_user";
\ No newline at end of file

 import Axios from 'axios';
-import { LOGIN_USER } from './types';
+import { LOGIN_USER, REGISTER_USER } from './types';
 
 export function loginUser(dataToSubmit) {
 
@@ -10,3 +10,13 @@ export function loginUser(dataToSubmit) {
         payload: request
     }
 }
+
+export function registerUser(dataToSubmit) {
+
+    const request = Axios.post('/api/users/register', dataToSubmit)
+        .then( response => response.data )
+    return {
+        type: REGISTER_USER,
+        payload: request
+    }
+}
\ No newline at end of file

 import {
-    LOGIN_USER
+    LOGIN_USER, REGISTER_USER
 } from '../_actions/types';
 
 export default function (state = {}, action) {
@@ -7,7 +7,9 @@ export default function (state = {}, action) {
         case LOGIN_USER:
             return { ...state, loginSuccess: action.payload }
             break;
-
+        case REGISTER_USER:
+            return {...state, registerSuccess: action.payload}
+            break;
         default:
             return state;
     }

-import React, { useEffect } from 'react'
-import axios from 'axios'
+import React from 'react'
+//import axios from 'axios'
 // import { response } from 'express'
 
 function LandingPage() {
 
-    useEffect(() => {
-        axios.get('/api/hello')
-            .then(response => console.log(response.data))
-    }, [])
+    // useEffect(() => {
+    //     axios.get('/api/hello')
+    //         .then(response => console.log(response.data))
+    // }, [])
 
     return (
         <div>

-import React, {useEffect, useState} from "react";
-import Axios from 'axios'
-import {Link} from "react-router-dom";
+import React, {useState} from "react";
 import "../style/LoginPage.scss";
 import { Icon, Input } from "semantic-ui-react"
 import { useNavigate } from "react-router-dom";

-import {Button, Grid, Image, Segment} from "semantic-ui-react"
+import {Button} from "semantic-ui-react"
 import "../style/MainPage.scss";
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 function MainPage() {
     const navigate = useNavigate();

-import React, {useCallback, useState} from "react";
+import React, {useState} from "react";
 import "../style/RegisterPage.scss";
 import { Button, Icon, Input } from "semantic-ui-react";
+import {useDispatch} from "react-redux";
+import { registerUser } from '../../../_actions/user_action'
 
-function RegisterPage() {
+function RegisterPage(props) {
+    const dispatch = useDispatch();
     const [Id, setId] = useState("");
     const [Password, setPassword] = useState("");
     const [PasswordCheck,setPasswordCheck] = useState("");
     const [Personality, setPersonality] = useState("");
-    const [PasswordError,setPasswordError] = useState(false);
 
     const onIdHandler = (event) => {
         setId(event.currentTarget.value);
@@ -18,23 +20,32 @@ function RegisterPage() {
     const onPersonalityHandler = (event) => {
         setPersonality(event.currentTarget.value);
     };
-    const onPasswordChkHandler = useCallback((event) => {
+    const onPasswordChkHandler = (event) => {
         //비밀번호를 입력할때마다 password 를 검증하는 함수
         setPasswordCheck(event.currentTarget.value);
-    },[PasswordCheck]);
-    const onSubmitHandler = useCallback((event) => {
+    };
+    const onSubmitHandler = (event) => {
         event.preventDefault();
         console.log("ID", Id);
         console.log("Password", Password);
         console.log("MBTI", Personality);
-        if(Password !== PasswordCheck){
-            return setPasswordError(true);
+        if (Password !== PasswordCheck) {
+            return alert('비밀번호가 일치하지 않습니다.')
         }
-        else{
-            return setPasswordError(false);
+        let body = {
+            id: Id,
+            password: Password,
+            personality: Personality
+        }
+        dispatch(registerUser(body))
+            .then(response => {
+                if (response.payload.success) {
+                    props.history.push('/login')
+                } else {
+                    alert('Failed to sign up')
+                }
+            })
     }
-    },[Password,PasswordCheck]);
-
     return (
         <div id="Register">
             <div className="register-form">
@@ -42,9 +53,9 @@ function RegisterPage() {
                     <h1>Tunnel</h1>
                     <div className="input-area">
                         <Input
-                            icon={<Icon name='at'/>}
+                            icon={<Icon name="id badge"/>}
                             iconPosition='left'
-                            placeholder="Email"
+                            placeholder="ID"
                             type="text"
                             value={Id}
                             autoComplete="off"
@@ -68,11 +79,7 @@ function RegisterPage() {
                             type="password"
                             value={Password}
                             autoComplete="off"
-                            onChange={onPasswordHandler}
-                            onFocus={()=>setPasswordError(false)}/>
-                        {PasswordError &&
-                        <div>비밀번호 오류</div>
-                        }
+                            onChange={onPasswordHandler}/>
                     </div>
                     <div className="input-area">
                         <Input
@@ -82,8 +89,7 @@ function RegisterPage() {
                             type="password"
                             value={PasswordCheck}
                             autoComplete="off"
-                            onChange={onPasswordChkHandler}
-                        onFocus={()=>setPasswordError(false)}/>
+                            onChange={onPasswordChkHandler}/>
                     </div>
                     <div className="btn-area" >
                         <Button className='register-btn'
@@ -93,9 +99,7 @@ function RegisterPage() {
                     </div>
                 </form>
             </div>
-
         </div>
     );
 }
-
 export default RegisterPage;