22/07/20 [모각코] 1일차

일년만에 돌아온 모각코입니다. 오늘은 네캔만원 프로젝트 메인 표지화면을 만들었습니다.

react를 사용한 페이지이고 styled-component를 사용했습니다.

일단 웹페이지는 모바일 친화적으로 만들었습니다. 나중에는 아예 모바일 앱을 만들어보고 싶은 생각도 있네요.

react hook 중 useEffect를 사용해서 2초간 로고화면이 나오도록 설정했습니다.

loadingTimer가 false로 바뀌면 삼항연산자를 사용해서 로그인화면이 나오게 했습니다.

useEffect(() => {
    const timer = setTimeout(() => {
      setLoadingTimer(false);
    }, 2000);

메인 로고 화면

2초가 지나면 로그인화면이 자동으로 나오게 되며 여기서 회원가입 버튼을 누르면 회원가입 페이지로 이동합니다. 저는 하나의 url에서 로그인과 회원가입을 하게 만들고 싶었습니다.  styled-component는 css in js이고 props 통해 값을 받을수 있습니다. 이를 이용하여 loginState를 styled-component로 보내주어 버튼을 눌렀을때 loginState값이 바뀌게 만들고 값이 바뀌면 버튼색이 바뀌도록 만들었습니다.

//Login.jsx
<LoginImg src="/img/logo.png" />
          <LoginBox>
            <LoginSignUpButton
              onClick={signUpButtonOnClick}
              loginState={loginState}
            >
              회원가입
            </LoginSignUpButton>
            <LoginLoginButton
              onClick={loginButtonOnClick}
              loginState={loginState}
            >
              로그인
            </LoginLoginButton>

//styledComponent.js
export const LoginSignUpButton = styled.button`
  width: 50%;
  height: 2rem;
  background-color: white;
  color: ${(props) =>
    props.loginState ? "rgb(113 112 112)" : "rgb(111 232 151)"};
  border: none;
  border-bottom: 3px solid
    ${(props) => (props.loginState ? "rgb(113 112 112)" : "rgb(111 232 151)")};
  margin-bottom: 2rem;
  font-size: 15px;
`;

export const LoginLoginButton = styled.button`
  width: 50%;
  height: 2rem;
  background-color: white;
  color: ${(props) =>
    props.loginState ? "rgb(111 232 151)" : "rgb(113 112 112)"};
  border: none;
  border-bottom: 3px solid
    ${(props) => (props.loginState ? "rgb(111 232 151)" : "rgb(113 112 112)")};
  font-size: 15px;
`;

로그인 화면

 

회원가입 페이지 (아직 미완성)

연습삼아 만들 페이지이지만 재밌었습니다. 처음 써보는 styled-component였는데 참 흥미롭네요 나중에 다시 한번 써봐야겠습니다.