[Signup] Signup page frontend 구성 및 backend와 연결

[dreamsh19]

signup branch 파서 관련 작업 진행하겠습니다.

• [x] AuthForm 으로 묶인 기존의 loginPage와 분리
• [x] Material-ui 적용
• [x] signUp reducer 구현
• [x] Check Email Duplicate 버튼 추가 (Check Email Exist API와 통신)
• [x] Check Nickname Duplicate 버튼 추가 (Check Username Exist API와 통신)
• [x] Check Password Confirmation 버튼 추가
• [x] submit 시 backend에 POST request 요청 및 response 확인

[dreamsh19]

@deploy-soon
backend와 통신하는 과정에서 궁금한 점이 생겨 질문 드립니다.

1. 빈 email로 check email exists API 호출시(curl "http://localhost:8000/api/user/check/email/") 404 error를 반환하는데 의도하신 구현인가요? ( Check Username Exists API도 같은 결과네요) 사실 프론트에서 빈 email의 경우 API를 호출하지 않도록 구현해서 직접 API url에 접근하지 않는 이상 문제는 없어보이긴 합니다.

2. 임의의 형식에 맞지 않는 email로 API request를 보내면( 예를 들어, curl "http://localhost:8000/api/user/check/email/arbitrary/" API가 잘 작동하는데 form check는 프론트에서 하는 것만으로 충분할까요?

[dreamsh19]

그리고 Backend setup할 때 python manage.py runserver 이후 python manage.py migrate까지 해야 제대로 작동하는 것 같습니다. 관련하여 backend/README.md의 setup부분에 해당 내용을 추가하는게 어떨까요?

@deploy-soon

[deploy-soon]

1. 현재 백엔드에서 check/email 을 할 경우 email을 받을 때 정규식 표현으로 받고 있어서 curl "http://localhost:8000/api/user/check/email/" 처럼 요청하면 잘못된 url이라 인식합니다. 404 에러가 그 때문에 나올 것 같은데 어쩔 수 없을 것 같네요...

   urlpatterns = [
   ...,
   path('check/email/<str:email>/', CheckUserExist.as_view(), name="email check"),
   path('check/nickname/<str:nickname>/', CheckUserExist.as_view(), name="nickname check")
   ]

2. 잘못된 형식으로 백엔드에 회원가입을 요청하면 response로 400 에러를 받을 것입니다. 프론트에서 체크만 해도 될 것 같습니다.

3. 그러고 보니 그부분을 빠뜨렸네요 😩 해당 브랜치 작업하실 때 넣어주실 수 있을까요?

cc. @dreamsh19

[dreamsh19]

3. 그러고 보니 그부분을 빠뜨렸네요 😩 해당 브랜치 작업하실 때 넣어주실 수 있을까요?

반영했습니다. a7d7660438330e183698ce4799969fdf20cad630

@deploy-soon

[deploy-soon]

그런데 runserver를 하기 전에 migrate 하지 않나요?

[dreamsh19]

이런... 수정해서 다시 커밋했습니다. ed2b43eab214cd534d8e61d678e4bb9b9424141a @deploy-soon

[deploy-soon]

아 그리고 signup 부분에도 관련있을 것 같아서 말씀드려요 예전에 email format 경고 같은 거 보여주는 부분이 문제있던 것 같은데 이미 구현된 라이브러리가 있네요.

https://material-ui.com/components/text-fields/ Validation 부분

import React from 'react';
import TextField from '@material-ui/core/TextField';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 200,
  },
}));

export default function ValidationTextFields() {
  const classes = useStyles();

  return (
    <form className={classes.container} noValidate autoComplete="off">
      <div>
        <TextField
          error
          id="standard-error"
          label="Error"
          defaultValue="Hello World"
          className={classes.textField}
          margin="normal"
        />
        <TextField
          error
          id="standard-error"
          label="Error"
          defaultValue="Hello World"
          helperText="Incorrect entry."
          className={classes.textField}
          margin="normal"
        />
      </div>
      <div>
        <TextField
          error
          id="filled-error"
          label="Error"
          defaultValue="Hello World"
          className={classes.textField}
          margin="normal"
          variant="filled"
        />
        <TextField
          error
          id="filled-error"
          label="Error"
          defaultValue="Hello World"
          helperText="Incorrect entry."
          className={classes.textField}
          margin="normal"
          variant="filled"
        />
      </div>
      <div>
        <TextField
          error
          id="outlined-error"
          label="Error"
          defaultValue="Hello World"
          className={classes.textField}
          margin="normal"
          variant="outlined"
        />
        <TextField
          error
          id="outlined-error"
          label="Error"
          defaultValue="Hello World"
          helperText="Incorrect entry."
          className={classes.textField}
          margin="normal"
          variant="outlined"
        />
      </div>
    </form>
  );
}