Figma -> React 프로젝트 로그인 페이지 퍼블리싱

Figma

위 피그마 디자인을 퍼블리싱했습니다.

 

 

개발 포인트

1. input 태그의 invalid,valid,focus 효과주기

const Status = styled.div`
  height: 10px;
  width: 10px;
  background: #9d9d9d;
  border-radius: 10px;
  margin-left: 1rem;
  ${StyledInput}:invalid + & {
    background: #fe2f75;
  }

  ${StyledInput}:focus + & {
    background: #ffa689;
  }

  ${StyledInput}:valid + & {
    background: #70edb9;
  }
`;

4개의 input태그 오른쪽에 있는 빨간점이 input태그를 focus하면 주황색, input에 입력된 값이 invalid이면 빨간색, valid하면 초록색으로 변하게 퍼블리싱했습니다.

 

이외에 특별한 포인트는 없습니다.