[React/GraphQL/Prisma] 로그인 만들기 #5.FrontEnd 로그인,회원가입 화면

 

진짜 네이버로 들어가서 전체적인 부분을 확인한다

일단은 크게 로그인화면과 회원가입화면을 나눈다

 

전에 라우트 확인용으로 만들어둔 Auth.js를 삭제하고 Login.js 와 SignUp.js를 만든다

로그인 화면과 회원가입화면을 만들면 된다

화면이 두개로 늘어났으니 Routes.js의 구성도 바꿔줘야한다 LogOut에는 Auth.js 만 있었지만 이제

Login 과 SignUp을 넣어준다 주소는 로그인은 기본주소이고 회원가입의 주소는 signup으로 설정해 준다

다시 진짜네이버로 와서 어떤 componet가 필요한지 확인한다 

로그인 화면이나 회원가입화면은 간단하게 title 과 input, button 으로 구성되어있다

만들어야 할 componet를 확인했으니 만들어준다

AuthButton.js 과 AuthInput.js Title만 있으면 로그인 화면이든 회원가입 화면이든 만들 수 있다

이유는 없지만 먼저 AuthInput을 만들것이다

AuthInput.js에는 React는 당연히 불러와야하고 디자인하는 styld와 인자의 타입을 정하는 PropTypes를 불러온다

이제 디자인을 해야 하니 진짜 네이버로 가서 css를 본다

검사 버튼을 눌러서 스크린샷 오른쪽 위에처럼 생긴 버튼을 누르고 input 누르면 스타일을 볼수있다

오른쪽 검사창에 더 자세히 나온것을 볼 수 있다

다른것은 모르겠고 border이 필요하다

AuthInput에 넣을 Input은 이렇게 디자인한다 width를 지정하지 않는 이유는 로그인화면에서 지정할 것이기 때문이다

padding을 넣은 이유는 작성할때 칸을 띄우기 위함이다

placeholder를 받고 value랑 onChange는 이제 만들 useInput.js에서 제공할 것이다 type 은 디폴트값으로 "text"를 넣어준다

propTypes로 타입을 정해주고 export default로 내보내준다 그래야 불러올수있으니

AuthInput 뿐만 아니라 다른곳에서 input 사용하는 일을 무지하게 많을텐데 리액트 useState를 이용해 useInput hook을 만들어 두면 편하게 쓸 수있다 src 안에 hooks폴더를 만들고 useinput.js를 만든다

useInput.js는 이런식으로 만들어 준다 useState를 사용해서 value와 setValue를 설정해주고 onChange도 만들어 준다 onChange는 event 인자를 가지고 오는데 onSubmit 같은것도 마찬가지이다

 

여기서 e.target 을 console.log로 찍어보면 console 창에 이렇게 나온다

onChange는 e.target안에 value를 setValue로 계속 바꿔주는 것이다

이제 화면에서 useInput을 가져다가 사용할 수 있다

다음으로 title을 만든다

불러오는 것들은 위에 AuthInput과 동일하다

디자인은 이런식으로 하는데 font-family는 저 글씨체가 가장 NAVER와 비슷하다

title은 AuthInput 보다 쉽다 title만 받기만 하면 된다

여기서 더 간단하게 하는법은 title도 없애고 바로 never로 적어준다 그렇게 하면 propTypes도 필요없다

남은 AuthButton을 만든다 Button의 디자인은 width를 설정해준다 그래야지 AuthInput의 width도 따라온다

AuthButton도 간단하게 설정이 가능하다 가운데 text부분을 받고 onClick도 받아도 되지만 여기서는 쓰지 않는다 

form에서 onSubmit으로 대체 할것이기 때문이다

필요한 componet들을 다 만들었다 이것들을 다 합쳐서 login.js 와 SignUp.js를 완성하면 된다

 

처음으로 전체페이지를 지정해 준다 전체페이지의 이름은 Wrapper로 했지만 다른이름으로 설정해도 상관없다 form은 input과 button이 들어갈 곳이다 세로로 정렬해 줘야 하기때문에 위와 같이 설정한다

로그인 부분을 설정하기 위해 Container로 다시 감싸주었다 width를 설정하지 않았다 button에서 설정해 주었기 때문에 자동으로 늘어난다

Text는 아래에 회원가입 버튼이다 아이디찾기와 비빌번호 찾기는 넣어도 상관없지만 backend에서 만들지 않았기 때문에 무시한다

Login.js를 만들기 전에 불러온다 나머지 불러올 것들은 작성하다 보면 vsc가 자동으로 불러온다

export default로 바로 내보내주는 형식으로 한다 

로그인 input은 총 2개의 input 회원가입의 input은 총 4개의 input이 필요하다

로그인에는 idInput과 passInput을 아까 만든 useInput으로 만들어 준다

위에서 부터 하나씩 설명하자면

Wrapper안에 Container안에 Title과 form ,Link를 넣어준다

form안에는 당연히 AuthInput 2개와 AuthButton이 들어간다

onSubmit은 다음 포스팅에서 만들 것이다 이대로 실행하면 오류가 나오기 때문에 오류를 막기위해 onSubmit은 지운다

AuthInput은 placeholder, value, onChange, type을 받는데 id를 받는곳은 type이 필요없고 idInput은 useInput일 제공하는 onChange와 value를 가져오면 되기때문에 따로넣어주는 것보다 전개연산자인 ...을 활용해서 {...idInput} 이런식으로 하면 쉽게 들어간다

비밀번호는 type에 "password"를 해주면 비밀번호 입력이다

아래에 회원가입 Link는 라우트에서 불러오는 것인데 <Lin 정도 치면 vsc가 자동으로 불러온다

Link가 밑줄이 나오기 때문에 textDecoration을 none으로 설정한다 to는 경로 Routes.js 에서 설정한 signup으로 해준다

yarn start로 확인하면 이렇게 나온다

언뜻보면 네이버지만 네버다

회원가입도 로그인과 별반 다른게 없다 onSubmit이 다르겠지만 onSubmit은 다음 글에서 다루겠지만

onSubmit이 모든것을 한다 

디자인은 로그인을 복붙에서  input은 총 네개로 위에처럼 설정해주고 버튼은 로그인에서 가입하기로 바꿔주면 된다

회원가입버튼을 누르면 여기는 진짜 네이버랑 안비슷하긴 하지만 네이버 느낌은 난다

 

다음에는 form의 onSubmit을 완성하고 gql을 사용해서 mutation을 가져와 onSubmit안에 로그인하는 작업과 회원가입하는 작업을 하겠다