[React] 투두리스트 로그인 구현하기1

안녕하세요!

 

주말동안 갑자기 열이 나서 아무것도 못했습니다,,

오늘은 회원가입 페이지의 간단한 UI부분을 만들고

 

백엔드 쪽도 공부해서

 

로그인 기능까지 차근차근 구현해 보도록 하겠습니다.

 

베이스는 기존 투두리스트 웹을 이용하여 진행할 예정입니다.

 

기존 TodoTemplate을 이용하면 될 것 같습니다.

 

import React from 'react';
import styled from 'styled-components';

const TodoTemplateBlock = styled.div`
  width: 512px;
  height: 768px;

  position: relative; /* 추후 박스 하단에 추가 버튼을 위치시키기 위한 설정 */
  background: white;
  border-radius: 16px;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04);

  margin: 0 auto; /* 페이지 중앙에 나타나도록 설정 */

  margin-top: 96px;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
`;

function TodoTemplate({ children }) {
  return <TodoTemplateBlock>{children}</TodoTemplateBlock>;
}

export default TodoTemplate;

 

기존 TodoTemplate입니다.

 

여기에 

align-items: center;

justify-content: center;

 

두 줄의 코드만 추가해서 로그인 요소들이 가운데 오도록 만들겠습니다.

 

회원가입 할 때 필요한 요소는

 

이메일과 패스워드, 비밀번호 확인 정도가 있겠네요.

function TodoTemplate() {

const[Email,setEmail] = useState("")

const[Password,setPassword] = useState("")

const[ConfirmPassword,setConfirmPassword] = useState("")

const onEmailHandler = (event) =>{

  setEmail(event.currentTarget.value)

}

const onPasswordHandler = (event) =>{

  setPassword(event.currentTarget.value)

}

const onConfirmPasswordHandler = (event) =>{

  setConfirmPassword(event.currentTarget.value)

}

const onSubmitHandler = (event) =>{

  event.preventDefalt();

}

 

 

나중에 이용할 함수지만 요소들을 useState를 이용해서 만들고

 

각각 상태를 업데이트할 수 있는 Handler함수도 만들어 줍니다.

 

onSubmitHandler는 페이지의 새로고침을 방지해줍니다.

 

return <TodoTemplateBlock>

 <form style = {{display:'flex', flexDirection : 'column'}

 }

  onSubmit = {onSubmitHandler}

  >

  <label>Email</label>

  <input type = "email" value = {Email} onChange = {onEmailHandler}/>

  <label>Password</label>

  <input type = "Password" value = {Password} onChange = {onPasswordHandler}/>

  <label>ConfirmPassword</label>

  <input type = "Password" value = {ConfirmPassword} onChange = {onConfirmPasswordHandler}/>

  </form>

  </TodoTemplateBlock>;

 

form 태그를 이용해서 각 요소들에 스타일 속성을 부여합니다.

 

그리고 label태그와 input태그를 이용해서 각 요소들을 만들어 줍니다.

 

회원가입 페이지

 

여기서 비밀번호 확인부분만 제거하면 로그인 페이지가 될 것 같습니다.

 

다음은 각 요소들에 기능을 부여할 차례입니다.

 

오늘 원래 기능까지 구현해 보려 했는데

 

시간이 부족할 것 같네요.

 

다음 시간에 뵙겠습니다!