[TIL] 230116

- 랜딩페이지 1차 UI 완료

*13인치 노트북에서 background image 하단 잘리는 문제 해결 필요

 

- 디자이너님과 회의

1. 유저가 보는 첫 화면이 로그인 페이지가 아니라 랜딩페이지

2. 회원가입을 하지 않은 경우 게임하러 가기 버튼이 아니라 회원가입 버튼이 보임

3. 회원가입-로그인을 하면 로비(게임방 리스트 페이지)로 감

4. 로비에서 뒤로 가기 버튼을 누르면 랜딩페이지로 오는데 이 때는 게임하러 가기 버튼으로 보임

- 로그인 여부에 따라 버튼 텍스트를 다르게 보이도록 해야 함

5. 회원가입, 로그인 시 help text 는 toast message 로 보여줌(지금 디자인 최대한 보존)

6. 게임 룰 확인 모달이 보일 때 뒤로가기와 설정 버튼이 보이나 클릭은 하지 못하도록 막기

 

- 로그인 UI 작업

[Error] Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef(

)

-> Input 스타일 컴포넌트를 input 태그로 바꿔서 해결

 

함수 컴포넌트는 인스턴스가 없기 때문에 함수 컴포넌트에 ref 어트리뷰트를 사용할 수 없습니다.

 

이메일과 비밀번호를 useForm 으로 유효성 검사를 했다.

register

This method allows you to register an input or select element and apply validation rules to React Hook Form.

useFo

input에 register 속성만 넣었는데 아래 블로그를 보니 ref 속성도 있었다. useForm을 이용할 때는 styled-component가 아니라 그냥 html 태그 input을 써야하는 것 같다.

 

*form 태그와 연결 시키는 방법 type=submit

원래는 로그인 버튼이 아니라 input 에 type=submit이었다.

검색해보니 button에도 type=submit 을 줄 수 있었다.

form 태그 (StLoginContainer = styeld.form`~~`) 안 button (StLoginBtn = styled.button`~~`)에 type=submit을 주고 안에 이미지를 넣어서 정상 작동 확인함.

 

수정 전

  return (
    <StLogin>
      {/* <form onSubmit={handleSubmit(onClickLogin)}> */}
      <StLoginContainer onSubmit={handleSubmit(onClickLogin)}>
        <StTitle>
          <img src={loginTitleBtn} alt="title_image" />
        </StTitle>
        <StInputBox>
          <Input
            name="email"
            placeholder="이메일을 입력해주세요"
            // eslint-disable-next-line react/jsx-props-no-spreading
            {...register('email', { required: true })}
          />
          <StHelpText>{errors.email?.message}</StHelpText>
          <Input
            name="password"
            type="password"
            placeholder="비밀번호를 입력해주세요."
            // eslint-disable-next-line react/jsx-props-no-spreading
            {...register('password', { required: true })}
          />
          <StHelpText>{errors.password?.message}</StHelpText>
        </StInputBox>
        <StBtnBox>
          <StLoginBtn type="submit">
            <img src={loginBtn} alt="login_image" />
          </StLoginBtn>
          <KaKaoBtn />
          <StSignUp>
            <p>회원이 아니신가요?</p>
            <Link to="/signup">
              <button>
                <p>회원가입 하기</p>
              </button>
            </Link>
          </StSignUp>
        </StBtnBox>
      </StLoginContainer>
      {/* </form> */}
    </StLogin>
  );

수정 후

import { useForm } from 'react-hook-form';

const schema = yup.object().shape({
  email: yup
    .string()
    .email('올바른 이메일을 입력해주세요.')
    .required('올바른 이메일을 입력해주세요.'),
  password: yup.string().required('올바른 비밀번호를 입력해주세요'),
});

  // 유효성 검사
  const {
    register,
    handleSubmit,
    formState: { errors, isValid },
  } = useForm({
    resolver: yupResolver(schema),
    mode: 'onChange',
  });

return (
    <StLogin>
      {/* <form onSubmit={handleSubmit(onClickLogin)}> */}
      <StLoginContainer onSubmit={handleSubmit(onClickLogin)}>
        <StTitle>
          <img src={loginTitleBtn} alt="title_image" />
        </StTitle>
        <StInputBox>
          <input
            name="email"
            placeholder="이메일을 입력해주세요"
            // eslint-disable-next-line react/jsx-props-no-spreading
            {...register('email', { required: true })}
          />
          <StHelpText>{errors.email?.message}</StHelpText>
          <input
            name="password"
            type="password"
            placeholder="비밀번호를 입력해주세요."
            // eslint-disable-next-line react/jsx-props-no-spreading
            {...register('password', { required: true })}
          />
          <StHelpText>{errors.password?.message}</StHelpText>
        </StInputBox>
        <StBtnBox>
          <StLoginBtn type="submit">
            <img src={loginBtn} alt="login_image" />
          </StLoginBtn>
          <KaKaoBtn />
          <StSignUp>
            <p>회원이 아니신가요?</p>
            <Link to="/signup">
              <button>
                <p>회원가입 하기</p>
              </button>
            </Link>
          </StSignUp>
        </StBtnBox>
      </StLoginContainer>
      {/* </form> */}
    </StLogin>
  );

- 게임로직 중 정답제출 기능 추가

 

https://react-hook-form.com/api/useform/register/

useForm - register

https://velog.io/@dev_eunchae/%EC%BD%94%EB%93%9C%EC%BA%A0%ED%94%84-%ED%8C%80%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-4%EC%A3%BC%EC%B0%A8-Warning-Function-components-cannot-be-given-refs.-Attempts-to-access-this-ref-will-fail.-Did-you-mean-to-use-React.forwardRef

코드캠프 팀프로젝트 4주차 - Warning: Function components cannot be given refs. Attempts to access this ref will fail.

https://sambalim.tistory.com/151

React Ref 이해하기

 

https://been.tistory.com/31

리액트 ref 와 forwardRef (with. react-hook-form)

https://evan6-6.tistory.com/m/75

Did you mean to use React.forwardRef()? Nope