TIL

2024/06/01 TIL 로컬스토리지로 로그인/회원가입 구현하기

고래고래00 2024. 6. 3. 21:49

임시로 로컬스토리지로 회원가입/로그인 기능 구현

팀프로젝트 회원가입 부분

// 로컬스토리지에서 users를 불러오기
    // 만약 users가 존재하지 않는다면 빈배열
    const loadUsers = () => {
        const loadedUsers = JSON.parse(localStorage.getItem("users"));
        if (loadedUsers) {
            return loadedUsers;
        }
        if (!loadedUsers) {
            return [];
        }
    };
const handleSubmitSignUpForm = (event) => {
        event.preventDefault();
        setIsEmailValid(true);
        setIsPasswordValid(true);
        setIsPasswordConfirmValid(true);
        setIsNickNameValid(true);


        // 유효성 검사
        // 실패 시 설정한 문구가 인풋 아래에 나타남
        if (!email.trim()) {
            setEmailSpanMessage("이메일을 입력해주세요!");
            return setIsEmailValid(false);
        }
        if (password.trim().length < 8) {
            return setIsPasswordValid(false);
        }
        if (password.trim() !== passwordConfirm.trim()) {
            return setIsPasswordConfirmValid(false);
        }
        if (!nickName.trim()) {
            setNickNameSpanMessage("닉네임을 입력해주세요!");
            return setIsNickNameValid(false);
        }

        const newUser = {
            email,
            password,
            nickName,
        };

        // 이메일과 닉네임은 유니크한 값으로 정했으므로
        // 입력한 이메일과 기존에 저장되어있던 이메일 검사
        const prevUserEmail = loadUsers().find(user => user.email === newUser.email);
        if (prevUserEmail) {
            setEmailSpanMessage("이미 존재하는 이메일입니다!");
            return setIsEmailValid(false);
        }

        // 입력한 닉네임과 기존에 저장되어있던 닉네임 검사
        const prevUserNickName = loadUsers().find(user => user.nickName === newUser.nickName);
        if (prevUserNickName) {
            setNickNameSpanMessage("이미 존재하는 닉네임입니다!");
            return setIsNickNameValid(false);
        }

        setUsers(prevUsers => [...prevUsers, newUser]);

        setEmail("");
        setPassword("");
        setPasswordConfirm("");
        setNickName("");

        // 회원가입 성공하면 로그인 페이지로 이동하도록 나중에 구현
        alert(`${nickName}님 환영합니다!`);
    };
// users가 변경될 때 마다(추가되거나 삭제) 로컬스토리지에 저장
    useEffect(() => {
        localStorage.setItem("users", JSON.stringify(users))
    }, [users])

 

로그인 부분

const handleSubmitLoginForm = (event) => {
        event.preventDefault();
        setIsEmailValid(true);
        setIsPasswordValid(true);

        const loadedUsers = JSON.parse(localStorage.getItem("users"));
        const validUser = loadedUsers.find(user => user.email === email);

        // 해당 이메일의 user가 있는지 검사
        // 없다면 확인 span이 나타남
        if (!validUser) {
            return setIsEmailValid(false);
        }
        // user의 비밀번호가 일치하는지 검사
        // 일치하지 않는다면 확인 span이 나타남
        if (validUser.password !== password) {
            return setIsPasswordValid(false);
        }
        // 로그인 성공
        alert(`${validUser.nickName}님 반갑습니다!`);
    };