문제 현상

• 로그인 시 필요한 정보인 계정, 패스워드를 input 태그를 사용하여 입력받도록 구현하였다.
• 콘솔창에 아래의 메세지들과 함께 황색 오류가 나타났다.

password field is not contained in a form, 

Input elements should have autocomplete attributes (suggested: "current-password") 

해결

• password 타입의 input 태그는 form 태그 하위에 포함하고
• Input 태그는 자동완성 속성을 지정해주어 해결할 수 있었다.

코드

• 부모 태그를 div => form 태그로 변경

const LoginContainer = styled.form`
  display: flex;
  flex-direction: column;
  align-items: center;
`;

  return (
    <Style.LoginContainer>
      <h1>로그인</h1>
      <div>
        <Style.Input
          placeholder="계정"
          value={userInfo.name}
          autoComplete="username"
          onChange={handleTypeUserName}
        />
      </div>
      <div>
        <Style.Input
          placeholder="비밀번호"
          value={userInfo.password}
          type="password"
          onChange={handleTypePassword}
          autoComplete="current-password"
        />
      </div>
      <div>
        <Style.SubmitButton onClick={handleLogin}>로그인</Style.SubmitButton>
      </div>
    </Style.LoginContainer>
  );

• autocomplete 속성 지정

<Style.Input
	...
	autoComplete="username"
/>
<Style.Input
	...
	autoComplete="current-password"
/>