[위코드] TIL(Today I am learned) -16

1주차 프로젝트에서 login과 signup을 구현하였다.

하지만, 애니메이션과 모달을 구현하여야 하는데, 안 써본 내용이라 고생할 듯 싶다.;;;

import React, { Component } from "react";
import "./Login.scss";

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email: "",
            pw: ""
        };
    }

    hadleValueID = (e) =>  {
        this.setState ({
            email: e.target.value,
        })
    }

    hadleValuePW = (e) => {
        this.setState ({
            pw : e.target.value
        });
    }


    // 로그인용 버튼
    hadleBtn = (e) => {
        fetch("http://10.58.5.206:8000/user/sign-in", {
            method: 'POST',
            body: JSON.stringify({
                email: this.state.email,
                password: this.state.pw
            })})
            .then(res => res.json())
            .then(res => {
                if (res.token) { 
                    localStorage.setItem('aesopToken', res.token);
                    this.props.history.push("/main")
                    console.log(res.token)
                } 
            })
        
    }
    

    // 회원가입용
    handleSignUp = (e) => {
        this.props.history.push('/Signup');
    }

  render() {
    return (
        <div className="Login">
            <div className="modalBody">
            <div className="introduceBox">
                <h2 className="loginTitle">안녕하세요.</h2>
                <div className="loginSub">유효한 이메일 주소를 입력하세요</div>
            </div>
            <div className="formText">
                <label>
                    <input onChange={this.hadleValueID} className="formTextInput" name="email" placeholder="이메일 주소"  />
                    {/* <span className="FormTextLabel">이메일 주소</span> 이부분은 애니메이션이 요구됨. 해결방안이 시급. */}
                </label>
            </div>
            <div className="formText">
                <input onChange={this.hadleValuePW} className="formTextInput" type="Password" placeholder="비밀번호"/>
            </div>
            <button onClick={this.hadleBtn} type="button" className={this.state.email.length > 5 && this.state.pw.length > 5 ? "activeBTN" : "unactiveBTN"}>
                <div className="btnContent">
                    로그인
                </div>
            </button>
            <button onClick={this.handleSignUp} type="button" className="signUpcolor">
                <div className="signUpBtn">
                    회원가입
                </div>
            </button>
        </div>
        </div>
    )
  }
}

export default Login;

Aesop은 특이하게도 아이디를 쳐야 비밀번호 입력창이 나오는데, 시안성을 따지면 별로인 것 같아서 이리 바꾸어보았다.

 

다음은 sign up 내가 만들어본 패스워드 창이다. 해당 이벤트효과에서 특이하게 다음 버튼을 클릭해야 비밀번호 일치 여부가 나오는 이벤트를 넣어서 왜 그리 짠건지 모르겠다고 생각하게 되었음.

import React, { Component } from "react";
import "./Signup.scss";

class Signup extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email : "",
            pw: "",
            pwconfirm: "",
            firstname : "",
            lastname : "",
            pwError: false
        };
    }

    hadleValueEmail = (e) => {
        this.setState ({
            email : e.target.value
        })
    }

    hadleValuePW = (e) => {
        this.setState ({
            pw : e.target.value
        })
    }

    hadleValuepwConFirm = (e) => {
        this.setState ({
            pwconfirm : e.target.value
        })

        if (e.target.value.length > 0) {
            if (e.target.value === this.state.pw) {
                this.setState({ pwError: false });
            } else {
                this.setState({ pwError: true });
            }
        }
    }

    hadleValueFirstName = (e) => {
        this.setState ({
            firstname : e.target.value
        })
    }

    hadleValueLastName = (e) => {
        this.setState ({
            lastname : e.target.value
        })
    }

    handleSingUP = (e) => {
        // e.preventDefault();
        console.log(this.state.email,this.state.pw,this.state.firstname, this.state.lastname);
        fetch("http://10.58.5.206:8000/user/sign-up", {
                method: 'POST',
                body: JSON.stringify({
                    email: this.state.email,
                    password: this.state.pw,
                    first_name: this.state.firstname,
                    last_name: this.state.lastname
                })
            })
            .then(res => res.json())
            .then(res => {
                console.log(res)
                if (res.token) {
                    localStorage.setItem("aesop", res.token)
                    alert("회원가입을 환영합니다.")
                    this.props.history.push("/Main")
                } else { 
                    alert("이메일과 비밀번호를 확인해주세요.")
                }
            })
    }

    handleHaveAccount = (e) => {
       this.props.history.push("/Login");
    }


    render() {
        return(
            <div className="Signup">
                <form className="loginForm">
                    <div className="modalheadingWrap">
                        <h2 className="modalTitle">
                            처음 만나 뵙게 되네요. 이솝에 오신 것을 환영합니다.
                        </h2>
                        <div className="modalSubTitle">
                            계정을 만들려면 아래에 세부 정보를 입력하십시오.
                        </div>
                    </div>
                    <div className="formRow">
                        <div className="formText">
                            <label>
                                <input onChange={this.hadleValueEmail} className="formTextInput" name="email" placeholder="이메일 주소" type="email" />
                                {/* <span className="FormTextlabel">이메일 주소</span> */}
                            </label>
                        </div>
                    </div>
                    <div>
                        <div className="formRow">
                            <div className="formText">
                                <label>
                                    <input onChange={this.hadleValuePW} className="formTextInput" name="password" placeholder="패스워드" type="password" />
                                    {/* <span className="FormText-label">패스워드</span> */}
                                </label>
                            </div>
                        </div>
                        <div className="formRow">
                            <div className="formText">
                                <label>
                                    <input onChange={this.hadleValuepwConFirm} className="formTextInput" name="passwordConfirm" placeholder="패스워드 확인" type="password" />
                                    <div className={this.state.pwError ? "errorMessage" : "noneErrorTextMessage"}>
                                        이전에 사용했던 패스워드를 입력하세요.
                                    </div>
                                    {/* <span className="FormText-label">패스워드 확인</span> */}
                                </label>
                            </div>
                        </div>
                        <div className="formRowbox">
                            <div className="formTextLoginName">
                                    <label>
                                        <input onChange={this.hadleValueFirstName} className="formTextInput" maxLength="100" name="firstName" placeholder="성" type="text" />
                                        {/* <span className="FormText-label">성</span> */}
                                    </label>                   
                            </div>
                            <div className="formTextLoginName">
                                    <label>
                                        <input onChange={this.hadleValueLastName} className="formTextInput" maxLength="100" name="LastName" placeholder="이름" type="text" />
                                        {/* <span className="FormText-label">이름</span> */}
                                    </label>
                            </div>
                        </div>
                    </div>
                    <button onClick={this.handleSingUP} className={this.state.email.length > 5 && this.state.pw === this.state.pwconfirm && this.state.firstname.length >= 1 && this.state.lastname.length >= 1 ? "btnSingUPActive":"btnSignUPunActive"} type="submit">
                        <div className="btnContent">
                            <span className="btnLabel">등록</span>
                        </div>
                    </button>
                    <div className="loginHaveAccount">
                        <button onClick={this.handleHaveAccount} className="loginHaveAccountBTN">
                            이솝 계정을 가지고 계십니까?
                        </button>
                    </div>
                </form>
            </div>
        )
    }
}

export default Signup;

중간에 span으로 감싼 태그들이 있다. 이 이유로는 해당 태그들이 애니메이션으로 구동되어야하기때문인 것이고, 이를 위해 미리 만들어둔 태그들이다.