[트위터 클론코딩 챌랜지] 계정 생성 및 간단한css_07

이제 create-account 를 완성할 차례입니다.

Wrapper로 감싼 후 Form을 만들고 그 속에 input을 작성합니다. 이름, 이메일, 비밀번호가 필요하고 계정생성 버튼이 필요합니다.
위 사진과 같이 작성을 합니다.

결과를 확인해보면 이쁘진 않지만 그럴듯한 결과가 완성되었습니다.
받아온 값들을 저장하기위해 useState를 사용할겁니다.

각 Input에 value값을 넣어서 연결해줍니다. 이제 onChange Listener를 사용합니다.
name에 값이 들어오면 setName 새로운 값을 업데이트 합니다.
마찬가지로 각 Input에 onChange를 적용해줍니다.
결과 확인을 위해 onSubmit을 작성해주고 Form에 적용해줍니다. 이때, 동작방지를 위해 e.preventDefault();를 추가해줍니다.
페이지로 돌아가서 값을 입력하고 생성해보면

작성된 값이 출력되는 것을 확인할 수 있습니다.

이제 우리는 계정생성 버튼을 누르면
1. 계정을 생성한다.
2. 사용자 프로필 이름을 설정한다.
3. 홈페이지로 리다이렉션 한다.
위 3가지의 과정을 만들겁니다.

submit에 value로 삼항연산자를 넣어줍니다.

그 전에 지금 계정 생성화면이 굉장히 못생겼으니 기본적인 디자인을 적용할겁니다.

css적용이기 때문에 개성에 따라 다르게 해도 됩니다. 결과를 확인해봅시다.

괜찮게 나왔지만 왼쪽으로 치우쳐 있기때문에 justify-content를 사용해서 중앙으로 보내줄겁니다. 
App.tsx로 가서 Wrapper를 정의해줍시다.

어느정도 각이 잡혔습니다.
그리고 잘못입력하면 create Account 버튼 아래에 Error가 떠야하니 적용하러 갑시다.
Form 아래에 error 삼항연산자를 넣어주고

error를 정의해주면 됩니다.