🌺 회원가입 페이지 만들기 🌺

1. 전체 프로세스 <로그인>

회원가입 - 이메일 - 이름 - 비밀번호 - 비밀번호확인 - 확인

 

 

2. RegisterPage 도 LoginPage 와 비슷한 맥락으로 만들어주기

 

import React, {useState} from 'react'
import {useDispatch} from 'react-redux';
import {registerUser} from '../../../_actions/user_action'

function RegisterPage(props) {

    const dispatch = useDispatch();

    const [Email, setEmail] = useState("")
    const [Password, setPassword] = useState("")
    const [Name, setName] = useState("")
    const [ConfirmPassword, setConfirmPassword] = useState("")

    const onEmailHandler = (event) => {
        setEmail(event.currentTarget.value)
    } 
    const onNameHandler = (event) => {
        setName(event.currentTarget.value)
    }
    const onPasswordHandler = (event) => {
        setPassword(event.currentTarget.value)
    }
    const onConfirmPasswordHandler = (event) => {
        setConfirmPassword(event.currentTarget.value)
    }

    const onSubmitHandler = (event) => {
        event.preventDefault()

        if(Password !== ConfirmPassword){
            return alert('비밀번호와 비밀번호 확인은 같아야 합니다.');
        }

        let body = {
            email: Email,
            password: Password,
            name: Name
        }

        dispatch(registerUser(body))
        .then(response => {
            if(response.payload.success) {
                props.history.push('/login');
            } else {
                alert("Failed to sign up")
            }
        })
    }

    return (
        <div style={{
            display: 'flex', justifyContent: 'center', alignItems: 'center',
            width: '100%', height: '100vh'
        }}>
            <form style={{ display: 'flex', flexDirection: 'column'}}
                onSubmit={onSubmitHandler}
            >
                <label>Email</label>
                <input type="email" value={Email} onChange={onEmailHandler}/>
                
                <label>Name</label>
                <input type="text" value={Name} onChange={onNameHandler}/>

                <label>Password</label>
                <input type="password" value={Password} onChange={onPasswordHandler}/>

                <label>Confirm Password</label>
                <input type="password" value={ConfirmPassword} onChange={onConfirmPasswordHandler}/>

                <br />
                <button>
                    회원가입
                </button>
            </form>
        </div>
    )
}

export default RegisterPage

RegisterPage.js

 

 

 

3. user_action에 registerUser 추가

 

import {
    LOGIN_USER,
    REGISTER_USER
} from './types';

export function registerUser(dataTosubmit){
    const request = axios.post('/api/users/register', dataTosubmit)
        .then(response => response.data)

    return {
        type: REGISTER_USER,
        payload: request
    }
}

 

 

 

4. types.js 에도 추가

 

export const REGISTER_USER = "register_user";

 

 

 

 

5. user_reducers 에 추가

 

import {
    LOGIN_USER, REGISTER_USER
} from '../_actions/types';

case REGISTER_USER:
            return { ...state, register: action.payload };

 

 

 

 

 

<로그아웃>

- 로그아웃 버튼 만들어주기

const onClickHandler = () => {
        axios.get('/api/users/logout')
        .then(response => {
            if(response.data.success){
                props.history.push('/login');
            } else {
                alert('로그아웃 하는 데 실패하였습니다.');
            }
        })
    }

LandingPage.js

 

+ props 넣어주기