체크박스 상태관리 3

  const [checkedInputs, setCheckedInputs] = useState<string[]>([]);

const changeHandler = (e: ChangeEvent<HTMLInputElement>) => {
    const checkboxes = document.querySelectorAll("input[type=checkbox]");
    console.log(checkboxes.length);

    if (!checkedInputs.includes(e.target.name)) {
      if (
        e.target.name === "전체선택" ||
        checkedInputs.length === checkboxes.length - 2
      ) {
        let arr: string[] = [];
        checkboxes.forEach((checkbox: any) => arr.push(checkbox.name));
        setCheckedInputs(arr);
      } else {
        setCheckedInputs([...checkedInputs, e.target.name]);
      }
    } else {
      if (e.target.name === "전체선택") {
        setCheckedInputs([]);
      } else {
        setCheckedInputs(
          checkedInputs.filter(
            (el) => el !== e.target.name && el !== "전체선택"
          )
        );
      }
    }
  };



//--------

<CheckBox
            label={"전체 선택"}
            name={"전체선택"}
            checked={checkedInputs.includes("전체선택")}
            onChange={changeHandler}
          />