탭 형식의 로그인, 회원가입 폼 만들기

완성본

지금까지 2번의 프로젝트에서 로그인/ 회원가입 파트를 맡았는데 그때는 모두 로그인, 회원가입을 별도의 경로로 분리해서 만들었다. 

그런데 이리저리 구글링을 하다가 위의 gif처럼 탭 형식으로 로그인과 회원가입을 만들어보고 싶었다!

 

그래서 도전!

 

사용한 기술스택
React, Typescript, Styled-components

 

 

구현할 퀘스트

1. 로그인/회원가입 탭을 누르면 버튼이 각각 로그인, 회원가입으로 바뀐다.

2. 클릭되는 로그인/회원가입 탭을 css로 표시한다.

3. 이메일에 @, . 포함되고, 비밀번호가 8자리 이상일 때 버튼이 활성화된다. 

 

---

1. 로그인/회원가입 탭을 누르면 버튼이 각각 로그인, 회원가입으로 바뀌게 하기

탭부분과 폼부분을 나눠서 만들어서 붙이면 된다. 

그리고 로그인이 된 상태를 알 수 있는 state를 만들어서 관리한다. 

const [isLogin, setIsLogin] = useState(true);

로그인 버튼을 누르면 setIsLogin이 true가 되고, 회원가입 버튼을 누르면 setIsLogin이 false가 되도록 했다.

 

그리고 그 상태를 가지고 버튼에서도 isLogin이 true면 '로그인' 글자가,  false면 '회원가입' 글자가 나오게 했다. 

 

 

---

 

2. 클릭되는 로그인/회원가입 탭을 css로 표시한다.

styled-component로 작업하면 props값을 받아서 스타일을 유동적으로 조절할 수 있다!

여기서는 isLogin 상태에 따라 색이 변하면 되니까 isLogin을 props로 받아왔다. 

 

const AuthTab = styled.div<{ isLogin: boolean }>`
  width: 300px;
  display: flex;

  button {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* border-top: 1px solid gray; */
    box-shadow: rgba(50, 50, 93, 0.25) 1px 2px 5px -1px,
      rgba(0, 0, 0, 0.3) -1px 1px 3px -1px;
    border: 0;
    border-bottom: 0;
    background-color: transparent;
    padding: 10px 30px;
    flex-basis: 50%;
    cursor: pointer;
  }

  & > button:first-child {
    background-color: ${({ isLogin }) => (isLogin ? "#5586eb" : "inherit")};
    color: ${({ isLogin }) => (isLogin ? "#ffffff" : "#000000")};
  }
  & > button:last-child {
    background-color: ${({ isLogin }) => (isLogin ? "inherit" : "#5586eb")};
    color: ${({ isLogin }) => (isLogin ? "#000000" : "#ffffff")};
  }
`;

 

 

---

 

3. 이메일에 @, . 포함되고, 비밀번호가 8자리 이상일 때 버튼이 활성화된다. 

이 부분을 해결하기 위해서는 input에 onKeyUp 이벤트를 활용하면 된다. 

input의 value 값을 잘 들여다 보고 있다가, 이메일에 @, . 포함되고, 비밀번호가 8자리 이상일 때 버튼이 활성화되도록 css 처리를 해준다. 

 

이를 위해서 isActive라고 먼저 상태를 선언해준다. 

const [isActive, setIsActive] = useState<boolean>(false);

그리고 input에는 onKeyUp 이벤트를 이용해서 changeButton이라는 함수를 만들었다. 

const changeButton = () => {
    email.includes("@") && password.length >= 8
      ? setIsActive(true)
      : setIsActive(false);
  };

 

그리고 버튼에 css 효과를 주기 위해서 isActive 가 true인지, false인지에 따라 css를 달리한다. 

 <button className={isActive ? "Active" : "Disabled"}>
          {isLogin ? "로그인" : "회원가입"}
</button>

---

해보고 싶었는데 해내서 기쁘다!!

---

전체 코드

import React, { useState } from "react";
import styled from "styled-components";

const Auth = () => {
  const [isLogin, setIsLogin] = useState(true);
  const [email, setEmail] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const [isActive, setIsActive] = useState<boolean>(false);

  const changeButton = () => {
    email.includes("@") && password.length >= 8
      ? setIsActive(true)
      : setIsActive(false);
  };

  return (
    <Container>
      <AuthTab isLogin={isLogin}>
        <button type='button' onClick={() => setIsLogin(true)}>
          로그인
        </button>
        <button type='button' onClick={() => setIsLogin(false)}>
          회원가입
        </button>
      </AuthTab>

      <AuthForm>
        <InputInfo>
          <Input
            type='email'
            id='id'
            placeholder='
            EMAIL'
            required
            value={email}
            onKeyUp={changeButton}
            onChange={(e) => {
              setEmail(e.target.value);
            }}
          ></Input>

          <Input
            type='password'
            id='password'
            placeholder='PASSWORD'
            required
            value={password}
            onKeyUp={changeButton}
            onChange={(e) => {
              setPassword(e.target.value);
            }}
          ></Input>
        </InputInfo>

        <button className={isActive ? "Active" : "Disabled"}>
          {isLogin ? "로그인" : "회원가입"}
        </button>
      </AuthForm>
    </Container>
  );
};

export default Auth;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
`;
const AuthTab = styled.div<{ isLogin: boolean }>`
  width: 300px;
  display: flex;

  button {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* border-top: 1px solid gray; */
    box-shadow: rgba(50, 50, 93, 0.25) 1px 2px 5px -1px,
      rgba(0, 0, 0, 0.3) -1px 1px 3px -1px;
    border: 0;
    border-bottom: 0;
    background-color: transparent;
    padding: 10px 30px;
    flex-basis: 50%;
    cursor: pointer;
  }

  & > button:first-child {
    background-color: ${({ isLogin }) => (isLogin ? "#5586eb" : "inherit")};
    color: ${({ isLogin }) => (isLogin ? "#ffffff" : "#000000")};
  }
  & > button:last-child {
    background-color: ${({ isLogin }) => (isLogin ? "inherit" : "#5586eb")};
    color: ${({ isLogin }) => (isLogin ? "#000000" : "#ffffff")};
  }
`;

const AuthForm = styled.form`
  /* border: 1px solid gray; */
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;

  button {
    margin: 10px 0px;
    background-color: transparent;
    border: 1px solid #81a4ea;
    padding: 10px;
    width: 88%;
    border-radius: 10px;
  }

  .Disabled {
    background-color: inherit;
  }
  .Active {
    background-color: #5586eb;
    color: white;
  }
`;

const InputInfo = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
`;
const Input = styled.input`
  padding: 10px;
  margin: 10px 0px;
  width: 80%;
  border: 1px solid lightblue;
  border-radius: 10px;
`;