<aside> ✍️ 작성자: 김혜원 작성일: 24.06.03

</aside>

에러 메시지

A form field element should have an id or name attribute.

An element doesn't have an autocomplete attribute.

원인

Input element와 select element에 id 또는 name과 autocomplete attribute을 작성하지 않음.

해결 방법

Name attribute을 작성하고, 해당 input type에 맞는 autocomplete attribute을 주었다.

Before

// components/form/LogInForm.tsx
  <FormControl>
    <Input
      placeholder={item.label}
      className="rounded border-gray-light placeholder:text-gray"
      {...field}
    />
  </FormControl>
  <FormMessage />

	// components/modal/SearchModal.tsx
	<input
	  type="text"
	  placeholder="검색어를 입력하세요"
	  className="flex-1 mx-3 outline-0 placeholder:text-gray"
	  value={searchTerm}
  />

// components/home/SortSelect.tsx
  <Select
    required
    defaultValue="like-descending"
    onValueChange={handleSortChange}
  >

After

// components/form/LogInForm.tsx
  <FormControl>
    <Input
      placeholder={item.label}
      autoComplete={
        field.name === "email" ? "email" : "current-password"
      }
      className="rounded border-gray-light placeholder:text-gray"
      {...field}
    />
  </FormControl>
  <FormMessage />

	// components/modal/SearchModal.tsx
	<input
	  type="text"
	  name="search"
	  placeholder="검색어를 입력하세요"
	  className="flex-1 mx-3 outline-0 placeholder:text-gray"
	  value={searchTerm}
  />

// components/home/SortSelect.tsx
  <Select
    required
    name="sort-class"
    defaultValue="like-descending"
    onValueChange={handleSortChange}
  >