24.2.6 회원 인증 에러 처리하기

    회원 인증에서 중요한 기능은 거의 구현했습니다. 이제 요청이 실패했을 때 에러 메시지를 보여 주는 UI를 준비해 봅시다.

    먼저 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 ErrorMessage = styled.div`
      color: red;
      text-align: center;
      font-size: 0.875rem;
      margin-top: 1rem;
    `;
    
    const AuthForm = ({ type, form, onChange, onSubmit }) => {
      const text = textMap[type];
      return (
        <AuthFormBlock>
          <h3>{text}</h3>
          <form onSubmit={onSubmit}>
            <StyledInput
              autoComplete="username"
              name="username"
              placeholder="아이디"
              onChange={onChange}
              value={form.username}
            />
            <StyledInput
              autoComplete="new-password"
              name="password"
              placeholder="비밀번호"
              type="password"
              onChange={onChange}
              value={form.password}
            />
            {type = = = 'register' && (
              <StyledInput
                autoComplete="new-password"
                name="passwordConfirm"
                placeholder="비밀번호 확인"
                type="password"
                onChange={onChange}
                value={form.passwordConfirm}
              />
            )}
            <ErrorMessage>에러 발생!</ErrorMessage>
            <ButtonWithMarginTop cyan fullWidth style={{ marginTop: '1rem' }}>
              {text}
            </ButtonWithMarginTop>
          </form>
          <Footer>
            {type = = = 'login' ? (
              <Link to="/register">회원가입</Link>
            ) : (
              <Link to="/login">로그인</Link>
            )}
          </Footer>
        </AuthFormBlock>
      );
    };
    
    export default AuthForm;

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