Couch coding: fifth

프로젝트 개발

수업 내용

• CORS 와 proxy
• CI/CD 설명
• 로그인 에러 트러블 슈팅
• ENV+ CRA
• Mocking WebAPI: Json-server

작업 내용

• 스터디 만들기 페이지 기능(Form 유효성 검사 및 POST request)구현
• 로딩스피너 UI

Form 유효성 검사

useState함수 사용

import { useState } from 'react';

const UseInput = validateValue => {
  const [enteredValue, setEnteredValue] = useState('');
  const [isTouched, setIsTouched] = useState(false);
  const [selectedValue, setSelectedValue] = useState('');

  const valueIsValid = validateValue(enteredValue);
  const hasError = !valueIsValid && isTouched;

  const valueChangeHandler = event => {
    setEnteredValue(event.target.value);
  };

  const inputBlurHandler = event => {
    setIsTouched(true);
  };

  const reset = () => {
    setEnteredValue('');
    setIsTouched(false);
  };

  return {
    value: enteredValue,
    isValid: valueIsValid,
    hasError,
    valueChangeHandler,
    inputBlurHandler,
    reset,
  };
};

export default UseInput;

import UseInput from './UseInput';

const isNotEmpty = value => value.trim() !== '';

const Form = () => {

const {
    value: studyNameValue,
    isValid: studyNameIsValid,
    hasError: studyNameHasError,
    valueChangeHandler: studyNameChangeHandler,
    inputBlurHandler: studyNameBlurHandler,
    reset: resetStudyNameInput,
  } = UseInput(isNotEmpty);

let formIsValid = false;

  if (
    nameIsValid
  ) {
    formIsValid = true;
  }

  const submitHandler = async event => {
    event.preventDefault();

    if (!formIsValid) {
      return;
    }
    const submitData = {
      studyName: studyNameValue,
    };

resetStudyNameInput();

};

const studyNameClasses = studyNameHasError
    ? 'form-control invalid'
    : 'form-control';

return (
    <form onSubmit={submitHandler}>
        <NameInput className={studyNameClasses}>
          <h4>Name</h4>
          <input
            ref={studyNameIsInputRef}
            value={studyNameValue || ''}
            onChange={studyNameChangeHandler}
            onBlur={studyNameBlurHandler}
            type="text"
            placeholder="이름을 입력해주세요"
          />
          {studyNameHasError && <p>이름을 입력해주세요</p>}
        </NameInput>
        <Button
          disabled={!formIsValid}
          type="submit"
          onChange={submitHandler}
        >
          완료
        </Button>
    </form>
  );
}

export default Form;