Fanletter Develop

---

💡LoginForm

로그인 페이지 요구 사항

1) Login.jsx 에서 로그인과 회원가입 UI를 모두 만들어주세요.
2) 로그인창에서는 회원가입 버튼을 클릭하면 회원가입창으로, 회원가입창에서는 로그인 버튼을 누르면 로그인창으로 토글링 되도록 구현해 보세요.
3) 아이디는 4~10글자로, 비밀번호는 4~15글자로, 닉네임은 1~10글자로 제한하세요.
4) (선택) 로그인화면에서는 아이디, 비밀번호에 입력값이 모두 있을 경우에만 로그인 버튼이 활성화되도록 하고, 회원가입화면에서는 아이디, 비밀번호, 닉네임에 입력값이 있을 경우에만 회원가입 버튼이 활성화되도록 해보세요.
5) redux 모듈로 authSlice.js 를 만들고 로그인 상태를 전역 상태로 관리하도록 하세요.
6) 로그인 성공했을 경우, 로그인 상태를 변경시켜 홈화면을 이동되도록 해야합니다.
(Router.jsx 수정)
7) 회원가입에 성공하면 로그인 모드로 전환해 주세요.
8) (선택) 로그인 성공이나 회원가입 성공 시 브라우저 alert 대신 react-toastify 라이브러리를 사용해서 구현해 보세요.

   <Container>
      <LoginTitle>{isLoginMode ? "로그인" : "회원가입"}</LoginTitle>
      <LoginContainer onSubmit={onSubmitForm}>
        <EmailInputBox>
          <label>ID</label>
          <input
            type="text"
            name="id"
            placeholder="아이디 (4~10글자)"
            minLength={4}
            maxLength={10}
            required
            onChange={onChangeInput}
            value={id}
          />
        </EmailInputBox>
        <PasswordInputBox>
          <label>PW</label>
          <input
            type="password"
            name="password"
            placeholder="비밀번호 (4~15글자)"
            minLength={4}
            maxLength={15}
            required
            onChange={onChangeInput}
            value={password}
          />
        </PasswordInputBox>
        {!isLoginMode && (
          <NickNameInputBox>
            <label>Nickname</label>
            <input
              type="text"
              name="nickname"
              value={nickname}
              onChange={onChangeInput}
              minLength={1}
              maxLength={10}
              placeholder="닉네임 (1~10글자)"
              required
            />
          </NickNameInputBox>
        )}
        <LoginNRegisterBox>
          <Button
            text={isLoginMode ? "로그인" : "회원가입"}
            disabled={
              isLoginMode ? !id || !password : !id || !password || !nickname
            }
            size="large"
          ></Button>
          <CreateAccountButton onClick={() => setIsLoginMode((prev) => !prev)}>
            {isLoginMode ? "회원가입" : "로그인"}
          </CreateAccountButton>
        </LoginNRegisterBox>
      </LoginContainer>
    </Container>
  );
};

로그인 UI 구성을 하고 useState 를 사용해서 로그인창과 회원가입창에 따라서 버튼이 달라지도록 구성했다. input 에는 minLength, maxLength 를 사용해서 최소 글자수와 최대 글자수를 설정했다.

const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    login: (state, action) => {
      state.isLogin = true;
    },
    logout: (state, action) => {
      state.isLogin = false;
    },
  },
  
  
// Router.jsx
    const isLogin = useSelector((state) => state.auth.isLogin)

	<Routes>
        {isLogin ? (
          <Route element={<Layout />}>
            <Route path="/" element={<Home />} />
            <Route path="/detail/:id" element={<Detail />} />
            <Route path="/myprofile" element={<MyProfile />} />
            <Route path="*" element={<Navigate replace to="/" />} />
          </Route>

const onSubmitForm = async (e) => {
    e.preventDefault();
    console.log("제출");
    if (isLoginMode) {
      dispatch(login());
      alert("로그인성공")
    } else {
      // 회원가입
      setIsLoginMode(true);
      alert("회원가입 성공");
    }
  };

authSlice.js 를 만들어서 로그인 상태를 전역관리 하고 Router 에서 로그인 상태를 가져와서 isLogin 이 true 일 경우 가장 첫번째 Route 인 Home 으로 이동된다. onSubmitForm 에 회원가입 됐을 때 setIsLoginMode 를 true 로 바꿔주면서 로그인모드가 바뀐다.