24.2.1.2 AuthForm 완성하기

    이번에는 AuthForm 컴포넌트를 구성하겠습니다.

    components/auth/AuthForm.js

    import React from 'react';
    import styled from 'styled-components';
    import { Link } from 'react-router-dom';
    import palette from '../../lib/styles/palette';
    import Button from '../common/Button';
    
    /**
     * 회원가입 또는 로그인 폼을 보여 줍니다.
     */
    
    const AuthFormBlock = styled.div`
      h3 {
        margin: 0;
        color: ${palette.gray[8]};
        margin-bottom: 1rem;
      }
    `;
    
    /**
     * 스타일링된 input
     */
    const StyledInput = styled.input`
      font-size: 1rem;
      border: none;
      border-bottom: 1px solid ${palette.gray[5]};
      padding-bottom: 0.5rem;
      outline: none;
      width: 100%;
      &:focus {
        color: $oc-teal-7;
        border-bottom: 1px solid ${palette.gray[7]};
      }
      & + & {
        margin-top: 1rem;
      }
    `;
    
    /**
     *  하단에 로그인 혹은 회원가입 링크를 보여 
     */
    const Footer = styled.div`
      margin-top: 2rem;
      text-align: right;
      a {
        color: ${palette.gray[6]};
        text-decoration: underline;
        &:hover {
          color: ${palette.gray[9]};
        }
      }
    `;
    
    const AuthForm = () => {
      return (
        <AuthFormBlock>
          <h3>로그인</h3>
          <form>
            <StyledInput autoComplete="username" name="username" placeholder="아이디" />
            <StyledInput 
              autoComplete="new-password" 
              name="password" 
              placeholder="비밀번호" 
              type="password" 
            />
            <Button>로그인</Button>
          </form>
          <Footer>
            <Link to="/register">회원가입</Link>
          </Footer>
        </AuthFormBlock>
      );
    };
    
    export default AuthForm;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.