Login UI with Component(2), FontAwesomeIcon, routes

위에서 만든 Login UI component들을 Login.js page에 적용함
FontAwesomeIcon을 사용해서 인스타 아이콘 및 다양한 icon을 사용함.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faApple, faInstagram } from '@fortawesome/free-brands-svg-icons'


const FacebookLogin = styled.div`
  color: #385285;
  span {
    margin-left: 10px;
    font-weight: 600;
  }
`~~~~

중간생략^^

  return (
    <AuthLayout>
      <PageTitle title="Login" />
      <FormBox>
        <div>
          <FontAwesomeIcon icon={faInstagram} size="3x" />
          //FontAwesomeIcon 시용법 숙지할 것!!!
          
        </div>
        <span style={{ color: 'red', textDecoration: 'underline' }}>
        //바로 style을 입하는 방법 참고할 것!!
        
          {location?.state?.message}
        </span>
        <form onSubmit={handleSubmit(onValid)}>
          <Input
            {...register('username', { required: true, minLength: 5 })}
            type="text"
            placeholder="username"
          />
          {errors.username && (
            <span style={{ color: 'red', margin: '5px', fontSize: '12px' }}>
              This field is required and minLength is five!!
            </span>
          )}
          <Input
            {...register('password', { required: true, minLength: 5 })}
            type="password"
            placeholder="password"
          />
          {errors.pasword && (
            <span style={{ color: 'red', margin: '5px', fontSize: '12px' }}>
              This field is required and minLength is five!!
            </span>
          )}
          <Button type="submit" value="Log in" />
          //type이 submit일때 placeholder가 아닌 value로 주는 것 확인.
        </form>
        <Separator />
        <FacebookLogin>
          <FontAwesomeIcon icon={faApple} size="2x" />
          <span>Login in with AppleStore</span>
        </FacebookLogin>
      </FormBox>
      <BottomBox
        cta="Don't have an account?"
        linkText="Sign up"
        link={routes.signUp}
        //BottomBox에 props들을 보내는 방법 숙지할 것!!!!!
      />
    </AuthLayout>
  )
}

2. src/routes.js

const routes = {
  home: '/',
  signUp: '/sign-up',
}

export default routes

따로 빼서 관리함..