1. 로그인 안 한 유저가 모달 버튼을 누르면 alert 띄우고, 모달 팝업 막기
2. 파일 && 텍스트 인풋 유효성검사

로그인 여부 확인하기

<StPostModalBtn onClick={ user=="" ? loginAlert : openModal } >
	글 작성하기
</StPostModalBtn>

일단 임시로 버튼에 기능은 넣어놨는데 서버랑 연결해야 유저 정보 가져오는 거 할 수 있을 것 같다 ㅠ

React Hook Form

<StModalText
  required="true"
  maxLength={150}
  placeholder="내용을 입력하세요. (최대 150자)"
  onChange={(e) => {
    const {value} = e.target;
    setPost({...post, text: value},{});
  }}
/>

required만 넣었는데 그냥 됐다... 뭐지..?
maxLength는 이미 사용하고 있었는데 훅폼..이었던 것 같다.
다른 팀원과 프로젝트 뼈대 세팅하는 과정에서 처음부터 훔폭과 함께였나보다...🙄
바보도 이런 바보가 없다 훅폼좋네..ㅎㅎ
근데 import 한 적 없는데.. 머지..

(참고)

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

function Note() {
  const {register} = useForm();
  
  return(
    <form>
      <input
        placeholder="Nickname"
        {...register("nickname", {
          required: true,
          maxLength: 20
        })}
      />
      <input
        placeholder="Email"
        {...register("email", {
          required: "이메일 입력은 필수 입니다.",
          pattern: /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/
        })}
      />
      <button>Add</button>
    </form>
  );
}

export default Note;

로그인 기능 구현 시 참고할 수 있는 리액트훅폼........

(내용 추가) 내가 사용한 것은 리액트훅폼이 아니었습니다~!!😋
확실히 코딩은 내 손으로 짜면서 익혀야 확실한 것... 막상 해보면 쉬움
▶ 리액트훅폼: react-hook-form.com
여기서 테스트해보면서 짜보고 코드를 가져와도 될 것 같다

 <StLoginFormContainer onSubmit={handleSubmit(onSubmit)}>
        <StLoginLable>이메일</StLoginLable>
        <StLoginInput
          type="email"
          {...register("email", { required: true, pattern: /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/ })}
        />
        {errors.email && errors.email.type === "required" && (
          <p> 이메일을 입력해주세요 </p>
        )}
        {errors.email && errors.email.type === "pattern" && (
          <p>올바른 이메일 형식이 아닙니다</p>
        )}

        <StLoginLable>비밀번호</StLoginLable>
        <StLoginInput
          type="password"
          {...register("password", { required: true, minLength:8, pattern: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/ })}
        />
        {errors.password && errors.password.type === "required" && (
          <p> 비밀번호를 입력해주세요</p>
        )}
        {errors.password && errors.password.type === "required" && (
          <p> 비밀번호는 8자 이상입니다</p>
        )}

        <StLoginFormSubmit>로그인</StLoginFormSubmit>
        <StLogintoSignUp onClick={() => navigate("/signup")}>
          계정이 필요한가요? 가입하기
        </StLogintoSignUp>
        <StLogintoMain onClick={() => navigate("/")}>
          홈으로
        </StLogintoMain>
      </StLoginFormContainer>

...register 는 입력을 등록하거나 요소를 선택하고 React Hook Form에 유효성 검사 규칙을 적용할 수 있는 함수를 호출한다.

onBlur={handleBlur}를 사용하면 사용자 경험을 증가시킬 수 있을 것 같지만 아직 써보지는 않아서 정확히 이해하지 못한 상태이다.

⭐⭐⭐⭐⭐ 다음 폼 만들 때는 onBlur={handleBlur} 써보기!!