const [selectGenres, setselectGenres] = useState([]); //유저가 선택한 장르
  const [isAllChecked, setIsAllChecked] = useState(true); //모든 장르 box controller


  //전체 선택 해제, 모든 장르 클릭
  const onCancle = () => {
  setIsAllChecked(true);
  setselectGenres([]);
  };

  //모든 장르 클릭시 = 유저 선택 장르 배열 초기화, 모든 장르 클릭
  const handleAll = (checked) => {
  setselectGenres([]);
  setIsAllChecked(true);
  };

  //장르 클릭시, 유저 선택 장르 배열에 추가됨, 이미 선택된 장르 클릭시 삭제됨
  const handleCheck = (e, checked, id) => {
  setIsAllChecked(false);
  if (checked) {
  setselectGenres([...selectGenres, id]);
  } else {
  setselectGenres(selectGenres.filter((genre) => genre !== id));
  }
  };

  <S.Input
  type="checkbox"
  name="allGenres"
  id="allGenres"
  checked={isAllChecked}
  onChange={(e) => handleAll(e.target.checked)}
  />
  <S.Label htmlFor="allGenres">모든 장르</S.Label>

  <input
  type="checkbox"
  name={genre.name}
  id={genre.id}
  defaultChecked={
  selectGenres.includes(genre.id) ? true : false //선택시, input attribute에 checked 추가됨
  }
  onChange={(e) => handleCheck(e, e.target.checked, genre.id)}
  />
  <label htmlFor={genre.id}>{genre.name}</label>