one-product-system-5.jsx

import styled from "@emotion/styled";

const Form = styled.form`
  display: flex;
  flex-direction: column;
`;

const FormGroup = styled.div`
  display: flex;
  flex-direction: column;
  margin: 0 0 16px;
`;

const Label = styled.label`
  font-size: 14px;
  line-height: 20px;
  color: #1a1a1a;
  letter-spacing: -0.15px;
  margin: 0;
`;

const Input = styled.input`
  box-sizing: border-box;

  height: 48px;
  margin: 2px 0 0;
  padding: 0 16px;

  border: solid 1px #e5e5e5;
  border-radius: 3px;

  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;

  color: #1a1a1a;
  background-color: white;

  &:hover {
    border: solid 1px #d7d7d7;
  }

  &:focus {
    outline: none;
    border-color: #1a1a1a;
  }

  &::placeholder {
    color: #cacaca;
  }
`;

const ResetPasswordLink = styled.a`
  display: block;
  float: left;

  font-size: 11px;
  line-height: 16px;
  letter-spacing: normal;
  color: #cacaca;

  text-decoration: none;
`;

const SignUpLink = styled.a`
  display: block;
  float: right;

  font-size: 11px;
  line-height: 16px;
  letter-spacing: normal;
  color: #cacaca;

  text-decoration: none;
`;

const SubmitButton = styled.button`
  width: 100%;
  height: 48px;
  padding: 0;
  margin: 16px 0;

  flex: initial;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;

  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.2px;

  color: white;
  background-color: #ff5600;

  border-radius: 3px;
  border: 0;
  outline: none;
`;

const EmailLoginForm = () => (
  <Form>
    <FormGroup>
      <Label htmlFor="email">이메일</Label>
      <Input type="email" name="email" placeholder="example@gmail.com" />
    </FormGroup>
    <FormGroup>
      <Label htmlFor="password">비밀번호</Label>
      <Input type="password" name="password" placeholder="********" />
    </FormGroup>
    <div>
      <ResetPasswordLink href="/reset-password">
        비밀번호를 잊으셨나요?
      </ResetPasswordLink>
      <SignUpLink href="/sign-up">회원 가입하기</SignUpLink>
    </div>
    <SubmitButton type="submit">로그인</SubmitButton>
  </Form>
);

export default EmailLoginForm;