[심화 프로젝트] Armchair Debate - firebase로 회원가입 만들기 (2일차)

먼저 회원가입 UI를 만들어줬다.

회원가입

 

저장할 4가지 정보를 하나의 useState로 만들었다.

  // 회원가입 정보
  const [signupDatas, setSignupDatas] = useState({
    email: "",
    nickname: "",
    password: "",
    passwordConfirm: "",
  });

  // email, nickname, password, passwordConfirm
  const handleChange = (e) => {
    e.preventDefault();

    setSignupDatas((signupData) => {
      return {
        ...signupData,
        [e.target.name]: e.target.value,
      };
    });
  };

 

 

firebase 연동

1. env 파일 만들기
2. gitignore에 env 파일 추가하기
3. firebase 파일 생성
4. firebase api key 넣어주기

 

redux store 만들기

1. Slice 파일 생성 ➡️ initailState 와 reducers 만들어주기 
2. configStore 파일 생성 ➡️ reducers 가져오기 ➡️ export

 

회원가입 유효성 검사 만들기

    if (!signupDatas.email) {
      alert("이메일을 입력해주세요.");
      return;
    }
    if (!signupDatas.nickname) {
      alert("닉네임을 입력해주세요.");
      return;
    }
    if (signupDatas.password.length < 6) {
      alert("비밀번호는 6자리 이상이어야 합니다.");
      return;
    }
    if (!signupDatas.password || !signupDatas.passwordConfirm) {
      alert("비밀번호 또는 비밀번호 확인을 확인해주세요.");
      return;
    }

    if (signupDatas.password !== signupDatas.passwordConfirm) {
      alert("비밀번호가 일치하지 않습니다.");
      return;
    }

 

 

회원가입 시 홈화면에 닉네임 뜨게하기

//<signup.jsx>
      await updateProfile(userCredential.user, {
        displayName: signupDatas.nickname,
      });
//-------------------------------------------------------------

//<layout.jsx>
   // 사용자 인증 정보 변화 감지
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (user) {
        dispatch(signupSuccess(user.displayName));
      }
    });
    return () => unsubscribe();
    // 컴포넌트가 언마운트될 때 observer를 해제
  }, [dispatch])
//--------------------------------------------------------------

//<signup.js>
  const initialState = {
  isSignupSuccess: false,
  displayName: "",
};

const signup = createSlice({
  name: "signup",
  initialState,
  reducers: {
    signupSuccess: (state, action) => {
      state.isSignupSuccess = true;
      state.displayName = action.payload;
    },
    logout: (state) => {
      state.isSignupSuccess = false;
    },
  },
});

 

---

문제점 

회원가입 시 홈화면에 닉네임 보여야하는데 가입한 이메일이 보인다. 

분명 displayNickname으로 보이도록 코드를 수정했는데도 이메일이 뜨는 문제가 있었다.

이메일의 코드 흐름을 계속 보다가 dispatch 부분에서 닉네임이 아니라 이메일을 보내주고 있는 것을 발견했다.

dispatch에서 닉네임을 보내주는 것으로 바꾸고 해결했다.

      // 회원가입 성공 시 사용자 닉네임을 redux 상태에 저장
      dispatch(signupSuccess(signupDatas.nickname));

 

---

느낀점

닉네임을 추가하는 작업을 처음이었다. 그래서 더 헤매인 것도 있었지만, 재밌었다.

코드의 흐름을 보면서 코드를 이해할 수 있었던 시간이었던 것 같다.