SignUp

SignUp

---

1. 회원가입

회원가입 기능 구현

1.1. 유효성 검사

    // input value 값을 담아줄 state 선언한다.
    const [input, setInput] = useState({
        email: '',
        password: '',
        nickname: '',
        role: "USER"
    })

    // input name을 state와 일치 시킨 후 key로 input에 value를 value로 넣어준다.
    const handleInputChange = (e) => {
        setInput({
            ...input,
            [e.target.name]: e.target.value
        })

    // 아래 swich문의 값으로 e.target.name을 내려주고 e.target.value를 테스트한다.
        authInput(e.target.name, e.target.value)
    }

    // 유효성 검사
    // 아이디는 @, . 을 포함해야합니다.
    // 비밀번호는 영문, 숫자 조합 6글자 이상입니다.
    const authInput = (name, value) => {
        let state = false
        switch (name) {
            case "email":
                state = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/.test(value);
                break;
            case "password":
                state = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z0-9]{6,20}$/.test(value);
                break;
            case "checkPassword":
                state = value === input.password
                break;
            case "nickname":
                state = /^.{3,10}$/.test(value);
                break;
            default:
                state = true;
        }
    
    // name은 위에서 부터 내려온 e.target.name
    // name(key): state(value 유효성 검사 후 boolean)
    // 통과하면 아래 auth에 상태가 전부 true
        setAuth({
            ...auth,
            [name]: state
        });
    }

    // 유효성 검사 통과 후 상태 값
    const [auth, setAuth] = useState({
        email: false,
        password: false,
        checkPassword: false,
        nickname: false,
    })

    // 유효성 검사 통과 했을 때 회원가입 가능
    const signUp = async () => {
        if (auth.email && auth.password && auth.checkPassword && auth.nickname) {
            try {
                const newUser = {
                    email: input.email,
                    password: input.password,
                    nickname: input.nickname,
                    role: input.role
                }
                // const response = await api.post("앤드포인트", newUser)
                alert("회원가입이 완료됐습니다.")
                navigate("/signin")
            } catch (error) {
                console.log(error)
                alert('회원가입 양식에 문제가 있습니다.')
            }
        }
    }

1.2. 회원가입 state 메세지

    // massage state 를 만들어준다.
    const [focusState, setFocusState] = useState({
        email: false,
        nickname: false,
        password: false,
        checkPassword: false,
    });

    // input의 onFocus()를 이용 포커스 됐을 시 handlerFocus실행
    // 인자로 state와 동일한 input name을 가져온다.
    // focusState를 true로 재할당
    const handlerFocus = (name) => {
        setFocusState({
            ...focusState,
            [name]: true
        })
    }

    // onFBlur()를 이용 focus가 해재 됐을 시 handlerBlur 실행
    // 인자로 state와 동일한 input name을 가져온다.
    // focusState를 false로 재할당
    const handlerBlur = (name) => {
        setFocusState({
            ...focusState,
            [name]: false
        })
    }

    // massage state를 통해 state 출력
    // auth[name] 즉 유효성 검사를 통과했을 시 
    // "확인됐습니다." 출력 아니면 "형식이 올바르지 않습니다."
    // styled에 props로 focusState[name]상태를 보내 display를 제어한다.

    const message =(name) => {
        return (auth[name] ? 
        <Message focus={focusState[name]? "block": "none"}> 확인됐습니다. </Message>
        : 
        <Message focus={focusState[name]? "block": "none"}> 형식이 올바르지 않습니다. </Message>)
    }

평소에는 커스텀 훅을 만들어 state와 onChange값을 제어했는데 유효성 검사를
하나의 state를 통해 해결할 수 있을 것 같아서 이 방법을 사용해봤다.
로직을 짜면서 중요한점은 기존 state와 input name의 key를 통일 시켜
값을 대체하게 만드는 것 같다.