영화앱4: 프로필 생성 페이지 디자인하기

기존에 프로필 생성에 쓰인 템플릿은 하보니 PHP의 이것인데, 다소 무겁지만 로그인, 회원가입, 프로필생성 모두에 쓰였다. 이번엔 로그인, 회원가입이 없이 프로필만 생성하면 되니 새로운 폼으로 변경하고자 한다.

EPIC BOOTSTRAP의 Login Form Dark가 디자인이 잘 어울릴 것 같아서 선택했다. 해당 폼에 부트스트랩 Floating Labels를 적용하면 세련될 것 같다.

해당 폼을 긁어와서

            <div className="form-group">
              <input
                className="form-control"
                type="email"
                name="email"
                placeholder="Email"
              />
            </div>

최대 넓이를 넓혀주고

const StyledForm = styled.div`
  .login-dark form {
    max-width: 900px;
  }
`

Floating Labels를 적용해주고

form group을 form floating으로
            <div className="form-floating">
              <input
                className="form-control"
                type="email"
                name="email"
                placeholder="Email"
              />
라벨을 추가해주고
              <label htmlFor="floatingInput">Email address</label>
            </div>

레이블에 트랜지션을 넣어주면

const StyledForm = styled.div`
  label {
    transition: 0.1s;
  }
  .login-dark form {
    max-width: 900px;
  }

예쁜 폼이 완성된다.

여기에 몇가지 CSS들을 더하고,
앞서 만든 랜딩페이지와 이어지는 느낌으로 위로 올라오는 애니메이션을 넣으면,

적당히 예쁜 프로필이 완성된다.

이 이후부터는 서버와 통신하며 진행해야 한다.

1. 닉네임 중복검사 하기
2. 인생영화 검색하기
3. form 무결성을 체크하고 새로운 프로파일 작성하기
   (프로필 사진 업로드 하는 경우엔 velog.io/@gay0ung/리액트로-이미지-업로드-미리보기 참고하기)