[학교강의평가사이트] 개발일지(2)

오늘은 기존에 만들었던 로그인 페이지의 코드를 수정하는 시간을 가졌다.

기존 코드가 너무 길고, 다른 작업자들이 봤을 때 알아보기 어려워서

styled-component로 뺄 수 있는건 빼버렸다.

 

따로 login.element.js라는 파일을 만들어 component들을 담아놓아 필요할때마다 가져다 쓰는 방식이다.

export const IdPwSearchLink = styled.div`
      padding: 10px;
      font-size: 16px;
      color:rgb(158,158,158);
      font-weight: bold
`

하나의 컴포넌트 구성은 거의 이런식이다.

이런 모양의 컴포넌트들이 element파일 안에 들어있다.

 

어려웠던 점은 Material UI를 사용하다보니 CSS를 사용하기가 까다로웠는데

(후에 알았지만 라이브러리를 사용하면 CSS사용은 어렵고 그 material ui doc을 확인하면서 사용해야 한다고 한다)

 

<TextField
            margin="normal"
            required
            fullWidth
            id="id" 
            label="아이디 입력"
            name="id"
            autoComplete="id"
            autoFocus
        />

이런식으로 된 것들을 styled-component로 빼기가 힘들어서 아예 함수처럼

export const IdInput = () => {
    return(
        <TextField
            margin="normal"
            required
            fullWidth
            id="id" 
            label="아이디 입력"
            name="id"
            autoComplete="id"
            autoFocus
        />
    );
}

이렇게 함수 안에 통째로 넣어놓고 본 파일에서 함수를 불러와 사용하는 방식으로 했다.

 

---

그리고 로그인의 기능 구현도 하였다.

완벽하게는 아니지만 id, pw를 입력받아 로그인 버튼을 누르게 되면 id,pw 데이터 값을 콘솔에 나타나게 하였다.

 

또한 로그인 유지 체크박스도 useState 훅과 onchange를 사용하여 변화를 체크하고

로그인 버튼을 눌렀을 시의 체크박스 상태도 같이 콘솔 창에 나타나도록 하였다.

이 값들은 나중에 토큰으로 BE(백엔드)에 보낼 값들이다.

 

const [checked, setChecked] = useState(false);

    // 체크박스 이벤트
    const handleChange = (event) => {
    setChecked(event.target.checked);
    };

    // 로그인 버튼 이벤트
    const handleSubmit = (event) => {
      event.preventDefault();
      const data = new FormData(event.currentTarget);
      // 기능구현때는 콘솔안찍고 바로 백엔드로 넘겨주기
      console.log({
        id: data.get('id'),
        password: data.get('password'),
        checkbox: checked
      });
    };

내일은 아이디찾기와 비밀번호 찾기 페이지를 전반적으로 수정해야겠다.